1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[6234],{51933:(e,t,r)=>{r(2657)},66234:(e,t,r)=>{r.r(t),r.d(t,{W3mBuyInProgressView:()=>D,W3mOnRampProvidersView:()=>A,W3mOnrampFiatSelectView:()=>h,W3mOnrampTokensView:()=>W,W3mOnrampWidget:()=>Z,W3mWhatIsABuyView:()=>B});var i=r(22707),o=r(71877),s=r(43957),a=r(37300),n=r(7899),c=r(20482),l=r(16285),u=r(88950),p=r(21438);r(21995),r(37533),r(97039),r(52121),r(33719);let d=(0,i.AH)` 2 :host > wui-grid { 3 max-height: 360px; 4 overflow: auto; 5 } 6 7 wui-flex { 8 transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); 9 will-change: opacity; 10 } 11 12 wui-grid::-webkit-scrollbar { 13 display: none; 14 } 15 16 wui-flex.disabled { 17 opacity: 0.3; 18 pointer-events: none; 19 user-select: none; 20 } 21`;var w=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let h=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.selectedCurrency=a.aG.state.paymentCurrency,this.currencies=a.aG.state.paymentCurrencies,this.currencyImages=n.j.state.currencyImages,this.checked=c.o.state.isLegalCheckboxChecked,this.unsubscribe.push(a.aG.subscribe(e=>{this.selectedCurrency=e.paymentCurrency,this.currencies=e.paymentCurrencies}),n.j.subscribeKey("currencyImages",e=>this.currencyImages=e),c.o.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){let{termsConditionsUrl:e,privacyPolicyUrl:t}=l.H.state,r=l.H.state.features?.legalCheckbox,o=!!(e||t)&&!!r&&!this.checked;return(0,i.qy)` 22 <w3m-legal-checkbox></w3m-legal-checkbox> 23 <wui-flex 24 flexDirection="column" 25 .padding=${["0","s","s","s"]} 26 gap="xs" 27 class=${(0,s.J)(o?"disabled":void 0)} 28 > 29 ${this.currenciesTemplate(o)} 30 </wui-flex> 31 <w3m-legal-footer></w3m-legal-footer> 32 `}currenciesTemplate(e=!1){return this.currencies.map(t=>(0,i.qy)` 33 <wui-list-item 34 imageSrc=${(0,s.J)(this.currencyImages?.[t.id])} 35 @click=${()=>this.selectCurrency(t)} 36 variant="image" 37 tabIdx=${(0,s.J)(e?-1:void 0)} 38 > 39 <wui-text variant="paragraph-500" color="fg-100">${t.id}</wui-text> 40 </wui-list-item> 41 `)}selectCurrency(e){e&&(a.aG.setPaymentCurrency(e),u.W.close())}};h.styles=d,w([(0,o.wk)()],h.prototype,"selectedCurrency",void 0),w([(0,o.wk)()],h.prototype,"currencies",void 0),w([(0,o.wk)()],h.prototype,"currencyImages",void 0),w([(0,o.wk)()],h.prototype,"checked",void 0),h=w([(0,p.EM)("w3m-onramp-fiat-select-view")],h);var y=r(12890),m=r(6792),g=r(85934),f=r(77424),b=r(11862),v=r(98280),x=r(4555);r(44949),r(51933),r(26616),r(49409);let k=(0,i.AH)` 42 button { 43 padding: var(--wui-spacing-s); 44 border-radius: var(--wui-border-radius-xs); 45 border: none; 46 outline: none; 47 background-color: var(--wui-color-gray-glass-002); 48 width: 100%; 49 display: flex; 50 align-items: center; 51 justify-content: flex-start; 52 gap: var(--wui-spacing-s); 53 transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md); 54 will-change: background-color; 55 } 56 57 button:hover { 58 background-color: var(--wui-color-gray-glass-005); 59 } 60 61 .provider-image { 62 width: var(--wui-spacing-3xl); 63 min-width: var(--wui-spacing-3xl); 64 height: var(--wui-spacing-3xl); 65 border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); 66 position: relative; 67 overflow: hidden; 68 } 69 70 .provider-image::after { 71 content: ''; 72 display: block; 73 width: 100%; 74 height: 100%; 75 position: absolute; 76 inset: 0; 77 border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2)); 78 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 79 } 80 81 .network-icon { 82 width: var(--wui-spacing-m); 83 height: var(--wui-spacing-m); 84 border-radius: calc(var(--wui-spacing-m) / 2); 85 overflow: hidden; 86 box-shadow: 87 0 0 0 3px var(--wui-color-gray-glass-002), 88 0 0 0 3px var(--wui-color-modal-bg); 89 transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md); 90 will-change: box-shadow; 91 } 92 93 button:hover .network-icon { 94 box-shadow: 95 0 0 0 3px var(--wui-color-gray-glass-005), 96 0 0 0 3px var(--wui-color-modal-bg); 97 } 98`;var C=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i
98);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let $=class extends i.WF{constructor(){super(...arguments),this.disabled=!1,this.color="inherit",this.label="",this.feeRange="",this.loading=!1,this.onClick=null}render(){return(0,i.qy)` 99 <button ?disabled=${this.disabled} @click=${this.onClick} ontouchstart> 100 <wui-visual name=${(0,s.J)(this.name)} class="provider-image"></wui-visual> 101 <wui-flex flexDirection="column" gap="4xs"> 102 <wui-text variant="paragraph-500" color="fg-100">${this.label}</wui-text> 103 <wui-flex alignItems="center" justifyContent="flex-start" gap="l"> 104 <wui-text variant="tiny-500" color="fg-100"> 105 <wui-text variant="tiny-400" color="fg-200">Fees</wui-text> 106 ${this.feeRange} 107 </wui-text> 108 <wui-flex gap="xxs"> 109 <wui-icon name="bank" size="xs" color="fg-150"></wui-icon> 110 <wui-icon name="card" size="xs" color="fg-150"></wui-icon> 111 </wui-flex> 112 ${this.networksTemplate()} 113 </wui-flex> 114 </wui-flex> 115 ${this.loading?(0,i.qy)`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:(0,i.qy)`<wui-icon name="chevronRight" color="fg-200" size="sm"></wui-icon>`} 116 </button> 117 `}networksTemplate(){let e=y.W.getAllRequestedCaipNetworks(),t=e?.filter(e=>e?.assets?.imageId)?.slice(0,5);return(0,i.qy)` 118 <wui-flex class="networks"> 119 ${t?.map(e=>(0,i.qy)` 120 <wui-flex class="network-icon"> 121 <wui-image src=${(0,s.J)(x.$.getNetworkImage(e))}></wui-image> 122 </wui-flex> 123 `)} 124 </wui-flex> 125 `}};$.styles=[k],C([(0,o.MZ)({type:Boolean})],$.prototype,"disabled",void 0),C([(0,o.MZ)()],$.prototype,"color",void 0),C([(0,o.MZ)()],$.prototype,"name",void 0),C([(0,o.MZ)()],$.prototype,"label",void 0),C([(0,o.MZ)()],$.prototype,"feeRange",void 0),C([(0,o.MZ)({type:Boolean})],$.prototype,"loading",void 0),C([(0,o.MZ)()],$.prototype,"onClick",void 0),$=C([(0,p.EM)("w3m-onramp-provider-item")],$),r(99548);let P=(0,i.AH)` 126 wui-flex { 127 border-top: 1px solid var(--wui-color-gray-glass-005); 128 } 129 130 a { 131 text-decoration: none; 132 color: var(--wui-color-fg-175); 133 font-weight: 500; 134 display: flex; 135 align-items: center; 136 justify-content: center; 137 gap: var(--wui-spacing-3xs); 138 } 139`,R=class extends i.WF{render(){let{termsConditionsUrl:e,privacyPolicyUrl:t}=l.H.state;return e||t?(0,i.qy)` 140 <wui-flex 141 .padding=${["m","s","s","s"]} 142 flexDirection="column" 143 alignItems="center" 144 justifyContent="center" 145 gap="s" 146 > 147 <wui-text color="fg-250" variant="small-400" align="center"> 148 We work with the best providers to give you the lowest fees and best support. More options 149 coming soon! 150 </wui-text> 151 152 ${this.howDoesItWorkTemplate()} 153 </wui-flex> 154 `:null}howDoesItWorkTemplate(){return(0,i.qy)` <wui-link @click=${this.onWhatIsBuy.bind(this)}> 155 <wui-icon size="xs" color="accent-100" slot="iconLeft" name="helpCircle"></wui-icon> 156 How does it work? 157 </wui-link>`}onWhatIsBuy(){f.E.sendEvent({type:"track",event:"SELECT_WHAT_IS_A_BUY",properties:{isSmartAccount:(0,b.lj)(y.W.state.activeChain)===v.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}}),m.I.push("WhatIsABuy")}};R.styles=[P],R=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a}([(0,p.EM)("w3m-onramp-providers-footer")],R);var I=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let A=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.providers=a.aG.state.providers,this.unsubscribe.push(a.aG.subscribeKey("providers",e=>{this.providers=e}))}render(){return(0,i.qy)` 158 <wui-flex flexDirection="column" .padding=${["0","s","s","s"]} gap="xs"> 159 ${this.onRampProvidersTemplate()} 160 </wui-flex> 161 <w3m-onramp-providers-footer></w3m-onramp-providers-footer> 162 `}onRampProvidersTemplate(){return this.providers.filter(e=>e.supportedChains.includes(y.W.state.activeChain??"eip155")).map(e=>(0,i.qy)` 163 <w3m-onramp-provider-item 164 label=${e.label} 165 name=${e.name} 166 feeRange=${e.feeRange} 167 @click=${()=>{this.onClickProvider(e)}} 168 ?disabled=${!e.url} 169 data-testid=${`onramp-provider-${e.name}`} 170 ></w3m-onramp-provider-item> 171 `)}onClickProvider(e){a.aG.setSelectedProvider(e),m.I.push("BuyInProgress"),g.w.openHref(a.aG.state.selectedProvider?.url||e.url,"popupWindow","width=600,height=800,scrollbars=yes"),f.E.sendEvent({type:"track",event:"SELECT_BUY_PROVIDER",properties:{provider:e.name,isSmartAccount:(0,b.lj)(y.W.state.activeChain)===v.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}})}};
171I([(0,o.wk)()],A.prototype,"providers",void 0),A=I([(0,p.EM)("w3m-onramp-providers-view")],A);let O=(0,i.AH)` 172 :host > wui-grid { 173 max-height: 360px; 174 overflow: auto; 175 } 176 177 wui-flex { 178 transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md); 179 will-change: opacity; 180 } 181 182 wui-grid::-webkit-scrollbar { 183 display: none; 184 } 185 186 wui-flex.disabled { 187 opacity: 0.3; 188 pointer-events: none; 189 user-select: none; 190 } 191`;var j=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let W=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.selectedCurrency=a.aG.state.purchaseCurrencies,this.tokens=a.aG.state.purchaseCurrencies,this.tokenImages=n.j.state.tokenImages,this.checked=c.o.state.isLegalCheckboxChecked,this.unsubscribe.push(a.aG.subscribe(e=>{this.selectedCurrency=e.purchaseCurrencies,this.tokens=e.purchaseCurrencies}),n.j.subscribeKey("tokenImages",e=>this.tokenImages=e),c.o.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){let{termsConditionsUrl:e,privacyPolicyUrl:t}=l.H.state,r=l.H.state.features?.legalCheckbox,o=!!(e||t)&&!!r&&!this.checked;return(0,i.qy)` 192 <w3m-legal-checkbox></w3m-legal-checkbox> 193 <wui-flex 194 flexDirection="column" 195 .padding=${["0","s","s","s"]} 196 gap="xs" 197 class=${(0,s.J)(o?"disabled":void 0)} 198 > 199 ${this.currenciesTemplate(o)} 200 </wui-flex> 201 <w3m-legal-footer></w3m-legal-footer> 202 `}currenciesTemplate(e=!1){return this.tokens.map(t=>(0,i.qy)` 203 <wui-list-item 204 imageSrc=${(0,s.J)(this.tokenImages?.[t.symbol])} 205 @click=${()=>this.selectToken(t)} 206 variant="image" 207 tabIdx=${(0,s.J)(e?-1:void 0)} 208 > 209 <wui-flex gap="3xs" alignItems="center"> 210 <wui-text variant="paragraph-500" color="fg-100">${t.name}</wui-text> 211 <wui-text variant="small-400" color="fg-200">${t.symbol}</wui-text> 212 </wui-flex> 213 </wui-list-item> 214 `)}selectToken(e){e&&(a.aG.setPurchaseCurrency(e),u.W.close())}};W.styles=O,j([(0,o.wk)()],W.prototype,"selectedCurrency",void 0),j([(0,o.wk)()],W.prototype,"tokens",void 0),j([(0,o.wk)()],W.prototype,"tokenImages",void 0),j([(0,o.wk)()],W.prototype,"checked",void 0),W=j([(0,p.EM)("w3m-onramp-token-select-view")],W);var T=r(2767),q=r(9886),E=r(72317);r(2080),r(39001),r(48088);let G=(0,i.AH)` 215 @keyframes shake { 216 0% { 217 transform: translateX(0); 218 } 219 25% { 220 transform: translateX(3px); 221 } 222 50% { 223 transform: translateX(-3px); 224 } 225 75% { 226 transform: translateX(3px); 227 } 228 100% { 229 transform: translateX(0); 230 } 231 } 232 233 wui-flex:first-child:not(:only-child) { 234 position: relative; 235 } 236 237 wui-loading-thumbnail { 238 position: absolute; 239 } 240 241 wui-visual { 242 width: var(--wui-wallet-image-size-lg); 243 height: var(--wui-wallet-image-size-lg); 244 border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs)); 245 position: relative; 246 overflow: hidden; 247 } 248 249 wui-visual::after { 250 content: ''; 251 display: block; 252 width: 100%; 253 height: 100%; 254 position: absolute; 255 inset: 0; 256 border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs)); 257 box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005); 258 } 259 260 wui-icon-box { 261 position: absolute; 262 right: calc(var(--wui-spacing-3xs) * -1); 263 bottom: calc(var(--wui-spacing-3xs) * -1); 264 opacity: 0; 265 transform: scale(0.5); 266 transition: 267 opacity var(--wui-ease-out-power-2) var(--wui-duration-lg), 268 transform var(--wui-ease-out-power-2) var(--wui-duration-lg); 269 will-change: opacity, transform; 270 } 271 272 wui-text[align='center'] { 273 width: 100%; 274 padding: 0px var(--wui-spacing-l); 275 } 276 277 [data-error='true'] wui-icon-box { 278 opacity: 1; 279 transform: scale(1); 280 } 281 282 [data-error='true'] > wui-flex:first-child { 283 animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 284 } 285 286 [data-retry='false'] wui-link { 287 display: none; 288 } 289 290 [data-retry='true'] wui-link { 291 display: block; 292 opacity: 1; 293 } 294 295 wui-link { 296 padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs); 297 } 298`;var M=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i
298);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let D=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.selectedOnRampProvider=a.aG.state.selectedProvider,this.uri=T.x.state.wcUri,this.ready=!1,this.showRetry=!1,this.buffering=!1,this.error=!1,this.isMobile=!1,this.onRetry=void 0,this.unsubscribe.push(a.aG.subscribeKey("selectedProvider",e=>{this.selectedOnRampProvider=e}))}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,i.qy)` 299 <wui-flex 300 data-error=${(0,s.J)(this.error)} 301 data-retry=${this.showRetry} 302 flexDirection="column" 303 alignItems="center" 304 .padding=${["3xl","xl","xl","xl"]} 305 gap="xl" 306 > 307 <wui-flex justifyContent="center" alignItems="center"> 308 <wui-visual 309 name=${(0,s.J)(this.selectedOnRampProvider?.name)} 310 size="lg" 311 class="provider-image" 312 > 313 </wui-visual> 314 315 ${this.error?null:this.loaderTemplate()} 316 317 <wui-icon-box 318 backgroundColor="error-100" 319 background="opaque" 320 iconColor="error-100" 321 icon="close" 322 size="sm" 323 border 324 borderColor="wui-color-bg-125" 325 ></wui-icon-box> 326 </wui-flex> 327 328 <wui-flex flexDirection="column" alignItems="center" gap="xs"> 329 <wui-text variant="paragraph-500" color=${this.error?"error-100":"fg-100"}> 330 ${e} 331 </wui-text> 332 <wui-text align="center" variant="small-500" color="fg-200">${t}</wui-text> 333 </wui-flex> 334 335 ${this.error?this.tryAgainTemplate():null} 336 </wui-flex> 337 338 <wui-flex .padding=${["0","xl","xl","xl"]} justifyContent="center"> 339 <wui-link @click=${this.onCopyUri} color="fg-200"> 340 <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon> 341 Copy link 342 </wui-link> 343 </wui-flex> 344 `}onTryAgain(){this.selectedOnRampProvider&&(this.error=!1,g.w.openHref(this.selectedOnRampProvider.url,"popupWindow","width=600,height=800,scrollbars=yes"))}tryAgainTemplate(){return this.selectedOnRampProvider?.url?(0,i.qy)`<wui-button size="md" variant="accent" @click=${this.onTryAgain.bind(this)}> 345 <wui-icon color="inherit" slot="iconLeft" name="refresh"></wui-icon> 346 Try again 347 </wui-button>`:null}loaderTemplate(){let e=q.W.state.themeVariables["--w3m-border-radius-master"],t=e?parseInt(e.replace("px",""),10):4;return(0,i.qy)`<wui-loading-thumbnail radius=${9*t}></wui-loading-thumbnail>`}onCopyUri(){if(!this.selectedOnRampProvider?.url){E.P.showError("No link found"),m.I.goBack();return}try{g.w.copyToClopboard(this.selectedOnRampProvider.url),E.P.showSuccess("Link copied")}catch{E.P.showError("Failed to copy")}}};D.styles=G,M([(0,o.wk)()],D.prototype,"intervalId",void 0),M([(0,o.wk)()],D.prototype,"selectedOnRampProvider",void 0),M([(0,o.wk)()],D.prototype,"uri",void 0),M([(0,o.wk)()],D.prototype,"ready",void 0),M([(0,o.wk)()],D.prototype,"showRetry",void 0),M([(0,o.wk)()],D.prototype,"buffering",void 0),M([(0,o.wk)()],D.prototype,"error",void 0),M([(0,o.MZ)({type:Boolean})],D.prototype,"isMobile",void 0),M([(0,o.MZ)()],D.prototype,"onRetry",void 0),D=M([(0,p.EM)("w3m-buy-in-progress-view")],D);let B=class extends i.WF{render(){return(0,i.qy)` 348 <wui-flex 349 flexDirection="column" 350 .padding=${["xxl","3xl","xl","3xl"]} 351 alignItems="center" 352 gap="xl" 353 > 354 <wui-visual name="onrampCard"></wui-visual> 355 <wui-flex flexDirection="column" gap="xs" alignItems="center"> 356 <wui-text align="center" variant="paragraph-500" color="fg-100"> 357 Quickly and easily buy digital assets! 358 </wui-text> 359 <wui-text align="center" variant="small-400" color="fg-200"> 360 Simply select your preferred onramp provider and add digital assets to your account 361 using your credit card or bank transfer 362 </wui-text> 363 </wui-flex> 364 <wui-button @click=${m.I.goBack}> 365 <wui-icon size="sm" color="inherit" name="add" slot="iconLeft"></wui-icon> 366 Buy 367 </wui-button>
367 368 </wui-flex> 369 `}};B=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a}([(0,p.EM)("w3m-what-is-a-buy-view")],B),r(66504);let L=(0,i.AH)` 370 :host { 371 width: 100%; 372 } 373 374 wui-loading-spinner { 375 position: absolute; 376 top: 50%; 377 right: 20px; 378 transform: translateY(-50%); 379 } 380 381 .currency-container { 382 position: absolute; 383 top: 50%; 384 transform: translateY(-50%); 385 right: var(--wui-spacing-1xs); 386 height: 40px; 387 padding: var(--wui-spacing-xs) var(--wui-spacing-1xs) var(--wui-spacing-xs) 388 var(--wui-spacing-xs); 389 min-width: 95px; 390 border-radius: var(--FULL, 1000px); 391 border: 1px solid var(--wui-color-gray-glass-002); 392 background: var(--wui-color-gray-glass-002); 393 cursor: pointer; 394 } 395 396 .currency-container > wui-image { 397 height: 24px; 398 width: 24px; 399 border-radius: 50%; 400 } 401`;var S=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let z=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.type="Token",this.value=0,this.currencies=[],this.selectedCurrency=this.currencies?.[0],this.currencyImages=n.j.state.currencyImages,this.tokenImages=n.j.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)}),n.j.subscribe(e=>{this.currencyImages={...e.currencyImages},this.tokenImages={...e.tokenImages}}))}firstUpdated(){a.aG.getAvailableCurrencies()}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){let e=this.selectedCurrency?.symbol||"",t=this.currencyImages[e]||this.tokenImages[e];return(0,i.qy)`<wui-input-text type="number" size="lg" value=${this.value}> 402 ${this.selectedCurrency?(0,i.qy)` <wui-flex 403 class="currency-container" 404 justifyContent="space-between" 405 alignItems="center" 406 gap="xxs" 407 @click=${()=>u.W.open({view:`OnRamp${this.type}Select`})} 408 > 409 <wui-image src=${(0,s.J)(t)}></wui-image> 410 <wui-text color="fg-100">${this.selectedCurrency.symbol}</wui-text> 411 </wui-flex>`:(0,i.qy)`<wui-loading-spinner></wui-loading-spinner>`} 412 </wui-input-text>`}formatPaymentCurrency(e){return{name:e.id,symbol:e.id}}formatPurchaseCurrency(e){return{name:e.name,symbol:e.symbol}}};z.styles=L,S([(0,o.MZ)({type:String})],z.prototype,"type",void 0),S([(0,o.MZ)({type:Number})],z.prototype,"value",void 0),S([(0,o.wk)()],z.prototype,"currencies",void 0),S([(0,o.wk)()],z.prototype,"selectedCurrency",void 0),S([(0,o.wk)()],z.prototype,"currencyImages",void 0),S([(0,o.wk)()],z.prototype,"tokenImages",void 0),z=S([(0,p.EM)("w3m-onramp-input")],z);let F=(0,i.AH)` 413 :host > wui-flex { 414 width: 100%; 415 max-width: 360px; 416 } 417 418 :host > wui-flex > wui-flex { 419 border-radius: var(--wui-border-radius-l); 420 width: 100%; 421 } 422 423 .amounts-container { 424 width: 100%; 425 } 426`;var H=function(e,t,r,i){var o,s=arguments.length,a=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,i);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(a=(s<3?o(a):s>3?o(t,r,a):o(t,r))||a);return s>3&&a&&Object.defineProperty(t,r,a),a};let U={USD:"$",EUR:"â¬",GBP:"\xa3"},_=[100,250,500,1e3],Z=class extends i.WF{constructor(){super(),this.unsubscribe=[],this.disabled=!1,this.caipAddress=y.W.state.activeCaipAddress,this.loading=u.W.state.loading,this.paymentCurrency=a.aG.state.paymentCurrency,this.paymentAmount=a.aG.state.paymentAmount,this.purchaseAmount=a.aG.state.purchaseAmount,this.quoteLoading=a.aG.state.quotesLoading,this.unsubscribe.push(y.W.subscribeKey("activeCaipAddress",e=>this.caipAddress=e),u.W.subscribeKey("loading",e=>{this.loading=e}),a.aG.subscribe(e=>{this.paymentCurrency=e.paymentCurrency,this.paymentAmount=e.paymentAmount,this.purchaseAmount=e.purchaseAmount,this.quoteLoading=e.quotesLoading}))}
426disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){return(0,i.qy)` 427 <wui-flex flexDirection="column" justifyContent="center" alignItems="center"> 428 <wui-flex flexDirection="column" alignItems="center" gap="xs"> 429 <w3m-onramp-input 430 type="Fiat" 431 @inputChange=${this.onPaymentAmountChange.bind(this)} 432 .value=${this.paymentAmount||0} 433 ></w3m-onramp-input> 434 <w3m-onramp-input 435 type="Token" 436 .value=${this.purchaseAmount||0} 437 .loading=${this.quoteLoading} 438 ></w3m-onramp-input> 439 <wui-flex justifyContent="space-evenly" class="amounts-container" gap="xs"> 440 ${_.map(e=>(0,i.qy)`<wui-button 441 variant=${this.paymentAmount===e?"accent":"neutral"} 442 size="md" 443 textVariant="paragraph-600" 444 fullWidth 445 @click=${()=>this.selectPresetAmount(e)} 446 >${`${U[this.paymentCurrency?.id||"USD"]} ${e}`}</wui-button 447 >`)} 448 </wui-flex> 449 ${this.templateButton()} 450 </wui-flex> 451 </wui-flex> 452 `}templateButton(){return this.caipAddress?(0,i.qy)`<wui-button 453 @click=${this.getQuotes.bind(this)} 454 variant="main" 455 fullWidth 456 size="lg" 457 borderRadius="xs" 458 > 459 Get quotes 460 </wui-button>`:(0,i.qy)`<wui-button 461 @click=${this.openModal.bind(this)} 462 variant="accent" 463 fullWidth 464 size="lg" 465 borderRadius="xs" 466 > 467 Connect wallet 468 </wui-button>`}getQuotes(){this.loading||u.W.open({view:"OnRampProviders"})}openModal(){u.W.open({view:"Connect"})}async onPaymentAmountChange(e){a.aG.setPaymentAmount(Number(e.detail)),await a.aG.getQuote()}async selectPresetAmount(e){a.aG.setPaymentAmount(e),await a.aG.getQuote()}};Z.styles=F,H([(0,o.MZ)({type:Boolean})],Z.prototype,"disabled",void 0),H([(0,o.wk)()],Z.prototype,"caipAddress",void 0),H([(0,o.wk)()],Z.prototype,"loading",void 0),H([(0,o.wk)()],Z.prototype,"paymentCurrency",void 0),H([(0,o.wk)()],Z.prototype,"paymentAmount",void 0),H([(0,o.wk)()],Z.prototype,"purchaseAmount",void 0),H([(0,o.wk)()],Z.prototype,"quoteLoading",void 0),Z=H([(0,p.EM)("w3m-onramp-widget")],Z)}}]);
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.