import{j as e,l as i,a0 as t,a1 as n,m as r,M as o,O as s,C as a,J as c,R as l,a as u,E as d,t as p,W as f,o as h,T as m,S as w}from"./p-BxEPsDRj.js";import{r as g,c as v,n as x}from"./p-CrMmJdZ6.js";import{o as y}from"./p-zNe_7rLp.js";import"./p-QEmqEl1n.js";import{O as b}from"./p-UDfqWbD9.js";import"./p-CbOrugAV.js";import"./p-WZF-tHaR.js";import"./p-Bz1D2Unz.js";import"./p-CsctQ88z.js";import"./p-CG_zIdXa.js";import"./p-DJATscC5.js";import"./p-YV_GhS6X.js";import"./p-CGIQ9z_e.js";import"./p-BId5WtRC.js";import"buffer";import"events";import"ox";import"viem";import"viem/chains";import"./p-B9-TeWdB.js";var $=e`
  :host > wui-grid {
    max-height: 360px;
    overflow: auto;
  }

  wui-flex {
    transition: opacity ${({easings:e})=>e["ease-out-power-1"]}
      ${({durations:e})=>e["md"]};
    will-change: opacity;
  }

  wui-grid::-webkit-scrollbar {
    display: none;
  }

  wui-flex.disabled {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }
`;var k=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let j=class e extends i{constructor(){super();this.unsubscribe=[];this.selectedCurrency=t.state.paymentCurrency;this.currencies=t.state.paymentCurrencies;this.currencyImages=n.state.currencyImages;this.checked=b.state.isLegalCheckboxChecked;this.unsubscribe.push(...[t.subscribe((e=>{this.selectedCurrency=e.paymentCurrency;this.currencies=e.paymentCurrencies})),n.subscribeKey("currencyImages",(e=>this.currencyImages=e)),b.subscribeKey("isLegalCheckboxChecked",(e=>{this.checked=e}))])}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const{termsConditionsUrl:e,privacyPolicyUrl:i}=s.state;const t=s.state.features?.legalCheckbox;const n=e||i;const o=Boolean(n)&&Boolean(t);const a=o&&!this.checked;return r`
      <w3m-legal-checkbox></w3m-legal-checkbox>
      <wui-flex
        flexDirection="column"
        .padding=${["0","3","3","3"]}
        gap="2"
        class=${y(a?"disabled":undefined)}
      >
        ${this.currenciesTemplate(a)}
      </wui-flex>
    `}currenciesTemplate(e=false){return this.currencies.map((i=>r`
        <wui-list-item
          imageSrc=${y(this.currencyImages?.[i.id])}
          @click=${()=>this.selectCurrency(i)}
          variant="image"
          tabIdx=${y(e?-1:undefined)}
        >
          <wui-text variant="md-medium" color="primary">${i.id}</wui-text>
        </wui-list-item>
      `))}selectCurrency(e){if(!e){return}t.setPaymentCurrency(e);o.close()}};j.styles=$;k([g()],j.prototype,"selectedCurrency",void 0);k([g()],j.prototype,"currencies",void 0);k([g()],j.prototype,"currencyImages",void 0);k([g()],j.prototype,"checked",void 0);j=k([v("w3m-onramp-fiat-select-view")],j);var R=e`
  button {
    padding: ${({spacing:e})=>e["3"]};
    border-radius: ${({borderRadius:e})=>e["4"]};
    border: none;
    outline: none;
    background-color: ${({tokens:e})=>e.core.glass010};
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: ${({spacing:e})=>e["3"]};
    transition: background-color ${({easings:e})=>e["ease-out-power-1"]}
      ${({durations:e})=>e["md"]};
    will-change: background-color;
    cursor: pointer;
  }

  button:hover {
    background-color: ${({tokens:e})=>e.theme.foregroundPrimary};
  }

  .provider-image {
    width: ${({spacing:e})=>e["10"]};
    min-width: ${({spacing:e})=>e["10"]};
    height: ${({spacing:e})=>e["10"]};
    border-radius: calc(
      ${({borderRadius:e})=>e["4"]} - calc(${({spacing:e})=>e["3"]} / 2)
    );
    position: relative;
    overflow: hidden;
  }

  .network-icon {
    width: ${({spacing:e})=>e["3"]};
    height: ${({spacing:e})=>e["3"]};
    border-radius: calc(${({spacing:e})=>e["3"]} / 2);
    overflow: hidden;
    box-shadow:
      0 0 0 3px ${({tokens:e})=>e.theme.foregroundPrimary},
      0 0 0 3px ${({tokens:e})=>e.theme.backgroundPrimary};
    transition: box-shadow ${({easings:e})=>e["ease-out-power-1"]}
      ${({durations:e})=>e["md"]};
    will-change: box-shadow;
  }

  button:hover .network-icon {
    box-shadow:
      0 0 0 3px ${({tokens:e})=>e.core.glass010},
      0 0 0 3px ${({tokens:e})=>e.theme.backgroundPrimary};
  }
`;var C=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let I=class e extends i{constructor(){super(...arguments);this.disabled=false;this.color="inherit";this.label="";this.feeRange="";this.loading=false;this.onClick=null}render(){return r`
      <button ?disabled=${this.disabled} @click=${this.onClick} ontouchstart>
        <wui-visual name=${y(this.name)} class="provider-image"></wui-visual>
        <wui-flex flexDirection="column" gap="01">
          <wui-text variant="md-regular" color="primary">${this.label}</wui-text>
          <wui-flex alignItems="center" justifyContent="flex-start" gap="4">
            <wui-text variant="sm-medium" color="primary">
              <wui-text variant="sm-regular" color="secondary">Fees</wui-text>
              ${this.feeRange}
            </wui-text>
            <wui-flex gap="2">
              <wui-icon name="bank" size="sm" color="default"></wui-icon>
              <wui-icon name="card" size="sm" color="default"></wui-icon>
            </wui-flex>
            ${this.networksTemplate()}
          </wui-flex>
        </wui-flex>
        ${this.loading?r`<wui-loading-spinner color="secondary" size="md"></wui-loading-spinner>`:r`<wui-icon name="chevronRight" color="default" size="sm"></wui-icon>`}
      </button>
    `}networksTemplate(){const e=a.getAllRequestedCaipNetworks();const i=e?.filter((e=>e?.assets?.imageId))?.slice(0,5);return r`
      <wui-flex class="networks">
        ${i?.map((e=>r`
            <wui-flex class="network-icon">
              <wui-image src=${y(c.getNetworkImage(e))}></wui-image>
            </wui-flex>
          `))}
      </wui-flex>
    `}};I.styles=[R];C([x({type:Boolean})],I.prototype,"disabled",void 0);C([x()],I.prototype,"color",void 0);C([x()],I.prototype,"name",void 0);C([x()],I.prototype,"label",void 0);C([x()],I.prototype,"feeRange",void 0);C([x({type:Boolean})],I.prototype,"loading",void 0);C([x()],I.prototype,"onClick",void 0);I=C([v("w3m-onramp-provider-item")],I);var O=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let B=class e extends i{constructor(){super();this.unsubscribe=[];this.providers=t.state.providers;this.unsubscribe.push(...[t.subscribeKey("providers",(e=>{this.providers=e}))])}render(){return r`
      <wui-flex flexDirection="column" .padding=${["0","3","3","3"]} gap="2">
        ${this.onRampProvidersTemplate()}
      </wui-flex>
    `}onRampProvidersTemplate(){return this.providers.filter((e=>e.supportedChains.includes(a.state.activeChain??"eip155"))).map((e=>r`
          <w3m-onramp-provider-item
            label=${e.label}
            name=${e.name}
            feeRange=${e.feeRange}
            @click=${()=>{this.onClickProvider(e)}}
            ?disabled=${!e.url}
            data-testid=${`onramp-provider-${e.name}`}
          ></w3m-onramp-provider-item>
        `))}onClickProvider(e){t.setSelectedProvider(e);l.push("BuyInProgress");u.openHref(t.state.selectedProvider?.url||e.url,"popupWindow","width=600,height=800,scrollbars=yes");d.sendEvent({type:"track",event:"SELECT_BUY_PROVIDER",properties:{provider:e.name,isSmartAccount:p(a.state.activeChain)===f.ACCOUNT_TYPES.SMART_ACCOUNT}})}};O([g()],B.prototype,"providers",void 0);B=O([v("w3m-onramp-providers-view")],B);var z=e`
  :host > wui-grid {
    max-height: 360px;
    overflow: auto;
  }

  wui-flex {
    transition: opacity ${({easings:e})=>e["ease-out-power-1"]}
      ${({durations:e})=>e["md"]};
    will-change: opacity;
  }

  wui-grid::-webkit-scrollbar {
    display: none;
  }

  wui-flex.disabled {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }
`;var D=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let T=class e extends i{constructor(){super();this.unsubscribe=[];this.selectedCurrency=t.state.purchaseCurrencies;this.tokens=t.state.purchaseCurrencies;this.tokenImages=n.state.tokenImages;this.checked=b.state.isLegalCheckboxChecked;this.unsubscribe.push(...[t.subscribe((e=>{this.selectedCurrency=e.purchaseCurrencies;this.tokens=e.purchaseCurrencies})),n.subscribeKey("tokenImages",(e=>this.tokenImages=e)),b.subscribeKey("isLegalCheckboxChecked",(e=>{this.checked=e}))])}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const{termsConditionsUrl:e,privacyPolicyUrl:i}=s.state;const t=s.state.features?.legalCheckbox;const n=e||i;const o=Boolean(n)&&Boolean(t);const a=o&&!this.checked;return r`
      <w3m-legal-checkbox></w3m-legal-checkbox>
      <wui-flex
        flexDirection="column"
        .padding=${["0","3","3","3"]}
        gap="2"
        class=${y(a?"disabled":undefined)}
      >
        ${this.currenciesTemplate(a)}
      </wui-flex>
    `}currenciesTemplate(e=false){return this.tokens.map((i=>r`
        <wui-list-item
          imageSrc=${y(this.tokenImages?.[i.symbol])}
          @click=${()=>this.selectToken(i)}
          variant="image"
          tabIdx=${y(e?-1:undefined)}
        >
          <wui-flex gap="1" alignItems="center">
            <wui-text variant="md-medium" color="primary">${i.name}</wui-text>
            <wui-text variant="sm-regular" color="secondary">${i.symbol}</wui-text>
          </wui-flex>
        </wui-list-item>
      `))}selectToken(e){if(!e){return}t.setPurchaseCurrency(e);o.close()}};T.styles=z;D([g()],T.prototype,"selectedCurrency",void 0);D([g()],T.prototype,"tokens",void 0);D([g()],T.prototype,"tokenImages",void 0);D([g()],T.prototype,"checked",void 0);T=D([v("w3m-onramp-token-select-view")],T);var P=e`
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(3px);
    }
    50% {
      transform: translateX(-3px);
    }
    75% {
      transform: translateX(3px);
    }
    100% {
      transform: translateX(0);
    }
  }

  wui-flex:first-child:not(:only-child) {
    position: relative;
  }

  wui-loading-thumbnail {
    position: absolute;
  }

  wui-visual {
    border-radius: calc(
      ${({borderRadius:e})=>e["1"]} * 9 - ${({borderRadius:e})=>e["3"]}
    );
    position: relative;
    overflow: hidden;
  }

  wui-icon-box {
    position: absolute;
    right: calc(${({spacing:e})=>e["1"]} * -1);
    bottom: calc(${({spacing:e})=>e["1"]} * -1);
    opacity: 0;
    transform: scale(0.5);
    transition:
      opacity ${({durations:e})=>e["lg"]} ${({easings:e})=>e["ease-out-power-2"]},
      transform ${({durations:e})=>e["lg"]}
        ${({easings:e})=>e["ease-out-power-2"]};
    will-change: opacity, transform;
  }

  wui-text[align='center'] {
    width: 100%;
    padding: 0px ${({spacing:e})=>e["4"]};
  }

  [data-error='true'] wui-icon-box {
    opacity: 1;
    transform: scale(1);
  }

  [data-error='true'] > wui-flex:first-child {
    animation: shake 250ms ${({easings:e})=>e["ease-out-power-2"]} both;
  }

  [data-retry='false'] wui-link {
    display: none;
  }

  [data-retry='true'] wui-link {
    display: block;
    opacity: 1;
  }

  wui-link {
    padding: ${({spacing:e})=>e["01"]} ${({spacing:e})=>e["2"]};
  }
`;var U=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let A=class e extends i{constructor(){super();this.unsubscribe=[];this.selectedOnRampProvider=t.state.selectedProvider;this.uri=h.state.wcUri;this.ready=false;this.showRetry=false;this.buffering=false;this.error=false;this.isMobile=false;this.onRetry=undefined;this.unsubscribe.push(...[t.subscribeKey("selectedProvider",(e=>{this.selectedOnRampProvider=e}))])}disconnectedCallback(){if(this.intervalId){clearInterval(this.intervalId)}}render(){let e="Continue in external window";if(this.error){e="Buy failed"}else if(this.selectedOnRampProvider){e=`Buy in ${this.selectedOnRampProvider?.label}`}const i=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 r`
      <wui-flex
        data-error=${y(this.error)}
        data-retry=${this.showRetry}
        flexDirection="column"
        alignItems="center"
        .padding=${["10","5","5","5"]}
        gap="5"
      >
        <wui-flex justifyContent="center" alignItems="center">
          <wui-visual
            name=${y(this.selectedOnRampProvider?.name)}
            size="lg"
            class="provider-image"
          >
          </wui-visual>

          ${this.error?null:this.loaderTemplate()}

          <wui-icon-box
            color="error"
            icon="close"
            size="sm"
            border
            borderColor="wui-color-bg-125"
          ></wui-icon-box>
        </wui-flex>

        <wui-flex
          flexDirection="column"
          alignItems="center"
          gap="2"
          .padding=${["4","0","0","0"]}
        >
          <wui-text variant="md-medium" color=${this.error?"error":"primary"}>
            ${e}
          </wui-text>
          <wui-text align="center" variant="sm-medium" color="secondary">${i}</wui-text>
        </wui-flex>

        ${this.error?this.tryAgainTemplate():null}
      </wui-flex>

      <wui-flex .padding=${["0","5","5","5"]} justifyContent="center">
        <wui-link @click=${this.onCopyUri} color="secondary">
          <wui-icon size="sm" color="default" slot="iconLeft" name="copy"></wui-icon>
          Copy link
        </wui-link>
      </wui-flex>
    `}onTryAgain(){if(!this.selectedOnRampProvider){return}this.error=false;u.openHref(this.selectedOnRampProvider.url,"popupWindow","width=600,height=800,scrollbars=yes")}tryAgainTemplate(){if(!this.selectedOnRampProvider?.url){return null}return r`<wui-button size="md" variant="accent" @click=${this.onTryAgain.bind(this)}>
      <wui-icon color="inherit" slot="iconLeft" name="refresh"></wui-icon>
      Try again
    </wui-button>`}loaderTemplate(){const e=m.state.themeVariables["--w3m-border-radius-master"];const i=e?parseInt(e.replace("px",""),10):4;return r`<wui-loading-thumbnail radius=${i*9}></wui-loading-thumbnail>`}onCopyUri(){if(!this.selectedOnRampProvider?.url){w.showError("No link found");l.goBack();return}try{u.copyToClopboard(this.selectedOnRampProvider.url);w.showSuccess("Link copied")}catch{w.showError("Failed to copy")}}};A.styles=P;U([g()],A.prototype,"intervalId",void 0);U([g()],A.prototype,"selectedOnRampProvider",void 0);U([g()],A.prototype,"uri",void 0);U([g()],A.prototype,"ready",void 0);U([g()],A.prototype,"showRetry",void 0);U([g()],A.prototype,"buffering",void 0);U([g()],A.prototype,"error",void 0);U([x({type:Boolean})],A.prototype,"isMobile",void 0);U([x()],A.prototype,"onRetry",void 0);A=U([v("w3m-buy-in-progress-view")],A);var S=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let W=class e extends i{render(){return r`
      <wui-flex
        flexDirection="column"
        .padding=${["6","10","5","10"]}
        alignItems="center"
        gap="5"
      >
        <wui-visual name="onrampCard"></wui-visual>
        <wui-flex flexDirection="column" gap="2" alignItems="center">
          <wui-text align="center" variant="md-medium" color="primary">
            Quickly and easily buy digital assets!
          </wui-text>
          <wui-text align="center" variant="sm-regular" color="secondary">
            Simply select your preferred onramp provider and add digital assets to your account
            using your credit card or bank transfer
          </wui-text>
        </wui-flex>
        <wui-button @click=${l.goBack}>
          <wui-icon size="sm" color="inherit" name="add" slot="iconLeft"></wui-icon>
          Buy
        </wui-button>
      </wui-flex>
    `}};W=S([v("w3m-what-is-a-buy-view")],W);var L=e`
  :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: ${({spacing:e})=>e["2"]};
    height: 40px;
    padding: ${({spacing:e})=>e["2"]} ${({spacing:e})=>e["2"]}
      ${({spacing:e})=>e["2"]} ${({spacing:e})=>e["2"]};
    min-width: 95px;
    border-radius: ${({borderRadius:e})=>e["round"]};
    border: 1px solid ${({tokens:e})=>e.theme.foregroundPrimary};
    background: ${({tokens:e})=>e.theme.foregroundPrimary};
    cursor: pointer;
  }

  .currency-container > wui-image {
    height: 24px;
    width: 24px;
    border-radius: 50%;
  }
`;var E=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};let X=class e extends i{constructor(){super();this.unsubscribe=[];this.type="Token";this.value=0;this.currencies=[];this.selectedCurrency=this.currencies?.[0];this.currencyImages=n.state.currencyImages;this.tokenImages=n.state.tokenImages;this.unsubscribe.push(t.subscribeKey("purchaseCurrency",(e=>{if(!e||this.type==="Fiat"){return}this.selectedCurrency=this.formatPurchaseCurrency(e)})),t.subscribeKey("paymentCurrency",(e=>{if(!e||this.type==="Token"){return}this.selectedCurrency=this.formatPaymentCurrency(e)})),t.subscribe((e=>{if(this.type==="Fiat"){this.currencies=e.purchaseCurrencies.map(this.formatPurchaseCurrency)}else{this.currencies=e.paymentCurrencies.map(this.formatPaymentCurrency)}})),n.subscribe((e=>{this.currencyImages={...e.currencyImages};this.tokenImages={...e.tokenImages}})))}firstUpdated(){t.getAvailableCurrencies()}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){const e=this.selectedCurrency?.symbol||"";const i=this.currencyImages[e]||this.tokenImages[e];return r`<wui-input-text type="number" size="lg" value=${this.value}>
      ${this.selectedCurrency?r` <wui-flex
            class="currency-container"
            justifyContent="space-between"
            alignItems="center"
            gap="1"
            @click=${()=>o.open({view:`OnRamp${this.type}Select`})}
          >
            <wui-image src=${y(i)}></wui-image>
            <wui-text color="primary">${this.selectedCurrency.symbol}</wui-text>
          </wui-flex>`:r`<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}}};X.styles=L;E([x({type:String})],X.prototype,"type",void 0);E([x({type:Number})],X.prototype,"value",void 0);E([g()],X.prototype,"currencies",void 0);E([g()],X.prototype,"selectedCurrency",void 0);E([g()],X.prototype,"currencyImages",void 0);E([g()],X.prototype,"tokenImages",void 0);X=E([v("w3m-onramp-input")],X);var F=e`
  :host > wui-flex {
    width: 100%;
    max-width: 360px;
  }

  :host > wui-flex > wui-flex {
    border-radius: ${({borderRadius:e})=>e["8"]};
    width: 100%;
  }

  .amounts-container {
    width: 100%;
  }
`;var _=undefined&&undefined.__decorate||function(e,i,t,n){var r=arguments.length,o=r<3?i:n===null?n=Object.getOwnPropertyDescriptor(i,t):n,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(e,i,t,n);else for(var a=e.length-1;a>=0;a--)if(s=e[a])o=(r<3?s(o):r>3?s(i,t,o):s(i,t))||o;return r>3&&o&&Object.defineProperty(i,t,o),o};const G={USD:"$",EUR:"€",GBP:"£"};const Q=[100,250,500,1e3];let q=class e extends i{constructor(){super();this.unsubscribe=[];this.disabled=false;this.caipAddress=a.state.activeCaipAddress;this.loading=o.state.loading;this.paymentCurrency=t.state.paymentCurrency;this.paymentAmount=t.state.paymentAmount;this.purchaseAmount=t.state.purchaseAmount;this.quoteLoading=t.state.quotesLoading;this.unsubscribe.push(...[a.subscribeKey("activeCaipAddress",(e=>this.caipAddress=e)),o.subscribeKey("loading",(e=>{this.loading=e})),t.subscribe((e=>{this.paymentCurrency=e.paymentCurrency;this.paymentAmount=e.paymentAmount;this.purchaseAmount=e.purchaseAmount;this.quoteLoading=e.quotesLoading}))])}disconnectedCallback(){this.unsubscribe.forEach((e=>e()))}render(){return r`
      <wui-flex flexDirection="column" justifyContent="center" alignItems="center">
        <wui-flex flexDirection="column" alignItems="center" gap="2">
          <w3m-onramp-input
            type="Fiat"
            @inputChange=${this.onPaymentAmountChange.bind(this)}
            .value=${this.paymentAmount||0}
          ></w3m-onramp-input>
          <w3m-onramp-input
            type="Token"
            .value=${this.purchaseAmount||0}
            .loading=${this.quoteLoading}
          ></w3m-onramp-input>
          <wui-flex justifyContent="space-evenly" class="amounts-container" gap="2">
            ${Q.map((e=>r`<wui-button
                  variant=${this.paymentAmount===e?"accent-secondary":"neutral-secondary"}
                  size="md"
                  textVariant="md-medium"
                  fullWidth
                  @click=${()=>this.selectPresetAmount(e)}
                  >${`${G[this.paymentCurrency?.id||"USD"]} ${e}`}</wui-button
                >`))}
          </wui-flex>
          ${this.templateButton()}
        </wui-flex>
      </wui-flex>
    `}templateButton(){return this.caipAddress?r`<wui-button
          @click=${this.getQuotes.bind(this)}
          variant="accent-primary"
          fullWidth
          size="lg"
          borderRadius="xs"
        >
          Get quotes
        </wui-button>`:r`<wui-button
          @click=${this.openModal.bind(this)}
          variant="accent"
          fullWidth
          size="lg"
          borderRadius="xs"
        >
          Connect wallet
        </wui-button>`}getQuotes(){if(!this.loading){o.open({view:"OnRampProviders"})}}openModal(){o.open({view:"Connect"})}async onPaymentAmountChange(e){t.setPaymentAmount(Number(e.detail));await t.getQuote()}async selectPresetAmount(e){t.setPaymentAmount(e);await t.getQuote()}};q.styles=F;_([x({type:Boolean})],q.prototype,"disabled",void 0);_([g()],q.prototype,"caipAddress",void 0);_([g()],q.prototype,"loading",void 0);_([g()],q.prototype,"paymentCurrency",void 0);_([g()],q.prototype,"paymentAmount",void 0);_([g()],q.prototype,"purchaseAmount",void 0);_([g()],q.prototype,"quoteLoading",void 0);q=_([v("w3m-onramp-widget")],q);export{A as W3mBuyInProgressView,B as W3mOnRampProvidersView,j as W3mOnrampFiatSelectView,T as W3mOnrampTokensView,q as W3mOnrampWidget,W as W3mWhatIsABuyView};
//# sourceMappingURL=p-CaUlfdbx.js.map