1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[4845],{64845:(e,t,i)=>{i.r(t),i.d(t,{W3mBuyInProgressView:()=>K,W3mOnRampActivityView:()=>b,W3mOnRampProvidersView:()=>N,W3mOnrampFiatSelectView:()=>T,W3mOnrampTokensView:()=>B,W3mOnrampWidget:()=>er,W3mWhatIsABuyView:()=>V});var r=i(41270),o=i(12456),a=i(81440),s=i(10422),n=i(54479),c=i(61035),l=i(57754),u=i(69485),p=i(68129),d=i(97778);i(58301),i(85893),i(42303);var h=i(62586);i(46783),i(52847),i(93278);let w=(0,r.AH)` 2 :host { 3 width: 100%; 4 } 5 6 :host > wui-flex { 7 width: 100%; 8 padding: var(--wui-spacing-s); 9 border-radius: var(--wui-border-radius-xs); 10 width: 100%; 11 display: flex; 12 align-items: center; 13 justify-content: flex-start; 14 gap: var(--wui-spacing-s); 15 } 16 17 :host > wui-flex:hover { 18 background-color: var(--wui-color-gray-glass-002); 19 } 20 21 .purchase-image-container { 22 display: flex; 23 justify-content: center; 24 align-items: center; 25 position: relative; 26 width: var(--wui-icon-box-size-lg); 27 height: var(--wui-icon-box-size-lg); 28 } 29 30 .purchase-image-container wui-image { 31 width: 100%; 32 height: 100%; 33 position: relative; 34 border-radius: calc(var(--wui-icon-box-size-lg) / 2); 35 } 36 37 .purchase-image-container wui-image::after { 38 content: ''; 39 display: block; 40 width: 100%; 41 height: 100%; 42 position: absolute; 43 inset: 0; 44 border-radius: calc(var(--wui-icon-box-size-lg) / 2); 45 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 46 } 47 48 .purchase-image-container wui-icon-box { 49 position: absolute; 50 right: 0; 51 bottom: 0; 52 transform: translate(20%, 20%); 53 } 54`;var m=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let g=class extends r.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(0,r.qy)` 55 <wui-flex> 56 ${this.imageTemplate()} 57 <wui-flex flexDirection="column" gap="4xs" flexGrow="1"> 58 <wui-flex gap="xxs" alignItems="center" justifyContent="flex-start"> 59 ${this.statusIconTemplate()} 60 <wui-text variant="paragraph-500" color="fg-100"> ${this.label}</wui-text> 61 </wui-flex> 62 <wui-text variant="small-400" color="fg-200"> 63 + ${this.purchaseValue} ${this.purchaseCurrency} 64 </wui-text> 65 </wui-flex> 66 ${this.inProgress?(0,r.qy)`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:(0,r.qy)`<wui-text variant="micro-700" color="fg-300"><span>${this.date}</span></wui-text>`} 67 </wui-flex> 68 `}async fetchTokenImage(){await h.N._fetchTokenImage(this.purchaseCurrency)}statusIconTemplate(){return this.inProgress?null:this.completed?this.boughtIconTemplate():this.errorIconTemplate()}errorIconTemplate(){return(0,r.qy)`<wui-icon-box 69 size="xxs" 70 iconColor="error-100" 71 backgroundColor="error-100" 72 background="opaque" 73 icon="close" 74 borderColor="wui-color-bg-125" 75 ></wui-icon-box>`}imageTemplate(){let e=this.icon||`https://avatar.vercel.sh/andrew.svg?size=50&text=${this.symbol}`;return(0,r.qy)`<wui-flex class="purchase-image-container"> 76 <wui-image src=${e}></wui-image> 77 </wui-flex>`}boughtIconTemplate(){return(0,r.qy)`<wui-icon-box 78 size="xxs" 79 iconColor="success-100" 80 backgroundColor="success-100" 81 background="opaque" 82 icon="arrowBottom" 83 borderColor="wui-color-bg-125" 84 ></wui-icon-box>`}};g.styles=[w],m([(0,o.MZ)({type:Boolean})],g.prototype,"disabled",void 0),m([(0,o.MZ)()],g.prototype,"color",void 0),m([(0,o.MZ)()],g.prototype,"label",void 0),m([(0,o.MZ)()],g.prototype,"purchaseValue",void 0),m([(0,o.MZ)()],g.prototype,"purchaseCurrency",void 0),m([(0,o.MZ)()],g.prototype,"date",void 0),m([(0,o.MZ)({type:Boolean})],g.prototype,"completed",void 0),m([(0,o.MZ)({type:Boolean})],g.prototype,"inProgress",void 0),m([(0,o.MZ)({type:Boolean})],g.prototype,"failed",void 0),m([(0,o.MZ)()],g.prototype,"onClick",void 0),m([(0,o.MZ)()],g.prototype,"symbol",void 0),m([(0,o.MZ)()],g.prototype,"icon",void 0),g=m([(0,d.EM)("w3m-onramp-activity-item")],g);let y=(0,r.AH)` 85 :host > wui-flex { 86 height: 500px; 87 overflow-y: auto; 88 overflow-x: hidden; 89 scrollbar-width: none; 90 padding: var(--wui-spacing-m); 91 box-sizing: border-box; 92 display: flex; 93 align-items: center; 94 justify-content: flex-start; 95 } 96 97 :host > wui-flex::-webkit-scrollbar {
98 display: none; 99 } 100 101 :host > wui-flex > wui-flex { 102 width: 100%; 103 } 104 105 wui-transaction-list-item-loader { 106 width: 100%; 107 } 108`;var f=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let b=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.selectedOnRampProvider=n.aG.state.selectedProvider,this.loading=!1,this.coinbaseTransactions=c.W.state.coinbaseTransactions,this.tokenImages=l.j.state.tokenImages,this.unsubscribe.push(n.aG.subscribeKey("selectedProvider",e=>{this.selectedOnRampProvider=e}),l.j.subscribeKey("tokenImages",e=>this.tokenImages=e),()=>{clearTimeout(this.refetchTimeout)},c.W.subscribe(e=>{this.coinbaseTransactions={...e.coinbaseTransactions}})),c.W.clearCursor(),this.fetchTransactions()}render(){return(0,r.qy)` 109 <wui-flex flexDirection="column" .padding=${["0","s","s","s"]} gap="xs"> 110 ${this.loading?this.templateLoading():this.templateTransactionsByYear()} 111 </wui-flex> 112 `}templateTransactions(e){return e?.map(e=>{let t=s.r.formatDate(e?.metadata?.minedAt),i=e.transfers[0],o=i?.fungible_info;if(!o)return null;let n=o?.icon?.url||this.tokenImages?.[o.symbol||""];return r.qy` 113 <w3m-onramp-activity-item 114 label="Bought" 115 .completed=${"ONRAMP_TRANSACTION_STATUS_SUCCESS"===e.metadata.status} 116 .inProgress=${"ONRAMP_TRANSACTION_STATUS_IN_PROGRESS"===e.metadata.status} 117 .failed=${"ONRAMP_TRANSACTION_STATUS_FAILED"===e.metadata.status} 118 purchaseCurrency=${a.J(o.symbol)} 119 purchaseValue=${i.quantity.numeric} 120 date=${t} 121 icon=${a.J(n)} 122 symbol=${a.J(o.symbol)} 123 ></w3m-onramp-activity-item> 124 `})}templateTransactionsByYear(){return Object.keys(this.coinbaseTransactions).sort().reverse().map(e=>{let t=parseInt(e,10);return Array(12).fill(null).map((e,t)=>t).reverse().map(e=>{let i=d.tt.getTransactionGroupTitle(t,e),o=this.coinbaseTransactions[t]?.[e];return o?(0,r.qy)` 125 <wui-flex flexDirection="column"> 126 <wui-flex 127 alignItems="center" 128 flexDirection="row" 129 .padding=${["xs","s","s","s"]} 130 > 131 <wui-text variant="paragraph-500" color="fg-200">${i}</wui-text> 132 </wui-flex> 133 <wui-flex flexDirection="column" gap="xs"> 134 ${this.templateTransactions(o)} 135 </wui-flex> 136 </wui-flex> 137 `:null})})}async fetchTransactions(){await this.fetchCoinbaseTransactions()}async fetchCoinbaseTransactions(){let e=u.U.state.address,t=p.H.state.projectId;if(!e)throw Error("No address found");if(!t)throw Error("No projectId found");this.loading=!0,await c.W.fetchTransactions(e,"coinbase"),this.loading=!1,this.refetchLoadingTransactions()}refetchLoadingTransactions(){let e=new Date;if(0===(this.coinbaseTransactions[e.getFullYear()]?.[e.getMonth()]||[]).filter(e=>"ONRAMP_TRANSACTION_STATUS_IN_PROGRESS"===e.metadata.status).length){clearTimeout(this.refetchTimeout);return}this.refetchTimeout=setTimeout(async()=>{let e=u.U.state.address;await c.W.fetchTransactions(e,"coinbase"),this.refetchLoadingTransactions()},3e3)}templateLoading(){return Array(7).fill((0,r.qy)` <wui-transaction-list-item-loader></wui-transaction-list-item-loader> `).map(e=>e)}};b.styles=y,f([(0,o.wk)()],b.prototype,"selectedOnRampProvider",void 0),f([(0,o.wk)()],b.prototype,"loading",void 0),f([(0,o.wk)()],b.prototype,"coinbaseTransactions",void 0),f([(0,o.wk)()],b.prototype,"tokenImages",void 0),b=f([(0,d.EM)("w3m-onramp-activity-view")],b);var v=i(5185),x=i(25315);i(77749),i(61735),i(20669);let k=(0,r.AH)` 138 :host > wui-grid { 139 max-height: 360px; 140 overflow: auto; 141 } 142 143 wui-flex { 144 transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); 145 will-change: opacity; 146 } 147 148 wui-grid::-webkit-scrollbar {
149 display: none; 150 } 151 152 wui-flex.disabled { 153 opacity: 0.3; 154 pointer-events: none; 155 user-select: none; 156 } 157`;var C=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let T=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.selectedCurrency=n.aG.state.paymentCurrency,this.currencies=n.aG.state.paymentCurrencies,this.currencyImages=l.j.state.currencyImages,this.checked=v.o.state.isLegalCheckboxChecked,this.unsubscribe.push(n.aG.subscribe(e=>{this.selectedCurrency=e.paymentCurrency,this.currencies=e.paymentCurrencies}),l.j.subscribeKey("currencyImages",e=>this.currencyImages=e),v.o.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){let{termsConditionsUrl:e,privacyPolicyUrl:t}=p.H.state,i=p.H.state.features?.legalCheckbox,o=!!(e||t)&&!!i&&!this.checked;return(0,r.qy)` 158 <w3m-legal-checkbox></w3m-legal-checkbox> 159 <wui-flex 160 flexDirection="column" 161 .padding=${["0","s","s","s"]} 162 gap="xs" 163 class=${(0,a.J)(o?"disabled":void 0)} 164 > 165 ${this.currenciesTemplate(o)} 166 </wui-flex> 167 <w3m-legal-footer></w3m-legal-footer> 168 `}currenciesTemplate(e=!1){return this.currencies.map(t=>(0,r.qy)` 169 <wui-list-item 170 imageSrc=${(0,a.J)(this.currencyImages?.[t.id])} 171 @click=${()=>this.selectCurrency(t)} 172 variant="image" 173 tabIdx=${(0,a.J)(e?-1:void 0)} 174 > 175 <wui-text variant="paragraph-500" color="fg-100">${t.id}</wui-text> 176 </wui-list-item> 177 `)}selectCurrency(e){e&&(n.aG.setPaymentCurrency(e),x.W.close())}};T.styles=k,C([(0,o.wk)()],T.prototype,"selectedCurrency",void 0),C([(0,o.wk)()],T.prototype,"currencies",void 0),C([(0,o.wk)()],T.prototype,"currencyImages",void 0),C([(0,o.wk)()],T.prototype,"checked",void 0),T=C([(0,d.EM)("w3m-onramp-fiat-select-view")],T);var I=i(18539),$=i(83503),R=i(59085),A=i(66699),P=i(88515),O=i(636),j=i(32375),W=i(17826);i(66571),i(97363);let M=(0,r.AH)` 178 button { 179 padding: var(--wui-spacing-s); 180 border-radius: var(--wui-border-radius-xs); 181 border: none; 182 outline: none; 183 background-color: var(--wui-color-gray-glass-002); 184 width: 100%; 185 display: flex; 186 align-items: center; 187 justify-content: flex-start; 188 gap: var(--wui-spacing-s); 189 transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md); 190 will-change: background-color; 191 } 192 193 button:hover { 194 background-color: var(--wui-color-gray-glass-005); 195 } 196 197 .provider-image { 198 width: var(--wui-spacing-3xl); 199 min-width: var(--wui-spacing-3xl); 200 height: var(--wui-spacing-3xl); 201 border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); 202 position: relative; 203 overflow: hidden; 204 } 205 206 .provider-image::after { 207 content: ''; 208 display: block; 209 width: 100%; 210 height: 100%; 211 position: absolute; 212 inset: 0; 213 border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); 214 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 215 } 216 217 .network-icon { 218 width: var(--wui-spacing-m); 219 height: var(--wui-spacing-m); 220 border-radius: calc(var(--wui-spacing-m) / 2); 221 overflow: hidden; 222 box-shadow: 223 0 0 0 3px var(--wui-color-gray-glass-002), 224 0 0 0 3px var(--wui-color-modal-bg); 225 transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md); 226 will-change: box-shadow; 227 } 228 229 button:hover .network-icon { 230 box-shadow: 231 0 0 0 3px var(--wui-color-gray-glass-005), 232 0 0 0 3px var(--wui-color-modal-bg); 233 } 234`;var E=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let S=class extends r.WF{constructor(){super(...arguments),this.disabled=!1,this.color="inherit",this.label="",this.feeRange="",this.loading=!1,this.onClick=null}render(){return(0,r.qy)` 235 <button ?disabled=${this.disabled} @click=${this.onClick} ontouchstart>
236 <wui-visual name=${(0,a.J)(this.name)} class="provider-image"></wui-visual> 237 <wui-flex flexDirection="column" gap="4xs"> 238 <wui-text variant="paragraph-500" color="fg-100">${this.label}</wui-text> 239 <wui-flex alignItems="center" justifyContent="flex-start" gap="l"> 240 <wui-text variant="tiny-500" color="fg-100"> 241 <wui-text variant="tiny-400" color="fg-200">Fees</wui-text> 242 ${this.feeRange} 243 </wui-text> 244 <wui-flex gap="xxs"> 245 <wui-icon name="bank" size="xs" color="fg-150"></wui-icon> 246 <wui-icon name="card" size="xs" color="fg-150"></wui-icon> 247 </wui-flex> 248 ${this.networksTemplate()} 249 </wui-flex> 250 </wui-flex> 251 ${this.loading?(0,r.qy)`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:(0,r.qy)`<wui-icon name="chevronRight" color="fg-200" size="sm"></wui-icon>`} 252 </button> 253 `}networksTemplate(){let e=I.W.getAllRequestedCaipNetworks(),t=e?.filter(e=>e?.assets?.imageId)?.slice(0,5);return(0,r.qy)` 254 <wui-flex class="networks"> 255 ${t?.map(e=>r.qy` 256 <wui-flex class="network-icon"> 257 <wui-image src=${a.J(W.$.getNetworkImage(e))}></wui-image> 258 </wui-flex> 259 `)} 260 </wui-flex> 261 `}};S.styles=[M],E([(0,o.MZ)({type:Boolean})],S.prototype,"disabled",void 0),E([(0,o.MZ)()],S.prototype,"color",void 0),E([(0,o.MZ)()],S.prototype,"name",void 0),E([(0,o.MZ)()],S.prototype,"label",void 0),E([(0,o.MZ)()],S.prototype,"feeRange",void 0),E([(0,o.MZ)({type:Boolean})],S.prototype,"loading",void 0),E([(0,o.MZ)()],S.prototype,"onClick",void 0),S=E([(0,d.EM)("w3m-onramp-provider-item")],S),i(51482);let _=(0,r.AH)` 262 wui-flex { 263 border-top: 1px solid var(--wui-color-gray-glass-005); 264 } 265 266 a { 267 text-decoration: none; 268 color: var(--wui-color-fg-175); 269 font-weight: 500; 270 display: flex; 271 align-items: center; 272 justify-content: center; 273 gap: var(--wui-spacing-3xs); 274 } 275`,q=class extends r.WF{render(){let{termsConditionsUrl:e,privacyPolicyUrl:t}=p.H.state;return e||t?(0,r.qy)` 276 <wui-flex 277 .padding=${["m","s","s","s"]} 278 flexDirection="column" 279 alignItems="center" 280 justifyContent="center" 281 gap="s" 282 > 283 <wui-text color="fg-250" variant="small-400" align="center"> 284 We work with the best providers to give you the lowest fees and best support. More options 285 coming soon! 286 </wui-text> 287 288 ${this.howDoesItWorkTemplate()} 289 </wui-flex> 290 `:null}howDoesItWorkTemplate(){return(0,r.qy)` <wui-link @click=${this.onWhatIsBuy.bind(this)}> 291 <wui-icon size="xs" color="accent-100" slot="iconLeft" name="helpCircle"></wui-icon> 292 How does it work? 293 </wui-link>`}onWhatIsBuy(){let e=I.W.state.activeChain;A.E.sendEvent({type:"track",event:"SELECT_WHAT_IS_A_BUY",properties:{isSmartAccount:u.U.state.preferredAccountTypes?.[e]===j.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}}),$.I.push("WhatIsABuy")}};q.styles=[_],q=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s}([(0,d.EM)("w3m-onramp-providers-footer")],q);var D=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let N=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.providers=n.aG.state.providers,this.unsubscribe.push(n.aG.subscribeKey("providers",e=>{this.providers=e}))}firstUpdated(){Promise.all(this.providers.map(async e=>"coinbase"===e.name?await this.getCoinbaseOnRampURL():Promise.resolve(e?.url))).then(e=>{this.providers=this.providers.map((t,i)=>({...t,url:e[i]||""}))})}render(){return(0,r.qy)` 294 <wui-flex flexDirection="column" .padding=${["0","s","s","s"]} gap="xs"> 295 ${this.onRampProvidersTemplate()} 296 </wui-flex> 297 <w3m-onramp-providers-footer></w3m-onramp-providers-footer> 298 `}onRampProvidersTemplate(){return this.providers.filter(e=>e.supportedChains.includes(I.W.state.activeChain??"eip155")).map(e=>(0,r.qy)` 299 <w3m-onramp-provider-item 300 label=${e.label} 301 name=${e.name} 302 feeRange=${e.feeRange} 303 @click=${()=>{this.onClickProvider(e)}} 304 ?disabled=${!e.url} 305 data-testid=${`onramp-provider-${e.name}`} 306 ></w3m-onramp-provider-item> 307 `)}onClickProvider(e){let t=I.W.state.activeChain;n.aG.setSelectedProvider(e),$.I.push("BuyInProgress"),R.w.openHref(e.url,"popupWindow","width=600,height=800,scrollbars=yes"),A.E.sendEvent({type:"track",event:"SELECT_BUY_PROVIDER",properties:{provider:e.name,isSmartAccount:u.U.state.preferredAccountTypes?.[t]===j.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}})}async getCoinbaseOnRampURL(){let e=u.U.state.address,t=I.W.state.activeCaipNetwork;if(!e)throw Error("No address found");if(!t?.name)throw Error("No network found");let i=P.oU.WC_COINBASE_PAY_SDK_CHAIN_NAME_MAP[t.name]??P.oU.WC_COINBASE_PAY_SDK_FALLBACK_CHAIN,r=n.aG.state.purchaseCurrency,o=r?[r.symbol]:n.aG.state.purchaseCurrencies.map(e=>e.symbol);return await O.T.generateOnRampURL({defaultNetwork:i,destinationWallets:[{address:e,blockchains:P.oU.WC_COINBASE_PAY_SDK_CHAINS,assets:o}],partnerUserId:e,purchaseAmount:n.aG.state.purchaseAmount})}};D([(0,o.wk)()],N.prototype,"providers",void 0),N=D([(0,d.EM)("w3m-onramp-providers-view")],N);let G=(0,r.AH)` 308 :host > wui-grid { 309 max-height: 360px; 310 overflow: auto; 311 } 312 313 wui-flex { 314 transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); 315 will-change: opacity; 316 } 317 318 wui-grid::-webkit-scrollbar {
319 display: none; 320 } 321 322 wui-flex.disabled { 323 opacity: 0.3; 324 pointer-events: none; 325 user-select: none; 326 } 327`;var z=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let B=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.selectedCurrency=n.aG.state.purchaseCurrencies,this.tokens=n.aG.state.purchaseCurrencies,this.tokenImages=l.j.state.tokenImages,this.checked=v.o.state.isLegalCheckboxChecked,this.unsubscribe.push(n.aG.subscribe(e=>{this.selectedCurrency=e.purchaseCurrencies,this.tokens=e.purchaseCurrencies}),l.j.subscribeKey("tokenImages",e=>this.tokenImages=e),v.o.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){let{termsConditionsUrl:e,privacyPolicyUrl:t}=p.H.state,i=p.H.state.features?.legalCheckbox,o=!!(e||t)&&!!i&&!this.checked;return(0,r.qy)` 328 <w3m-legal-checkbox></w3m-legal-checkbox> 329 <wui-flex 330 flexDirection="column" 331 .padding=${["0","s","s","s"]} 332 gap="xs" 333 class=${(0,a.J)(o?"disabled":void 0)} 334 > 335 ${this.currenciesTemplate(o)} 336 </wui-flex> 337 <w3m-legal-footer></w3m-legal-footer> 338 `}currenciesTemplate(e=!1){return this.tokens.map(t=>(0,r.qy)` 339 <wui-list-item 340 imageSrc=${(0,a.J)(this.tokenImages?.[t.symbol])} 341 @click=${()=>this.selectToken(t)} 342 variant="image" 343 tabIdx=${(0,a.J)(e?-1:void 0)} 344 > 345 <wui-flex gap="3xs" alignItems="center"> 346 <wui-text variant="paragraph-500" color="fg-100">${t.name}</wui-text> 347 <wui-text variant="small-400" color="fg-200">${t.symbol}</wui-text> 348 </wui-flex> 349 </wui-list-item> 350 `)}selectToken(e){e&&(n.aG.setPurchaseCurrency(e),x.W.close())}};B.styles=G,z([(0,o.wk)()],B.prototype,"selectedCurrency",void 0),z([(0,o.wk)()],B.prototype,"tokens",void 0),z([(0,o.wk)()],B.prototype,"tokenImages",void 0),z([(0,o.wk)()],B.prototype,"checked",void 0),B=z([(0,d.EM)("w3m-onramp-token-select-view")],B);var U=i(85845),L=i(10840),Z=i(39519);i(83066),i(39515);let F=(0,r.AH)` 351 @keyframes shake { 352 0% { 353 transform: translateX(0); 354 } 355 25% { 356 transform: translateX(3px); 357 } 358 50% { 359 transform: translateX(-3px); 360 } 361 75% { 362 transform: translateX(3px); 363 } 364 100% { 365 transform: translateX(0); 366 } 367 } 368 369 wui-flex:first-child:not(:only-child) { 370 position: relative; 371 } 372 373 wui-loading-thumbnail { 374 position: absolute; 375 } 376 377 wui-visual { 378 width: var(--wui-wallet-image-size-lg); 379 height: var(--wui-wallet-image-size-lg); 380 border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs)); 381 position: relative; 382 overflow: hidden; 383 } 384 385 wui-visual::after { 386 content: ''; 387 display: block; 388 width: 100%; 389 height: 100%; 390 position: absolute; 391 inset: 0; 392 border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs)); 393 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 394 } 395 396 wui-icon-box { 397 position: absolute; 398 right: calc(var(--wui-spacing-3xs) * -1); 399 bottom: calc(var(--wui-spacing-3xs) * -1); 400 opacity: 0; 401 transform: scale(0.5); 402 transition: 403 opacity var(--wui-ease-out-power-2) var(--wui-duration-lg), 404 transform var(--wui-ease-out-power-2) var(--wui-duration-lg); 405 will-change: opacity, transform; 406 } 407 408 wui-text[align='center'] { 409 width: 100%; 410 padding: 0px var(--wui-spacing-l); 411 } 412 413 [data-error='true'] wui-icon-box { 414 opacity: 1; 415 transform: scale(1); 416 } 417 418 [data-error='true'] > wui-flex:first-child { 419 animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 420 } 421 422 [data-retry='false'] wui-link { 423 display: none; 424 } 425 426 [data-retry='true'] wui-link { 427 display: block; 428 opacity: 1; 429 } 430 431 wui-link { 432 padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs); 433 } 434`;var H=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let K=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.selectedOnRampProvider=n.aG.state.selectedProvider,this.uri=U.x.state.wcUri,this.ready=!1,this.showRetry=!1,this.buffering=!1,this.error=!1,this.startTime=null,this.isMobile=!1,this.onRetry=void 0,this.unsubscribe.push(n.aG.subscribeKey("selectedProvider",e=>{this.selectedOnRampProvider=e})),this.watchTransactions()}disconnectedCallback(){this.intervalId&&clearInterval(this.intervalId)}render(){let e="Continue in external window";this.error?e="Buy failed":this.selectedOnRampProvider&&(e=`Buy in ${this.selectedOnRampProvider?.label}`);let t=this.error?"Buy can be declined from your side or due to and error on the provider app":`Weâll notify you once your Buy is processed`;return(0,r.qy)` 435 <wui-flex 436 data-error=${(0,a.J)(this.error)} 437 data-retry=${this.showRetry} 438 flexDirection="column" 439 alignItems="center" 440 .padding=${["3xl","xl","xl","xl"]} 441 gap="xl" 442 > 443 <wui-flex justifyContent="center" alignItems="center"> 444 <wui-visual
445 name=${(0,a.J)(this.selectedOnRampProvider?.name)} 446 size="lg" 447 class="provider-image" 448 > 449 </wui-visual> 450 451 ${this.error?null:this.loaderTemplate()} 452 453 <wui-icon-box 454 backgroundColor="error-100" 455 background="opaque" 456 iconColor="error-100" 457 icon="close" 458 size="sm" 459 border 460 borderColor="wui-color-bg-125" 461 ></wui-icon-box> 462 </wui-flex> 463 464 <wui-flex flexDirection="column" alignItems="center" gap="xs"> 465 <wui-text variant="paragraph-500" color=${this.error?"error-100":"fg-100"}> 466 ${e} 467 </wui-text> 468 <wui-text align="center" variant="small-500" color="fg-200">${t}</wui-text> 469 </wui-flex> 470 471 ${this.error?this.tryAgainTemplate():null} 472 </wui-flex> 473 474 <wui-flex .padding=${["0","xl","xl","xl"]} justifyContent="center"> 475 <wui-link @click=${this.onCopyUri} color="fg-200"> 476 <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon> 477 Copy link 478 </wui-link> 479 </wui-flex> 480 `}watchTransactions(){this.selectedOnRampProvider&&"coinbase"===this.selectedOnRampProvider.name&&(this.startTime=Date.now(),this.initializeCoinbaseTransactions())}async initializeCoinbaseTransactions(){await this.watchCoinbaseTransactions(),this.intervalId=setInterval(()=>this.watchCoinbaseTransactions(),4e3)}async watchCoinbaseTransactions(){try{let e=u.U.state.address;if(!e)throw Error("No address found");(await O.T.fetchTransactions({account:e,onramp:"coinbase"})).data.filter(e=>new Date(e.metadata.minedAt)>new Date(this.startTime)||"ONRAMP_TRANSACTION_STATUS_IN_PROGRESS"===e.metadata.status).length?(clearInterval(this.intervalId),$.I.replace("OnRampActivity")):this.startTime&&Date.now()-this.startTime>=18e4&&(clearInterval(this.intervalId),this.error=!0)}catch(e){L.P.showError(e)}}onTryAgain(){this.selectedOnRampProvider&&(this.error=!1,R.w.openHref(this.selectedOnRampProvider.url,"popupWindow","width=600,height=800,scrollbars=yes"))}tryAgainTemplate(){return this.selectedOnRampProvider?.url?(0,r.qy)`<wui-button size="md" variant="accent" @click=${this.onTryAgain.bind(this)}> 481 <wui-icon color="inherit" slot="iconLeft" name="refresh"></wui-icon> 482 Try again 483 </wui-button>`:null}loaderTemplate(){let e=Z.W.state.themeVariables["--w3m-border-radius-master"],t=e?parseInt(e.replace("px",""),10):4;return(0,r.qy)`<wui-loading-thumbnail radius=${9*t}></wui-loading-thumbnail>`}onCopyUri(){if(!this.selectedOnRampProvider?.url){L.P.showError("No link found"),$.I.goBack();return}try{R.w.copyToClopboard(this.selectedOnRampProvider.url),L.P.showSuccess("Link copied")}catch{L.P.showError("Failed to copy")}}};K.styles=F,H([(0,o.wk)()],K.prototype,"intervalId",void 0),H([(0,o.wk)()],K.prototype,"selectedOnRampProvider",void 0),H([(0,o.wk)()],K.prototype,"uri",void 0),H([(0,o.wk)()],K.prototype,"ready",void 0),H([(0,o.wk)()],K.prototype,"showRetry",void 0),H([(0,o.wk)()],K.prototype,"buffering",void 0),H([(0,o.wk)()],K.prototype,"error",void 0),H([(0,o.wk)()],K.prototype,"startTime",void 0),H([(0,o.MZ)({type:Boolean})],K.prototype,"isMobile",void 0),H([(0,o.MZ)()],K.prototype,"onRetry",void 0),K=H([(0,d.EM)("w3m-buy-in-progress-view")],K);let V=class extends r.WF{render(){return(0,r.qy)` 484 <wui-flex 485 flexDirection="column" 486 .padding=${["xxl","3xl","xl","3xl"]} 487 alignItems="center" 488 gap="xl" 489 > 490 <wui-visual name="onrampCard"></wui-visual> 491 <wui-flex flexDirection="column" gap="xs" alignItems="center"> 492 <wui-text align="center" variant="paragraph-500" color="fg-100"> 493 Quickly and easily buy digital assets! 494 </wui-text> 495 <wui-text align="center" variant="small-400" color="fg-200"> 496 Simply select your preferred onramp provider and add digital assets to your account 497 using your credit card or bank transfer 498 </wui-text> 499 </wui-flex> 500 <wui-button @click=${$.I.goBack}> 501 <wui-icon size="sm" color="inherit" name="add" slot="iconLeft"></wui-icon> 502 Buy 503 </wui-button>
503 504 </wui-flex> 505 `}};V=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s}([(0,d.EM)("w3m-what-is-a-buy-view")],V),i(98082);let J=(0,r.AH)` 506 :host { 507 width: 100%; 508 } 509 510 wui-loading-spinner { 511 position: absolute; 512 top: 50%; 513 right: 20px; 514 transform: translateY(-50%); 515 } 516 517 .currency-container { 518 position: absolute; 519 top: 50%; 520 transform: translateY(-50%); 521 right: var(--wui-spacing-1xs); 522 height: 40px; 523 padding: var(--wui-spacing-xs) var(--wui-spacing-1xs) var(--wui-spacing-xs) 524 var(--wui-spacing-xs); 525 min-width: 95px; 526 border-radius: var(--FULL, 1000px); 527 border: 1px solid var(--wui-color-gray-glass-002); 528 background: var(--wui-color-gray-glass-002); 529 cursor: pointer; 530 } 531 532 .currency-container > wui-image { 533 height: 24px; 534 width: 24px; 535 border-radius: 50%; 536 } 537`;var Y=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let Q=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.type="Token",this.value=0,this.currencies=[],this.selectedCurrency=this.currencies?.[0],this.currencyImages=l.j.state.currencyImages,this.tokenImages=l.j.state.tokenImages,this.unsubscribe.push(n.aG.subscribeKey("purchaseCurrency",e=>{e&&"Fiat"!==this.type&&(this.selectedCurrency=this.formatPurchaseCurrency(e))}),n.aG.subscribeKey("paymentCurrency",e=>{e&&"Token"!==this.type&&(this.selectedCurrency=this.formatPaymentCurrency(e))}),n.aG.subscribe(e=>{"Fiat"===this.type?this.currencies=e.purchaseCurrencies.map(this.formatPurchaseCurrency):this.currencies=e.paymentCurrencies.map(this.formatPaymentCurrency)}),l.j.subscribe(e=>{this.currencyImages={...e.currencyImages},this.tokenImages={...e.tokenImages}}))}firstUpdated(){n.aG.getAvailableCurrencies()}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){let e=this.selectedCurrency?.symbol||"",t=this.currencyImages[e]||this.tokenImages[e];return(0,r.qy)`<wui-input-text type="number" size="lg" value=${this.value}> 538 ${this.selectedCurrency?(0,r.qy)` <wui-flex 539 class="currency-container" 540 justifyContent="space-between" 541 alignItems="center" 542 gap="xxs" 543 @click=${()=>x.W.open({view:`OnRamp${this.type}Select`})} 544 > 545 <wui-image src=${(0,a.J)(t)}></wui-image> 546 <wui-text color="fg-100">${this.selectedCurrency.symbol}</wui-text> 547 </wui-flex>`:(0,r.qy)`<wui-loading-spinner></wui-loading-spinner>`} 548 </wui-input-text>`}formatPaymentCurrency(e){return{name:e.id,symbol:e.id}}formatPurchaseCurrency(e){return{name:e.name,symbol:e.symbol}}};Q.styles=J,Y([(0,o.MZ)({type:String})],Q.prototype,"type",void 0),Y([(0,o.MZ)({type:Number})],Q.prototype,"value",void 0),Y([(0,o.wk)()],Q.prototype,"currencies",void 0),Y([(0,o.wk)()],Q.prototype,"selectedCurrency",void 0),Y([(0,o.wk)()],Q.prototype,"currencyImages",void 0),Y([(0,o.wk)()],Q.prototype,"tokenImages",void 0),Q=Y([(0,d.EM)("w3m-onramp-input")],Q);let X=(0,r.AH)` 549 :host > wui-flex { 550 width: 100%; 551 max-width: 360px; 552 } 553 554 :host > wui-flex > wui-flex { 555 border-radius: var(--wui-border-radius-l); 556 width: 100%; 557 } 558 559 .amounts-container { 560 width: 100%; 561 } 562`;var ee=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let et={USD:"$",EUR:"â¬",GBP:"\xa3"},ei=[100,250,500,1e3],er=class extends r.WF{constructor(){super(),this.unsubscribe=[],this.disabled=!1,this.caipAddress=I.W.state.activeCaipAddress,this.loading=x.W.state.loading,this.paymentCurrency=n.aG.state.paymentCurrency,this.paymentAmount=n.aG.state.paymentAmount,this.purchaseAmount=n.aG.state.purchaseAmount,this.quoteLoading=n.aG.state.quotesLoading,this.unsubscribe.push(I.W.subscribeKey("activeCaipAddress",e=>this.caipAddress=e),x.W.subscribeKey("loading",e=>{this.loading=e}),n.aG.subscribe(e=>{this.paymentCurrency=e.paymentCurrency,this.paymentAmount=e.paymentAmount,this.purchaseAmount=e.purchaseAmount,this.quoteLoading=e.quotesLoading}))}
562disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){return(0,r.qy)` 563 <wui-flex flexDirection="column" justifyContent="center" alignItems="center"> 564 <wui-flex flexDirection="column" alignItems="center" gap="xs"> 565 <w3m-onramp-input 566 type="Fiat" 567 @inputChange=${this.onPaymentAmountChange.bind(this)} 568 .value=${this.paymentAmount||0} 569 ></w3m-onramp-input> 570 <w3m-onramp-input 571 type="Token" 572 .value=${this.purchaseAmount||0} 573 .loading=${this.quoteLoading} 574 ></w3m-onramp-input> 575 <wui-flex justifyContent="space-evenly" class="amounts-container" gap="xs"> 576 ${ei.map(e=>(0,r.qy)`<wui-button 577 variant=${this.paymentAmount===e?"accent":"neutral"} 578 size="md" 579 textVariant="paragraph-600" 580 fullWidth 581 @click=${()=>this.selectPresetAmount(e)} 582 >${`${et[this.paymentCurrency?.id||"USD"]} ${e}`}</wui-button 583 >`)} 584 </wui-flex> 585 ${this.templateButton()} 586 </wui-flex> 587 </wui-flex> 588 `}templateButton(){return this.caipAddress?(0,r.qy)`<wui-button 589 @click=${this.getQuotes.bind(this)} 590 variant="main" 591 fullWidth 592 size="lg" 593 borderRadius="xs" 594 > 595 Get quotes 596 </wui-button>`:(0,r.qy)`<wui-button 597 @click=${this.openModal.bind(this)} 598 variant="accent" 599 fullWidth 600 size="lg" 601 borderRadius="xs" 602 > 603 Connect wallet 604 </wui-button>`}getQuotes(){this.loading||x.W.open({view:"OnRampProviders"})}openModal(){x.W.open({view:"Connect"})}async onPaymentAmountChange(e){n.aG.setPaymentAmount(Number(e.detail)),await n.aG.getQuote()}async selectPresetAmount(e){n.aG.setPaymentAmount(e),await n.aG.getQuote()}};er.styles=X,ee([(0,o.MZ)({type:Boolean})],er.prototype,"disabled",void 0),ee([(0,o.wk)()],er.prototype,"caipAddress",void 0),ee([(0,o.wk)()],er.prototype,"loading",void 0),ee([(0,o.wk)()],er.prototype,"paymentCurrency",void 0),ee([(0,o.wk)()],er.prototype,"paymentAmount",void 0),ee([(0,o.wk)()],er.prototype,"purchaseAmount",void 0),ee([(0,o.wk)()],er.prototype,"quoteLoading",void 0),er=ee([(0,d.EM)("w3m-onramp-widget")],er)},52847:(e,t,i)=>{i(55602)},55602:(e,t,i)=>{var r=i(41270),o=i(12456),a=i(67998),s=i(45857);let n=(0,r.AH)` 605 :host { 606 display: block; 607 width: var(--local-width); 608 height: var(--local-height); 609 } 610 611 :host([data-object-fit='cover']) img { 612 object-fit: cover; 613 object-position: center center; 614 } 615 616 :host([data-object-fit='contain']) img { 617 object-fit: contain; 618 object-position: center center; 619 } 620 621 img { 622 display: block; 623 width: 100%; 624 height: 100%; 625 border-radius: inherit; 626 } 627`;var c=function(e,t,i,r){var o,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(s=(a<3?o(s):a>3?o(t,i,s):o(t,i))||s);return a>3&&s&&Object.defineProperty(t,i,s),s};let l=class extends r.WF{constructor(){super(...arguments),this.src="./path/to/image.jpg",this.alt="Image",this.size=void 0,this.objectFit="cover"}render(){return this.objectFit&&(this.dataset.objectFit=this.objectFit),this.style.cssText=` 628 --local-width: ${this.size?`var(--wui-icon-size-${this.size});`:"100%"}; 629 --local-height: ${this.size?`var(--wui-icon-size-${this.size});`:"100%"}; 630 `,(0,r.qy)`<img src=${this.src} alt=${this.alt} @error=${this.handleImageError} />`}handleImageError(){this.dispatchEvent(new CustomEvent("onLoadError",{bubbles:!0,composed:!0}))}};l.styles=[a.W5,a.ck,n],c([(0,o.MZ)()],l.prototype,"src",void 0),c([(0,o.MZ)()],l.prototype,"alt",void 0),c([(0,o.MZ)()],l.prototype,"size",void 0),c([(0,o.MZ)()],l.prototype,"objectFit",void 0),l=c([(0,s.E)("wui-image")],l)}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.