@dodoex/wallet-web3 0.6.3 → 0.6.5

package/dist/w3m-modal-49add722.js

@@ -0,0 +1,2380 @@
+import{N as e,B as t,D as i,o,F as a,G as n,j as r,a as s,I as c,C as l,c as d,S as u,R as p,J as h,K as m,L as w,P as g,b as y,E as f,Q as b,U as v,M as k,V as x,e as T,r as A,i as S,d as I,k as E,w as P,X as C,Y as $,Z as N,_ as R,H as O,O as _,$ as U,h as D,y as L,u as B,f as z,A as W,T as j,a0 as F,a1 as q}from"./core-4d7ad6f2.js";import{c as M,n as V,o as G,r as H,a as Y,U as K,b as Q}from"./index-ffdf981b.js";import"events";import"./index-c5ca8a4e.js";import"./__tslib-6d6a586c.js";import"./index-09298bd0.js";import"@ethersproject/providers";import"zustand";import"@ethersproject/bytes";import"@ethersproject/properties";import"@ethersproject/address";import"@ethersproject/abstract-signer";import"buffer";import"@ethersproject/abstract-provider";import"@ethersproject/contracts";import"@ethersproject/constants";import"@ethersproject/transactions";const X={getGasPriceInEther:(e,t)=>Number(t*e)/1e18,getGasPriceInUSD(t,i,o){const a=X.getGasPriceInEther(i,o);return e.bigNumber(t).times(a).toNumber()},getPriceImpact({sourceTokenAmount:t,sourceTokenPriceInUSD:i,toTokenPriceInUSD:o,toTokenAmount:a}){const n=e.bigNumber(t).times(i),r=e.bigNumber(a).times(o);return n.minus(r).div(n).times(100).toNumber()},getMaxSlippage(t,i){const o=e.bigNumber(t).div(100);return e.multiply(i,o).toNumber()},getProviderFee:(t,i=.0085)=>e.bigNumber(t).times(i).toString(),isInsufficientNetworkTokenForGas(t,i){const o=i||"0";return!!e.bigNumber(t).eq(0)||e.bigNumber(e.bigNumber(o)).gt(t)},isInsufficientSourceTokenForSwap(t,i,o){const a=o?.find((e=>e.address===i))?.quantity?.numeric;return e.bigNumber(a||"0").lt(t)}},Z=15e4,J={initializing:!1,initialized:!1,loadingPrices:!1,loadingQuote:!1,loadingApprovalTransaction:!1,loadingBuildTransaction:!1,loadingTransaction:!1,switchingTokens:!1,fetchError:!1,approvalTransaction:void 0,swapTransaction:void 0,transactionError:void 0,sourceToken:void 0,sourceTokenAmount:"",sourceTokenPriceInUSD:0,toToken:void 0,toTokenAmount:"",toTokenPriceInUSD:0,networkPrice:"0",networkBalanceInUSD:"0",networkTokenSymbol:"",inputError:void 0,slippage:o.CONVERT_SLIPPAGE_TOLERANCE,tokens:void 0,popularTokens:void 0,suggestedTokens:void 0,foundTokens:void 0,myTokensWithBalance:void 0,tokensPriceMap:{},gasFee:"0",gasPriceInUSD:0,priceImpact:void 0,maxSlippage:void 0,providerFee:void 0},ee=t({...J}),te={state:ee,subscribe:e=>a(ee,(()=>e(ee))),subscribeKey:(e,t)=>n(ee,e,t),getParams(){const t=r.state.activeChain,i=r.getAccountData(t)?.caipAddress??r.state.activeCaipAddress,o=s.getPlainAddress(i),a=c(),n=l.getConnectorId(r.state.activeChain);if(!o)throw new Error("No address found to swap the tokens from.");const u=!ee.toToken?.address||!ee.toToken?.decimals,p=!ee.sourceToken?.address||!ee.sourceToken?.decimals||!e.bigNumber(ee.sourceTokenAmount).gt(0),h=!ee.sourceTokenAmount;return{networkAddress:a,fromAddress:o,fromCaipAddress:i,sourceTokenAddress:ee.sourceToken?.address,toTokenAddress:ee.toToken?.address,toTokenAmount:ee.toTokenAmount,toTokenDecimals:ee.toToken?.decimals,sourceTokenAmount:ee.sourceTokenAmount,sourceTokenDecimals:ee.sourceToken?.decimals,invalidToToken:u,invalidSourceToken:p,invalidSourceTokenAmount:h,availableToSwap:i&&!u&&!p&&!h,isAuthConnector:n===d.CONNECTOR_ID.AUTH}},async setSourceToken(e){if(!e)return ee.sourceToken=e,ee.sourceTokenAmount="",void(ee.sourceTokenPriceInUSD=0);ee.sourceToken=e,await ie.setTokenPrice(e.address,"sourceToken")},setSourceTokenAmount(e){ee.sourceTokenAmount=e},async setToToken(e){if(!e)return ee.toToken=e,ee.toTokenAmount="",void(ee.toTokenPriceInUSD=0);ee.toToken=e,await ie.setTokenPrice(e.address,"toToken")},setToTokenAmount(t){ee.toTokenAmount=t?e.toFixed(t,6):""},async setTokenPrice(e,t){let i=ee.tokensPriceMap[e]||0;i||(ee.loadingPrices=!0,i=await ie.getAddressPrice(e)),"sourceToken"===t?ee.sourceTokenPriceInUSD=i:"toToken"===t&&(ee.toTokenPriceInUSD=i),ee.loadingPrices&&(ee.loadingPrices=!1),ie.getParams().availableToSwap&&!ee.switchingTokens&&ie.swapTokens()},async switchTokens(){if(!ee.initializing&&ee.initialized&&!ee.switchingTokens){ee.switchingTokens=!0;try{const e=ee.toToken?{...ee.toToken}:void 0,t=ee.sourceToken?{...ee.sourceToken}:void 0,i=e&&""===ee.toTokenAmount?"1":ee.toTokenAmount;ie.setSourceTokenAmount(i),ie.setToTokenAmount(""),await ie.setSourceToken(e),await ie.setToToken(t),ee.switchingTokens=!1,ie.swapTokens()}catch(e){throw ee.switchingTokens=!1,e}}},resetState(){ee.myTokensWithBalance=J.myTokensWithBalance,ee.tokensPriceMap=J.tokensPriceMap,ee.initialized=J.initialized,ee.initializing=J.initializing,ee.switchingTokens=J.switchingTokens,ee.sourceToken=J.sourceToken,ee.sourceTokenAmount=J.sourceTokenAmount,ee.sourceTokenPriceInUSD=J.sourceTokenPriceInUSD,ee.toToken=J.toToken,ee.toTokenAmount=J.toTokenAmount,ee.toTokenPriceInUSD=J.toTokenPriceInUSD,ee.networkPrice=J.networkPrice,ee.networkTokenSymbol=J.networkTokenSymbol,ee.networkBalanceInUSD=J.networkBalanceInUSD,ee.inputError=J.inputError},resetValues(){const{networkAddress:e}=ie.getParams(),t=ee.tokens?.find((t=>t.address===e));ie.setSourceToken(t),ie.setToToken(void 0)},getApprovalLoadingState:()=>ee.loadingApprovalTransaction,clearError(){ee.transactionError=void 0},async initializeState(){if(!ee.initializing){if(ee.initializing=!0,!ee.initialized)try{await ie.fetchTokens(),ee.initialized=!0}catch(e){ee.initialized=!1,u.showError("Failed to initialize swap"),p.goBack()}ee.initializing=!1}},async fetchTokens(){const{networkAddress:e}=ie.getParams();await ie.getNetworkTokenPrice(),await ie.getMyTokensWithBalance();const t=ee.myTokensWithBalance?.find((t=>t.address===e));t&&(ee.networkTokenSymbol=t.symbol,ie.setSourceToken(t),ie.setSourceTokenAmount("0"))},async getTokenList(){const e=r.state.activeCaipNetwork?.caipNetworkId;if(ee.caipNetworkId!==e||!ee.tokens)try{ee.tokensLoading=!0;const t=await h.getTokenList(e);ee.tokens=t,ee.caipNetworkId=e,ee.popularTokens=t.sort(((e,t)=>e.symbol<t.symbol?-1:e.symbol>t.symbol?1:0));const i=(e&&o.SUGGESTED_TOKENS_BY_CHAIN?.[e]||[]).map((e=>t.find((t=>t.symbol===e)))).filter((e=>Boolean(e))),a=(o.SWAP_SUGGESTED_TOKENS||[]).map((e=>t.find((t=>t.symbol===e)))).filter((e=>Boolean(e))).filter((e=>!i.some((t=>t.address===e.address))));ee.suggestedTokens=[...i,...a]}catch(e){ee.tokens=[],ee.popularTokens=[],ee.suggestedTokens=[]}finally{ee.tokensLoading=!1}},async getAddressPrice(e){const t=ee.tokensPriceMap[e];if(t)return t;const i=await m.fetchTokenPrice({addresses:[e]}),o=i?.fungibles||[],a=[...ee.tokens||[],...ee.myTokensWithBalance||[]],n=a?.find((t=>t.address===e))?.symbol,r=o.find((e=>e.symbol.toLowerCase()===n?.toLowerCase()))?.price||0,s=parseFloat(r.toString());return ee.tokensPriceMap[e]=s,s},async getNetworkTokenPrice(){const{networkAddress:e}=ie.getParams(),t=await m.fetchTokenPrice({addresses:[e]}).catch((()=>(u.showError("Failed to fetch network token price"),{fungibles:[]}))),i=t.fungibles?.[0],o=i?.price.toString()||"0";ee.tokensPriceMap[e]=parseFloat(o),ee.networkTokenSymbol=i?.symbol||"",ee.networkPrice=o},async getMyTokensWithBalance(e){const t=await w.getMyTokensWithBalance({forceUpdate:e,caipNetwork:r.state.activeCaipNetwork,address:r.getAccountData()?.address}),i=h.mapBalancesToSwapTokens(t);i&&(await ie.getInitialGasPrice(),ie.setBalances(i))},setBalances(t){const{networkAddress:i}=ie.getParams(),o=r.state.activeCaipNetwork;if(!o)return;const a=t.find((e=>e.address===i));t.forEach((e=>{ee.tokensPriceMap[e.address]=e.price||0})),ee.myTokensWithBalance=t.filter((e=>e.address.startsWith(o.caipNetworkId))),ee.networkBalanceInUSD=a?e.multiply(a.quantity.numeric,a.price).toString():"0"},async getInitialGasPrice(){const t=await h.fetchGasPrice();if(!t)return{gasPrice:null,gasPriceInUSD:null};switch(r.state?.activeCaipNetwork?.chainNamespace){case d.CHAIN.SOLANA:return ee.gasFee=t.standard??"0",ee.gasPriceInUSD=e.multiply(t.standard,ee.networkPrice).div(1e9).toNumber(),{gasPrice:BigInt(ee.gasFee),gasPriceInUSD:Number(ee.gasPriceInUSD)};case d.CHAIN.EVM:default:const i=t.standard??"0",o=BigInt(i),a=BigInt(Z),n=X.getGasPriceInUSD(ee.networkPrice,a,o);return ee.gasFee=i,ee.gasPriceInUSD=n,{gasPrice:o,gasPriceInUSD:n}}},async swapTokens(){const t=r.getAccountData()?.address,i=ee.sourceToken,o=ee.toToken,a=e.bigNumber(ee.sourceTokenAmount).gt(0);if(a||ie.setToTokenAmount(""),!o||!i||ee.loadingPrices||!a||!t)return;ee.loadingQuote=!0;const n=e.bigNumber(ee.sourceTokenAmount).times(10**i.decimals).round(0).toFixed(0);try{const a=await m.fetchSwapQuote({userAddress:t,from:i.address,to:o.address,gasPrice:ee.gasFee,amount:n.toString()});ee.loadingQuote=!1;const r=a?.quotes?.[0]?.toAmount;if(!r)return void g.open({displayMessage:"Incorrect amount",debugMessage:"Please enter a valid amount"},"error");const s=e.bigNumber(r).div(10**o.decimals).toString();ie.setToTokenAmount(s);ie.hasInsufficientToken(ee.sourceTokenAmount,i.address)?ee.inputError="Insufficient balance":(ee.inputError=void 0,ie.setTransactionDetails())}catch(e){const t=await h.handleSwapError(e);ee.loadingQuote=!1,ee.inputError=t||"Insufficient balance"}},async getTransaction(){const{fromCaipAddress:e,availableToSwap:t}=ie.getParams(),i=ee.sourceToken,o=ee.toToken;if(e&&t&&i&&o&&!ee.loadingQuote)try{ee.loadingBuildTransaction=!0;let t;return t=await h.fetchSwapAllowance({userAddress:e,tokenAddress:i.address,sourceTokenAmount:ee.sourceTokenAmount,sourceTokenDecimals:i.decimals})?await ie.createSwapTransaction():await ie.createAllowanceTransaction(),ee.loadingBuildTransaction=!1,ee.fetchError=!1,t}catch(e){return p.goBack(),u.showError("Failed to check allowance"),ee.loadingBuildTransaction=!1,ee.approvalTransaction=void 0,ee.swapTransaction=void 0,void(ee.fetchError=!0)}},async createAllowanceTransaction(){const{fromCaipAddress:e,sourceTokenAddress:t,toTokenAddress:i}=ie.getParams();if(e&&i){if(!t)throw new Error("createAllowanceTransaction - No source token address found.");try{const o=await m.generateApproveCalldata({from:t,to:i,userAddress:e}),a=s.getPlainAddress(o.tx.from);if(!a)throw new Error("SwapController:createAllowanceTransaction - address is required");const n={data:o.tx.data,to:a,gasPrice:BigInt(o.tx.eip155.gasPrice),value:BigInt(o.tx.value),toAmount:ee.toTokenAmount};return ee.swapTransaction=void 0,ee.approvalTransaction={data:n.data,to:n.to,gasPrice:n.gasPrice,value:n.value,toAmount:n.toAmount},{data:n.data,to:n.to,gasPrice:n.gasPrice,value:n.value,toAmount:n.toAmount}}catch(e){return p.goBack(),u.showError("Failed to create approval transaction"),ee.approvalTransaction=void 0,ee.swapTransaction=void 0,void(ee.fetchError=!0)}}},async createSwapTransaction(){const{networkAddress:e,fromCaipAddress:t,sourceTokenAmount:i}=ie.getParams(),o=ee.sourceToken,a=ee.toToken;if(!(t&&i&&o&&a))return;const n=y.parseUnits(i,o.decimals)?.toString();try{const i=await m.generateSwapCalldata({userAddress:t,from:o.address,to:a.address,amount:n,disableEstimate:!0}),r=o.address===e,c=BigInt(i.tx.eip155.gas),l=BigInt(i.tx.eip155.gasPrice),d=s.getPlainAddress(i.tx.to);if(!d)throw new Error("SwapController:createSwapTransaction - address is required");const u={data:i.tx.data,to:d,gas:c,gasPrice:l,value:r?BigInt(n??"0"):BigInt("0"),toAmount:ee.toTokenAmount};return ee.gasPriceInUSD=X.getGasPriceInUSD(ee.networkPrice,c,l),ee.approvalTransaction=void 0,ee.swapTransaction=u,u}catch(e){return p.goBack(),u.showError("Failed to create transaction"),ee.approvalTransaction=void 0,ee.swapTransaction=void 0,void(ee.fetchError=!0)}},onEmbeddedWalletApprovalSuccess(){u.showLoading("Approve limit increase in your wallet"),p.replace("SwapPreview")},async sendTransactionForApproval(e){const{fromAddress:t,isAuthConnector:i}=ie.getParams();ee.loadingApprovalTransaction=!0;i?p.pushTransactionStack({onSuccess:ie.onEmbeddedWalletApprovalSuccess}):u.showLoading("Approve limit increase in your wallet");try{await y.sendTransaction({address:t,to:e.to,data:e.data,value:e.value,chainNamespace:d.CHAIN.EVM}),await ie.swapTokens(),await ie.getTransaction(),ee.approvalTransaction=void 0,ee.loadingApprovalTransaction=!1}catch(e){const t=e;ee.transactionError=t?.displayMessage,ee.loadingApprovalTransaction=!1,u.showError(t?.displayMessage||"Transaction error"),f.sendEvent({type:"track",event:"SWAP_APPROVAL_ERROR",properties:{message:t?.displayMessage||t?.message||"Unknown",network:r.state.activeCaipNetwork?.caipNetworkId||"",swapFromToken:ie.state.sourceToken?.symbol||"",swapToToken:ie.state.toToken?.symbol||"",swapFromAmount:ie.state.sourceTokenAmount||"",swapToAmount:ie.state.toTokenAmount||"",isSmartAccount:b(d.CHAIN.EVM)===v.ACCOUNT_TYPES.SMART_ACCOUNT}})}},async sendTransactionForSwap(t){if(!t)return;const{fromAddress:i,toTokenAmount:o,isAuthConnector:a}=ie.getParams();ee.loadingTransaction=!0;const n=`Swapping ${ee.sourceToken?.symbol} to ${e.formatNumberToLocalString(o,3)} ${ee.toToken?.symbol}`,s=`Swapped ${ee.sourceToken?.symbol} to ${e.formatNumberToLocalString(o,3)} ${ee.toToken?.symbol}`;a?p.pushTransactionStack({onSuccess(){p.replace("Account"),u.showLoading(n),te.resetState()}}):u.showLoading("Confirm transaction in your wallet");try{const e=[ee.sourceToken?.address,ee.toToken?.address].join(","),o=await y.sendTransaction({address:i,to:t.to,data:t.data,value:t.value,chainNamespace:d.CHAIN.EVM});return ee.loadingTransaction=!1,u.showSuccess(s),f.sendEvent({type:"track",event:"SWAP_SUCCESS",properties:{network:r.state.activeCaipNetwork?.caipNetworkId||"",swapFromToken:ie.state.sourceToken?.symbol||"",swapToToken:ie.state.toToken?.symbol||"",swapFromAmount:ie.state.sourceTokenAmount||"",swapToAmount:ie.state.toTokenAmount||"",isSmartAccount:b(d.CHAIN.EVM)===v.ACCOUNT_TYPES.SMART_ACCOUNT}}),te.resetState(),a||p.replace("Account"),te.getMyTokensWithBalance(e),o}catch(e){const t=e;return ee.transactionError=t?.displayMessage,ee.loadingTransaction=!1,u.showError(t?.displayMessage||"Transaction error"),void f.sendEvent({type:"track",event:"SWAP_ERROR",properties:{message:t?.displayMessage||t?.message||"Unknown",network:r.state.activeCaipNetwork?.caipNetworkId||"",swapFromToken:ie.state.sourceToken?.symbol||"",swapToToken:ie.state.toToken?.symbol||"",swapFromAmount:ie.state.sourceTokenAmount||"",swapToAmount:ie.state.toTokenAmount||"",isSmartAccount:b(d.CHAIN.EVM)===v.ACCOUNT_TYPES.SMART_ACCOUNT}})}},hasInsufficientToken:(e,t)=>X.isInsufficientSourceTokenForSwap(e,t,ee.myTokensWithBalance),setTransactionDetails(){const{toTokenAddress:e,toTokenDecimals:t}=ie.getParams();e&&t&&(ee.gasPriceInUSD=X.getGasPriceInUSD(ee.networkPrice,BigInt(ee.gasFee),BigInt(Z)),ee.priceImpact=X.getPriceImpact({sourceTokenAmount:ee.sourceTokenAmount,sourceTokenPriceInUSD:ee.sourceTokenPriceInUSD,toTokenPriceInUSD:ee.toTokenPriceInUSD,toTokenAmount:ee.toTokenAmount}),ee.maxSlippage=X.getMaxSlippage(ee.slippage,ee.toTokenAmount),ee.providerFee=X.getProviderFee(ee.sourceTokenAmount))}},ie=i(te),oe=t({message:"",open:!1,triggerRect:{width:0,height:0,top:0,left:0},variant:"shade"}),ae=i({state:oe,subscribe:e=>a(oe,(()=>e(oe))),subscribeKey:(e,t)=>n(oe,e,t),showTooltip({message:e,triggerRect:t,variant:i}){oe.open=!0,oe.message=e,oe.triggerRect=t,oe.variant=i},hide(){oe.open=!1,oe.message="",oe.triggerRect={width:0,height:0,top:0,left:0}}}),ne={isUnsupportedChainView:()=>"UnsupportedChain"===p.state.view||"SwitchNetwork"===p.state.view&&p.state.history.includes("UnsupportedChain"),async safeClose(){if(this.isUnsupportedChainView())return void k.shake();await x.isSIWXCloseDisabled()?k.shake():("DataCapture"!==p.state.view&&"DataCaptureOtpConfirm"!==p.state.view||y.disconnect(),k.close())}},re={interpolate(e,t,i){if(2!==e.length||2!==t.length)throw new Error("inputRange and outputRange must be an array of length 2");const o=e[0]||0,a=e[1]||0,n=t[0]||0,r=t[1]||0;return i<o?n:i>a?r:(r-n)/(a-o)*(i-o)+n}};var se=T`
+  :host {
+    display: block;
+    border-radius: clamp(0px, ${({borderRadius:e})=>e[8]}, 44px);
+    box-shadow: 0 0 0 1px ${({tokens:e})=>e.theme.foregroundPrimary};
+    overflow: hidden;
+  }
+`,ce=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let le=class extends S{render(){return I`<slot></slot>`}};le.styles=[A,se],le=ce([M("wui-card")],le);var de=T`
+  :host {
+    width: 100%;
+  }
+
+  :host > wui-flex {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${({spacing:e})=>e[2]};
+    padding: ${({spacing:e})=>e[3]};
+    border-radius: ${({borderRadius:e})=>e[6]};
+    border: 1px solid ${({tokens:e})=>e.theme.borderPrimary};
+    box-sizing: border-box;
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25);
+    color: ${({tokens:e})=>e.theme.textPrimary};
+  }
+
+  :host > wui-flex[data-type='info'] {
+    .icon-box {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+
+      wui-icon {
+        color: ${({tokens:e})=>e.theme.iconDefault};
+      }
+    }
+  }
+  :host > wui-flex[data-type='success'] {
+    .icon-box {
+      background-color: ${({tokens:e})=>e.core.backgroundSuccess};
+
+      wui-icon {
+        color: ${({tokens:e})=>e.core.borderSuccess};
+      }
+    }
+  }
+  :host > wui-flex[data-type='warning'] {
+    .icon-box {
+      background-color: ${({tokens:e})=>e.core.backgroundWarning};
+
+      wui-icon {
+        color: ${({tokens:e})=>e.core.borderWarning};
+      }
+    }
+  }
+  :host > wui-flex[data-type='error'] {
+    .icon-box {
+      background-color: ${({tokens:e})=>e.core.backgroundError};
+
+      wui-icon {
+        color: ${({tokens:e})=>e.core.borderError};
+      }
+    }
+  }
+
+  wui-flex {
+    width: 100%;
+  }
+
+  wui-text {
+    word-break: break-word;
+    flex: 1;
+  }
+
+  .close {
+    cursor: pointer;
+    color: ${({tokens:e})=>e.theme.iconDefault};
+  }
+
+  .icon-box {
+    height: 40px;
+    width: 40px;
+    border-radius: ${({borderRadius:e})=>e[2]};
+    background-color: var(--local-icon-bg-value);
+  }
+`,ue=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const pe={info:"info",success:"checkmark",warning:"warningCircle",error:"warning"};let he=class extends S{constructor(){super(...arguments),this.message="",this.type="info"}render(){return I`
+      <wui-flex
+        data-type=${G(this.type)}
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        gap="2"
+      >
+        <wui-flex columnGap="2" flexDirection="row" alignItems="center">
+          <wui-flex
+            flexDirection="row"
+            alignItems="center"
+            justifyContent="center"
+            class="icon-box"
+          >
+            <wui-icon color="inherit" size="md" name=${pe[this.type]}></wui-icon>
+          </wui-flex>
+          <wui-text variant="md-medium" color="inherit" data-testid="wui-alertbar-text"
+            >${this.message}</wui-text
+          >
+        </wui-flex>
+        <wui-icon
+          class="close"
+          color="inherit"
+          size="sm"
+          name="close"
+          @click=${this.onClose}
+        ></wui-icon>
+      </wui-flex>
+    `}onClose(){g.close()}};he.styles=[A,de],ue([V()],he.prototype,"message",void 0),ue([V()],he.prototype,"type",void 0),he=ue([M("wui-alertbar")],he);var me=T`
+  :host {
+    display: block;
+    position: absolute;
+    top: ${({spacing:e})=>e[3]};
+    left: ${({spacing:e})=>e[4]};
+    right: ${({spacing:e})=>e[4]};
+    opacity: 0;
+    pointer-events: none;
+  }
+`,we=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const ge={info:{backgroundColor:"fg-350",iconColor:"fg-325",icon:"info"},success:{backgroundColor:"success-glass-reown-020",iconColor:"success-125",icon:"checkmark"},warning:{backgroundColor:"warning-glass-reown-020",iconColor:"warning-100",icon:"warningCircle"},error:{backgroundColor:"error-glass-reown-020",iconColor:"error-125",icon:"warning"}};let ye=class extends S{constructor(){super(),this.unsubscribe=[],this.open=g.state.open,this.onOpen(!0),this.unsubscribe.push(g.subscribeKey("open",(e=>{this.open=e,this.onOpen(!1)})))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const{message:e,variant:t}=g.state,i=ge[t];return I`
+      <wui-alertbar
+        message=${e}
+        backgroundColor=${i?.backgroundColor}
+        iconColor=${i?.iconColor}
+        icon=${i?.icon}
+        type=${t}
+      ></wui-alertbar>
+    `}onOpen(e){this.open?(this.animate([{opacity:0,transform:"scale(0.85)"},{opacity:1,transform:"scale(1)"}],{duration:150,fill:"forwards",easing:"ease"}),this.style.cssText="pointer-events: auto"):e||(this.animate([{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.85)"}],{duration:150,fill:"forwards",easing:"ease"}),this.style.cssText="pointer-events: none")}};ye.styles=me,we([H()],ye.prototype,"open",void 0),ye=we([M("w3m-alertbar")],ye);var fe=T`
+  :host {
+    position: relative;
+  }
+
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: transparent;
+    padding: ${({spacing:e})=>e[1]};
+  }
+
+  /* -- Colors --------------------------------------------------- */
+  button[data-type='accent'] wui-icon {
+    color: ${({tokens:e})=>e.core.iconAccentPrimary};
+  }
+
+  button[data-type='neutral'][data-variant='primary'] wui-icon {
+    color: ${({tokens:e})=>e.theme.iconInverse};
+  }
+
+  button[data-type='neutral'][data-variant='secondary'] wui-icon {
+    color: ${({tokens:e})=>e.theme.iconDefault};
+  }
+
+  button[data-type='success'] wui-icon {
+    color: ${({tokens:e})=>e.core.iconSuccess};
+  }
+
+  button[data-type='error'] wui-icon {
+    color: ${({tokens:e})=>e.core.iconError};
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='xs'] {
+    width: 16px;
+    height: 16px;
+
+    border-radius: ${({borderRadius:e})=>e[1]};
+  }
+
+  button[data-size='sm'] {
+    width: 20px;
+    height: 20px;
+    border-radius: ${({borderRadius:e})=>e[1]};
+  }
+
+  button[data-size='md'] {
+    width: 24px;
+    height: 24px;
+    border-radius: ${({borderRadius:e})=>e[2]};
+  }
+
+  button[data-size='lg'] {
+    width: 28px;
+    height: 28px;
+    border-radius: ${({borderRadius:e})=>e[2]};
+  }
+
+  button[data-size='xs'] wui-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+  button[data-size='sm'] wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='md'] wui-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='lg'] wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* -- Hover --------------------------------------------------- */
+  @media (hover: hover) {
+    button[data-type='accent']:hover:enabled {
+      background-color: ${({tokens:e})=>e.core.foregroundAccent010};
+    }
+
+    button[data-variant='primary'][data-type='neutral']:hover:enabled {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    }
+
+    button[data-variant='secondary'][data-type='neutral']:hover:enabled {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    }
+
+    button[data-type='success']:hover:enabled {
+      background-color: ${({tokens:e})=>e.core.backgroundSuccess};
+    }
+
+    button[data-type='error']:hover:enabled {
+      background-color: ${({tokens:e})=>e.core.backgroundError};
+    }
+  }
+
+  /* -- Focus --------------------------------------------------- */
+  button:focus-visible {
+    box-shadow: 0 0 0 4px ${({tokens:e})=>e.core.foregroundAccent020};
+  }
+
+  /* -- Properties --------------------------------------------------- */
+  button[data-full-width='true'] {
+    width: 100%;
+  }
+
+  :host([fullWidth]) {
+    width: 100%;
+  }
+
+  button[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`,be=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let ve=class extends S{constructor(){super(...arguments),this.icon="card",this.variant="primary",this.type="accent",this.size="md",this.iconSize=void 0,this.fullWidth=!1,this.disabled=!1}render(){return I`<button
+      data-variant=${this.variant}
+      data-type=${this.type}
+      data-size=${this.size}
+      data-full-width=${this.fullWidth}
+      ?disabled=${this.disabled}
+    >
+      <wui-icon color="inherit" name=${this.icon} size=${G(this.iconSize)}></wui-icon>
+    </button>`}};ve.styles=[A,E,fe],be([V()],ve.prototype,"icon",void 0),be([V()],ve.prototype,"variant",void 0),be([V()],ve.prototype,"type",void 0),be([V()],ve.prototype,"size",void 0),be([V()],ve.prototype,"iconSize",void 0),be([V({type:Boolean})],ve.prototype,"fullWidth",void 0),be([V({type:Boolean})],ve.prototype,"disabled",void 0),ve=be([M("wui-icon-button")],ve);var ke=T`
+  button {
+    display: block;
+    display: flex;
+    align-items: center;
+    padding: ${({spacing:e})=>e[1]};
+    transition: background-color ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-2"]};
+    will-change: background-color;
+    border-radius: ${({borderRadius:e})=>e[32]};
+  }
+
+  wui-image {
+    border-radius: 100%;
+  }
+
+  wui-text {
+    padding-left: ${({spacing:e})=>e[1]};
+  }
+
+  .left-icon-container,
+  .right-icon-container {
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  wui-icon {
+    color: ${({tokens:e})=>e.theme.iconDefault};
+  }
+
+  /* -- Sizes --------------------------------------------------- */
+  button[data-size='lg'] {
+    height: 32px;
+  }
+
+  button[data-size='md'] {
+    height: 28px;
+  }
+
+  button[data-size='sm'] {
+    height: 24px;
+  }
+
+  button[data-size='lg'] wui-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='md'] wui-image {
+    width: 20px;
+    height: 20px;
+  }
+
+  button[data-size='sm'] wui-image {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='lg'] .left-icon-container {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='md'] .left-icon-container {
+    width: 20px;
+    height: 20px;
+  }
+
+  button[data-size='sm'] .left-icon-container {
+    width: 16px;
+    height: 16px;
+  }
+
+  /* -- Variants --------------------------------------------------------- */
+  button[data-type='filled-dropdown'] {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  button[data-type='text-dropdown'] {
+    background-color: transparent;
+  }
+
+  /* -- Focus states --------------------------------------------------- */
+  button:focus-visible:enabled {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    box-shadow: 0 0 0 4px ${({tokens:e})=>e.core.foregroundAccent040};
+  }
+
+  /* -- Hover & Active states ----------------------------------------------------------- */
+  @media (hover: hover) and (pointer: fine) {
+    button:hover:enabled,
+    button:active:enabled {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    }
+  }
+
+  /* -- Disabled states --------------------------------------------------- */
+  button:disabled {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    opacity: 0.5;
+  }
+`,xe=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const Te={lg:"lg-regular",md:"md-regular",sm:"sm-regular"},Ae={lg:"lg",md:"md",sm:"sm"};let Se=class extends S{constructor(){super(...arguments),this.imageSrc="",this.text="",this.size="lg",this.type="text-dropdown",this.disabled=!1}render(){return I`<button ?disabled=${this.disabled} data-size=${this.size} data-type=${this.type}>
+      ${this.imageTemplate()} ${this.textTemplate()}
+      <wui-flex class="right-icon-container">
+        <wui-icon name="chevronBottom"></wui-icon>
+      </wui-flex>
+    </button>`}textTemplate(){const e=Te[this.size];return this.text?I`<wui-text color="primary" variant=${e}>${this.text}</wui-text>`:null}imageTemplate(){if(this.imageSrc)return I`<wui-image src=${this.imageSrc} alt="select visual"></wui-image>`;const e=Ae[this.size];return I` <wui-flex class="left-icon-container">
+      <wui-icon size=${e} name="networkPlaceholder"></wui-icon>
+    </wui-flex>`}};Se.styles=[A,E,ke],xe([V()],Se.prototype,"imageSrc",void 0),xe([V()],Se.prototype,"text",void 0),xe([V()],Se.prototype,"size",void 0),xe([V()],Se.prototype,"type",void 0),xe([V({type:Boolean})],Se.prototype,"disabled",void 0),Se=xe([M("wui-select")],Se);const Ie={ACCOUNT_TABS:[{label:"Tokens"},{label:"Activity"}],SECURE_SITE_ORIGIN:("undefined"!=typeof process&&void 0!==process.env?process.env.NEXT_PUBLIC_SECURE_SITE_ORIGIN:void 0)||"https://secure.walletconnect.org",VIEW_DIRECTION:{Next:"next",Prev:"prev"},ANIMATION_DURATIONS:{HeaderText:120,ModalHeight:150,ViewTransition:150},VIEWS_WITH_LEGAL_FOOTER:["Connect","ConnectWallets","OnRampTokenSelect","OnRampFiatSelect","OnRampProviders"],VIEWS_WITH_DEFAULT_FOOTER:["Networks"]};var Ee=T`
+  button {
+    background-color: transparent;
+    padding: ${({spacing:e})=>e[1]};
+  }
+
+  button:focus-visible {
+    box-shadow: 0 0 0 4px ${({tokens:e})=>e.core.foregroundAccent020};
+  }
+
+  button[data-variant='accent']:hover:enabled,
+  button[data-variant='accent']:focus-visible {
+    background-color: ${({tokens:e})=>e.core.foregroundAccent010};
+  }
+
+  button[data-variant='primary']:hover:enabled,
+  button[data-variant='primary']:focus-visible,
+  button[data-variant='secondary']:hover:enabled,
+  button[data-variant='secondary']:focus-visible {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+  }
+
+  button[data-size='xs'] > wui-icon {
+    width: 8px;
+    height: 8px;
+  }
+
+  button[data-size='sm'] > wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='xs'],
+  button[data-size='sm'] {
+    border-radius: ${({borderRadius:e})=>e[1]};
+  }
+
+  button[data-size='md'],
+  button[data-size='lg'] {
+    border-radius: ${({borderRadius:e})=>e[2]};
+  }
+
+  button[data-size='md'] > wui-icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='lg'] > wui-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  button:disabled {
+    background-color: transparent;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  button:hover:not(:disabled) {
+    background-color: var(--wui-color-accent-glass-015);
+  }
+
+  button:focus-visible:not(:disabled) {
+    background-color: var(--wui-color-accent-glass-015);
+    box-shadow:
+      inset 0 0 0 1px var(--wui-color-accent-100),
+      0 0 0 4px var(--wui-color-accent-glass-020);
+  }
+`,Pe=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Ce=class extends S{constructor(){super(...arguments),this.size="md",this.disabled=!1,this.icon="copy",this.iconColor="default",this.variant="accent"}render(){return I`
+      <button data-variant=${this.variant} ?disabled=${this.disabled} data-size=${this.size}>
+        <wui-icon
+          color=${{accent:"accent-primary",primary:"inverse",secondary:"default"}[this.variant]||this.iconColor}
+          size=${this.size}
+          name=${this.icon}
+        ></wui-icon>
+      </button>
+    `}};Ce.styles=[A,E,Ee],Pe([V()],Ce.prototype,"size",void 0),Pe([V({type:Boolean})],Ce.prototype,"disabled",void 0),Pe([V()],Ce.prototype,"icon",void 0),Pe([V()],Ce.prototype,"iconColor",void 0),Pe([V()],Ce.prototype,"variant",void 0),Ce=Pe([M("wui-icon-link")],Ce);const $e=P`<svg width="86" height="96" fill="none">
+  <path
+    d="M78.3244 18.926L50.1808 2.45078C45.7376 -0.150261 40.2624 -0.150262 35.8192 2.45078L7.6756 18.926C3.23322 21.5266 0.5 26.3301 0.5 31.5248V64.4752C0.5 69.6699 3.23322 74.4734 7.6756 77.074L35.8192 93.5492C40.2624 96.1503 45.7376 96.1503 50.1808 93.5492L78.3244 77.074C82.7668 74.4734 85.5 69.6699 85.5 64.4752V31.5248C85.5 26.3301 82.7668 21.5266 78.3244 18.926Z"
+  />
+</svg>`,Ne=P`
+  <svg fill="none" viewBox="0 0 36 40">
+    <path
+      d="M15.4 2.1a5.21 5.21 0 0 1 5.2 0l11.61 6.7a5.21 5.21 0 0 1 2.61 4.52v13.4c0 1.87-1 3.59-2.6 4.52l-11.61 6.7c-1.62.93-3.6.93-5.22 0l-11.6-6.7a5.21 5.21 0 0 1-2.61-4.51v-13.4c0-1.87 1-3.6 2.6-4.52L15.4 2.1Z"
+    />
+  </svg>
+`;var Re=T`
+  :host {
+    position: relative;
+    border-radius: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--local-width);
+    height: var(--local-height);
+  }
+
+  :host([data-round='true']) {
+    background: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-radius: 100%;
+    outline: 1px solid ${({tokens:e})=>e.core.glass010};
+  }
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+
+  svg > path {
+    stroke: var(--local-stroke);
+  }
+
+  wui-image {
+    width: 100%;
+    height: 100%;
+    -webkit-clip-path: var(--local-path);
+    clip-path: var(--local-path);
+    background: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  wui-icon {
+    transform: translateY(-5%);
+    width: var(--local-icon-size);
+    height: var(--local-icon-size);
+  }
+`,Oe=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let _e=class extends S{constructor(){super(...arguments),this.size="md",this.name="uknown",this.networkImagesBySize={sm:Ne,md:Y,lg:$e},this.selected=!1,this.round=!1}render(){const e={sm:"4",md:"6",lg:"10"};return this.round?(this.dataset.round="true",this.style.cssText="\n      --local-width: var(--apkt-spacing-10);\n      --local-height: var(--apkt-spacing-10);\n      --local-icon-size: var(--apkt-spacing-4);\n    "):this.style.cssText=`\n\n      --local-path: var(--apkt-path-network-${this.size});\n      --local-width:  var(--apkt-width-network-${this.size});\n      --local-height:  var(--apkt-height-network-${this.size});\n      --local-icon-size:  var(--apkt-spacing-${e[this.size]});\n    `,I`${this.templateVisual()} ${this.svgTemplate()} `}svgTemplate(){return this.round?null:this.networkImagesBySize[this.size]}templateVisual(){return this.imageSrc?I`<wui-image src=${this.imageSrc} alt=${this.name}></wui-image>`:I`<wui-icon size="inherit" color="default" name="networkPlaceholder"></wui-icon>`}};_e.styles=[A,Re],Oe([V()],_e.prototype,"size",void 0),Oe([V()],_e.prototype,"name",void 0),Oe([V({type:Object})],_e.prototype,"networkImagesBySize",void 0),Oe([V()],_e.prototype,"imageSrc",void 0),Oe([V({type:Boolean})],_e.prototype,"selected",void 0),Oe([V({type:Boolean})],_e.prototype,"round",void 0),_e=Oe([M("wui-network-image")],_e);var Ue=T`
+  :host {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 1px;
+    background-color: ${({tokens:e})=>e.theme.borderPrimary};
+    justify-content: center;
+    align-items: center;
+  }
+
+  :host > wui-text {
+    position: absolute;
+    padding: 0px 8px;
+    transition: background-color ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-2"]};
+    will-change: background-color;
+  }
+
+  :host([data-bg-color='primary']) > wui-text {
+    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+  }
+
+  :host([data-bg-color='secondary']) > wui-text {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+`,De=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Le=class extends S{constructor(){super(...arguments),this.text="",this.bgColor="primary"}render(){return this.dataset.bgColor=this.bgColor,I`${this.template()}`}template(){return this.text?I`<wui-text variant="md-regular" color="secondary">${this.text}</wui-text>`:null}};Le.styles=[A,Ue],De([V()],Le.prototype,"text",void 0),De([V()],Le.prototype,"bgColor",void 0),Le=De([M("wui-separator")],Le);const Be={INVALID_PAYMENT_CONFIG:"INVALID_PAYMENT_CONFIG",INVALID_RECIPIENT:"INVALID_RECIPIENT",INVALID_ASSET:"INVALID_ASSET",INVALID_AMOUNT:"INVALID_AMOUNT",UNKNOWN_ERROR:"UNKNOWN_ERROR",UNABLE_TO_INITIATE_PAYMENT:"UNABLE_TO_INITIATE_PAYMENT",INVALID_CHAIN_NAMESPACE:"INVALID_CHAIN_NAMESPACE",GENERIC_PAYMENT_ERROR:"GENERIC_PAYMENT_ERROR",UNABLE_TO_GET_EXCHANGES:"UNABLE_TO_GET_EXCHANGES",ASSET_NOT_SUPPORTED:"ASSET_NOT_SUPPORTED",UNABLE_TO_GET_PAY_URL:"UNABLE_TO_GET_PAY_URL",UNABLE_TO_GET_BUY_STATUS:"UNABLE_TO_GET_BUY_STATUS",UNABLE_TO_GET_TOKEN_BALANCES:"UNABLE_TO_GET_TOKEN_BALANCES",UNABLE_TO_GET_QUOTE:"UNABLE_TO_GET_QUOTE",UNABLE_TO_GET_QUOTE_STATUS:"UNABLE_TO_GET_QUOTE_STATUS",INVALID_RECIPIENT_ADDRESS_FOR_ASSET:"INVALID_RECIPIENT_ADDRESS_FOR_ASSET"},ze={[Be.INVALID_PAYMENT_CONFIG]:"Invalid payment configuration",[Be.INVALID_RECIPIENT]:"Invalid recipient address",[Be.INVALID_ASSET]:"Invalid asset specified",[Be.INVALID_AMOUNT]:"Invalid payment amount",[Be.INVALID_RECIPIENT_ADDRESS_FOR_ASSET]:"Invalid recipient address for the asset selected",[Be.UNKNOWN_ERROR]:"Unknown payment error occurred",[Be.UNABLE_TO_INITIATE_PAYMENT]:"Unable to initiate payment",[Be.INVALID_CHAIN_NAMESPACE]:"Invalid chain namespace",[Be.GENERIC_PAYMENT_ERROR]:"Unable to process payment",[Be.UNABLE_TO_GET_EXCHANGES]:"Unable to get exchanges",[Be.ASSET_NOT_SUPPORTED]:"Asset not supported by the selected exchange",[Be.UNABLE_TO_GET_PAY_URL]:"Unable to get payment URL",[Be.UNABLE_TO_GET_BUY_STATUS]:"Unable to get buy status",[Be.UNABLE_TO_GET_TOKEN_BALANCES]:"Unable to get token balances",[Be.UNABLE_TO_GET_QUOTE]:"Unable to get quote. Please choose a different token",[Be.UNABLE_TO_GET_QUOTE_STATUS]:"Unable to get quote status"};class We extends Error{get message(){return ze[this.code]}constructor(e,t){super(ze[e]),this.name="AppKitPayError",this.code=e,this.details=t,Error.captureStackTrace&&Error.captureStackTrace(this,We)}}const je="https://rpc.walletconnect.org/v1/json-rpc",Fe="reown_test";function qe(e){if(!e)return null;const t=e.steps[0];return t&&t.type===nt?t:null}function Me(e,t=0){if(!e)return[];const i=e.steps.filter((e=>e.type===rt)),o=i.filter(((e,i)=>i+1>t));return i.length>0&&i.length<3?o:[]}const Ve=new R({baseUrl:s.getApiUrl(),clientId:null});class Ge extends Error{}function He(){const{projectId:e,sdkType:t,sdkVersion:i}=_.state;return{projectId:e,st:t||"appkit",sv:i||"html-wagmi-4.2.2"}}async function Ye(e,t){const i=function(){const e=_.getSnapshot().projectId;return`${je}?projectId=${e}`}(),{sdkType:o,sdkVersion:a,projectId:n}=_.getSnapshot(),r={jsonrpc:"2.0",id:1,method:e,params:{...t||{},st:o,sv:a,projectId:n}},s=await fetch(i,{method:"POST",body:JSON.stringify(r),headers:{"Content-Type":"application/json"}}),c=await s.json();if(c.error)throw new Ge(c.error.message);return c}async function Ke(e){return(await Ye("reown_getExchanges",e)).result}async function Qe(e){return(await Ye("reown_getExchangePayUrl",e)).result}async function Xe(t){const i=O.isLowerCaseMatch(t.sourceToken.network,t.toToken.network),o=O.isLowerCaseMatch(t.sourceToken.asset,t.toToken.asset);return i&&o?async function({sourceToken:e,toToken:t,amount:i,recipient:o}){const a=y.parseUnits(i,e.metadata.decimals),n=y.parseUnits(i,t.metadata.decimals);return Promise.resolve({type:at,origin:{amount:a?.toString()??"0",currency:e},destination:{amount:n?.toString()??"0",currency:t},fees:[{id:"service",label:"Service Fee",amount:"0",currency:t}],steps:[{requestId:at,type:"deposit",deposit:{amount:a?.toString()??"0",currency:e.asset,receiver:o}}],timeInSeconds:6})}(t):async function(t){const i=e.bigNumber(t.amount).times(10**t.toToken.metadata.decimals).toString(),{chainId:o,chainNamespace:a}=C.parseCaipNetworkId(t.sourceToken.network),{chainId:n,chainNamespace:r}=C.parseCaipNetworkId(t.toToken.network),s="native"===t.sourceToken.asset?U(a):t.sourceToken.asset,c="native"===t.toToken.asset?U(r):t.toToken.asset;return await Ve.post({path:"/appkit/v1/transfers/quote",body:{user:t.address,originChainId:o.toString(),originCurrency:s,destinationChainId:n.toString(),destinationCurrency:c,recipient:t.recipient,amount:i},params:He()})}(t)}const Ze=["eip155","solana"],Je={eip155:{native:{assetNamespace:"slip44",assetReference:"60"},defaultTokenNamespace:"erc20"},solana:{native:{assetNamespace:"slip44",assetReference:"501"},defaultTokenNamespace:"token"}},et={56:"714",204:"714"};function tt(e,t){const{chainNamespace:i,chainId:o}=C.parseCaipNetworkId(e),a=Je[i];if(!a)throw new Error(`Unsupported chain namespace for CAIP-19 formatting: ${i}`);let n=a.native.assetNamespace,r=a.native.assetReference;"native"!==t?(n=a.defaultTokenNamespace,r=t):"eip155"===i&&et[o]&&(r=et[o]);return`${`${i}:${o}`}/${n}:${r}`}function it(t){const i=e.bigNumber(t,{safe:!0});return i.lt(.001)?"<0.001":i.round(4).toString()}const ot="unknown",at="direct-transfer",nt="deposit",rt="transaction",st=t({paymentAsset:{network:"eip155:1",asset:"0x0",metadata:{name:"0x0",symbol:"0x0",decimals:0}},recipient:"0x0",amount:0,isConfigured:!1,error:null,isPaymentInProgress:!1,exchanges:[],isLoading:!1,openInNewTab:!0,redirectUrl:void 0,payWithExchange:void 0,currentPayment:void 0,analyticsSet:!1,paymentId:void 0,choice:"pay",tokenBalances:{[d.CHAIN.EVM]:[],[d.CHAIN.SOLANA]:[]},isFetchingTokenBalances:!1,selectedPaymentAsset:null,quote:void 0,quoteStatus:"waiting",quoteError:null,isFetchingQuote:!1,selectedExchange:void 0,exchangeUrlForQuote:void 0,requestId:void 0}),ct={state:st,subscribe:e=>a(st,(()=>e(st))),subscribeKey:(e,t)=>n(st,e,t),async handleOpenPay(e){this.resetState(),this.setPaymentConfig(e),this.initializeAnalytics(),function(){const{chainNamespace:e}=C.parseCaipNetworkId(ct.state.paymentAsset.network);if(!s.isAddress(ct.state.recipient,e))throw new We(Be.INVALID_RECIPIENT_ADDRESS_FOR_ASSET,`Provide valid recipient address for namespace "${e}"`)}(),await this.prepareTokenLogo(),st.isConfigured=!0,f.sendEvent({type:"track",event:"PAY_MODAL_OPEN",properties:{exchanges:st.exchanges,configuration:{network:st.paymentAsset.network,asset:st.paymentAsset.asset,recipient:st.recipient,amount:st.amount}}}),await k.open({view:"Pay"})},resetState(){st.paymentAsset={network:"eip155:1",asset:"0x0",metadata:{name:"0x0",symbol:"0x0",decimals:0}},st.recipient="0x0",st.amount=0,st.isConfigured=!1,st.error=null,st.isPaymentInProgress=!1,st.isLoading=!1,st.currentPayment=void 0,st.selectedExchange=void 0,st.exchangeUrlForQuote=void 0,st.requestId=void 0},resetQuoteState(){st.quote=void 0,st.quoteStatus="waiting",st.quoteError=null,st.isFetchingQuote=!1,st.requestId=void 0},setPaymentConfig(e){if(!e.paymentAsset)throw new We(Be.INVALID_PAYMENT_CONFIG);try{st.choice=e.choice??"pay",st.paymentAsset=e.paymentAsset,st.recipient=e.recipient,st.amount=e.amount,st.openInNewTab=e.openInNewTab??!0,st.redirectUrl=e.redirectUrl,st.payWithExchange=e.payWithExchange,st.error=null}catch(e){throw new We(Be.INVALID_PAYMENT_CONFIG,e.message)}},setSelectedPaymentAsset(e){st.selectedPaymentAsset=e},setSelectedExchange(e){st.selectedExchange=e},setRequestId(e){st.requestId=e},setPaymentInProgress(e){st.isPaymentInProgress=e},getPaymentAsset:()=>st.paymentAsset,getExchanges:()=>st.exchanges,async fetchExchanges(){try{st.isLoading=!0;const e=await Ke({page:0});st.exchanges=e.exchanges.slice(0,2)}catch(e){throw u.showError(ze.UNABLE_TO_GET_EXCHANGES),new We(Be.UNABLE_TO_GET_EXCHANGES)}finally{st.isLoading=!1}},async getAvailableExchanges(e){try{const t=e?.asset&&e?.network?tt(e.network,e.asset):void 0;return await Ke({page:e?.page??0,asset:t,amount:e?.amount?.toString()})}catch(e){throw new We(Be.UNABLE_TO_GET_EXCHANGES)}},async getPayUrl(e,t,i=!1){try{const o=Number(t.amount),a=await Qe({exchangeId:e,asset:tt(t.network,t.asset),amount:o.toString(),recipient:`${t.network}:${t.recipient}`});return f.sendEvent({type:"track",event:"PAY_EXCHANGE_SELECTED",properties:{source:"pay",exchange:{id:e},configuration:{network:t.network,asset:t.asset,recipient:t.recipient,amount:o},currentPayment:{type:"exchange",exchangeId:e},headless:i}}),i&&(this.initiatePayment(),f.sendEvent({type:"track",event:"PAY_INITIATED",properties:{source:"pay",paymentId:st.paymentId||ot,configuration:{network:t.network,asset:t.asset,recipient:t.recipient,amount:o},currentPayment:{type:"exchange",exchangeId:e}}})),a}catch(e){if(e instanceof Error&&e.message.includes("is not supported"))throw new We(Be.ASSET_NOT_SUPPORTED);throw new Error(e.message)}},async generateExchangeUrlForQuote({exchangeId:e,paymentAsset:t,amount:i,recipient:o}){const a=await Qe({exchangeId:e,asset:tt(t.network,t.asset),amount:i.toString(),recipient:o});st.exchangeSessionId=a.sessionId,st.exchangeUrlForQuote=a.url},async openPayUrl(e,t,i=!1){try{const o=await this.getPayUrl(e.exchangeId,t,i);if(!o)throw new We(Be.UNABLE_TO_GET_PAY_URL);const a=e.openInNewTab??!0?"_blank":"_self";return s.openHref(o.url,a),o}catch(e){throw st.error=e instanceof We?e.message:ze.GENERIC_PAYMENT_ERROR,new We(Be.UNABLE_TO_GET_PAY_URL)}},async onTransfer({chainNamespace:e,fromAddress:t,toAddress:i,amount:o,paymentAsset:a}){if(st.currentPayment={type:"wallet",status:"IN_PROGRESS"},!st.isPaymentInProgress)try{this.initiatePayment();const n=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===a.network));if(!n)throw new Error("Target network not found");const s=r.state.activeCaipNetwork;switch(O.isLowerCaseMatch(s?.caipNetworkId,n.caipNetworkId)||await r.switchActiveNetwork(n),e){case d.CHAIN.EVM:"native"===a.asset&&(st.currentPayment.result=await async function(e,t,i){if(t!==d.CHAIN.EVM)throw new We(Be.INVALID_CHAIN_NAMESPACE);if(!i.fromAddress)throw new We(Be.INVALID_PAYMENT_CONFIG,"fromAddress is required for native EVM payments.");const o="string"==typeof i.amount?parseFloat(i.amount):i.amount;if(isNaN(o))throw new We(Be.INVALID_PAYMENT_CONFIG);const a=e.metadata?.decimals??18,n=y.parseUnits(o.toString(),a);if("bigint"!=typeof n)throw new We(Be.GENERIC_PAYMENT_ERROR);return await y.sendTransaction({chainNamespace:t,to:i.recipient,address:i.fromAddress,value:n,data:"0x"})??void 0}(a,e,{recipient:i,amount:o,fromAddress:t})),a.asset.startsWith("0x")&&(st.currentPayment.result=await async function(e,t){if(!t.fromAddress)throw new We(Be.INVALID_PAYMENT_CONFIG,"fromAddress is required for ERC20 EVM payments.");const i=e.asset,o=t.recipient,a=Number(e.metadata.decimals),n=y.parseUnits(t.amount.toString(),a);if(void 0===n)throw new We(Be.GENERIC_PAYMENT_ERROR);return await y.writeContract({fromAddress:t.fromAddress,tokenAddress:i,args:[o,n],method:"transfer",abi:$.getERC20Abi(i),chainNamespace:d.CHAIN.EVM})??void 0}(a,{recipient:i,amount:o,fromAddress:t})),st.currentPayment.status="SUCCESS";break;case d.CHAIN.SOLANA:st.currentPayment.result=await async function(e,t){if(e!==d.CHAIN.SOLANA)throw new We(Be.INVALID_CHAIN_NAMESPACE);if(!t.fromAddress)throw new We(Be.INVALID_PAYMENT_CONFIG,"fromAddress is required for Solana payments.");const i="string"==typeof t.amount?parseFloat(t.amount):t.amount;if(isNaN(i)||i<=0)throw new We(Be.INVALID_PAYMENT_CONFIG,"Invalid payment amount.");try{if(!N.getProvider(e))throw new We(Be.GENERIC_PAYMENT_ERROR,"No Solana provider available.");const o=await y.sendTransaction({chainNamespace:d.CHAIN.SOLANA,to:t.recipient,value:i,tokenMint:t.tokenMint});if(!o)throw new We(Be.GENERIC_PAYMENT_ERROR,"Transaction failed.");return o}catch(e){if(e instanceof We)throw e;throw new We(Be.GENERIC_PAYMENT_ERROR,`Solana payment failed: ${e}`)}}(e,{recipient:i,amount:o,fromAddress:t,tokenMint:"native"===a.asset?void 0:a.asset}),st.currentPayment.status="SUCCESS";break;default:throw new We(Be.INVALID_CHAIN_NAMESPACE)}}catch(e){throw st.error=e instanceof We?e.message:ze.GENERIC_PAYMENT_ERROR,st.currentPayment.status="FAILED",u.showError(st.error),e}finally{st.isPaymentInProgress=!1}},async onSendTransaction(e){try{const{namespace:t,transactionStep:i}=e;ct.initiatePayment();const o=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===st.paymentAsset?.network));if(!o)throw new Error("Target network not found");const a=r.state.activeCaipNetwork;if(O.isLowerCaseMatch(a?.caipNetworkId,o.caipNetworkId)||await r.switchActiveNetwork(o),t===d.CHAIN.EVM){const{from:e,to:o,data:a,value:n}=i.transaction;await y.sendTransaction({address:e,to:o,data:a,value:BigInt(n),chainNamespace:t})}else if(t===d.CHAIN.SOLANA){const{instructions:e}=i.transaction;await y.writeSolanaTransaction({instructions:e})}}catch(e){throw st.error=e instanceof We?e.message:ze.GENERIC_PAYMENT_ERROR,u.showError(st.error),e}finally{st.isPaymentInProgress=!1}},getExchangeById:e=>st.exchanges.find((t=>t.id===e)),validatePayConfig(e){const{paymentAsset:t,recipient:i,amount:o}=e;if(!t)throw new We(Be.INVALID_PAYMENT_CONFIG);if(!i)throw new We(Be.INVALID_RECIPIENT);if(!t.asset)throw new We(Be.INVALID_ASSET);if(null==o||o<=0)throw new We(Be.INVALID_AMOUNT)},async handlePayWithExchange(e){try{st.currentPayment={type:"exchange",exchangeId:e};const{network:t,asset:i}=st.paymentAsset,o={network:t,asset:i,amount:st.amount,recipient:st.recipient},a=await this.getPayUrl(e,o);if(!a)throw new We(Be.UNABLE_TO_INITIATE_PAYMENT);return st.currentPayment.sessionId=a.sessionId,st.currentPayment.status="IN_PROGRESS",st.currentPayment.exchangeId=e,this.initiatePayment(),{url:a.url,openInNewTab:st.openInNewTab}}catch(e){return st.error=e instanceof We?e.message:ze.GENERIC_PAYMENT_ERROR,st.isPaymentInProgress=!1,u.showError(st.error),null}},async getBuyStatus(e,t){try{const i=await async function(e){return(await Ye("reown_getExchangeBuyStatus",e)).result}({sessionId:t,exchangeId:e});return"SUCCESS"!==i.status&&"FAILED"!==i.status||f.sendEvent({type:"track",event:"SUCCESS"===i.status?"PAY_SUCCESS":"PAY_ERROR",properties:{message:"FAILED"===i.status?s.parseError(st.error):void 0,source:"pay",paymentId:st.paymentId||ot,configuration:{network:st.paymentAsset.network,asset:st.paymentAsset.asset,recipient:st.recipient,amount:st.amount},currentPayment:{type:"exchange",exchangeId:st.currentPayment?.exchangeId,sessionId:st.currentPayment?.sessionId,result:i.txHash}}}),i}catch(e){throw new We(Be.UNABLE_TO_GET_BUY_STATUS)}},async fetchTokensFromEOA({caipAddress:e,caipNetwork:t,namespace:i}){if(!e)return[];const{address:o}=C.parseCaipAddress(e);let a=t;i===d.CHAIN.EVM&&(a=void 0);return await w.getMyTokensWithBalance({address:o,caipNetwork:a})},async fetchTokensFromExchange(){if(!st.selectedExchange)return[];const e=await async function(e){return await Ve.get({path:`/appkit/v1/transfers/assets/exchanges/${e}`,params:He()})}(st.selectedExchange.id),t=Object.values(e.assets).flat();return await Promise.all(t.map((async e=>{const t={chainId:(i=e).network,address:`${i.network}:${i.asset}`,symbol:i.metadata.symbol,name:i.metadata.name,iconUrl:i.metadata.logoURI||"",price:0,quantity:{numeric:"0",decimals:i.metadata.decimals.toString()}};var i;const{chainNamespace:o}=C.parseCaipNetworkId(t.chainId);let a=t.address;if(s.isCaipAddress(a)){const{address:e}=C.parseCaipAddress(a);a=e}const n=await D.getImageByToken(a??"",o).catch((()=>{}));return t.iconUrl=n??"",t})))},async fetchTokens({caipAddress:e,caipNetwork:t,namespace:i}){try{st.isFetchingTokenBalances=!0;const o=Boolean(st.selectedExchange)?this.fetchTokensFromExchange():this.fetchTokensFromEOA({caipAddress:e,caipNetwork:t,namespace:i}),a=await o;st.tokenBalances={...st.tokenBalances,[i]:a}}catch(e){const t=e instanceof Error?e.message:"Unable to get token balances";u.showError(t)}finally{st.isFetchingTokenBalances=!1}},async fetchQuote({amount:t,address:i,sourceToken:o,toToken:a,recipient:n}){try{ct.resetQuoteState(),st.isFetchingQuote=!0;const r=await Xe({amount:t,address:st.selectedExchange?void 0:i,sourceToken:o,toToken:a,recipient:n});if(st.selectedExchange){const t=qe(r);if(t){const i=`${o.network}:${t.deposit.receiver}`,a=e.formatNumber(t.deposit.amount,{decimals:o.metadata.decimals??0,round:8});await ct.generateExchangeUrlForQuote({exchangeId:st.selectedExchange.id,paymentAsset:o,amount:a.toString(),recipient:i})}}st.quote=r}catch(e){let t=ze.UNABLE_TO_GET_QUOTE;if(e instanceof Error&&e.cause&&e.cause instanceof Response)try{const i=await e.cause.json();i.error&&"string"==typeof i.error&&(t=i.error)}catch{}throw st.quoteError=t,u.showError(t),new We(Be.UNABLE_TO_GET_QUOTE)}finally{st.isFetchingQuote=!1}},async fetchQuoteStatus({requestId:e}){try{if(e===at){const e=st.selectedExchange,t=st.exchangeSessionId;if(e&&t){switch((await this.getBuyStatus(e.id,t)).status){case"IN_PROGRESS":case"UNKNOWN":default:st.quoteStatus="waiting";break;case"SUCCESS":st.quoteStatus="success",st.isPaymentInProgress=!1;break;case"FAILED":st.quoteStatus="failure",st.isPaymentInProgress=!1}return}return void(st.quoteStatus="success")}const{status:t}=await async function(e){return await Ve.get({path:"/appkit/v1/transfers/status",params:{requestId:e.requestId,...He()}})}({requestId:e});st.quoteStatus=t}catch{throw st.quoteStatus="failure",new We(Be.UNABLE_TO_GET_QUOTE_STATUS)}},initiatePayment(){st.isPaymentInProgress=!0,st.paymentId=crypto.randomUUID()},initializeAnalytics(){st.analyticsSet||(st.analyticsSet=!0,this.subscribeKey("isPaymentInProgress",(e=>{if(st.currentPayment?.status&&"UNKNOWN"!==st.currentPayment.status){const e={IN_PROGRESS:"PAY_INITIATED",SUCCESS:"PAY_SUCCESS",FAILED:"PAY_ERROR"}[st.currentPayment.status];f.sendEvent({type:"track",event:e,properties:{message:"FAILED"===st.currentPayment.status?s.parseError(st.error):void 0,source:"pay",paymentId:st.paymentId||ot,configuration:{network:st.paymentAsset.network,asset:st.paymentAsset.asset,recipient:st.recipient,amount:st.amount},currentPayment:{type:st.currentPayment.type,exchangeId:st.currentPayment.exchangeId,sessionId:st.currentPayment.sessionId,result:st.currentPayment.result}}})}})))},async prepareTokenLogo(){if(!st.paymentAsset.metadata.logoURI)try{const{chainNamespace:e}=C.parseCaipNetworkId(st.paymentAsset.network),t=await D.getImageByToken(st.paymentAsset.asset,e);st.paymentAsset.metadata.logoURI=t}catch{}}};var lt=T`
+  wui-separator {
+    margin: var(--apkt-spacing-3) calc(var(--apkt-spacing-3) * -1) var(--apkt-spacing-2)
+      calc(var(--apkt-spacing-3) * -1);
+    width: calc(100% + var(--apkt-spacing-3) * 2);
+  }
+
+  .token-display {
+    padding: var(--apkt-spacing-3) var(--apkt-spacing-3);
+    border-radius: var(--apkt-borderRadius-5);
+    background-color: var(--apkt-tokens-theme-backgroundPrimary);
+    margin-top: var(--apkt-spacing-3);
+    margin-bottom: var(--apkt-spacing-3);
+  }
+
+  .token-display wui-text {
+    text-transform: none;
+  }
+
+  wui-loading-spinner {
+    padding: var(--apkt-spacing-2);
+  }
+
+  .left-image-container {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .token-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+    width: 40px;
+    height: 40px;
+  }
+
+  .chain-image {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    bottom: -3px;
+    right: -5px;
+    border-radius: ${({borderRadius:e})=>e.round};
+    border: 2px solid ${({tokens:e})=>e.theme.backgroundPrimary};
+  }
+
+  .payment-methods-container {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-top-right-radius: ${({borderRadius:e})=>e[8]};
+    border-top-left-radius: ${({borderRadius:e})=>e[8]};
+  }
+`,dt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let ut=class extends S{constructor(){super(),this.unsubscribe=[],this.amount=ct.state.amount,this.namespace=void 0,this.paymentAsset=ct.state.paymentAsset,this.activeConnectorIds=l.state.activeConnectorIds,this.caipAddress=void 0,this.exchanges=ct.state.exchanges,this.isLoading=ct.state.isLoading,this.initializeNamespace(),this.unsubscribe.push(ct.subscribeKey("amount",(e=>this.amount=e))),this.unsubscribe.push(l.subscribeKey("activeConnectorIds",(e=>this.activeConnectorIds=e))),this.unsubscribe.push(ct.subscribeKey("exchanges",(e=>this.exchanges=e))),this.unsubscribe.push(ct.subscribeKey("isLoading",(e=>this.isLoading=e))),ct.fetchExchanges(),ct.setSelectedExchange(void 0)}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){return I`
+      <wui-flex flexDirection="column">
+        ${this.paymentDetailsTemplate()} ${this.paymentMethodsTemplate()}
+      </wui-flex>
+    `}paymentMethodsTemplate(){return I`
+      <wui-flex flexDirection="column" padding="3" gap="2" class="payment-methods-container">
+        ${this.payWithWalletTemplate()} ${this.templateSeparator()}
+        ${this.templateExchangeOptions()}
+      </wui-flex>
+    `}initializeNamespace(){const e=r.state.activeChain;this.namespace=e,this.caipAddress=r.getAccountData(e)?.caipAddress,this.unsubscribe.push(r.subscribeChainProp("accountState",(e=>{this.caipAddress=e?.caipAddress}),e))}paymentDetailsTemplate(){const e=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===this.paymentAsset.network));return I`
+      <wui-flex
+        alignItems="center"
+        justifyContent="space-between"
+        .padding=${["6","8","6","8"]}
+        gap="2"
+      >
+        <wui-flex alignItems="center" gap="1">
+          <wui-text variant="h1-regular" color="primary">
+            ${it(this.amount||"0")}
+          </wui-text>
+
+          <wui-flex flexDirection="column">
+            <wui-text variant="h6-regular" color="secondary">
+              ${this.paymentAsset.metadata.symbol||"Unknown"}
+            </wui-text>
+            <wui-text variant="md-medium" color="secondary"
+              >on ${e?.name||"Unknown"}</wui-text
+            >
+          </wui-flex>
+        </wui-flex>
+
+        <wui-flex class="left-image-container">
+          <wui-image
+            src=${G(this.paymentAsset.metadata.logoURI)}
+            class="token-image"
+          ></wui-image>
+          <wui-image
+            src=${G(D.getNetworkImage(e))}
+            class="chain-image"
+          ></wui-image>
+        </wui-flex>
+      </wui-flex>
+    `}payWithWalletTemplate(){return function(e){const{chainNamespace:t}=C.parseCaipNetworkId(e);return Ze.includes(t)}(this.paymentAsset.network)?this.caipAddress?this.connectedWalletTemplate():this.disconnectedWalletTemplate():I``}connectedWalletTemplate(){const{name:e,image:t}=this.getWalletProperties({namespace:this.namespace});return I`
+      <wui-flex flexDirection="column" gap="3">
+        <wui-list-item
+          type="secondary"
+          boxColor="foregroundSecondary"
+          @click=${this.onWalletPayment}
+          .boxed=${!1}
+          ?chevron=${!0}
+          ?fullSize=${!1}
+          ?rounded=${!0}
+          data-testid="wallet-payment-option"
+          imageSrc=${G(t)}
+          imageSize="3xl"
+        >
+          <wui-text variant="lg-regular" color="primary">Pay with ${e}</wui-text>
+        </wui-list-item>
+
+        <wui-list-item
+          type="secondary"
+          icon="power"
+          iconColor="error"
+          @click=${this.onDisconnect}
+          data-testid="disconnect-button"
+          ?chevron=${!1}
+          boxColor="foregroundSecondary"
+        >
+          <wui-text variant="lg-regular" color="secondary">Disconnect</wui-text>
+        </wui-list-item>
+      </wui-flex>
+    `}disconnectedWalletTemplate(){return I`<wui-list-item
+      type="secondary"
+      boxColor="foregroundSecondary"
+      variant="icon"
+      iconColor="default"
+      iconVariant="overlay"
+      icon="wallet"
+      @click=${this.onWalletPayment}
+      ?chevron=${!0}
+      data-testid="wallet-payment-option"
+    >
+      <wui-text variant="lg-regular" color="primary">Pay with wallet</wui-text>
+    </wui-list-item>`}templateExchangeOptions(){if(this.isLoading)return I`<wui-flex justifyContent="center" alignItems="center">
+        <wui-loading-spinner size="md"></wui-loading-spinner>
+      </wui-flex>`;const e=this.exchanges.filter((e=>function(e){const t=r.getAllRequestedCaipNetworks().find((t=>t.caipNetworkId===e.network));return!!t&&Boolean(t.testnet)}(this.paymentAsset)?e.id===Fe:e.id!==Fe));return 0===e.length?I`<wui-flex justifyContent="center" alignItems="center">
+        <wui-text variant="md-medium" color="primary">No exchanges available</wui-text>
+      </wui-flex>`:e.map((e=>I`
+        <wui-list-item
+          type="secondary"
+          boxColor="foregroundSecondary"
+          @click=${()=>this.onExchangePayment(e)}
+          data-testid="exchange-option-${e.id}"
+          ?chevron=${!0}
+          imageSrc=${G(e.imageUrl)}
+        >
+          <wui-text flexGrow="1" variant="lg-regular" color="primary">
+            Pay with ${e.name}
+          </wui-text>
+        </wui-list-item>
+      `))}templateSeparator(){return I`<wui-separator text="or" bgColor="secondary"></wui-separator>`}async onWalletPayment(){if(!this.namespace)throw new Error("Namespace not found");this.caipAddress?p.push("PayQuote"):(await l.connect(),await k.open({view:"PayQuote"}))}onExchangePayment(e){ct.setSelectedExchange(e),p.push("PayQuote")}async onDisconnect(){try{await y.disconnect(),await k.open({view:"Pay"})}catch{console.error("Failed to disconnect"),u.showError("Failed to disconnect")}}getWalletProperties({namespace:e}){if(!e)return{name:void 0,image:void 0};const t=this.activeConnectorIds[e];if(!t)return{name:void 0,image:void 0};const i=l.getConnector({id:t,namespace:e});if(!i)return{name:void 0,image:void 0};const o=D.getConnectorImage(i);return{name:i.name,image:o}}};ut.styles=lt,dt([H()],ut.prototype,"amount",void 0),dt([H()],ut.prototype,"namespace",void 0),dt([H()],ut.prototype,"paymentAsset",void 0),dt([H()],ut.prototype,"activeConnectorIds",void 0),dt([H()],ut.prototype,"caipAddress",void 0),dt([H()],ut.prototype,"exchanges",void 0),dt([H()],ut.prototype,"isLoading",void 0),ut=dt([M("w3m-pay-view")],ut);var pt=T`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pulse-container {
+    position: relative;
+    width: var(--pulse-size);
+    height: var(--pulse-size);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pulse-rings {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .pulse-ring {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 2px solid var(--pulse-color);
+    opacity: 0;
+    animation: pulse var(--pulse-duration, 2s) ease-out infinite;
+  }
+
+  .pulse-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @keyframes pulse {
+    0% {
+      transform: scale(0.5);
+      opacity: var(--pulse-opacity, 0.3);
+    }
+    50% {
+      opacity: calc(var(--pulse-opacity, 0.3) * 0.5);
+    }
+    100% {
+      transform: scale(1.2);
+      opacity: 0;
+    }
+  }
+`,ht=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const mt={"accent-primary":L.tokens.core.backgroundAccentPrimary};let wt=class extends S{constructor(){super(...arguments),this.rings=3,this.duration=2,this.opacity=.3,this.size="200px",this.variant="accent-primary"}render(){const e=mt[this.variant];this.style.cssText=`\n      --pulse-size: ${this.size};\n      --pulse-duration: ${this.duration}s;\n      --pulse-color: ${e};\n      --pulse-opacity: ${this.opacity};\n    `;const t=Array.from({length:this.rings},((e,t)=>this.renderRing(t,this.rings)));return I`
+      <div class="pulse-container">
+        <div class="pulse-rings">${t}</div>
+        <div class="pulse-content">
+          <slot></slot>
+        </div>
+      </div>
+    `}renderRing(e,t){const i=e/t*this.duration;return I`<div class="pulse-ring" style=${`animation-delay: ${i}s;`}></div>`}};wt.styles=[A,pt],ht([V({type:Number})],wt.prototype,"rings",void 0),ht([V({type:Number})],wt.prototype,"duration",void 0),ht([V({type:Number})],wt.prototype,"opacity",void 0),ht([V()],wt.prototype,"size",void 0),ht([V()],wt.prototype,"variant",void 0),wt=ht([M("wui-pulse")],wt);const gt=[{id:"received",title:"Receiving funds",icon:"dollar"},{id:"processing",title:"Swapping asset",icon:"recycleHorizontal"},{id:"sending",title:"Sending asset to the recipient address",icon:"send"}],yt=["success","submitted","failure","timeout","refund"];var ft=T`
+  :host {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  wui-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+  }
+
+  .token-badge-container {
+    position: absolute;
+    bottom: 6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: ${({borderRadius:e})=>e[4]};
+    z-index: 3;
+    min-width: 105px;
+  }
+
+  .token-badge-container.loading {
+    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    border: 3px solid ${({tokens:e})=>e.theme.backgroundPrimary};
+  }
+
+  .token-badge-container.success {
+    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    border: 3px solid ${({tokens:e})=>e.theme.backgroundPrimary};
+  }
+
+  .token-image-container {
+    position: relative;
+  }
+
+  .token-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+    width: 64px;
+    height: 64px;
+  }
+
+  .token-image.success {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  .token-image.error {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  .token-image.loading {
+    background: ${({colors:e})=>e.accent010};
+  }
+
+  .token-image wui-icon {
+    width: 32px;
+    height: 32px;
+  }
+
+  .token-badge {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border: 1px solid ${({tokens:e})=>e.theme.foregroundSecondary};
+    border-radius: ${({borderRadius:e})=>e[4]};
+  }
+
+  .token-badge wui-text {
+    white-space: nowrap;
+  }
+
+  .payment-lifecycle-container {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-top-right-radius: ${({borderRadius:e})=>e[6]};
+    border-top-left-radius: ${({borderRadius:e})=>e[6]};
+  }
+
+  .payment-step-badge {
+    padding: ${({spacing:e})=>e[1]} ${({spacing:e})=>e[2]};
+    border-radius: ${({borderRadius:e})=>e[1]};
+  }
+
+  .payment-step-badge.loading {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+  }
+
+  .payment-step-badge.error {
+    background-color: ${({tokens:e})=>e.core.backgroundError};
+  }
+
+  .payment-step-badge.success {
+    background-color: ${({tokens:e})=>e.core.backgroundSuccess};
+  }
+
+  .step-icon-container {
+    position: relative;
+    height: 40px;
+    width: 40px;
+    border-radius: ${({borderRadius:e})=>e.round};
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+  }
+
+  .step-icon-box {
+    position: absolute;
+    right: -4px;
+    bottom: -1px;
+    padding: 2px;
+    border-radius: ${({borderRadius:e})=>e.round};
+    border: 2px solid ${({tokens:e})=>e.theme.backgroundPrimary};
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  .step-icon-box.success {
+    background-color: ${({tokens:e})=>e.core.backgroundSuccess};
+  }
+`,bt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const vt={received:["pending","success","submitted"],processing:["success","submitted"],sending:["success","submitted"]};let kt=class extends S{constructor(){super(),this.unsubscribe=[],this.pollingInterval=null,this.paymentAsset=ct.state.paymentAsset,this.quoteStatus=ct.state.quoteStatus,this.quote=ct.state.quote,this.amount=ct.state.amount,this.namespace=void 0,this.caipAddress=void 0,this.profileName=null,this.activeConnectorIds=l.state.activeConnectorIds,this.selectedExchange=ct.state.selectedExchange,this.initializeNamespace(),this.unsubscribe.push(ct.subscribeKey("quoteStatus",(e=>this.quoteStatus=e)),ct.subscribeKey("quote",(e=>this.quote=e)),l.subscribeKey("activeConnectorIds",(e=>this.activeConnectorIds=e)),ct.subscribeKey("selectedExchange",(e=>this.selectedExchange=e)))}connectedCallback(){super.connectedCallback(),this.startPolling()}disconnectedCallback(){super.disconnectedCallback(),this.stopPolling(),this.unsubscribe.forEach((e=>e()))}render(){return I`
+      <wui-flex flexDirection="column" .padding=${["3","0","0","0"]} gap="2">
+        ${this.tokenTemplate()} ${this.paymentTemplate()} ${this.paymentLifecycleTemplate()}
+      </wui-flex>
+    `}tokenTemplate(){const e=it(this.amount||"0"),t=this.paymentAsset.metadata.symbol??"Unknown",i=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===this.paymentAsset.network)),o="failure"===this.quoteStatus||"timeout"===this.quoteStatus||"refund"===this.quoteStatus;return"success"===this.quoteStatus||"submitted"===this.quoteStatus?I`<wui-flex alignItems="center" justifyContent="center">
+        <wui-flex justifyContent="center" alignItems="center" class="token-image success">
+          <wui-icon name="checkmark" color="success" size="inherit"></wui-icon>
+        </wui-flex>
+      </wui-flex>`:o?I`<wui-flex alignItems="center" justifyContent="center">
+        <wui-flex justifyContent="center" alignItems="center" class="token-image error">
+          <wui-icon name="close" color="error" size="inherit"></wui-icon>
+        </wui-flex>
+      </wui-flex>`:I`
+      <wui-flex alignItems="center" justifyContent="center">
+        <wui-flex class="token-image-container">
+          <wui-pulse size="125px" rings="3" duration="4" opacity="0.5" variant="accent-primary">
+            <wui-flex justifyContent="center" alignItems="center" class="token-image loading">
+              <wui-icon name="paperPlaneTitle" color="accent-primary" size="inherit"></wui-icon>
+            </wui-flex>
+          </wui-pulse>
+
+          <wui-flex
+            justifyContent="center"
+            alignItems="center"
+            class="token-badge-container loading"
+          >
+            <wui-flex
+              alignItems="center"
+              justifyContent="center"
+              gap="01"
+              padding="1"
+              class="token-badge"
+            >
+              <wui-image
+                src=${G(D.getNetworkImage(i))}
+                class="chain-image"
+                size="mdl"
+              ></wui-image>
+
+              <wui-text variant="lg-regular" color="primary">${e} ${t}</wui-text>
+            </wui-flex>
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `}paymentTemplate(){return I`
+      <wui-flex flexDirection="column" gap="2" .padding=${["0","6","0","6"]}>
+        ${this.renderPayment()}
+        <wui-separator></wui-separator>
+        ${this.renderWallet()}
+      </wui-flex>
+    `}paymentLifecycleTemplate(){const e=this.getStepsWithStatus();return I`
+      <wui-flex flexDirection="column" padding="4" gap="2" class="payment-lifecycle-container">
+        <wui-flex alignItems="center" justifyContent="space-between">
+          <wui-text variant="md-regular" color="secondary">PAYMENT CYCLE</wui-text>
+
+          ${this.renderPaymentCycleBadge()}
+        </wui-flex>
+
+        <wui-flex flexDirection="column" gap="5" .padding=${["2","0","2","0"]}>
+          ${e.map((e=>this.renderStep(e)))}
+        </wui-flex>
+      </wui-flex>
+    `}renderPaymentCycleBadge(){const e="failure"===this.quoteStatus||"timeout"===this.quoteStatus||"refund"===this.quoteStatus,t="success"===this.quoteStatus||"submitted"===this.quoteStatus;if(e)return I`
+        <wui-flex
+          justifyContent="center"
+          alignItems="center"
+          class="payment-step-badge error"
+          gap="1"
+        >
+          <wui-icon name="close" color="error" size="xs"></wui-icon>
+          <wui-text variant="sm-regular" color="error">Failed</wui-text>
+        </wui-flex>
+      `;if(t)return I`
+        <wui-flex
+          justifyContent="center"
+          alignItems="center"
+          class="payment-step-badge success"
+          gap="1"
+        >
+          <wui-icon name="checkmark" color="success" size="xs"></wui-icon>
+          <wui-text variant="sm-regular" color="success">Completed</wui-text>
+        </wui-flex>
+      `;const i=this.quote?.timeInSeconds??0;return I`
+      <wui-flex alignItems="center" justifyContent="space-between" gap="3">
+        <wui-flex
+          justifyContent="center"
+          alignItems="center"
+          class="payment-step-badge loading"
+          gap="1"
+        >
+          <wui-icon name="clock" color="default" size="xs"></wui-icon>
+          <wui-text variant="sm-regular" color="primary">Est. ${i} sec</wui-text>
+        </wui-flex>
+
+        <wui-icon name="chevronBottom" color="default" size="xxs"></wui-icon>
+      </wui-flex>
+    `}renderPayment(){const t=r.getAllRequestedCaipNetworks().find((e=>{const t=this.quote?.origin.currency.network;if(!t)return!1;const{chainId:i}=C.parseCaipNetworkId(t);return O.isLowerCaseMatch(e.id.toString(),i.toString())})),i=it(e.formatNumber(this.quote?.origin.amount||"0",{decimals:this.quote?.origin.currency.metadata.decimals??0}).toString()),o=this.quote?.origin.currency.metadata.symbol??"Unknown";return I`
+      <wui-flex
+        alignItems="flex-start"
+        justifyContent="space-between"
+        .padding=${["3","0","3","0"]}
+      >
+        <wui-text variant="lg-regular" color="secondary">Payment Method</wui-text>
+
+        <wui-flex flexDirection="column" alignItems="flex-end" gap="1">
+          <wui-flex alignItems="center" gap="01">
+            <wui-text variant="lg-regular" color="primary">${i}</wui-text>
+            <wui-text variant="lg-regular" color="secondary">${o}</wui-text>
+          </wui-flex>
+
+          <wui-flex alignItems="center" gap="1">
+            <wui-text variant="md-regular" color="secondary">on</wui-text>
+            <wui-image
+              src=${G(D.getNetworkImage(t))}
+              size="xs"
+            ></wui-image>
+            <wui-text variant="md-regular" color="secondary">${t?.name}</wui-text>
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `}renderWallet(){return I`
+      <wui-flex
+        alignItems="flex-start"
+        justifyContent="space-between"
+        .padding=${["3","0","3","0"]}
+      >
+        <wui-text variant="lg-regular" color="secondary"
+          >${this.selectedExchange?"Exchange":"Wallet"}</wui-text
+        >
+
+        ${this.renderWalletText()}
+      </wui-flex>
+    `}renderWalletText(){const{image:e}=this.getWalletProperties({namespace:this.namespace}),{address:t}=this.caipAddress?C.parseCaipAddress(this.caipAddress):{},i=this.selectedExchange?.name;return this.selectedExchange?I`
+        <wui-flex alignItems="center" justifyContent="flex-end" gap="1">
+          <wui-text variant="lg-regular" color="primary">${i}</wui-text>
+          <wui-image src=${G(this.selectedExchange.imageUrl)} size="mdl"></wui-image>
+        </wui-flex>
+      `:I`
+      <wui-flex alignItems="center" justifyContent="flex-end" gap="1">
+        <wui-text variant="lg-regular" color="primary">
+          ${K.getTruncateString({string:this.profileName||t||i||"",charsStart:this.profileName?16:4,charsEnd:this.profileName?0:6,truncate:this.profileName?"end":"middle"})}
+        </wui-text>
+
+        <wui-image src=${G(e)} size="mdl"></wui-image>
+      </wui-flex>
+    `}getStepsWithStatus(){return"failure"===this.quoteStatus||"timeout"===this.quoteStatus||"refund"===this.quoteStatus?gt.map((e=>({...e,status:"failed"}))):gt.map((e=>{const t=(vt[e.id]??[]).includes(this.quoteStatus)?"completed":"pending";return{...e,status:t}}))}renderStep({title:e,icon:t,status:i}){return I`
+      <wui-flex alignItems="center" gap="3">
+        <wui-flex justifyContent="center" alignItems="center" class="step-icon-container">
+          <wui-icon name=${t} color="default" size="mdl"></wui-icon>
+
+          <wui-flex alignItems="center" justifyContent="center" class=${Q({"step-icon-box":!0,success:"completed"===i})}>
+            ${this.renderStatusIndicator(i)}
+          </wui-flex>
+        </wui-flex>
+
+        <wui-text variant="md-regular" color="primary">${e}</wui-text>
+      </wui-flex>
+    `}renderStatusIndicator(e){return"completed"===e?I`<wui-icon size="sm" color="success" name="checkmark"></wui-icon>`:"failed"===e?I`<wui-icon size="sm" color="error" name="close"></wui-icon>`:"pending"===e?I`<wui-loading-spinner color="accent-primary" size="sm"></wui-loading-spinner>`:null}startPolling(){this.pollingInterval||(this.fetchQuoteStatus(),this.pollingInterval=setInterval((()=>{this.fetchQuoteStatus()}),3e3))}stopPolling(){this.pollingInterval&&(clearInterval(this.pollingInterval),this.pollingInterval=null)}async fetchQuoteStatus(){const e=ct.state.requestId;if(!e||yt.includes(this.quoteStatus))this.stopPolling();else try{await ct.fetchQuoteStatus({requestId:e}),yt.includes(this.quoteStatus)&&this.stopPolling()}catch{this.stopPolling()}}initializeNamespace(){const e=r.state.activeChain;this.namespace=e,this.caipAddress=r.getAccountData(e)?.caipAddress,this.profileName=r.getAccountData(e)?.profileName??null,this.unsubscribe.push(r.subscribeChainProp("accountState",(e=>{this.caipAddress=e?.caipAddress,this.profileName=e?.profileName??null}),e))}getWalletProperties({namespace:e}){if(!e)return{name:void 0,image:void 0};const t=this.activeConnectorIds[e];if(!t)return{name:void 0,image:void 0};const i=l.getConnector({id:t,namespace:e});if(!i)return{name:void 0,image:void 0};const o=D.getConnectorImage(i);return{name:i.name,image:o}}};kt.styles=ft,bt([H()],kt.prototype,"paymentAsset",void 0),bt([H()],kt.prototype,"quoteStatus",void 0),bt([H()],kt.prototype,"quote",void 0),bt([H()],kt.prototype,"amount",void 0),bt([H()],kt.prototype,"namespace",void 0),bt([H()],kt.prototype,"caipAddress",void 0),bt([H()],kt.prototype,"profileName",void 0),bt([H()],kt.prototype,"activeConnectorIds",void 0),bt([H()],kt.prototype,"selectedExchange",void 0),kt=bt([M("w3m-pay-loading-view")],kt);var xt=T`
+  button {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    padding: ${({spacing:e})=>e[2]};
+    border-radius: ${({borderRadius:e})=>e[4]};
+    column-gap: ${({spacing:e})=>e[1]};
+    background-color: transparent;
+    transition: background-color ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-2"]};
+    will-change: background-color;
+  }
+
+  wui-image,
+  .icon-box {
+    width: ${({spacing:e})=>e[6]};
+    height: ${({spacing:e})=>e[6]};
+    border-radius: ${({borderRadius:e})=>e[4]};
+  }
+
+  wui-text {
+    flex: 1;
+  }
+
+  .icon-box {
+    position: relative;
+  }
+
+  .icon-box[data-active='true'] {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+  }
+
+  .circle {
+    position: absolute;
+    left: 16px;
+    top: 15px;
+    width: 8px;
+    height: 8px;
+    background-color: ${({tokens:e})=>e.core.textSuccess};
+    box-shadow: 0 0 0 2px ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-radius: 50%;
+  }
+
+  /* -- Hover & Active states ----------------------------------------------------------- */
+  @media (hover: hover) {
+    button:hover:enabled,
+    button:active:enabled {
+      background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    }
+  }
+`,Tt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let At=class extends S{constructor(){super(...arguments),this.address="",this.profileName="",this.alt="",this.imageSrc="",this.icon=void 0,this.iconSize="md",this.enableGreenCircle=!0,this.loading=!1,this.charsStart=4,this.charsEnd=6}render(){return I`
+      <button>
+        ${this.leftImageTemplate()} ${this.textTemplate()} ${this.rightImageTemplate()}
+      </button>
+    `}leftImageTemplate(){const e=this.icon?I`<wui-icon
+          size=${G(this.iconSize)}
+          color="default"
+          name=${this.icon}
+          class="icon"
+        ></wui-icon>`:I`<wui-image src=${this.imageSrc} alt=${this.alt}></wui-image>`;return I`
+      <wui-flex
+        alignItems="center"
+        justifyContent="center"
+        class="icon-box"
+        data-active=${Boolean(this.icon)}
+      >
+        ${e}
+        ${this.enableGreenCircle?I`<wui-flex class="circle"></wui-flex>`:null}
+      </wui-flex>
+    `}textTemplate(){return I`
+      <wui-text variant="lg-regular" color="primary">
+        ${K.getTruncateString({string:this.profileName||this.address,charsStart:this.profileName?16:this.charsStart,charsEnd:this.profileName?0:this.charsEnd,truncate:this.profileName?"end":"middle"})}
+      </wui-text>
+    `}rightImageTemplate(){return I`<wui-icon name="chevronBottom" size="sm" color="default"></wui-icon>`}};At.styles=[A,E,xt],Tt([V()],At.prototype,"address",void 0),Tt([V()],At.prototype,"profileName",void 0),Tt([V()],At.prototype,"alt",void 0),Tt([V()],At.prototype,"imageSrc",void 0),Tt([V()],At.prototype,"icon",void 0),Tt([V()],At.prototype,"iconSize",void 0),Tt([V({type:Boolean})],At.prototype,"enableGreenCircle",void 0),Tt([V({type:Boolean})],At.prototype,"loading",void 0),Tt([V({type:Number})],At.prototype,"charsStart",void 0),Tt([V({type:Number})],At.prototype,"charsEnd",void 0),At=Tt([M("wui-wallet-switch")],At);var St=B`
+  :host {
+    display: block;
+  }
+`,It=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Et=class extends S{render(){return I`
+      <wui-flex flexDirection="column" gap="4">
+        <wui-flex alignItems="center" justifyContent="space-between">
+          <wui-text variant="md-regular" color="secondary">Pay</wui-text>
+          <wui-shimmer width="60px" height="16px" borderRadius="4xs" variant="light"></wui-shimmer>
+        </wui-flex>
+
+        <wui-flex alignItems="center" justifyContent="space-between">
+          <wui-text variant="md-regular" color="secondary">Network Fee</wui-text>
+
+          <wui-flex flexDirection="column" alignItems="flex-end" gap="2">
+            <wui-shimmer
+              width="75px"
+              height="16px"
+              borderRadius="4xs"
+              variant="light"
+            ></wui-shimmer>
+
+            <wui-flex alignItems="center" gap="01">
+              <wui-shimmer width="14px" height="14px" rounded variant="light"></wui-shimmer>
+              <wui-shimmer
+                width="49px"
+                height="14px"
+                borderRadius="4xs"
+                variant="light"
+              ></wui-shimmer>
+            </wui-flex>
+          </wui-flex>
+        </wui-flex>
+
+        <wui-flex alignItems="center" justifyContent="space-between">
+          <wui-text variant="md-regular" color="secondary">Service Fee</wui-text>
+          <wui-shimmer width="75px" height="16px" borderRadius="4xs" variant="light"></wui-shimmer>
+        </wui-flex>
+      </wui-flex>
+    `}};Et.styles=[St],Et=It([M("w3m-pay-fees-skeleton")],Et);var Pt=T`
+  :host {
+    display: block;
+  }
+
+  wui-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+  }
+`,Ct=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let $t=class extends S{constructor(){super(),this.unsubscribe=[],this.quote=ct.state.quote,this.unsubscribe.push(ct.subscribeKey("quote",(e=>this.quote=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const t=e.formatNumber(this.quote?.origin.amount||"0",{decimals:this.quote?.origin.currency.metadata.decimals??0,round:6}).toString();return I`
+      <wui-flex flexDirection="column" gap="4">
+        <wui-flex alignItems="center" justifyContent="space-between">
+          <wui-text variant="md-regular" color="secondary">Pay</wui-text>
+          <wui-text variant="md-regular" color="primary">
+            ${t} ${this.quote?.origin.currency.metadata.symbol||"Unknown"}
+          </wui-text>
+        </wui-flex>
+
+        ${this.quote&&this.quote.fees.length>0?this.quote.fees.map((e=>this.renderFee(e))):null}
+      </wui-flex>
+    `}renderFee(t){const i="network"===t.id,o=e.formatNumber(t.amount||"0",{decimals:t.currency.metadata.decimals??0,round:6}).toString();if(i){const e=r.getAllRequestedCaipNetworks().find((e=>O.isLowerCaseMatch(e.caipNetworkId,t.currency.network)));return I`
+        <wui-flex alignItems="center" justifyContent="space-between">
+          <wui-text variant="md-regular" color="secondary">${t.label}</wui-text>
+
+          <wui-flex flexDirection="column" alignItems="flex-end" gap="2">
+            <wui-text variant="md-regular" color="primary">
+              ${o} ${t.currency.metadata.symbol||"Unknown"}
+            </wui-text>
+
+            <wui-flex alignItems="center" gap="01">
+              <wui-image
+                src=${G(D.getNetworkImage(e))}
+                size="xs"
+              ></wui-image>
+              <wui-text variant="sm-regular" color="secondary">
+                ${e?.name||"Unknown"}
+              </wui-text>
+            </wui-flex>
+          </wui-flex>
+        </wui-flex>
+      `}return I`
+      <wui-flex alignItems="center" justifyContent="space-between">
+        <wui-text variant="md-regular" color="secondary">${t.label}</wui-text>
+        <wui-text variant="md-regular" color="primary">
+          ${o} ${t.currency.metadata.symbol||"Unknown"}
+        </wui-text>
+      </wui-flex>
+    `}};$t.styles=[Pt],Ct([H()],$t.prototype,"quote",void 0),$t=Ct([M("w3m-pay-fees")],$t);var Nt=T`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .disabled-container {
+    padding: ${({spacing:e})=>e[2]};
+    min-height: 168px;
+  }
+
+  wui-icon {
+    width: ${({spacing:e})=>e[8]};
+    height: ${({spacing:e})=>e[8]};
+  }
+
+  wui-flex > wui-text {
+    max-width: 273px;
+  }
+`,Rt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Ot=class extends S{constructor(){super(),this.unsubscribe=[],this.selectedExchange=ct.state.selectedExchange,this.unsubscribe.push(ct.subscribeKey("selectedExchange",(e=>this.selectedExchange=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=Boolean(this.selectedExchange);return I`
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        gap="3"
+        class="disabled-container"
+      >
+        <wui-icon name="coins" color="default" size="inherit"></wui-icon>
+
+        <wui-text variant="md-regular" color="primary" align="center">
+          You don't have enough funds to complete this transaction
+        </wui-text>
+
+        ${e?null:I`<wui-button
+              size="md"
+              variant="neutral-secondary"
+              @click=${this.dispatchConnectOtherWalletEvent.bind(this)}
+              >Connect other wallet</wui-button
+            >`}
+      </wui-flex>
+    `}dispatchConnectOtherWalletEvent(){this.dispatchEvent(new CustomEvent("connectOtherWallet",{detail:!0,bubbles:!0,composed:!0}))}};Ot.styles=[Nt],Rt([V({type:Array})],Ot.prototype,"selectedExchange",void 0),Ot=Rt([M("w3m-pay-options-empty")],Ot);var _t=T`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .pay-options-container {
+    max-height: 196px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+  }
+
+  .pay-options-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .pay-option-container {
+    border-radius: ${({borderRadius:e})=>e[4]};
+    padding: ${({spacing:e})=>e[3]};
+    min-height: 60px;
+  }
+
+  .token-images-container {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .chain-image {
+    position: absolute;
+    bottom: -3px;
+    right: -5px;
+    border: 2px solid ${({tokens:e})=>e.theme.foregroundSecondary};
+  }
+`,Ut=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Dt=class extends S{render(){return I`
+      <wui-flex flexDirection="column" gap="2" class="pay-options-container">
+        ${this.renderOptionEntry()} ${this.renderOptionEntry()} ${this.renderOptionEntry()}
+      </wui-flex>
+    `}renderOptionEntry(){return I`
+      <wui-flex
+        alignItems="center"
+        justifyContent="space-between"
+        gap="2"
+        class="pay-option-container"
+      >
+        <wui-flex alignItems="center" gap="2">
+          <wui-flex class="token-images-container">
+            <wui-shimmer
+              width="32px"
+              height="32px"
+              rounded
+              variant="light"
+              class="token-image"
+            ></wui-shimmer>
+            <wui-shimmer
+              width="16px"
+              height="16px"
+              rounded
+              variant="light"
+              class="chain-image"
+            ></wui-shimmer>
+          </wui-flex>
+
+          <wui-flex flexDirection="column" gap="1">
+            <wui-shimmer
+              width="74px"
+              height="16px"
+              borderRadius="4xs"
+              variant="light"
+            ></wui-shimmer>
+            <wui-shimmer
+              width="46px"
+              height="14px"
+              borderRadius="4xs"
+              variant="light"
+            ></wui-shimmer>
+          </wui-flex>
+        </wui-flex>
+      </wui-flex>
+    `}};Dt.styles=[_t],Dt=Ut([M("w3m-pay-options-skeleton")],Dt);var Lt=T`
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .pay-options-container {
+    max-height: 196px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+    mask-image: var(--options-mask-image);
+    -webkit-mask-image: var(--options-mask-image);
+  }
+
+  .pay-options-container::-webkit-scrollbar {
+    display: none;
+  }
+
+  .pay-option-container {
+    cursor: pointer;
+    border-radius: ${({borderRadius:e})=>e[4]};
+    padding: ${({spacing:e})=>e[3]};
+    transition: background-color ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-1"]};
+    will-change: background-color;
+  }
+
+  .token-images-container {
+    position: relative;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .token-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+    width: 32px;
+    height: 32px;
+  }
+
+  .chain-image {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    bottom: -3px;
+    right: -5px;
+    border-radius: ${({borderRadius:e})=>e.round};
+    border: 2px solid ${({tokens:e})=>e.theme.backgroundPrimary};
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .pay-option-container:hover {
+      background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    }
+  }
+`,Bt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let zt=class extends S{constructor(){super(),this.unsubscribe=[],this.options=[],this.selectedPaymentAsset=null}disconnectedCallback(){this.unsubscribe.forEach((e=>e())),this.resizeObserver?.disconnect();const e=this.shadowRoot?.querySelector(".pay-options-container");e?.removeEventListener("scroll",this.handleOptionsListScroll.bind(this))}firstUpdated(){const e=this.shadowRoot?.querySelector(".pay-options-container");e&&(requestAnimationFrame(this.handleOptionsListScroll.bind(this)),e?.addEventListener("scroll",this.handleOptionsListScroll.bind(this)),this.resizeObserver=new ResizeObserver((()=>{this.handleOptionsListScroll()})),this.resizeObserver?.observe(e),this.handleOptionsListScroll())}render(){return I`
+      <wui-flex flexDirection="column" gap="2" class="pay-options-container">
+        ${this.options.map((e=>this.payOptionTemplate(e)))}
+      </wui-flex>
+    `}payOptionTemplate(t){const{network:i,metadata:o,asset:a,amount:n="0"}=t,s=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===i)),c=`${i}:${a}`===`${this.selectedPaymentAsset?.network}:${this.selectedPaymentAsset?.asset}`,l=e.bigNumber(n,{safe:!0}),d=l.gt(0);return I`
+      <wui-flex
+        alignItems="center"
+        justifyContent="space-between"
+        gap="2"
+        @click=${()=>this.onSelect?.(t)}
+        class="pay-option-container"
+      >
+        <wui-flex alignItems="center" gap="2">
+          <wui-flex class="token-images-container">
+            <wui-image
+              src=${G(o.logoURI)}
+              class="token-image"
+              size="3xl"
+            ></wui-image>
+            <wui-image
+              src=${G(D.getNetworkImage(s))}
+              class="chain-image"
+              size="md"
+            ></wui-image>
+          </wui-flex>
+
+          <wui-flex flexDirection="column" gap="1">
+            <wui-text variant="lg-regular" color="primary">${o.symbol}</wui-text>
+            ${d?I`<wui-text variant="sm-regular" color="secondary">
+                  ${l.round(6).toString()} ${o.symbol}
+                </wui-text>`:null}
+          </wui-flex>
+        </wui-flex>
+
+        ${c?I`<wui-icon name="checkmark" size="md" color="success"></wui-icon>`:null}
+      </wui-flex>
+    `}handleOptionsListScroll(){const e=this.shadowRoot?.querySelector(".pay-options-container");if(!e)return;e.scrollHeight>300?(e.style.setProperty("--options-mask-image","linear-gradient(\n          to bottom,\n          rgba(0, 0, 0, calc(1 - var(--options-scroll--top-opacity))) 0px,\n          rgba(200, 200, 200, calc(1 - var(--options-scroll--top-opacity))) 1px,\n          black 50px,\n          black calc(100% - 50px),\n          rgba(155, 155, 155, calc(1 - var(--options-scroll--bottom-opacity))) calc(100% - 1px),\n          rgba(0, 0, 0, calc(1 - var(--options-scroll--bottom-opacity))) 100%\n        )"),e.style.setProperty("--options-scroll--top-opacity",re.interpolate([0,50],[0,1],e.scrollTop).toString()),e.style.setProperty("--options-scroll--bottom-opacity",re.interpolate([0,50],[0,1],e.scrollHeight-e.scrollTop-e.offsetHeight).toString())):(e.style.setProperty("--options-mask-image","none"),e.style.setProperty("--options-scroll--top-opacity","0"),e.style.setProperty("--options-scroll--bottom-opacity","0"))}};zt.styles=[Lt],Bt([V({type:Array})],zt.prototype,"options",void 0),Bt([V()],zt.prototype,"selectedPaymentAsset",void 0),Bt([V()],zt.prototype,"onSelect",void 0),zt=Bt([M("w3m-pay-options")],zt);var Wt=T`
+  .payment-methods-container {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border-top-right-radius: ${({borderRadius:e})=>e[5]};
+    border-top-left-radius: ${({borderRadius:e})=>e[5]};
+  }
+
+  .pay-options-container {
+    background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    border-radius: ${({borderRadius:e})=>e[5]};
+    padding: ${({spacing:e})=>e[1]};
+  }
+
+  w3m-tooltip-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: fit-content;
+  }
+
+  wui-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+  }
+
+  w3m-pay-options.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+`,jt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const Ft={eip155:{icon:"ethereum",label:"EVM"},solana:{icon:"solana",label:"Solana"},bip122:{icon:"bitcoin",label:"Bitcoin"},ton:{icon:"ton",label:"Ton"}};let qt=class extends S{constructor(){super(),this.unsubscribe=[],this.profileName=null,this.paymentAsset=ct.state.paymentAsset,this.namespace=void 0,this.caipAddress=void 0,this.amount=ct.state.amount,this.recipient=ct.state.recipient,this.activeConnectorIds=l.state.activeConnectorIds,this.selectedPaymentAsset=ct.state.selectedPaymentAsset,this.selectedExchange=ct.state.selectedExchange,this.isFetchingQuote=ct.state.isFetchingQuote,this.quoteError=ct.state.quoteError,this.quote=ct.state.quote,this.isFetchingTokenBalances=ct.state.isFetchingTokenBalances,this.tokenBalances=ct.state.tokenBalances,this.isPaymentInProgress=ct.state.isPaymentInProgress,this.exchangeUrlForQuote=ct.state.exchangeUrlForQuote,this.completedTransactionsCount=0,this.unsubscribe.push(ct.subscribeKey("paymentAsset",(e=>this.paymentAsset=e))),this.unsubscribe.push(ct.subscribeKey("tokenBalances",(e=>this.onTokenBalancesChanged(e)))),this.unsubscribe.push(ct.subscribeKey("isFetchingTokenBalances",(e=>this.isFetchingTokenBalances=e))),this.unsubscribe.push(l.subscribeKey("activeConnectorIds",(e=>this.activeConnectorIds=e))),this.unsubscribe.push(ct.subscribeKey("selectedPaymentAsset",(e=>this.selectedPaymentAsset=e))),this.unsubscribe.push(ct.subscribeKey("isFetchingQuote",(e=>this.isFetchingQuote=e))),this.unsubscribe.push(ct.subscribeKey("quoteError",(e=>this.quoteError=e))),this.unsubscribe.push(ct.subscribeKey("quote",(e=>this.quote=e))),this.unsubscribe.push(ct.subscribeKey("amount",(e=>this.amount=e))),this.unsubscribe.push(ct.subscribeKey("recipient",(e=>this.recipient=e))),this.unsubscribe.push(ct.subscribeKey("isPaymentInProgress",(e=>this.isPaymentInProgress=e))),this.unsubscribe.push(ct.subscribeKey("selectedExchange",(e=>this.selectedExchange=e))),this.unsubscribe.push(ct.subscribeKey("exchangeUrlForQuote",(e=>this.exchangeUrlForQuote=e))),this.resetQuoteState(),this.initializeNamespace(),this.fetchTokens()}disconnectedCallback(){super.disconnectedCallback(),this.resetAssetsState(),this.unsubscribe.forEach((e=>e()))}updated(e){super.updated(e);e.has("selectedPaymentAsset")&&this.fetchQuote()}render(){return I`
+      <wui-flex flexDirection="column">
+        ${this.profileTemplate()}
+
+        <wui-flex
+          flexDirection="column"
+          gap="4"
+          class="payment-methods-container"
+          .padding=${["4","4","5","4"]}
+        >
+          ${this.paymentOptionsViewTemplate()} ${this.amountWithFeeTemplate()}
+
+          <wui-flex
+            alignItems="center"
+            justifyContent="space-between"
+            .padding=${["1","0","1","0"]}
+          >
+            <wui-separator></wui-separator>
+          </wui-flex>
+
+          ${this.paymentActionsTemplate()}
+        </wui-flex>
+      </wui-flex>
+    `}profileTemplate(){if(this.selectedExchange){const t=e.formatNumber(this.quote?.origin.amount,{decimals:this.quote?.origin.currency.metadata.decimals??0}).toString();return I`
+        <wui-flex
+          .padding=${["4","3","4","3"]}
+          alignItems="center"
+          justifyContent="space-between"
+          gap="2"
+        >
+          <wui-text variant="lg-regular" color="secondary">Paying with</wui-text>
+
+          ${this.quote?I`<wui-text variant="lg-regular" color="primary">
+                ${e.bigNumber(t,{safe:!0}).round(6).toString()}
+                ${this.quote.origin.currency.metadata.symbol}
+              </wui-text>`:I`<wui-shimmer width="80px" height="18px" variant="light"></wui-shimmer>`}
+        </wui-flex>
+      `}const t=s.getPlainAddress(this.caipAddress)??"",{name:i,image:o}=this.getWalletProperties({namespace:this.namespace}),{icon:a,label:n}=Ft[this.namespace]??{};return I`
+      <wui-flex
+        .padding=${["4","3","4","3"]}
+        alignItems="center"
+        justifyContent="space-between"
+        gap="2"
+      >
+        <wui-wallet-switch
+          profileName=${G(this.profileName)}
+          address=${G(t)}
+          imageSrc=${G(o)}
+          alt=${G(i)}
+          @click=${this.onConnectOtherWallet.bind(this)}
+          data-testid="wui-wallet-switch"
+        ></wui-wallet-switch>
+
+        <wui-wallet-switch
+          profileName=${G(n)}
+          address=${G(t)}
+          icon=${G(a)}
+          iconSize="xs"
+          .enableGreenCircle=${!1}
+          alt=${G(n)}
+          @click=${this.onConnectOtherWallet.bind(this)}
+          data-testid="wui-wallet-switch"
+        ></wui-wallet-switch>
+      </wui-flex>
+    `}initializeNamespace(){const e=r.state.activeChain;this.namespace=e,this.caipAddress=r.getAccountData(e)?.caipAddress,this.profileName=r.getAccountData(e)?.profileName??null,this.unsubscribe.push(r.subscribeChainProp("accountState",(e=>this.onAccountStateChanged(e)),e))}async fetchTokens(){if(this.namespace){let e;if(this.caipAddress){const{chainId:t,chainNamespace:i}=C.parseCaipAddress(this.caipAddress),o=`${i}:${t}`;e=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===o))}await ct.fetchTokens({caipAddress:this.caipAddress,caipNetwork:e,namespace:this.namespace})}}fetchQuote(){if(this.amount&&this.recipient&&this.selectedPaymentAsset&&this.paymentAsset){const{address:e}=this.caipAddress?C.parseCaipAddress(this.caipAddress):{};ct.fetchQuote({amount:this.amount.toString(),address:e,sourceToken:this.selectedPaymentAsset,toToken:this.paymentAsset,recipient:this.recipient})}}getWalletProperties({namespace:e}){if(!e)return{name:void 0,image:void 0};const t=this.activeConnectorIds[e];if(!t)return{name:void 0,image:void 0};const i=l.getConnector({id:t,namespace:e});if(!i)return{name:void 0,image:void 0};const o=D.getConnectorImage(i);return{name:i.name,image:o}}paymentOptionsViewTemplate(){return I`
+      <wui-flex flexDirection="column" gap="2">
+        <wui-text variant="sm-regular" color="secondary">CHOOSE PAYMENT OPTION</wui-text>
+        <wui-flex class="pay-options-container">${this.paymentOptionsTemplate()}</wui-flex>
+      </wui-flex>
+    `}paymentOptionsTemplate(){const e=this.getPaymentAssetFromTokenBalances();if(this.isFetchingTokenBalances)return I`<w3m-pay-options-skeleton></w3m-pay-options-skeleton>`;if(0===e.length)return I`<w3m-pay-options-empty
+        @connectOtherWallet=${this.onConnectOtherWallet.bind(this)}
+      ></w3m-pay-options-empty>`;const t={disabled:this.isFetchingQuote};return I`<w3m-pay-options
+      class=${Q(t)}
+      .options=${e}
+      .selectedPaymentAsset=${G(this.selectedPaymentAsset)}
+      .onSelect=${this.onSelectedPaymentAssetChanged.bind(this)}
+    ></w3m-pay-options>`}amountWithFeeTemplate(){return this.isFetchingQuote||!this.selectedPaymentAsset||this.quoteError?I`<w3m-pay-fees-skeleton></w3m-pay-fees-skeleton>`:I`<w3m-pay-fees></w3m-pay-fees>`}paymentActionsTemplate(){const t=this.isFetchingQuote||this.isFetchingTokenBalances,i=this.isFetchingQuote||this.isFetchingTokenBalances||!this.selectedPaymentAsset||Boolean(this.quoteError),o=e.formatNumber(this.quote?.origin.amount??0,{decimals:this.quote?.origin.currency.metadata.decimals??0}).toString();return this.selectedExchange?t||i?I`
+          <wui-shimmer width="100%" height="48px" variant="light" ?rounded=${!0}></wui-shimmer>
+        `:I`<wui-button
+        size="lg"
+        fullWidth
+        variant="accent-secondary"
+        @click=${this.onPayWithExchange.bind(this)}
+      >
+        ${`Continue in ${this.selectedExchange.name}`}
+
+        <wui-icon name="arrowRight" color="inherit" size="sm" slot="iconRight"></wui-icon>
+      </wui-button>`:I`
+      <wui-flex alignItems="center" justifyContent="space-between">
+        <wui-flex flexDirection="column" gap="1">
+          <wui-text variant="md-regular" color="secondary">Order Total</wui-text>
+
+          ${t||i?I`<wui-shimmer width="58px" height="32px" variant="light"></wui-shimmer>`:I`<wui-flex alignItems="center" gap="01">
+                <wui-text variant="h4-regular" color="primary">${it(o)}</wui-text>
+
+                <wui-text variant="lg-regular" color="secondary">
+                  ${this.quote?.origin.currency.metadata.symbol||"Unknown"}
+                </wui-text>
+              </wui-flex>`}
+        </wui-flex>
+
+        ${this.actionButtonTemplate({isLoading:t,isDisabled:i})}
+      </wui-flex>
+    `}actionButtonTemplate(e){const t=Me(this.quote),{isLoading:i,isDisabled:o}=e;let a="Pay";return t.length>1&&0===this.completedTransactionsCount&&(a="Approve"),I`
+      <wui-button
+        size="lg"
+        variant="accent-primary"
+        ?loading=${i||this.isPaymentInProgress}
+        ?disabled=${o||this.isPaymentInProgress}
+        @click=${()=>{t.length>0?this.onSendTransactions():this.onTransfer()}}
+      >
+        ${a}
+        ${i?null:I`<wui-icon
+              name="arrowRight"
+              color="inherit"
+              size="sm"
+              slot="iconRight"
+            ></wui-icon>`}
+      </wui-button>
+    `}getPaymentAssetFromTokenBalances(){if(!this.namespace)return[];return(this.tokenBalances[this.namespace]??[]).map((e=>{try{return function(e){const t=r.getAllRequestedCaipNetworks().find((t=>t.caipNetworkId===e.chainId));let i=e.address;if(!t)throw new Error(`Target network not found for balance chainId "${e.chainId}"`);if(O.isLowerCaseMatch(e.symbol,t.nativeCurrency.symbol))i="native";else if(s.isCaipAddress(i)){const{address:e}=C.parseCaipAddress(i);i=e}else if(!i)throw new Error(`Balance address not found for balance symbol "${e.symbol}"`);return{network:t.caipNetworkId,asset:i,metadata:{name:e.name,symbol:e.symbol,decimals:Number(e.quantity.decimals),logoURI:e.iconUrl},amount:e.quantity.numeric}}(e)}catch(e){return null}})).filter((e=>Boolean(e))).filter((e=>{const{chainId:t}=C.parseCaipNetworkId(e.network),{chainId:i}=C.parseCaipNetworkId(this.paymentAsset.network);return!!O.isLowerCaseMatch(e.asset,this.paymentAsset.asset)||(!this.selectedExchange||!O.isLowerCaseMatch(t.toString(),i.toString()))}))}onTokenBalancesChanged(e){this.tokenBalances=e;const[t]=this.getPaymentAssetFromTokenBalances();t&&ct.setSelectedPaymentAsset(t)}async onConnectOtherWallet(){await l.connect(),await k.open({view:"PayQuote"})}onAccountStateChanged(e){const{address:t}=this.caipAddress?C.parseCaipAddress(this.caipAddress):{};if(this.caipAddress=e?.caipAddress,this.profileName=e?.profileName??null,t){const{address:e}=this.caipAddress?C.parseCaipAddress(this.caipAddress):{};e?O.isLowerCaseMatch(e,t)||(this.resetAssetsState(),this.resetQuoteState(),this.fetchTokens()):k.close()}}onSelectedPaymentAssetChanged(e){this.isFetchingQuote||ct.setSelectedPaymentAsset(e)}async onTransfer(){const t=qe(this.quote);if(t){if(!O.isLowerCaseMatch(this.selectedPaymentAsset?.asset,t.deposit.currency))throw new Error("Quote asset is not the same as the selected payment asset");const i=this.selectedPaymentAsset?.amount??"0",o=e.formatNumber(t.deposit.amount,{decimals:this.selectedPaymentAsset?.metadata.decimals??0}).toString();if(!e.bigNumber(i).gte(o))return void u.showError("Insufficient funds");if(this.quote&&this.selectedPaymentAsset&&this.caipAddress&&this.namespace){const{address:e}=C.parseCaipAddress(this.caipAddress);await ct.onTransfer({chainNamespace:this.namespace,fromAddress:e,toAddress:t.deposit.receiver,amount:o,paymentAsset:this.selectedPaymentAsset}),ct.setRequestId(t.requestId),p.push("PayLoading")}}}async onSendTransactions(){const t=this.selectedPaymentAsset?.amount??"0",i=e.formatNumber(this.quote?.origin.amount??0,{decimals:this.selectedPaymentAsset?.metadata.decimals??0}).toString();if(!e.bigNumber(t).gte(i))return void u.showError("Insufficient funds");const o=Me(this.quote),[a]=Me(this.quote,this.completedTransactionsCount);if(a&&this.namespace){await ct.onSendTransaction({namespace:this.namespace,transactionStep:a}),this.completedTransactionsCount+=1;this.completedTransactionsCount===o.length&&(ct.setRequestId(a.requestId),p.push("PayLoading"))}}onPayWithExchange(){if(this.exchangeUrlForQuote){const e=s.returnOpenHref("","popupWindow","scrollbar=yes,width=480,height=720");if(!e)throw new Error("Could not create popup window");e.location.href=this.exchangeUrlForQuote;const t=qe(this.quote);t&&ct.setRequestId(t.requestId),ct.initiatePayment(),p.push("PayLoading")}}resetAssetsState(){ct.setSelectedPaymentAsset(null)}resetQuoteState(){ct.resetQuoteState()}};qt.styles=Wt,jt([H()],qt.prototype,"profileName",void 0),jt([H()],qt.prototype,"paymentAsset",void 0),jt([H()],qt.prototype,"namespace",void 0),jt([H()],qt.prototype,"caipAddress",void 0),jt([H()],qt.prototype,"amount",void 0),jt([H()],qt.prototype,"recipient",void 0),jt([H()],qt.prototype,"activeConnectorIds",void 0),jt([H()],qt.prototype,"selectedPaymentAsset",void 0),jt([H()],qt.prototype,"selectedExchange",void 0),jt([H()],qt.prototype,"isFetchingQuote",void 0),jt([H()],qt.prototype,"quoteError",void 0),jt([H()],qt.prototype,"quote",void 0),jt([H()],qt.prototype,"isFetchingTokenBalances",void 0),jt([H()],qt.prototype,"tokenBalances",void 0),jt([H()],qt.prototype,"isPaymentInProgress",void 0),jt([H()],qt.prototype,"exchangeUrlForQuote",void 0),jt([H()],qt.prototype,"completedTransactionsCount",void 0),qt=jt([M("w3m-pay-quote-view")],qt);var Mt=T`
+  wui-image {
+    border-radius: ${({borderRadius:e})=>e.round};
+  }
+
+  .transfers-badge {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    border: 1px solid ${({tokens:e})=>e.theme.foregroundSecondary};
+    border-radius: ${({borderRadius:e})=>e[4]};
+  }
+`,Vt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Gt=class extends S{constructor(){super(),this.unsubscribe=[],this.paymentAsset=ct.state.paymentAsset,this.amount=ct.state.amount,this.unsubscribe.push(ct.subscribeKey("paymentAsset",(e=>{this.paymentAsset=e})),ct.subscribeKey("amount",(e=>{this.amount=e})))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=r.getAllRequestedCaipNetworks().find((e=>e.caipNetworkId===this.paymentAsset.network));return I`<wui-flex
+      alignItems="center"
+      gap="1"
+      .padding=${["1","2","1","1"]}
+      class="transfers-badge"
+    >
+      <wui-image src=${G(this.paymentAsset.metadata.logoURI)} size="xl"></wui-image>
+      <wui-text variant="lg-regular" color="primary">
+        ${this.amount} ${this.paymentAsset.metadata.symbol}
+      </wui-text>
+      <wui-text variant="sm-regular" color="secondary">
+        on ${e?.name??"Unknown"}
+      </wui-text>
+    </wui-flex>`}};Gt.styles=[Mt],Vt([V()],Gt.prototype,"paymentAsset",void 0),Vt([V()],Gt.prototype,"amount",void 0),Gt=Vt([M("w3m-pay-header")],Gt);var Ht=T`
+  :host {
+    height: 60px;
+  }
+
+  :host > wui-flex {
+    box-sizing: border-box;
+    background-color: var(--local-header-background-color);
+  }
+
+  wui-text {
+    background-color: var(--local-header-background-color);
+  }
+
+  wui-flex.w3m-header-title {
+    transform: translateY(0);
+    opacity: 1;
+  }
+
+  wui-flex.w3m-header-title[view-direction='prev'] {
+    animation:
+      slide-down-out 120ms forwards ${({easings:e})=>e["ease-out-power-2"]},
+      slide-down-in 120ms forwards ${({easings:e})=>e["ease-out-power-2"]};
+    animation-delay: 0ms, 200ms;
+  }
+
+  wui-flex.w3m-header-title[view-direction='next'] {
+    animation:
+      slide-up-out 120ms forwards ${({easings:e})=>e["ease-out-power-2"]},
+      slide-up-in 120ms forwards ${({easings:e})=>e["ease-out-power-2"]};
+    animation-delay: 0ms, 200ms;
+  }
+
+  wui-icon-button[data-hidden='true'] {
+    opacity: 0 !important;
+    pointer-events: none;
+  }
+
+  @keyframes slide-up-out {
+    from {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(3px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-up-in {
+    from {
+      transform: translateY(-3px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-down-out {
+    from {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+    to {
+      transform: translateY(-3px);
+      opacity: 0;
+    }
+  }
+
+  @keyframes slide-down-in {
+    from {
+      transform: translateY(3px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+`,Yt=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const Kt=["SmartSessionList"],Qt={PayWithExchange:L.tokens.theme.foregroundPrimary};function Xt(){const e=p.state.data?.connector?.name,t=p.state.data?.wallet?.name,i=p.state.data?.network?.name,o=t??e,a=l.getConnectors(),n=1===a.length&&"w3m-email"===a[0]?.id,s=r.getAccountData()?.socialProvider;return{Connect:`Connect ${n?"Email":""} Wallet`,Create:"Create Wallet",ChooseAccountName:void 0,Account:void 0,AccountSettings:void 0,AllWallets:"All Wallets",ApproveTransaction:"Approve Transaction",BuyInProgress:"Buy",UsageExceeded:"Usage Exceeded",ConnectingExternal:o??"Connect Wallet",ConnectingWalletConnect:o??"WalletConnect",ConnectingWalletConnectBasic:"WalletConnect",ConnectingSiwe:"Sign In",Convert:"Convert",ConvertSelectToken:"Select token",ConvertPreview:"Preview Convert",Downloads:o?`Get ${o}`:"Downloads",EmailLogin:"Email Login",EmailVerifyOtp:"Confirm Email",EmailVerifyDevice:"Register Device",GetWallet:"Get a Wallet",Networks:"Choose Network",OnRampProviders:"Choose Provider",OnRampActivity:"Activity",OnRampTokenSelect:"Select Token",OnRampFiatSelect:"Select Currency",Pay:"How you pay",ProfileWallets:"Wallets",SwitchNetwork:i??"Switch Network",Transactions:"Activity",UnsupportedChain:"Switch Network",UpgradeEmailWallet:"Upgrade Your Wallet",UpdateEmailWallet:"Edit Email",UpdateEmailPrimaryOtp:"Confirm Current Email",UpdateEmailSecondaryOtp:"Confirm New Email",WhatIsABuy:"What is Buy?",RegisterAccountName:"Choose Name",RegisterAccountNameSuccess:"",WalletReceive:"Receive",WalletCompatibleNetworks:"Compatible Networks",Swap:"Swap",SwapSelectToken:"Select Token",SwapPreview:"Preview Swap",WalletSend:"Send",WalletSendPreview:"Review Send",WalletSendSelectToken:"Select Token",WalletSendConfirmed:"Confirmed",WhatIsANetwork:"What is a network?",WhatIsAWallet:"What is a Wallet?",ConnectWallets:"Connect Wallet",ConnectSocials:"All Socials",ConnectingSocial:s?s.charAt(0).toUpperCase()+s.slice(1):"Connect Social",ConnectingMultiChain:"Select Chain",ConnectingFarcaster:"Farcaster",SwitchActiveChain:"Switch Chain",SmartSessionCreated:void 0,SmartSessionList:"Smart Sessions",SIWXSignMessage:"Sign In",PayLoading:"Processing payment...",PayQuote:"Payment Quote",DataCapture:"Profile",DataCaptureOtpConfirm:"Confirm Email",FundWallet:"Fund Wallet",PayWithExchange:"Deposit from Exchange",PayWithExchangeSelectAsset:"Select Asset",SmartAccountSettings:"Smart Account Settings"}}let Zt=class extends S{constructor(){super(),this.unsubscribe=[],this.heading=Xt()[p.state.view],this.network=r.state.activeCaipNetwork,this.networkImage=D.getNetworkImage(this.network),this.showBack=!1,this.prevHistoryLength=1,this.view=p.state.view,this.viewDirection="",this.unsubscribe.push(z.subscribeNetworkImages((()=>{this.networkImage=D.getNetworkImage(this.network)})),p.subscribeKey("view",(e=>{setTimeout((()=>{this.view=e,this.heading=Xt()[e]}),Ie.ANIMATION_DURATIONS.HeaderText),this.onViewChange(),this.onHistoryChange()})),r.subscribeKey("activeCaipNetwork",(e=>{this.network=e,this.networkImage=D.getNetworkImage(this.network)})))}disconnectCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=Qt[p.state.view]??L.tokens.theme.backgroundPrimary;return this.style.setProperty("--local-header-background-color",e),I`
+      <wui-flex
+        .padding=${["0","4","0","4"]}
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        ${this.leftHeaderTemplate()} ${this.titleTemplate()} ${this.rightHeaderTemplate()}
+      </wui-flex>
+    `}onWalletHelp(){f.sendEvent({type:"track",event:"CLICK_WALLET_HELP"}),p.push("WhatIsAWallet")}async onClose(){await ne.safeClose()}rightHeaderTemplate(){const e=_?.state?.features?.smartSessions;return"Account"===p.state.view&&e?I`<wui-flex>
+      <wui-icon-button
+        icon="clock"
+        size="lg"
+        iconSize="lg"
+        type="neutral"
+        variant="primary"
+        @click=${()=>p.push("SmartSessionList")}
+        data-testid="w3m-header-smart-sessions"
+      ></wui-icon-button>
+      ${this.closeButtonTemplate()}
+    </wui-flex> `:this.closeButtonTemplate()}closeButtonTemplate(){return I`
+      <wui-icon-button
+        icon="close"
+        size="lg"
+        type="neutral"
+        variant="primary"
+        iconSize="lg"
+        @click=${this.onClose.bind(this)}
+        data-testid="w3m-header-close"
+      ></wui-icon-button>
+    `}titleTemplate(){if("PayQuote"===this.view)return I`<w3m-pay-header></w3m-pay-header>`;const e=Kt.includes(this.view);return I`
+      <wui-flex
+        view-direction="${this.viewDirection}"
+        class="w3m-header-title"
+        alignItems="center"
+        gap="2"
+      >
+        <wui-text
+          display="inline"
+          variant="lg-regular"
+          color="primary"
+          data-testid="w3m-header-text"
+        >
+          ${this.heading}
+        </wui-text>
+        ${e?I`<wui-tag variant="accent" size="md">Beta</wui-tag>`:null}
+      </wui-flex>
+    `}leftHeaderTemplate(){const{view:e}=p.state,t="Connect"===e,i=_.state.enableEmbedded,o="ApproveTransaction"===e,a="ConnectingSiwe"===e,n="Account"===e,r=_.state.enableNetworkSwitch,s=o||a||t&&i;return n&&r?I`<wui-select
+        id="dynamic"
+        data-testid="w3m-account-select-network"
+        active-network=${G(this.network?.name)}
+        @click=${this.onNetworks.bind(this)}
+        imageSrc=${G(this.networkImage)}
+      ></wui-select>`:this.showBack&&!s?I`<wui-icon-button
+        data-testid="header-back"
+        id="dynamic"
+        icon="chevronLeft"
+        size="lg"
+        iconSize="lg"
+        type="neutral"
+        variant="primary"
+        @click=${this.onGoBack.bind(this)}
+      ></wui-icon-button>`:I`<wui-icon-button
+      data-hidden=${!t}
+      id="dynamic"
+      icon="helpCircle"
+      size="lg"
+      iconSize="lg"
+      type="neutral"
+      variant="primary"
+      @click=${this.onWalletHelp.bind(this)}
+    ></wui-icon-button>`}onNetworks(){this.isAllowedNetworkSwitch()&&(f.sendEvent({type:"track",event:"CLICK_NETWORKS"}),p.push("Networks"))}isAllowedNetworkSwitch(){const e=r.getAllRequestedCaipNetworks(),t=!!e&&e.length>1,i=e?.find((({id:e})=>e===this.network?.id));return t||!i}onViewChange(){const{history:e}=p.state;let t=Ie.VIEW_DIRECTION.Next;e.length<this.prevHistoryLength&&(t=Ie.VIEW_DIRECTION.Prev),this.prevHistoryLength=e.length,this.viewDirection=t}async onHistoryChange(){const{history:e}=p.state,t=this.shadowRoot?.querySelector("#dynamic");e.length>1&&!this.showBack&&t?(await t.animate([{opacity:1},{opacity:0}],{duration:200,fill:"forwards",easing:"ease"}).finished,this.showBack=!0,t.animate([{opacity:0},{opacity:1}],{duration:200,fill:"forwards",easing:"ease"})):e.length<=1&&this.showBack&&t&&(await t.animate([{opacity:1},{opacity:0}],{duration:200,fill:"forwards",easing:"ease"}).finished,this.showBack=!1,t.animate([{opacity:0},{opacity:1}],{duration:200,fill:"forwards",easing:"ease"}))}onGoBack(){p.goBack()}};Zt.styles=Ht,Yt([H()],Zt.prototype,"heading",void 0),Yt([H()],Zt.prototype,"network",void 0),Yt([H()],Zt.prototype,"networkImage",void 0),Yt([H()],Zt.prototype,"showBack",void 0),Yt([H()],Zt.prototype,"prevHistoryLength",void 0),Yt([H()],Zt.prototype,"view",void 0),Yt([H()],Zt.prototype,"viewDirection",void 0),Zt=Yt([M("w3m-header")],Zt);var Jt=T`
+  :host {
+    display: flex;
+    align-items: center;
+    gap: ${({spacing:e})=>e[1]};
+    padding: ${({spacing:e})=>e[2]} ${({spacing:e})=>e[3]}
+      ${({spacing:e})=>e[2]} ${({spacing:e})=>e[2]};
+    border-radius: ${({borderRadius:e})=>e[20]};
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+    box-shadow:
+      0px 0px 8px 0px rgba(0, 0, 0, 0.1),
+      inset 0 0 0 1px ${({tokens:e})=>e.theme.borderPrimary};
+    max-width: 320px;
+  }
+
+  wui-icon-box {
+    border-radius: ${({borderRadius:e})=>e.round} !important;
+    overflow: hidden;
+  }
+
+  wui-loading-spinner {
+    padding: ${({spacing:e})=>e[1]};
+    background-color: ${({tokens:e})=>e.core.foregroundAccent010};
+    border-radius: ${({borderRadius:e})=>e.round} !important;
+  }
+`,ei=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let ti=class extends S{constructor(){super(...arguments),this.message="",this.variant="success"}render(){return I`
+      ${this.templateIcon()}
+      <wui-text variant="lg-regular" color="primary" data-testid="wui-snackbar-message"
+        >${this.message}</wui-text
+      >
+    `}templateIcon(){return"loading"===this.variant?I`<wui-loading-spinner size="md" color="accent-primary"></wui-loading-spinner>`:I`<wui-icon-box
+      size="md"
+      color=${{success:"success",error:"error",warning:"warning",info:"default"}[this.variant]}
+      icon=${{success:"checkmark",error:"warning",warning:"warningCircle",info:"info"}[this.variant]}
+    ></wui-icon-box>`}};ti.styles=[A,Jt],ei([V()],ti.prototype,"message",void 0),ei([V()],ti.prototype,"variant",void 0),ti=ei([M("wui-snackbar")],ti);var ii=B`
+  :host {
+    display: block;
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    top: 11px;
+    left: 50%;
+    width: max-content;
+  }
+`,oi=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let ai=class extends S{constructor(){super(),this.unsubscribe=[],this.timeout=void 0,this.open=u.state.open,this.unsubscribe.push(u.subscribeKey("open",(e=>{this.open=e,this.onOpen()})))}disconnectedCallback(){clearTimeout(this.timeout),this.unsubscribe.forEach((e=>e()))}render(){const{message:e,variant:t}=u.state;return I` <wui-snackbar message=${e} variant=${t}></wui-snackbar> `}onOpen(){clearTimeout(this.timeout),this.open?(this.animate([{opacity:0,transform:"translateX(-50%) scale(0.85)"},{opacity:1,transform:"translateX(-50%) scale(1)"}],{duration:150,fill:"forwards",easing:"ease"}),this.timeout&&clearTimeout(this.timeout),u.state.autoClose&&(this.timeout=setTimeout((()=>u.hide()),2500))):this.animate([{opacity:1,transform:"translateX(-50%) scale(1)"},{opacity:0,transform:"translateX(-50%) scale(0.85)"}],{duration:150,fill:"forwards",easing:"ease"})}};ai.styles=ii,oi([H()],ai.prototype,"open",void 0),ai=oi([M("w3m-snackbar")],ai);var ni=B`
+  :host {
+    width: 100%;
+    display: block;
+  }
+`,ri=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let si=class extends S{constructor(){super(),this.unsubscribe=[],this.text="",this.open=ae.state.open,this.unsubscribe.push(p.subscribeKey("view",(()=>{ae.hide()})),k.subscribeKey("open",(e=>{e||ae.hide()})),ae.subscribeKey("open",(e=>{this.open=e})))}disconnectedCallback(){this.unsubscribe.forEach((e=>e())),ae.hide()}render(){return I`
+      <div
+        @pointermove=${this.onMouseEnter.bind(this)}
+        @pointerleave=${this.onMouseLeave.bind(this)}
+      >
+        ${this.renderChildren()}
+      </div>
+    `}renderChildren(){return I`<slot></slot> `}onMouseEnter(){const e=this.getBoundingClientRect();if(!this.open){const t=document.querySelector("w3m-modal"),i={width:e.width,height:e.height,left:e.left,top:e.top};if(t){const o=t.getBoundingClientRect();i.left=e.left-(window.innerWidth-o.width)/2,i.top=e.top-(window.innerHeight-o.height)/2}ae.showTooltip({message:this.text,triggerRect:i,variant:"shade"})}}onMouseLeave(e){this.contains(e.relatedTarget)||ae.hide()}};si.styles=[ni],ri([V()],si.prototype,"text",void 0),ri([H()],si.prototype,"open",void 0),si=ri([M("w3m-tooltip-trigger")],si);var ci=T`
+  :host {
+    pointer-events: none;
+  }
+
+  :host > wui-flex {
+    display: var(--w3m-tooltip-display);
+    opacity: var(--w3m-tooltip-opacity);
+    padding: 9px ${({spacing:e})=>e[3]} 10px ${({spacing:e})=>e[3]};
+    border-radius: ${({borderRadius:e})=>e[3]};
+    color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    position: absolute;
+    top: var(--w3m-tooltip-top);
+    left: var(--w3m-tooltip-left);
+    transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));
+    max-width: calc(var(--apkt-modal-width) - ${({spacing:e})=>e[5]});
+    transition: opacity ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-2"]};
+    will-change: opacity;
+    opacity: 0;
+    animation-duration: ${({durations:e})=>e.xl};
+    animation-timing-function: ${({easings:e})=>e["ease-out-power-2"]};
+    animation-name: fade-in;
+    animation-fill-mode: forwards;
+  }
+
+  :host([data-variant='shade']) > wui-flex {
+    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  :host([data-variant='shade']) > wui-flex > wui-text {
+    color: ${({tokens:e})=>e.theme.textSecondary};
+  }
+
+  :host([data-variant='fill']) > wui-flex {
+    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    border: 1px solid ${({tokens:e})=>e.theme.borderPrimary};
+  }
+
+  wui-icon {
+    position: absolute;
+    width: 12px !important;
+    height: 4px !important;
+    color: ${({tokens:e})=>e.theme.foregroundPrimary};
+  }
+
+  wui-icon[data-placement='top'] {
+    bottom: 0px;
+    left: 50%;
+    transform: translate(-50%, 95%);
+  }
+
+  wui-icon[data-placement='bottom'] {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -95%) rotate(180deg);
+  }
+
+  wui-icon[data-placement='right'] {
+    top: 50%;
+    left: 0;
+    transform: translate(-65%, -50%) rotate(90deg);
+  }
+
+  wui-icon[data-placement='left'] {
+    top: 50%;
+    right: 0%;
+    transform: translate(65%, -50%) rotate(270deg);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+`,li=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let di=class extends S{constructor(){super(),this.unsubscribe=[],this.open=ae.state.open,this.message=ae.state.message,this.triggerRect=ae.state.triggerRect,this.variant=ae.state.variant,this.unsubscribe.push(ae.subscribe((e=>{this.open=e.open,this.message=e.message,this.triggerRect=e.triggerRect,this.variant=e.variant})))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){this.dataset.variant=this.variant;const e=this.triggerRect.top,t=this.triggerRect.left;return this.style.cssText=`\n    --w3m-tooltip-top: ${e}px;\n    --w3m-tooltip-left: ${t}px;\n    --w3m-tooltip-parent-width: ${this.triggerRect.width/2}px;\n    --w3m-tooltip-display: ${this.open?"flex":"none"};\n    --w3m-tooltip-opacity: ${this.open?1:0};\n    `,I`<wui-flex>
+      <wui-icon data-placement="top" size="inherit" name="cursor"></wui-icon>
+      <wui-text color="primary" variant="sm-regular">${this.message}</wui-text>
+    </wui-flex>`}};di.styles=[ci],li([H()],di.prototype,"open",void 0),li([H()],di.prototype,"message",void 0),li([H()],di.prototype,"triggerRect",void 0),li([H()],di.prototype,"variant",void 0),di=li([M("w3m-tooltip")],di);const ui={getTabsByNamespace:e=>Boolean(e)&&e===d.CHAIN.EVM?!1===_.state.remoteFeatures?.activity?Ie.ACCOUNT_TABS.filter((e=>"Activity"!==e.label)):Ie.ACCOUNT_TABS:[],isValidReownName:e=>/^[a-zA-Z0-9]+$/gu.test(e),isValidEmail:e=>/^[^\s@]+@[^\s@]+\.[^\s@]+$/gu.test(e),validateReownName:e=>e.replace(/\^/gu,"").toLowerCase().replace(/[^a-zA-Z0-9]/gu,""),hasFooter(){const e=p.state.view;if(Ie.VIEWS_WITH_LEGAL_FOOTER.includes(e)){const{termsConditionsUrl:e,privacyPolicyUrl:t}=_.state,i=_.state.features?.legalCheckbox;return!(!e&&!t||i)}return Ie.VIEWS_WITH_DEFAULT_FOOTER.includes(e)}};var pi=T`
+  :host wui-ux-by-reown {
+    padding-top: 0;
+  }
+
+  :host wui-ux-by-reown.branding-only {
+    padding-top: ${({spacing:e})=>e[3]};
+  }
+
+  a {
+    text-decoration: none;
+    color: ${({tokens:e})=>e.core.textAccentPrimary};
+    font-weight: 500;
+  }
+`,hi=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let mi=class extends S{constructor(){super(),this.unsubscribe=[],this.remoteFeatures=_.state.remoteFeatures,this.unsubscribe.push(_.subscribeKey("remoteFeatures",(e=>this.remoteFeatures=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=_.state,i=_.state.features?.legalCheckbox;return!e&&!t||i?I`
+        <wui-flex flexDirection="column"> ${this.reownBrandingTemplate(!0)} </wui-flex>
+      `:I`
+      <wui-flex flexDirection="column">
+        <wui-flex .padding=${["4","3","3","3"]} justifyContent="center">
+          <wui-text color="secondary" variant="md-regular" align="center">
+            By connecting your wallet, you agree to our <br />
+            ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()}
+          </wui-text>
+        </wui-flex>
+        ${this.reownBrandingTemplate()}
+      </wui-flex>
+    `}andTemplate(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=_.state;return e&&t?"and":""}termsTemplate(){const{termsConditionsUrl:e}=_.state;return e?I`<a href=${e} target="_blank" rel="noopener noreferrer"
+      >Terms of Service</a
+    >`:null}privacyTemplate(){const{privacyPolicyUrl:e}=_.state;return e?I`<a href=${e} target="_blank" rel="noopener noreferrer"
+      >Privacy Policy</a
+    >`:null}reownBrandingTemplate(e=!1){return this.remoteFeatures?.reownBranding?e?I`<wui-ux-by-reown class="branding-only"></wui-ux-by-reown>`:I`<wui-ux-by-reown></wui-ux-by-reown>`:null}};mi.styles=[pi],hi([H()],mi.prototype,"remoteFeatures",void 0),mi=hi([M("w3m-legal-footer")],mi);var wi=B``,gi=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let yi=class extends S{render(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=_.state;return e||t?I`
+      <wui-flex
+        .padding=${["4","3","3","3"]}
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        gap="3"
+      >
+        <wui-text color="secondary" variant="md-regular" align="center">
+          We work with the best providers to give you the lowest fees and best support. More options
+          coming soon!
+        </wui-text>
+
+        ${this.howDoesItWorkTemplate()}
+      </wui-flex>
+    `:null}howDoesItWorkTemplate(){return I` <wui-link @click=${this.onWhatIsBuy.bind(this)}>
+      <wui-icon size="xs" color="accent-primary" slot="iconLeft" name="helpCircle"></wui-icon>
+      How does it work?
+    </wui-link>`}onWhatIsBuy(){f.sendEvent({type:"track",event:"SELECT_WHAT_IS_A_BUY",properties:{isSmartAccount:b(r.state.activeChain)===v.ACCOUNT_TYPES.SMART_ACCOUNT}}),p.push("WhatIsABuy")}};yi.styles=[wi],yi=gi([M("w3m-onramp-providers-footer")],yi);var fi=T`
+  :host {
+    display: block;
+  }
+
+  div.container {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    height: auto;
+    display: block;
+  }
+
+  div.container[status='hide'] {
+    animation: fade-out;
+    animation-duration: var(--apkt-duration-dynamic);
+    animation-timing-function: ${({easings:e})=>e["ease-out-power-2"]};
+    animation-fill-mode: both;
+    animation-delay: 0s;
+  }
+
+  div.container[status='show'] {
+    animation: fade-in;
+    animation-duration: var(--apkt-duration-dynamic);
+    animation-timing-function: ${({easings:e})=>e["ease-out-power-2"]};
+    animation-fill-mode: both;
+    animation-delay: var(--apkt-duration-dynamic);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      filter: blur(6px);
+    }
+    to {
+      opacity: 1;
+      filter: blur(0px);
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+      filter: blur(0px);
+    }
+    to {
+      opacity: 0;
+      filter: blur(6px);
+    }
+  }
+`,bi=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let vi=class extends S{constructor(){super(...arguments),this.resizeObserver=void 0,this.unsubscribe=[],this.status="hide",this.view=p.state.view}firstUpdated(){this.status=ui.hasFooter()?"show":"hide",this.unsubscribe.push(p.subscribeKey("view",(e=>{if(this.view=e,this.status=ui.hasFooter()?"show":"hide","hide"===this.status){document.documentElement.style.setProperty("--apkt-footer-height","0px")}}))),this.resizeObserver=new ResizeObserver((e=>{for(const t of e)if(t.target===this.getWrapper()){const e=`${t.contentRect.height}px`;document.documentElement.style.setProperty("--apkt-footer-height",e)}})),this.resizeObserver.observe(this.getWrapper())}render(){return I`
+      <div class="container" status=${this.status}>${this.templatePageContainer()}</div>
+    `}templatePageContainer(){return ui.hasFooter()?I` ${this.templateFooter()}`:null}templateFooter(){switch(this.view){case"Networks":return this.templateNetworksFooter();case"Connect":case"ConnectWallets":case"OnRampFiatSelect":case"OnRampTokenSelect":return I`<w3m-legal-footer></w3m-legal-footer>`;case"OnRampProviders":return I`<w3m-onramp-providers-footer></w3m-onramp-providers-footer>`;default:return null}}templateNetworksFooter(){return I` <wui-flex
+      class="footer-in"
+      padding="3"
+      flexDirection="column"
+      gap="3"
+      alignItems="center"
+    >
+      <wui-text variant="md-regular" color="secondary" align="center">
+        Your connected wallet may not support some of the networks available for this dApp
+      </wui-text>
+      <wui-link @click=${this.onNetworkHelp.bind(this)}>
+        <wui-icon size="sm" color="accent-primary" slot="iconLeft" name="helpCircle"></wui-icon>
+        What is a network
+      </wui-link>
+    </wui-flex>`}onNetworkHelp(){f.sendEvent({type:"track",event:"CLICK_NETWORK_HELP"}),p.push("WhatIsANetwork")}getWrapper(){return this.shadowRoot?.querySelector("div.container")}};vi.styles=[fi],bi([H()],vi.prototype,"status",void 0),bi([H()],vi.prototype,"view",void 0),vi=bi([M("w3m-footer")],vi);var ki=T`
+  :host {
+    display: block;
+    width: inherit;
+  }
+`,xi=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Ti=class extends S{constructor(){super(),this.unsubscribe=[],this.viewState=p.state.view,this.history=p.state.history.join(","),this.unsubscribe.push(p.subscribeKey("view",(()=>{this.history=p.state.history.join(","),document.documentElement.style.setProperty("--apkt-duration-dynamic","var(--apkt-durations-lg)")})))}disconnectedCallback(){this.unsubscribe.forEach((e=>e())),document.documentElement.style.setProperty("--apkt-duration-dynamic","0s")}render(){return I`${this.templatePageContainer()}`}templatePageContainer(){return I`<w3m-router-container
+      history=${this.history}
+      .setView=${()=>{this.viewState=p.state.view}}
+    >
+      ${this.viewTemplate(this.viewState)}
+    </w3m-router-container>`}viewTemplate(e){switch(e){case"AccountSettings":return I`<w3m-account-settings-view></w3m-account-settings-view>`;case"Account":return I`<w3m-account-view></w3m-account-view>`;case"AllWallets":return I`<w3m-all-wallets-view></w3m-all-wallets-view>`;case"ApproveTransaction":return I`<w3m-approve-transaction-view></w3m-approve-transaction-view>`;case"BuyInProgress":return I`<w3m-buy-in-progress-view></w3m-buy-in-progress-view>`;case"ChooseAccountName":return I`<w3m-choose-account-name-view></w3m-choose-account-name-view>`;case"Connect":default:return I`<w3m-connect-view></w3m-connect-view>`;case"Create":return I`<w3m-connect-view walletGuide="explore"></w3m-connect-view>`;case"ConnectingWalletConnect":return I`<w3m-connecting-wc-view></w3m-connecting-wc-view>`;case"ConnectingWalletConnectBasic":return I`<w3m-connecting-wc-basic-view></w3m-connecting-wc-basic-view>`;case"ConnectingExternal":return I`<w3m-connecting-external-view></w3m-connecting-external-view>`;case"ConnectingSiwe":return I`<w3m-connecting-siwe-view></w3m-connecting-siwe-view>`;case"ConnectWallets":return I`<w3m-connect-wallets-view></w3m-connect-wallets-view>`;case"ConnectSocials":return I`<w3m-connect-socials-view></w3m-connect-socials-view>`;case"ConnectingSocial":return I`<w3m-connecting-social-view></w3m-connecting-social-view>`;case"DataCapture":return I`<w3m-data-capture-view></w3m-data-capture-view>`;case"DataCaptureOtpConfirm":return I`<w3m-data-capture-otp-confirm-view></w3m-data-capture-otp-confirm-view>`;case"Downloads":return I`<w3m-downloads-view></w3m-downloads-view>`;case"EmailLogin":return I`<w3m-email-login-view></w3m-email-login-view>`;case"EmailVerifyOtp":return I`<w3m-email-verify-otp-view></w3m-email-verify-otp-view>`;case"EmailVerifyDevice":return I`<w3m-email-verify-device-view></w3m-email-verify-device-view>`;case"GetWallet":return I`<w3m-get-wallet-view></w3m-get-wallet-view>`;case"Networks":return I`<w3m-networks-view></w3m-networks-view>`;case"SwitchNetwork":return I`<w3m-network-switch-view></w3m-network-switch-view>`;case"ProfileWallets":return I`<w3m-profile-wallets-view></w3m-profile-wallets-view>`;case"Transactions":return I`<w3m-transactions-view></w3m-transactions-view>`;case"OnRampProviders":return I`<w3m-onramp-providers-view></w3m-onramp-providers-view>`;case"OnRampTokenSelect":return I`<w3m-onramp-token-select-view></w3m-onramp-token-select-view>`;case"OnRampFiatSelect":return I`<w3m-onramp-fiat-select-view></w3m-onramp-fiat-select-view>`;case"UpgradeEmailWallet":return I`<w3m-upgrade-wallet-view></w3m-upgrade-wallet-view>`;case"UpdateEmailWallet":return I`<w3m-update-email-wallet-view></w3m-update-email-wallet-view>`;case"UpdateEmailPrimaryOtp":return I`<w3m-update-email-primary-otp-view></w3m-update-email-primary-otp-view>`;case"UpdateEmailSecondaryOtp":return I`<w3m-update-email-secondary-otp-view></w3m-update-email-secondary-otp-view>`;case"UnsupportedChain":return I`<w3m-unsupported-chain-view></w3m-unsupported-chain-view>`;case"Swap":return I`<w3m-swap-view></w3m-swap-view>`;case"SwapSelectToken":return I`<w3m-swap-select-token-view></w3m-swap-select-token-view>`;case"SwapPreview":return I`<w3m-swap-preview-view></w3m-swap-preview-view>`;case"WalletSend":return I`<w3m-wallet-send-view></w3m-wallet-send-view>`;case"WalletSendSelectToken":return I`<w3m-wallet-send-select-token-view></w3m-wallet-send-select-token-view>`;case"WalletSendPreview":return I`<w3m-wallet-send-preview-view></w3m-wallet-send-preview-view>`;case"WalletSendConfirmed":return I`<w3m-send-confirmed-view></w3m-send-confirmed-view>`;case"WhatIsABuy":return I`<w3m-what-is-a-buy-view></w3m-what-is-a-buy-view>`;case"WalletReceive":return I`<w3m-wallet-receive-view></w3m-wallet-receive-view>`;case"WalletCompatibleNetworks":return I`<w3m-wallet-compatible-networks-view></w3m-wallet-compatible-networks-view>`;case"WhatIsAWallet":return I`<w3m-what-is-a-wallet-view></w3m-what-is-a-wallet-view>`;case"ConnectingMultiChain":return I`<w3m-connecting-multi-chain-view></w3m-connecting-multi-chain-view>`;case"WhatIsANetwork":return I`<w3m-what-is-a-network-view></w3m-what-is-a-network-view>`;case"ConnectingFarcaster":return I`<w3m-connecting-farcaster-view></w3m-connecting-farcaster-view>`;case"SwitchActiveChain":return I`<w3m-switch-active-chain-view></w3m-switch-active-chain-view>`;case"RegisterAccountName":return I`<w3m-register-account-name-view></w3m-register-account-name-view>`;case"RegisterAccountNameSuccess":return I`<w3m-register-account-name-success-view></w3m-register-account-name-success-view>`;case"SmartSessionCreated":return I`<w3m-smart-session-created-view></w3m-smart-session-created-view>`;case"SmartSessionList":return I`<w3m-smart-session-list-view></w3m-smart-session-list-view>`;case"SIWXSignMessage":return I`<w3m-siwx-sign-message-view></w3m-siwx-sign-message-view>`;case"Pay":return I`<w3m-pay-view></w3m-pay-view>`;case"PayLoading":return I`<w3m-pay-loading-view></w3m-pay-loading-view>`;case"PayQuote":return I`<w3m-pay-quote-view></w3m-pay-quote-view>`;case"FundWallet":return I`<w3m-fund-wallet-view></w3m-fund-wallet-view>`;case"PayWithExchange":return I`<w3m-deposit-from-exchange-view></w3m-deposit-from-exchange-view>`;case"PayWithExchangeSelectAsset":return I`<w3m-deposit-from-exchange-select-asset-view></w3m-deposit-from-exchange-select-asset-view>`;case"UsageExceeded":return I`<w3m-usage-exceeded-view></w3m-usage-exceeded-view>`;case"SmartAccountSettings":return I`<w3m-smart-account-settings-view></w3m-smart-account-settings-view>`}}};Ti.styles=[ki],xi([H()],Ti.prototype,"viewState",void 0),xi([H()],Ti.prototype,"history",void 0),Ti=xi([M("w3m-router")],Ti);var Ai=T`
+  :host {
+    z-index: ${({tokens:e})=>e.core.zIndex};
+    display: block;
+    backface-visibility: hidden;
+    will-change: opacity;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    opacity: 0;
+    background-color: ${({tokens:e})=>e.theme.overlay};
+    backdrop-filter: blur(0px);
+    transition:
+      opacity ${({durations:e})=>e.lg} ${({easings:e})=>e["ease-out-power-2"]},
+      backdrop-filter ${({durations:e})=>e.lg}
+        ${({easings:e})=>e["ease-out-power-2"]};
+    will-change: opacity;
+  }
+
+  :host(.open) {
+    opacity: 1;
+    backdrop-filter: blur(8px);
+  }
+
+  :host(.appkit-modal) {
+    position: relative;
+    pointer-events: unset;
+    background: none;
+    width: 100%;
+    opacity: 1;
+  }
+
+  wui-card {
+    max-width: var(--apkt-modal-width);
+    width: 100%;
+    position: relative;
+    outline: none;
+    transform: translateY(4px);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);
+    transition:
+      transform ${({durations:e})=>e.lg}
+        ${({easings:e})=>e["ease-out-power-2"]},
+      border-radius ${({durations:e})=>e.lg}
+        ${({easings:e})=>e["ease-out-power-1"]},
+      background-color ${({durations:e})=>e.lg}
+        ${({easings:e})=>e["ease-out-power-1"]},
+      box-shadow ${({durations:e})=>e.lg}
+        ${({easings:e})=>e["ease-out-power-1"]};
+    will-change: border-radius, background-color, transform, box-shadow;
+    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    padding: var(--local-modal-padding);
+    box-sizing: border-box;
+  }
+
+  :host(.open) wui-card {
+    transform: translateY(0px);
+  }
+
+  wui-card::before {
+    z-index: 1;
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+    transition: box-shadow ${({durations:e})=>e.lg}
+      ${({easings:e})=>e["ease-out-power-2"]};
+    transition-delay: ${({durations:e})=>e.md};
+    will-change: box-shadow;
+  }
+
+  :host([data-mobile-fullscreen='true']) wui-card::before {
+    border-radius: 0px;
+  }
+
+  :host([data-border='true']) wui-card::before {
+    box-shadow: inset 0px 0px 0px 4px ${({tokens:e})=>e.theme.foregroundSecondary};
+  }
+
+  :host([data-border='false']) wui-card::before {
+    box-shadow: inset 0px 0px 0px 1px ${({tokens:e})=>e.theme.borderPrimaryDark};
+  }
+
+  :host([data-border='true']) wui-card {
+    animation:
+      fade-in ${({durations:e})=>e.lg} ${({easings:e})=>e["ease-out-power-2"]},
+      card-background-border var(--apkt-duration-dynamic)
+        ${({easings:e})=>e["ease-out-power-2"]};
+    animation-fill-mode: backwards, both;
+    animation-delay: var(--apkt-duration-dynamic);
+  }
+
+  :host([data-border='false']) wui-card {
+    animation:
+      fade-in ${({durations:e})=>e.lg} ${({easings:e})=>e["ease-out-power-2"]},
+      card-background-default var(--apkt-duration-dynamic)
+        ${({easings:e})=>e["ease-out-power-2"]};
+    animation-fill-mode: backwards, both;
+    animation-delay: 0s;
+  }
+
+  :host(.appkit-modal) wui-card {
+    max-width: var(--apkt-modal-width);
+  }
+
+  wui-card[shake='true'] {
+    animation:
+      fade-in ${({durations:e})=>e.lg} ${({easings:e})=>e["ease-out-power-2"]},
+      w3m-shake ${({durations:e})=>e.xl}
+        ${({easings:e})=>e["ease-out-power-2"]};
+  }
+
+  wui-flex {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (max-height: 700px) and (min-width: 431px) {
+    wui-flex {
+      align-items: flex-start;
+    }
+
+    wui-card {
+      margin: var(--apkt-spacing-6) 0px;
+    }
+  }
+
+  @media (max-width: 430px) {
+    :host([data-mobile-fullscreen='true']) {
+      height: 100dvh;
+    }
+    :host([data-mobile-fullscreen='true']) wui-flex {
+      align-items: stretch;
+    }
+    :host([data-mobile-fullscreen='true']) wui-card {
+      max-width: 100%;
+      height: 100%;
+      border-radius: 0;
+      border: none;
+    }
+    :host(:not([data-mobile-fullscreen='true'])) wui-flex {
+      align-items: flex-end;
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card {
+      max-width: 100%;
+      border-bottom: none;
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card[data-embedded='true'] {
+      border-bottom-left-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+      border-bottom-right-radius: clamp(0px, var(--apkt-borderRadius-8), 44px);
+    }
+
+    :host(:not([data-mobile-fullscreen='true'])) wui-card:not([data-embedded='true']) {
+      border-bottom-left-radius: 0px;
+      border-bottom-right-radius: 0px;
+    }
+
+    wui-card[shake='true'] {
+      animation: w3m-shake 0.5s ${({easings:e})=>e["ease-out-power-2"]};
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      transform: scale(0.99) translateY(4px);
+    }
+    100% {
+      transform: scale(1) translateY(0);
+    }
+  }
+
+  @keyframes w3m-shake {
+    0% {
+      transform: scale(1) rotate(0deg);
+    }
+    20% {
+      transform: scale(1) rotate(-1deg);
+    }
+    40% {
+      transform: scale(1) rotate(1.5deg);
+    }
+    60% {
+      transform: scale(1) rotate(-1.5deg);
+    }
+    80% {
+      transform: scale(1) rotate(1deg);
+    }
+    100% {
+      transform: scale(1) rotate(0deg);
+    }
+  }
+
+  @keyframes card-background-border {
+    from {
+      background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    }
+    to {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    }
+  }
+
+  @keyframes card-background-default {
+    from {
+      background-color: ${({tokens:e})=>e.theme.foregroundSecondary};
+    }
+    to {
+      background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    }
+  }
+`,Si=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};const Ii="scroll-lock",Ei={PayWithExchange:"0",PayWithExchangeSelectAsset:"0",Pay:"0",PayQuote:"0",PayLoading:"0"};class Pi extends S{constructor(){super(),this.unsubscribe=[],this.abortController=void 0,this.hasPrefetched=!1,this.enableEmbedded=_.state.enableEmbedded,this.open=k.state.open,this.caipAddress=r.state.activeCaipAddress,this.caipNetwork=r.state.activeCaipNetwork,this.shake=k.state.shake,this.filterByNamespace=l.state.filterByNamespace,this.padding=L.spacing[1],this.mobileFullScreen=_.state.enableMobileFullScreen,this.initializeTheming(),W.prefetchAnalyticsConfig(),this.unsubscribe.push(k.subscribeKey("open",(e=>e?this.onOpen():this.onClose())),k.subscribeKey("shake",(e=>this.shake=e)),r.subscribeKey("activeCaipNetwork",(e=>this.onNewNetwork(e))),r.subscribeKey("activeCaipAddress",(e=>this.onNewAddress(e))),_.subscribeKey("enableEmbedded",(e=>this.enableEmbedded=e)),l.subscribeKey("filterByNamespace",(e=>{this.filterByNamespace===e||r.getAccountData(e)?.caipAddress||(W.fetchRecommendedWallets(),this.filterByNamespace=e)})),p.subscribeKey("view",(()=>{this.dataset.border=ui.hasFooter()?"true":"false",this.padding=Ei[p.state.view]??L.spacing[1]})))}firstUpdated(){if(this.dataset.border=ui.hasFooter()?"true":"false",this.mobileFullScreen&&this.setAttribute("data-mobile-fullscreen","true"),this.caipAddress){if(this.enableEmbedded)return k.close(),void this.prefetch();this.onNewAddress(this.caipAddress)}this.open&&this.onOpen(),this.enableEmbedded&&this.prefetch()}disconnectedCallback(){this.unsubscribe.forEach((e=>e())),this.onRemoveKeyboardListener()}render(){return this.style.setProperty("--local-modal-padding",this.padding),this.enableEmbedded?I`${this.contentTemplate()}
+        <w3m-tooltip></w3m-tooltip> `:this.open?I`
+          <wui-flex @click=${this.onOverlayClick.bind(this)} data-testid="w3m-modal-overlay">
+            ${this.contentTemplate()}
+          </wui-flex>
+          <w3m-tooltip></w3m-tooltip>
+        `:null}contentTemplate(){return I` <wui-card
+      shake="${this.shake}"
+      data-embedded="${G(this.enableEmbedded)}"
+      role="alertdialog"
+      aria-modal="true"
+      tabindex="0"
+      data-testid="w3m-modal-card"
+    >
+      <w3m-header></w3m-header>
+      <w3m-router></w3m-router>
+      <w3m-footer></w3m-footer>
+      <w3m-snackbar></w3m-snackbar>
+      <w3m-alertbar></w3m-alertbar>
+    </wui-card>`}async onOverlayClick(e){if(e.target===e.currentTarget){if(this.mobileFullScreen)return;await this.handleClose()}}async handleClose(){await ne.safeClose()}initializeTheming(){const{themeVariables:e,themeMode:t}=j.state,i=K.getColorTheme(t);F(e,i)}onClose(){this.open=!1,this.classList.remove("open"),this.onScrollUnlock(),u.hide(),this.onRemoveKeyboardListener()}onOpen(){this.open=!0,this.classList.add("open"),this.onScrollLock(),this.onAddKeyboardListener()}onScrollLock(){const e=document.createElement("style");e.dataset.w3m=Ii,e.textContent="\n      body {\n        touch-action: none;\n        overflow: hidden;\n        overscroll-behavior: contain;\n      }\n      w3m-modal {\n        pointer-events: auto;\n      }\n    ",document.head.appendChild(e)}onScrollUnlock(){const e=document.head.querySelector(`style[data-w3m="${Ii}"]`);e&&e.remove()}onAddKeyboardListener(){this.abortController=new AbortController;const e=this.shadowRoot?.querySelector("wui-card");e?.focus(),window.addEventListener("keydown",(t=>{if("Escape"===t.key)this.handleClose();else if("Tab"===t.key){const{tagName:i}=t.target;!i||i.includes("W3M-")||i.includes("WUI-")||e?.focus()}}),this.abortController)}onRemoveKeyboardListener(){this.abortController?.abort(),this.abortController=void 0}async onNewAddress(e){const t=r.state.isSwitchingNamespace,i="ProfileWallets"===p.state.view;!e&&!t&&!i&&k.close(),await x.initializeIfEnabled(e),this.caipAddress=e,r.setIsSwitchingNamespace(!1)}onNewNetwork(e){const t=this.caipNetwork,i=t?.caipNetworkId?.toString(),o=e?.caipNetworkId?.toString(),a=i!==o,n="UnsupportedChain"===p.state.view,r=k.state.open;let s=!1;this.enableEmbedded&&"SwitchNetwork"===p.state.view&&(s=!0),a&&ie.resetState(),r&&n&&(s=!0),s&&"SIWXSignMessage"!==p.state.view&&p.goBack(),this.caipNetwork=e}prefetch(){this.hasPrefetched||(W.prefetch(),W.fetchWalletsByPage({page:1}),this.hasPrefetched=!0)}}Pi.styles=Ai,Si([V({type:Boolean})],Pi.prototype,"enableEmbedded",void 0),Si([H()],Pi.prototype,"open",void 0),Si([H()],Pi.prototype,"caipAddress",void 0),Si([H()],Pi.prototype,"caipNetwork",void 0),Si([H()],Pi.prototype,"shake",void 0),Si([H()],Pi.prototype,"filterByNamespace",void 0),Si([H()],Pi.prototype,"padding",void 0),Si([H()],Pi.prototype,"mobileFullScreen",void 0);let Ci=class extends Pi{};Ci=Si([M("w3m-modal")],Ci);let $i=class extends Pi{};$i=Si([M("appkit-modal")],$i);var Ni=T`
+  .icon-box {
+    width: 64px;
+    height: 64px;
+    border-radius: ${({borderRadius:e})=>e[5]};
+    background-color: ${({colors:e})=>e.semanticError010};
+  }
+`,Ri=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Oi=class extends S{constructor(){super()}render(){return I`
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        gap="4"
+        .padding="${["1","3","4","3"]}"
+      >
+        <wui-flex justifyContent="center" alignItems="center" class="icon-box">
+          <wui-icon size="xxl" color="error" name="warningCircle"></wui-icon>
+        </wui-flex>
+
+        <wui-text variant="lg-medium" color="primary" align="center">
+          The app isn't responding as expected
+        </wui-text>
+        <wui-text variant="md-regular" color="secondary" align="center">
+          Try again or reach out to the app team for help.
+        </wui-text>
+
+        <wui-button
+          variant="neutral-secondary"
+          size="md"
+          @click=${this.onTryAgainClick.bind(this)}
+          data-testid="w3m-usage-exceeded-button"
+        >
+          <wui-icon color="inherit" slot="iconLeft" name="refresh"></wui-icon>
+          Try Again
+        </wui-button>
+      </wui-flex>
+    `}onTryAgainClick(){p.goBack()}};Oi.styles=Ni,Oi=Ri([M("w3m-usage-exceeded-view")],Oi);var _i=T`
+  :host {
+    width: 100%;
+  }
+`,Ui=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let Di=class extends S{constructor(){super(...arguments),this.hasImpressionSent=!1,this.walletImages=[],this.imageSrc="",this.name="",this.size="md",this.tabIdx=void 0,this.disabled=!1,this.showAllWallets=!1,this.loading=!1,this.loadingSpinnerColor="accent-100",this.rdnsId="",this.displayIndex=void 0,this.walletRank=void 0,this.namespaces=[]}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback(),this.cleanupIntersectionObserver()}updated(e){super.updated(e),(e.has("name")||e.has("imageSrc")||e.has("walletRank"))&&(this.hasImpressionSent=!1);e.has("walletRank")&&this.walletRank&&!this.intersectionObserver&&this.setupIntersectionObserver()}setupIntersectionObserver(){this.intersectionObserver=new IntersectionObserver((e=>{e.forEach((e=>{!e.isIntersecting||this.loading||this.hasImpressionSent||this.sendImpressionEvent()}))}),{threshold:.1}),this.intersectionObserver.observe(this)}cleanupIntersectionObserver(){this.intersectionObserver&&(this.intersectionObserver.disconnect(),this.intersectionObserver=void 0)}sendImpressionEvent(){this.name&&!this.hasImpressionSent&&this.walletRank&&(this.hasImpressionSent=!0,(this.rdnsId||this.name)&&f.sendWalletImpressionEvent({name:this.name,walletRank:this.walletRank,rdnsId:this.rdnsId,view:p.state.view,displayIndex:this.displayIndex}))}handleGetWalletNamespaces(){return Object.keys(q.state.adapters).length>1?this.namespaces:[]}render(){return I`
+      <wui-list-wallet
+        .walletImages=${this.walletImages}
+        imageSrc=${G(this.imageSrc)}
+        name=${this.name}
+        size=${G(this.size)}
+        tagLabel=${G(this.tagLabel)}
+        .tagVariant=${this.tagVariant}
+        .walletIcon=${this.walletIcon}
+        .tabIdx=${this.tabIdx}
+        .disabled=${this.disabled}
+        .showAllWallets=${this.showAllWallets}
+        .loading=${this.loading}
+        loadingSpinnerColor=${this.loadingSpinnerColor}
+        .namespaces=${this.handleGetWalletNamespaces()}
+      ></wui-list-wallet>
+    `}};Di.styles=_i,Ui([V({type:Array})],Di.prototype,"walletImages",void 0),Ui([V()],Di.prototype,"imageSrc",void 0),Ui([V()],Di.prototype,"name",void 0),Ui([V()],Di.prototype,"size",void 0),Ui([V()],Di.prototype,"tagLabel",void 0),Ui([V()],Di.prototype,"tagVariant",void 0),Ui([V()],Di.prototype,"walletIcon",void 0),Ui([V()],Di.prototype,"tabIdx",void 0),Ui([V({type:Boolean})],Di.prototype,"disabled",void 0),Ui([V({type:Boolean})],Di.prototype,"showAllWallets",void 0),Ui([V({type:Boolean})],Di.prototype,"loading",void 0),Ui([V({type:String})],Di.prototype,"loadingSpinnerColor",void 0),Ui([V()],Di.prototype,"rdnsId",void 0),Ui([V()],Di.prototype,"displayIndex",void 0),Ui([V()],Di.prototype,"walletRank",void 0),Ui([V({type:Array})],Di.prototype,"namespaces",void 0),Di=Ui([M("w3m-list-wallet")],Di);var Li=T`
+  :host {
+    --local-duration-height: 0s;
+    --local-duration: ${({durations:e})=>e.lg};
+    --local-transition: ${({easings:e})=>e["ease-out-power-2"]};
+  }
+
+  .container {
+    display: block;
+    overflow: hidden;
+    overflow: hidden;
+    position: relative;
+    height: var(--local-container-height);
+    transition: height var(--local-duration-height) var(--local-transition);
+    will-change: height, padding-bottom;
+  }
+
+  .container[data-mobile-fullscreen='true'] {
+    overflow: scroll;
+  }
+
+  .page {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: auto;
+    width: inherit;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    background-color: ${({tokens:e})=>e.theme.backgroundPrimary};
+    border-bottom-left-radius: var(--local-border-bottom-radius);
+    border-bottom-right-radius: var(--local-border-bottom-radius);
+    transition: border-bottom-left-radius var(--local-duration) var(--local-transition);
+  }
+
+  .page[data-mobile-fullscreen='true'] {
+    height: 100%;
+  }
+
+  .page-content {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+  }
+
+  .footer {
+    height: var(--apkt-footer-height);
+  }
+
+  div.page[view-direction^='prev-'] .page-content {
+    animation:
+      slide-left-out var(--local-duration) forwards var(--local-transition),
+      slide-left-in var(--local-duration) forwards var(--local-transition);
+    animation-delay: 0ms, var(--local-duration, ${({durations:e})=>e.lg});
+  }
+
+  div.page[view-direction^='next-'] .page-content {
+    animation:
+      slide-right-out var(--local-duration) forwards var(--local-transition),
+      slide-right-in var(--local-duration) forwards var(--local-transition);
+    animation-delay: 0ms, var(--local-duration, ${({durations:e})=>e.lg});
+  }
+
+  @keyframes slide-left-out {
+    from {
+      transform: translateX(0px) scale(1);
+      opacity: 1;
+      filter: blur(0px);
+    }
+    to {
+      transform: translateX(8px) scale(0.99);
+      opacity: 0;
+      filter: blur(4px);
+    }
+  }
+
+  @keyframes slide-left-in {
+    from {
+      transform: translateX(-8px) scale(0.99);
+      opacity: 0;
+      filter: blur(4px);
+    }
+    to {
+      transform: translateX(0) translateY(0) scale(1);
+      opacity: 1;
+      filter: blur(0px);
+    }
+  }
+
+  @keyframes slide-right-out {
+    from {
+      transform: translateX(0px) scale(1);
+      opacity: 1;
+      filter: blur(0px);
+    }
+    to {
+      transform: translateX(-8px) scale(0.99);
+      opacity: 0;
+      filter: blur(4px);
+    }
+  }
+
+  @keyframes slide-right-in {
+    from {
+      transform: translateX(8px) scale(0.99);
+      opacity: 0;
+      filter: blur(4px);
+    }
+    to {
+      transform: translateX(0) translateY(0) scale(1);
+      opacity: 1;
+      filter: blur(0px);
+    }
+  }
+`,Bi=function(e,t,i,o){var a,n=arguments.length,r=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(r=(n<3?a(r):n>3?a(t,i,r):a(t,i))||r);return n>3&&r&&Object.defineProperty(t,i,r),r};let zi=class extends S{constructor(){super(...arguments),this.resizeObserver=void 0,this.transitionDuration="0.15s",this.transitionFunction="",this.history="",this.view="",this.setView=void 0,this.viewDirection="",this.historyState="",this.previousHeight="0px",this.mobileFullScreen=_.state.enableMobileFullScreen,this.onViewportResize=()=>{this.updateContainerHeight()}}updated(e){if(e.has("history")){const e=this.history;""!==this.historyState&&this.historyState!==e&&this.onViewChange(e)}e.has("transitionDuration")&&this.style.setProperty("--local-duration",this.transitionDuration),e.has("transitionFunction")&&this.style.setProperty("--local-transition",this.transitionFunction)}firstUpdated(){this.transitionFunction&&this.style.setProperty("--local-transition",this.transitionFunction),this.style.setProperty("--local-duration",this.transitionDuration),this.historyState=this.history,this.resizeObserver=new ResizeObserver((e=>{for(const t of e)if(t.target===this.getWrapper()){let e=t.contentRect.height;const i=parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--apkt-footer-height")||"0");if(this.mobileFullScreen){e=(window.visualViewport?.height||window.innerHeight)-this.getHeaderHeight()-i,this.style.setProperty("--local-border-bottom-radius","0px")}else{e=e+i,this.style.setProperty("--local-border-bottom-radius",i?"var(--apkt-borderRadius-5)":"0px")}this.style.setProperty("--local-container-height",`${e}px`),"0px"!==this.previousHeight&&this.style.setProperty("--local-duration-height",this.transitionDuration),this.previousHeight=`${e}px`}})),this.resizeObserver.observe(this.getWrapper()),this.updateContainerHeight(),window.addEventListener("resize",this.onViewportResize),window.visualViewport?.addEventListener("resize",this.onViewportResize)}disconnectedCallback(){const e=this.getWrapper();e&&this.resizeObserver&&this.resizeObserver.unobserve(e),window.removeEventListener("resize",this.onViewportResize),window.visualViewport?.removeEventListener("resize",this.onViewportResize)}render(){return I`
+      <div class="container" data-mobile-fullscreen="${G(this.mobileFullScreen)}">
+        <div
+          class="page"
+          data-mobile-fullscreen="${G(this.mobileFullScreen)}"
+          view-direction="${this.viewDirection}"
+        >
+          <div class="page-content">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `}onViewChange(e){const t=e.split(",").filter(Boolean),i=this.historyState.split(",").filter(Boolean),o=i.length,a=t.length,n=t[t.length-1]||"",r=K.cssDurationToNumber(this.transitionDuration);let s="";a>o?s="next":a<o?s="prev":a===o&&t[a-1]!==i[o-1]&&(s="next"),this.viewDirection=`${s}-${n}`,setTimeout((()=>{this.historyState=e,this.setView?.(n)}),r),setTimeout((()=>{this.viewDirection=""}),2*r)}getWrapper(){return this.shadowRoot?.querySelector("div.page")}updateContainerHeight(){const e=this.getWrapper();if(!e)return;const t=parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--apkt-footer-height")||"0");let i=0;if(this.mobileFullScreen){i=(window.visualViewport?.height||window.innerHeight)-this.getHeaderHeight()-t,this.style.setProperty("--local-border-bottom-radius","0px")}else i=e.getBoundingClientRect().height+t,this.style.setProperty("--local-border-bottom-radius",t?"var(--apkt-borderRadius-5)":"0px");this.style.setProperty("--local-container-height",`${i}px`),"0px"!==this.previousHeight&&this.style.setProperty("--local-duration-height",this.transitionDuration),this.previousHeight=`${i}px`}getHeaderHeight(){return 60}};zi.styles=[Li],Bi([V({type:String})],zi.prototype,"transitionDuration",void 0),Bi([V({type:String})],zi.prototype,"transitionFunction",void 0),Bi([V({type:String})],zi.prototype,"history",void 0),Bi([V({type:String})],zi.prototype,"view",void 0),Bi([V({attribute:!1})],zi.prototype,"setView",void 0),Bi([H()],zi.prototype,"viewDirection",void 0),Bi([H()],zi.prototype,"historyState",void 0),Bi([H()],zi.prototype,"previousHeight",void 0),Bi([H()],zi.prototype,"mobileFullScreen",void 0),zi=Bi([M("w3m-router-container")],zi);export{$i as AppKitModal,Di as W3mListWallet,Ci as W3mModal,Pi as W3mModalBase,zi as W3mRouterContainer,Oi as W3mUsageExceededView};