import{j as e,r as t,k as i,l as n,m as s,q as a,o,a9 as r,aa as c,a as u,ab as l,ac as d,ad as h,O as p,N as f,ae as w,C as m,p as g,J as x,E as y,S as b,y as v,M as k,s as $,i as I,z as E,R as A,v as N,n as T}from"./p-BxEPsDRj.js";import{n as C,c as S,r as R,U as P,b as _}from"./p-CrMmJdZ6.js";import{o as j}from"./p-zNe_7rLp.js";import"./p-CG_zIdXa.js";import"./p-DntCYpai.js";import"./p-CbOrugAV.js";import"./p-QEmqEl1n.js";import"./p-WZF-tHaR.js";import"./p-4_J16YIF.js";import"./p-CUUFsMGb.js";import"./p-08zq6pz3.js";import{M as O}from"./p-wMYIvr92.js";var U=e`
  :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;
  }
`;var z=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};let D=class e extends n{constructor(){super(...arguments);this.icon="card";this.variant="primary";this.type="accent";this.size="md";this.iconSize=undefined;this.fullWidth=false;this.disabled=false}render(){return s`<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=${j(this.iconSize)}></wui-icon>
    </button>`}};D.styles=[t,i,U];z([C()],D.prototype,"icon",void 0);z([C()],D.prototype,"variant",void 0);z([C()],D.prototype,"type",void 0);z([C()],D.prototype,"size",void 0);z([C()],D.prototype,"iconSize",void 0);z([C({type:Boolean})],D.prototype,"fullWidth",void 0);z([C({type:Boolean})],D.prototype,"disabled",void 0);D=z([S("wui-icon-button")],D);const L={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"};const B={[L.INVALID_PAYMENT_CONFIG]:"Invalid payment configuration",[L.INVALID_RECIPIENT]:"Invalid recipient address",[L.INVALID_ASSET]:"Invalid asset specified",[L.INVALID_AMOUNT]:"Invalid payment amount",[L.INVALID_RECIPIENT_ADDRESS_FOR_ASSET]:"Invalid recipient address for the asset selected",[L.UNKNOWN_ERROR]:"Unknown payment error occurred",[L.UNABLE_TO_INITIATE_PAYMENT]:"Unable to initiate payment",[L.INVALID_CHAIN_NAMESPACE]:"Invalid chain namespace",[L.GENERIC_PAYMENT_ERROR]:"Unable to process payment",[L.UNABLE_TO_GET_EXCHANGES]:"Unable to get exchanges",[L.ASSET_NOT_SUPPORTED]:"Asset not supported by the selected exchange",[L.UNABLE_TO_GET_PAY_URL]:"Unable to get payment URL",[L.UNABLE_TO_GET_BUY_STATUS]:"Unable to get buy status",[L.UNABLE_TO_GET_TOKEN_BALANCES]:"Unable to get token balances",[L.UNABLE_TO_GET_QUOTE]:"Unable to get quote. Please choose a different token",[L.UNABLE_TO_GET_QUOTE_STATUS]:"Unable to get quote status"};class F extends Error{get message(){return B[this.code]}constructor(e,t){super(B[e]);this.name="AppKitPayError";this.code=e;this.details=t;if(Error.captureStackTrace){Error.captureStackTrace(this,F)}}}const q="https://rpc.walletconnect.org/v1/json-rpc";const W="reown_test";function G(){const{chainNamespace:e}=c.parseCaipNetworkId($e.state.paymentAsset.network);const t=u.isAddress($e.state.recipient,e);if(!t){throw new F(L.INVALID_RECIPIENT_ADDRESS_FOR_ASSET,`Provide valid recipient address for namespace "${e}"`)}}async function M(e,t,i){if(t!==a.CHAIN.EVM){throw new F(L.INVALID_CHAIN_NAMESPACE)}if(!i.fromAddress){throw new F(L.INVALID_PAYMENT_CONFIG,"fromAddress is required for native EVM payments.")}const n=typeof i.amount==="string"?parseFloat(i.amount):i.amount;if(isNaN(n)){throw new F(L.INVALID_PAYMENT_CONFIG)}const s=e.metadata?.decimals??18;const r=o.parseUnits(n.toString(),s);if(typeof r!=="bigint"){throw new F(L.GENERIC_PAYMENT_ERROR)}const c=await o.sendTransaction({chainNamespace:t,to:i.recipient,address:i.fromAddress,value:r,data:"0x"});return c??undefined}async function Y(e,t){if(!t.fromAddress){throw new F(L.INVALID_PAYMENT_CONFIG,"fromAddress is required for ERC20 EVM payments.")}const i=e.asset;const n=t.recipient;const s=Number(e.metadata.decimals);const c=o.parseUnits(t.amount.toString(),s);if(c===undefined){throw new F(L.GENERIC_PAYMENT_ERROR)}const u=await o.writeContract({fromAddress:t.fromAddress,tokenAddress:i,args:[n,c],method:"transfer",abi:r.getERC20Abi(i),chainNamespace:a.CHAIN.EVM});return u??undefined}async function Q(e,t){if(e!==a.CHAIN.SOLANA){throw new F(L.INVALID_CHAIN_NAMESPACE)}if(!t.fromAddress){throw new F(L.INVALID_PAYMENT_CONFIG,"fromAddress is required for Solana payments.")}const i=typeof t.amount==="string"?parseFloat(t.amount):t.amount;if(isNaN(i)||i<=0){throw new F(L.INVALID_PAYMENT_CONFIG,"Invalid payment amount.")}try{const n=l.getProvider(e);if(!n){throw new F(L.GENERIC_PAYMENT_ERROR,"No Solana provider available.")}const s=await o.sendTransaction({chainNamespace:a.CHAIN.SOLANA,to:t.recipient,value:i,tokenMint:t.tokenMint});if(!s){throw new F(L.GENERIC_PAYMENT_ERROR,"Transaction failed.")}return s}catch(e){if(e instanceof F){throw e}throw new F(L.GENERIC_PAYMENT_ERROR,`Solana payment failed: ${e}`)}}async function V({sourceToken:e,toToken:t,amount:i,recipient:n}){const s=o.parseUnits(i,e.metadata.decimals);const a=o.parseUnits(i,t.metadata.decimals);return Promise.resolve({type:ye,origin:{amount:s?.toString()??"0",currency:e},destination:{amount:a?.toString()??"0",currency:t},fees:[{id:"service",label:"Service Fee",amount:"0",currency:t}],steps:[{requestId:ye,type:"deposit",deposit:{amount:s?.toString()??"0",currency:e.asset,receiver:n}}],timeInSeconds:6})}function H(e){if(!e){return null}const t=e.steps[0];if(!t||t.type!==be){return null}return t}function K(e,t=0){if(!e){return[]}const i=e.steps.filter((e=>e.type===ve));const n=i.filter(((e,i)=>{const n=i+1;return n>t}));return i.length>0&&i.length<3?n:[]}const X=new d({baseUrl:u.getApiUrl(),clientId:null});class J extends Error{}function Z(){const e=p.getSnapshot().projectId;return`${q}?projectId=${e}`}function ee(){const{projectId:e,sdkType:t,sdkVersion:i}=p.state;return{projectId:e,st:t||"appkit",sv:i||"html-wagmi-4.2.2"}}async function te(e,t){const i=Z();const{sdkType:n,sdkVersion:s,projectId:a}=p.getSnapshot();const o={jsonrpc:"2.0",id:1,method:e,params:{...t||{},st:n,sv:s,projectId:a}};const r=await fetch(i,{method:"POST",body:JSON.stringify(o),headers:{"Content-Type":"application/json"}});const c=await r.json();if(c.error){throw new J(c.error.message)}return c}async function ie(e){const t=await te("reown_getExchanges",e);return t.result}async function ne(e){const t=await te("reown_getExchangePayUrl",e);return t.result}async function se(e){const t=await te("reown_getExchangeBuyStatus",e);return t.result}async function ae(e){const t=f.bigNumber(e.amount).times(10**e.toToken.metadata.decimals).toString();const{chainId:i,chainNamespace:n}=c.parseCaipNetworkId(e.sourceToken.network);const{chainId:s,chainNamespace:a}=c.parseCaipNetworkId(e.toToken.network);const o=e.sourceToken.asset==="native"?w(n):e.sourceToken.asset;const r=e.toToken.asset==="native"?w(a):e.toToken.asset;const u=await X.post({path:"/appkit/v1/transfers/quote",body:{user:e.address,originChainId:i.toString(),originCurrency:o,destinationChainId:s.toString(),destinationCurrency:r,recipient:e.recipient,amount:t},params:ee()});return u}async function oe(e){const t=h.isLowerCaseMatch(e.sourceToken.network,e.toToken.network);const i=h.isLowerCaseMatch(e.sourceToken.asset,e.toToken.asset);if(t&&i){return V(e)}return ae(e)}async function re(e){const t=await X.get({path:"/appkit/v1/transfers/status",params:{requestId:e.requestId,...ee()}});return t}async function ce(e){const t=await X.get({path:`/appkit/v1/transfers/assets/exchanges/${e}`,params:ee()});return t}const ue=["eip155","solana"];const le={eip155:{native:{assetNamespace:"slip44",assetReference:"60"},defaultTokenNamespace:"erc20"},solana:{native:{assetNamespace:"slip44",assetReference:"501"},defaultTokenNamespace:"token"}};function de(e,t){const{chainNamespace:i,chainId:n}=c.parseCaipNetworkId(e);const s=le[i];if(!s){throw new Error(`Unsupported chain namespace for CAIP-19 formatting: ${i}`)}let a=s.native.assetNamespace;let o=s.native.assetReference;if(t!=="native"){a=s.defaultTokenNamespace;o=t}const r=`${i}:${n}`;return`${r}/${a}:${o}`}function he(e){const{chainNamespace:t}=c.parseCaipNetworkId(e);return ue.includes(t)}function pe(e){const t=m.getAllRequestedCaipNetworks();const i=t.find((t=>t.caipNetworkId===e.chainId));let n=e.address;if(!i){throw new Error(`Target network not found for balance chainId "${e.chainId}"`)}if(h.isLowerCaseMatch(e.symbol,i.nativeCurrency.symbol)){n="native"}else if(u.isCaipAddress(n)){const{address:e}=c.parseCaipAddress(n);n=e}else if(!n){throw new Error(`Balance address not found for balance symbol "${e.symbol}"`)}return{network:i.caipNetworkId,asset:n,metadata:{name:e.name,symbol:e.symbol,decimals:Number(e.quantity.decimals),logoURI:e.iconUrl},amount:e.quantity.numeric}}function fe(e){return{chainId:e.network,address:`${e.network}:${e.asset}`,symbol:e.metadata.symbol,name:e.metadata.name,iconUrl:e.metadata.logoURI||"",price:0,quantity:{numeric:"0",decimals:e.metadata.decimals.toString()}}}function we(e){const t=f.bigNumber(e,{safe:true});if(t.lt(.001)){return"<0.001"}return t.round(4).toString()}function me(e){const t=m.getAllRequestedCaipNetworks();const i=t.find((t=>t.caipNetworkId===e.network));if(!i){return false}return Boolean(i.testnet)}const ge=0;const xe="unknown";const ye="direct-transfer";const be="deposit";const ve="transaction";const ke=g({paymentAsset:{network:"eip155:1",asset:"0x0",metadata:{name:"0x0",symbol:"0x0",decimals:0}},recipient:"0x0",amount:0,isConfigured:false,error:null,isPaymentInProgress:false,exchanges:[],isLoading:false,openInNewTab:true,redirectUrl:undefined,payWithExchange:undefined,currentPayment:undefined,analyticsSet:false,paymentId:undefined,choice:"pay",tokenBalances:{[a.CHAIN.EVM]:[],[a.CHAIN.SOLANA]:[]},isFetchingTokenBalances:false,selectedPaymentAsset:null,quote:undefined,quoteStatus:"waiting",quoteError:null,isFetchingQuote:false,selectedExchange:undefined,exchangeUrlForQuote:undefined,requestId:undefined});const $e={state:ke,subscribe(e){return I(ke,(()=>e(ke)))},subscribeKey(e,t){return $(ke,e,t)},async handleOpenPay(e){this.resetState();this.setPaymentConfig(e);this.initializeAnalytics();G();await this.prepareTokenLogo();ke.isConfigured=true;y.sendEvent({type:"track",event:"PAY_MODAL_OPEN",properties:{exchanges:ke.exchanges,configuration:{network:ke.paymentAsset.network,asset:ke.paymentAsset.asset,recipient:ke.recipient,amount:ke.amount}}});await k.open({view:"Pay"})},resetState(){ke.paymentAsset={network:"eip155:1",asset:"0x0",metadata:{name:"0x0",symbol:"0x0",decimals:0}};ke.recipient="0x0";ke.amount=0;ke.isConfigured=false;ke.error=null;ke.isPaymentInProgress=false;ke.isLoading=false;ke.currentPayment=undefined;ke.selectedExchange=undefined;ke.exchangeUrlForQuote=undefined;ke.requestId=undefined},resetQuoteState(){ke.quote=undefined;ke.quoteStatus="waiting";ke.quoteError=null;ke.isFetchingQuote=false;ke.requestId=undefined},setPaymentConfig(e){if(!e.paymentAsset){throw new F(L.INVALID_PAYMENT_CONFIG)}try{ke.choice=e.choice??"pay";ke.paymentAsset=e.paymentAsset;ke.recipient=e.recipient;ke.amount=e.amount;ke.openInNewTab=e.openInNewTab??true;ke.redirectUrl=e.redirectUrl;ke.payWithExchange=e.payWithExchange;ke.error=null}catch(e){throw new F(L.INVALID_PAYMENT_CONFIG,e.message)}},setSelectedPaymentAsset(e){ke.selectedPaymentAsset=e},setSelectedExchange(e){ke.selectedExchange=e},setRequestId(e){ke.requestId=e},setPaymentInProgress(e){ke.isPaymentInProgress=e},getPaymentAsset(){return ke.paymentAsset},getExchanges(){return ke.exchanges},async fetchExchanges(){try{ke.isLoading=true;const e=await ie({page:ge});ke.exchanges=e.exchanges.slice(0,2)}catch(e){b.showError(B.UNABLE_TO_GET_EXCHANGES);throw new F(L.UNABLE_TO_GET_EXCHANGES)}finally{ke.isLoading=false}},async getAvailableExchanges(e){try{const t=e?.asset&&e?.network?de(e.network,e.asset):undefined;const i=await ie({page:e?.page??ge,asset:t,amount:e?.amount?.toString()});return i}catch(e){throw new F(L.UNABLE_TO_GET_EXCHANGES)}},async getPayUrl(e,t,i=false){try{const n=Number(t.amount);const s=await ne({exchangeId:e,asset:de(t.network,t.asset),amount:n.toString(),recipient:`${t.network}:${t.recipient}`});y.sendEvent({type:"track",event:"PAY_EXCHANGE_SELECTED",properties:{source:"pay",exchange:{id:e},configuration:{network:t.network,asset:t.asset,recipient:t.recipient,amount:n},currentPayment:{type:"exchange",exchangeId:e},headless:i}});if(i){this.initiatePayment();y.sendEvent({type:"track",event:"PAY_INITIATED",properties:{source:"pay",paymentId:ke.paymentId||xe,configuration:{network:t.network,asset:t.asset,recipient:t.recipient,amount:n},currentPayment:{type:"exchange",exchangeId:e}}})}return s}catch(e){if(e instanceof Error&&e.message.includes("is not supported")){throw new F(L.ASSET_NOT_SUPPORTED)}throw new Error(e.message)}},async generateExchangeUrlForQuote({exchangeId:e,paymentAsset:t,amount:i,recipient:n}){const s=await ne({exchangeId:e,asset:de(t.network,t.asset),amount:i.toString(),recipient:n});ke.exchangeSessionId=s.sessionId;ke.exchangeUrlForQuote=s.url},async openPayUrl(e,t,i=false){try{const n=await this.getPayUrl(e.exchangeId,t,i);if(!n){throw new F(L.UNABLE_TO_GET_PAY_URL)}const s=e.openInNewTab??true;const a=s?"_blank":"_self";u.openHref(n.url,a);return n}catch(e){if(e instanceof F){ke.error=e.message}else{ke.error=B.GENERIC_PAYMENT_ERROR}throw new F(L.UNABLE_TO_GET_PAY_URL)}},async onTransfer({chainNamespace:e,fromAddress:t,toAddress:i,amount:n,paymentAsset:s}){ke.currentPayment={type:"wallet",status:"IN_PROGRESS"};if(ke.isPaymentInProgress){return}try{this.initiatePayment();const o=m.getAllRequestedCaipNetworks();const r=o.find((e=>e.caipNetworkId===s.network));if(!r){throw new Error("Target network not found")}const c=m.state.activeCaipNetwork;if(!h.isLowerCaseMatch(c?.caipNetworkId,r.caipNetworkId)){await m.switchActiveNetwork(r)}switch(e){case a.CHAIN.EVM:if(s.asset==="native"){ke.currentPayment.result=await M(s,e,{recipient:i,amount:n,fromAddress:t})}if(s.asset.startsWith("0x")){ke.currentPayment.result=await Y(s,{recipient:i,amount:n,fromAddress:t})}ke.currentPayment.status="SUCCESS";break;case a.CHAIN.SOLANA:ke.currentPayment.result=await Q(e,{recipient:i,amount:n,fromAddress:t,tokenMint:s.asset==="native"?undefined:s.asset});ke.currentPayment.status="SUCCESS";break;default:throw new F(L.INVALID_CHAIN_NAMESPACE)}}catch(e){if(e instanceof F){ke.error=e.message}else{ke.error=B.GENERIC_PAYMENT_ERROR}ke.currentPayment.status="FAILED";b.showError(ke.error);throw e}finally{ke.isPaymentInProgress=false}},async onSendTransaction(e){try{const{namespace:t,transactionStep:i}=e;$e.initiatePayment();const n=m.getAllRequestedCaipNetworks();const s=n.find((e=>e.caipNetworkId===ke.paymentAsset?.network));if(!s){throw new Error("Target network not found")}const r=m.state.activeCaipNetwork;if(!h.isLowerCaseMatch(r?.caipNetworkId,s.caipNetworkId)){await m.switchActiveNetwork(s)}if(t===a.CHAIN.EVM){const{from:e,to:n,data:s,value:a}=i.transaction;await o.sendTransaction({address:e,to:n,data:s,value:BigInt(a),chainNamespace:t})}else if(t===a.CHAIN.SOLANA){const{instructions:e}=i.transaction;await o.writeSolanaTransaction({instructions:e})}}catch(e){if(e instanceof F){ke.error=e.message}else{ke.error=B.GENERIC_PAYMENT_ERROR}b.showError(ke.error);throw e}finally{ke.isPaymentInProgress=false}},getExchangeById(e){return ke.exchanges.find((t=>t.id===e))},validatePayConfig(e){const{paymentAsset:t,recipient:i,amount:n}=e;if(!t){throw new F(L.INVALID_PAYMENT_CONFIG)}if(!i){throw new F(L.INVALID_RECIPIENT)}if(!t.asset){throw new F(L.INVALID_ASSET)}if(n===undefined||n===null||n<=0){throw new F(L.INVALID_AMOUNT)}},async handlePayWithExchange(e){try{ke.currentPayment={type:"exchange",exchangeId:e};const{network:t,asset:i}=ke.paymentAsset;const n={network:t,asset:i,amount:ke.amount,recipient:ke.recipient};const s=await this.getPayUrl(e,n);if(!s){throw new F(L.UNABLE_TO_INITIATE_PAYMENT)}ke.currentPayment.sessionId=s.sessionId;ke.currentPayment.status="IN_PROGRESS";ke.currentPayment.exchangeId=e;this.initiatePayment();return{url:s.url,openInNewTab:ke.openInNewTab}}catch(e){if(e instanceof F){ke.error=e.message}else{ke.error=B.GENERIC_PAYMENT_ERROR}ke.isPaymentInProgress=false;b.showError(ke.error);return null}},async getBuyStatus(e,t){try{const i=await se({sessionId:t,exchangeId:e});if(i.status==="SUCCESS"||i.status==="FAILED"){y.sendEvent({type:"track",event:i.status==="SUCCESS"?"PAY_SUCCESS":"PAY_ERROR",properties:{message:i.status==="FAILED"?u.parseError(ke.error):undefined,source:"pay",paymentId:ke.paymentId||xe,configuration:{network:ke.paymentAsset.network,asset:ke.paymentAsset.asset,recipient:ke.recipient,amount:ke.amount},currentPayment:{type:"exchange",exchangeId:ke.currentPayment?.exchangeId,sessionId:ke.currentPayment?.sessionId,result:i.txHash}}})}return i}catch(e){throw new F(L.UNABLE_TO_GET_BUY_STATUS)}},async fetchTokensFromEOA({caipAddress:e,caipNetwork:t,namespace:i}){if(!e){return[]}const{address:n}=c.parseCaipAddress(e);let s=t;if(i===a.CHAIN.EVM){s=undefined}const o=await v.getMyTokensWithBalance({address:n,caipNetwork:s});return o},async fetchTokensFromExchange(){if(!ke.selectedExchange){return[]}const e=await ce(ke.selectedExchange.id);const t=Object.values(e.assets).flat();const i=await Promise.all(t.map((async e=>{const t=fe(e);const{chainNamespace:i}=c.parseCaipNetworkId(t.chainId);let n=t.address;if(u.isCaipAddress(n)){const{address:e}=c.parseCaipAddress(n);n=e}const s=await x.getImageByToken(n??"",i).catch((()=>undefined));t.iconUrl=s??"";return t})));return i},async fetchTokens({caipAddress:e,caipNetwork:t,namespace:i}){try{ke.isFetchingTokenBalances=true;const n=Boolean(ke.selectedExchange);const s=n?this.fetchTokensFromExchange():this.fetchTokensFromEOA({caipAddress:e,caipNetwork:t,namespace:i});const a=await s;ke.tokenBalances={...ke.tokenBalances,[i]:a}}catch(e){const t=e instanceof Error?e.message:"Unable to get token balances";b.showError(t)}finally{ke.isFetchingTokenBalances=false}},async fetchQuote({amount:e,address:t,sourceToken:i,toToken:n,recipient:s}){try{$e.resetQuoteState();ke.isFetchingQuote=true;const a=await oe({amount:e,address:ke.selectedExchange?undefined:t,sourceToken:i,toToken:n,recipient:s});if(ke.selectedExchange){const e=H(a);if(e){const t=`${i.network}:${e.deposit.receiver}`;const n=f.formatNumber(e.deposit.amount,{decimals:i.metadata.decimals??0,round:8});await $e.generateExchangeUrlForQuote({exchangeId:ke.selectedExchange.id,paymentAsset:i,amount:n.toString(),recipient:t})}}ke.quote=a}catch(e){let t=B.UNABLE_TO_GET_QUOTE;if(e instanceof Error&&e.cause&&e.cause instanceof Response){try{const i=await e.cause.json();if(i.error&&typeof i.error==="string"){t=i.error}}catch{}}ke.quoteError=t;b.showError(t);throw new F(L.UNABLE_TO_GET_QUOTE)}finally{ke.isFetchingQuote=false}},async fetchQuoteStatus({requestId:e}){try{if(e===ye){const e=ke.selectedExchange;const t=ke.exchangeSessionId;if(e&&t){const i=await this.getBuyStatus(e.id,t);switch(i.status){case"IN_PROGRESS":ke.quoteStatus="waiting";break;case"SUCCESS":ke.quoteStatus="success";ke.isPaymentInProgress=false;break;case"FAILED":ke.quoteStatus="failure";ke.isPaymentInProgress=false;break;case"UNKNOWN":ke.quoteStatus="waiting";break;default:ke.quoteStatus="waiting";break}return}ke.quoteStatus="success";return}const{status:t}=await re({requestId:e});ke.quoteStatus=t}catch{ke.quoteStatus="failure";throw new F(L.UNABLE_TO_GET_QUOTE_STATUS)}},initiatePayment(){ke.isPaymentInProgress=true;ke.paymentId=crypto.randomUUID()},initializeAnalytics(){if(ke.analyticsSet){return}ke.analyticsSet=true;this.subscribeKey("isPaymentInProgress",(e=>{if(ke.currentPayment?.status&&ke.currentPayment.status!=="UNKNOWN"){const e={IN_PROGRESS:"PAY_INITIATED",SUCCESS:"PAY_SUCCESS",FAILED:"PAY_ERROR"}[ke.currentPayment.status];y.sendEvent({type:"track",event:e,properties:{message:ke.currentPayment.status==="FAILED"?u.parseError(ke.error):undefined,source:"pay",paymentId:ke.paymentId||xe,configuration:{network:ke.paymentAsset.network,asset:ke.paymentAsset.asset,recipient:ke.recipient,amount:ke.amount},currentPayment:{type:ke.currentPayment.type,exchangeId:ke.currentPayment.exchangeId,sessionId:ke.currentPayment.sessionId,result:ke.currentPayment.result}}})}}))},async prepareTokenLogo(){if(!ke.paymentAsset.metadata.logoURI){try{const{chainNamespace:e}=c.parseCaipNetworkId(ke.paymentAsset.network);const t=await x.getImageByToken(ke.paymentAsset.asset,e);ke.paymentAsset.metadata.logoURI=t}catch{}}}};var Ie=e`
  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]};
  }
`;var Ee=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};let Ae=class e extends n{constructor(){super();this.unsubscribe=[];this.amount=$e.state.amount;this.namespace=undefined;this.paymentAsset=$e.state.paymentAsset;this.activeConnectorIds=E.state.activeConnectorIds;this.caipAddress=undefined;this.exchanges=$e.state.exchanges;this.isLoading=$e.state.isLoading;this.initializeNamespace();this.unsubscribe.push($e.subscribeKey("amount",(e=>this.amount=e)));this.unsubscribe.push(E.subscribeKey("activeConnectorIds",(e=>this.activeConnectorIds=e)));this.unsubscribe.push($e.subscribeKey("exchanges",(e=>this.exchanges=e)));this.unsubscribe.push($e.subscribeKey("isLoading",(e=>this.isLoading=e)));$e.fetchExchanges();$e.setSelectedExchange(undefined)}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){return s`
      <wui-flex flexDirection="column">
        ${this.paymentDetailsTemplate()} ${this.paymentMethodsTemplate()}
      </wui-flex>
    `}paymentMethodsTemplate(){return s`
      <wui-flex flexDirection="column" padding="3" gap="2" class="payment-methods-container">
        ${this.payWithWalletTemplate()} ${this.templateSeparator()}
        ${this.templateExchangeOptions()}
      </wui-flex>
    `}initializeNamespace(){const e=m.state.activeChain;this.namespace=e;this.caipAddress=m.getAccountData(e)?.caipAddress;this.unsubscribe.push(m.subscribeChainProp("accountState",(e=>{this.caipAddress=e?.caipAddress}),e))}paymentDetailsTemplate(){const e=m.getAllRequestedCaipNetworks();const t=e.find((e=>e.caipNetworkId===this.paymentAsset.network));return s`
      <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">
            ${we(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 ${t?.name||"Unknown"}</wui-text
            >
          </wui-flex>
        </wui-flex>

        <wui-flex class="left-image-container">
          <wui-image
            src=${j(this.paymentAsset.metadata.logoURI)}
            class="token-image"
          ></wui-image>
          <wui-image
            src=${j(x.getNetworkImage(t))}
            class="chain-image"
          ></wui-image>
        </wui-flex>
      </wui-flex>
    `}payWithWalletTemplate(){if(!he(this.paymentAsset.network)){return s``}return this.caipAddress?this.connectedWalletTemplate():this.disconnectedWalletTemplate()}connectedWalletTemplate(){const{name:e,image:t}=this.getWalletProperties({namespace:this.namespace});return s`
      <wui-flex flexDirection="column" gap="3">
        <wui-list-item
          type="secondary"
          boxColor="foregroundSecondary"
          @click=${this.onWalletPayment}
          .boxed=${false}
          ?chevron=${true}
          ?fullSize=${false}
          ?rounded=${true}
          data-testid="wallet-payment-option"
          imageSrc=${j(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=${false}
          boxColor="foregroundSecondary"
        >
          <wui-text variant="lg-regular" color="secondary">Disconnect</wui-text>
        </wui-list-item>
      </wui-flex>
    `}disconnectedWalletTemplate(){return s`<wui-list-item
      type="secondary"
      boxColor="foregroundSecondary"
      variant="icon"
      iconColor="default"
      iconVariant="overlay"
      icon="wallet"
      @click=${this.onWalletPayment}
      ?chevron=${true}
      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 s`<wui-flex justifyContent="center" alignItems="center">
        <wui-loading-spinner size="md"></wui-loading-spinner>
      </wui-flex>`}const e=this.exchanges.filter((e=>{if(me(this.paymentAsset)){return e.id===W}return e.id!==W}));if(e.length===0){return s`<wui-flex justifyContent="center" alignItems="center">
        <wui-text variant="md-medium" color="primary">No exchanges available</wui-text>
      </wui-flex>`}return e.map((e=>s`
        <wui-list-item
          type="secondary"
          boxColor="foregroundSecondary"
          @click=${()=>this.onExchangePayment(e)}
          data-testid="exchange-option-${e.id}"
          ?chevron=${true}
          imageSrc=${j(e.imageUrl)}
        >
          <wui-text flexGrow="1" variant="lg-regular" color="primary">
            Pay with ${e.name}
          </wui-text>
        </wui-list-item>
      `))}templateSeparator(){return s`<wui-separator text="or" bgColor="secondary"></wui-separator>`}async onWalletPayment(){if(!this.namespace){throw new Error("Namespace not found")}if(this.caipAddress){A.push("PayQuote")}else{await E.connect();await k.open({view:"PayQuote"})}}onExchangePayment(e){$e.setSelectedExchange(e);A.push("PayQuote")}async onDisconnect(){try{await o.disconnect();await k.open({view:"Pay"})}catch{console.error("Failed to disconnect");b.showError("Failed to disconnect")}}getWalletProperties({namespace:e}){if(!e){return{name:undefined,image:undefined}}const t=this.activeConnectorIds[e];if(!t){return{name:undefined,image:undefined}}const i=E.getConnector({id:t,namespace:e});if(!i){return{name:undefined,image:undefined}}const n=x.getConnectorImage(i);return{name:i.name,image:n}}};Ae.styles=Ie;Ee([R()],Ae.prototype,"amount",void 0);Ee([R()],Ae.prototype,"namespace",void 0);Ee([R()],Ae.prototype,"paymentAsset",void 0);Ee([R()],Ae.prototype,"activeConnectorIds",void 0);Ee([R()],Ae.prototype,"caipAddress",void 0);Ee([R()],Ae.prototype,"exchanges",void 0);Ee([R()],Ae.prototype,"isLoading",void 0);Ae=Ee([S("w3m-pay-view")],Ae);var Ne=e`
  :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;
    }
  }
`;var Te=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};const Ce=3;const Se=2;const Re=.3;const Pe="200px";const _e={"accent-primary":N.tokens.core.backgroundAccentPrimary};let je=class e extends n{constructor(){super(...arguments);this.rings=Ce;this.duration=Se;this.opacity=Re;this.size=Pe;this.variant="accent-primary"}render(){const e=_e[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 s`
      <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;const n=`animation-delay: ${i}s;`;return s`<div class="pulse-ring" style=${n}></div>`}};je.styles=[t,Ne];Te([C({type:Number})],je.prototype,"rings",void 0);Te([C({type:Number})],je.prototype,"duration",void 0);Te([C({type:Number})],je.prototype,"opacity",void 0);Te([C()],je.prototype,"size",void 0);Te([C()],je.prototype,"variant",void 0);je=Te([S("wui-pulse")],je);const Oe=[{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"}];const Ue=["success","submitted","failure","timeout","refund"];var ze=e`
  :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};
  }
`;var De=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};const Le={received:["pending","success","submitted"],processing:["success","submitted"],sending:["success","submitted"]};const Be=3e3;let Fe=class e extends n{constructor(){super();this.unsubscribe=[];this.pollingInterval=null;this.paymentAsset=$e.state.paymentAsset;this.quoteStatus=$e.state.quoteStatus;this.quote=$e.state.quote;this.amount=$e.state.amount;this.namespace=undefined;this.caipAddress=undefined;this.profileName=null;this.activeConnectorIds=E.state.activeConnectorIds;this.selectedExchange=$e.state.selectedExchange;this.initializeNamespace();this.unsubscribe.push(...[$e.subscribeKey("quoteStatus",(e=>this.quoteStatus=e)),$e.subscribeKey("quote",(e=>this.quote=e)),E.subscribeKey("activeConnectorIds",(e=>this.activeConnectorIds=e)),$e.subscribeKey("selectedExchange",(e=>this.selectedExchange=e))])}connectedCallback(){super.connectedCallback();this.startPolling()}disconnectedCallback(){super.disconnectedCallback();this.stopPolling();this.unsubscribe.forEach((e=>e()))}render(){return s`
      <wui-flex flexDirection="column" .padding=${["3","0","0","0"]} gap="2">
        ${this.tokenTemplate()} ${this.paymentTemplate()} ${this.paymentLifecycleTemplate()}
      </wui-flex>
    `}tokenTemplate(){const e=we(this.amount||"0");const t=this.paymentAsset.metadata.symbol??"Unknown";const i=m.getAllRequestedCaipNetworks();const n=i.find((e=>e.caipNetworkId===this.paymentAsset.network));const a=this.quoteStatus==="failure"||this.quoteStatus==="timeout"||this.quoteStatus==="refund";const o=this.quoteStatus==="success"||this.quoteStatus==="submitted";if(o){return s`<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>`}if(a){return s`<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>`}return s`
      <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=${j(x.getNetworkImage(n))}
                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 s`
      <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 s`
      <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=this.quoteStatus==="failure"||this.quoteStatus==="timeout"||this.quoteStatus==="refund";const t=this.quoteStatus==="success"||this.quoteStatus==="submitted";if(e){return s`
        <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 s`
        <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 s`
      <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 e=m.getAllRequestedCaipNetworks();const t=e.find((e=>{const t=this.quote?.origin.currency.network;if(!t){return false}const{chainId:i}=c.parseCaipNetworkId(t);return h.isLowerCaseMatch(e.id.toString(),i.toString())}));const i=f.formatNumber(this.quote?.origin.amount||"0",{decimals:this.quote?.origin.currency.metadata.decimals??0}).toString();const n=we(i);const a=this.quote?.origin.currency.metadata.symbol??"Unknown";return s`
      <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">${n}</wui-text>
            <wui-text variant="lg-regular" color="secondary">${a}</wui-text>
          </wui-flex>

          <wui-flex alignItems="center" gap="1">
            <wui-text variant="md-regular" color="secondary">on</wui-text>
            <wui-image
              src=${j(x.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 s`
      <wui-flex
        alignItems="flex-start"
        justifyContent="space-between"
        .padding=${["3","0","3","0"]}
      >
        <wui-text variant="lg-regular" color="secondary">Wallet</wui-text>

        ${this.renderWalletText()}
      </wui-flex>
    `}renderWalletText(){const{image:e}=this.getWalletProperties({namespace:this.namespace});const{address:t}=this.caipAddress?c.parseCaipAddress(this.caipAddress):{};const i=this.selectedExchange?.name;if(this.selectedExchange){return s`
        <wui-flex alignItems="center" justifyContent="flex-end" gap="1">
          <wui-text variant="lg-regular" color="primary">${i}</wui-text>
          <wui-image src=${j(this.selectedExchange.imageUrl)} size="mdl"></wui-image>
        </wui-flex>
      `}return s`
      <wui-flex alignItems="center" justifyContent="flex-end" gap="1">
        <wui-text variant="lg-regular" color="primary">
          ${P.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=${j(e)} size="mdl"></wui-image>
      </wui-flex>
    `}getStepsWithStatus(){const e=this.quoteStatus==="failure"||this.quoteStatus==="timeout"||this.quoteStatus==="refund";if(e){return Oe.map((e=>({...e,status:"failed"})))}return Oe.map((e=>{const t=Le[e.id]??[];const i=t.includes(this.quoteStatus)?"completed":"pending";return{...e,status:i}}))}renderStep({title:e,icon:t,status:i}){const n={"step-icon-box":true,success:i==="completed"};return s`
      <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=${_(n)}>
            ${this.renderStatusIndicator(i)}
          </wui-flex>
        </wui-flex>

        <wui-text variant="md-regular" color="primary">${e}</wui-text>
      </wui-flex>
    `}renderStatusIndicator(e){if(e==="completed"){return s`<wui-icon size="sm" color="success" name="checkmark"></wui-icon>`}if(e==="failed"){return s`<wui-icon size="sm" color="error" name="close"></wui-icon>`}if(e==="pending"){return s`<wui-loading-spinner color="accent-primary" size="sm"></wui-loading-spinner>`}return null}startPolling(){if(!this.pollingInterval){this.fetchQuoteStatus();this.pollingInterval=setInterval((()=>{this.fetchQuoteStatus()}),Be)}}stopPolling(){if(this.pollingInterval){clearInterval(this.pollingInterval);this.pollingInterval=null}}async fetchQuoteStatus(){const e=$e.state.requestId;if(!e||Ue.includes(this.quoteStatus)){this.stopPolling()}else{try{await $e.fetchQuoteStatus({requestId:e});if(Ue.includes(this.quoteStatus)){this.stopPolling()}}catch{this.stopPolling()}}}initializeNamespace(){const e=m.state.activeChain;this.namespace=e;this.caipAddress=m.getAccountData(e)?.caipAddress;this.profileName=m.getAccountData(e)?.profileName??null;this.unsubscribe.push(m.subscribeChainProp("accountState",(e=>{this.caipAddress=e?.caipAddress;this.profileName=e?.profileName??null}),e))}getWalletProperties({namespace:e}){if(!e){return{name:undefined,image:undefined}}const t=this.activeConnectorIds[e];if(!t){return{name:undefined,image:undefined}}const i=E.getConnector({id:t,namespace:e});if(!i){return{name:undefined,image:undefined}}const n=x.getConnectorImage(i);return{name:i.name,image:n}}};Fe.styles=ze;De([R()],Fe.prototype,"paymentAsset",void 0);De([R()],Fe.prototype,"quoteStatus",void 0);De([R()],Fe.prototype,"quote",void 0);De([R()],Fe.prototype,"amount",void 0);De([R()],Fe.prototype,"namespace",void 0);De([R()],Fe.prototype,"caipAddress",void 0);De([R()],Fe.prototype,"profileName",void 0);De([R()],Fe.prototype,"activeConnectorIds",void 0);De([R()],Fe.prototype,"selectedExchange",void 0);Fe=De([S("w3m-pay-loading-view")],Fe);var qe=T`
  :host {
    display: block;
  }
`;var We=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};let Ge=class e extends n{render(){return s`
      <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>
    `}};Ge.styles=[qe];Ge=We([S("w3m-pay-fees-skeleton")],Ge);var Me=e`
  :host {
    display: block;
  }

  wui-image {
    border-radius: ${({borderRadius:e})=>e.round};
  }
`;var Ye=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};let Qe=class e extends n{constructor(){super();this.unsubscribe=[];this.quote=$e.state.quote;this.unsubscribe.push($e.subscribeKey("quote",(e=>this.quote=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=f.formatNumber(this.quote?.origin.amount||"0",{decimals:this.quote?.origin.currency.metadata.decimals??0,round:6}).toString();return s`
      <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">
            ${e} ${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(e){const t=e.id==="network";const i=f.formatNumber(e.amount||"0",{decimals:e.currency.metadata.decimals??0,round:6}).toString();if(t){const t=m.getAllRequestedCaipNetworks();const n=t.find((t=>h.isLowerCaseMatch(t.caipNetworkId,e.currency.network)));return s`
        <wui-flex alignItems="center" justifyContent="space-between">
          <wui-text variant="md-regular" color="secondary">${e.label}</wui-text>

          <wui-flex flexDirection="column" alignItems="flex-end" gap="2">
            <wui-text variant="md-regular" color="primary">
              ${i} ${e.currency.metadata.symbol||"Unknown"}
            </wui-text>

            <wui-flex alignItems="center" gap="01">
              <wui-image
                src=${j(x.getNetworkImage(n))}
                size="xs"
              ></wui-image>
              <wui-text variant="sm-regular" color="secondary">
                ${n?.name||"Unknown"}
              </wui-text>
            </wui-flex>
          </wui-flex>
        </wui-flex>
      `}return s`
      <wui-flex alignItems="center" justifyContent="space-between">
        <wui-text variant="md-regular" color="secondary">${e.label}</wui-text>
        <wui-text variant="md-regular" color="primary">
          ${i} ${e.currency.metadata.symbol||"Unknown"}
        </wui-text>
      </wui-flex>
    `}};Qe.styles=[Me];Ye([R()],Qe.prototype,"quote",void 0);Qe=Ye([S("w3m-pay-fees")],Qe);var Ve=e`
  :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;
  }
`;var He=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};let Ke=class e extends n{constructor(){super();this.unsubscribe=[];this.selectedExchange=$e.state.selectedExchange;this.unsubscribe.push($e.subscribeKey("selectedExchange",(e=>this.selectedExchange=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=Boolean(this.selectedExchange);return s`
      <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:s`<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:true,bubbles:true,composed:true}))}};Ke.styles=[Ve];He([C({type:Array})],Ke.prototype,"selectedExchange",void 0);Ke=He([S("w3m-pay-options-empty")],Ke);var Xe=e`
  :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};
  }
`;var Je=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};let Ze=class e extends n{render(){return s`
      <wui-flex flexDirection="column" gap="2" class="pay-options-container">
        ${this.renderOptionEntry()} ${this.renderOptionEntry()} ${this.renderOptionEntry()}
      </wui-flex>
    `}renderOptionEntry(){return s`
      <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>
    `}};Ze.styles=[Xe];Ze=Je([S("w3m-pay-options-skeleton")],Ze);var et=e`
  :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};
    }
  }
`;var tt=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};const it=300;let nt=class e extends n{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");if(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 s`
      <wui-flex flexDirection="column" gap="2" class="pay-options-container">
        ${this.options.map((e=>this.payOptionTemplate(e)))}
      </wui-flex>
    `}payOptionTemplate(e){const{network:t,metadata:i,asset:n,amount:a="0"}=e;const o=m.getAllRequestedCaipNetworks();const r=o.find((e=>e.caipNetworkId===t));const c=`${t}:${n}`;const u=`${this.selectedPaymentAsset?.network}:${this.selectedPaymentAsset?.asset}`;const l=c===u;const d=f.bigNumber(a,{safe:true});const h=d.gt(0);return s`
      <wui-flex
        alignItems="center"
        justifyContent="space-between"
        gap="2"
        @click=${()=>this.onSelect?.(e)}
        class="pay-option-container"
      >
        <wui-flex alignItems="center" gap="2">
          <wui-flex class="token-images-container">
            <wui-image
              src=${j(i.logoURI)}
              class="token-image"
              size="3xl"
            ></wui-image>
            <wui-image
              src=${j(x.getNetworkImage(r))}
              class="chain-image"
              size="md"
            ></wui-image>
          </wui-flex>

          <wui-flex flexDirection="column" gap="1">
            <wui-text variant="lg-regular" color="primary">${i.symbol}</wui-text>
            ${h?s`<wui-text variant="sm-regular" color="secondary">
                  ${d.round(6).toString()} ${i.symbol}
                </wui-text>`:null}
          </wui-flex>
        </wui-flex>

        ${l?s`<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}const t=e.scrollHeight>it;if(t){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",O.interpolate([0,50],[0,1],e.scrollTop).toString());e.style.setProperty("--options-scroll--bottom-opacity",O.interpolate([0,50],[0,1],e.scrollHeight-e.scrollTop-e.offsetHeight).toString())}else{e.style.setProperty("--options-mask-image","none");e.style.setProperty("--options-scroll--top-opacity","0");e.style.setProperty("--options-scroll--bottom-opacity","0")}}};nt.styles=[et];tt([C({type:Array})],nt.prototype,"options",void 0);tt([C()],nt.prototype,"selectedPaymentAsset",void 0);tt([C()],nt.prototype,"onSelect",void 0);nt=tt([S("w3m-pay-options")],nt);var st=e`
  .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;
  }
`;var at=undefined&&undefined.__decorate||function(e,t,i,n){var s=arguments.length,a=s<3?t:n===null?n=Object.getOwnPropertyDescriptor(t,i):n,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)if(o=e[r])a=(s<3?o(a):s>3?o(t,i,a):o(t,i))||a;return s>3&&a&&Object.defineProperty(t,i,a),a};const ot={eip155:"ethereum",solana:"solana",bip122:"bitcoin",ton:"ton"};const rt={eip155:{icon:ot.eip155,label:"EVM"},solana:{icon:ot.solana,label:"Solana"},bip122:{icon:ot.bip122,label:"Bitcoin"},ton:{icon:ot.ton,label:"Ton"}};let ct=class e extends n{constructor(){super();this.unsubscribe=[];this.profileName=null;this.paymentAsset=$e.state.paymentAsset;this.namespace=undefined;this.caipAddress=undefined;this.amount=$e.state.amount;this.recipient=$e.state.recipient;this.activeConnectorIds=E.state.activeConnectorIds;this.selectedPaymentAsset=$e.state.selectedPaymentAsset;this.selectedExchange=$e.state.selectedExchange;this.isFetchingQuote=$e.state.isFetchingQuote;this.quoteError=$e.state.quoteError;this.quote=$e.state.quote;this.isFetchingTokenBalances=$e.state.isFetchingTokenBalances;this.tokenBalances=$e.state.tokenBalances;this.isPaymentInProgress=$e.state.isPaymentInProgress;this.exchangeUrlForQuote=$e.state.exchangeUrlForQuote;this.completedTransactionsCount=0;this.unsubscribe.push($e.subscribeKey("paymentAsset",(e=>this.paymentAsset=e)));this.unsubscribe.push($e.subscribeKey("tokenBalances",(e=>this.onTokenBalancesChanged(e))));this.unsubscribe.push($e.subscribeKey("isFetchingTokenBalances",(e=>this.isFetchingTokenBalances=e)));this.unsubscribe.push(E.subscribeKey("activeConnectorIds",(e=>this.activeConnectorIds=e)));this.unsubscribe.push($e.subscribeKey("selectedPaymentAsset",(e=>this.selectedPaymentAsset=e)));this.unsubscribe.push($e.subscribeKey("isFetchingQuote",(e=>this.isFetchingQuote=e)));this.unsubscribe.push($e.subscribeKey("quoteError",(e=>this.quoteError=e)));this.unsubscribe.push($e.subscribeKey("quote",(e=>this.quote=e)));this.unsubscribe.push($e.subscribeKey("amount",(e=>this.amount=e)));this.unsubscribe.push($e.subscribeKey("recipient",(e=>this.recipient=e)));this.unsubscribe.push($e.subscribeKey("isPaymentInProgress",(e=>this.isPaymentInProgress=e)));this.unsubscribe.push($e.subscribeKey("selectedExchange",(e=>this.selectedExchange=e)));this.unsubscribe.push($e.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);const t=e.has("selectedPaymentAsset");if(t){this.fetchQuote()}}render(){return s`
      <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 e=f.formatNumber(this.quote?.origin.amount,{decimals:this.quote?.origin.currency.metadata.decimals??0}).toString();return s`
        <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?s`<wui-text variant="lg-regular" color="primary">
                ${f.bigNumber(e,{safe:true}).round(6).toString()}
                ${this.quote.origin.currency.metadata.symbol}
              </wui-text>`:s`<wui-shimmer width="80px" height="18px" variant="light"></wui-shimmer>`}
        </wui-flex>
      `}const e=u.getPlainAddress(this.caipAddress)??"";const{name:t,image:i}=this.getWalletProperties({namespace:this.namespace});const{icon:n,label:a}=rt[this.namespace]??{};return s`
      <wui-flex
        .padding=${["4","3","4","3"]}
        alignItems="center"
        justifyContent="space-between"
        gap="2"
      >
        <wui-wallet-switch
          profileName=${j(this.profileName)}
          address=${j(e)}
          imageSrc=${j(i)}
          alt=${j(t)}
          @click=${this.onConnectOtherWallet.bind(this)}
          data-testid="wui-wallet-switch"
        ></wui-wallet-switch>

        <wui-wallet-switch
          profileName=${j(a)}
          address=${j(e)}
          icon=${j(n)}
          iconSize="xs"
          .enableGreenCircle=${false}
          alt=${j(a)}
          @click=${this.onConnectOtherWallet.bind(this)}
          data-testid="wui-wallet-switch"
        ></wui-wallet-switch>
      </wui-flex>
    `}initializeNamespace(){const e=m.state.activeChain;this.namespace=e;this.caipAddress=m.getAccountData(e)?.caipAddress;this.profileName=m.getAccountData(e)?.profileName??null;this.unsubscribe.push(m.subscribeChainProp("accountState",(e=>this.onAccountStateChanged(e)),e))}async fetchTokens(){if(this.namespace){let e=undefined;if(this.caipAddress){const{chainId:t,chainNamespace:i}=c.parseCaipAddress(this.caipAddress);const n=`${i}:${t}`;const s=m.getAllRequestedCaipNetworks();e=s.find((e=>e.caipNetworkId===n))}await $e.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):{};$e.fetchQuote({amount:this.amount.toString(),address:e,sourceToken:this.selectedPaymentAsset,toToken:this.paymentAsset,recipient:this.recipient})}}getWalletProperties({namespace:e}){if(!e){return{name:undefined,image:undefined}}const t=this.activeConnectorIds[e];if(!t){return{name:undefined,image:undefined}}const i=E.getConnector({id:t,namespace:e});if(!i){return{name:undefined,image:undefined}}const n=x.getConnectorImage(i);return{name:i.name,image:n}}paymentOptionsViewTemplate(){return s`
      <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 s`<w3m-pay-options-skeleton></w3m-pay-options-skeleton>`}if(e.length===0){return s`<w3m-pay-options-empty
        @connectOtherWallet=${this.onConnectOtherWallet.bind(this)}
      ></w3m-pay-options-empty>`}const t={disabled:this.isFetchingQuote};return s`<w3m-pay-options
      class=${_(t)}
      .options=${e}
      .selectedPaymentAsset=${j(this.selectedPaymentAsset)}
      .onSelect=${this.onSelectedPaymentAssetChanged.bind(this)}
    ></w3m-pay-options>`}amountWithFeeTemplate(){if(this.isFetchingQuote||!this.selectedPaymentAsset||this.quoteError){return s`<w3m-pay-fees-skeleton></w3m-pay-fees-skeleton>`}return s`<w3m-pay-fees></w3m-pay-fees>`}paymentActionsTemplate(){const e=this.isFetchingQuote||this.isFetchingTokenBalances;const t=this.isFetchingQuote||this.isFetchingTokenBalances||!this.selectedPaymentAsset||Boolean(this.quoteError);const i=f.formatNumber(this.quote?.origin.amount??0,{decimals:this.quote?.origin.currency.metadata.decimals??0}).toString();if(this.selectedExchange){if(e||t){return s`
          <wui-shimmer width="100%" height="48px" variant="light" ?rounded=${true}></wui-shimmer>
        `}return s`<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>`}return s`
      <wui-flex alignItems="center" justifyContent="space-between">
        <wui-flex flexDirection="column" gap="1">
          <wui-text variant="md-regular" color="secondary">Order Total</wui-text>

          ${e||t?s`<wui-shimmer width="58px" height="32px" variant="light"></wui-shimmer>`:s`<wui-flex alignItems="center" gap="01">
                <wui-text variant="h4-regular" color="primary">${we(i)}</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:e,isDisabled:t})}
      </wui-flex>
    `}actionButtonTemplate(e){const t=K(this.quote);const{isLoading:i,isDisabled:n}=e;let a="Pay";const o=t.length>1&&this.completedTransactionsCount===0;if(o){a="Approve"}return s`
      <wui-button
        size="lg"
        variant="accent-primary"
        ?loading=${i||this.isPaymentInProgress}
        ?disabled=${n||this.isPaymentInProgress}
        @click=${()=>{if(t.length>0){this.onSendTransactions()}else{this.onTransfer()}}}
      >
        ${a}
        ${i?null:s`<wui-icon
              name="arrowRight"
              color="inherit"
              size="sm"
              slot="iconRight"
            ></wui-icon>`}
      </wui-button>
    `}getPaymentAssetFromTokenBalances(){if(!this.namespace){return[]}const e=this.tokenBalances[this.namespace]??[];const t=e.map((e=>{try{return pe(e)}catch(e){return null}})).filter((e=>Boolean(e)));const i=t.filter((e=>{const{chainId:t}=c.parseCaipNetworkId(e.network);const{chainId:i}=c.parseCaipNetworkId(this.paymentAsset.network);if(h.isLowerCaseMatch(e.asset,this.paymentAsset.asset)){return true}if(this.selectedExchange){return!h.isLowerCaseMatch(t.toString(),i.toString())}return true}));return i}onTokenBalancesChanged(e){this.tokenBalances=e;const[t]=this.getPaymentAssetFromTokenBalances();if(t){$e.setSelectedPaymentAsset(t)}}async onConnectOtherWallet(){await E.connect();await k.open({view:"PayQuote"})}onAccountStateChanged(e){const{address:t}=this.caipAddress?c.parseCaipAddress(this.caipAddress):{};this.caipAddress=e?.caipAddress;this.profileName=e?.profileName??null;if(t){const{address:e}=this.caipAddress?c.parseCaipAddress(this.caipAddress):{};if(!e){k.close()}else if(!h.isLowerCaseMatch(e,t)){this.resetAssetsState();this.resetQuoteState();this.fetchTokens()}}}onSelectedPaymentAssetChanged(e){if(!this.isFetchingQuote){$e.setSelectedPaymentAsset(e)}}async onTransfer(){const e=H(this.quote);if(e){const t=h.isLowerCaseMatch(this.selectedPaymentAsset?.asset,e.deposit.currency);if(!t){throw new Error("Quote asset is not the same as the selected payment asset")}const i=this.selectedPaymentAsset?.amount??"0";const n=f.formatNumber(e.deposit.amount,{decimals:this.selectedPaymentAsset?.metadata.decimals??0}).toString();const s=f.bigNumber(i).gte(n);if(!s){b.showError("Insufficient funds");return}if(this.quote&&this.selectedPaymentAsset&&this.caipAddress&&this.namespace){const{address:t}=c.parseCaipAddress(this.caipAddress);await $e.onTransfer({chainNamespace:this.namespace,fromAddress:t,toAddress:e.deposit.receiver,amount:n,paymentAsset:this.selectedPaymentAsset});$e.setRequestId(e.requestId);A.push("PayLoading")}}}async onSendTransactions(){const e=this.selectedPaymentAsset?.amount??"0";const t=f.formatNumber(this.quote?.origin.amount??0,{decimals:this.selectedPaymentAsset?.metadata.decimals??0}).toString();const i=f.bigNumber(e).gte(t);if(!i){b.showError("Insufficient funds");return}const n=K(this.quote);const[s]=K(this.quote,this.completedTransactionsCount);if(s&&this.namespace){await $e.onSendTransaction({namespace:this.namespace,transactionStep:s});this.completedTransactionsCount+=1;const e=this.completedTransactionsCount===n.length;if(e){$e.setRequestId(s.requestId);A.push("PayLoading")}}}onPayWithExchange(){if(this.exchangeUrlForQuote){const e=u.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=H(this.quote);if(t){$e.setRequestId(t.requestId)}$e.initiatePayment();A.push("PayLoading")}}resetAssetsState(){$e.setSelectedPaymentAsset(null)}resetQuoteState(){$e.resetQuoteState()}};ct.styles=st;at([R()],ct.prototype,"profileName",void 0);at([R()],ct.prototype,"paymentAsset",void 0);at([R()],ct.prototype,"namespace",void 0);at([R()],ct.prototype,"caipAddress",void 0);at([R()],ct.prototype,"amount",void 0);at([R()],ct.prototype,"recipient",void 0);at([R()],ct.prototype,"activeConnectorIds",void 0);at([R()],ct.prototype,"selectedPaymentAsset",void 0);at([R()],ct.prototype,"selectedExchange",void 0);at([R()],ct.prototype,"isFetchingQuote",void 0);at([R()],ct.prototype,"quoteError",void 0);at([R()],ct.prototype,"quote",void 0);at([R()],ct.prototype,"isFetchingTokenBalances",void 0);at([R()],ct.prototype,"tokenBalances",void 0);at([R()],ct.prototype,"isPaymentInProgress",void 0);at([R()],ct.prototype,"exchangeUrlForQuote",void 0);at([R()],ct.prototype,"completedTransactionsCount",void 0);ct=at([S("w3m-pay-quote-view")],ct);export{F as A,$e as P,Ae as W,L as a,Fe as b,ct as c};
//# sourceMappingURL=p-DsIfsp4b.js.map