@safe-stars/components/dist/swaps-B_Wi8Xev.cjs

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index-CtZaCMo8.cjs"),r=require("./if-defined-MmHKu2JE.cjs");require("./index-2v8aP99g.cjs");const y=require("./index-C5EcBrNZ.cjs");require("./index-CfJmZxsA.cjs");const a=require("./index-DoDNduO-.cjs");require("./index-25Apucqb.cjs");require("./index-BQl9E2h4.cjs");require("./index-BXulAD-4.cjs");const P={numericInputKeyDown(u,e,t){const o=["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"],s=u.metaKey||u.ctrlKey,i=u.key,l=i.toLocaleLowerCase(),c=l==="a",h=l==="c",x=l==="v",S=l==="x",T=i===",",$=i===".",I=i>="0"&&i<="9";!s&&(c||h||x||S)&&u.preventDefault(),e==="0"&&!T&&!$&&i==="0"&&u.preventDefault(),e==="0"&&I&&(t(i),u.preventDefault()),(T||$)&&(e||(t("0."),u.preventDefault()),(e!=null&&e.includes(".")||e!=null&&e.includes(","))&&u.preventDefault()),!I&&!o.includes(i)&&!$&&!T&&u.preventDefault()}},D=n.i`
  :host {
    width: 100%;
  }

  .details-container > wui-flex {
    background: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xxs);
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-xxs);
    cursor: pointer;
  }

  .details-content-container {
    padding: var(--wui-spacing-1xs);
    padding-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details-content-container > wui-flex {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s);
    padding-left: var(--wui-spacing-s);
    padding-right: var(--wui-spacing-1xs);
    border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs));
    background: var(--wui-color-gray-glass-002);
  }

  .details-row-title {
    white-space: nowrap;
  }

  .details-row.provider-free-row {
    padding-right: var(--wui-spacing-xs);
  }
`;var m=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};const U=n.ConstantsUtil.CONVERT_SLIPPAGE_TOLERANCE;let d=class extends n.i$1{constructor(){var e;super(),this.unsubscribe=[],this.networkName=(e=n.ChainController.state.activeCaipNetwork)==null?void 0:e.name,this.detailsOpen=!1,this.sourceToken=a.SwapController.state.sourceToken,this.toToken=a.SwapController.state.toToken,this.toTokenAmount=a.SwapController.state.toTokenAmount,this.sourceTokenPriceInUSD=a.SwapController.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=a.SwapController.state.toTokenPriceInUSD,this.priceImpact=a.SwapController.state.priceImpact,this.maxSlippage=a.SwapController.state.maxSlippage,this.networkTokenSymbol=a.SwapController.state.networkTokenSymbol,this.inputError=a.SwapController.state.inputError,this.unsubscribe.push(a.SwapController.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.toTokenAmount=t.toTokenAmount,this.priceImpact=t.priceImpact,this.maxSlippage=t.maxSlippage,this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.inputError=t.inputError}))}render(){const e=this.toTokenAmount&&this.maxSlippage?n.NumberUtil.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const t=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return n.x`
      <wui-flex flexDirection="column" alignItems="center" gap="1xs" class="details-container">
        <wui-flex flexDirection="column">
          <button @click=${this.toggleDetails.bind(this)}>
            <wui-flex justifyContent="space-between" .padding=${["0","xs","0","xs"]}>
              <wui-flex justifyContent="flex-start" flexGrow="1" gap="xs">
                <wui-text variant="small-400" color="fg-100">
                  1 ${this.sourceToken.symbol} =
                  ${r.UiHelperUtil.formatNumberToLocalString(t,3)}
                  ${this.toToken.symbol}
                </wui-text>
                <wui-text variant="small-400" color="fg-200">
                  $${r.UiHelperUtil.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
                </wui-text>
              </wui-flex>
              <wui-icon name="chevronBottom"></wui-icon>
            </wui-flex>
          </button>
          ${this.detailsOpen?n.x`
                <wui-flex flexDirection="column" gap="xs" class="details-content-container">
                  ${this.priceImpact?n.x` <wui-flex flexDirection="column" gap="xs">
                        <wui-flex
                          justifyContent="space-between"
                          alignItems="center"
                          class="details-row"
                        >
                          <wui-flex alignItems="center" gap="xs">
                            <wui-text class="details-row-title" variant="small-400" color="fg-150">
                              Price impact
                            </wui-text>
                            <w3m-tooltip-trigger
                              text="Price impact reflects the change in market price due to your trade"
                            >
                              <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
                            </w3m-tooltip-trigger>
                          </wui-flex>
                          <wui-flex>
                            <wui-text variant="small-400" color="fg-200">
                              ${r.UiHelperUtil.formatNumberToLocalString(this.priceImpact,3)}%
                            </wui-text>
                          </wui-flex>
                        </wui-flex>
                      </wui-flex>`:null}
                  ${this.maxSlippage&&this.sourceToken.symbol?n.x`<wui-flex flexDirection="column" gap="xs">
                        <wui-flex
                          justifyContent="space-between"
                          alignItems="center"
                          class="details-row"
                        >
                          <wui-flex alignItems="center" gap="xs">
                            <wui-text class="details-row-title" variant="small-400" color="fg-150">
                              Max. slippage
                            </wui-text>
                            <w3m-tooltip-trigger
                              text=${`Max slippage sets the minimum amount you must receive for the transaction to proceed. ${e?`Transaction will be reversed if you receive less than ${r.UiHelperUtil.formatNumberToLocalString(e,6)} ${this.toToken.symbol} due to price changes.`:""}`}
                            >
                              <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon>
                            </w3m-tooltip-trigger>
                          </wui-flex>
                          <wui-flex>
                            <wui-text variant="small-400" color="fg-200">
                              ${r.UiHelperUtil.formatNumberToLocalString(this.maxSlippage,6)}
                              ${this.toToken.symbol} ${U}%
                            </wui-text>
                          </wui-flex>
                        </wui-flex>
                      </wui-flex>`:null}
                  <wui-flex flexDirection="column" gap="xs">
                    <wui-flex
                      justifyContent="space-between"
                      alignItems="center"
                      class="details-row provider-free-row"
                    >
                      <wui-flex alignItems="center" gap="xs">
                        <wui-text class="details-row-title" variant="small-400" color="fg-150">
                          Provider fee
                        </wui-text>
                      </wui-flex>
                      <wui-flex>
                        <wui-text variant="small-400" color="fg-200">0.85%</wui-text>
                      </wui-flex>
                    </wui-flex>
                  </wui-flex>
                </wui-flex>
              `:null}
        </wui-flex>
      </wui-flex>
    `}toggleDetails(){this.detailsOpen=!this.detailsOpen}};d.styles=[D];m([r.r()],d.prototype,"networkName",void 0);m([r.n()],d.prototype,"detailsOpen",void 0);m([r.r()],d.prototype,"sourceToken",void 0);m([r.r()],d.prototype,"toToken",void 0);m([r.r()],d.prototype,"toTokenAmount",void 0);m([r.r()],d.prototype,"sourceTokenPriceInUSD",void 0);m([r.r()],d.prototype,"toTokenPriceInUSD",void 0);m([r.r()],d.prototype,"priceImpact",void 0);m([r.r()],d.prototype,"maxSlippage",void 0);m([r.r()],d.prototype,"networkTokenSymbol",void 0);m([r.r()],d.prototype,"inputError",void 0);d=m([r.customElement("w3m-swap-details")],d);const W=n.i`
  :host {
    width: 100%;
  }

  :host > wui-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--wui-border-radius-s);
    padding: var(--wui-spacing-xl);
    padding-right: var(--wui-spacing-s);
    background-color: var(--wui-color-gray-glass-002);
    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    position: relative;
  }

  wui-shimmer.market-value {
    opacity: 0;
  }

  :host > wui-flex > svg.input_mask {
    position: absolute;
    inset: 0;
    z-index: 5;
  }

  :host wui-flex .input_mask__border,
  :host wui-flex .input_mask__background {
    transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1);
    will-change: fill;
  }

  :host wui-flex .input_mask__border {
    fill: var(--wui-color-gray-glass-020);
  }

  :host wui-flex .input_mask__background {
    fill: var(--wui-color-gray-glass-002);
  }
`;var A=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};let C=class extends n.i$1{constructor(){super(...arguments),this.target="sourceToken"}render(){return n.x`
      <wui-flex class justifyContent="space-between">
        <wui-flex
          flex="1"
          flexDirection="column"
          alignItems="flex-start"
          justifyContent="center"
          class="swap-input"
          gap="xxs"
        >
          <wui-shimmer width="80px" height="40px" borderRadius="xxs" variant="light"></wui-shimmer>
        </wui-flex>
        ${this.templateTokenSelectButton()}
      </wui-flex>
    `}templateTokenSelectButton(){return n.x`
      <wui-flex
        class="swap-token-button"
        flexDirection="column"
        alignItems="flex-end"
        justifyContent="center"
        gap="xxs"
      >
        <wui-shimmer width="80px" height="40px" borderRadius="3xl" variant="light"></wui-shimmer>
      </wui-flex>
    `}};C.styles=[W];A([r.n()],C.prototype,"target",void 0);C=A([r.customElement("w3m-swap-input-skeleton")],C);const V=n.i`
  :host > wui-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--wui-border-radius-s);
    background-color: var(--wui-color-gray-glass-002);
    padding: var(--wui-spacing-xl);
    padding-right: var(--wui-spacing-s);
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);
    position: relative;
    transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg);
    will-change: background-color;
  }

  :host wui-flex.focus {
    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005);
  }

  :host > wui-flex .swap-input,
  :host > wui-flex .swap-token-button {
    z-index: 10;
  }

  :host > wui-flex .swap-input {
    -webkit-mask-image: linear-gradient(
      270deg,
      transparent 0px,
      transparent 8px,
      black 24px,
      black 25px,
      black 32px,
      black 100%
    );
    mask-image: linear-gradient(
      270deg,
      transparent 0px,
      transparent 8px,
      black 24px,
      black 25px,
      black 32px,
      black 100%
    );
  }

  :host > wui-flex .swap-input input {
    background: none;
    border: none;
    height: 42px;
    width: 100%;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.28px;
    outline: none;
    caret-color: var(--wui-color-accent-100);
    color: var(--wui-color-fg-100);
    padding: 0px;
  }

  :host > wui-flex .swap-input input:focus-visible {
    outline: none;
  }

  :host > wui-flex .swap-input input::-webkit-outer-spin-button,
  :host > wui-flex .swap-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .max-value-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--wui-color-gray-glass-020);
    padding-left: 0px;
  }

  .market-value {
    min-height: 18px;
  }
`;var f=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};const E=5e-5;let g=class extends n.i$1{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const e=this.marketValue||"0",t=n.NumberUtil.bigNumber(e).gt("0");return n.x`
      <wui-flex class="${this.focused?"focus":""}" justifyContent="space-between">
        <wui-flex
          flex="1"
          flexDirection="column"
          alignItems="flex-start"
          justifyContent="center"
          class="swap-input"
        >
          <input
            data-testid="swap-input-${this.target}"
            @focusin=${()=>this.onFocusChange(!0)}
            @focusout=${()=>this.onFocusChange(!1)}
            ?disabled=${this.disabled}
            .value=${this.value}
            @input=${this.dispatchInputChangeEvent}
            @keydown=${this.handleKeydown}
            placeholder="0"
            type="text"
            inputmode="decimal"
          />
          <wui-text class="market-value" variant="small-400" color="fg-200">
            ${t?`$${r.UiHelperUtil.formatNumberToLocalString(this.marketValue,2)}`:null}
          </wui-text>
        </wui-flex>
        ${this.templateTokenSelectButton()}
      </wui-flex>
    `}handleKeydown(e){return P.numericInputKeyDown(e,this.value,t=>{var o;return(o=this.onSetAmount)==null?void 0:o.call(this,this.target,t)})}dispatchInputChangeEvent(e){if(!this.onSetAmount)return;const t=e.target.value.replace(/[^0-9.]/gu,"");t===","||t==="."?this.onSetAmount(this.target,"0."):t.endsWith(",")?this.onSetAmount(this.target,t.replace(",",".")):this.onSetAmount(this.target,t)}setMaxValueToInput(){var e;(e=this.onSetMaxValue)==null||e.call(this,this.target,this.balance)}templateTokenSelectButton(){return this.token?n.x`
      <wui-flex
        class="swap-token-button"
        flexDirection="column"
        alignItems="flex-end"
        justifyContent="center"
        gap="xxs"
      >
        <wui-token-button
          data-testid="swap-input-token-${this.target}"
          text=${this.token.symbol}
          imageSrc=${this.token.logoUri}
          @click=${this.onSelectToken.bind(this)}
        >
        </wui-token-button>
        <wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex>
      </wui-flex>
    `:n.x` <wui-button
        data-testid="swap-select-token-button-${this.target}"
        class="swap-token-button"
        size="md"
        variant="accent"
        @click=${this.onSelectToken.bind(this)}
      >
        Select token
      </wui-button>`}tokenBalanceTemplate(){const e=n.NumberUtil.multiply(this.balance,this.price),t=e?e==null?void 0:e.gt(E):!1;return n.x`
      ${t?n.x`<wui-text variant="small-400" color="fg-200">
            ${r.UiHelperUtil.formatNumberToLocalString(this.balance,2)}
          </wui-text>`:null}
      ${this.target==="sourceToken"?this.tokenActionButtonTemplate(t):null}
    `}tokenActionButtonTemplate(e){return e?n.x` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
        <wui-text color="accent-100" variant="small-600">Max</wui-text>
      </button>`:n.x` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
      <wui-text color="accent-100" variant="small-600">Buy</wui-text>
    </button>`}onFocusChange(e){this.focused=e}onSelectToken(){n.EventsController.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),n.RouterController.push("SwapSelectToken",{target:this.target})}onBuyToken(){n.RouterController.push("OnRampProviders")}};g.styles=[V];f([r.n()],g.prototype,"focused",void 0);f([r.n()],g.prototype,"balance",void 0);f([r.n()],g.prototype,"value",void 0);f([r.n()],g.prototype,"price",void 0);f([r.n()],g.prototype,"marketValue",void 0);f([r.n()],g.prototype,"disabled",void 0);f([r.n()],g.prototype,"target",void 0);f([r.n()],g.prototype,"token",void 0);f([r.n()],g.prototype,"onSetAmount",void 0);f([r.n()],g.prototype,"onSetMaxValue",void 0);g=f([r.customElement("w3m-swap-input")],g);const R=n.i`
  :host > wui-flex:first-child {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  :host > wui-flex:first-child::-webkit-scrollbar {
    display: none;
  }

  wui-loading-hexagon {
    position: absolute;
  }

  .action-button {
    width: 100%;
    border-radius: var(--wui-border-radius-xs);
  }

  .action-button:disabled {
    border-color: 1px solid var(--wui-color-gray-glass-005);
  }

  .swap-inputs-container {
    position: relative;
  }

  .replace-tokens-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: var(--wui-spacing-1xs);
    border-radius: var(--wui-border-radius-xs);
    background-color: var(--wui-color-modal-bg-base);
    padding: var(--wui-spacing-xxs);
  }

  .replace-tokens-button-container > button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    padding: var(--wui-spacing-xs);
    border: none;
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
    transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1);
    will-change: background-color;
    z-index: 20;
  }

  .replace-tokens-button-container > button:hover {
    background: var(--wui-color-gray-glass-005);
  }

  .details-container > wui-flex {
    background: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xxs);
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-xxs);
    transition: background 0.2s linear;
  }

  .details-container > wui-flex > button:hover {
    background: var(--wui-color-gray-glass-002);
  }

  .details-content-container {
    padding: var(--wui-spacing-1xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details-content-container > wui-flex {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s) var(--wui-spacing-xl);
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
  }
`;var p=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mSwapView=class extends n.i$1{constructor(){var e,t;super(),this.unsubscribe=[],this.initialParams=(e=n.RouterController.state.data)==null?void 0:e.swap,this.detailsOpen=!1,this.caipAddress=n.AccountController.state.caipAddress,this.caipNetworkId=(t=n.ChainController.state.activeCaipNetwork)==null?void 0:t.caipNetworkId,this.initialized=a.SwapController.state.initialized,this.loadingQuote=a.SwapController.state.loadingQuote,this.loadingPrices=a.SwapController.state.loadingPrices,this.loadingTransaction=a.SwapController.state.loadingTransaction,this.sourceToken=a.SwapController.state.sourceToken,this.sourceTokenAmount=a.SwapController.state.sourceTokenAmount,this.sourceTokenPriceInUSD=a.SwapController.state.sourceTokenPriceInUSD,this.toToken=a.SwapController.state.toToken,this.toTokenAmount=a.SwapController.state.toTokenAmount,this.toTokenPriceInUSD=a.SwapController.state.toTokenPriceInUSD,this.inputError=a.SwapController.state.inputError,this.fetchError=a.SwapController.state.fetchError,this.onDebouncedGetSwapCalldata=n.CoreHelperUtil.debounce(async()=>{await a.SwapController.swapTokens()},200),n.ChainController.subscribeKey("activeCaipNetwork",o=>this.onCaipNetworkChange({newCaipNetwork:o,resetSwapState:!0,initializeSwapState:!1})),n.AccountController.subscribeKey("caipAddress",o=>this.onCaipAddressChange({newCaipAddress:o,resetSwapState:!0,initializeSwapState:!1})),this.unsubscribe.push(n.ChainController.subscribeKey("activeCaipNetwork",o=>this.onCaipNetworkChange({newCaipNetwork:o,resetSwapState:!1,initializeSwapState:!0})),n.AccountController.subscribeKey("caipAddress",o=>this.onCaipAddressChange({newCaipAddress:o,resetSwapState:!1,initializeSwapState:!0})),n.ModalController.subscribeKey("open",o=>{o||a.SwapController.resetState()}),n.RouterController.subscribeKey("view",o=>{o.includes("Swap")||a.SwapController.resetValues()}),a.SwapController.subscribe(o=>{this.initialized=o.initialized,this.loadingQuote=o.loadingQuote,this.loadingPrices=o.loadingPrices,this.loadingTransaction=o.loadingTransaction,this.sourceToken=o.sourceToken,this.sourceTokenAmount=o.sourceTokenAmount,this.sourceTokenPriceInUSD=o.sourceTokenPriceInUSD,this.toToken=o.toToken,this.toTokenAmount=o.toTokenAmount,this.toTokenPriceInUSD=o.toTokenPriceInUSD,this.inputError=o.inputError,this.fetchError=o.fetchError}))}async firstUpdated(){a.SwapController.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(e=>e==null?void 0:e()),clearInterval(this.interval)}render(){return n.x`
      <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s">
        ${this.initialized?this.templateSwap():this.templateLoading()}
      </wui-flex>
    `}watchTokensAndValues(){this.interval=setInterval(()=>{a.SwapController.getNetworkTokenPrice(),a.SwapController.getMyTokensWithBalance(),a.SwapController.swapTokens()},1e4)}templateSwap(){return n.x`
      <wui-flex flexDirection="column" gap="s">
        <wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container">
          ${this.templateTokenInput("sourceToken",this.sourceToken)}
          ${this.templateTokenInput("toToken",this.toToken)} ${this.templateReplaceTokensButton()}
        </wui-flex>
        ${this.templateDetails()} ${this.templateActionButton()}
      </wui-flex>
    `}actionButtonLabel(){return this.fetchError?"Swap":!this.sourceToken||!this.toToken?"Select token":this.sourceTokenAmount?this.inputError?this.inputError:"Review swap":"Enter amount"}templateReplaceTokensButton(){return n.x`
      <wui-flex class="replace-tokens-button-container">
        <button @click=${this.onSwitchTokens.bind(this)}>
          <wui-icon name="recycleHorizontal" color="fg-250" size="lg"></wui-icon>
        </button>
      </wui-flex>
    `}templateLoading(){return n.x`
      <wui-flex flexDirection="column" gap="l">
        <wui-flex flexDirection="column" alignItems="center" gap="xs" class="swap-inputs-container">
          <w3m-swap-input-skeleton target="sourceToken"></w3m-swap-input-skeleton>
          <w3m-swap-input-skeleton target="toToken"></w3m-swap-input-skeleton>
          ${this.templateReplaceTokensButton()}
        </wui-flex>
        ${this.templateActionButton()}
      </wui-flex>
    `}templateTokenInput(e,t){var c,h;const o=(c=a.SwapController.state.myTokensWithBalance)==null?void 0:c.find(x=>(x==null?void 0:x.address)===(t==null?void 0:t.address)),s=e==="toToken"?this.toTokenAmount:this.sourceTokenAmount,i=e==="toToken"?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,l=n.NumberUtil.parseLocalStringToNumber(s)*i;return n.x`<w3m-swap-input
      .value=${e==="toToken"?this.toTokenAmount:this.sourceTokenAmount}
      .disabled=${e==="toToken"}
      .onSetAmount=${this.handleChangeAmount.bind(this)}
      target=${e}
      .token=${t}
      .balance=${(h=o==null?void 0:o.quantity)==null?void 0:h.numeric}
      .price=${o==null?void 0:o.price}
      .marketValue=${l}
      .onSetMaxValue=${this.onSetMaxValue.bind(this)}
    ></w3m-swap-input>`}onSetMaxValue(e,t){const o=n.NumberUtil.bigNumber(t||"0");this.handleChangeAmount(e,o.gt(0)?o.toFixed(20):"0")}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:n.x`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}handleChangeAmount(e,t){a.SwapController.clearError(),e==="sourceToken"?a.SwapController.setSourceTokenAmount(t):a.SwapController.setToTokenAmount(t),this.onDebouncedGetSwapCalldata()}templateActionButton(){const e=!this.toToken||!this.sourceToken,t=!this.sourceTokenAmount,o=this.loadingQuote||this.loadingPrices||this.loadingTransaction,s=o||e||t||this.inputError;return n.x` <wui-flex gap="xs">
      <wui-button
        data-testid="swap-action-button"
        class="action-button"
        fullWidth
        size="lg"
        borderRadius="xs"
        variant=${e?"neutral":"main"}
        .loading=${o}
        .disabled=${s}
        @click=${this.onSwapPreview.bind(this)}
      >
        ${this.actionButtonLabel()}
      </wui-button>
    </wui-flex>`}onSwitchTokens(){a.SwapController.switchTokens()}async onSwapPreview(){var t,o,s;const e=n.ChainController.state.activeChain;this.fetchError&&await a.SwapController.swapTokens(),n.EventsController.sendEvent({type:"track",event:"INITIATE_SWAP",properties:{network:this.caipNetworkId||"",swapFromToken:((t=this.sourceToken)==null?void 0:t.symbol)||"",swapToToken:((o=this.toToken)==null?void 0:o.symbol)||"",swapFromAmount:this.sourceTokenAmount||"",swapToAmount:this.toTokenAmount||"",isSmartAccount:((s=n.AccountController.state.preferredAccountTypes)==null?void 0:s[e])===n.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT}}),n.RouterController.push("SwapPreview")}async handleSwapParameters(){this.initialParams&&(a.SwapController.state.initialized||await new Promise(t=>{const o=a.SwapController.subscribeKey("initialized",s=>{s&&(o==null||o(),t())})}),await this.setSwapParameters(this.initialParams))}async setSwapParameters({amount:e,fromToken:t,toToken:o}){(!a.SwapController.state.tokens||!a.SwapController.state.myTokensWithBalance)&&await new Promise(l=>{const c=a.SwapController.subscribeKey("myTokensWithBalance",h=>{h&&h.length>0&&(c==null||c(),l())});setTimeout(()=>{c==null||c(),l()},5e3)});const s=[...a.SwapController.state.tokens||[],...a.SwapController.state.myTokensWithBalance||[]];if(t){const i=s.find(l=>l.symbol.toLowerCase()===t.toLowerCase());i&&a.SwapController.setSourceToken(i)}if(o){const i=s.find(l=>l.symbol.toLowerCase()===o.toLowerCase());i&&a.SwapController.setToToken(i)}e&&!isNaN(Number(e))&&a.SwapController.setSourceTokenAmount(e)}onCaipAddressChange({newCaipAddress:e,resetSwapState:t,initializeSwapState:o}){this.caipAddress!==e&&(this.caipAddress=e,t&&a.SwapController.resetState(),o&&a.SwapController.initializeState())}onCaipNetworkChange({newCaipNetwork:e,resetSwapState:t,initializeSwapState:o}){this.caipNetworkId!==(e==null?void 0:e.caipNetworkId)&&(this.caipNetworkId=e==null?void 0:e.caipNetworkId,t&&a.SwapController.resetState(),o&&a.SwapController.initializeState())}};exports.W3mSwapView.styles=R;p([r.n({type:Object})],exports.W3mSwapView.prototype,"initialParams",void 0);p([r.r()],exports.W3mSwapView.prototype,"interval",void 0);p([r.r()],exports.W3mSwapView.prototype,"detailsOpen",void 0);p([r.r()],exports.W3mSwapView.prototype,"caipAddress",void 0);p([r.r()],exports.W3mSwapView.prototype,"caipNetworkId",void 0);p([r.r()],exports.W3mSwapView.prototype,"initialized",void 0);p([r.r()],exports.W3mSwapView.prototype,"loadingQuote",void 0);p([r.r()],exports.W3mSwapView.prototype,"loadingPrices",void 0);p([r.r()],exports.W3mSwapView.prototype,"loadingTransaction",void 0);p([r.r()],exports.W3mSwapView.prototype,"sourceToken",void 0);p([r.r()],exports.W3mSwapView.prototype,"sourceTokenAmount",void 0);p([r.r()],exports.W3mSwapView.prototype,"sourceTokenPriceInUSD",void 0);p([r.r()],exports.W3mSwapView.prototype,"toToken",void 0);p([r.r()],exports.W3mSwapView.prototype,"toTokenAmount",void 0);p([r.r()],exports.W3mSwapView.prototype,"toTokenPriceInUSD",void 0);p([r.r()],exports.W3mSwapView.prototype,"inputError",void 0);p([r.r()],exports.W3mSwapView.prototype,"fetchError",void 0);exports.W3mSwapView=p([r.customElement("w3m-swap-view")],exports.W3mSwapView);const _=n.i`
  :host > wui-flex:first-child {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  :host > wui-flex:first-child::-webkit-scrollbar {
    display: none;
  }

  .preview-container,
  .details-container {
    width: 100%;
  }

  .token-image {
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);
    border-radius: 12px;
  }

  wui-loading-hexagon {
    position: absolute;
  }

  .token-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wui-spacing-xxs);
    padding: var(--wui-spacing-xs);
    height: 40px;
    border: none;
    border-radius: 80px;
    background: var(--wui-color-gray-glass-002);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
    cursor: pointer;
    transition: background 0.2s linear;
  }

  .token-item:hover {
    background: var(--wui-color-gray-glass-005);
  }

  .preview-token-details-container {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s) var(--wui-spacing-xl);
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
  }

  .action-buttons-container {
    width: 100%;
    gap: var(--wui-spacing-xs);
  }

  .action-buttons-container > button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    height: 48px;
    border-radius: var(--wui-border-radius-xs);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  .action-buttons-container > button:disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }

  .action-button > wui-loading-spinner {
    display: inline-block;
  }

  .cancel-button:hover,
  .action-button:hover {
    cursor: pointer;
  }

  .action-buttons-container > wui-button.cancel-button {
    flex: 2;
  }

  .action-buttons-container > wui-button.action-button {
    flex: 4;
  }

  .action-buttons-container > button.action-button > wui-text {
    color: white;
  }

  .details-container > wui-flex {
    background: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xxs);
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-xxs);
    transition: background 0.2s linear;
  }

  .details-container > wui-flex > button:hover {
    background: var(--wui-color-gray-glass-002);
  }

  .details-content-container {
    padding: var(--wui-spacing-1xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details-content-container > wui-flex {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s) var(--wui-spacing-xl);
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
  }
`;var w=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mSwapPreviewView=class extends n.i$1{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=a.SwapController.state.approvalTransaction,this.swapTransaction=a.SwapController.state.swapTransaction,this.sourceToken=a.SwapController.state.sourceToken,this.sourceTokenAmount=a.SwapController.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=a.SwapController.state.sourceTokenPriceInUSD,this.toToken=a.SwapController.state.toToken,this.toTokenAmount=a.SwapController.state.toTokenAmount??"",this.toTokenPriceInUSD=a.SwapController.state.toTokenPriceInUSD,this.caipNetwork=n.ChainController.state.activeCaipNetwork,this.balanceSymbol=n.AccountController.state.balanceSymbol,this.inputError=a.SwapController.state.inputError,this.loadingQuote=a.SwapController.state.loadingQuote,this.loadingApprovalTransaction=a.SwapController.state.loadingApprovalTransaction,this.loadingBuildTransaction=a.SwapController.state.loadingBuildTransaction,this.loadingTransaction=a.SwapController.state.loadingTransaction,this.unsubscribe.push(n.AccountController.subscribeKey("balanceSymbol",e=>{this.balanceSymbol!==e&&n.RouterController.goBack()}),n.ChainController.subscribeKey("activeCaipNetwork",e=>{this.caipNetwork!==e&&(this.caipNetwork=e)}),a.SwapController.subscribe(e=>{this.approvalTransaction=e.approvalTransaction,this.swapTransaction=e.swapTransaction,this.sourceToken=e.sourceToken,this.toToken=e.toToken,this.toTokenPriceInUSD=e.toTokenPriceInUSD,this.sourceTokenAmount=e.sourceTokenAmount??"",this.toTokenAmount=e.toTokenAmount??"",this.inputError=e.inputError,e.inputError&&n.RouterController.goBack(),this.loadingQuote=e.loadingQuote,this.loadingApprovalTransaction=e.loadingApprovalTransaction,this.loadingBuildTransaction=e.loadingBuildTransaction,this.loadingTransaction=e.loadingTransaction}))}firstUpdated(){a.SwapController.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(e=>e==null?void 0:e()),clearInterval(this.interval)}render(){return n.x`
      <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s">
        ${this.templateSwap()}
      </wui-flex>
    `}refreshTransaction(){this.interval=setInterval(()=>{a.SwapController.getApprovalLoadingState()||a.SwapController.getTransaction()},1e4)}templateSwap(){var h,x,S,T;const e=`${r.UiHelperUtil.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${(h=this.sourceToken)==null?void 0:h.symbol}`,t=`${r.UiHelperUtil.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${(x=this.toToken)==null?void 0:x.symbol}`,o=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,s=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,i=r.UiHelperUtil.formatNumberToLocalString(o),l=r.UiHelperUtil.formatNumberToLocalString(s),c=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return n.x`
      <wui-flex flexDirection="column" alignItems="center" gap="l">
        <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="l">
          <wui-flex
            class="preview-token-details-container"
            alignItems="center"
            justifyContent="space-between"
            gap="l"
          >
            <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs">
              <wui-text variant="small-400" color="fg-150">Send</wui-text>
              <wui-text variant="paragraph-400" color="fg-100">$${i}</wui-text>
            </wui-flex>
            <wui-token-button
              flexDirection="row-reverse"
              text=${e}
              imageSrc=${(S=this.sourceToken)==null?void 0:S.logoUri}
            >
            </wui-token-button>
          </wui-flex>
          <wui-icon name="recycleHorizontal" color="fg-200" size="md"></wui-icon>
          <wui-flex
            class="preview-token-details-container"
            alignItems="center"
            justifyContent="space-between"
            gap="l"
          >
            <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs">
              <wui-text variant="small-400" color="fg-150">Receive</wui-text>
              <wui-text variant="paragraph-400" color="fg-100">$${l}</wui-text>
            </wui-flex>
            <wui-token-button
              flexDirection="row-reverse"
              text=${t}
              imageSrc=${(T=this.toToken)==null?void 0:T.logoUri}
            >
            </wui-token-button>
          </wui-flex>
        </wui-flex>

        ${this.templateDetails()}

        <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="xs">
          <wui-icon size="sm" color="fg-200" name="infoCircle"></wui-icon>
          <wui-text variant="small-400" color="fg-200">Review transaction carefully</wui-text>
        </wui-flex>

        <wui-flex
          class="action-buttons-container"
          flexDirection="row"
          alignItems="center"
          justifyContent="space-between"
          gap="xs"
        >
          <wui-button
            class="cancel-button"
            fullWidth
            size="lg"
            borderRadius="xs"
            variant="neutral"
            @click=${this.onCancelTransaction.bind(this)}
          >
            <wui-text variant="paragraph-600" color="fg-200">Cancel</wui-text>
          </wui-button>
          <wui-button
            class="action-button"
            fullWidth
            size="lg"
            borderRadius="xs"
            variant="main"
            ?loading=${c}
            ?disabled=${c}
            @click=${this.onSendTransaction.bind(this)}
          >
            <wui-text variant="paragraph-600" color="inverse-100">
              ${this.actionButtonLabel()}
            </wui-text>
          </wui-button>
        </wui-flex>
      </wui-flex>
    `}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:n.x`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){n.RouterController.goBack()}onSendTransaction(){this.approvalTransaction?a.SwapController.sendTransactionForApproval(this.approvalTransaction):a.SwapController.sendTransactionForSwap(this.swapTransaction)}};exports.W3mSwapPreviewView.styles=_;w([r.r()],exports.W3mSwapPreviewView.prototype,"interval",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"detailsOpen",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"approvalTransaction",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"swapTransaction",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"sourceToken",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"sourceTokenAmount",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"sourceTokenPriceInUSD",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"toToken",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"toTokenAmount",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"toTokenPriceInUSD",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"caipNetwork",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"balanceSymbol",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"inputError",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"loadingQuote",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"loadingApprovalTransaction",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"loadingBuildTransaction",void 0);w([r.r()],exports.W3mSwapPreviewView.prototype,"loadingTransaction",void 0);exports.W3mSwapPreviewView=w([r.customElement("w3m-swap-preview-view")],exports.W3mSwapPreviewView);const j=n.i`
  :host {
    height: 60px;
    min-height: 60px;
  }

  :host > wui-flex {
    cursor: pointer;
    height: 100%;
    display: flex;
    column-gap: var(--wui-spacing-s);
    padding: var(--wui-spacing-xs);
    padding-right: var(--wui-spacing-l);
    width: 100%;
    background-color: transparent;
    border-radius: var(--wui-border-radius-xs);
    color: var(--wui-color-fg-250);
    transition:
      background-color var(--wui-ease-out-power-1) var(--wui-duration-lg),
      opacity var(--wui-ease-out-power-1) var(--wui-duration-lg);
    will-change: background-color, opacity;
  }

  @media (hover: hover) and (pointer: fine) {
    :host > wui-flex:hover {
      background-color: var(--wui-color-gray-glass-002);
    }

    :host > wui-flex:active {
      background-color: var(--wui-color-gray-glass-005);
    }
  }

  :host([disabled]) > wui-flex {
    opacity: 0.6;
  }

  :host([disabled]) > wui-flex:hover {
    background-color: transparent;
  }

  :host > wui-flex > wui-flex {
    flex: 1;
  }

  :host > wui-flex > wui-image,
  :host > wui-flex > .token-item-image-placeholder {
    width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: var(--wui-border-radius-3xl);
    position: relative;
  }

  :host > wui-flex > .token-item-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :host > wui-flex > wui-image::after,
  :host > wui-flex > .token-item-image-placeholder::after {
    position: absolute;
    content: '';
    inset: 0;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
    border-radius: var(--wui-border-radius-l);
  }

  button > wui-icon-box[data-variant='square-blue'] {
    border-radius: var(--wui-border-radius-3xs);
    position: relative;
    border: none;
    width: 36px;
    height: 36px;
  }
`;var v=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};let b=class extends n.i$1{constructor(){super(),this.observer=new IntersectionObserver(()=>{}),this.imageSrc=void 0,this.name=void 0,this.symbol=void 0,this.price=void 0,this.amount=void 0,this.visible=!1,this.imageError=!1,this.observer=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting?this.visible=!0:this.visible=!1})},{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}render(){var t;if(!this.visible)return null;const e=this.amount&&this.price?(t=n.NumberUtil.multiply(this.price,this.amount))==null?void 0:t.toFixed(3):null;return n.x`
      <wui-flex alignItems="center">
        ${this.visualTemplate()}
        <wui-flex flexDirection="column" gap="3xs">
          <wui-flex justifyContent="space-between">
            <wui-text variant="paragraph-500" color="fg-100" lineClamp="1">${this.name}</wui-text>
            ${e?n.x`
                  <wui-text variant="paragraph-500" color="fg-100">
                    $${r.UiHelperUtil.formatNumberToLocalString(e,3)}
                  </wui-text>
                `:null}
          </wui-flex>
          <wui-flex justifyContent="space-between">
            <wui-text variant="small-400" color="fg-200" lineClamp="1">${this.symbol}</wui-text>
            ${this.amount?n.x`<wui-text variant="small-400" color="fg-200">
                  ${r.UiHelperUtil.formatNumberToLocalString(this.amount,4)}
                </wui-text>`:null}
          </wui-flex>
        </wui-flex>
      </wui-flex>
    `}visualTemplate(){return this.imageError?n.x`<wui-flex class="token-item-image-placeholder">
        <wui-icon name="image" color="inherit"></wui-icon>
      </wui-flex>`:this.imageSrc?n.x`<wui-image
        width="40"
        height="40"
        src=${this.imageSrc}
        @onLoadError=${this.imageLoadError}
      ></wui-image>`:null}imageLoadError(){this.imageError=!0}};b.styles=[n.resetStyles,n.elementStyles,j];v([r.n()],b.prototype,"imageSrc",void 0);v([r.n()],b.prototype,"name",void 0);v([r.n()],b.prototype,"symbol",void 0);v([r.n()],b.prototype,"price",void 0);v([r.n()],b.prototype,"amount",void 0);v([r.r()],b.prototype,"visible",void 0);v([r.r()],b.prototype,"imageError",void 0);b=v([r.customElement("wui-token-list-item")],b);const N=n.i`
  :host {
    --tokens-scroll--top-opacity: 0;
    --tokens-scroll--bottom-opacity: 1;
    --suggested-tokens-scroll--left-opacity: 0;
    --suggested-tokens-scroll--right-opacity: 1;
  }

  :host > wui-flex:first-child {
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-width: none;
    scrollbar-height: none;
  }

  :host > wui-flex:first-child::-webkit-scrollbar {
    display: none;
  }

  wui-loading-hexagon {
    position: absolute;
  }

  .suggested-tokens-container {
    overflow-x: auto;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 0px,
      rgba(200, 200, 200, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 1px,
      black 50px,
      black 90px,
      black calc(100% - 90px),
      black calc(100% - 50px),
      rgba(155, 155, 155, calc(1 - var(--suggested-tokens-scroll--right-opacity))) calc(100% - 1px),
      rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--right-opacity))) 100%
    );
  }

  .suggested-tokens-container::-webkit-scrollbar {
    display: none;
  }

  .tokens-container {
    border-top: 1px solid var(--wui-color-gray-glass-005);
    height: 100%;
    max-height: 390px;
  }

  .tokens {
    width: 100%;
    overflow-y: auto;
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, calc(1 - var(--tokens-scroll--top-opacity))) 0px,
      rgba(200, 200, 200, calc(1 - var(--tokens-scroll--top-opacity))) 1px,
      black 50px,
      black 90px,
      black calc(100% - 90px),
      black calc(100% - 50px),
      rgba(155, 155, 155, calc(1 - var(--tokens-scroll--bottom-opacity))) calc(100% - 1px),
      rgba(0, 0, 0, calc(1 - var(--tokens-scroll--bottom-opacity))) 100%
    );
  }

  .network-search-input,
  .select-network-button {
    height: 40px;
  }

  .select-network-button {
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--wui-spacing-xs);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
    background-color: transparent;
    border-radius: var(--wui-border-radius-xxs);
    padding: var(--wui-spacing-xs);
    align-items: center;
    transition: background-color 0.2s linear;
  }

  .select-network-button:hover {
    background-color: var(--wui-color-gray-glass-002);
  }

  .select-network-button > wui-image {
    width: 26px;
    height: 26px;
    border-radius: var(--wui-border-radius-xs);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }
`;var k=function(u,e,t,o){var s=arguments.length,i=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,e,t,o);else for(var c=u.length-1;c>=0;c--)(l=u[c])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mSwapSelectTokenView=class extends n.i$1{constructor(){var e;super(),this.unsubscribe=[],this.targetToken=(e=n.RouterController.state.data)==null?void 0:e.target,this.sourceToken=a.SwapController.state.sourceToken,this.sourceTokenAmount=a.SwapController.state.sourceTokenAmount,this.toToken=a.SwapController.state.toToken,this.myTokensWithBalance=a.SwapController.state.myTokensWithBalance,this.popularTokens=a.SwapController.state.popularTokens,this.searchValue="",this.unsubscribe.push(a.SwapController.subscribe(t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.myTokensWithBalance=t.myTokensWithBalance}))}updated(){var o,s;const e=(o=this.renderRoot)==null?void 0:o.querySelector(".suggested-tokens-container");e==null||e.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));const t=(s=this.renderRoot)==null?void 0:s.querySelector(".tokens");t==null||t.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){var o,s;super.disconnectedCallback();const e=(o=this.renderRoot)==null?void 0:o.querySelector(".suggested-tokens-container"),t=(s=this.renderRoot)==null?void 0:s.querySelector(".tokens");e==null||e.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),t==null||t.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return n.x`
      <wui-flex flexDirection="column" gap="s">
        ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
      </wui-flex>
    `}onSelectToken(e){this.targetToken==="sourceToken"?a.SwapController.setSourceToken(e):(a.SwapController.setToToken(e),this.sourceToken&&this.sourceTokenAmount&&a.SwapController.swapTokens()),n.RouterController.goBack()}templateSearchInput(){return n.x`
      <wui-flex .padding=${["3xs","s","0","s"]} gap="xs">
        <wui-input-text
          data-testid="swap-select-token-search-input"
          class="network-search-input"
          size="sm"
          placeholder="Search token