import{j as t,l as e,C as i,N as n,m as s,d as o,E as a,R as r,a as l,M as u,t as c,W as d,r as h,k as p}from"./p-BxEPsDRj.js";import{r as w,n as f,c as x}from"./p-CrMmJdZ6.js";import"./p-CG_zIdXa.js";import"./p-DJATscC5.js";import"./p-DujiERu9.js";import{S as g}from"./p-fC-zSJu1.js";import"./p-08zq6pz3.js";import"./p-DJUlqjcR.js";import{M as m}from"./p-wMYIvr92.js";import"./p-CGIQ9z_e.js";import"./p-CbOrugAV.js";import"./p-BId5WtRC.js";import"buffer";import"events";import"ox";import"viem";import"viem/chains";import"./p-WZF-tHaR.js";import"./p-zNe_7rLp.js";import"./p-B9-TeWdB.js";const b={numericInputKeyDown(t,e,i){const n=["Backspace","Meta","Ctrl","a","A","c","C","x","X","v","V","ArrowLeft","ArrowRight","Tab"];const s=t.metaKey||t.ctrlKey;const o=t.key;const a=o.toLocaleLowerCase();const r=a==="a";const l=a==="c";const u=a==="v";const c=a==="x";const d=o===",";const h=o===".";const p=o>="0"&&o<="9";if(!s&&(r||l||u||c)){t.preventDefault()}if(e==="0"&&!d&&!h&&o==="0"){t.preventDefault()}if(e==="0"&&p){i(o);t.preventDefault()}if(d||h){if(!e){i("0.");t.preventDefault()}if(e?.includes(".")||e?.includes(",")){t.preventDefault()}}if(!p&&!n.includes(o)&&!h&&!d){t.preventDefault()}}};var k=t`
  :host {
    width: 100%;
  }

  .details-container > wui-flex {
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
    border-radius: ${({borderRadius:t})=>t["3"]};
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: ${({spacing:t})=>t["3"]};
    border-radius: ${({borderRadius:t})=>t["3"]};
    cursor: pointer;
  }

  .details-content-container {
    padding: ${({spacing:t})=>t["2"]};
    padding-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details-content-container > wui-flex {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: ${({spacing:t})=>t["3"]};
    padding-left: ${({spacing:t})=>t["3"]};
    padding-right: ${({spacing:t})=>t["2"]};
    border-radius: calc(
      ${({borderRadius:t})=>t["1"]} + ${({borderRadius:t})=>t["1"]}
    );
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
  }

  .details-row-title {
    white-space: nowrap;
  }

  .details-row.provider-free-row {
    padding-right: ${({spacing:t})=>t["2"]};
  }
`;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};const v=o.CONVERT_SLIPPAGE_TOLERANCE;let y=class t extends e{constructor(){super();this.unsubscribe=[];this.networkName=i.state.activeCaipNetwork?.name;this.detailsOpen=false;this.sourceToken=g.state.sourceToken;this.toToken=g.state.toToken;this.toTokenAmount=g.state.toTokenAmount;this.sourceTokenPriceInUSD=g.state.sourceTokenPriceInUSD;this.toTokenPriceInUSD=g.state.toTokenPriceInUSD;this.priceImpact=g.state.priceImpact;this.maxSlippage=g.state.maxSlippage;this.networkTokenSymbol=g.state.networkTokenSymbol;this.inputError=g.state.inputError;this.unsubscribe.push(...[g.subscribe((t=>{this.sourceToken=t.sourceToken;this.toToken=t.toToken;this.toTokenAmount=t.toTokenAmount;this.priceImpact=t.priceImpact;this.maxSlippage=t.maxSlippage;this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD;this.toTokenPriceInUSD=t.toTokenPriceInUSD;this.inputError=t.inputError}))])}render(){const t=this.toTokenAmount&&this.maxSlippage?n.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString():null;if(!this.sourceToken||!this.toToken||this.inputError){return null}const e=this.sourceTokenPriceInUSD&&this.toTokenPriceInUSD?1/this.toTokenPriceInUSD*this.sourceTokenPriceInUSD:0;return s`
      <wui-flex flexDirection="column" alignItems="center" gap="01" class="details-container">
        <wui-flex flexDirection="column">
          <button @click=${this.toggleDetails.bind(this)}>
            <wui-flex justifyContent="space-between" .padding=${["0","2","0","2"]}>
              <wui-flex justifyContent="flex-start" flexGrow="1" gap="2">
                <wui-text variant="sm-regular" color="primary">
                  1 ${this.sourceToken.symbol} =
                  ${n.formatNumberToLocalString(e,3)}
                  ${this.toToken.symbol}
                </wui-text>
                <wui-text variant="sm-regular" color="secondary">
                  $${n.formatNumberToLocalString(this.sourceTokenPriceInUSD)}
                </wui-text>
              </wui-flex>
              <wui-icon name="chevronBottom"></wui-icon>
            </wui-flex>
          </button>
          ${this.detailsOpen?s`
                <wui-flex flexDirection="column" gap="2" class="details-content-container">
                  ${this.priceImpact?s` <wui-flex flexDirection="column" gap="2">
                        <wui-flex
                          justifyContent="space-between"
                          alignItems="center"
                          class="details-row"
                        >
                          <wui-flex alignItems="center" gap="2">
                            <wui-text
                              class="details-row-title"
                              variant="sm-regular"
                              color="secondary"
                            >
                              Price impact
                            </wui-text>
                            <w3m-tooltip-trigger
                              text="Price impact reflects the change in market price due to your trade"
                            >
                              <wui-icon size="sm" color="default" name="info"></wui-icon>
                            </w3m-tooltip-trigger>
                          </wui-flex>
                          <wui-flex>
                            <wui-text variant="sm-regular" color="secondary">
                              ${n.formatNumberToLocalString(this.priceImpact,3)}%
                            </wui-text>
                          </wui-flex>
                        </wui-flex>
                      </wui-flex>`:null}
                  ${this.maxSlippage&&this.sourceToken.symbol?s`<wui-flex flexDirection="column" gap="2">
                        <wui-flex
                          justifyContent="space-between"
                          alignItems="center"
                          class="details-row"
                        >
                          <wui-flex alignItems="center" gap="2">
                            <wui-text
                              class="details-row-title"
                              variant="sm-regular"
                              color="secondary"
                            >
                              Max. slippage
                            </wui-text>
                            <w3m-tooltip-trigger
                              text=${`Max slippage sets the minimum amount you must receive for the transaction to proceed. ${t?`Transaction will be reversed if you receive less than ${n.formatNumberToLocalString(t,6)} ${this.toToken.symbol} due to price changes.`:""}`}
                            >
                              <wui-icon size="sm" color="default" name="info"></wui-icon>
                            </w3m-tooltip-trigger>
                          </wui-flex>
                          <wui-flex>
                            <wui-text variant="sm-regular" color="secondary">
                              ${n.formatNumberToLocalString(this.maxSlippage,6)}
                              ${this.toToken.symbol} ${v}%
                            </wui-text>
                          </wui-flex>
                        </wui-flex>
                      </wui-flex>`:null}
                  <wui-flex flexDirection="column" gap="2">
                    <wui-flex
                      justifyContent="space-between"
                      alignItems="center"
                      class="details-row provider-free-row"
                    >
                      <wui-flex alignItems="center" gap="2">
                        <wui-text class="details-row-title" variant="sm-regular" color="secondary">
                          Provider fee
                        </wui-text>
                      </wui-flex>
                      <wui-flex>
                        <wui-text variant="sm-regular" color="secondary">0.85%</wui-text>
                      </wui-flex>
                    </wui-flex>
                  </wui-flex>
                </wui-flex>
              `:null}
        </wui-flex>
      </wui-flex>
    `}toggleDetails(){this.detailsOpen=!this.detailsOpen}};y.styles=[k];$([w()],y.prototype,"networkName",void 0);$([f()],y.prototype,"detailsOpen",void 0);$([w()],y.prototype,"sourceToken",void 0);$([w()],y.prototype,"toToken",void 0);$([w()],y.prototype,"toTokenAmount",void 0);$([w()],y.prototype,"sourceTokenPriceInUSD",void 0);$([w()],y.prototype,"toTokenPriceInUSD",void 0);$([w()],y.prototype,"priceImpact",void 0);$([w()],y.prototype,"maxSlippage",void 0);$([w()],y.prototype,"networkTokenSymbol",void 0);$([w()],y.prototype,"inputError",void 0);y=$([x("w3m-swap-details")],y);var T=t`
  :host {
    width: 100%;
  }

  :host > wui-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: ${({borderRadius:t})=>t["5"]};
    padding: ${({spacing:t})=>t["5"]};
    padding-right: ${({spacing:t})=>t["3"]};
    background-color: ${({tokens:t})=>t.theme.foregroundPrimary};
    box-shadow: inset 0px 0px 0px 1px ${({tokens:t})=>t.theme.foregroundPrimary};
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    position: relative;
  }

  wui-shimmer.market-value {
    opacity: 0;
  }

  :host > wui-flex > svg.input_mask {
    position: absolute;
    inset: 0;
    z-index: 5;
  }

  :host wui-flex .input_mask__border,
  :host wui-flex .input_mask__background {
    transition: fill ${({durations:t})=>t["md"]}
      ${({easings:t})=>t["ease-out-power-1"]};
    will-change: fill;
  }

  :host wui-flex .input_mask__border {
    fill: ${({tokens:t})=>t.core.glass010};
  }

  :host wui-flex .input_mask__background {
    fill: ${({tokens:t})=>t.theme.foregroundPrimary};
  }
`;var S=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 j=class t extends e{constructor(){super(...arguments);this.target="sourceToken"}render(){return s`
      <wui-flex class justifyContent="space-between">
        <wui-flex
          flex="1"
          flexDirection="column"
          alignItems="flex-start"
          justifyContent="center"
          class="swap-input"
          gap="1"
        >
          <wui-shimmer width="80px" height="40px" rounded variant="light"></wui-shimmer>
        </wui-flex>
        ${this.templateTokenSelectButton()}
      </wui-flex>
    `}templateTokenSelectButton(){return s`
      <wui-flex
        class="swap-token-button"
        flexDirection="column"
        alignItems="flex-end"
        justifyContent="center"
        gap="1"
      >
        <wui-shimmer width="80px" height="40px" rounded variant="light"></wui-shimmer>
      </wui-flex>
    `}};j.styles=[T];S([f()],j.prototype,"target",void 0);j=S([x("w3m-swap-input-skeleton")],j);var R=t`
  :host > wui-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: ${({borderRadius:t})=>t["5"]};
    background-color: ${({tokens:t})=>t.theme.foregroundPrimary};
    padding: ${({spacing:t})=>t["5"]};
    padding-right: ${({spacing:t})=>t["3"]};
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    box-shadow: inset 0px 0px 0px 1px ${({tokens:t})=>t.theme.foregroundPrimary};
    position: relative;
    transition: box-shadow ${({easings:t})=>t["ease-out-power-1"]}
      ${({durations:t})=>t["lg"]};
    will-change: background-color;
  }

  :host wui-flex.focus {
    box-shadow: inset 0px 0px 0px 1px ${({tokens:t})=>t.core.glass010};
  }

  :host > wui-flex .swap-input,
  :host > wui-flex .swap-token-button {
    z-index: 10;
  }

  :host > wui-flex .swap-input {
    -webkit-mask-image: linear-gradient(
      270deg,
      transparent 0px,
      transparent 8px,
      black 24px,
      black 25px,
      black 32px,
      black 100%
    );
    mask-image: linear-gradient(
      270deg,
      transparent 0px,
      transparent 8px,
      black 24px,
      black 25px,
      black 32px,
      black 100%
    );
  }

  :host > wui-flex .swap-input input {
    background: none;
    border: none;
    height: 42px;
    width: 100%;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -1.28px;
    outline: none;
    caret-color: ${({tokens:t})=>t.core.textAccentPrimary};
    color: ${({tokens:t})=>t.theme.textPrimary};
    padding: 0px;
  }

  :host > wui-flex .swap-input input:focus-visible {
    outline: none;
  }

  :host > wui-flex .swap-input input::-webkit-outer-spin-button,
  :host > wui-flex .swap-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .max-value-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: ${({tokens:t})=>t.core.glass010};
    padding-left: 0px;
  }

  .market-value {
    min-height: 18px;
  }
`;var I=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 C=5e-5;let D=class t extends e{constructor(){super(...arguments);this.focused=false;this.price=0;this.target="sourceToken";this.onSetAmount=null;this.onSetMaxValue=null}render(){const t=this.marketValue||"0";const e=n.bigNumber(t).gt("0");return s`
      <wui-flex
        class="${this.focused?"focus":""}"
        justifyContent="space-between"
        alignItems="center"
      >
        <wui-flex
          flex="1"
          flexDirection="column"
          alignItems="flex-start"
          justifyContent="center"
          class="swap-input"
        >
          <input
            data-testid="swap-input-${this.target}"
            @focusin=${()=>this.onFocusChange(true)}
            @focusout=${()=>this.onFocusChange(false)}
            ?disabled=${this.disabled}
            value=${this.value||""}
            @input=${this.dispatchInputChangeEvent}
            @keydown=${this.handleKeydown}
            placeholder="0"
            type="text"
            inputmode="decimal"
            pattern="[0-9,.]*"
          />
          <wui-text class="market-value" variant="sm-regular" color="secondary">
            ${e?`$${n.formatNumberToLocalString(this.marketValue,2)}`:null}
          </wui-text>
        </wui-flex>
        ${this.templateTokenSelectButton()}
      </wui-flex>
    `}handleKeydown(t){return b.numericInputKeyDown(t,this.value,(t=>this.onSetAmount?.(this.target,t)))}dispatchInputChangeEvent(t){if(!this.onSetAmount){return}const e=t.target.value.replace(/[^0-9.]/gu,"");if(e===","||e==="."){this.onSetAmount(this.target,"0.")}else if(e.endsWith(",")){this.onSetAmount(this.target,e.replace(",","."))}else{this.onSetAmount(this.target,e)}}setMaxValueToInput(){this.onSetMaxValue?.(this.target,this.balance)}templateTokenSelectButton(){if(!this.token){return s` <wui-button
        data-testid="swap-select-token-button-${this.target}"
        class="swap-token-button"
        size="md"
        variant="neutral-secondary"
        @click=${this.onSelectToken.bind(this)}
      >
        Select token
      </wui-button>`}return s`
      <wui-flex
        class="swap-token-button"
        flexDirection="column"
        alignItems="flex-end"
        justifyContent="center"
        gap="1"
      >
        <wui-token-button
          data-testid="swap-input-token-${this.target}"
          text=${this.token.symbol}
          imageSrc=${this.token.logoUri}
          @click=${this.onSelectToken.bind(this)}
        >
        </wui-token-button>
        <wui-flex alignItems="center" gap="1"> ${this.tokenBalanceTemplate()} </wui-flex>
      </wui-flex>
    `}tokenBalanceTemplate(){const t=n.multiply(this.balance,this.price);const e=t?t?.gt(C):false;return s`
      ${e?s`<wui-text variant="sm-regular" color="secondary">
            ${n.formatNumberToLocalString(this.balance,2)}
          </wui-text>`:null}
      ${this.target==="sourceToken"?this.tokenActionButtonTemplate(e):null}
    `}tokenActionButtonTemplate(t){if(t){return s` <button class="max-value-button" @click=${this.setMaxValueToInput.bind(this)}>
        <wui-text color="accent-primary" variant="sm-medium">Max</wui-text>
      </button>`}return s` <button class="max-value-button" @click=${this.onBuyToken.bind(this)}>
      <wui-text color="accent-primary" variant="sm-medium">Buy</wui-text>
    </button>`}onFocusChange(t){this.focused=t}onSelectToken(){a.sendEvent({type:"track",event:"CLICK_SELECT_TOKEN_TO_SWAP"});r.push("SwapSelectToken",{target:this.target})}onBuyToken(){r.push("OnRampProviders")}};D.styles=[R];I([f()],D.prototype,"focused",void 0);I([f()],D.prototype,"balance",void 0);I([f()],D.prototype,"value",void 0);I([f()],D.prototype,"price",void 0);I([f()],D.prototype,"marketValue",void 0);I([f()],D.prototype,"disabled",void 0);I([f()],D.prototype,"target",void 0);I([f()],D.prototype,"token",void 0);I([f()],D.prototype,"onSetAmount",void 0);I([f()],D.prototype,"onSetMaxValue",void 0);D=I([x("w3m-swap-input")],D);var z=t`
  :host > wui-flex:first-child {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

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

  wui-loading-hexagon {
    position: absolute;
  }

  .action-button {
    width: 100%;
    border-radius: ${({borderRadius:t})=>t["4"]};
  }

  .action-button:disabled {
    border-color: 1px solid ${({tokens:t})=>t.core.glass010};
  }

  .swap-inputs-container {
    position: relative;
  }

  wui-icon-box {
    width: 32px;
    height: 32px;
    border-radius: ${({borderRadius:t})=>t["10"]} !important;
    border: 4px solid ${({tokens:t})=>t.theme.backgroundPrimary};
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }

  .replace-tokens-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: ${({spacing:t})=>t["2"]};
    border-radius: ${({borderRadius:t})=>t["4"]};
    background-color: ${({tokens:t})=>t.theme.backgroundPrimary};
    padding: ${({spacing:t})=>t["2"]};
  }

  .details-container > wui-flex {
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
    border-radius: ${({borderRadius:t})=>t["3"]};
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: ${({spacing:t})=>t["3"]};
    border-radius: ${({borderRadius:t})=>t["3"]};
    transition: background ${({durations:t})=>t["lg"]}
      ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background;
  }

  .details-container > wui-flex > button:hover {
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
  }

  .details-content-container {
    padding: ${({spacing:t})=>t["2"]};
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details-content-container > wui-flex {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: ${({spacing:t})=>t["3"]} ${({spacing:t})=>t["5"]};
    border-radius: ${({borderRadius:t})=>t["3"]};
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
  }
`;var A=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 O=class t extends e{subscribe({resetSwapState:t,initializeSwapState:e}){return()=>{i.subscribeKey("activeCaipNetwork",(i=>this.onCaipNetworkChange({newCaipNetwork:i,resetSwapState:t,initializeSwapState:e})));i.subscribeChainProp("accountState",(i=>{this.onCaipAddressChange({newCaipAddress:i?.caipAddress,resetSwapState:t,initializeSwapState:e})}))}}constructor(){super();this.unsubscribe=[];this.initialParams=r.state.data?.swap;this.detailsOpen=false;this.caipAddress=i.getAccountData()?.caipAddress;this.caipNetworkId=i.state.activeCaipNetwork?.caipNetworkId;this.initialized=g.state.initialized;this.loadingQuote=g.state.loadingQuote;this.loadingPrices=g.state.loadingPrices;this.loadingTransaction=g.state.loadingTransaction;this.sourceToken=g.state.sourceToken;this.sourceTokenAmount=g.state.sourceTokenAmount;this.sourceTokenPriceInUSD=g.state.sourceTokenPriceInUSD;this.toToken=g.state.toToken;this.toTokenAmount=g.state.toTokenAmount;this.toTokenPriceInUSD=g.state.toTokenPriceInUSD;this.inputError=g.state.inputError;this.fetchError=g.state.fetchError;this.lastTokenPriceUpdate=0;this.minTokenPriceUpdateInterval=1e4;this.visibilityChangeHandler=()=>{if(document?.hidden){clearInterval(this.interval);this.interval=undefined}else{this.startTokenPriceInterval()}};this.startTokenPriceInterval=()=>{if(this.interval&&Date.now()-this.lastTokenPriceUpdate<this.minTokenPriceUpdateInterval){return}if(this.lastTokenPriceUpdate&&Date.now()-this.lastTokenPriceUpdate>this.minTokenPriceUpdateInterval){this.fetchTokensAndValues()}clearInterval(this.interval);this.interval=setInterval((()=>{this.fetchTokensAndValues()}),this.minTokenPriceUpdateInterval)};this.watchTokensAndValues=()=>{if(!this.sourceToken||!this.toToken){return}this.subscribeToVisibilityChange();this.startTokenPriceInterval()};this.onDebouncedGetSwapCalldata=l.debounce((async()=>{await g.swapTokens()}),200);this.subscribe({resetSwapState:true,initializeSwapState:false})();this.unsubscribe.push(...[this.subscribe({resetSwapState:false,initializeSwapState:true}),u.subscribeKey("open",(t=>{if(!t){g.resetState()}})),r.subscribeKey("view",(t=>{if(!t.includes("Swap")){g.resetValues()}})),g.subscribe((t=>{this.initialized=t.initialized;this.loadingQuote=t.loadingQuote;this.loadingPrices=t.loadingPrices;this.loadingTransaction=t.loadingTransaction;this.sourceToken=t.sourceToken;this.sourceTokenAmount=t.sourceTokenAmount;this.sourceTokenPriceInUSD=t.sourceTokenPriceInUSD;this.toToken=t.toToken;this.toTokenAmount=t.toTokenAmount;this.toTokenPriceInUSD=t.toTokenPriceInUSD;this.inputError=t.inputError;this.fetchError=t.fetchError;if(t.sourceToken&&t.toToken){this.watchTokensAndValues()}}))])}async firstUpdated(){g.initializeState();this.watchTokensAndValues();await this.handleSwapParameters()}disconnectedCallback(){this.unsubscribe.forEach((t=>t?.()));clearInterval(this.interval);document?.removeEventListener("visibilitychange",this.visibilityChangeHandler)}render(){return s`
      <wui-flex flexDirection="column" .padding=${["0","4","4","4"]} gap="3">
        ${this.initialized?this.templateSwap():this.templateLoading()}
      </wui-flex>
    `}subscribeToVisibilityChange(){document?.removeEventListener("visibilitychange",this.visibilityChangeHandler);document?.addEventListener("visibilitychange",this.visibilityChangeHandler)}fetchTokensAndValues(){g.getNetworkTokenPrice();g.getMyTokensWithBalance();g.swapTokens();this.lastTokenPriceUpdate=Date.now()}templateSwap(){return s`
      <wui-flex flexDirection="column" gap="3">
        <wui-flex flexDirection="column" alignItems="center" gap="2" class="swap-inputs-container">
          ${this.templateTokenInput("sourceToken",this.sourceToken)}
          ${this.templateTokenInput("toToken",this.toToken)} ${this.templateReplaceTokensButton()}
        </wui-flex>
        ${this.templateDetails()} ${this.templateActionButton()}
      </wui-flex>
    `}actionButtonLabel(){const t=!this.sourceTokenAmount||this.sourceTokenAmount==="0";if(this.fetchError){return"Swap"}if(!this.sourceToken||!this.toToken){return"Select token"}if(t){return"Enter amount"}if(this.inputError){return this.inputError}return"Review swap"}templateReplaceTokensButton(){return s`
      <wui-flex class="replace-tokens-button-container">
        <wui-icon-box
          @click=${this.onSwitchTokens.bind(this)}
          icon="recycleHorizontal"
          size="md"
          variant="default"
        ></wui-icon-box>
      </wui-flex>
    `}templateLoading(){return s`
      <wui-flex flexDirection="column" gap="4">
        <wui-flex flexDirection="column" alignItems="center" gap="2" class="swap-inputs-container">
          <w3m-swap-input-skeleton target="sourceToken"></w3m-swap-input-skeleton>
          <w3m-swap-input-skeleton target="toToken"></w3m-swap-input-skeleton>
          ${this.templateReplaceTokensButton()}
        </wui-flex>
        ${this.templateActionButton()}
      </wui-flex>
    `}templateTokenInput(t,e){const i=g.state.myTokensWithBalance?.find((t=>t?.address===e?.address));const o=t==="toToken"?this.toTokenAmount:this.sourceTokenAmount;const a=t==="toToken"?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD;const r=n.parseLocalStringToNumber(o)*a;return s`<w3m-swap-input
      .value=${t==="toToken"?this.toTokenAmount:this.sourceTokenAmount}
      .disabled=${t==="toToken"}
      .onSetAmount=${this.handleChangeAmount.bind(this)}
      target=${t}
      .token=${e}
      .balance=${i?.quantity?.numeric}
      .price=${i?.price}
      .marketValue=${r}
      .onSetMaxValue=${this.onSetMaxValue.bind(this)}
    ></w3m-swap-input>`}onSetMaxValue(t,e){const i=n.bigNumber(e||"0");this.handleChangeAmount(t,i.gt(0)?i.toFixed(20):"0")}templateDetails(){if(!this.sourceToken||!this.toToken||this.inputError){return null}return s`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}handleChangeAmount(t,e){g.clearError();if(t==="sourceToken"){g.setSourceTokenAmount(e)}else{g.setToTokenAmount(e)}this.onDebouncedGetSwapCalldata()}templateActionButton(){const t=!this.toToken||!this.sourceToken;const e=!this.sourceTokenAmount||this.sourceTokenAmount==="0";const i=this.loadingQuote||this.loadingPrices||this.loadingTransaction;const n=i||t||e||this.inputError;return s` <wui-flex gap="2">
      <wui-button
        data-testid="swap-action-button"
        class="action-button"
        fullWidth
        size="lg"
        borderRadius="xs"
        variant="accent-primary"
        ?loading=${Boolean(i)}
        ?disabled=${Boolean(n)}
        @click=${this.onSwapPreview.bind(this)}
      >
        ${this.actionButtonLabel()}
      </wui-button>
    </wui-flex>`}async onSwitchTokens(){await g.switchTokens()}async onSwapPreview(){if(this.fetchError){await g.swapTokens()}a.sendEvent({type:"track",event:"INITIATE_SWAP",properties:{network:this.caipNetworkId||"",swapFromToken:this.sourceToken?.symbol||"",swapToToken:this.toToken?.symbol||"",swapFromAmount:this.sourceTokenAmount||"",swapToAmount:this.toTokenAmount||"",isSmartAccount:c(i.state.activeChain)===d.ACCOUNT_TYPES.SMART_ACCOUNT}});r.push("SwapPreview")}async handleSwapParameters(){if(!this.initialParams){return}if(!g.state.initialized){const t=new Promise((t=>{const e=g.subscribeKey("initialized",(i=>{if(i){e?.();t()}}))}));await t}await this.setSwapParameters(this.initialParams)}async setSwapParameters({amount:t,fromToken:e,toToken:i}){if(!g.state.tokens||!g.state.myTokensWithBalance){const t=new Promise((t=>{const e=g.subscribeKey("myTokensWithBalance",(i=>{if(i&&i.length>0){e?.();t()}}));setTimeout((()=>{e?.();t()}),5e3)}));await t}const n=[...g.state.tokens||[],...g.state.myTokensWithBalance||[]];if(e){const t=n.find((t=>t.symbol.toLowerCase()===e.toLowerCase()));if(t){g.setSourceToken(t)}}if(i){const t=n.find((t=>t.symbol.toLowerCase()===i.toLowerCase()));if(t){g.setToToken(t)}}if(t&&!isNaN(Number(t))){g.setSourceTokenAmount(t)}}onCaipAddressChange({newCaipAddress:t,resetSwapState:e,initializeSwapState:i}){if(this.caipAddress!==t){this.caipAddress=t;if(e){g.resetState()}if(i){g.initializeState()}}}onCaipNetworkChange({newCaipNetwork:t,resetSwapState:e,initializeSwapState:i}){if(this.caipNetworkId!==t?.caipNetworkId){this.caipNetworkId=t?.caipNetworkId;if(e){g.resetState()}if(i){g.initializeState()}}}};O.styles=z;A([f({type:Object})],O.prototype,"initialParams",void 0);A([w()],O.prototype,"interval",void 0);A([w()],O.prototype,"detailsOpen",void 0);A([w()],O.prototype,"caipAddress",void 0);A([w()],O.prototype,"caipNetworkId",void 0);A([w()],O.prototype,"initialized",void 0);A([w()],O.prototype,"loadingQuote",void 0);A([w()],O.prototype,"loadingPrices",void 0);A([w()],O.prototype,"loadingTransaction",void 0);A([w()],O.prototype,"sourceToken",void 0);A([w()],O.prototype,"sourceTokenAmount",void 0);A([w()],O.prototype,"sourceTokenPriceInUSD",void 0);A([w()],O.prototype,"toToken",void 0);A([w()],O.prototype,"toTokenAmount",void 0);A([w()],O.prototype,"toTokenPriceInUSD",void 0);A([w()],O.prototype,"inputError",void 0);A([w()],O.prototype,"fetchError",void 0);A([w()],O.prototype,"lastTokenPriceUpdate",void 0);O=A([x("w3m-swap-view")],O);var P=t`
  :host > wui-flex:first-child {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

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

  .preview-container,
  .details-container {
    width: 100%;
  }

  .token-image {
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px ${({tokens:t})=>t.core.glass010};
    border-radius: 12px;
  }

  wui-loading-hexagon {
    position: absolute;
  }

  .token-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: ${({spacing:t})=>t["2"]};
    padding: ${({spacing:t})=>t["2"]};
    height: 40px;
    border: none;
    border-radius: 80px;
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
    box-shadow: inset 0 0 0 1px ${({tokens:t})=>t.theme.foregroundPrimary};
    cursor: pointer;
    transition: background ${({durations:t})=>t["lg"]}
      ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background;
  }

  .token-item:hover {
    background: ${({tokens:t})=>t.core.glass010};
  }

  .preview-token-details-container {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: ${({spacing:t})=>t["3"]} ${({spacing:t})=>t["5"]};
    border-radius: ${({borderRadius:t})=>t["3"]};
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
  }

  .action-buttons-container {
    width: 100%;
    gap: ${({spacing:t})=>t["2"]};
  }

  .action-buttons-container > button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    height: 48px;
    border-radius: ${({borderRadius:t})=>t["4"]};
    border: none;
    box-shadow: inset 0 0 0 1px ${({tokens:t})=>t.core.glass010};
  }

  .action-buttons-container > button:disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }

  .action-button > wui-loading-spinner {
    display: inline-block;
  }

  .cancel-button:hover,
  .action-button:hover {
    cursor: pointer;
  }

  .action-buttons-container > wui-button.cancel-button {
    flex: 2;
  }

  .action-buttons-container > wui-button.action-button {
    flex: 4;
  }

  .action-buttons-container > button.action-button > wui-text {
    color: white;
  }

  .details-container > wui-flex {
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
    border-radius: ${({borderRadius:t})=>t["3"]};
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: ${({spacing:t})=>t["3"]};
    border-radius: ${({borderRadius:t})=>t["3"]};
    transition: background ${({durations:t})=>t["lg"]}
      ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background;
  }

  .details-container > wui-flex > button:hover {
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
  }

  .details-content-container {
    padding: ${({spacing:t})=>t["2"]};
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .details-content-container > wui-flex {
    width: 100%;
  }

  .details-row {
    width: 100%;
    padding: ${({spacing:t})=>t["3"]} ${({spacing:t})=>t["5"]};
    border-radius: ${({borderRadius:t})=>t["3"]};
    background: ${({tokens:t})=>t.theme.foregroundPrimary};
  }
`;var B=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 _=class t extends e{constructor(){super();this.unsubscribe=[];this.detailsOpen=true;this.approvalTransaction=g.state.approvalTransaction;this.swapTransaction=g.state.swapTransaction;this.sourceToken=g.state.sourceToken;this.sourceTokenAmount=g.state.sourceTokenAmount??"";this.sourceTokenPriceInUSD=g.state.sourceTokenPriceInUSD;this.balanceSymbol=i.getAccountData()?.balanceSymbol;this.toToken=g.state.toToken;this.toTokenAmount=g.state.toTokenAmount??"";this.toTokenPriceInUSD=g.state.toTokenPriceInUSD;this.caipNetwork=i.state.activeCaipNetwork;this.inputError=g.state.inputError;this.loadingQuote=g.state.loadingQuote;this.loadingApprovalTransaction=g.state.loadingApprovalTransaction;this.loadingBuildTransaction=g.state.loadingBuildTransaction;this.loadingTransaction=g.state.loadingTransaction;this.unsubscribe.push(...[i.subscribeChainProp("accountState",(t=>{if(t?.balanceSymbol!==this.balanceSymbol){r.goBack()}})),i.subscribeKey("activeCaipNetwork",(t=>{if(this.caipNetwork!==t){this.caipNetwork=t}})),g.subscribe((t=>{this.approvalTransaction=t.approvalTransaction;this.swapTransaction=t.swapTransaction;this.sourceToken=t.sourceToken;this.toToken=t.toToken;this.toTokenPriceInUSD=t.toTokenPriceInUSD;this.sourceTokenAmount=t.sourceTokenAmount??"";this.toTokenAmount=t.toTokenAmount??"";this.inputError=t.inputError;if(t.inputError){r.goBack()}this.loadingQuote=t.loadingQuote;this.loadingApprovalTransaction=t.loadingApprovalTransaction;this.loadingBuildTransaction=t.loadingBuildTransaction;this.loadingTransaction=t.loadingTransaction}))])}firstUpdated(){g.getTransaction();this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach((t=>t?.()));clearInterval(this.interval)}render(){return s`
      <wui-flex flexDirection="column" .padding=${["0","4","4","4"]} gap="3">
        ${this.templateSwap()}
      </wui-flex>
    `}refreshTransaction(){this.interval=setInterval((()=>{if(!g.getApprovalLoadingState()){g.getTransaction()}}),1e4)}templateSwap(){const t=`${n.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${this.sourceToken?.symbol}`;const e=`${n.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${this.toToken?.symbol}`;const i=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD;const o=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD;const a=n.formatNumberToLocalString(i);const r=n.formatNumberToLocalString(o);const l=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return s`
      <wui-flex flexDirection="column" alignItems="center" gap="4">
        <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="4">
          <wui-flex
            class="preview-token-details-container"
            alignItems="center"
            justifyContent="space-between"
            gap="4"
          >
            <wui-flex flexDirection="column" alignItems="flex-start" gap="01">
              <wui-text variant="sm-regular" color="secondary">Send</wui-text>
              <wui-text variant="md-regular" color="primary">$${a}</wui-text>
            </wui-flex>
            <wui-token-button
              flexDirection="row-reverse"
              text=${t}
              imageSrc=${this.sourceToken?.logoUri}
            >
            </wui-token-button>
          </wui-flex>
          <wui-icon name="recycleHorizontal" color="default" size="md"></wui-icon>
          <wui-flex
            class="preview-token-details-container"
            alignItems="center"
            justifyContent="space-between"
            gap="4"
          >
            <wui-flex flexDirection="column" alignItems="flex-start" gap="01">
              <wui-text variant="sm-regular" color="secondary">Receive</wui-text>
              <wui-text variant="md-regular" color="primary">$${r}</wui-text>
            </wui-flex>
            <wui-token-button
              flexDirection="row-reverse"
              text=${e}
              imageSrc=${this.toToken?.logoUri}
            >
            </wui-token-button>
          </wui-flex>
        </wui-flex>

        ${this.templateDetails()}

        <wui-flex flexDirection="row" alignItems="center" justifyContent="center" gap="2">
          <wui-icon size="sm" color="default" name="info"></wui-icon>
          <wui-text variant="sm-regular" color="secondary">Review transaction carefully</wui-text>
        </wui-flex>

        <wui-flex
          class="action-buttons-container"
          flexDirection="row"
          alignItems="center"
          justifyContent="space-between"
          gap="2"
        >
          <wui-button
            class="cancel-button"
            fullWidth
            size="lg"
            borderRadius="xs"
            variant="neutral-secondary"
            @click=${this.onCancelTransaction.bind(this)}
          >
            <wui-text variant="md-medium" color="secondary">Cancel</wui-text>
          </wui-button>
          <wui-button
            class="action-button"
            fullWidth
            size="lg"
            borderRadius="xs"
            variant="accent-primary"
            ?loading=${l}
            ?disabled=${l}
            @click=${this.onSendTransaction.bind(this)}
          >
            <wui-text variant="md-medium" color="invert"> ${this.actionButtonLabel()} </wui-text>
          </wui-button>
        </wui-flex>
      </wui-flex>
    `}templateDetails(){if(!this.sourceToken||!this.toToken||this.inputError){return null}return s`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`}actionButtonLabel(){if(this.loadingApprovalTransaction){return"Approving..."}if(this.approvalTransaction){return"Approve"}return"Swap"}onCancelTransaction(){r.goBack()}onSendTransaction(){if(this.approvalTransaction){g.sendTransactionForApproval(this.approvalTransaction)}else{g.sendTransactionForSwap(this.swapTransaction)}}};_.styles=P;B([w()],_.prototype,"interval",void 0);B([w()],_.prototype,"detailsOpen",void 0);B([w()],_.prototype,"approvalTransaction",void 0);B([w()],_.prototype,"swapTransaction",void 0);B([w()],_.prototype,"sourceToken",void 0);B([w()],_.prototype,"sourceTokenAmount",void 0);B([w()],_.prototype,"sourceTokenPriceInUSD",void 0);B([w()],_.prototype,"balanceSymbol",void 0);B([w()],_.prototype,"toToken",void 0);B([w()],_.prototype,"toTokenAmount",void 0);B([w()],_.prototype,"toTokenPriceInUSD",void 0);B([w()],_.prototype,"caipNetwork",void 0);B([w()],_.prototype,"inputError",void 0);B([w()],_.prototype,"loadingQuote",void 0);B([w()],_.prototype,"loadingApprovalTransaction",void 0);B([w()],_.prototype,"loadingBuildTransaction",void 0);B([w()],_.prototype,"loadingTransaction",void 0);_=B([x("w3m-swap-preview-view")],_);var E=t`
  :host {
    width: 100%;
    height: 60px;
    min-height: 60px;
  }

  :host > wui-flex {
    cursor: pointer;
    height: 100%;
    display: flex;
    column-gap: ${({spacing:t})=>t["3"]};
    padding: ${({spacing:t})=>t["2"]};
    padding-right: ${({spacing:t})=>t["4"]};
    width: 100%;
    background-color: transparent;
    border-radius: ${({borderRadius:t})=>t["4"]};
    color: ${({tokens:t})=>t.theme.foregroundSecondary};
    transition:
      background-color ${({durations:t})=>t["lg"]}
        ${({easings:t})=>t["ease-out-power-2"]},
      opacity ${({durations:t})=>t["lg"]} ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background-color, opacity;
  }

  @media (hover: hover) and (pointer: fine) {
    :host > wui-flex:hover {
      background-color: ${({tokens:t})=>t.theme.foregroundPrimary};
    }

    :host > wui-flex:active {
      background-color: ${({tokens:t})=>t.core.glass010};
    }
  }

  :host([disabled]) > wui-flex {
    opacity: 0.6;
  }

  :host([disabled]) > wui-flex:hover {
    background-color: transparent;
  }

  :host > wui-flex > wui-flex {
    flex: 1;
  }

  :host > wui-flex > wui-image,
  :host > wui-flex > .token-item-image-placeholder {
    width: 40px;
    max-width: 40px;
    height: 40px;
    border-radius: ${({borderRadius:t})=>t["20"]};
    position: relative;
  }

  :host > wui-flex > .token-item-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :host > wui-flex > wui-image::after,
  :host > wui-flex > .token-item-image-placeholder::after {
    position: absolute;
    content: '';
    inset: 0;
    box-shadow: inset 0 0 0 1px ${({tokens:t})=>t.core.glass010};
    border-radius: ${({borderRadius:t})=>t["8"]};
  }

  button > wui-icon-box[data-variant='square-blue'] {
    border-radius: ${({borderRadius:t})=>t["2"]};
    position: relative;
    border: none;
    width: 36px;
    height: 36px;
  }
`;var N=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 M=class t extends e{constructor(){super();this.observer=new IntersectionObserver((()=>undefined));this.imageSrc=undefined;this.name=undefined;this.symbol=undefined;this.price=undefined;this.amount=undefined;this.visible=false;this.imageError=false;this.observer=new IntersectionObserver((t=>{t.forEach((t=>{if(t.isIntersecting){this.visible=true}else{this.visible=false}}))}),{threshold:.1})}firstUpdated(){this.observer.observe(this)}disconnectedCallback(){this.observer.disconnect()}render(){if(!this.visible){return null}const t=this.amount&&this.price?n.multiply(this.price,this.amount)?.toFixed(3):null;return s`
      <wui-flex alignItems="center">
        ${this.visualTemplate()}
        <wui-flex flexDirection="column" gap="1">
          <wui-flex justifyContent="space-between">
            <wui-text variant="md-medium" color="primary" lineClamp="1">${this.name}</wui-text>
            ${t?s`
                  <wui-text variant="md-medium" color="primary">
                    $${n.formatNumberToLocalString(t,3)}
                  </wui-text>
                `:null}
          </wui-flex>
          <wui-flex justifyContent="space-between">
            <wui-text variant="sm-regular" color="secondary" lineClamp="1">${this.symbol}</wui-text>
            ${this.amount?s`<wui-text variant="sm-regular" color="secondary">
                  ${n.formatNumberToLocalString(this.amount,5)}
                </wui-text>`:null}
          </wui-flex>
        </wui-flex>
      </wui-flex>
    `}visualTemplate(){if(this.imageError){return s`<wui-flex class="token-item-image-placeholder">
        <wui-icon name="image" color="inherit"></wui-icon>
      </wui-flex>`}if(this.imageSrc){return s`<wui-image
        width="40"
        height="40"
        src=${this.imageSrc}
        @onLoadError=${this.imageLoadError}
      ></wui-image>`}return null}imageLoadError(){this.imageError=true}};M.styles=[h,p,E];N([f()],M.prototype,"imageSrc",void 0);N([f()],M.prototype,"name",void 0);N([f()],M.prototype,"symbol",void 0);N([f()],M.prototype,"price",void 0);N([f()],M.prototype,"amount",void 0);N([w()],M.prototype,"visible",void 0);N([w()],M.prototype,"imageError",void 0);M=N([x("wui-token-list-item")],M);var U=t`
  :host {
    width: 100%;
  }

  :host > wui-flex {
    cursor: pointer;
    height: 100%;
    width: 100%;
    display: flex;
    column-gap: ${({spacing:t})=>t["3"]};
    padding: ${({spacing:t})=>t["2"]};
    padding-right: ${({spacing:t})=>t["4"]};
  }

  wui-flex {
    display: flex;
    flex: 1;
  }
`;var W=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 L=class t extends e{render(){return s`
      <wui-flex alignItems="center">
        <wui-shimmer width="40px" height="40px"></wui-shimmer>
        <wui-flex flexDirection="column" gap="1">
          <wui-shimmer width="72px" height="16px" borderRadius="4xs"></wui-shimmer>
          <wui-shimmer width="148px" height="14px" borderRadius="4xs"></wui-shimmer>
        </wui-flex>
        <wui-flex flexDirection="column" gap="1" alignItems="flex-end">
          <wui-shimmer width="24px" height="12px" borderRadius="4xs"></wui-shimmer>
          <wui-shimmer width="32px" height="12px" borderRadius="4xs"></wui-shimmer>
        </wui-flex>
      </wui-flex>
    `}};L.styles=[h,U];L=W([x("wui-token-list-item-loader")],L);var V=t`
  :host {
    --tokens-scroll--top-opacity: 0;
    --tokens-scroll--bottom-opacity: 1;
    --suggested-tokens-scroll--left-opacity: 0;
    --suggested-tokens-scroll--right-opacity: 1;
  }

  :host > wui-flex:first-child {
    overflow-y: hidden;
    overflow-x: hidden;
    scrollbar-width: none;
    scrollbar-height: none;
  }

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

  wui-loading-hexagon {
    position: absolute;
  }

  .suggested-tokens-container {
    overflow-x: auto;
    mask-image: linear-gradient(
      to right,
      rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 0px,
      rgba(200, 200, 200, calc(1 - var(--suggested-tokens-scroll--left-opacity))) 1px,
      black 50px,
      black 90px,
      black calc(100% - 90px),
      black calc(100% - 50px),
      rgba(155, 155, 155, calc(1 - var(--suggested-tokens-scroll--right-opacity))) calc(100% - 1px),
      rgba(0, 0, 0, calc(1 - var(--suggested-tokens-scroll--right-opacity))) 100%
    );
  }

  .suggested-tokens-container::-webkit-scrollbar {
    display: none;
  }

  .tokens-container {
    border-top: 1px solid ${({tokens:t})=>t.core.glass010};
    height: 100%;
    max-height: 390px;
  }

  .tokens {
    width: 100%;
    overflow-y: auto;
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, calc(1 - var(--tokens-scroll--top-opacity))) 0px,
      rgba(200, 200, 200, calc(1 - var(--tokens-scroll--top-opacity))) 1px,
      black 50px,
      black 90px,
      black calc(100% - 90px),
      black calc(100% - 50px),
      rgba(155, 155, 155, calc(1 - var(--tokens-scroll--bottom-opacity))) calc(100% - 1px),
      rgba(0, 0, 0, calc(1 - var(--tokens-scroll--bottom-opacity))) 100%
    );
  }

  .network-search-input,
  .select-network-button {
    height: 40px;
  }

  .select-network-button {
    border: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: ${({spacing:t})=>t["2"]};
    box-shadow: inset 0 0 0 1px ${({tokens:t})=>t.core.glass010};
    background-color: transparent;
    border-radius: ${({borderRadius:t})=>t["3"]};
    padding: ${({spacing:t})=>t["2"]};
    align-items: center;
    transition: background-color ${({durations:t})=>t["lg"]}
      ${({easings:t})=>t["ease-out-power-2"]};
    will-change: background-color;
  }

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

  .select-network-button > wui-image {
    width: 26px;
    height: 26px;
    border-radius: ${({borderRadius:t})=>t["4"]};
    box-shadow: inset 0 0 0 1px ${({tokens:t})=>t.core.glass010};
  }
`;var F=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 J=class t extends e{constructor(){super();this.unsubscribe=[];this.targetToken=r.state.data?.target;this.sourceToken=g.state.sourceToken;this.sourceTokenAmount=g.state.sourceTokenAmount;this.toToken=g.state.toToken;this.myTokensWithBalance=g.state.myTokensWithBalance;this.popularTokens=g.state.popularTokens;this.suggestedTokens=g.state.suggestedTokens;this.tokensLoading=g.state.tokensLoading;this.searchValue="";this.unsubscribe.push(g.subscribe((t=>{this.sourceToken=t.sourceToken;this.toToken=t.toToken;this.myTokensWithBalance=t.myTokensWithBalance;this.popularTokens=t.popularTokens;this.suggestedTokens=t.suggestedTokens;this.tokensLoading=t.tokensLoading})))}async firstUpdated(){await g.getTokenList()}updated(){const t=this.renderRoot?.querySelector(".suggested-tokens-container");t?.addEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));const e=this.renderRoot?.querySelector(".tokens");e?.addEventListener("scroll",this.handleTokenListScroll.bind(this))}disconnectedCallback(){super.disconnectedCallback();const t=this.renderRoot?.querySelector(".suggested-tokens-container");const e=this.renderRoot?.querySelector(".tokens");t?.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this));e?.removeEventListener("scroll",this.handleTokenListScroll.bind(this));clearInterval(this.interval)}render(){return s`
      <wui-flex flexDirection="column" gap="3">
        ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
      </wui-flex>
    `}onSelectToken(t){if(this.targetToken==="sourceToken"){g.setSourceToken(t)}else{g.setToToken(t);if(this.sourceToken&&this.sourceTokenAmount){g.swapTokens()}}r.goBack()}templateSearchInput(){return s`
      <wui-flex .padding=${["1","3","0","3"]} gap="2">
        <wui-input-text
          data-testid="swap-select-token-search-input"
          class="network-search-input"
          size="sm"
          placeholder="Search token"
          icon="search"
          .value=${this.searchValue}
          @inputChange=${this.onSearchInputChange.bind(this)}
        ></wui-input-text>
      </wui-flex>
    `}templateMyTokens(){const t=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[];const e=this.filterTokensWithText(t,this.searchValue);if(e?.length>0){return s`<wui-flex justifyContent="flex-start" padding="2">
          <wui-text variant="md-medium" color="secondary">Your tokens</wui-text>
        </wui-flex>
        ${e.map((t=>{const e=t.symbol===this.sourceToken?.symbol||t.symbol===this.toToken?.symbol;return s`
            <wui-token-list-item
              data-testid="swap-select-token-item-${t.symbol}"
              name=${t.name}
              ?disabled=${e}
              symbol=${t.symbol}
              price=${t?.price}
              amount=${t?.quantity?.numeric}
              imageSrc=${t.logoUri}
              @click=${()=>{if(!e){this.onSelectToken(t)}}}
            >
            </wui-token-list-item>
          `}))}`}return null}templateAllTokens(){const t=this.popularTokens?this.popularTokens:[];const e=this.filterTokensWithText(t,this.searchValue);if(this.tokensLoading){return s`
        <wui-token-list-item-loader></wui-token-list-item-loader>
        <wui-token-list-item-loader></wui-token-list-item-loader>
        <wui-token-list-item-loader></wui-token-list-item-loader>
        <wui-token-list-item-loader></wui-token-list-item-loader>
        <wui-token-list-item-loader></wui-token-list-item-loader>
      `}if(e?.length>0){return s`
        ${e.map((t=>s`
            <wui-token-list-item
              data-testid="swap-select-token-item-${t.symbol}"
              name=${t.name}
              symbol=${t.symbol}
              imageSrc=${t.logoUri}
              @click=${()=>this.onSelectToken(t)}
            >
            </wui-token-list-item>
          `))}
      `}return null}templateTokens(){return s`
      <wui-flex class="tokens-container">
        <wui-flex class="tokens" .padding=${["0","2","2","2"]} flexDirection="column">
          ${this.templateMyTokens()}
          <wui-flex justifyContent="flex-start" padding="3">
            <wui-text variant="md-medium" color="secondary">Tokens</wui-text>
          </wui-flex>
          ${this.templateAllTokens()}
        </wui-flex>
      </wui-flex>
    `}templateSuggestedTokens(){const t=this.suggestedTokens?this.suggestedTokens.slice(0,8):null;if(this.tokensLoading){return s`
        <wui-flex
          class="suggested-tokens-container"
          .padding=${["0","3","0","3"]}
          gap="2"
        >
          <wui-token-button loading></wui-token-button>
          <wui-token-button loading></wui-token-button>
          <wui-token-button loading></wui-token-button>
          <wui-token-button loading></wui-token-button>
          <wui-token-button loading></wui-token-button>
        </wui-flex>
      `}if(!t){return null}return s`
      <wui-flex
        class="suggested-tokens-container"
        .padding=${["0","3","0","3"]}
        gap="2"
      >
        ${t.map((t=>s`
            <wui-token-button
              text=${t.symbol}
              imageSrc=${t.logoUri}
              @click=${()=>this.onSelectToken(t)}
            >
            </wui-token-button>
          `))}
      </wui-flex>
    `}onSearchInputChange(t){this.searchValue=t.detail}handleSuggestedTokensScroll(){const t=this.renderRoot?.querySelector(".suggested-tokens-container");if(!t){return}t.style.setProperty("--suggested-tokens-scroll--left-opacity",m.interpolate([0,100],[0,1],t.scrollLeft).toString());t.style.setProperty("--suggested-tokens-scroll--right-opacity",m.interpolate([0,100],[0,1],t.scrollWidth-t.scrollLeft-t.offsetWidth).toString())}handleTokenListScroll(){const t=this.renderRoot?.querySelector(".tokens");if(!t){return}t.style.setProperty("--tokens-scroll--top-opacity",m.interpolate([0,100],[0,1],t.scrollTop).toString());t.style.setProperty("--tokens-scroll--bottom-opacity",m.interpolate([0,100],[0,1],t.scrollHeight-t.scrollTop-t.offsetHeight).toString())}filterTokensWithText(t,e){return t.filter((t=>`${t.symbol} ${t.name} ${t.address}`.toLowerCase().includes(e.toLowerCase()))).sort(((t,i)=>{const n=`${t.symbol} ${t.name} ${t.address}`.toLowerCase();const s=`${i.symbol} ${i.name} ${i.address}`.toLowerCase();const o=n.indexOf(e.toLowerCase());const a=s.indexOf(e.toLowerCase());return o-a}))}};J.styles=V;F([w()],J.prototype,"interval",void 0);F([w()],J.prototype,"targetToken",void 0);F([w()],J.prototype,"sourceToken",void 0);F([w()],J.prototype,"sourceTokenAmount",void 0);F([w()],J.prototype,"toToken",void 0);F([w()],J.prototype,"myTokensWithBalance",void 0);F([w()],J.prototype,"popularTokens",void 0);F([w()],J.prototype,"suggestedTokens",void 0);F([w()],J.prototype,"tokensLoading",void 0);F([w()],J.prototype,"searchValue",void 0);J=F([x("w3m-swap-select-token-view")],J);export{_ as W3mSwapPreviewView,J as W3mSwapSelectTokenView,O as W3mSwapView};
//# sourceMappingURL=p-QufdwAfr.js.map