"use strict";(self.webpackChunkfrog=self.webpackChunkfrog||[]).push([[1389],{37902:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(98414),a=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let s=class extends o.WF{constructor(){super(...arguments),this.data=[]}render(){return o.qy` <wui-flex flexDirection="column" alignItems="center" gap="l"> ${this.data.map((e=>o.qy` <wui-flex flexDirection="column" alignItems="center" gap="xl"> <wui-flex flexDirection="row" justifyContent="center" gap="1xs"> ${e.images.map((e=>o.qy`<wui-visual name=${e}></wui-visual>`))} </wui-flex> </wui-flex> <wui-flex flexDirection="column" alignItems="center" gap="xxs"> <wui-text variant="paragraph-500" color="fg-100" align="center"> ${e.title} </wui-text> <wui-text variant="small-500" color="fg-200" align="center">${e.text}</wui-text> </wui-flex> `))} </wui-flex> `}};a([(0,r.MZ)({type:Array})],s.prototype,"data",void 0),s=a([(0,n.customElement)("w3m-help-widget")],s)},77821:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(68342),a=i(87792),s=i(98414);const l=o.AH` :host { width: 100%; height: 100px; border-radius: var(--wui-border-radius-s); border: 1px solid var(--wui-color-gray-glass-002); background-color: var(--wui-color-gray-glass-002); transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg); will-change: background-color; position: relative; } :host(:hover) { background-color: var(--wui-color-gray-glass-005); } wui-flex { width: 100%; height: fit-content; } wui-button { display: ruby; color: var(--wui-color-fg-100); margin: 0 var(--wui-spacing-xs); } .instruction { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .paste { display: inline-flex; } textarea { background: transparent; width: 100%; font-family: var(--w3m-font-family); font-size: var(--wui-font-size-medium); font-style: normal; font-weight: var(--wui-font-weight-light); line-height: 130%; letter-spacing: var(--wui-letter-spacing-medium); color: var(--wui-color-fg-100); caret-color: var(--wui-color-accent-100); box-sizing: border-box; -webkit-appearance: none; -moz-appearance: textfield; padding: 0px; border: none; outline: none; appearance: none; resize: none; overflow: hidden; } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{constructor(){super(...arguments),this.inputElementRef=(0,n._)(),this.instructionElementRef=(0,n._)(),this.instructionHidden=Boolean(this.value),this.pasting=!1,this.onDebouncedSearch=a.wE.debounce((async e=>{const t=await a.x4.getEnsAddress(e);if(a.Rv.setLoading(!1),t){a.Rv.setReceiverProfileName(e),a.Rv.setReceiverAddress(t);const i=await a.x4.getEnsAvatar(e);a.Rv.setReceiverProfileImageUrl(i||void 0)}else a.Rv.setReceiverAddress(e),a.Rv.setReceiverProfileName(void 0),a.Rv.setReceiverProfileImageUrl(void 0)}))}firstUpdated(){this.value&&(this.instructionHidden=!0),this.checkHidden()}render(){return o.qy` <wui-flex @click=${this.onBoxClick.bind(this)} flexDirection="column" justifyContent="center" gap="4xs" .padding=${["2xl","l","xl","l"]} > <wui-text ${(0,n.K)(this.instructionElementRef)} class="instruction" color="fg-300" variant="medium-400" > Type or <wui-button class="paste" size="md" variant="neutral" iconLeft="copy" @click=${this.onPasteClick.bind(this)} > <wui-icon size="sm" color="inherit" slot="iconLeft" name="copy"></wui-icon> Paste </wui-button> address </wui-text> <textarea spellcheck="false" ?disabled=${!this.instructionHidden} ${(0,n.K)(this.inputElementRef)} @input=${this.onInputChange.bind(this)} @blur=${this.onBlur.bind(this)} .value=${this.value??""} autocomplete="off" > ${this.value??""}</textarea > </wui-flex>`}async focusInput(){this.instructionElementRef.value&&(this.instructionHidden=!0,await this.toggleInstructionFocus(!1),this.instructionElementRef.value.style.pointerEvents="none",this.inputElementRef.value?.focus(),this.inputElementRef.value&&(this.inputElementRef.value.selectionStart=this.inputElementRef.value.selectionEnd=this.inputElementRef.value.value.length))}async focusInstruction(){this.instructionElementRef.value&&(this.instructionHidden=!1,await this.toggleInstructionFocus(!0),this.instructionElementRef.value.style.pointerEvents="auto",this.inputElementRef.value?.blur())}async toggleInstructionFocus(e){this.instructionElementRef.value&&await this.instructionElementRef.value.animate([{opacity:e?0:1},{opacity:e?1:0}],{duration:100,easing:"ease",fill:"forwards"}).finished}onBoxClick(){this.value||this.instructionHidden||this.focusInput()}onBlur(){this.value||!this.instructionHidden||this.pasting||this.focusInstruction()}checkHidden(){this.instructionHidden&&this.focusInput()}async onPasteClick(){this.pasting=!0;const e=await navigator.clipboard.readText();a.Rv.setReceiverAddress(e),this.focusInput()}onInputChange(e){this.pasting=!1;const t=e.target;t.value&&!this.instructionHidden&&this.focusInput(),a.Rv.setLoading(!0),this.onDebouncedSearch(t.value)}};u.styles=l,c([(0,r.MZ)()],u.prototype,"value",void 0),c([(0,r.wk)()],u.prototype,"instructionHidden",void 0),c([(0,r.wk)()],u.prototype,"pasting",void 0),u=c([(0,s.customElement)("w3m-input-address")],u)},92530:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(35748),a=i(87792),s=i(98414);const l=o.AH` :host { width: 100%; height: 100px; border-radius: var(--wui-border-radius-s); border: 1px solid var(--wui-color-gray-glass-002); background-color: var(--wui-color-gray-glass-002); transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg); will-change: background-color; } :host(:hover) { background-color: var(--wui-color-gray-glass-005); } wui-flex { width: 100%; height: fit-content; } wui-button { width: 100%; display: flex; justify-content: flex-end; } wui-input-amount { mask-image: linear-gradient( 270deg, transparent 0px, transparent 8px, black 24px, black 25px, black 32px, black 100% ); } .totalValue { width: 100%; } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{render(){return o.qy` <wui-flex flexDirection="column" gap="4xs" .padding=${["xl","s","l","l"]} > <wui-flex alignItems="center"> <wui-input-amount @inputChange=${this.onInputChange.bind(this)} ?disabled=${!this.token&&!0} .value=${this.sendTokenAmount?String(this.sendTokenAmount):""} ></wui-input-amount> ${this.buttonTemplate()} </wui-flex> <wui-flex alignItems="center" justifyContent="space-between"> ${this.sendValueTemplate()} <wui-flex alignItems="center" gap="4xs" justifyContent="flex-end"> ${this.maxAmountTemplate()} ${this.actionTemplate()} </wui-flex> </wui-flex> </wui-flex>`}buttonTemplate(){return this.token?o.qy`<wui-token-button text=${this.token.symbol} imageSrc=${this.token.iconUrl} @click=${this.handleSelectButtonClick.bind(this)} > </wui-token-button>`:o.qy`<wui-button size="md" variant="accent" @click=${this.handleSelectButtonClick.bind(this)} >Select token</wui-button >`}handleSelectButtonClick(){a.IN.push("WalletSendSelectToken")}sendValueTemplate(){if(this.token&&this.sendTokenAmount){const e=this.token.price*this.sendTokenAmount;return o.qy`<wui-text class="totalValue" variant="small-400" color="fg-200" >${e?`$${s.UiHelperUtil.formatNumberToLocalString(e,2)}`:"Incorrect value"}</wui-text >`}return null}maxAmountTemplate(){return this.token?this.sendTokenAmount&&this.sendTokenAmount>Number(this.token.quantity.numeric)?o.qy` <wui-text variant="small-400" color="error-100"> ${s.UiHelperUtil.roundNumber(Number(this.token.quantity.numeric),6,5)} </wui-text>`:o.qy` <wui-text variant="small-400" color="fg-200"> ${s.UiHelperUtil.roundNumber(Number(this.token.quantity.numeric),6,5)} </wui-text>`:null}actionTemplate(){return this.token?this.sendTokenAmount&&this.sendTokenAmount>Number(this.token.quantity.numeric)?o.qy`<wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>`:o.qy`<wui-link @click=${this.onMaxClick.bind(this)}>Max</wui-link>`:null}onInputChange(e){a.Rv.setTokenAmount(e.detail)}onMaxClick(){if(this.token&&void 0!==this.gasPrice){const e=void 0===this.token.address||Object.values(a.oU.NATIVE_TOKEN_ADDRESS).some((e=>this.token?.address===e)),t=n.Se.bigNumber(this.gasPrice).shiftedBy(-this.token.quantity.decimals),i=e?n.Se.bigNumber(this.token.quantity.numeric).minus(t):n.Se.bigNumber(this.token.quantity.numeric);a.Rv.setTokenAmount(Number(i.toFixed(20)))}}onBuyClick(){a.IN.push("OnRampProviders")}};u.styles=l,c([(0,r.MZ)({type:Object})],u.prototype,"token",void 0),c([(0,r.MZ)({type:Number})],u.prototype,"sendTokenAmount",void 0),c([(0,r.MZ)({type:Number})],u.prototype,"gasPriceInUSD",void 0),c([(0,r.MZ)({type:Number})],u.prototype,"gasPrice",void 0),u=c([(0,s.customElement)("w3m-input-token")],u)},17505:(e,t,i)=>{var o=i(12618),r=i(87792),n=i(98414);const a=o.AH` :host { display: flex; align-items: center; justify-content: center; } wui-checkbox { padding: var(--wui-spacing-s); } a { text-decoration: none; color: var(--wui-color-fg-150); font-weight: 500; } `;var s=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let l=class extends o.WF{render(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.Hd.state,i=r.Hd.state.features?.legalCheckbox;return(e||t)&&i?o.qy` <wui-checkbox data-testid="wui-checkbox"> <wui-text color="fg-250" variant="small-400" align="left"> I agree to our ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()} </wui-text> </wui-checkbox> `:null}andTemplate(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.Hd.state;return e&&t?"and":""}termsTemplate(){const{termsConditionsUrl:e}=r.Hd.state;return e?o.qy`<a rel="noreferrer" target="_blank" href=${e}>terms of service</a>`:null}privacyTemplate(){const{privacyPolicyUrl:e}=r.Hd.state;return e?o.qy`<a rel="noreferrer" target="_blank" href=${e}>privacy policy</a>`:null}};l.styles=[a],l=s([(0,n.customElement)("w3m-legal-checkbox")],l)},56075:(e,t,i)=>{var o=i(12618),r=i(87792),n=i(98414);const a=o.AH` wui-flex { background-color: var(--wui-color-gray-glass-005); } a { text-decoration: none; color: var(--wui-color-fg-175); font-weight: 500; } `;var s=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let l=class extends o.WF{render(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.Hd.state,i=r.Hd.state.features?.legalCheckbox;return e||t?i?null:o.qy` <wui-flex .padding=${["m","s","s","s"]} justifyContent="center"> <wui-text color="fg-250" variant="small-400" align="center"> By connecting your wallet, you agree to our <br /> ${this.termsTemplate()} ${this.andTemplate()} ${this.privacyTemplate()} </wui-text> </wui-flex> `:null}andTemplate(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.Hd.state;return e&&t?"and":""}termsTemplate(){const{termsConditionsUrl:e}=r.Hd.state;return e?o.qy`<a href=${e}>Terms of Service</a>`:null}privacyTemplate(){const{privacyPolicyUrl:e}=r.Hd.state;return e?o.qy`<a href=${e}>Privacy Policy</a>`:null}};l.styles=[a],l=s([(0,n.customElement)("w3m-legal-footer")],l)},15177:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(87792),a=i(98414);const s=o.AH` :host { display: block; padding: 0 var(--wui-spacing-xl) var(--wui-spacing-xl); } `;var l=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let c=class extends o.WF{constructor(){super(...arguments),this.wallet=void 0}render(){if(!this.wallet)return this.style.display="none",null;const{name:e,app_store:t,play_store:i,chrome_store:r,homepage:s}=this.wallet,l=n.wE.isMobile(),c=n.wE.isIos(),u=n.wE.isAndroid(),p=[t,i,s,r].filter(Boolean).length>1,d=a.UiHelperUtil.getTruncateString({string:e,charsStart:12,charsEnd:0,truncate:"end"});return p&&!l?o.qy` <wui-cta-button label=${`Don't have ${d}?`} buttonLabel="Get" @click=${()=>n.IN.push("Downloads",{wallet:this.wallet})} ></wui-cta-button> `:!p&&s?o.qy` <wui-cta-button label=${`Don't have ${d}?`} buttonLabel="Get" @click=${this.onHomePage.bind(this)} ></wui-cta-button> `:t&&c?o.qy` <wui-cta-button label=${`Don't have ${d}?`} buttonLabel="Get" @click=${this.onAppStore.bind(this)} ></wui-cta-button> `:i&&u?o.qy` <wui-cta-button label=${`Don't have ${d}?`} buttonLabel="Get" @click=${this.onPlayStore.bind(this)} ></wui-cta-button> `:(this.style.display="none",null)}onAppStore(){this.wallet?.app_store&&n.wE.openHref(this.wallet.app_store,"_blank")}onPlayStore(){this.wallet?.play_store&&n.wE.openHref(this.wallet.play_store,"_blank")}onHomePage(){this.wallet?.homepage&&n.wE.openHref(this.wallet.homepage,"_blank")}};c.styles=[s],l([(0,r.MZ)({type:Object})],c.prototype,"wallet",void 0),c=l([(0,a.customElement)("w3m-mobile-download-links")],c)},69747:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(87792),a=i(98414);const s=o.AH` :host { width: 100%; } :host > wui-flex { width: 100%; padding: var(--wui-spacing-s); border-radius: var(--wui-border-radius-xs); width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: var(--wui-spacing-s); } :host > wui-flex:hover { background-color: var(--wui-color-gray-glass-002); } .purchase-image-container { display: flex; justify-content: center; align-items: center; position: relative; width: var(--wui-icon-box-size-lg); height: var(--wui-icon-box-size-lg); } .purchase-image-container wui-image { width: 100%; height: 100%; position: relative; border-radius: calc(var(--wui-icon-box-size-lg) / 2); } .purchase-image-container wui-image::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: calc(var(--wui-icon-box-size-lg) / 2); box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); } .purchase-image-container wui-icon-box { position: absolute; right: 0; bottom: 0; transform: translate(20%, 20%); } `;var l=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let c=class extends o.WF{constructor(){super(...arguments),this.disabled=!1,this.color="inherit",this.label="Bought",this.purchaseValue="",this.purchaseCurrency="",this.date="",this.completed=!1,this.inProgress=!1,this.failed=!1,this.onClick=null,this.symbol=""}firstUpdated(){this.icon||this.fetchTokenImage()}render(){return o.qy` <wui-flex> ${this.imageTemplate()} <wui-flex flexDirection="column" gap="4xs" flexGrow="1"> <wui-flex gap="xxs" alignItems="center" justifyContent="flex-start"> ${this.statusIconTemplate()} <wui-text variant="paragraph-500" color="fg-100"> ${this.label}</wui-text> </wui-flex> <wui-text variant="small-400" color="fg-200"> + ${this.purchaseValue} ${this.purchaseCurrency} </wui-text> </wui-flex> ${this.inProgress?o.qy`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:o.qy`<wui-text variant="micro-700" color="fg-300"><span>${this.date}</span></wui-text>`} </wui-flex> `}async fetchTokenImage(){await n.Np._fetchTokenImage(this.purchaseCurrency)}statusIconTemplate(){return this.inProgress?null:this.completed?this.boughtIconTemplate():this.errorIconTemplate()}errorIconTemplate(){return o.qy`<wui-icon-box size="xxs" iconColor="error-100" backgroundColor="error-100" background="opaque" icon="close" borderColor="wui-color-bg-125" ></wui-icon-box>`}imageTemplate(){const e=this.icon||`https://avatar.vercel.sh/andrew.svg?size=50&text=${this.symbol}`;return o.qy`<wui-flex class="purchase-image-container"> <wui-image src=${e}></wui-image> </wui-flex>`}boughtIconTemplate(){return o.qy`<wui-icon-box size="xxs" iconColor="success-100" backgroundColor="success-100" background="opaque" icon="arrowBottom" borderColor="wui-color-bg-125" ></wui-icon-box>`}};c.styles=[s],l([(0,r.MZ)({type:Boolean})],c.prototype,"disabled",void 0),l([(0,r.MZ)()],c.prototype,"color",void 0),l([(0,r.MZ)()],c.prototype,"label",void 0),l([(0,r.MZ)()],c.prototype,"purchaseValue",void 0),l([(0,r.MZ)()],c.prototype,"purchaseCurrency",void 0),l([(0,r.MZ)()],c.prototype,"date",void 0),l([(0,r.MZ)({type:Boolean})],c.prototype,"completed",void 0),l([(0,r.MZ)({type:Boolean})],c.prototype,"inProgress",void 0),l([(0,r.MZ)({type:Boolean})],c.prototype,"failed",void 0),l([(0,r.MZ)()],c.prototype,"onClick",void 0),l([(0,r.MZ)()],c.prototype,"symbol",void 0),l([(0,r.MZ)()],c.prototype,"icon",void 0),c=l([(0,a.customElement)("w3m-onramp-activity-item")],c)},71102:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=i(87792),s=i(98414);const l=o.AH` :host { width: 100%; } wui-loading-spinner { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .currency-container { position: absolute; top: 50%; transform: translateY(-50%); right: var(--wui-spacing-1xs); height: 40px; padding: var(--wui-spacing-xs) var(--wui-spacing-1xs) var(--wui-spacing-xs) var(--wui-spacing-xs); min-width: 95px; border-radius: var(--FULL, 1000px); border: 1px solid var(--wui-color-gray-glass-002); background: var(--wui-color-gray-glass-002); cursor: pointer; } .currency-container > wui-image { height: 24px; width: 24px; border-radius: 50%; } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.type="Token",this.value=0,this.currencies=[],this.selectedCurrency=this.currencies?.[0],this.currencyImages=a.jQ.state.currencyImages,this.tokenImages=a.jQ.state.tokenImages,this.unsubscribe.push(a.aG.subscribeKey("purchaseCurrency",(e=>{e&&"Fiat"!==this.type&&(this.selectedCurrency=this.formatPurchaseCurrency(e))})),a.aG.subscribeKey("paymentCurrency",(e=>{e&&"Token"!==this.type&&(this.selectedCurrency=this.formatPaymentCurrency(e))})),a.aG.subscribe((e=>{"Fiat"===this.type?this.currencies=e.purchaseCurrencies.map(this.formatPurchaseCurrency):this.currencies=e.paymentCurrencies.map(this.formatPaymentCurrency)})),a.jQ.subscribe((e=>{this.currencyImages={...e.currencyImages},this.tokenImages={...e.tokenImages}})))}firstUpdated(){a.aG.getAvailableCurrencies()}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=this.selectedCurrency?.symbol||"",t=this.currencyImages[e]||this.tokenImages[e];return o.qy`<wui-input-text type="number" size="lg" value=${this.value}> ${this.selectedCurrency?o.qy` <wui-flex class="currency-container" justifyContent="space-between" alignItems="center" gap="xxs" @click=${()=>a.W3.open({view:`OnRamp${this.type}Select`})} > <wui-image src=${(0,n.J)(t)}></wui-image> <wui-text color="fg-100">${this.selectedCurrency.symbol}</wui-text> </wui-flex>`:o.qy`<wui-loading-spinner></wui-loading-spinner>`} </wui-input-text>`}formatPaymentCurrency(e){return{name:e.id,symbol:e.id}}formatPurchaseCurrency(e){return{name:e.name,symbol:e.symbol}}};u.styles=l,c([(0,r.MZ)({type:String})],u.prototype,"type",void 0),c([(0,r.MZ)({type:Number})],u.prototype,"value",void 0),c([(0,r.wk)()],u.prototype,"currencies",void 0),c([(0,r.wk)()],u.prototype,"selectedCurrency",void 0),c([(0,r.wk)()],u.prototype,"currencyImages",void 0),c([(0,r.wk)()],u.prototype,"tokenImages",void 0),u=c([(0,s.customElement)("w3m-onramp-input")],u)},35923:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=i(87792),s=i(98414);const l=o.AH` button { padding: var(--wui-spacing-s); border-radius: var(--wui-border-radius-xs); border: none; outline: none; background-color: var(--wui-color-gray-glass-002); width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: var(--wui-spacing-s); transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md); will-change: background-color; } button:hover { background-color: var(--wui-color-gray-glass-005); } .provider-image { width: var(--wui-spacing-3xl); min-width: var(--wui-spacing-3xl); height: var(--wui-spacing-3xl); border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); position: relative; overflow: hidden; } .provider-image::after { content: ''; display: block; width: 100%; height: 100%; position: absolute; inset: 0; border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); } .network-icon { width: var(--wui-spacing-m); height: var(--wui-spacing-m); border-radius: calc(var(--wui-spacing-m) / 2); overflow: hidden; box-shadow: 0 0 0 3px var(--wui-color-gray-glass-002), 0 0 0 3px var(--wui-color-modal-bg); transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md); will-change: box-shadow; } button:hover .network-icon { box-shadow: 0 0 0 3px var(--wui-color-gray-glass-005), 0 0 0 3px var(--wui-color-modal-bg); } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{constructor(){super(...arguments),this.disabled=!1,this.color="inherit",this.label="",this.feeRange="",this.loading=!1,this.onClick=null}render(){return o.qy` <button ?disabled=${this.disabled} ontouchstart> <wui-visual name=${(0,n.J)(this.name)} class="provider-image"></wui-visual> <wui-flex flexDirection="column" gap="4xs"> <wui-text variant="paragraph-500" color="fg-100">${this.label}</wui-text> <wui-flex alignItems="center" justifyContent="flex-start" gap="l"> <wui-text variant="tiny-500" color="fg-100"> <wui-text variant="tiny-400" color="fg-200">Fees</wui-text> ${this.feeRange} </wui-text> <wui-flex gap="xxs"> <wui-icon name="bank" size="xs" color="fg-150"></wui-icon> <wui-icon name="card" size="xs" color="fg-150"></wui-icon> </wui-flex> ${this.networksTemplate()} </wui-flex> </wui-flex> ${this.loading?o.qy`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:o.qy`<wui-icon name="chevronRight" color="fg-200" size="sm"></wui-icon>`} </button> `}networksTemplate(){const e=a.WB.getAllRequestedCaipNetworks(),t=e?.filter((e=>e?.assets?.imageId))?.slice(0,5);return o.qy` <wui-flex class="networks"> ${t?.map((e=>o.qy` <wui-flex class="network-icon"> <wui-image src=${(0,n.J)(a.$m.getNetworkImage(e))}></wui-image> </wui-flex> `))} </wui-flex> `}};u.styles=[l],c([(0,r.MZ)({type:Boolean})],u.prototype,"disabled",void 0),c([(0,r.MZ)()],u.prototype,"color",void 0),c([(0,r.MZ)()],u.prototype,"name",void 0),c([(0,r.MZ)()],u.prototype,"label",void 0),c([(0,r.MZ)()],u.prototype,"feeRange",void 0),c([(0,r.MZ)({type:Boolean})],u.prototype,"loading",void 0),c([(0,r.MZ)()],u.prototype,"onClick",void 0),u=c([(0,s.customElement)("w3m-onramp-provider-item")],u)},62740:(e,t,i)=>{var o=i(12618),r=i(87792),n=i(98414),a=i(72088);const s=o.AH` wui-flex { border-top: 1px solid var(--wui-color-gray-glass-005); } a { text-decoration: none; color: var(--wui-color-fg-175); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: var(--wui-spacing-3xs); } `;var l=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let c=class extends o.WF{render(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.Hd.state;return e||t?o.qy` <wui-flex .padding=${["m","s","s","s"]} flexDirection="column" alignItems="center" justifyContent="center" gap="s" > <wui-text color="fg-250" variant="small-400" 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 o.qy` <wui-link @click=${this.onWhatIsBuy.bind(this)}> <wui-icon size="xs" color="accent-100" slot="iconLeft" name="helpCircle"></wui-icon> How does it work? </wui-link>`}onWhatIsBuy(){r.En.sendEvent({type:"track",event:"SELECT_WHAT_IS_A_BUY",properties:{isSmartAccount:r.Uj.state.preferredAccountType===a.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}}),r.IN.push("WhatIsABuy")}};c.styles=[s],c=l([(0,n.customElement)("w3m-onramp-providers-footer")],c)},92565:(e,t,i)=>{var o=i(12618),r=i(87792),n=i(98414);const a=o.AH` :host { display: flex; justify-content: center; gap: var(--wui-spacing-2xl); } wui-visual-thumbnail:nth-child(1) { z-index: 1; } `;var s=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let l=class extends o.WF{constructor(){super(...arguments),this.dappImageUrl=r.Hd.state.metadata?.icons,this.walletImageUrl=r.Uj.state.connectedWalletInfo?.icon}firstUpdated(){const e=this.shadowRoot?.querySelectorAll("wui-visual-thumbnail");e?.[0]&&this.createAnimation(e[0],"translate(18px)"),e?.[1]&&this.createAnimation(e[1],"translate(-18px)")}render(){return o.qy` <wui-visual-thumbnail ?borderRadiusFull=${!0} .imageSrc=${this.dappImageUrl?.[0]} ></wui-visual-thumbnail> <wui-visual-thumbnail .imageSrc=${this.walletImageUrl}></wui-visual-thumbnail> `}createAnimation(e,t){e.animate([{transform:"translateX(0px)"},{transform:t}],{duration:1600,easing:"cubic-bezier(0.56, 0, 0.48, 1)",direction:"alternate",iterations:1/0})}};l.styles=a,l=s([(0,n.customElement)("w3m-siwx-sign-message-thumbnails")],l)},7463:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(87792),a=i(98414);const s=o.AH` :host { display: block; position: absolute; opacity: 0; pointer-events: none; top: 11px; left: 50%; width: max-content; } `;var l=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};const c={loading:void 0,success:{backgroundColor:"success-100",iconColor:"success-100",icon:"checkmark"},error:{backgroundColor:"error-100",iconColor:"error-100",icon:"close"}};let u=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.timeout=void 0,this.open=n.Pt.state.open,this.unsubscribe.push(n.Pt.subscribeKey("open",(e=>{this.open=e,this.onOpen()})))}disconnectedCallback(){clearTimeout(this.timeout),this.unsubscribe.forEach((e=>e()))}render(){const{message:e,variant:t,svg:i}=n.Pt.state,r=c[t],{icon:a,iconColor:s}=i??r??{};return o.qy` <wui-snackbar message=${e} backgroundColor=${r?.backgroundColor} iconColor=${s} icon=${a} .loading=${"loading"===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),n.Pt.state.autoClose&&(this.timeout=setTimeout((()=>n.Pt.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"})}};u.styles=s,l([(0,r.wk)()],u.prototype,"open",void 0),u=l([(0,a.customElement)("w3m-snackbar")],u)},48236:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=i(87792),s=i(98414),l=i(7689);const c=o.AH` :host { margin-top: var(--wui-spacing-3xs); } wui-separator { margin: var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1) var(--wui-spacing-xs) calc(var(--wui-spacing-m) * -1); width: calc(100% + var(--wui-spacing-s) * 2); } `;var u=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let p=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.tabIdx=void 0,this.connectors=a.aK.state.connectors,this.authConnector=this.connectors.find((e=>"AUTH"===e.type)),this.features=a.Hd.state.features,this.unsubscribe.push(a.aK.subscribeKey("connectors",(e=>{this.connectors=e,this.authConnector=this.connectors.find((e=>"AUTH"===e.type))})),a.Hd.subscribeKey("features",(e=>this.features=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){let e=this.features?.socials||[];const t=Boolean(this.authConnector),i=e?.length,r="ConnectSocials"===a.IN.state.view;return t&&i||r?(r&&!i&&(e=a.oU.DEFAULT_FEATURES.socials),o.qy` <wui-flex flexDirection="column" gap="xs"> ${e.map((e=>o.qy`<wui-list-social @click=${()=>{this.onSocialClick(e)}} name=${e} logo=${e} tabIdx=${(0,n.J)(this.tabIdx)} ></wui-list-social>`))} </wui-flex>`):null}async onSocialClick(e){if(e&&(a.Uj.setSocialProvider(e,a.WB.state.activeChain),a.En.sendEvent({type:"track",event:"SOCIAL_LOGIN_STARTED",properties:{provider:e}})),e===l.iV.Farcaster){a.IN.push("ConnectingFarcaster");const e=a.aK.getAuthConnector();if(e&&!a.Uj.state.farcasterUrl)try{const{url:t}=await e.provider.getFarcasterUri();a.Uj.setFarcasterUrl(t,a.WB.state.activeChain)}catch(e){a.IN.goBack(),a.Pt.showError(e)}}else{a.IN.push("ConnectingSocial");const t=a.aK.getAuthConnector();this.popupWindow=a.wE.returnOpenHref("","popupWindow","width=600,height=800,scrollbars=yes");try{if(t&&e){const{uri:i}=await t.provider.getSocialRedirectUri({provider:e});if(!this.popupWindow||!i)throw this.popupWindow?.close(),new Error("Something went wrong");a.Uj.setSocialWindow(this.popupWindow,a.WB.state.activeChain),this.popupWindow.location.href=i}}catch(e){this.popupWindow?.close(),a.Pt.showError("Something went wrong")}}}};p.styles=c,u([(0,r.MZ)()],p.prototype,"tabIdx",void 0),u([(0,r.wk)()],p.prototype,"connectors",void 0),u([(0,r.wk)()],p.prototype,"authConnector",void 0),u([(0,r.wk)()],p.prototype,"features",void 0),p=u([(0,s.customElement)("w3m-social-login-list")],p)},92324:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=i(35748),s=i(87792),l=i(98414),c=i(7689);const u=o.AH` wui-separator { margin: var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1) var(--wui-spacing-m) calc(var(--wui-spacing-m) * -1); width: calc(100% + var(--wui-spacing-s) * 2); } `;var p=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let d=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.walletGuide="get-started",this.tabIdx=void 0,this.connectors=s.aK.state.connectors,this.features=s.Hd.state.features,this.authConnector=this.connectors.find((e=>"AUTH"===e.type)),this.unsubscribe.push(s.aK.subscribeKey("connectors",(e=>{this.connectors=e,this.authConnector=this.connectors.find((e=>"AUTH"===e.type))})),s.Hd.subscribeKey("features",(e=>this.features=e)))}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){return o.qy` <wui-flex class="container" flexDirection="column" gap="xs" data-testid="w3m-social-login-widget" > ${this.topViewTemplate()}${this.bottomViewTemplate()} </wui-flex> `}topViewTemplate(){const e="explore"===this.walletGuide;let t=this.features?.socials;return!t&&e?(t=s.oU.DEFAULT_FEATURES.socials,this.renderTopViewContent(t)):t?this.renderTopViewContent(t):null}renderTopViewContent(e){return 2===e.length?o.qy` <wui-flex gap="xs"> ${e.slice(0,2).map((e=>o.qy`<wui-logo-select data-testid=${`social-selector-${e}`} @click=${()=>{this.onSocialClick(e)}} logo=${e} tabIdx=${(0,n.J)(this.tabIdx)} ></wui-logo-select>`))} </wui-flex>`:o.qy` <wui-list-social data-testid=${`social-selector-${e[0]}`} @click=${()=>{this.onSocialClick(e[0])}} logo=${(0,n.J)(e[0])} align="center" name=${`Continue with ${e[0]}`} tabIdx=${(0,n.J)(this.tabIdx)} ></wui-list-social>`}bottomViewTemplate(){let e=this.features?.socials;const t="explore"===this.walletGuide;return(!this.authConnector||!e||!e?.length)&&t&&(e=s.oU.DEFAULT_FEATURES.socials),e?e.length<=2?null:e&&e.length>6?o.qy`<wui-flex gap="xs"> ${e.slice(1,5).map((e=>o.qy`<wui-logo-select data-testid=${`social-selector-${e}`} @click=${()=>{this.onSocialClick(e)}} logo=${e} tabIdx=${(0,n.J)(this.tabIdx)} ></wui-logo-select>`))} <wui-logo-select logo="more" tabIdx=${(0,n.J)(this.tabIdx)} @click=${this.onMoreSocialsClick.bind(this)} ></wui-logo-select> </wui-flex>`:e?o.qy`<wui-flex gap="xs"> ${e.slice(1,e.length).map((e=>o.qy`<wui-logo-select data-testid=${`social-selector-${e}`} @click=${()=>{this.onSocialClick(e)}} logo=${e} tabIdx=${(0,n.J)(this.tabIdx)} ></wui-logo-select>`))} </wui-flex>`:null:null}onMoreSocialsClick(){s.IN.push("ConnectSocials")}async onSocialClick(e){if(!a.oU.AUTH_CONNECTOR_SUPPORTED_CHAINS.find((e=>e===s.WB.state.activeChain))){const e=s.WB.getFirstCaipNetworkSupportsAuthConnector();if(e)return void s.IN.push("SwitchNetwork",{network:e})}if(e&&(s.Uj.setSocialProvider(e,s.WB.state.activeChain),s.En.sendEvent({type:"track",event:"SOCIAL_LOGIN_STARTED",properties:{provider:e}})),e===c.iV.Farcaster){s.IN.push("ConnectingFarcaster");const e=s.aK.getAuthConnector();if(e&&!s.Uj.state.farcasterUrl)try{const{url:t}=await e.provider.getFarcasterUri();s.Uj.setFarcasterUrl(t,s.WB.state.activeChain)}catch(e){s.IN.goBack(),s.Pt.showError(e)}}else{s.IN.push("ConnectingSocial");const t=s.aK.getAuthConnector();this.popupWindow=s.wE.returnOpenHref("","popupWindow","width=600,height=800,scrollbars=yes");try{if(t&&e){const{uri:i}=await t.provider.getSocialRedirectUri({provider:e});if(!this.popupWindow||!i)throw this.popupWindow?.close(),new Error("Something went wrong");s.Uj.setSocialWindow(this.popupWindow,s.WB.state.activeChain),this.popupWindow.location.href=i}}catch(e){this.popupWindow?.close(),s.Pt.showError("Something went wrong")}}}};d.styles=u,p([(0,r.MZ)()],d.prototype,"walletGuide",void 0),p([(0,r.MZ)()],d.prototype,"tabIdx",void 0),p([(0,r.wk)()],d.prototype,"connectors",void 0),p([(0,r.wk)()],d.prototype,"features",void 0),p([(0,r.wk)()],d.prototype,"authConnector",void 0),d=p([(0,l.customElement)("w3m-social-login-widget")],d)},72258:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(35748),a=i(87792),s=i(98414);const l=o.AH` :host { width: 100%; } .details-container > wui-flex { background: var(--wui-color-gray-glass-002); border-radius: var(--wui-border-radius-xxs); width: 100%; } .details-container > wui-flex > button { border: none; background: none; padding: var(--wui-spacing-s); border-radius: var(--wui-border-radius-xxs); cursor: pointer; } .details-content-container { padding: var(--wui-spacing-1xs); padding-top: 0px; display: flex; align-items: center; justify-content: center; } .details-content-container > wui-flex { width: 100%; } .details-row { width: 100%; padding: var(--wui-spacing-s); padding-left: var(--wui-spacing-s); padding-right: var(--wui-spacing-1xs); border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs)); background: var(--wui-color-gray-glass-002); } .details-row-title { white-space: nowrap; } .details-row.provider-free-row { padding-right: var(--wui-spacing-xs); } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};const u=a.oU.CONVERT_SLIPPAGE_TOLERANCE;let p=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.networkName=a.WB.state.activeCaipNetwork?.name,this.detailsOpen=!1,this.sourceToken=a.GN.state.sourceToken,this.toToken=a.GN.state.toToken,this.toTokenAmount=a.GN.state.toTokenAmount,this.sourceTokenPriceInUSD=a.GN.state.sourceTokenPriceInUSD,this.toTokenPriceInUSD=a.GN.state.toTokenPriceInUSD,this.gasPriceInUSD=a.GN.state.gasPriceInUSD,this.priceImpact=a.GN.state.priceImpact,this.maxSlippage=a.GN.state.maxSlippage,this.networkTokenSymbol=a.GN.state.networkTokenSymbol,this.inputError=a.GN.state.inputError,this.unsubscribe.push(a.GN.subscribe((e=>{this.sourceToken=e.sourceToken,this.toToken=e.toToken,this.toTokenAmount=e.toTokenAmount,this.gasPriceInUSD=e.gasPriceInUSD,this.priceImpact=e.priceImpact,this.maxSlippage=e.maxSlippage,this.sourceTokenPriceInUSD=e.sourceTokenPriceInUSD,this.toTokenPriceInUSD=e.toTokenPriceInUSD,this.inputError=e.inputError})))}render(){const e=this.toTokenAmount&&this.maxSlippage?n.Se.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError)return null;const t=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return o.qy` <wui-flex flexDirection="column" alignItems="center" gap="1xs" class="details-container"> <wui-flex flexDirection="column"> <button @click=${this.toggleDetails.bind(this)}> <wui-flex justifyContent="space-between" .padding=${["0","xs","0","xs"]}> <wui-flex justifyContent="flex-start" flexGrow="1" gap="xs"> <wui-text variant="small-400" color="fg-100"> 1 ${this.sourceToken.symbol} = ${s.UiHelperUtil.formatNumberToLocalString(t,3)} ${this.toToken.symbol} </wui-text> <wui-text variant="small-400" color="fg-200"> $${s.UiHelperUtil.formatNumberToLocalString(this.sourceTokenPriceInUSD)} </wui-text> </wui-flex> <wui-icon name="chevronBottom"></wui-icon> </wui-flex> </button> ${this.detailsOpen?o.qy` <wui-flex flexDirection="column" gap="xs" class="details-content-container"> <wui-flex flexDirection="column" gap="xs"> <wui-flex justifyContent="space-between" alignItems="center" class="details-row" > <wui-flex alignItems="center" gap="xs"> <wui-text class="details-row-title" variant="small-400" color="fg-150"> Network cost </wui-text> <w3m-tooltip-trigger text=${`Network cost is paid in ${this.networkTokenSymbol} on the ${this.networkName} network in order to execute transaction.`} > <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> </w3m-tooltip-trigger> </wui-flex> <wui-text variant="small-400" color="fg-100"> $${s.UiHelperUtil.formatNumberToLocalString(this.gasPriceInUSD,3)} </wui-text> </wui-flex> </wui-flex> ${this.priceImpact?o.qy` <wui-flex flexDirection="column" gap="xs"> <wui-flex justifyContent="space-between" alignItems="center" class="details-row" > <wui-flex alignItems="center" gap="xs"> <wui-text class="details-row-title" variant="small-400" color="fg-150"> Price impact </wui-text> <w3m-tooltip-trigger text="Price impact reflects the change in market price due to your trade" > <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> </w3m-tooltip-trigger> </wui-flex> <wui-flex> <wui-text variant="small-400" color="fg-200"> ${s.UiHelperUtil.formatNumberToLocalString(this.priceImpact,3)}% </wui-text> </wui-flex> </wui-flex> </wui-flex>`:null} ${this.maxSlippage&&this.sourceToken.symbol?o.qy`<wui-flex flexDirection="column" gap="xs"> <wui-flex justifyContent="space-between" alignItems="center" class="details-row" > <wui-flex alignItems="center" gap="xs"> <wui-text class="details-row-title" variant="small-400" color="fg-150"> Max. slippage </wui-text> <w3m-tooltip-trigger text=${"Max slippage sets the minimum amount you must receive for the transaction to proceed. "+(e?`Transaction will be reversed if you receive less than ${s.UiHelperUtil.formatNumberToLocalString(e,6)} ${this.toToken.symbol} due to price changes.`:"")} > <wui-icon size="xs" color="fg-250" name="infoCircle"></wui-icon> </w3m-tooltip-trigger> </wui-flex> <wui-flex> <wui-text variant="small-400" color="fg-200"> ${s.UiHelperUtil.formatNumberToLocalString(this.maxSlippage,6)} ${this.toToken.symbol} ${u}% </wui-text> </wui-flex> </wui-flex> </wui-flex>`:null} <wui-flex flexDirection="column" gap="xs"> <wui-flex justifyContent="space-between" alignItems="center" class="details-row provider-free-row" > <wui-flex alignItems="center" gap="xs"> <wui-text class="details-row-title" variant="small-400" color="fg-150"> Provider fee </wui-text> </wui-flex> <wui-flex> <wui-text variant="small-400" color="fg-200">0.85%</wui-text> </wui-flex> </wui-flex> </wui-flex> </wui-flex> `:null} </wui-flex> </wui-flex> `}toggleDetails(){this.detailsOpen=!this.detailsOpen}};p.styles=[l],c([(0,r.wk)()],p.prototype,"networkName",void 0),c([(0,r.MZ)()],p.prototype,"detailsOpen",void 0),c([(0,r.wk)()],p.prototype,"sourceToken",void 0),c([(0,r.wk)()],p.prototype,"toToken",void 0),c([(0,r.wk)()],p.prototype,"toTokenAmount",void 0),c([(0,r.wk)()],p.prototype,"sourceTokenPriceInUSD",void 0),c([(0,r.wk)()],p.prototype,"toTokenPriceInUSD",void 0),c([(0,r.wk)()],p.prototype,"gasPriceInUSD",void 0),c([(0,r.wk)()],p.prototype,"priceImpact",void 0),c([(0,r.wk)()],p.prototype,"maxSlippage",void 0),c([(0,r.wk)()],p.prototype,"networkTokenSymbol",void 0),c([(0,r.wk)()],p.prototype,"inputError",void 0),p=c([(0,s.customElement)("w3m-swap-details")],p)},25148:(e,t,i)=>{var o=i(12618),r=i(25707),n=(i(87792),i(98414));const a=o.AH` :host { width: 100%; } :host > wui-flex { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: var(--wui-border-radius-s); padding: var(--wui-spacing-xl); padding-right: var(--wui-spacing-s); background-color: var(--wui-color-gray-glass-002); box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002); width: 100%; height: 100px; box-sizing: border-box; position: relative; } wui-shimmer.market-value { opacity: 0; } :host > wui-flex > svg.input_mask { position: absolute; inset: 0; z-index: 5; } :host wui-flex .input_mask__border, :host wui-flex .input_mask__background { transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1); will-change: fill; } :host wui-flex .input_mask__border { fill: var(--wui-color-gray-glass-020); } :host wui-flex .input_mask__background { fill: var(--wui-color-gray-glass-002); } `;var s=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let l=class extends o.WF{constructor(){super(...arguments),this.target="sourceToken"}render(){return o.qy` <wui-flex class justifyContent="space-between"> <wui-flex flex="1" flexDirection="column" alignItems="flex-start" justifyContent="center" class="swap-input" gap="xxs" > <wui-shimmer width="80px" height="40px" borderRadius="xxs" variant="light"></wui-shimmer> </wui-flex> ${this.templateTokenSelectButton()} </wui-flex> `}templateTokenSelectButton(){return o.qy` <wui-flex class="swap-token-button" flexDirection="column" alignItems="flex-end" justifyContent="center" gap="xxs" > <wui-shimmer width="80px" height="40px" borderRadius="3xl" variant="light"></wui-shimmer> </wui-flex> `}};l.styles=[a],s([(0,r.MZ)()],l.prototype,"target",void 0),l=s([(0,n.customElement)("w3m-swap-input-skeleton")],l)},11744:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(35748),a=i(87792),s=i(98414);const l=o.AH` :host > wui-flex { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-radius: var(--wui-border-radius-s); background-color: var(--wui-color-gray-glass-002); padding: var(--wui-spacing-xl); padding-right: var(--wui-spacing-s); width: 100%; height: 100px; box-sizing: border-box; box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002); position: relative; transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg); will-change: background-color; } :host wui-flex.focus { box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005); } :host > wui-flex .swap-input, :host > wui-flex .swap-token-button { z-index: 10; } :host > wui-flex .swap-input { -webkit-mask-image: linear-gradient( 270deg, transparent 0px, transparent 8px, black 24px, black 25px, black 32px, black 100% ); mask-image: linear-gradient( 270deg, transparent 0px, transparent 8px, black 24px, black 25px, black 32px, black 100% ); } :host > wui-flex .swap-input input { background: none; border: none; height: 42px; width: 100%; font-size: 32px; font-style: normal; font-weight: 400; line-height: 130%; letter-spacing: -1.28px; outline: none; caret-color: var(--wui-color-accent-100); color: var(--wui-color-fg-100); padding: 0px; } :host > wui-flex .swap-input input:focus-visible { outline: none; } :host > wui-flex .swap-input input::-webkit-outer-spin-button, :host > wui-flex .swap-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .max-value-button { background-color: transparent; border: none; cursor: pointer; color: var(--wui-color-gray-glass-020); padding-left: 0px; } .market-value { min-height: 18px; } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{constructor(){super(...arguments),this.focused=!1,this.price=0,this.target="sourceToken",this.onSetAmount=null,this.onSetMaxValue=null}render(){const e=this.marketValue||"0",t=n.Se.bigNumber(e).isGreaterThan("0");return o.qy` <wui-flex class="${this.focused?"focus":""}" justifyContent="space-between"> <wui-flex flex="1" flexDirection="column" alignItems="flex-start" justifyContent="center" class="swap-input" > <input data-testid="swap-input-${this.target}" @focusin=${()=>this.onFocusChange(!0)} @focusout=${()=>this.onFocusChange(!1)} ?disabled=${this.disabled} .value=${this.value} @input=${this.dispatchInputChangeEvent} @keydown=${this.handleKeydown} placeholder="0" type="text" inputmode="decimal" /> <wui-text class="market-value" variant="small-400" color="fg-200"> ${t?`$${s.UiHelperUtil.formatNumberToLocalString(this.marketValue,2)}`:null} </wui-text> </wui-flex> ${this.templateTokenSelectButton()} </wui-flex> `}handleKeydown(e){return n.t$.numericInputKeyDown(e,this.value,(e=>this.onSetAmount?.(this.target,e)))}dispatchInputChangeEvent(e){if(!this.onSetAmount)return;const t=e.target.value.replace(/[^0-9.]/gu,"");","===t||"."===t?this.onSetAmount(this.target,"0."):t.endsWith(",")?this.onSetAmount(this.target,t.replace(",",".")):this.onSetAmount(this.target,t)}setMaxValueToInput(){this.onSetMaxValue?.(this.target,this.balance)}templateTokenSelectButton(){return this.token?o.qy` <wui-flex class="swap-token-button" flexDirection="column" alignItems="flex-end" justifyContent="center" gap="xxs" > <wui-token-button data-testid="swap-input-token-${this.target}" text=${this.token.symbol} imageSrc=${this.token.logoUri} @click=${this.onSelectToken.bind(this)} > </wui-token-button> <wui-flex alignItems="center" gap="xxs"> ${this.tokenBalanceTemplate()} </wui-flex> </wui-flex> `:o.qy` <wui-button data-testid="swap-select-token-button-${this.target}" class="swap-token-button" size="md" variant="accent" @click=${this.onSelectToken.bind(this)} > Select token </wui-button>`}tokenBalanceTemplate(){const e=n.Se.multiply(this.balance,this.price),t=!!e&&e?.isGreaterThan(5e-5);return o.qy` ${t?o.qy`<wui-text variant="small-400" color="fg-200"> ${s.UiHelperUtil.formatNumberToLocalString(this.balance,2)} </wui-text>`:null} ${"sourceToken"===this.target?this.tokenActionButtonTemplate(t):null} `}tokenActionButtonTemplate(e){return e?o.qy` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}> <wui-text color="accent-100" variant="small-600">Max</wui-text> </button>`:o.qy` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}> <wui-text color="accent-100" variant="small-600">Buy</wui-text> </button>`}onFocusChange(e){this.focused=e}onSelectToken(){a.En.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"}),a.IN.push("SwapSelectToken",{target:this.target})}onBuyToken(){a.IN.push("OnRampProviders")}};u.styles=[l],c([(0,r.MZ)()],u.prototype,"focused",void 0),c([(0,r.MZ)()],u.prototype,"balance",void 0),c([(0,r.MZ)()],u.prototype,"value",void 0),c([(0,r.MZ)()],u.prototype,"price",void 0),c([(0,r.MZ)()],u.prototype,"marketValue",void 0),c([(0,r.MZ)()],u.prototype,"disabled",void 0),c([(0,r.MZ)()],u.prototype,"target",void 0),c([(0,r.MZ)()],u.prototype,"token",void 0),c([(0,r.MZ)()],u.prototype,"onSetAmount",void 0),c([(0,r.MZ)()],u.prototype,"onSetMaxValue",void 0),u=c([(0,s.customElement)("w3m-swap-input")],u)},82556:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(87792),a=i(98414);const s=o.AH` :host { width: 100%; display: block; } `;var l=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let c=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.text="",this.open=n.Ib.state.open,this.unsubscribe.push(n.IN.subscribeKey("view",(()=>{n.Ib.hide()})),n.W3.subscribeKey("open",(e=>{e||n.Ib.hide()})),n.Ib.subscribeKey("open",(e=>{this.open=e})))}disconnectedCallback(){this.unsubscribe.forEach((e=>e())),n.Ib.hide()}render(){return o.qy` <div @pointermove=${this.onMouseEnter.bind(this)} @pointerleave=${this.onMouseLeave.bind(this)} > ${this.renderChildren()} </div> `}renderChildren(){return o.qy`<slot></slot> `}onMouseEnter(){const e=this.getBoundingClientRect();this.open||n.Ib.showTooltip({message:this.text,triggerRect:{width:e.width,height:e.height,left:e.left,top:e.top},variant:"shade"})}onMouseLeave(e){this.contains(e.relatedTarget)||n.Ib.hide()}};c.styles=[s],l([(0,r.MZ)()],c.prototype,"text",void 0),l([(0,r.wk)()],c.prototype,"open",void 0),c=l([(0,a.customElement)("w3m-tooltip-trigger")],c)},84111:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(87792),a=i(98414);const s=o.AH` :host { pointer-events: none; } :host > wui-flex { display: var(--w3m-tooltip-display); opacity: var(--w3m-tooltip-opacity); padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s); border-radius: var(--wui-border-radius-xxs); color: var(--wui-color-bg-100); position: fixed; 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(--w3m-modal-width) - var(--wui-spacing-xl)); transition: opacity 0.2s var(--wui-ease-out-power-2); will-change: opacity; } :host([data-variant='shade']) > wui-flex { background-color: var(--wui-color-bg-150); border: 1px solid var(--wui-color-gray-glass-005); } :host([data-variant='shade']) > wui-flex > wui-text { color: var(--wui-color-fg-150); } :host([data-variant='fill']) > wui-flex { background-color: var(--wui-color-fg-100); border: none; } wui-icon { position: absolute; width: 12px !important; height: 4px !important; color: var(--wui-color-bg-150); } 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); } `;var l=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let c=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.open=n.Ib.state.open,this.message=n.Ib.state.message,this.triggerRect=n.Ib.state.triggerRect,this.variant=n.Ib.state.variant,this.unsubscribe.push(n.Ib.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 `,o.qy`<wui-flex> <wui-icon data-placement="top" color="fg-100" size="inherit" name="cursor"></wui-icon> <wui-text color="inherit" variant="small-500">${this.message}</wui-text> </wui-flex>`}};c.styles=[s],l([(0,r.wk)()],c.prototype,"open",void 0),l([(0,r.wk)()],c.prototype,"message",void 0),l([(0,r.wk)()],c.prototype,"triggerRect",void 0),l([(0,r.wk)()],c.prototype,"variant",void 0),c=l([(0,a.customElement)("w3m-tooltip")],c)},27546:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=i(87792),s=i(98414);const l=o.AH` wui-flex { width: 100%; } .wallet-guide { width: 100%; } .chip-box { width: fit-content; background-color: var(--wui-color-gray-glass-005); border-radius: var(--wui-border-radius-3xl); } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{constructor(){super(...arguments),this.walletGuide="get-started"}render(){return"explore"===this.walletGuide?o.qy`<wui-flex class="wallet-guide" flexDirection="column" alignItems="center" justifyContent="center" rowGap="xs" data-testid="w3m-wallet-guide-explore" > <wui-text variant="small-400" color="fg-200" align="center"> Looking for a self-custody wallet? </wui-text> <wui-flex class="chip-box"> <wui-chip imageIcon="walletConnectLightBrown" icon="externalLink" variant="transparent" href="https://walletguide.walletconnect.network" title="Find one on WalletGuide" ></wui-chip> </wui-flex> </wui-flex>`:o.qy`<wui-flex columnGap="4xs" flexDirection="row" alignItems="center" justifyContent="center" > <wui-text variant="small-400" class="title" color="fg-200" >Haven't got a wallet?</wui-text > <wui-link data-testid="w3m-wallet-guide-get-started" color="blue-100" class="get-started-link" @click=${this.onGetStarted} tabIdx=${(0,n.J)(this.tabIdx)} > Get started </wui-link> </wui-flex>`}onGetStarted(){a.IN.push("Create")}};u.styles=l,c([(0,r.MZ)()],u.prototype,"tabIdx",void 0),c([(0,r.MZ)()],u.prototype,"walletGuide",void 0),u=c([(0,s.customElement)("w3m-wallet-guide")],u)},69404:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=i(98414),s=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let l=class extends o.WF{constructor(){super(...arguments),this.tabIdx=void 0}render(){return o.qy` <wui-flex flexDirection="column" gap="xs"> <w3m-connector-list tabIdx=${(0,n.J)(this.tabIdx)}></w3m-connector-list> <w3m-all-wallets-widget tabIdx=${(0,n.J)(this.tabIdx)}></w3m-all-wallets-widget> </wui-flex> `}};s([(0,r.MZ)()],l.prototype,"tabIdx",void 0),l=s([(0,a.customElement)("w3m-wallet-login-list")],l)},44573:(e,t,i)=>{var o=i(12618),r=i(25707),n=i(60031),a=(i(35748),i(87792)),s=i(98414);const l=o.AH` :host { display: flex; width: auto; flex-direction: column; gap: var(--wui-border-radius-1xs); border-radius: var(--wui-border-radius-s); background: var(--wui-color-gray-glass-002); padding: var(--wui-spacing-s) var(--wui-spacing-1xs) var(--wui-spacing-1xs) var(--wui-spacing-1xs); } wui-text { padding: 0 var(--wui-spacing-1xs); } wui-flex { margin-top: var(--wui-spacing-1xs); } .network { cursor: pointer; transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg); will-change: background-color; } .network:focus-visible { border: 1px solid var(--wui-color-accent-100); background-color: var(--wui-color-gray-glass-005); -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue); -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue); box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue); } .network:hover { background-color: var(--wui-color-gray-glass-005); } .network:active { background-color: var(--wui-color-gray-glass-010); } `;var c=function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};let u=class extends o.WF{render(){return o.qy` <wui-text variant="small-400" color="fg-200">Details</wui-text> <wui-flex flexDirection="column" gap="xxs"> <wui-list-content textTitle="Network cost" textValue="$${(0,n.J)(s.UiHelperUtil.formatNumberToLocalString(this.networkFee,2))}"></wui-list-content></wui-list-content> <wui-list-content textTitle="Address" textValue=${s.UiHelperUtil.getTruncateString({string:this.receiverAddress??"",charsStart:4,charsEnd:4,truncate:"middle"})} > </wui-list-content> ${this.networkTemplate()} </wui-flex>`}networkTemplate(){return this.caipNetwork?.name?o.qy` <wui-list-content @click=${()=>this.onNetworkClick(this.caipNetwork)} class="network" textTitle="Network" imageSrc=${(0,n.J)(a.$m.getNetworkImage(this.caipNetwork))} ></wui-list-content>`:null}onNetworkClick(e){e&&a.IN.push("Networks",{network:e})}};u.styles=l,c([(0,r.MZ)()],u.prototype,"receiverAddress",void 0),c([(0,r.MZ)({type:Object})],u.prototype,"caipNetwork",void 0),c([(0,r.MZ)({type:Number})],u.prototype,"networkFee",void 0),u=c([(0,s.customElement)("w3m-wallet-send-details")],u)}}]);