import{j as t,r as e,k as i,l as n,m as s,C as o,R as a,J as r,S as u,o as c,a as l}from"./p-BxEPsDRj.js";import{n as d,c as h,r as p}from"./p-CrMmJdZ6.js";import{o as m}from"./p-zNe_7rLp.js";import"./p-CbOrugAV.js";import"./p-DntCYpai.js";import"./p-QEmqEl1n.js";import"./p-08zq6pz3.js";import"./p-CG_zIdXa.js";import"./p-x-xPR8Lc.js";import"./p-YV_GhS6X.js";import{E as f}from"./p-BHv1WOIk.js";import"./p-DJATscC5.js";import"./p-CGIQ9z_e.js";import"./p-DGY68jkO.js";import"./p-CUUFsMGb.js";import"./p-BId5WtRC.js";import"buffer";import"events";import"ox";import"viem";import"viem/chains";import"./p-WZF-tHaR.js";import"./p-B9-TeWdB.js";var w=t`
  button {
    border: none;
    border-radius: ${({borderRadius:t})=>t["20"]};
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: ${({spacing:t})=>t[1]};
    transition:
      background-color ${({durations:t})=>t["lg"]}
        ${({easings:t})=>t["ease-out-power-2"]},
      box-shadow ${({durations:t})=>t["lg"]}
        ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background-color, box-shadow;
  }

  /* -- Variants --------------------------------------------------------------- */
  button[data-type='accent'] {
    background-color: ${({tokens:t})=>t.core.backgroundAccentPrimary};
    color: ${({tokens:t})=>t.theme.textPrimary};
  }

  button[data-type='neutral'] {
    background-color: ${({tokens:t})=>t.theme.foregroundSecondary};
    color: ${({tokens:t})=>t.theme.textPrimary};
  }

  /* -- Sizes --------------------------------------------------------------- */
  button[data-size='sm'] {
    height: 24px;
  }

  button[data-size='md'] {
    height: 28px;
  }

  button[data-size='lg'] {
    height: 32px;
  }

  button[data-size='sm'] > wui-image,
  button[data-size='sm'] > wui-icon {
    width: 16px;
    height: 16px;
  }

  button[data-size='md'] > wui-image,
  button[data-size='md'] > wui-icon {
    width: 20px;
    height: 20px;
  }

  button[data-size='lg'] > wui-image,
  button[data-size='lg'] > wui-icon {
    width: 24px;
    height: 24px;
  }

  wui-text {
    padding-left: ${({spacing:t})=>t[1]};
    padding-right: ${({spacing:t})=>t[1]};
  }

  wui-image {
    border-radius: ${({borderRadius:t})=>t[3]};
    overflow: hidden;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }

  /* -- States --------------------------------------------------------------- */
  @media (hover: hover) and (pointer: fine) {
    button[data-type='accent']:not(:disabled):hover {
      background-color: ${({tokens:t})=>t.core.foregroundAccent060};
    }

    button[data-type='neutral']:not(:disabled):hover {
      background-color: ${({tokens:t})=>t.theme.foregroundTertiary};
    }
  }

  button[data-type='accent']:not(:disabled):focus-visible,
  button[data-type='accent']:not(:disabled):active {
    box-shadow: 0 0 0 4px ${({tokens:t})=>t.core.foregroundAccent020};
  }

  button[data-type='neutral']:not(:disabled):focus-visible,
  button[data-type='neutral']:not(:disabled):active {
    box-shadow: 0 0 0 4px ${({tokens:t})=>t.core.foregroundAccent020};
  }

  button:disabled {
    opacity: 0.5;
  }
`;var x=undefined&&undefined.__decorate||function(t,e,i,n){var s=arguments.length,o=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,i,n);else for(var r=t.length-1;r>=0;r--)if(a=t[r])o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o;return s>3&&o&&Object.defineProperty(e,i,o),o};const g={sm:"sm-regular",md:"md-regular",lg:"lg-regular"};let b=class t extends n{constructor(){super(...arguments);this.type="accent";this.size="md";this.imageSrc="";this.disabled=false;this.leftIcon=undefined;this.rightIcon=undefined;this.text=""}render(){return s`
      <button ?disabled=${this.disabled} data-type=${this.type} data-size=${this.size}>
        ${this.imageSrc?s`<wui-image src=${this.imageSrc}></wui-image>`:null}
        ${this.leftIcon?s`<wui-icon name=${this.leftIcon} color="inherit" size="inherit"></wui-icon>`:null}
        <wui-text variant=${g[this.size]} color="inherit">${this.text}</wui-text>
        ${this.rightIcon?s`<wui-icon name=${this.rightIcon} color="inherit" size="inherit"></wui-icon>`:null}
      </button>
    `}};b.styles=[e,i,w];x([d()],b.prototype,"type",void 0);x([d()],b.prototype,"size",void 0);x([d()],b.prototype,"imageSrc",void 0);x([d({type:Boolean})],b.prototype,"disabled",void 0);x([d()],b.prototype,"leftIcon",void 0);x([d()],b.prototype,"rightIcon",void 0);x([d()],b.prototype,"text",void 0);b=x([h("wui-chip-button")],b);var $=undefined&&undefined.__decorate||function(t,e,i,n){var s=arguments.length,o=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,i,n);else for(var r=t.length-1;r>=0;r--)if(a=t[r])o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o;return s>3&&o&&Object.defineProperty(e,i,o),o};let v=class t extends n{constructor(){super(...arguments);this.maxDecimals=undefined;this.maxIntegers=undefined}render(){return s`
      <wui-flex alignItems="center" gap="1">
        <wui-input-amount
          widthVariant="fit"
          fontSize="h2"
          .maxDecimals=${m(this.maxDecimals)}
          .maxIntegers=${m(this.maxIntegers)}
          .value=${this.amount?String(this.amount):""}
        ></wui-input-amount>
        <wui-text variant="md-regular" color="secondary">USD</wui-text>
      </wui-flex>
    `}};$([d({type:Number})],v.prototype,"amount",void 0);$([d({type:Number})],v.prototype,"maxDecimals",void 0);$([d({type:Number})],v.prototype,"maxIntegers",void 0);v=$([h("w3m-fund-input")],v);var y=t`
  .amount-input-container {
    border-radius: ${({borderRadius:t})=>t["6"]};
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    background-color: ${({tokens:t})=>t.theme.foregroundPrimary};
    padding: ${({spacing:t})=>t[1]};
  }

  .container {
    border-radius: 30px;
  }
`;var k=undefined&&undefined.__decorate||function(t,e,i,n){var s=arguments.length,o=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,i,n);else for(var r=t.length-1;r>=0;r--)if(a=t[r])o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o;return s>3&&o&&Object.defineProperty(e,i,o),o};const j=[10,50,100];const C=6;const z=10;let D=class t extends n{constructor(){super();this.unsubscribe=[];this.network=o.state.activeCaipNetwork;this.exchanges=f.state.exchanges;this.isLoading=f.state.isLoading;this.amount=f.state.amount;this.tokenAmount=f.state.tokenAmount;this.priceLoading=f.state.priceLoading;this.isPaymentInProgress=f.state.isPaymentInProgress;this.currentPayment=f.state.currentPayment;this.paymentId=f.state.paymentId;this.paymentAsset=f.state.paymentAsset;this.unsubscribe.push(o.subscribeKey("activeCaipNetwork",(t=>{this.network=t;this.setDefaultPaymentAsset()})),f.subscribe((t=>{this.exchanges=t.exchanges;this.isLoading=t.isLoading;this.amount=t.amount;this.tokenAmount=t.tokenAmount;this.priceLoading=t.priceLoading;this.paymentId=t.paymentId;this.isPaymentInProgress=t.isPaymentInProgress;this.currentPayment=t.currentPayment;this.paymentAsset=t.paymentAsset;const e=t.isPaymentInProgress&&t.currentPayment?.exchangeId&&t.currentPayment?.sessionId&&t.paymentId;if(e){this.handlePaymentInProgress()}})))}disconnectedCallback(){this.unsubscribe.forEach((t=>t()));const t=f.state.isPaymentInProgress;if(!t){f.reset()}}async firstUpdated(){await this.getPaymentAssets();if(!this.paymentAsset){await this.setDefaultPaymentAsset()}f.setAmount(j[0]);await f.fetchExchanges()}render(){return s`
      <wui-flex flexDirection="column" class="container">
        ${this.amountInputTemplate()} ${this.exchangesTemplate()}
      </wui-flex>
    `}exchangesLoadingTemplate(){return Array.from({length:2}).map((()=>s`<wui-shimmer width="100%" height="65px" borderRadius="xxs"></wui-shimmer>`))}_exchangesTemplate(){return this.exchanges.length>0?this.exchanges.map((t=>s`<wui-list-item
              @click=${()=>this.onExchangeClick(t)}
              chevron
              variant="image"
              imageSrc=${t.imageUrl}
              ?loading=${this.isLoading}
            >
              <wui-text variant="md-regular" color="primary">
                Deposit from ${t.name}
              </wui-text>
            </wui-list-item>`)):s`<wui-flex flexDirection="column" alignItems="center" gap="4" padding="4">
          <wui-text variant="lg-medium" align="center" color="primary">
            No exchanges support this asset on this network
          </wui-text>
        </wui-flex>`}exchangesTemplate(){return s`<wui-flex
      flexDirection="column"
      gap="2"
      .padding=${["3","3","3","3"]}
      class="exchanges-container"
    >
      ${this.isLoading?this.exchangesLoadingTemplate():this._exchangesTemplate()}
    </wui-flex>`}amountInputTemplate(){return s`
      <wui-flex
        flexDirection="column"
        .padding=${["0","3","3","3"]}
        class="amount-input-container"
      >
        <wui-flex
          justifyContent="space-between"
          alignItems="center"
          .margin=${["0","0","6","0"]}
        >
          <wui-text variant="md-medium" color="secondary">Asset</wui-text>
          <wui-token-button
            data-testid="deposit-from-exchange-asset-button"
            flexDirection="row-reverse"
            text=${this.paymentAsset?.metadata.symbol||""}
            imageSrc=${this.paymentAsset?.metadata.iconUrl||""}
            @click=${()=>a.push("PayWithExchangeSelectAsset")}
            size="lg"
            .chainImageSrc=${m(r.getNetworkImage(this.network))}
          >
          </wui-token-button>
        </wui-flex>
        <wui-flex
          flexDirection="column"
          alignItems="center"
          justifyContent="center"
          .margin=${["0","0","4","0"]}
        >
          <w3m-fund-input
            @inputChange=${this.onAmountChange.bind(this)}
            .amount=${this.amount}
            .maxDecimals=${C}
            .maxIntegers=${z}
          >
          </w3m-fund-input>
          ${this.tokenAmountTemplate()}
        </wui-flex>
        <wui-flex justifyContent="center" gap="2">
          ${j.map((t=>s`<wui-chip-button
                @click=${()=>f.setAmount(t)}
                type="neutral"
                size="lg"
                text=${`$${t}`}
              ></wui-chip-button>`))}
        </wui-flex>
      </wui-flex>
    `}tokenAmountTemplate(){if(this.priceLoading){return s`<wui-shimmer
        width="65px"
        height="20px"
        borderRadius="xxs"
        variant="light"
      ></wui-shimmer>`}return s`
      <wui-text variant="md-regular" color="secondary">
        ${this.tokenAmount.toFixed(4)} ${this.paymentAsset?.metadata.symbol}
      </wui-text>
    `}async onExchangeClick(t){if(!this.amount){u.showError("Please enter an amount");return}await f.handlePayWithExchange(t.id)}handlePaymentInProgress(){const t=o.state.activeChain;const{redirectView:e="Account"}=a.state.data??{};if(this.isPaymentInProgress&&this.currentPayment?.exchangeId&&this.currentPayment?.sessionId&&this.paymentId){f.waitUntilComplete({exchangeId:this.currentPayment.exchangeId,sessionId:this.currentPayment.sessionId,paymentId:this.paymentId}).then((e=>{if(e.status==="SUCCESS"){u.showSuccess("Deposit completed");f.reset();if(t){o.fetchTokenBalance();c.updateBalance(t)}a.replace("Transactions")}else if(e.status==="FAILED"){u.showError("Deposit failed")}}));u.showLoading("Deposit in progress...");a.replace(e)}}onAmountChange({detail:t}){f.setAmount(t?Number(t):null)}async getPaymentAssets(){if(this.network){await f.getAssetsForNetwork(this.network.caipNetworkId)}}async setDefaultPaymentAsset(){if(this.network){const t=await f.getAssetsForNetwork(this.network.caipNetworkId);if(t[0]){f.setPaymentAsset(t[0])}}}};D.styles=y;k([p()],D.prototype,"network",void 0);k([p()],D.prototype,"exchanges",void 0);k([p()],D.prototype,"isLoading",void 0);k([p()],D.prototype,"amount",void 0);k([p()],D.prototype,"tokenAmount",void 0);k([p()],D.prototype,"priceLoading",void 0);k([p()],D.prototype,"isPaymentInProgress",void 0);k([p()],D.prototype,"currentPayment",void 0);k([p()],D.prototype,"paymentId",void 0);k([p()],D.prototype,"paymentAsset",void 0);D=k([h("w3m-deposit-from-exchange-view")],D);var I=t`
  .contentContainer {
    height: 440px;
    overflow: scroll;
    scrollbar-width: none;
  }

  .contentContainer::-webkit-scrollbar {
    display: none;
  }

  wui-icon-box {
    width: 40px;
    height: 40px;
    border-radius: ${({borderRadius:t})=>t["3"]};
  }
`;var R=undefined&&undefined.__decorate||function(t,e,i,n){var s=arguments.length,o=s<3?e:n===null?n=Object.getOwnPropertyDescriptor(e,i):n,a;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")o=Reflect.decorate(t,e,i,n);else for(var r=t.length-1;r>=0;r--)if(a=t[r])o=(s<3?a(o):s>3?a(e,i,o):a(e,i))||o;return s>3&&o&&Object.defineProperty(e,i,o),o};let S=class t extends n{constructor(){super();this.unsubscribe=[];this.assets=f.state.assets;this.search="";this.onDebouncedSearch=l.debounce((t=>{this.search=t}));this.unsubscribe.push(...[f.subscribe((t=>{this.assets=t.assets}))])}disconnectedCallback(){this.unsubscribe.forEach((t=>t()))}render(){return s`
      <wui-flex flexDirection="column">
        ${this.templateSearchInput()} <wui-separator></wui-separator> ${this.templateTokens()}
      </wui-flex>
    `}templateSearchInput(){return s`
      <wui-flex gap="2" padding="3">
        <wui-input-text
          @inputChange=${this.onInputChange.bind(this)}
          class="network-search-input"
          size="sm"
          placeholder="Search token"
          icon="search"
        ></wui-input-text>
      </wui-flex>
    `}templateTokens(){const t=this.assets.filter((t=>t.metadata.name.toLowerCase().includes(this.search.toLowerCase())));const e=t.length>0;return s`
      <wui-flex
        class="contentContainer"
        flexDirection="column"
        .padding=${["0","3","0","3"]}
      >
        <wui-flex justifyContent="flex-start" .padding=${["4","3","3","3"]}>
          <wui-text variant="md-medium" color="secondary">Available tokens</wui-text>
        </wui-flex>
        <wui-flex flexDirection="column" gap="2">
          ${e?t.map((t=>s`<wui-list-item
                    .imageSrc=${t.metadata.iconUrl}
                    ?clickable=${true}
                    @click=${this.handleTokenClick.bind(this,t)}
                  >
                    <wui-text variant="md-medium" color="primary">${t.metadata.name}</wui-text>
                    <wui-text variant="md-regular" color="secondary"
                      >${t.metadata.symbol}</wui-text
                    >
                  </wui-list-item>`)):s`<wui-flex
                .padding=${["20","0","0","0"]}
                alignItems="center"
                flexDirection="column"
                gap="4"
              >
                <wui-icon-box icon="coinPlaceholder" color="default" size="lg"></wui-icon-box>
                <wui-flex
                  class="textContent"
                  gap="2"
                  flexDirection="column"
                  justifyContent="center"
                >
                  <wui-text variant="lg-medium" align="center" color="primary">
                    No tokens found
                  </wui-text>
                </wui-flex>
                <wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>
              </wui-flex>`}
        </wui-flex>
      </wui-flex>
    `}onBuyClick(){a.push("OnRampProviders")}onInputChange(t){this.onDebouncedSearch(t.detail)}handleTokenClick(t){f.setPaymentAsset(t);a.goBack()}};S.styles=I;R([p()],S.prototype,"assets",void 0);R([p()],S.prototype,"search",void 0);S=R([h("w3m-deposit-from-exchange-select-asset-view")],S);export{S as W3mDepositFromExchangeSelectAssetView,D as W3mDepositFromExchangeView};
//# sourceMappingURL=p-D03rf9F3.js.map