@shapeshiftoss/swap-widget 0.0.2 → 0.1.0

package/dist/assets/swaps-IHAYRQ0x.js

@@ -1,1050 +0,0 @@
-import{y as A,a4 as l,F as w,G as D,I as C,k as $,N as h,J as u,r as V,E as N,R as S,n as M,as as K,j as F,W as Q,z as W,D as q,aM as _}from"./index-5jd8RPN9.js";import{S as s}from"./SwapController-If0bFrNc.js";import"./index-CZ4jTIsk.js";const H={numericInputKeyDown(e,t,o){const i=["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"],r=e.metaKey||e.ctrlKey,n=e.key,a=n.toLocaleLowerCase(),c=a==="a",b=a==="c",I=a==="v",U=a==="x",L=n===",",R=n===".",B=n>="0"&&n<="9";!r&&(c||b||I||U)&&e.preventDefault(),t==="0"&&!L&&!R&&n==="0"&&e.preventDefault(),t==="0"&&B&&(o(n),e.preventDefault()),(L||R)&&(t||(o("0."),e.preventDefault()),(t!=null&&t.includes(".")||t!=null&&t.includes(","))&&e.preventDefault()),!B&&!i.includes(n)&&!R&&!L&&e.preventDefault()}},G=A`
-  :host {
-    width: 100%;
-  }
-
-  .details-container > wui-flex {
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    width: 100%;
-  }
-
-  .details-container > wui-flex > button {
-    border: none;
-    background: none;
-    padding: ${({spacing:e})=>e[3]};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    cursor: pointer;
-  }
-
-  .details-content-container {
-    padding: ${({spacing:e})=>e[2]};
-    padding-top: 0px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .details-content-container > wui-flex {
-    width: 100%;
-  }
-
-  .details-row {
-    width: 100%;
-    padding: ${({spacing:e})=>e[3]};
-    padding-left: ${({spacing:e})=>e[3]};
-    padding-right: ${({spacing:e})=>e[2]};
-    border-radius: calc(
-      ${({borderRadius:e})=>e[1]} + ${({borderRadius:e})=>e[1]}
-    );
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-
-  .details-row-title {
-    white-space: nowrap;
-  }
-
-  .details-row.provider-free-row {
-    padding-right: ${({spacing:e})=>e[2]};
-  }
-`;var T=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};const J=V.CONVERT_SLIPPAGE_TOLERANCE;let g=class extends C{constructor(){var t;super(),this.unsubscribe=[],this.networkName=(t=$.state.activeCaipNetwork)==null?void 0:t.name,this.detailsOpen=!1,this.sourceToken=s.state.sourceToken,this.toToken=s.state.toToken,this.toTokenAmount=s.state.toTokenAmount,this.sourceTokenPriceInUSD=s.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=s.state.toTokenPriceInUSD,this.priceImpact=s.state.priceImpact,this.maxSlippage=s.state.maxSlippage,this.networkTokenSymbol=s.state.networkTokenSymbol,this.inputError=s.state.inputError,this.unsubscribe.push(s.subscribe(o=>{this.sourceToken=o.sourceToken,this.toToken=o.toToken,this.toTokenAmount=o.toTokenAmount,this.priceImpact=o.priceImpact,this.maxSlippage=o.maxSlippage,this.sourceTokenPriceInUSD=o.sourceTokenPriceInUSD,this.toTokenPriceInUSD=o.toTokenPriceInUSD,this.inputError=o.inputError}))}render(){const t=this.toTokenAmount&&this.maxSlippage?h.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const o=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return u`
-      <wui-flex flexDirection="column" alignItems="center" gap="01" class="details-container">
-        <wui-flex flexDirection="column">
-          <button @click=${this.toggleDetails.bind(this)}>
-            <wui-flex justifyContent="space-between" .padding=${["0","2","0","2"]}>
-              <wui-flex justifyContent="flex-start" flexGrow="1" gap="2">
-                <wui-text variant="sm-regular" color="primary">
-                  1 ${this.sourceToken.symbol} =
-                  ${h.formatNumberToLocalString(o,3)}
-                  ${this.toToken.symbol}
-                </wui-text>
-                <wui-text variant="sm-regular" color="secondary">
-                  $${h.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
-                </wui-text>
-              </wui-flex>
-              <wui-icon name="chevronBottom"></wui-icon>
-            </wui-flex>
-          </button>
-          ${this.detailsOpen?u`
-                <wui-flex flexDirection="column" gap="2" class="details-content-container">
-                  ${this.priceImpact?u` <wui-flex flexDirection="column" gap="2">
-                        <wui-flex
-                          justifyContent="space-between"
-                          alignItems="center"
-                          class="details-row"
-                        >
-                          <wui-flex alignItems="center" gap="2">
-                            <wui-text
-                              class="details-row-title"
-                              variant="sm-regular"
-                              color="secondary"
-                            >
-                              Price impact
-                            </wui-text>
-                            <w3m-tooltip-trigger
-                              text="Price impact reflects the change in market price due to your trade"
-                            >
-                              <wui-icon size="sm" color="default" name="info"></wui-icon>
-                            </w3m-tooltip-trigger>
-                          </wui-flex>
-                          <wui-flex>
-                            <wui-text variant="sm-regular" color="secondary">
-                              ${h.formatNumberToLocalString(this.priceImpact,3)}%
-                            </wui-text>
-                          </wui-flex>
-                        </wui-flex>
-                      </wui-flex>`:null}
-                  ${this.maxSlippage&&this.sourceToken.symbol?u`<wui-flex flexDirection="column" gap="2">
-                        <wui-flex
-                          justifyContent="space-between"
-                          alignItems="center"
-                          class="details-row"
-                        >
-                          <wui-flex alignItems="center" gap="2">
-                            <wui-text
-                              class="details-row-title"
-                              variant="sm-regular"
-                              color="secondary"
-                            >
-                              Max. slippage
-                            </wui-text>
-                            <w3m-tooltip-trigger
-                              text=${`Max slippage sets the minimum amount you must receive for the transaction to proceed. ${t?`Transaction will be reversed if you receive less than ${h.formatNumberToLocalString(t,6)} ${this.toToken.symbol} due to price changes.`:""}`}
-                            >
-                              <wui-icon size="sm" color="default" name="info"></wui-icon>
-                            </w3m-tooltip-trigger>
-                          </wui-flex>
-                          <wui-flex>
-                            <wui-text variant="sm-regular" color="secondary">
-                              ${h.formatNumberToLocalString(this.maxSlippage,6)}
-                              ${this.toToken.symbol} ${J}%
-                            </wui-text>
-                          </wui-flex>
-                        </wui-flex>
-                      </wui-flex>`:null}
-                  <wui-flex flexDirection="column" gap="2">
-                    <wui-flex
-                      justifyContent="space-between"
-                      alignItems="center"
-                      class="details-row provider-free-row"
-                    >
-                      <wui-flex alignItems="center" gap="2">
-                        <wui-text class="details-row-title" variant="sm-regular" color="secondary">
-                          Provider fee
-                        </wui-text>
-                      </wui-flex>
-                      <wui-flex>
-                        <wui-text variant="sm-regular" color="secondary">0.85%</wui-text>
-                      </wui-flex>
-                    </wui-flex>
-                  </wui-flex>
-                </wui-flex>
-              `:null}
-        </wui-flex>
-      </wui-flex>
-    `}toggleDetails(){this.detailsOpen=!this.detailsOpen}};g.styles=[G];T([l()],g.prototype,"networkName",void 0);T([w()],g.prototype,"detailsOpen",void 0);T([l()],g.prototype,"sourceToken",void 0);T([l()],g.prototype,"toToken",void 0);T([l()],g.prototype,"toTokenAmount",void 0);T([l()],g.prototype,"sourceTokenPriceInUSD",void 0);T([l()],g.prototype,"toTokenPriceInUSD",void 0);T([l()],g.prototype,"priceImpact",void 0);T([l()],g.prototype,"maxSlippage",void 0);T([l()],g.prototype,"networkTokenSymbol",void 0);T([l()],g.prototype,"inputError",void 0);g=T([D("w3m-swap-details")],g);const X=A`
-  :host {
-    width: 100%;
-  }
-
-  :host > wui-flex {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: ${({borderRadius:e})=>e[5]};
-    padding: ${({spacing:e})=>e[5]};
-    padding-right: ${({spacing:e})=>e[3]};
-    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
-    box-shadow: inset 0px 0px 0px 1px ${({tokens:e})=>e.theme.foregroundPrimary};
-    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 ${({durations:e})=>e.md}
-      ${({easings:e})=>e["ease-out-power-1"]};
-    will-change: fill;
-  }
-
-  :host wui-flex .input_mask__border {
-    fill: ${({tokens:e})=>e.core.glass010};
-  }
-
-  :host wui-flex .input_mask__background {
-    fill: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-`;var z=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};let j=class extends C{constructor(){super(...arguments),this.target="sourceToken"}render(){return u`
-      <wui-flex class justifyContent="space-between">
-        <wui-flex
-          flex="1"
-          flexDirection="column"
-          alignItems="flex-start"
-          justifyContent="center"
-          class="swap-input"
-          gap="1"
-        >
-          <wui-shimmer width="80px" height="40px" rounded variant="light"></wui-shimmer>
-        </wui-flex>
-        ${this.templateTokenSelectButton()}
-      </wui-flex>
-    `}templateTokenSelectButton(){return u`
-      <wui-flex
-        class="swap-token-button"
-        flexDirection="column"
-        alignItems="flex-end"
-        justifyContent="center"
-        gap="1"
-      >
-        <wui-shimmer width="80px" height="40px" rounded variant="light"></wui-shimmer>
-      </wui-flex>
-    `}};j.styles=[X];z([w()],j.prototype,"target",void 0);j=z([D("w3m-swap-input-skeleton")],j);const Y=A`
-  :host > wui-flex {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: ${({borderRadius:e})=>e[5]};
-    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
-    padding: ${({spacing:e})=>e[5]};
-    padding-right: ${({spacing:e})=>e[3]};
-    width: 100%;
-    height: 100px;
-    box-sizing: border-box;
-    box-shadow: inset 0px 0px 0px 1px ${({tokens:e})=>e.theme.foregroundPrimary};
-    position: relative;
-    transition: box-shadow ${({easings:e})=>e["ease-out-power-1"]}
-      ${({durations:e})=>e.lg};
-    will-change: background-color;
-  }
-
-  :host wui-flex.focus {
-    box-shadow: inset 0px 0px 0px 1px ${({tokens:e})=>e.core.glass010};
-  }
-
-  :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: ${({tokens:e})=>e.core.textAccentPrimary};
-    color: ${({tokens:e})=>e.theme.textPrimary};
-    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: ${({tokens:e})=>e.core.glass010};
-    padding-left: 0px;
-  }
-
-  .market-value {
-    min-height: 18px;
-  }
-`;var y=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};const Z=5e-5;let k=class extends C{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const t=this.marketValue||"0",o=h.bigNumber(t).gt("0");return u`
-      <wui-flex
-        class="${this.focused?"focus":""}"
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        <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"
-            pattern="[0-9,.]*"
-          />
-          <wui-text class="market-value" variant="sm-regular" color="secondary">
-            ${o?`$${h.formatNumberToLocalString(this.marketValue,2)}`:null}
-          </wui-text>
-        </wui-flex>
-        ${this.templateTokenSelectButton()}
-      </wui-flex>
-    `}handleKeydown(t){return H.numericInputKeyDown(t,this.value,o=>{var i;return(i=this.onSetAmount)==null?void 0:i.call(this,this.target,o)})}dispatchInputChangeEvent(t){if(!this.onSetAmount)return;const o=t.target.value.replace(/[^0-9.]/gu,"");o===","||o==="."?this.onSetAmount(this.target,"0."):o.endsWith(",")?this.onSetAmount(this.target,o.replace(",",".")):this.onSetAmount(this.target,o)}setMaxValueToInput(){var t;(t=this.onSetMaxValue)==null||t.call(this,this.target,this.balance)}templateTokenSelectButton(){return this.token?u`
-      <wui-flex
-        class="swap-token-button"
-        flexDirection="column"
-        alignItems="flex-end"
-        justifyContent="center"
-        gap="1"
-      >
-        <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="1"> ${this.tokenBalanceTemplate()} </wui-flex>
-      </wui-flex>
-    `:u` <wui-button
-        data-testid="swap-select-token-button-${this.target}"
-        class="swap-token-button"
-        size="md"
-        variant="neutral-secondary"
-        @click=${this.onSelectToken.bind(this)}
-      >
-        Select token
-      </wui-button>`}tokenBalanceTemplate(){const t=h.multiply(this.balance,this.price),o=t?t==null?void 0:t.gt(Z):!1;return u`
-      ${o?u`<wui-text variant="sm-regular" color="secondary">
-            ${h.formatNumberToLocalString(this.balance,2)}
-          </wui-text>`:null}
-      ${this.target==="sourceToken"?this.tokenActionButtonTemplate(o):null}
-    `}tokenActionButtonTemplate(t){return t?u` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
-        <wui-text color="accent-primary" variant="sm-medium">Max</wui-text>
-      </button>`:u` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
-      <wui-text color="accent-primary" variant="sm-medium">Buy</wui-text>
-    </button>`}onFocusChange(t){this.focused=t}onSelectToken(){N.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),S.push("SwapSelectToken",{target:this.target})}onBuyToken(){S.push("OnRampProviders")}};k.styles=[Y];y([w()],k.prototype,"focused",void 0);y([w()],k.prototype,"balance",void 0);y([w()],k.prototype,"value",void 0);y([w()],k.prototype,"price",void 0);y([w()],k.prototype,"marketValue",void 0);y([w()],k.prototype,"disabled",void 0);y([w()],k.prototype,"target",void 0);y([w()],k.prototype,"token",void 0);y([w()],k.prototype,"onSetAmount",void 0);y([w()],k.prototype,"onSetMaxValue",void 0);k=y([D("w3m-swap-input")],k);const ee=A`
-  :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: ${({borderRadius:e})=>e[4]};
-  }
-
-  .action-button:disabled {
-    border-color: 1px solid ${({tokens:e})=>e.core.glass010};
-  }
-
-  .swap-inputs-container {
-    position: relative;
-  }
-
-  wui-icon-box {
-    width: 32px;
-    height: 32px;
-    border-radius: ${({borderRadius:e})=>e[10]} !important;
-    border: 4px solid ${({tokens:e})=>e.theme.backgroundPrimary};
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 3;
-  }
-
-  .replace-tokens-button-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    gap: ${({spacing:e})=>e[2]};
-    border-radius: ${({borderRadius:e})=>e[4]};
-    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
-    padding: ${({spacing:e})=>e[2]};
-  }
-
-  .details-container > wui-flex {
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    width: 100%;
-  }
-
-  .details-container > wui-flex > button {
-    border: none;
-    background: none;
-    padding: ${({spacing:e})=>e[3]};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    transition: background ${({durations:e})=>e.lg}
-      ${({easings:e})=>e["ease-out-power-2"]};
-    will-change: background;
-  }
-
-  .details-container > wui-flex > button:hover {
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-
-  .details-content-container {
-    padding: ${({spacing:e})=>e[2]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .details-content-container > wui-flex {
-    width: 100%;
-  }
-
-  .details-row {
-    width: 100%;
-    padding: ${({spacing:e})=>e[3]} ${({spacing:e})=>e[5]};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-`;var m=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};let p=class extends C{subscribe({resetSwapState:t,initializeSwapState:o}){return()=>{$.subscribeKey("activeCaipNetwork",i=>this.onCaipNetworkChange({newCaipNetwork:i,resetSwapState:t,initializeSwapState:o})),$.subscribeChainProp("accountState",i=>{this.onCaipAddressChange({newCaipAddress:i==null?void 0:i.caipAddress,resetSwapState:t,initializeSwapState:o})})}}constructor(){var t,o,i;super(),this.unsubscribe=[],this.initialParams=(t=S.state.data)==null?void 0:t.swap,this.detailsOpen=!1,this.caipAddress=(o=$.getAccountData())==null?void 0:o.caipAddress,this.caipNetworkId=(i=$.state.activeCaipNetwork)==null?void 0:i.caipNetworkId,this.initialized=s.state.initialized,this.loadingQuote=s.state.loadingQuote,this.loadingPrices=s.state.loadingPrices,this.loadingTransaction=s.state.loadingTransaction,this.sourceToken=s.state.sourceToken,this.sourceTokenAmount=s.state.sourceTokenAmount,this.sourceTokenPriceInUSD=s.state.sourceTokenPriceInUSD,this.toToken=s.state.toToken,this.toTokenAmount=s.state.toTokenAmount,this.toTokenPriceInUSD=s.state.toTokenPriceInUSD,this.inputError=s.state.inputError,this.fetchError=s.state.fetchError,this.lastTokenPriceUpdate=0,this.minTokenPriceUpdateInterval=1e4,this.visibilityChangeHandler=()=>{document!=null&&document.hidden?(clearInterval(this.interval),this.interval=void 0):this.startTokenPriceInterval()},this.startTokenPriceInterval=()=>{this.interval&&Date.now()-this.lastTokenPriceUpdate<this.minTokenPriceUpdateInterval||(this.lastTokenPriceUpdate&&Date.now()-this.lastTokenPriceUpdate>this.minTokenPriceUpdateInterval&&this.fetchTokensAndValues(),clearInterval(this.interval),this.interval=setInterval(()=>{this.fetchTokensAndValues()},this.minTokenPriceUpdateInterval))},this.watchTokensAndValues=()=>{!this.sourceToken||!this.toToken||(this.subscribeToVisibilityChange(),this.startTokenPriceInterval())},this.onDebouncedGetSwapCalldata=M.debounce(async()=>{await s.swapTokens()},200),this.subscribe({resetSwapState:!0,initializeSwapState:!1})(),this.unsubscribe.push(this.subscribe({resetSwapState:!1,initializeSwapState:!0}),K.subscribeKey("open",r=>{r||s.resetState()}),S.subscribeKey("view",r=>{r.includes("Swap")||s.resetValues()}),s.subscribe(r=>{this.initialized=r.initialized,this.loadingQuote=r.loadingQuote,this.loadingPrices=r.loadingPrices,this.loadingTransaction=r.loadingTransaction,this.sourceToken=r.sourceToken,this.sourceTokenAmount=r.sourceTokenAmount,this.sourceTokenPriceInUSD=r.sourceTokenPriceInUSD,this.toToken=r.toToken,this.toTokenAmount=r.toTokenAmount,this.toTokenPriceInUSD=r.toTokenPriceInUSD,this.inputError=r.inputError,this.fetchError=r.fetchError,r.sourceToken&&r.toToken&&this.watchTokensAndValues()}))}async firstUpdated(){s.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(t=>t==null?void 0:t()),clearInterval(this.interval),document==null||document.removeEventListener("visibilitychange",this.visibilityChangeHandler)}render(){return u`
-      <wui-flex flexDirection="column" .padding=${["0","4","4","4"]} gap="3">
-        ${this.initialized?this.templateSwap():this.templateLoading()}
-      </wui-flex>
-    `}subscribeToVisibilityChange(){document==null||document.removeEventListener("visibilitychange",this.visibilityChangeHandler),document==null||document.addEventListener("visibilitychange",this.visibilityChangeHandler)}fetchTokensAndValues(){s.getNetworkTokenPrice(),s.getMyTokensWithBalance(),s.swapTokens(),this.lastTokenPriceUpdate=Date.now()}templateSwap(){return u`
-      <wui-flex flexDirection="column" gap="3">
-        <wui-flex flexDirection="column" alignItems="center" gap="2" 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(){const t=!this.sourceTokenAmount||this.sourceTokenAmount==="0";return this.fetchError?"Swap":!this.sourceToken||!this.toToken?"Select token":t?"Enter amount":this.inputError?this.inputError:"Review swap"}templateReplaceTokensButton(){return u`
-      <wui-flex class="replace-tokens-button-container">
-        <wui-icon-box
-          @click=${this.onSwitchTokens.bind(this)}
-          icon="recycleHorizontal"
-          size="md"
-          variant="default"
-        ></wui-icon-box>
-      </wui-flex>
-    `}templateLoading(){return u`
-      <wui-flex flexDirection="column" gap="4">
-        <wui-flex flexDirection="column" alignItems="center" gap="2" 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(t,o){var c,b;const i=(c=s.state.myTokensWithBalance)==null?void 0:c.find(I=>(I==null?void 0:I.address)===(o==null?void 0:o.address)),r=t==="toToken"?this.toTokenAmount:this.sourceTokenAmount,n=t==="toToken"?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,a=h.parseLocalStringToNumber(r)*n;return u`<w3m-swap-input
-      .value=${t==="toToken"?this.toTokenAmount:this.sourceTokenAmount}
-      .disabled=${t==="toToken"}
-      .onSetAmount=${this.handleChangeAmount.bind(this)}
-      target=${t}
-      .token=${o}
-      .balance=${(b=i==null?void 0:i.quantity)==null?void 0:b.numeric}
-      .price=${i==null?void 0:i.price}
-      .marketValue=${a}
-      .onSetMaxValue=${this.onSetMaxValue.bind(this)}
-    ></w3m-swap-input>`}onSetMaxValue(t,o){const i=h.bigNumber(o||"0");this.handleChangeAmount(t,i.gt(0)?i.toFixed(20):"0")}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:u`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}handleChangeAmount(t,o){s.clearError(),t==="sourceToken"?s.setSourceTokenAmount(o):s.setToTokenAmount(o),this.onDebouncedGetSwapCalldata()}templateActionButton(){const t=!this.toToken||!this.sourceToken,o=!this.sourceTokenAmount||this.sourceTokenAmount==="0",i=this.loadingQuote||this.loadingPrices||this.loadingTransaction,r=i||t||o||this.inputError;return u` <wui-flex gap="2">
-      <wui-button
-        data-testid="swap-action-button"
-        class="action-button"
-        fullWidth
-        size="lg"
-        borderRadius="xs"
-        variant="accent-primary"
-        ?loading=${!!i}
-        ?disabled=${!!r}
-        @click=${this.onSwapPreview.bind(this)}
-      >
-        ${this.actionButtonLabel()}
-      </wui-button>
-    </wui-flex>`}async onSwitchTokens(){await s.switchTokens()}async onSwapPreview(){var t,o;this.fetchError&&await s.swapTokens(),N.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:F($.state.activeChain)===Q.ACCOUNT_TYPES.SMART_ACCOUNT}}),S.push("SwapPreview")}async handleSwapParameters(){this.initialParams&&(s.state.initialized||await new Promise(o=>{const i=s.subscribeKey("initialized",r=>{r&&(i==null||i(),o())})}),await this.setSwapParameters(this.initialParams))}async setSwapParameters({amount:t,fromToken:o,toToken:i}){(!s.state.tokens||!s.state.myTokensWithBalance)&&await new Promise(a=>{const c=s.subscribeKey("myTokensWithBalance",b=>{b&&b.length>0&&(c==null||c(),a())});setTimeout(()=>{c==null||c(),a()},5e3)});const r=[...s.state.tokens||[],...s.state.myTokensWithBalance||[]];if(o){const n=r.find(a=>a.symbol.toLowerCase()===o.toLowerCase());n&&s.setSourceToken(n)}if(i){const n=r.find(a=>a.symbol.toLowerCase()===i.toLowerCase());n&&s.setToToken(n)}t&&!isNaN(Number(t))&&s.setSourceTokenAmount(t)}onCaipAddressChange({newCaipAddress:t,resetSwapState:o,initializeSwapState:i}){this.caipAddress!==t&&(this.caipAddress=t,o&&s.resetState(),i&&s.initializeState())}onCaipNetworkChange({newCaipNetwork:t,resetSwapState:o,initializeSwapState:i}){this.caipNetworkId!==(t==null?void 0:t.caipNetworkId)&&(this.caipNetworkId=t==null?void 0:t.caipNetworkId,o&&s.resetState(),i&&s.initializeState())}};p.styles=ee;m([w({type:Object})],p.prototype,"initialParams",void 0);m([l()],p.prototype,"interval",void 0);m([l()],p.prototype,"detailsOpen",void 0);m([l()],p.prototype,"caipAddress",void 0);m([l()],p.prototype,"caipNetworkId",void 0);m([l()],p.prototype,"initialized",void 0);m([l()],p.prototype,"loadingQuote",void 0);m([l()],p.prototype,"loadingPrices",void 0);m([l()],p.prototype,"loadingTransaction",void 0);m([l()],p.prototype,"sourceToken",void 0);m([l()],p.prototype,"sourceTokenAmount",void 0);m([l()],p.prototype,"sourceTokenPriceInUSD",void 0);m([l()],p.prototype,"toToken",void 0);m([l()],p.prototype,"toTokenAmount",void 0);m([l()],p.prototype,"toTokenPriceInUSD",void 0);m([l()],p.prototype,"inputError",void 0);m([l()],p.prototype,"fetchError",void 0);m([l()],p.prototype,"lastTokenPriceUpdate",void 0);p=m([D("w3m-swap-view")],p);const te=A`
-  :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 ${({tokens:e})=>e.core.glass010};
-    border-radius: 12px;
-  }
-
-  wui-loading-hexagon {
-    position: absolute;
-  }
-
-  .token-item {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: ${({spacing:e})=>e[2]};
-    padding: ${({spacing:e})=>e[2]};
-    height: 40px;
-    border: none;
-    border-radius: 80px;
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-    box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.theme.foregroundPrimary};
-    cursor: pointer;
-    transition: background ${({durations:e})=>e.lg}
-      ${({easings:e})=>e["ease-out-power-2"]};
-    will-change: background;
-  }
-
-  .token-item:hover {
-    background: ${({tokens:e})=>e.core.glass010};
-  }
-
-  .preview-token-details-container {
-    width: 100%;
-  }
-
-  .details-row {
-    width: 100%;
-    padding: ${({spacing:e})=>e[3]} ${({spacing:e})=>e[5]};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-
-  .action-buttons-container {
-    width: 100%;
-    gap: ${({spacing:e})=>e[2]};
-  }
-
-  .action-buttons-container > button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: transparent;
-    height: 48px;
-    border-radius: ${({borderRadius:e})=>e[4]};
-    border: none;
-    box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010};
-  }
-
-  .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: ${({tokens:e})=>e.theme.foregroundPrimary};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    width: 100%;
-  }
-
-  .details-container > wui-flex > button {
-    border: none;
-    background: none;
-    padding: ${({spacing:e})=>e[3]};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    transition: background ${({durations:e})=>e.lg}
-      ${({easings:e})=>e["ease-out-power-2"]};
-    will-change: background;
-  }
-
-  .details-container > wui-flex > button:hover {
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-
-  .details-content-container {
-    padding: ${({spacing:e})=>e[2]};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .details-content-container > wui-flex {
-    width: 100%;
-  }
-
-  .details-row {
-    width: 100%;
-    padding: ${({spacing:e})=>e[3]} ${({spacing:e})=>e[5]};
-    border-radius: ${({borderRadius:e})=>e[3]};
-    background: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-`;var f=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};let d=class extends C{constructor(){var t;super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=s.state.approvalTransaction,this.swapTransaction=s.state.swapTransaction,this.sourceToken=s.state.sourceToken,this.sourceTokenAmount=s.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=s.state.sourceTokenPriceInUSD,this.balanceSymbol=(t=$.getAccountData())==null?void 0:t.balanceSymbol,this.toToken=s.state.toToken,this.toTokenAmount=s.state.toTokenAmount??"",this.toTokenPriceInUSD=s.state.toTokenPriceInUSD,this.caipNetwork=$.state.activeCaipNetwork,this.inputError=s.state.inputError,this.loadingQuote=s.state.loadingQuote,this.loadingApprovalTransaction=s.state.loadingApprovalTransaction,this.loadingBuildTransaction=s.state.loadingBuildTransaction,this.loadingTransaction=s.state.loadingTransaction,this.unsubscribe.push($.subscribeChainProp("accountState",o=>{(o==null?void 0:o.balanceSymbol)!==this.balanceSymbol&&S.goBack()}),$.subscribeKey("activeCaipNetwork",o=>{this.caipNetwork!==o&&(this.caipNetwork=o)}),s.subscribe(o=>{this.approvalTransaction=o.approvalTransaction,this.swapTransaction=o.swapTransaction,this.sourceToken=o.sourceToken,this.toToken=o.toToken,this.toTokenPriceInUSD=o.toTokenPriceInUSD,this.sourceTokenAmount=o.sourceTokenAmount??"",this.toTokenAmount=o.toTokenAmount??"",this.inputError=o.inputError,o.inputError&&S.goBack(),this.loadingQuote=o.loadingQuote,this.loadingApprovalTransaction=o.loadingApprovalTransaction,this.loadingBuildTransaction=o.loadingBuildTransaction,this.loadingTransaction=o.loadingTransaction}))}firstUpdated(){s.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(t=>t==null?void 0:t()),clearInterval(this.interval)}render(){return u`
-      <wui-flex flexDirection="column" .padding=${["0","4","4","4"]} gap="3">
-        ${this.templateSwap()}
-      </wui-flex>
-    `}refreshTransaction(){this.interval=setInterval(()=>{s.getApprovalLoadingState()||s.getTransaction()},1e4)}templateSwap(){var b,I,U,L;const t=`${h.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${(b=this.sourceToken)==null?void 0:b.symbol}`,o=`${h.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${(I=this.toToken)==null?void 0:I.symbol}`,i=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,r=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,n=h.formatNumberToLocalString(i),a=h.formatNumberToLocalString(r),c=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return u`
-      <wui-flex flexDirection="column" alignItems="center" gap="4">
-        <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="4">
-          <wui-flex
-            class="preview-token-details-container"
-            alignItems="center"
-            justifyContent="space-between"
-            gap="4"
-          >
-            <wui-flex flexDirection="column" alignItems="flex-start" gap="01">
-              <wui-text variant="sm-regular" color="secondary">Send</wui-text>
-              <wui-text variant="md-regular" color="primary">$${n}</wui-text>
-            </wui-flex>
-            <wui-token-button
-              flexDirection="row-reverse"
-              text=${t}
-              imageSrc=${(U=this.sourceToken)==null?void 0:U.logoUri}
-            >
-            </wui-token-button>
-          </wui-flex>
-          <wui-icon name="recycleHorizontal" color="default" size="md"></wui-icon>
-          <wui-flex
-            class="preview-token-details-container"
-            alignItems="center"
-            justifyContent="space-between"
-            gap="4"
-          >
-            <wui-flex flexDirection="column" alignItems="flex-start" gap="01">
-              <wui-text variant="sm-regular" color="secondary">Receive</wui-text>
-              <wui-text variant="md-regular" color="primary">$${a}</wui-text>
-            </wui-flex>
-            <wui-token-button
-              flexDirection="row-reverse"
-              text=${o}
-              imageSrc=${(L=this.toToken)==null?void 0:L.logoUri}
-            >
-            </wui-token-button>
-          </wui-flex>
-        </wui-flex>
-
-        ${this.templateDetails()}
-
-        <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="2">
-          <wui-icon size="sm" color="default" name="info"></wui-icon>
-          <wui-text variant="sm-regular" color="secondary">Review transaction carefully</wui-text>
-        </wui-flex>
-
-        <wui-flex
-          class="action-buttons-container"
-          flexDirection="row"
-          alignItems="center"
-          justifyContent="space-between"
-          gap="2"
-        >
-          <wui-button
-            class="cancel-button"
-            fullWidth
-            size="lg"
-            borderRadius="xs"
-            variant="neutral-secondary"
-            @click=${this.onCancelTransaction.bind(this)}
-          >
-            <wui-text variant="md-medium" color="secondary">Cancel</wui-text>
-          </wui-button>
-          <wui-button
-            class="action-button"
-            fullWidth
-            size="lg"
-            borderRadius="xs"
-            variant="accent-primary"
-            ?loading=${c}
-            ?disabled=${c}
-            @click=${this.onSendTransaction.bind(this)}
-          >
-            <wui-text variant="md-medium" color="invert"> ${this.actionButtonLabel()} </wui-text>
-          </wui-button>
-        </wui-flex>
-      </wui-flex>
-    `}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:u`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){S.goBack()}onSendTransaction(){this.approvalTransaction?s.sendTransactionForApproval(this.approvalTransaction):s.sendTransactionForSwap(this.swapTransaction)}};d.styles=te;f([l()],d.prototype,"interval",void 0);f([l()],d.prototype,"detailsOpen",void 0);f([l()],d.prototype,"approvalTransaction",void 0);f([l()],d.prototype,"swapTransaction",void 0);f([l()],d.prototype,"sourceToken",void 0);f([l()],d.prototype,"sourceTokenAmount",void 0);f([l()],d.prototype,"sourceTokenPriceInUSD",void 0);f([l()],d.prototype,"balanceSymbol",void 0);f([l()],d.prototype,"toToken",void 0);f([l()],d.prototype,"toTokenAmount",void 0);f([l()],d.prototype,"toTokenPriceInUSD",void 0);f([l()],d.prototype,"caipNetwork",void 0);f([l()],d.prototype,"inputError",void 0);f([l()],d.prototype,"loadingQuote",void 0);f([l()],d.prototype,"loadingApprovalTransaction",void 0);f([l()],d.prototype,"loadingBuildTransaction",void 0);f([l()],d.prototype,"loadingTransaction",void 0);d=f([D("w3m-swap-preview-view")],d);const oe=A`
-  :host {
-    width: 100%;
-    height: 60px;
-    min-height: 60px;
-  }
-
-  :host > wui-flex {
-    cursor: pointer;
-    height: 100%;
-    display: flex;
-    column-gap: ${({spacing:e})=>e[3]};
-    padding: ${({spacing:e})=>e[2]};
-    padding-right: ${({spacing:e})=>e[4]};
-    width: 100%;
-    background-color: transparent;
-    border-radius: ${({borderRadius:e})=>e[4]};
-    color: ${({tokens:e})=>e.theme.foregroundSecondary};
-    transition:
-      background-color ${({durations:e})=>e.lg}
-        ${({easings:e})=>e["ease-out-power-2"]},
-      opacity ${({durations:e})=>e.lg} ${({easings:e})=>e["ease-out-power-2"]};
-    will-change: background-color, opacity;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    :host > wui-flex:hover {
-      background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
-    }
-
-    :host > wui-flex:active {
-      background-color: ${({tokens:e})=>e.core.glass010};
-    }
-  }
-
-  :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: ${({borderRadius:e})=>e[20]};
-    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 ${({tokens:e})=>e.core.glass010};
-    border-radius: ${({borderRadius:e})=>e[8]};
-  }
-
-  button > wui-icon-box[data-variant='square-blue'] {
-    border-radius: ${({borderRadius:e})=>e[2]};
-    position: relative;
-    border: none;
-    width: 36px;
-    height: 36px;
-  }
-`;var E=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};let P=class extends C{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(t=>{t.forEach(o=>{o.isIntersecting?this.visible=!0:this.visible=!1})},{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}render(){var o;if(!this.visible)return null;const t=this.amount&&this.price?(o=h.multiply(this.price,this.amount))==null?void 0:o.toFixed(3):null;return u`
-      <wui-flex alignItems="center">
-        ${this.visualTemplate()}
-        <wui-flex flexDirection="column" gap="1">
-          <wui-flex justifyContent="space-between">
-            <wui-text variant="md-medium" color="primary" lineClamp="1">${this.name}</wui-text>
-            ${t?u`
-                  <wui-text variant="md-medium" color="primary">
-                    $${h.formatNumberToLocalString(t,3)}
-                  </wui-text>
-                `:null}
-          </wui-flex>
-          <wui-flex justifyContent="space-between">
-            <wui-text variant="sm-regular" color="secondary" lineClamp="1">${this.symbol}</wui-text>
-            ${this.amount?u`<wui-text variant="sm-regular" color="secondary">
-                  ${h.formatNumberToLocalString(this.amount,5)}
-                </wui-text>`:null}
-          </wui-flex>
-        </wui-flex>
-      </wui-flex>
-    `}visualTemplate(){return this.imageError?u`<wui-flex class="token-item-image-placeholder">
-        <wui-icon name="image" color="inherit"></wui-icon>
-      </wui-flex>`:this.imageSrc?u`<wui-image
-        width="40"
-        height="40"
-        src=${this.imageSrc}
-        @onLoadError=${this.imageLoadError}
-      ></wui-image>`:null}imageLoadError(){this.imageError=!0}};P.styles=[W,q,oe];E([w()],P.prototype,"imageSrc",void 0);E([w()],P.prototype,"name",void 0);E([w()],P.prototype,"symbol",void 0);E([w()],P.prototype,"price",void 0);E([w()],P.prototype,"amount",void 0);E([l()],P.prototype,"visible",void 0);E([l()],P.prototype,"imageError",void 0);P=E([D("wui-token-list-item")],P);const ie=A`
-  :host {
-    width: 100%;
-  }
-
-  :host > wui-flex {
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    column-gap: ${({spacing:e})=>e[3]};
-    padding: ${({spacing:e})=>e[2]};
-    padding-right: ${({spacing:e})=>e[4]};
-  }
-
-  wui-flex {
-    display: flex;
-    flex: 1;
-  }
-`;var ne=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};let O=class extends C{render(){return u`
-      <wui-flex alignItems="center">
-        <wui-shimmer width="40px" height="40px"></wui-shimmer>
-        <wui-flex flexDirection="column" gap="1">
-          <wui-shimmer width="72px" height="16px" borderRadius="4xs"></wui-shimmer>
-          <wui-shimmer width="148px" height="14px" borderRadius="4xs"></wui-shimmer>
-        </wui-flex>
-        <wui-flex flexDirection="column" gap="1" alignItems="flex-end">
-          <wui-shimmer width="24px" height="12px" borderRadius="4xs"></wui-shimmer>
-          <wui-shimmer width="32px" height="12px" borderRadius="4xs"></wui-shimmer>
-        </wui-flex>
-      </wui-flex>
-    `}};O.styles=[W,ie];O=ne([D("wui-token-list-item-loader")],O);const re=A`
-  :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 ${({tokens:e})=>e.core.glass010};
-    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: ${({spacing:e})=>e[2]};
-    box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010};
-    background-color: transparent;
-    border-radius: ${({borderRadius:e})=>e[3]};
-    padding: ${({spacing:e})=>e[2]};
-    align-items: center;
-    transition: background-color ${({durations:e})=>e.lg}
-      ${({easings:e})=>e["ease-out-power-2"]};
-    will-change: background-color;
-  }
-
-  .select-network-button:hover {
-    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
-  }
-
-  .select-network-button > wui-image {
-    width: 26px;
-    height: 26px;
-    border-radius: ${({borderRadius:e})=>e[4]};
-    box-shadow: inset 0 0 0 1px ${({tokens:e})=>e.core.glass010};
-  }
-`;var v=function(e,t,o,i){var r=arguments.length,n=r<3?t:i===null?i=Object.getOwnPropertyDescriptor(t,o):i,a;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")n=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(a=e[c])&&(n=(r<3?a(n):r>3?a(t,o,n):a(t,o))||n);return r>3&&n&&Object.defineProperty(t,o,n),n};let x=class extends C{constructor(){var t;super(),this.unsubscribe=[],this.targetToken=(t=S.state.data)==null?void 0:t.target,this.sourceToken=s.state.sourceToken,this.sourceTokenAmount=s.state.sourceTokenAmount,this.toToken=s.state.toToken,this.myTokensWithBalance=s.state.myTokensWithBalance,this.popularTokens=s.state.popularTokens,this.suggestedTokens=s.state.suggestedTokens,this.tokensLoading=s.state.tokensLoading,this.searchValue="",this.unsubscribe.push(s.subscribe(o=>{this.sourceToken=o.sourceToken,this.toToken=o.toToken,this.myTokensWithBalance=o.myTokensWithBalance,this.popularTokens=o.popularTokens,this.suggestedTokens=o.suggestedTokens,this.tokensLoading=o.tokensLoading}))}async firstUpdated(){await s.getTokenList()}updated(){var i,r;const t=(i=this.renderRoot)==null?void 0:i.querySelector(".suggested-tokens-container");t==null||t.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));const o=(r=this.renderRoot)==null?void 0:r.querySelector(".tokens");o==null||o.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){var i,r;super.disconnectedCallback();const t=(i=this.renderRoot)==null?void 0:i.querySelector(".suggested-tokens-container"),o=(r=this.renderRoot)==null?void 0:r.querySelector(".tokens");t==null||t.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),o==null||o.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return u`
-      <wui-flex flexDirection="column" gap="3">
-        ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
-      </wui-flex>
-    `}onSelectToken(t){this.targetToken==="sourceToken"?s.setSourceToken(t):(s.setToToken(t),this.sourceToken&&this.sourceTokenAmount&&s.swapTokens()),S.goBack()}templateSearchInput(){return u`
-      <wui-flex .padding=${["1","3","0","3"]} gap="2">
-        <wui-input-text
-          data-testid="swap-select-token-search-input"
-          class="network-search-input"
-          size="sm"
-          placeholder="Search token"
-          icon="search"
-          .value=${this.searchValue}
-          @inputChange=${this.onSearchInputChange.bind(this)}
-        ></wui-input-text>
-      </wui-flex>
-    `}templateMyTokens(){const t=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],o=this.filterTokensWithText(t,this.searchValue);return(o==null?void 0:o.length)>0?u`<wui-flex justifyContent="flex-start" padding="2">
-          <wui-text variant="md-medium" color="secondary">Your tokens</wui-text>
-        </wui-flex>
-        ${o.map(i=>{var n,a,c;const r=i.symbol===((n=this.sourceToken)==null?void 0:n.symbol)||i.symbol===((a=this.toToken)==null?void 0:a.symbol);return u`
-            <wui-token-list-item
-              data-testid="swap-select-token-item-${i.symbol}"
-              name=${i.name}
-              ?disabled=${r}
-              symbol=${i.symbol}
-              price=${i==null?void 0:i.price}
-              amount=${(c=i==null?void 0:i.quantity)==null?void 0:c.numeric}
-              imageSrc=${i.logoUri}
-              @click=${()=>{r||this.onSelectToken(i)}}
-            >
-            </wui-token-list-item>
-          `})}`:null}templateAllTokens(){const t=this.popularTokens?this.popularTokens:[],o=this.filterTokensWithText(t,this.searchValue);return this.tokensLoading?u`
-        <wui-token-list-item-loader></wui-token-list-item-loader>
-        <wui-token-list-item-loader></wui-token-list-item-loader>
-        <wui-token-list-item-loader></wui-token-list-item-loader>
-        <wui-token-list-item-loader></wui-token-list-item-loader>
-        <wui-token-list-item-loader></wui-token-list-item-loader>
-      `:(o==null?void 0:o.length)>0?u`
-        ${o.map(i=>u`
-            <wui-token-list-item
-              data-testid="swap-select-token-item-${i.symbol}"
-              name=${i.name}
-              symbol=${i.symbol}
-              imageSrc=${i.logoUri}
-              @click=${()=>this.onSelectToken(i)}
-            >
-            </wui-token-list-item>
-          `)}
-      `:null}templateTokens(){return u`
-      <wui-flex class="tokens-container">
-        <wui-flex class="tokens" .padding=${["0","2","2","2"]} flexDirection="column">
-          ${this.templateMyTokens()}
-          <wui-flex justifyContent="flex-start" padding="3">
-            <wui-text variant="md-medium" color="secondary">Tokens</wui-text>
-          </wui-flex>
-          ${this.templateAllTokens()}
-        </wui-flex>
-      </wui-flex>
-    `}templateSuggestedTokens(){const t=this.suggestedTokens?this.suggestedTokens.slice(0,8):null;return this.tokensLoading?u`
-        <wui-flex
-          class="suggested-tokens-container"
-          .padding=${["0","3","0","3"]}
-          gap="2"
-        >
-          <wui-token-button loading></wui-token-button>
-          <wui-token-button loading></wui-token-button>
-          <wui-token-button loading></wui-token-button>
-          <wui-token-button loading></wui-token-button>
-          <wui-token-button loading></wui-token-button>
-        </wui-flex>
-      `:t?u`
-      <wui-flex
-        class="suggested-tokens-container"
-        .padding=${["0","3","0","3"]}
-        gap="2"
-      >
-        ${t.map(o=>u`
-            <wui-token-button
-              text=${o.symbol}
-              imageSrc=${o.logoUri}
-              @click=${()=>this.onSelectToken(o)}
-            >
-            </wui-token-button>
-          `)}
-      </wui-flex>
-    `:null}onSearchInputChange(t){this.searchValue=t.detail}handleSuggestedTokensScroll(){var o;const t=(o=this.renderRoot)==null?void 0:o.querySelector(".suggested-tokens-container");t&&(t.style.setProperty("--suggested-tokens-scroll--left-opacity",_.interpolate([0,100],[0,1],t.scrollLeft).toString()),t.style.setProperty("--suggested-tokens-scroll--right-opacity",_.interpolate([0,100],[0,1],t.scrollWidth-t.scrollLeft-t.offsetWidth).toString()))}handleTokenListScroll(){var o;const t=(o=this.renderRoot)==null?void 0:o.querySelector(".tokens");t&&(t.style.setProperty("--tokens-scroll--top-opacity",_.interpolate([0,100],[0,1],t.scrollTop).toString()),t.style.setProperty("--tokens-scroll--bottom-opacity",_.interpolate([0,100],[0,1],t.scrollHeight-t.scrollTop-t.offsetHeight).toString()))}filterTokensWithText(t,o){return t.filter(i=>`${i.symbol} ${i.name} ${i.address}`.toLowerCase().includes(o.toLowerCase())).sort((i,r)=>{const n=`${i.symbol} ${i.name} ${i.address}`.toLowerCase(),a=`${r.symbol} ${r.name} ${r.address}`.toLowerCase(),c=n.indexOf(o.toLowerCase()),b=a.indexOf(o.toLowerCase());return c-b})}};x.styles=re;v([l()],x.prototype,"interval",void 0);v([l()],x.prototype,"targetToken",void 0);v([l()],x.prototype,"sourceToken",void 0);v([l()],x.prototype,"sourceTokenAmount",void 0);v([l()],x.prototype,"toToken",void 0);v([l()],x.prototype,"myTokensWithBalance",void 0);v([l()],x.prototype,"popularTokens",void 0);v([l()],x.prototype,"suggestedTokens",void 0);v([l()],x.prototype,"tokensLoading",void 0);v([l()],x.prototype,"searchValue",void 0);x=v([D("w3m-swap-select-token-view")],x);export{d as W3mSwapPreviewView,x as W3mSwapSelectTokenView,p as W3mSwapView};