@prohetamine/redstone 0.0.1

package/dist/swaps-DpR9W9Ld.js

@@ -0,0 +1,1050 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-CjZQCcwG.js"),s=require("./SwapController-4lzoYsYr.js");require("./index-DhN9vL4k.js");const I={numericInputKeyDown(e,o,i){const n=["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"],a=e.metaKey||e.ctrlKey,r=e.key,l=r.toLocaleLowerCase(),c=l==="a",h=l==="c",k=l==="v",y=l==="x",T=r===",",S=r===".",C=r>="0"&&r<="9";!a&&(c||h||k||y)&&e.preventDefault(),o==="0"&&!T&&!S&&r==="0"&&e.preventDefault(),o==="0"&&C&&(i(r),e.preventDefault()),(T||S)&&(o||(i("0."),e.preventDefault()),(o!=null&&o.includes(".")||o!=null&&o.includes(","))&&e.preventDefault()),!C&&!n.includes(r)&&!S&&!T&&e.preventDefault()}},A=t.css`
+  :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 m=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};const D=t.ConstantsUtil$1.CONVERT_SLIPPAGE_TOLERANCE;let d=class extends t.i{constructor(){var o;super(),this.unsubscribe=[],this.networkName=(o=t.ChainController.state.activeCaipNetwork)==null?void 0:o.name,this.detailsOpen=!1,this.sourceToken=s.SwapController.state.sourceToken,this.toToken=s.SwapController.state.toToken,this.toTokenAmount=s.SwapController.state.toTokenAmount,this.sourceTokenPriceInUSD=s.SwapController.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=s.SwapController.state.toTokenPriceInUSD,this.priceImpact=s.SwapController.state.priceImpact,this.maxSlippage=s.SwapController.state.maxSlippage,this.networkTokenSymbol=s.SwapController.state.networkTokenSymbol,this.inputError=s.SwapController.state.inputError,this.unsubscribe.push(s.SwapController.subscribe(i=>{this.sourceToken=i.sourceToken,this.toToken=i.toToken,this.toTokenAmount=i.toTokenAmount,this.priceImpact=i.priceImpact,this.maxSlippage=i.maxSlippage,this.sourceTokenPriceInUSD=i.sourceTokenPriceInUSD,this.toTokenPriceInUSD=i.toTokenPriceInUSD,this.inputError=i.inputError}))}render(){const o=this.toTokenAmount&&this.maxSlippage?t.NumberUtil.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const i=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return t.b`
+      <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} =
+                  ${t.NumberUtil.formatNumberToLocalString(i,3)}
+                  ${this.toToken.symbol}
+                </wui-text>
+                <wui-text variant="sm-regular" color="secondary">
+                  $${t.NumberUtil.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
+                </wui-text>
+              </wui-flex>
+              <wui-icon name="chevronBottom"></wui-icon>
+            </wui-flex>
+          </button>
+          ${this.detailsOpen?t.b`
+                <wui-flex flexDirection="column" gap="2" class="details-content-container">
+                  ${this.priceImpact?t.b` <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">
+                              ${t.NumberUtil.formatNumberToLocalString(this.priceImpact,3)}%
+                            </wui-text>
+                          </wui-flex>
+                        </wui-flex>
+                      </wui-flex>`:null}
+                  ${this.maxSlippage&&this.sourceToken.symbol?t.b`<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. ${o?`Transaction will be reversed if you receive less than ${t.NumberUtil.formatNumberToLocalString(o,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">
+                              ${t.NumberUtil.formatNumberToLocalString(this.maxSlippage,6)}
+                              ${this.toToken.symbol} ${D}%
+                            </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}};d.styles=[A];m([t.r()],d.prototype,"networkName",void 0);m([t.n()],d.prototype,"detailsOpen",void 0);m([t.r()],d.prototype,"sourceToken",void 0);m([t.r()],d.prototype,"toToken",void 0);m([t.r()],d.prototype,"toTokenAmount",void 0);m([t.r()],d.prototype,"sourceTokenPriceInUSD",void 0);m([t.r()],d.prototype,"toTokenPriceInUSD",void 0);m([t.r()],d.prototype,"priceImpact",void 0);m([t.r()],d.prototype,"maxSlippage",void 0);m([t.r()],d.prototype,"networkTokenSymbol",void 0);m([t.r()],d.prototype,"inputError",void 0);d=m([t.customElement("w3m-swap-details")],d);const W=t.css`
+  :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 P=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};let v=class extends t.i{constructor(){super(...arguments),this.target="sourceToken"}render(){return t.b`
+      <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 t.b`
+      <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>
+    `}};v.styles=[W];P([t.n()],v.prototype,"target",void 0);v=P([t.customElement("w3m-swap-input-skeleton")],v);const U=t.css`
+  :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 f=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};const V=5e-5;let w=class extends t.i{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const o=this.marketValue||"0",i=t.NumberUtil.bigNumber(o).gt("0");return t.b`
+      <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">
+            ${i?`$${t.NumberUtil.formatNumberToLocalString(this.marketValue,2)}`:null}
+          </wui-text>
+        </wui-flex>
+        ${this.templateTokenSelectButton()}
+      </wui-flex>
+    `}handleKeydown(o){return I.numericInputKeyDown(o,this.value,i=>{var n;return(n=this.onSetAmount)==null?void 0:n.call(this,this.target,i)})}dispatchInputChangeEvent(o){if(!this.onSetAmount)return;const i=o.target.value.replace(/[^0-9.]/gu,"");i===","||i==="."?this.onSetAmount(this.target,"0."):i.endsWith(",")?this.onSetAmount(this.target,i.replace(",",".")):this.onSetAmount(this.target,i)}setMaxValueToInput(){var o;(o=this.onSetMaxValue)==null||o.call(this,this.target,this.balance)}templateTokenSelectButton(){return this.token?t.b`
+      <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>
+    `:t.b` <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 o=t.NumberUtil.multiply(this.balance,this.price),i=o?o==null?void 0:o.gt(V):!1;return t.b`
+      ${i?t.b`<wui-text variant="sm-regular" color="secondary">
+            ${t.NumberUtil.formatNumberToLocalString(this.balance,2)}
+          </wui-text>`:null}
+      ${this.target==="sourceToken"?this.tokenActionButtonTemplate(i):null}
+    `}tokenActionButtonTemplate(o){return o?t.b` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
+        <wui-text color="accent-primary" variant="sm-medium">Max</wui-text>
+      </button>`:t.b` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
+      <wui-text color="accent-primary" variant="sm-medium">Buy</wui-text>
+    </button>`}onFocusChange(o){this.focused=o}onSelectToken(){t.EventsController.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),t.RouterController.push("SwapSelectToken",{target:this.target})}onBuyToken(){t.RouterController.push("OnRampProviders")}};w.styles=[U];f([t.n()],w.prototype,"focused",void 0);f([t.n()],w.prototype,"balance",void 0);f([t.n()],w.prototype,"value",void 0);f([t.n()],w.prototype,"price",void 0);f([t.n()],w.prototype,"marketValue",void 0);f([t.n()],w.prototype,"disabled",void 0);f([t.n()],w.prototype,"target",void 0);f([t.n()],w.prototype,"token",void 0);f([t.n()],w.prototype,"onSetAmount",void 0);f([t.n()],w.prototype,"onSetMaxValue",void 0);w=f([t.customElement("w3m-swap-input")],w);const E=t.css`
+  :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 u=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};exports.W3mSwapView=class extends t.i{subscribe({resetSwapState:o,initializeSwapState:i}){return()=>{t.ChainController.subscribeKey("activeCaipNetwork",n=>this.onCaipNetworkChange({newCaipNetwork:n,resetSwapState:o,initializeSwapState:i})),t.ChainController.subscribeChainProp("accountState",n=>{this.onCaipAddressChange({newCaipAddress:n==null?void 0:n.caipAddress,resetSwapState:o,initializeSwapState:i})})}}constructor(){var o,i,n;super(),this.unsubscribe=[],this.initialParams=(o=t.RouterController.state.data)==null?void 0:o.swap,this.detailsOpen=!1,this.caipAddress=(i=t.ChainController.getAccountData())==null?void 0:i.caipAddress,this.caipNetworkId=(n=t.ChainController.state.activeCaipNetwork)==null?void 0:n.caipNetworkId,this.initialized=s.SwapController.state.initialized,this.loadingQuote=s.SwapController.state.loadingQuote,this.loadingPrices=s.SwapController.state.loadingPrices,this.loadingTransaction=s.SwapController.state.loadingTransaction,this.sourceToken=s.SwapController.state.sourceToken,this.sourceTokenAmount=s.SwapController.state.sourceTokenAmount,this.sourceTokenPriceInUSD=s.SwapController.state.sourceTokenPriceInUSD,this.toToken=s.SwapController.state.toToken,this.toTokenAmount=s.SwapController.state.toTokenAmount,this.toTokenPriceInUSD=s.SwapController.state.toTokenPriceInUSD,this.inputError=s.SwapController.state.inputError,this.fetchError=s.SwapController.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=t.CoreHelperUtil.debounce(async()=>{await s.SwapController.swapTokens()},200),this.subscribe({resetSwapState:!0,initializeSwapState:!1})(),this.unsubscribe.push(this.subscribe({resetSwapState:!1,initializeSwapState:!0}),t.ModalController.subscribeKey("open",a=>{a||s.SwapController.resetState()}),t.RouterController.subscribeKey("view",a=>{a.includes("Swap")||s.SwapController.resetValues()}),s.SwapController.subscribe(a=>{this.initialized=a.initialized,this.loadingQuote=a.loadingQuote,this.loadingPrices=a.loadingPrices,this.loadingTransaction=a.loadingTransaction,this.sourceToken=a.sourceToken,this.sourceTokenAmount=a.sourceTokenAmount,this.sourceTokenPriceInUSD=a.sourceTokenPriceInUSD,this.toToken=a.toToken,this.toTokenAmount=a.toTokenAmount,this.toTokenPriceInUSD=a.toTokenPriceInUSD,this.inputError=a.inputError,this.fetchError=a.fetchError,a.sourceToken&&a.toToken&&this.watchTokensAndValues()}))}async firstUpdated(){s.SwapController.initializeState(),this.watchTokensAndValues(),await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach(o=>o==null?void 0:o()),clearInterval(this.interval),document==null||document.removeEventListener("visibilitychange",this.visibilityChangeHandler)}render(){return t.b`
+      <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.SwapController.getNetworkTokenPrice(),s.SwapController.getMyTokensWithBalance(),s.SwapController.swapTokens(),this.lastTokenPriceUpdate=Date.now()}templateSwap(){return t.b`
+      <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 o=!this.sourceTokenAmount||this.sourceTokenAmount==="0";return this.fetchError?"Swap":!this.sourceToken||!this.toToken?"Select token":o?"Enter amount":this.inputError?this.inputError:"Review swap"}templateReplaceTokensButton(){return t.b`
+      <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 t.b`
+      <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(o,i){var c,h;const n=(c=s.SwapController.state.myTokensWithBalance)==null?void 0:c.find(k=>(k==null?void 0:k.address)===(i==null?void 0:i.address)),a=o==="toToken"?this.toTokenAmount:this.sourceTokenAmount,r=o==="toToken"?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,l=t.NumberUtil.parseLocalStringToNumber(a)*r;return t.b`<w3m-swap-input
+      .value=${o==="toToken"?this.toTokenAmount:this.sourceTokenAmount}
+      .disabled=${o==="toToken"}
+      .onSetAmount=${this.handleChangeAmount.bind(this)}
+      target=${o}
+      .token=${i}
+      .balance=${(h=n==null?void 0:n.quantity)==null?void 0:h.numeric}
+      .price=${n==null?void 0:n.price}
+      .marketValue=${l}
+      .onSetMaxValue=${this.onSetMaxValue.bind(this)}
+    ></w3m-swap-input>`}onSetMaxValue(o,i){const n=t.NumberUtil.bigNumber(i||"0");this.handleChangeAmount(o,n.gt(0)?n.toFixed(20):"0")}templateDetails(){return!this.sourceToken||!this.toToken||this.inputError?null:t.b`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}handleChangeAmount(o,i){s.SwapController.clearError(),o==="sourceToken"?s.SwapController.setSourceTokenAmount(i):s.SwapController.setToTokenAmount(i),this.onDebouncedGetSwapCalldata()}templateActionButton(){const o=!this.toToken||!this.sourceToken,i=!this.sourceTokenAmount||this.sourceTokenAmount==="0",n=this.loadingQuote||this.loadingPrices||this.loadingTransaction,a=n||o||i||this.inputError;return t.b` <wui-flex gap="2">
+      <wui-button
+        data-testid="swap-action-button"
+        class="action-button"
+        fullWidth
+        size="lg"
+        borderRadius="xs"
+        variant="accent-primary"
+        ?loading=${!!n}
+        ?disabled=${!!a}
+        @click=${this.onSwapPreview.bind(this)}
+      >
+        ${this.actionButtonLabel()}
+      </wui-button>
+    </wui-flex>`}async onSwitchTokens(){await s.SwapController.switchTokens()}async onSwapPreview(){var o,i;this.fetchError&&await s.SwapController.swapTokens(),t.EventsController.sendEvent({type:"track",event:"INITIATE_SWAP",properties:{network:this.caipNetworkId||"",swapFromToken:((o=this.sourceToken)==null?void 0:o.symbol)||"",swapToToken:((i=this.toToken)==null?void 0:i.symbol)||"",swapFromAmount:this.sourceTokenAmount||"",swapToAmount:this.toTokenAmount||"",isSmartAccount:t.getPreferredAccountType(t.ChainController.state.activeChain)===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT}}),t.RouterController.push("SwapPreview")}async handleSwapParameters(){this.initialParams&&(s.SwapController.state.initialized||await new Promise(i=>{const n=s.SwapController.subscribeKey("initialized",a=>{a&&(n==null||n(),i())})}),await this.setSwapParameters(this.initialParams))}async setSwapParameters({amount:o,fromToken:i,toToken:n}){(!s.SwapController.state.tokens||!s.SwapController.state.myTokensWithBalance)&&await new Promise(l=>{const c=s.SwapController.subscribeKey("myTokensWithBalance",h=>{h&&h.length>0&&(c==null||c(),l())});setTimeout(()=>{c==null||c(),l()},5e3)});const a=[...s.SwapController.state.tokens||[],...s.SwapController.state.myTokensWithBalance||[]];if(i){const r=a.find(l=>l.symbol.toLowerCase()===i.toLowerCase());r&&s.SwapController.setSourceToken(r)}if(n){const r=a.find(l=>l.symbol.toLowerCase()===n.toLowerCase());r&&s.SwapController.setToToken(r)}o&&!isNaN(Number(o))&&s.SwapController.setSourceTokenAmount(o)}onCaipAddressChange({newCaipAddress:o,resetSwapState:i,initializeSwapState:n}){this.caipAddress!==o&&(this.caipAddress=o,i&&s.SwapController.resetState(),n&&s.SwapController.initializeState())}onCaipNetworkChange({newCaipNetwork:o,resetSwapState:i,initializeSwapState:n}){this.caipNetworkId!==(o==null?void 0:o.caipNetworkId)&&(this.caipNetworkId=o==null?void 0:o.caipNetworkId,i&&s.SwapController.resetState(),n&&s.SwapController.initializeState())}};exports.W3mSwapView.styles=E;u([t.n({type:Object})],exports.W3mSwapView.prototype,"initialParams",void 0);u([t.r()],exports.W3mSwapView.prototype,"interval",void 0);u([t.r()],exports.W3mSwapView.prototype,"detailsOpen",void 0);u([t.r()],exports.W3mSwapView.prototype,"caipAddress",void 0);u([t.r()],exports.W3mSwapView.prototype,"caipNetworkId",void 0);u([t.r()],exports.W3mSwapView.prototype,"initialized",void 0);u([t.r()],exports.W3mSwapView.prototype,"loadingQuote",void 0);u([t.r()],exports.W3mSwapView.prototype,"loadingPrices",void 0);u([t.r()],exports.W3mSwapView.prototype,"loadingTransaction",void 0);u([t.r()],exports.W3mSwapView.prototype,"sourceToken",void 0);u([t.r()],exports.W3mSwapView.prototype,"sourceTokenAmount",void 0);u([t.r()],exports.W3mSwapView.prototype,"sourceTokenPriceInUSD",void 0);u([t.r()],exports.W3mSwapView.prototype,"toToken",void 0);u([t.r()],exports.W3mSwapView.prototype,"toTokenAmount",void 0);u([t.r()],exports.W3mSwapView.prototype,"toTokenPriceInUSD",void 0);u([t.r()],exports.W3mSwapView.prototype,"inputError",void 0);u([t.r()],exports.W3mSwapView.prototype,"fetchError",void 0);u([t.r()],exports.W3mSwapView.prototype,"lastTokenPriceUpdate",void 0);exports.W3mSwapView=u([t.customElement("w3m-swap-view")],exports.W3mSwapView);const L=t.css`
+  :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 p=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};exports.W3mSwapPreviewView=class extends t.i{constructor(){var o;super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=s.SwapController.state.approvalTransaction,this.swapTransaction=s.SwapController.state.swapTransaction,this.sourceToken=s.SwapController.state.sourceToken,this.sourceTokenAmount=s.SwapController.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=s.SwapController.state.sourceTokenPriceInUSD,this.balanceSymbol=(o=t.ChainController.getAccountData())==null?void 0:o.balanceSymbol,this.toToken=s.SwapController.state.toToken,this.toTokenAmount=s.SwapController.state.toTokenAmount??"",this.toTokenPriceInUSD=s.SwapController.state.toTokenPriceInUSD,this.caipNetwork=t.ChainController.state.activeCaipNetwork,this.inputError=s.SwapController.state.inputError,this.loadingQuote=s.SwapController.state.loadingQuote,this.loadingApprovalTransaction=s.SwapController.state.loadingApprovalTransaction,this.loadingBuildTransaction=s.SwapController.state.loadingBuildTransaction,this.loadingTransaction=s.SwapController.state.loadingTransaction,this.unsubscribe.push(t.ChainController.subscribeChainProp("accountState",i=>{(i==null?void 0:i.balanceSymbol)!==this.balanceSymbol&&t.RouterController.goBack()}),t.ChainController.subscribeKey("activeCaipNetwork",i=>{this.caipNetwork!==i&&(this.caipNetwork=i)}),s.SwapController.subscribe(i=>{this.approvalTransaction=i.approvalTransaction,this.swapTransaction=i.swapTransaction,this.sourceToken=i.sourceToken,this.toToken=i.toToken,this.toTokenPriceInUSD=i.toTokenPriceInUSD,this.sourceTokenAmount=i.sourceTokenAmount??"",this.toTokenAmount=i.toTokenAmount??"",this.inputError=i.inputError,i.inputError&&t.RouterController.goBack(),this.loadingQuote=i.loadingQuote,this.loadingApprovalTransaction=i.loadingApprovalTransaction,this.loadingBuildTransaction=i.loadingBuildTransaction,this.loadingTransaction=i.loadingTransaction}))}firstUpdated(){s.SwapController.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach(o=>o==null?void 0:o()),clearInterval(this.interval)}render(){return t.b`
+      <wui-flex flexDirection="column" .padding=${["0","4","4","4"]} gap="3">
+        ${this.templateSwap()}
+      </wui-flex>
+    `}refreshTransaction(){this.interval=setInterval(()=>{s.SwapController.getApprovalLoadingState()||s.SwapController.getTransaction()},1e4)}templateSwap(){var h,k,y,T;const o=`${t.NumberUtil.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${(h=this.sourceToken)==null?void 0:h.symbol}`,i=`${t.NumberUtil.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${(k=this.toToken)==null?void 0:k.symbol}`,n=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,a=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD,r=t.NumberUtil.formatNumberToLocalString(n),l=t.NumberUtil.formatNumberToLocalString(a),c=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return t.b`
+      <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">$${r}</wui-text>
+            </wui-flex>
+            <wui-token-button
+              flexDirection="row-reverse"
+              text=${o}
+              imageSrc=${(y=this.sourceToken)==null?void 0:y.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">$${l}</wui-text>
+            </wui-flex>
+            <wui-token-button
+              flexDirection="row-reverse"
+              text=${i}
+              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="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:t.b`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){t.RouterController.goBack()}onSendTransaction(){this.approvalTransaction?s.SwapController.sendTransactionForApproval(this.approvalTransaction):s.SwapController.sendTransactionForSwap(this.swapTransaction)}};exports.W3mSwapPreviewView.styles=L;p([t.r()],exports.W3mSwapPreviewView.prototype,"interval",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"detailsOpen",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"approvalTransaction",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"swapTransaction",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"sourceToken",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"sourceTokenAmount",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"sourceTokenPriceInUSD",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"balanceSymbol",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"toToken",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"toTokenAmount",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"toTokenPriceInUSD",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"caipNetwork",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"inputError",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"loadingQuote",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"loadingApprovalTransaction",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"loadingBuildTransaction",void 0);p([t.r()],exports.W3mSwapPreviewView.prototype,"loadingTransaction",void 0);exports.W3mSwapPreviewView=p([t.customElement("w3m-swap-preview-view")],exports.W3mSwapPreviewView);const N=t.css`
+  :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 x=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};let b=class extends t.i{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(o=>{o.forEach(i=>{i.isIntersecting?this.visible=!0:this.visible=!1})},{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}render(){var i;if(!this.visible)return null;const o=this.amount&&this.price?(i=t.NumberUtil.multiply(this.price,this.amount))==null?void 0:i.toFixed(3):null;return t.b`
+      <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>
+            ${o?t.b`
+                  <wui-text variant="md-medium" color="primary">
+                    $${t.NumberUtil.formatNumberToLocalString(o,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?t.b`<wui-text variant="sm-regular" color="secondary">
+                  ${t.NumberUtil.formatNumberToLocalString(this.amount,5)}
+                </wui-text>`:null}
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `}visualTemplate(){return this.imageError?t.b`<wui-flex class="token-item-image-placeholder">
+        <wui-icon name="image" color="inherit"></wui-icon>
+      </wui-flex>`:this.imageSrc?t.b`<wui-image
+        width="40"
+        height="40"
+        src=${this.imageSrc}
+        @onLoadError=${this.imageLoadError}
+      ></wui-image>`:null}imageLoadError(){this.imageError=!0}};b.styles=[t.resetStyles,t.elementStyles,N];x([t.n()],b.prototype,"imageSrc",void 0);x([t.n()],b.prototype,"name",void 0);x([t.n()],b.prototype,"symbol",void 0);x([t.n()],b.prototype,"price",void 0);x([t.n()],b.prototype,"amount",void 0);x([t.r()],b.prototype,"visible",void 0);x([t.r()],b.prototype,"imageError",void 0);b=x([t.customElement("wui-token-list-item")],b);const R=t.css`
+  :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 _=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};let $=class extends t.i{render(){return t.b`
+      <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>
+    `}};$.styles=[t.resetStyles,R];$=_([t.customElement("wui-token-list-item-loader")],$);const j=t.css`
+  :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 g=function(e,o,i,n){var a=arguments.length,r=a<3?o:n===null?n=Object.getOwnPropertyDescriptor(o,i):n,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(e,o,i,n);else for(var c=e.length-1;c>=0;c--)(l=e[c])&&(r=(a<3?l(r):a>3?l(o,i,r):l(o,i))||r);return a>3&&r&&Object.defineProperty(o,i,r),r};exports.W3mSwapSelectTokenView=class extends t.i{constructor(){var o;super(),this.unsubscribe=[],this.targetToken=(o=t.RouterController.state.data)==null?void 0:o.target,this.sourceToken=s.SwapController.state.sourceToken,this.sourceTokenAmount=s.SwapController.state.sourceTokenAmount,this.toToken=s.SwapController.state.toToken,this.myTokensWithBalance=s.SwapController.state.myTokensWithBalance,this.popularTokens=s.SwapController.state.popularTokens,this.suggestedTokens=s.SwapController.state.suggestedTokens,this.tokensLoading=s.SwapController.state.tokensLoading,this.searchValue="",this.unsubscribe.push(s.SwapController.subscribe(i=>{this.sourceToken=i.sourceToken,this.toToken=i.toToken,this.myTokensWithBalance=i.myTokensWithBalance,this.popularTokens=i.popularTokens,this.suggestedTokens=i.suggestedTokens,this.tokensLoading=i.tokensLoading}))}async firstUpdated(){await s.SwapController.getTokenList()}updated(){var n,a;const o=(n=this.renderRoot)==null?void 0:n.querySelector(".suggested-tokens-container");o==null||o.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));const i=(a=this.renderRoot)==null?void 0:a.querySelector(".tokens");i==null||i.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){var n,a;super.disconnectedCallback();const o=(n=this.renderRoot)==null?void 0:n.querySelector(".suggested-tokens-container"),i=(a=this.renderRoot)==null?void 0:a.querySelector(".tokens");o==null||o.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),i==null||i.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return t.b`
+      <wui-flex flexDirection="column" gap="3">
+        ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
+      </wui-flex>
+    `}onSelectToken(o){this.targetToken==="sourceToken"?s.SwapController.setSourceToken(o):(s.SwapController.setToToken(o),this.sourceToken&&this.sourceTokenAmount&&s.SwapController.swapTokens()),t.RouterController.goBack()}templateSearchInput(){return t.b`
+      <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 o=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],i=this.filterTokensWithText(o,this.searchValue);return(i==null?void 0:i.length)>0?t.b`<wui-flex justifyContent="flex-start" padding="2">
+          <wui-text variant="md-medium" color="secondary">Your tokens</wui-text>
+        </wui-flex>
+        ${i.map(n=>{var r,l,c;const a=n.symbol===((r=this.sourceToken)==null?void 0:r.symbol)||n.symbol===((l=this.toToken)==null?void 0:l.symbol);return t.b`
+            <wui-token-list-item
+              data-testid="swap-select-token-item-${n.symbol}"
+              name=${n.name}
+              ?disabled=${a}
+              symbol=${n.symbol}
+              price=${n==null?void 0:n.price}
+              amount=${(c=n==null?void 0:n.quantity)==null?void 0:c.numeric}
+              imageSrc=${n.logoUri}
+              @click=${()=>{a||this.onSelectToken(n)}}
+            >
+            </wui-token-list-item>
+          `})}`:null}templateAllTokens(){const o=this.popularTokens?this.popularTokens:[],i=this.filterTokensWithText(o,this.searchValue);return this.tokensLoading?t.b`
+        <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>
+      `:(i==null?void 0:i.length)>0?t.b`
+        ${i.map(n=>t.b`
+            <wui-token-list-item
+              data-testid="swap-select-token-item-${n.symbol}"
+              name=${n.name}
+              symbol=${n.symbol}
+              imageSrc=${n.logoUri}
+              @click=${()=>this.onSelectToken(n)}
+            >
+            </wui-token-list-item>
+          `)}
+      `:null}templateTokens(){return t.b`
+      <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 o=this.suggestedTokens?this.suggestedTokens.slice(0,8):null;return this.tokensLoading?t.b`
+        <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>
+      `:o?t.b`
+      <wui-flex
+        class="suggested-tokens-container"
+        .padding=${["0","3","0","3"]}
+        gap="2"
+      >
+        ${o.map(i=>t.b`
+            <wui-token-button
+              text=${i.symbol}
+              imageSrc=${i.logoUri}
+              @click=${()=>this.onSelectToken(i)}
+            >
+            </wui-token-button>
+          `)}
+      </wui-flex>
+    `:null}onSearchInputChange(o){this.searchValue=o.detail}handleSuggestedTokensScroll(){var i;const o=(i=this.renderRoot)==null?void 0:i.querySelector(".suggested-tokens-container");o&&(o.style.setProperty("--suggested-tokens-scroll--left-opacity",t.MathUtil.interpolate([0,100],[0,1],o.scrollLeft).toString()),o.style.setProperty("--suggested-tokens-scroll--right-opacity",t.MathUtil.interpolate([0,100],[0,1],o.scrollWidth-o.scrollLeft-o.offsetWidth).toString()))}handleTokenListScroll(){var i;const o=(i=this.renderRoot)==null?void 0:i.querySelector(".tokens");o&&(o.style.setProperty("--tokens-scroll--top-opacity",t.MathUtil.interpolate([0,100],[0,1],o.scrollTop).toString()),o.style.setProperty("--tokens-scroll--bottom-opacity",t.MathUtil.interpolate([0,100],[0,1],o.scrollHeight-o.scrollTop-o.offsetHeight).toString()))}filterTokensWithText(o,i){return o.filter(n=>`${n.symbol} ${n.name} ${n.address}`.toLowerCase().includes(i.toLowerCase())).sort((n,a)=>{const r=`${n.symbol} ${n.name} ${n.address}`.toLowerCase(),l=`${a.symbol} ${a.name} ${a.address}`.toLowerCase(),c=r.indexOf(i.toLowerCase()),h=l.indexOf(i.toLowerCase());return c-h})}};exports.W3mSwapSelectTokenView.styles=j;g([t.r()],exports.W3mSwapSelectTokenView.prototype,"interval",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"targetToken",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"sourceToken",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"sourceTokenAmount",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"toToken",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"myTokensWithBalance",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"popularTokens",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"suggestedTokens",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"tokensLoading",void 0);g([t.r()],exports.W3mSwapSelectTokenView.prototype,"searchValue",void 0);exports.W3mSwapSelectTokenView=g([t.customElement("w3m-swap-select-token-view")],exports.W3mSwapSelectTokenView);