@safe-stars/components/dist/onramp-DH9IWLzS.cjs

React component library for buying Telegram Stars in Telegram Mini Apps via Safe Stars.

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-CtZaCMo8.cjs"),a=require("./if-defined-MmHKu2JE.cjs"),$=require("./index-BERKYpvk.cjs");require("./index-CKpCHYPu.cjs");require("./index-BXulAD-4.cjs");require("./index--KmZMQQE.cjs");require("./index-BE8Edgdz.cjs");const T=require("./index-Dykd8oDe.cjs");require("./index-VqvoxVHf.cjs");require("./index-tmdyqLVs.cjs");require("./index-2v8aP99g.cjs");require("./index-qAKUCMGe.cjs");require("./index-BQl9E2h4.cjs");const v={id:"2b92315d-eab7-5bef-84fa-089a131333f5",name:"USD Coin",symbol:"USDC",networks:[{name:"ethereum-mainnet",display_name:"Ethereum",chain_id:"1",contract_address:"0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"},{name:"polygon-mainnet",display_name:"Polygon",chain_id:"137",contract_address:"0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174"}]},R={id:"USD",payment_method_limits:[{id:"card",min:"10.00",max:"7500.00"},{id:"ach_bank_account",min:"10.00",max:"25000.00"}]},k={providers:r.ONRAMP_PROVIDERS,selectedProvider:null,error:null,purchaseCurrency:v,paymentCurrency:R,purchaseCurrencies:[v],paymentCurrencies:[],quotesLoading:!1},p=r.proxy(k),W={state:p,subscribe(o){return r.subscribe(p,()=>o(p))},subscribeKey(o,e){return r.subscribeKey(p,o,e)},setSelectedProvider(o){if(o&&o.name==="meld"){const e=r.ChainController.state.activeChain===r.ConstantsUtil$1.CHAIN.SOLANA?"SOL":"USDC",t=r.AccountController.state.address??"",n=new URL(o.url);n.searchParams.append("publicKey",r.MELD_PUBLIC_KEY),n.searchParams.append("destinationCurrencyCode",e),n.searchParams.append("walletAddress",t),o.url=n.toString()}p.selectedProvider=o},setPurchaseCurrency(o){p.purchaseCurrency=o},setPaymentCurrency(o){p.paymentCurrency=o},setPurchaseAmount(o){u.state.purchaseAmount=o},setPaymentAmount(o){u.state.paymentAmount=o},async getAvailableCurrencies(){const o=await r.BlockchainApiController.getOnrampOptions();p.purchaseCurrencies=o.purchaseCurrencies,p.paymentCurrencies=o.paymentCurrencies,p.paymentCurrency=o.paymentCurrencies[0]||R,p.purchaseCurrency=o.purchaseCurrencies[0]||v,await r.ApiController.fetchCurrencyImages(o.paymentCurrencies.map(e=>e.id)),await r.ApiController.fetchTokenImages(o.purchaseCurrencies.map(e=>e.symbol))},async getQuote(){var o,e;p.quotesLoading=!0;try{const t=await r.BlockchainApiController.getOnrampQuote({purchaseCurrency:p.purchaseCurrency,paymentCurrency:p.paymentCurrency,amount:((o=p.paymentAmount)==null?void 0:o.toString())||"0",network:(e=p.purchaseCurrency)==null?void 0:e.symbol});return p.quotesLoading=!1,p.purchaseAmount=Number(t==null?void 0:t.purchaseAmount.amount),t}catch(t){return p.error=t.message,p.quotesLoading=!1,null}finally{p.quotesLoading=!1}},resetState(){p.providers=r.ONRAMP_PROVIDERS,p.selectedProvider=null,p.error=null,p.purchaseCurrency=v,p.paymentCurrency=R,p.purchaseCurrencies=[v],p.paymentCurrencies=[],p.paymentAmount=void 0,p.purchaseAmount=void 0,p.quotesLoading=!1}},u=r.withErrorBoundary(W),S=r.i`
  :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 m=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};let d=class extends r.i$1{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 r.x`
      <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?r.x`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:r.x`<wui-text variant="micro-700" color="fg-300"><span>${this.date}</span></wui-text>`}
      </wui-flex>
    `}async fetchTokenImage(){await r.ApiController._fetchTokenImage(this.purchaseCurrency)}statusIconTemplate(){return this.inProgress?null:this.completed?this.boughtIconTemplate():this.errorIconTemplate()}errorIconTemplate(){return r.x`<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 r.x`<wui-flex class="purchase-image-container">
      <wui-image src=${e}></wui-image>
    </wui-flex>`}boughtIconTemplate(){return r.x`<wui-icon-box
      size="xxs"
      iconColor="success-100"
      backgroundColor="success-100"
      background="opaque"
      icon="arrowBottom"
      borderColor="wui-color-bg-125"
    ></wui-icon-box>`}};d.styles=[S];m([a.n({type:Boolean})],d.prototype,"disabled",void 0);m([a.n()],d.prototype,"color",void 0);m([a.n()],d.prototype,"label",void 0);m([a.n()],d.prototype,"purchaseValue",void 0);m([a.n()],d.prototype,"purchaseCurrency",void 0);m([a.n()],d.prototype,"date",void 0);m([a.n({type:Boolean})],d.prototype,"completed",void 0);m([a.n({type:Boolean})],d.prototype,"inProgress",void 0);m([a.n({type:Boolean})],d.prototype,"failed",void 0);m([a.n()],d.prototype,"onClick",void 0);m([a.n()],d.prototype,"symbol",void 0);m([a.n()],d.prototype,"icon",void 0);d=m([a.customElement("w3m-onramp-activity-item")],d);const B=r.i`
  :host > wui-flex {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    padding: var(--wui-spacing-m);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  :host > wui-flex::-webkit-scrollbar {
    display: none;
  }

  :host > wui-flex > wui-flex {
    width: 100%;
  }

  wui-transaction-list-item-loader {
    width: 100%;
  }
`;var C=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};const E=7;exports.W3mOnRampActivityView=class extends r.i$1{constructor(){super(),this.unsubscribe=[],this.selectedOnRampProvider=u.state.selectedProvider,this.loading=!1,this.coinbaseTransactions=r.TransactionsController.state.coinbaseTransactions,this.tokenImages=r.AssetController.state.tokenImages,this.unsubscribe.push(u.subscribeKey("selectedProvider",e=>{this.selectedOnRampProvider=e}),r.AssetController.subscribeKey("tokenImages",e=>this.tokenImages=e),()=>{clearTimeout(this.refetchTimeout)},r.TransactionsController.subscribe(e=>{this.coinbaseTransactions={...e.coinbaseTransactions}})),r.TransactionsController.clearCursor(),this.fetchTransactions()}render(){return r.x`
      <wui-flex flexDirection="column" .padding=${["0","s","s","s"]} gap="xs">
        ${this.loading?this.templateLoading():this.templateTransactionsByYear()}
      </wui-flex>
    `}templateTransactions(e){return e==null?void 0:e.map(t=>{var l,x,I;const n=$.DateUtil.formatDate((l=t==null?void 0:t.metadata)==null?void 0:l.minedAt),s=t.transfers[0],i=s==null?void 0:s.fungible_info;if(!i)return null;const c=((x=i==null?void 0:i.icon)==null?void 0:x.url)||((I=this.tokenImages)==null?void 0:I[i.symbol||""]);return r.x`
        <w3m-onramp-activity-item
          label="Bought"
          .completed=${t.metadata.status==="ONRAMP_TRANSACTION_STATUS_SUCCESS"}
          .inProgress=${t.metadata.status==="ONRAMP_TRANSACTION_STATUS_IN_PROGRESS"}
          .failed=${t.metadata.status==="ONRAMP_TRANSACTION_STATUS_FAILED"}
          purchaseCurrency=${a.o(i.symbol)}
          purchaseValue=${s.quantity.numeric}
          date=${n}
          icon=${a.o(c)}
          symbol=${a.o(i.symbol)}
        ></w3m-onramp-activity-item>
      `})}templateTransactionsByYear(){return Object.keys(this.coinbaseTransactions).sort().reverse().map(t=>{const n=parseInt(t,10);return new Array(12).fill(null).map((i,c)=>c).reverse().map(i=>{var x;const c=$.TransactionUtil.getTransactionGroupTitle(n,i),l=(x=this.coinbaseTransactions[n])==null?void 0:x[i];return l?r.x`
          <wui-flex flexDirection="column">
            <wui-flex
              alignItems="center"
              flexDirection="row"
              .padding=${["xs","s","s","s"]}
            >
              <wui-text variant="paragraph-500" color="fg-200">${c}</wui-text>
            </wui-flex>
            <wui-flex flexDirection="column" gap="xs">
              ${this.templateTransactions(l)}
            </wui-flex>
          </wui-flex>
        `:null})})}async fetchTransactions(){await this.fetchCoinbaseTransactions()}async fetchCoinbaseTransactions(){const e=r.AccountController.state.address,t=r.OptionsController.state.projectId;if(!e)throw new Error("No address found");if(!t)throw new Error("No projectId found");this.loading=!0,await r.TransactionsController.fetchTransactions(e,"coinbase"),this.loading=!1,this.refetchLoadingTransactions()}refetchLoadingTransactions(){var s;const e=new Date;if((((s=this.coinbaseTransactions[e.getFullYear()])==null?void 0:s[e.getMonth()])||[]).filter(i=>i.metadata.status==="ONRAMP_TRANSACTION_STATUS_IN_PROGRESS").length===0){clearTimeout(this.refetchTimeout);return}this.refetchTimeout=setTimeout(async()=>{const i=r.AccountController.state.address;await r.TransactionsController.fetchTransactions(i,"coinbase"),this.refetchLoadingTransactions()},3e3)}templateLoading(){return Array(E).fill(r.x` <wui-transaction-list-item-loader></wui-transaction-list-item-loader> `).map(e=>e)}};exports.W3mOnRampActivityView.styles=B;C([a.r()],exports.W3mOnRampActivityView.prototype,"selectedOnRampProvider",void 0);C([a.r()],exports.W3mOnRampActivityView.prototype,"loading",void 0);C([a.r()],exports.W3mOnRampActivityView.prototype,"coinbaseTransactions",void 0);C([a.r()],exports.W3mOnRampActivityView.prototype,"tokenImages",void 0);exports.W3mOnRampActivityView=C([a.customElement("w3m-onramp-activity-view")],exports.W3mOnRampActivityView);const U=r.i`
  :host > wui-grid {
    max-height: 360px;
    overflow: auto;
  }

  wui-flex {
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
  }

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

  wui-flex.disabled {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }
`;var O=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mOnrampFiatSelectView=class extends r.i$1{constructor(){super(),this.unsubscribe=[],this.selectedCurrency=u.state.paymentCurrency,this.currencies=u.state.paymentCurrencies,this.currencyImages=r.AssetController.state.currencyImages,this.checked=T.OptionsStateController.state.isLegalCheckboxChecked,this.unsubscribe.push(u.subscribe(e=>{this.selectedCurrency=e.paymentCurrency,this.currencies=e.paymentCurrencies}),r.AssetController.subscribeKey("currencyImages",e=>this.currencyImages=e),T.OptionsStateController.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){var l;const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.OptionsController.state,n=(l=r.OptionsController.state.features)==null?void 0:l.legalCheckbox,c=!!(e||t)&&!!n&&!this.checked;return r.x`
      <w3m-legal-checkbox></w3m-legal-checkbox>
      <wui-flex
        flexDirection="column"
        .padding=${["0","s","s","s"]}
        gap="xs"
        class=${a.o(c?"disabled":void 0)}
      >
        ${this.currenciesTemplate(c)}
      </wui-flex>
      <w3m-legal-footer></w3m-legal-footer>
    `}currenciesTemplate(e=!1){return this.currencies.map(t=>{var n;return r.x`
        <wui-list-item
          imageSrc=${a.o((n=this.currencyImages)==null?void 0:n[t.id])}
          @click=${()=>this.selectCurrency(t)}
          variant="image"
          tabIdx=${a.o(e?-1:void 0)}
        >
          <wui-text variant="paragraph-500" color="fg-100">${t.id}</wui-text>
        </wui-list-item>
      `})}selectCurrency(e){e&&(u.setPaymentCurrency(e),r.ModalController.close())}};exports.W3mOnrampFiatSelectView.styles=U;O([a.r()],exports.W3mOnrampFiatSelectView.prototype,"selectedCurrency",void 0);O([a.r()],exports.W3mOnrampFiatSelectView.prototype,"currencies",void 0);O([a.r()],exports.W3mOnrampFiatSelectView.prototype,"currencyImages",void 0);O([a.r()],exports.W3mOnrampFiatSelectView.prototype,"checked",void 0);exports.W3mOnrampFiatSelectView=O([a.customElement("w3m-onramp-fiat-select-view")],exports.W3mOnrampFiatSelectView);const V=r.i`
  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 y=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};let w=class extends r.i$1{constructor(){super(...arguments),this.disabled=!1,this.color="inherit",this.label="",this.feeRange="",this.loading=!1,this.onClick=null}render(){return r.x`
      <button ?disabled=${this.disabled} @click=${this.onClick} ontouchstart>
        <wui-visual name=${a.o(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?r.x`<wui-loading-spinner color="fg-200" size="md"></wui-loading-spinner>`:r.x`<wui-icon name="chevronRight" color="fg-200" size="sm"></wui-icon>`}
      </button>
    `}networksTemplate(){var n;const e=r.ChainController.getAllRequestedCaipNetworks(),t=(n=e==null?void 0:e.filter(s=>{var i;return(i=s==null?void 0:s.assets)==null?void 0:i.imageId}))==null?void 0:n.slice(0,5);return r.x`
      <wui-flex class="networks">
        ${t==null?void 0:t.map(s=>r.x`
            <wui-flex class="network-icon">
              <wui-image src=${a.o(r.AssetUtil.getNetworkImage(s))}></wui-image>
            </wui-flex>
          `)}
      </wui-flex>
    `}};w.styles=[V];y([a.n({type:Boolean})],w.prototype,"disabled",void 0);y([a.n()],w.prototype,"color",void 0);y([a.n()],w.prototype,"name",void 0);y([a.n()],w.prototype,"label",void 0);y([a.n()],w.prototype,"feeRange",void 0);y([a.n({type:Boolean})],w.prototype,"loading",void 0);y([a.n()],w.prototype,"onClick",void 0);w=y([a.customElement("w3m-onramp-provider-item")],w);const D=r.i`
  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 N=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};let P=class extends r.i$1{render(){const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.OptionsController.state;return!e&&!t?null:r.x`
      <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>
    `}howDoesItWorkTemplate(){return r.x` <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(){var t;const e=r.ChainController.state.activeChain;r.EventsController.sendEvent({type:"track",event:"SELECT_WHAT_IS_A_BUY",properties:{isSmartAccount:((t=r.AccountController.state.preferredAccountTypes)==null?void 0:t[e])===r.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT}}),r.RouterController.push("WhatIsABuy")}};P.styles=[D];P=N([a.customElement("w3m-onramp-providers-footer")],P);var _=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mOnRampProvidersView=class extends r.i$1{constructor(){super(),this.unsubscribe=[],this.providers=u.state.providers,this.unsubscribe.push(u.subscribeKey("providers",e=>{this.providers=e}))}firstUpdated(){const e=this.providers.map(async t=>t.name==="coinbase"?await this.getCoinbaseOnRampURL():Promise.resolve(t==null?void 0:t.url));Promise.all(e).then(t=>{this.providers=this.providers.map((n,s)=>({...n,url:t[s]||""}))})}render(){return r.x`
      <wui-flex flexDirection="column" .padding=${["0","s","s","s"]} gap="xs">
        ${this.onRampProvidersTemplate()}
      </wui-flex>
      <w3m-onramp-providers-footer></w3m-onramp-providers-footer>
    `}onRampProvidersTemplate(){return this.providers.filter(e=>e.supportedChains.includes(r.ChainController.state.activeChain??"eip155")).map(e=>r.x`
          <w3m-onramp-provider-item
            label=${e.label}
            name=${e.name}
            feeRange=${e.feeRange}
            @click=${()=>{this.onClickProvider(e)}}
            ?disabled=${!e.url}
          ></w3m-onramp-provider-item>
        `)}onClickProvider(e){var n;const t=r.ChainController.state.activeChain;u.setSelectedProvider(e),r.RouterController.push("BuyInProgress"),r.CoreHelperUtil.openHref(e.url,"popupWindow","width=600,height=800,scrollbars=yes"),r.EventsController.sendEvent({type:"track",event:"SELECT_BUY_PROVIDER",properties:{provider:e.name,isSmartAccount:((n=r.AccountController.state.preferredAccountTypes)==null?void 0:n[t])===r.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT}})}async getCoinbaseOnRampURL(){const e=r.AccountController.state.address,t=r.ChainController.state.activeCaipNetwork;if(!e)throw new Error("No address found");if(!(t!=null&&t.name))throw new Error("No network found");const n=r.ConstantsUtil.WC_COINBASE_PAY_SDK_CHAIN_NAME_MAP[t.name]??r.ConstantsUtil.WC_COINBASE_PAY_SDK_FALLBACK_CHAIN,s=u.state.purchaseCurrency,i=s?[s.symbol]:u.state.purchaseCurrencies.map(c=>c.symbol);return await r.BlockchainApiController.generateOnRampURL({defaultNetwork:n,destinationWallets:[{address:e,blockchains:r.ConstantsUtil.WC_COINBASE_PAY_SDK_CHAINS,assets:i}],partnerUserId:e,purchaseAmount:u.state.purchaseAmount})}};_([a.r()],exports.W3mOnRampProvidersView.prototype,"providers",void 0);exports.W3mOnRampProvidersView=_([a.customElement("w3m-onramp-providers-view")],exports.W3mOnRampProvidersView);const j=r.i`
  :host > wui-grid {
    max-height: 360px;
    overflow: auto;
  }

  wui-flex {
    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);
    will-change: opacity;
  }

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

  wui-flex.disabled {
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
  }
`;var A=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mOnrampTokensView=class extends r.i$1{constructor(){super(),this.unsubscribe=[],this.selectedCurrency=u.state.purchaseCurrencies,this.tokens=u.state.purchaseCurrencies,this.tokenImages=r.AssetController.state.tokenImages,this.checked=T.OptionsStateController.state.isLegalCheckboxChecked,this.unsubscribe.push(u.subscribe(e=>{this.selectedCurrency=e.purchaseCurrencies,this.tokens=e.purchaseCurrencies}),r.AssetController.subscribeKey("tokenImages",e=>this.tokenImages=e),T.OptionsStateController.subscribeKey("isLegalCheckboxChecked",e=>{this.checked=e}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){var l;const{termsConditionsUrl:e,privacyPolicyUrl:t}=r.OptionsController.state,n=(l=r.OptionsController.state.features)==null?void 0:l.legalCheckbox,c=!!(e||t)&&!!n&&!this.checked;return r.x`
      <w3m-legal-checkbox></w3m-legal-checkbox>
      <wui-flex
        flexDirection="column"
        .padding=${["0","s","s","s"]}
        gap="xs"
        class=${a.o(c?"disabled":void 0)}
      >
        ${this.currenciesTemplate(c)}
      </wui-flex>
      <w3m-legal-footer></w3m-legal-footer>
    `}currenciesTemplate(e=!1){return this.tokens.map(t=>{var n;return r.x`
        <wui-list-item
          imageSrc=${a.o((n=this.tokenImages)==null?void 0:n[t.symbol])}
          @click=${()=>this.selectToken(t)}
          variant="image"
          tabIdx=${a.o(e?-1:void 0)}
        >
          <wui-flex gap="3xs" alignItems="center">
            <wui-text variant="paragraph-500" color="fg-100">${t.name}</wui-text>
            <wui-text variant="small-400" color="fg-200">${t.symbol}</wui-text>
          </wui-flex>
        </wui-list-item>
      `})}selectToken(e){e&&(u.setPurchaseCurrency(e),r.ModalController.close())}};exports.W3mOnrampTokensView.styles=j;A([a.r()],exports.W3mOnrampTokensView.prototype,"selectedCurrency",void 0);A([a.r()],exports.W3mOnrampTokensView.prototype,"tokens",void 0);A([a.r()],exports.W3mOnrampTokensView.prototype,"tokenImages",void 0);A([a.r()],exports.W3mOnrampTokensView.prototype,"checked",void 0);exports.W3mOnrampTokensView=A([a.customElement("w3m-onramp-token-select-view")],exports.W3mOnrampTokensView);const L=r.i`
  @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 {
    width: var(--wui-wallet-image-size-lg);
    height: var(--wui-wallet-image-size-lg);
    border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
    position: relative;
    overflow: hidden;
  }

  wui-visual::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
  }

  wui-icon-box {
    position: absolute;
    right: calc(var(--wui-spacing-3xs) * -1);
    bottom: calc(var(--wui-spacing-3xs) * -1);
    opacity: 0;
    transform: scale(0.5);
    transition:
      opacity var(--wui-ease-out-power-2) var(--wui-duration-lg),
      transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
    will-change: opacity, transform;
  }

  wui-text[align='center'] {
    width: 100%;
    padding: 0px var(--wui-spacing-l);
  }

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

  [data-error='true'] > wui-flex:first-child {
    animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  }

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

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

  wui-link {
    padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs);
  }
`;var h=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mBuyInProgressView=class extends r.i$1{constructor(){super(),this.unsubscribe=[],this.selectedOnRampProvider=u.state.selectedProvider,this.uri=r.ConnectionController.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(u.subscribeKey("selectedProvider",e=>{this.selectedOnRampProvider=e})),this.watchTransactions()}disconnectedCallback(){this.intervalId&&clearInterval(this.intervalId)}render(){var n,s;let e="Continue in external window";this.error?e="Buy failed":this.selectedOnRampProvider&&(e=`Buy in ${(n=this.selectedOnRampProvider)==null?void 0:n.label}`);const 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 r.x`
      <wui-flex
        data-error=${a.o(this.error)}
        data-retry=${this.showRetry}
        flexDirection="column"
        alignItems="center"
        .padding=${["3xl","xl","xl","xl"]}
        gap="xl"
      >
        <wui-flex justifyContent="center" alignItems="center">
          <wui-visual
            name=${a.o((s=this.selectedOnRampProvider)==null?void 0:s.name)}
            size="lg"
            class="provider-image"
          >
          </wui-visual>

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

          <wui-icon-box
            backgroundColor="error-100"
            background="opaque"
            iconColor="error-100"
            icon="close"
            size="sm"
            border
            borderColor="wui-color-bg-125"
          ></wui-icon-box>
        </wui-flex>

        <wui-flex flexDirection="column" alignItems="center" gap="xs">
          <wui-text variant="paragraph-500" color=${this.error?"error-100":"fg-100"}>
            ${e}
          </wui-text>
          <wui-text align="center" variant="small-500" color="fg-200">${t}</wui-text>
        </wui-flex>

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

      <wui-flex .padding=${["0","xl","xl","xl"]} justifyContent="center">
        <wui-link @click=${this.onCopyUri} color="fg-200">
          <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
          Copy link
        </wui-link>
      </wui-flex>
    `}watchTransactions(){if(this.selectedOnRampProvider)switch(this.selectedOnRampProvider.name){case"coinbase":this.startTime=Date.now(),this.initializeCoinbaseTransactions();break}}async initializeCoinbaseTransactions(){await this.watchCoinbaseTransactions(),this.intervalId=setInterval(()=>this.watchCoinbaseTransactions(),4e3)}async watchCoinbaseTransactions(){try{const e=r.AccountController.state.address;if(!e)throw new Error("No address found");(await r.BlockchainApiController.fetchTransactions({account:e,onramp:"coinbase"})).data.filter(s=>new Date(s.metadata.minedAt)>new Date(this.startTime)||s.metadata.status==="ONRAMP_TRANSACTION_STATUS_IN_PROGRESS").length?(clearInterval(this.intervalId),r.RouterController.replace("OnRampActivity")):this.startTime&&Date.now()-this.startTime>=18e4&&(clearInterval(this.intervalId),this.error=!0)}catch(e){r.SnackController.showError(e)}}onTryAgain(){this.selectedOnRampProvider&&(this.error=!1,r.CoreHelperUtil.openHref(this.selectedOnRampProvider.url,"popupWindow","width=600,height=800,scrollbars=yes"))}tryAgainTemplate(){var e;return(e=this.selectedOnRampProvider)!=null&&e.url?r.x`<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>`:null}loaderTemplate(){const e=r.ThemeController.state.themeVariables["--w3m-border-radius-master"],t=e?parseInt(e.replace("px",""),10):4;return r.x`<wui-loading-thumbnail radius=${t*9}></wui-loading-thumbnail>`}onCopyUri(){var e;if(!((e=this.selectedOnRampProvider)!=null&&e.url)){r.SnackController.showError("No link found"),r.RouterController.goBack();return}try{r.CoreHelperUtil.copyToClopboard(this.selectedOnRampProvider.url),r.SnackController.showSuccess("Link copied")}catch{r.SnackController.showError("Failed to copy")}}};exports.W3mBuyInProgressView.styles=L;h([a.r()],exports.W3mBuyInProgressView.prototype,"intervalId",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"selectedOnRampProvider",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"uri",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"ready",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"showRetry",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"buffering",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"error",void 0);h([a.r()],exports.W3mBuyInProgressView.prototype,"startTime",void 0);h([a.n({type:Boolean})],exports.W3mBuyInProgressView.prototype,"isMobile",void 0);h([a.n()],exports.W3mBuyInProgressView.prototype,"onRetry",void 0);exports.W3mBuyInProgressView=h([a.customElement("w3m-buy-in-progress-view")],exports.W3mBuyInProgressView);var M=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};exports.W3mWhatIsABuyView=class extends r.i$1{render(){return r.x`
      <wui-flex
        flexDirection="column"
        .padding=${["xxl","3xl","xl","3xl"]}
        alignItems="center"
        gap="xl"
      >
        <wui-visual name="onrampCard"></wui-visual>
        <wui-flex flexDirection="column" gap="xs" alignItems="center">
          <wui-text align="center" variant="paragraph-500" color="fg-100">
            Quickly and easily buy digital assets!
          </wui-text>
          <wui-text align="center" variant="small-400" color="fg-200">
            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=${r.RouterController.goBack}>
          <wui-icon size="sm" color="inherit" name="add" slot="iconLeft"></wui-icon>
          Buy
        </wui-button>
      </wui-flex>
    `}};exports.W3mWhatIsABuyView=M([a.customElement("w3m-what-is-a-buy-view")],exports.W3mWhatIsABuyView);const q=r.i`
  :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 b=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};let f=class extends r.i$1{constructor(){var e;super(),this.unsubscribe=[],this.type="Token",this.value=0,this.currencies=[],this.selectedCurrency=(e=this.currencies)==null?void 0:e[0],this.currencyImages=r.AssetController.state.currencyImages,this.tokenImages=r.AssetController.state.tokenImages,this.unsubscribe.push(u.subscribeKey("purchaseCurrency",t=>{!t||this.type==="Fiat"||(this.selectedCurrency=this.formatPurchaseCurrency(t))}),u.subscribeKey("paymentCurrency",t=>{!t||this.type==="Token"||(this.selectedCurrency=this.formatPaymentCurrency(t))}),u.subscribe(t=>{this.type==="Fiat"?this.currencies=t.purchaseCurrencies.map(this.formatPurchaseCurrency):this.currencies=t.paymentCurrencies.map(this.formatPaymentCurrency)}),r.AssetController.subscribe(t=>{this.currencyImages={...t.currencyImages},this.tokenImages={...t.tokenImages}}))}firstUpdated(){u.getAvailableCurrencies()}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){var n;const e=((n=this.selectedCurrency)==null?void 0:n.symbol)||"",t=this.currencyImages[e]||this.tokenImages[e];return r.x`<wui-input-text type="number" size="lg" value=${this.value}>
      ${this.selectedCurrency?r.x` <wui-flex
            class="currency-container"
            justifyContent="space-between"
            alignItems="center"
            gap="xxs"
            @click=${()=>r.ModalController.open({view:`OnRamp${this.type}Select`})}
          >
            <wui-image src=${a.o(t)}></wui-image>
            <wui-text color="fg-100">${this.selectedCurrency.symbol}</wui-text>
          </wui-flex>`:r.x`<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}}};f.styles=q;b([a.n({type:String})],f.prototype,"type",void 0);b([a.n({type:Number})],f.prototype,"value",void 0);b([a.r()],f.prototype,"currencies",void 0);b([a.r()],f.prototype,"selectedCurrency",void 0);b([a.r()],f.prototype,"currencyImages",void 0);b([a.r()],f.prototype,"tokenImages",void 0);f=b([a.customElement("w3m-onramp-input")],f);const z=r.i`
  :host > wui-flex {
    width: 100%;
    max-width: 360px;
  }

  :host > wui-flex > wui-flex {
    border-radius: var(--wui-border-radius-l);
    width: 100%;
  }

  .amounts-container {
    width: 100%;
  }
`;var g=function(o,e,t,n){var s=arguments.length,i=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,t):n,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,e,t,n);else for(var l=o.length-1;l>=0;l--)(c=o[l])&&(i=(s<3?c(i):s>3?c(e,t,i):c(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};const F={USD:"$",EUR:"€",GBP:"£"},K=[100,250,500,1e3];exports.W3mOnrampWidget=class extends r.i$1{constructor(){super(),this.unsubscribe=[],this.disabled=!1,this.caipAddress=r.ChainController.state.activeCaipAddress,this.loading=r.ModalController.state.loading,this.paymentCurrency=u.state.paymentCurrency,this.paymentAmount=u.state.paymentAmount,this.purchaseAmount=u.state.purchaseAmount,this.quoteLoading=u.state.quotesLoading,this.unsubscribe.push(r.ChainController.subscribeKey("activeCaipAddress",e=>this.caipAddress=e),r.ModalController.subscribeKey("loading",e=>{this.loading=e}),u.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.x`
      <wui-flex flexDirection="column" justifyContent="center" alignItems="center">
        <wui-flex flexDirection="column" alignItems="center" gap="xs">
          <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="xs">
            ${K.map(e=>{var t;return r.x`<wui-button
                  variant=${this.paymentAmount===e?"accent":"neutral"}
                  size="md"
                  textVariant="paragraph-600"
                  fullWidth
                  @click=${()=>this.selectPresetAmount(e)}
                  >${`${F[((t=this.paymentCurrency)==null?void 0:t.id)||"USD"]} ${e}`}</wui-button
                >`})}
          </wui-flex>
          ${this.templateButton()}
        </wui-flex>
      </wui-flex>
    `}templateButton(){return this.caipAddress?r.x`<wui-button
          @click=${this.getQuotes.bind(this)}
          variant="main"
          fullWidth
          size="lg"
          borderRadius="xs"
        >
          Get quotes
        </wui-button>`:r.x`<wui-button
          @click=${this.openModal.bind(this)}
          variant="accent"
          fullWidth
          size="lg"
          borderRadius="xs"
        >
          Connect wallet
        </wui-button>`}getQuotes(){this.loading||r.ModalController.open({view:"OnRampProviders"})}openModal(){r.ModalController.open({view:"Connect"})}async onPaymentAmountChange(e){u.setPaymentAmount(Number(e.detail)),await u.getQuote()}async selectPresetAmount(e){u.setPaymentAmount(e),await u.getQuote()}};exports.W3mOnrampWidget.styles=z;g([a.n({type:Boolean})],exports.W3mOnrampWidget.prototype,"disabled",void 0);g([a.r()],exports.W3mOnrampWidget.prototype,"caipAddress",void 0);g([a.r()],exports.W3mOnrampWidget.prototype,"loading",void 0);g([a.r()],exports.W3mOnrampWidget.prototype,"paymentCurrency",void 0);g([a.r()],exports.W3mOnrampWidget.prototype,"paymentAmount",void 0);g([a.r()],exports.W3mOnrampWidget.prototype,"purchaseAmount",void 0);g([a.r()],exports.W3mOnrampWidget.prototype,"quoteLoading",void 0);exports.W3mOnrampWidget=g([a.customElement("w3m-onramp-widget")],exports.W3mOnrampWidget);
//# sourceMappingURL=onramp-DH9IWLzS.cjs.map