"use strict";(self.webpackChunkfrog=self.webpackChunkfrog||[]).push([[5693],{1396:(t,e,i)=>{var o=i(12618),n=i(66955);const a=o.AH`
  :host > wui-flex:first-child {
    height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  :host > wui-flex:first-child::-webkit-scrollbar {
    display: none;
  }
`;var s=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let r=class extends o.WF{render(){return o.qy`
      <wui-flex flexDirection="column" .padding=${["0","m","m","m"]} gap="s">
        <w3m-activity-list page="activity"></w3m-activity-list>
      </wui-flex>
    `}};r.styles=a,r=s([(0,n.customElement)("w3m-transactions-view")],r)},35726:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(6229),s=i(12525),r=i(66955),l=i(41457);const c=o.AH`
  :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: var(--wui-border-radius-xs);
  }

  .action-button:disabled {
    border-color: 1px solid var(--wui-color-gray-glass-005);
  }

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

  .replace-tokens-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    gap: var(--wui-spacing-1xs);
    border-radius: var(--wui-border-radius-xs);
    background-color: var(--wui-color-modal-bg-base);
    padding: var(--wui-spacing-xxs);
  }

  .replace-tokens-button-container > button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    padding: var(--wui-spacing-xs);
    border: none;
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
    transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1);
    will-change: background-color;
    z-index: 20;
  }

  .replace-tokens-button-container > button:hover {
    background: var(--wui-color-gray-glass-005);
  }

  .details-container > wui-flex {
    background: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xxs);
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-xxs);
    transition: background 0.2s linear;
  }

  .details-container > wui-flex > button:hover {
    background: var(--wui-color-gray-glass-002);
  }

  .details-content-container {
    padding: var(--wui-spacing-1xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s) var(--wui-spacing-xl);
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
  }
`;var u=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let d=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!1,this.caipNetworkId=s.WB.state.activeCaipNetwork?.caipNetworkId,this.initialized=s.GN.state.initialized,this.loadingQuote=s.GN.state.loadingQuote,this.loadingPrices=s.GN.state.loadingPrices,this.loadingTransaction=s.GN.state.loadingTransaction,this.sourceToken=s.GN.state.sourceToken,this.sourceTokenAmount=s.GN.state.sourceTokenAmount,this.sourceTokenPriceInUSD=s.GN.state.sourceTokenPriceInUSD,this.toToken=s.GN.state.toToken,this.toTokenAmount=s.GN.state.toTokenAmount,this.toTokenPriceInUSD=s.GN.state.toTokenPriceInUSD,this.inputError=s.GN.state.inputError,this.gasPriceInUSD=s.GN.state.gasPriceInUSD,this.fetchError=s.GN.state.fetchError,this.onDebouncedGetSwapCalldata=s.wE.debounce((async()=>{await s.GN.swapTokens()}),200),s.WB.subscribeKey("activeCaipNetwork",(t=>{this.caipNetworkId!==t?.caipNetworkId&&(this.caipNetworkId=t?.caipNetworkId,s.GN.resetState(),s.GN.initializeState())})),this.unsubscribe.push(s.W3.subscribeKey("open",(t=>{t||s.GN.resetState()})),s.IN.subscribeKey("view",(t=>{t.includes("Swap")||s.GN.resetValues()})),s.GN.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.gasPriceInUSD=t.gasPriceInUSD,this.fetchError=t.fetchError})))}firstUpdated(){s.GN.initializeState(),this.watchTokensAndValues()}disconnectedCallback(){this.unsubscribe.forEach((t=>t?.())),clearInterval(this.interval)}render(){return o.qy`
      <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s">
        ${this.initialized?this.templateSwap():this.templateLoading()}
      </wui-flex>
    `}watchTokensAndValues(){this.interval=setInterval((()=>{s.GN.getNetworkTokenPrice(),s.GN.getMyTokensWithBalance(),s.GN.swapTokens()}),1e4)}templateSwap(){return o.qy`
      <wui-flex flexDirection="column" gap="s">
        <wui-flex flexDirection="column" alignItems="center" gap="xs" 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(){return this.fetchError?"Swap":this.sourceToken&&this.toToken?this.sourceTokenAmount?this.inputError?this.inputError:"Review swap":"Enter amount":"Select token"}templateReplaceTokensButton(){return o.qy`
      <wui-flex class="replace-tokens-button-container">
        <button @click=${this.onSwitchTokens.bind(this)}>
          <wui-icon name="recycleHorizontal" color="fg-250" size="lg"></wui-icon>
        </button>
      </wui-flex>
    `}templateLoading(){return o.qy`
      <wui-flex flexDirection="column" gap="l">
        <wui-flex flexDirection="column" alignItems="center" gap="xs" 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=s.GN.state.myTokensWithBalance?.find((t=>t?.address===e?.address)),n="toToken"===t?this.toTokenAmount:this.sourceTokenAmount,r="toToken"===t?this.toTokenPriceInUSD:this.sourceTokenPriceInUSD,l=a.Se.parseLocalStringToNumber(n)*r;return o.qy`<w3m-swap-input
      .value=${"toToken"===t?this.toTokenAmount:this.sourceTokenAmount}
      .disabled=${"toToken"===t}
      .onSetAmount=${this.handleChangeAmount.bind(this)}
      target=${t}
      .token=${e}
      .balance=${i?.quantity?.numeric}
      .price=${i?.price}
      .marketValue=${l}
      .onSetMaxValue=${this.onSetMaxValue.bind(this)}
    ></w3m-swap-input>`}onSetMaxValue(t,e){const i="sourceToken"===t?this.sourceToken:this.toToken,o=i?.address===s.WB.getActiveNetworkTokenAddress();let n="0";if(!e)return n="0",void this.handleChangeAmount(t,n);if(!this.gasPriceInUSD)return n=e,void this.handleChangeAmount(t,n);const r=a.Se.bigNumber(this.gasPriceInUSD.toFixed(5)).div(this.sourceTokenPriceInUSD),l=o?a.Se.bigNumber(e).minus(r):a.Se.bigNumber(e);this.handleChangeAmount(t,l.gt(0)?l.toFixed(20):"0")}templateDetails(){return this.sourceToken&&this.toToken&&!this.inputError?o.qy`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`:null}handleChangeAmount(t,e){s.GN.clearError(),"sourceToken"===t?s.GN.setSourceTokenAmount(e):s.GN.setToTokenAmount(e),this.onDebouncedGetSwapCalldata()}templateActionButton(){const t=!this.toToken||!this.sourceToken,e=!this.sourceTokenAmount,i=this.loadingQuote||this.loadingPrices||this.loadingTransaction,n=i||t||e||this.inputError;return o.qy` <wui-flex gap="xs">
      <wui-button
        data-testid="swap-action-button"
        class="action-button"
        fullWidth
        size="lg"
        borderRadius="xs"
        variant=${t?"neutral":"main"}
        .loading=${i}
        .disabled=${n}
        @click=${this.onSwapPreview.bind(this)}
      >
        ${this.actionButtonLabel()}
      </wui-button>
    </wui-flex>`}onSwitchTokens(){s.GN.switchTokens()}onSwapPreview(){this.fetchError?s.GN.swapTokens():(s.En.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:s.Uj.state.preferredAccountType===l.Vl.ACCOUNT_TYPES.SMART_ACCOUNT}}),s.IN.push("SwapPreview"))}};d.styles=c,u([(0,n.wk)()],d.prototype,"interval",void 0),u([(0,n.wk)()],d.prototype,"detailsOpen",void 0),u([(0,n.wk)()],d.prototype,"caipNetworkId",void 0),u([(0,n.wk)()],d.prototype,"initialized",void 0),u([(0,n.wk)()],d.prototype,"loadingQuote",void 0),u([(0,n.wk)()],d.prototype,"loadingPrices",void 0),u([(0,n.wk)()],d.prototype,"loadingTransaction",void 0),u([(0,n.wk)()],d.prototype,"sourceToken",void 0),u([(0,n.wk)()],d.prototype,"sourceTokenAmount",void 0),u([(0,n.wk)()],d.prototype,"sourceTokenPriceInUSD",void 0),u([(0,n.wk)()],d.prototype,"toToken",void 0),u([(0,n.wk)()],d.prototype,"toTokenAmount",void 0),u([(0,n.wk)()],d.prototype,"toTokenPriceInUSD",void 0),u([(0,n.wk)()],d.prototype,"inputError",void 0),u([(0,n.wk)()],d.prototype,"gasPriceInUSD",void 0),u([(0,n.wk)()],d.prototype,"fetchError",void 0),d=u([(0,r.customElement)("w3m-swap-view")],d)},43694:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(68342),s=i(6229),r=i(12525),l=i(66955),c=i(41457);const u=o.AH`
  wui-flex {
    width: 100%;
  }

  .suggestion {
    background: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xs);
  }

  .suggestion:hover {
    background-color: var(--wui-color-gray-glass-005);
    cursor: pointer;
  }

  .suggested-name {
    max-width: 75%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  form {
    width: 100%;
  }

  wui-icon-link {
    position: absolute;
    right: 20px;
    transform: translateY(11px);
  }
`;var d=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let p=class extends o.WF{constructor(){super(),this.formRef=(0,a._)(),this.usubscribe=[],this.name="",this.error="",this.loading=r.f.state.loading,this.suggestions=r.f.state.suggestions,this.registered=!1,this.profileName=r.Uj.state.profileName,this.onDebouncedNameInputChange=r.wE.debounce((t=>{r.f.validateName(t)?(this.error="",this.name=t,r.f.getSuggestions(t),r.f.isNameRegistered(t).then((t=>{this.registered=t}))):t.length<4?this.error="Name must be at least 4 characters long":this.error="Can only contain letters, numbers and - characters"})),this.usubscribe.push(r.f.subscribe((t=>{this.suggestions=t.suggestions,this.loading=t.loading})),r.Uj.subscribeKey("profileName",(t=>{this.profileName=t,t&&(this.error="You already own a name")})))}firstUpdated(){this.formRef.value?.addEventListener("keydown",this.onEnterKey.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.usubscribe.forEach((t=>t())),this.formRef.value?.removeEventListener("keydown",this.onEnterKey.bind(this))}render(){return o.qy`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        gap="m"
        .padding=${["0","s","m","s"]}
      >
        <form ${(0,a.K)(this.formRef)} @submit=${this.onSubmitName.bind(this)}>
          <wui-ens-input
            @inputChange=${this.onNameInputChange.bind(this)}
            .errorMessage=${this.error}
            .value=${this.name}
          >
          </wui-ens-input>
          ${this.submitButtonTemplate()}
          <input type="submit" hidden />
        </form>
        ${this.templateSuggestions()}
      </wui-flex>
    `}submitButtonTemplate(){return this.isAllowedToSubmit()?o.qy`
          <wui-icon-link
            size="sm"
            icon="chevronRight"
            iconcolor="accent-100"
            @click=${this.onSubmitName.bind(this)}
          >
          </wui-icon-link>
        `:null}onSelectSuggestion(t){return()=>{this.name=t,this.registered=!1,this.requestUpdate()}}onNameInputChange(t){this.onDebouncedNameInputChange(t.detail)}nameSuggestionTagTemplate(){return this.loading?o.qy`<wui-loading-spinner size="lg" color="fg-100"></wui-loading-spinner>`:this.registered?o.qy`<wui-tag variant="shade" size="lg">Registered</wui-tag>`:o.qy`<wui-tag variant="success" size="lg">Available</wui-tag>`}templateSuggestions(){if(!this.name||this.name.length<4||this.error)return null;const t=this.registered?this.suggestions.filter((t=>t.name!==this.name)):[];return o.qy`<wui-flex flexDirection="column" gap="xxs" alignItems="center">
      <wui-flex
        data-testid="account-name-suggestion"
        .padding=${["m","m","m","m"]}
        justifyContent="space-between"
        class="suggestion"
        @click=${this.onSubmitName.bind(this)}
      >
        <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
          ${this.name}</wui-text
        >${this.nameSuggestionTagTemplate()}
      </wui-flex>
      ${t.map((t=>this.availableNameTemplate(t.name)))}
    </wui-flex>`}availableNameTemplate(t){return o.qy` <wui-flex
      data-testid="account-name-suggestion"
      .padding=${["m","m","m","m"]}
      justifyContent="space-between"
      class="suggestion"
      @click=${this.onSelectSuggestion(t)}
    >
      <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
        ${t}
      </wui-text>
      <wui-tag variant="success" size="lg">Available</wui-tag>
    </wui-flex>`}isAllowedToSubmit(){return!this.loading&&!this.registered&&!this.error&&!this.profileName&&r.f.validateName(this.name)}async onSubmitName(){try{if(!this.isAllowedToSubmit())return;const t=`${this.name}${s.oU.WC_NAME_SUFFIX}`;r.En.sendEvent({type:"track",event:"REGISTER_NAME_INITIATED",properties:{isSmartAccount:r.Uj.state.preferredAccountType===c.Vl.ACCOUNT_TYPES.SMART_ACCOUNT,ensName:t}}),await r.f.registerName(t),r.En.sendEvent({type:"track",event:"REGISTER_NAME_SUCCESS",properties:{isSmartAccount:r.Uj.state.preferredAccountType===c.Vl.ACCOUNT_TYPES.SMART_ACCOUNT,ensName:t}})}catch(t){r.Pt.showError(t.message),r.En.sendEvent({type:"track",event:"REGISTER_NAME_ERROR",properties:{isSmartAccount:r.Uj.state.preferredAccountType===c.Vl.ACCOUNT_TYPES.SMART_ACCOUNT,ensName:`${this.name}${s.oU.WC_NAME_SUFFIX}`,error:t?.message||"Unknown error"}})}}onEnterKey(t){"Enter"===t.key&&this.isAllowedToSubmit()&&this.onSubmitName()}};p.styles=u,d([(0,n.MZ)()],p.prototype,"errorMessage",void 0),d([(0,n.wk)()],p.prototype,"name",void 0),d([(0,n.wk)()],p.prototype,"error",void 0),d([(0,n.wk)()],p.prototype,"loading",void 0),d([(0,n.wk)()],p.prototype,"suggestions",void 0),d([(0,n.wk)()],p.prototype,"registered",void 0),d([(0,n.wk)()],p.prototype,"profileName",void 0),p=d([(0,l.customElement)("w3m-register-account-name-view")],p)},55992:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(60031),s=i(6229),r=i(12525),l=i(66955);const c=o.AH`
  wui-avatar {
    width: var(--wui-spacing-3xl);
    height: var(--wui-spacing-3xl);
    box-shadow: 0 0 0 0;
  }

  wui-icon-box {
    position: relative;
    right: 15px;
    top: 15px;
    border: 2px solid var(--wui-color-bg-150);
    background-color: var(--wui-color-bg-125);
  }
`;var u=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let d=class extends o.WF{constructor(){super(),this.metadata=r.Hd.state.metadata,this.allAccounts=r.Uj.state.allAccounts||[],this.balances={},this.labels=r.Uj.state.addressLabels,this.currentAddress=r.Uj.state.address||"",this.caipNetwork=r.WB.state.activeCaipNetwork,r.Uj.subscribeKey("allAccounts",(t=>{this.allAccounts=t}))}connectedCallback(){super.connectedCallback(),this.allAccounts.forEach((t=>{r.TP.getBalance(t.address,this.caipNetwork?.caipNetworkId).then((e=>{let i=this.balances[t.address]||0;e.balances.length>0&&(i=e.balances.reduce(((t,e)=>t+(e?.value||0)),0)),this.balances[t.address]=i,this.requestUpdate()}))}))}getAddressIcon(t){return"smartAccount"===t?"lightbulb":"mail"}render(){return o.qy`
      <wui-flex justifyContent="center" .padding=${["xl","0","xl","0"]}>
        <wui-banner-img
          imageSrc=${(0,a.J)(this.metadata?.icons[0])}
          text=${(0,a.J)(this.metadata?.url)}
          size="sm"
        ></wui-banner-img>
      </wui-flex>
      <wui-flex flexDirection="column" gap="xxl" .padding=${["l","xl","xl","xl"]}>
        ${this.allAccounts.map(((t,e)=>this.getAddressTemplate(t,e)))}
      </wui-flex>
    `}getAddressTemplate(t,e){const i=this.labels?.get(t.address),n=r.WB.state.activeChain,a=r.iT.getConnectedConnectorId(n)===s.oU.CONNECTOR_ID.AUTH;return o.qy`
      <wui-flex
        flexDirection="row"
        justifyContent="space-between"
        data-testid="switch-address-item"
      >
        <wui-flex alignItems="center">
          <wui-avatar address=${t.address}></wui-avatar>
          ${a?o.qy`<wui-icon-box
                size="sm"
                iconcolor="fg-200"
                backgroundcolor="glass-002"
                background="gray"
                icon="${this.getAddressIcon(t.type)}"
                ?border=${!0}
              ></wui-icon-box>`:o.qy`<wui-flex .padding="${["0","0","0","s"]}"></wui-flex>`}
          <wui-flex flexDirection="column">
            <wui-text class="address" variant="paragraph-500" color="fg-100"
              >${i||l.UiHelperUtil.getTruncateString({string:t.address,charsStart:4,charsEnd:6,truncate:"middle"})}</wui-text
            >
            <wui-text class="address-description" variant="small-400">
              ${"number"==typeof this.balances[t.address]?`$${this.balances[t.address]?.toFixed(2)}`:o.qy`<wui-loading-spinner size="sm" color="accent-100"></wui-loading-spinner>`}
            </wui-text>
          </wui-flex>
        </wui-flex>
        <wui-flex gap="s" alignItems="center">
          ${t.address?.toLowerCase()===this.currentAddress?.toLowerCase()?"":o.qy`
                <wui-button
                  data-testid=${`w3m-switch-address-button-${e}`}
                  textVariant="small-600"
                  size="md"
                  variant="accent"
                  @click=${()=>this.onSwitchAddress(t.address)}
                  >Switch to</wui-button
                >
              `}
        </wui-flex>
      </wui-flex>
    `}onSwitchAddress(t){const e=r.WB.state.activeCaipNetwork,i=e?.chainNamespace,o=`${i}:${e?.id}:${t}`;r.Uj.setCaipAddress(o,i),r.W3.close()}};d.styles=c,u([(0,n.wk)()],d.prototype,"allAccounts",void 0),u([(0,n.wk)()],d.prototype,"balances",void 0),d=u([(0,l.customElement)("w3m-switch-address-view")],d)},56880:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(12525),s=i(66955),r=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let l=class extends o.WF{constructor(){super(...arguments),this.dappName=a.Hd.state.metadata?.name,this.isCancelling=!1,this.isSigning=!1}render(){return o.qy`
      <wui-flex justifyContent="center" .padding=${["2xl","0","xxl","0"]}>
        <w3m-siwx-sign-message-thumbnails></w3m-siwx-sign-message-thumbnails>
      </wui-flex>
      <wui-flex
        .padding=${["0","4xl","l","4xl"]}
        gap="s"
        justifyContent="space-between"
      >
        <wui-text variant="paragraph-500" align="center" color="fg-100"
          >${this.dappName??"Dapp"} needs to connect to your wallet</wui-text
        >
      </wui-flex>
      <wui-flex
        .padding=${["0","3xl","l","3xl"]}
        gap="s"
        justifyContent="space-between"
      >
        <wui-text variant="small-400" align="center" color="fg-200"
          >Sign this message to prove you own this wallet and proceed. Canceling will disconnect
          you.</wui-text
        >
      </wui-flex>
      <wui-flex .padding=${["l","xl","xl","xl"]} gap="s" justifyContent="space-between">
        <wui-button
          size="lg"
          borderRadius="xs"
          fullWidth
          variant="neutral"
          ?loading=${this.isCancelling}
          @click=${this.onCancel.bind(this)}
          data-testid="w3m-connecting-siwe-cancel"
        >
          ${this.isCancelling?"Cancelling...":"Cancel"}
        </wui-button>
        <wui-button
          size="lg"
          borderRadius="xs"
          fullWidth
          variant="main"
          @click=${this.onSign.bind(this)}
          ?loading=${this.isSigning}
          data-testid="w3m-connecting-siwe-sign"
        >
          ${this.isSigning?"Signing...":"Sign"}
        </wui-button>
      </wui-flex>
    `}async onSign(){this.isSigning=!0,await a.UG.requestSignMessage().finally((()=>this.isSigning=!1))}async onCancel(){this.isCancelling=!0,await a.UG.cancelSignMessage().finally((()=>this.isCancelling=!1))}};r([(0,n.wk)()],l.prototype,"isCancelling",void 0),r([(0,n.wk)()],l.prototype,"isSigning",void 0),l=r([(0,s.customElement)("w3m-siwx-sign-message-view")],l)},70327:(t,e,i)=>{var o=i(12618),n=i(12525),a=i(66955),s=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let r=class extends o.WF{render(){return o.qy`
      <wui-flex flexDirection="column" alignItems="center" gap="xl" padding="xl">
        <wui-text variant="paragraph-400" color="fg-100">Follow the instructions on</wui-text>
        <wui-chip
          icon="externalLink"
          variant="fill"
          href=${n.oU.SECURE_SITE_DASHBOARD}
          imageSrc=${n.oU.SECURE_SITE_FAVICON}
          data-testid="w3m-secure-website-button"
        >
        </wui-chip>
        <wui-text variant="small-400" color="fg-200">
          You will have to reconnect for security reasons
        </wui-text>
      </wui-flex>
    `}};r=s([(0,a.customElement)("w3m-upgrade-wallet-view")],r)},71711:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(12525),s=i(66955);const r=o.AH`
  :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 var(--wui-color-gray-glass-005);
    border-radius: 12px;
  }

  wui-loading-hexagon {
    position: absolute;
  }

  .token-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wui-spacing-xxs);
    padding: var(--wui-spacing-xs);
    height: 40px;
    border: none;
    border-radius: 80px;
    background: var(--wui-color-gray-glass-002);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
    cursor: pointer;
    transition: background 0.2s linear;
  }

  .token-item:hover {
    background: var(--wui-color-gray-glass-005);
  }

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

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s) var(--wui-spacing-xl);
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
  }

  .action-buttons-container {
    width: 100%;
    gap: var(--wui-spacing-xs);
  }

  .action-buttons-container > button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    height: 48px;
    border-radius: var(--wui-border-radius-xs);
    border: none;
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }

  .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: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xxs);
    width: 100%;
  }

  .details-container > wui-flex > button {
    border: none;
    background: none;
    padding: var(--wui-spacing-s);
    border-radius: var(--wui-border-radius-xxs);
    transition: background 0.2s linear;
  }

  .details-container > wui-flex > button:hover {
    background: var(--wui-color-gray-glass-002);
  }

  .details-content-container {
    padding: var(--wui-spacing-1xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

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

  .details-row {
    width: 100%;
    padding: var(--wui-spacing-s) var(--wui-spacing-xl);
    border-radius: var(--wui-border-radius-xxs);
    background: var(--wui-color-gray-glass-002);
  }
`;var l=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let c=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.detailsOpen=!0,this.approvalTransaction=a.GN.state.approvalTransaction,this.swapTransaction=a.GN.state.swapTransaction,this.sourceToken=a.GN.state.sourceToken,this.sourceTokenAmount=a.GN.state.sourceTokenAmount??"",this.sourceTokenPriceInUSD=a.GN.state.sourceTokenPriceInUSD,this.toToken=a.GN.state.toToken,this.toTokenAmount=a.GN.state.toTokenAmount??"",this.toTokenPriceInUSD=a.GN.state.toTokenPriceInUSD,this.caipNetwork=a.WB.state.activeCaipNetwork,this.balanceSymbol=a.Uj.state.balanceSymbol,this.gasPriceInUSD=a.GN.state.gasPriceInUSD,this.inputError=a.GN.state.inputError,this.loadingQuote=a.GN.state.loadingQuote,this.loadingApprovalTransaction=a.GN.state.loadingApprovalTransaction,this.loadingBuildTransaction=a.GN.state.loadingBuildTransaction,this.loadingTransaction=a.GN.state.loadingTransaction,this.unsubscribe.push(a.Uj.subscribeKey("balanceSymbol",(t=>{this.balanceSymbol!==t&&a.IN.goBack()})),a.WB.subscribeKey("activeCaipNetwork",(t=>{this.caipNetwork!==t&&(this.caipNetwork=t)})),a.GN.subscribe((t=>{this.approvalTransaction=t.approvalTransaction,this.swapTransaction=t.swapTransaction,this.sourceToken=t.sourceToken,this.gasPriceInUSD=t.gasPriceInUSD,this.toToken=t.toToken,this.gasPriceInUSD=t.gasPriceInUSD,this.toTokenPriceInUSD=t.toTokenPriceInUSD,this.sourceTokenAmount=t.sourceTokenAmount??"",this.toTokenAmount=t.toTokenAmount??"",this.inputError=t.inputError,t.inputError&&a.IN.goBack(),this.loadingQuote=t.loadingQuote,this.loadingApprovalTransaction=t.loadingApprovalTransaction,this.loadingBuildTransaction=t.loadingBuildTransaction,this.loadingTransaction=t.loadingTransaction})))}firstUpdated(){a.GN.getTransaction(),this.refreshTransaction()}disconnectedCallback(){this.unsubscribe.forEach((t=>t?.())),clearInterval(this.interval)}render(){return o.qy`
      <wui-flex flexDirection="column" .padding=${["0","l","l","l"]} gap="s">
        ${this.templateSwap()}
      </wui-flex>
    `}refreshTransaction(){this.interval=setInterval((()=>{a.GN.getApprovalLoadingState()||a.GN.getTransaction()}),1e4)}templateSwap(){const t=`${s.UiHelperUtil.formatNumberToLocalString(parseFloat(this.sourceTokenAmount))} ${this.sourceToken?.symbol}`,e=`${s.UiHelperUtil.formatNumberToLocalString(parseFloat(this.toTokenAmount))} ${this.toToken?.symbol}`,i=parseFloat(this.sourceTokenAmount)*this.sourceTokenPriceInUSD,n=parseFloat(this.toTokenAmount)*this.toTokenPriceInUSD-(this.gasPriceInUSD||0),a=s.UiHelperUtil.formatNumberToLocalString(i),r=s.UiHelperUtil.formatNumberToLocalString(n),l=this.loadingQuote||this.loadingBuildTransaction||this.loadingTransaction||this.loadingApprovalTransaction;return o.qy`
      <wui-flex flexDirection="column" alignItems="center" gap="l">
        <wui-flex class="preview-container" flexDirection="column" alignItems="flex-start" gap="l">
          <wui-flex
            class="preview-token-details-container"
            alignItems="center"
            justifyContent="space-between"
            gap="l"
          >
            <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs">
              <wui-text variant="small-400" color="fg-150">Send</wui-text>
              <wui-text variant="paragraph-400" color="fg-100">$${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="fg-200" size="md"></wui-icon>
          <wui-flex
            class="preview-token-details-container"
            alignItems="center"
            justifyContent="space-between"
            gap="l"
          >
            <wui-flex flexDirection="column" alignItems="flex-start" gap="4xs">
              <wui-text variant="small-400" color="fg-150">Receive</wui-text>
              <wui-text variant="paragraph-400" color="fg-100">$${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="xs">
          <wui-icon size="sm" color="fg-200" name="infoCircle"></wui-icon>
          <wui-text variant="small-400" color="fg-200">Review transaction carefully</wui-text>
        </wui-flex>

        <wui-flex
          class="action-buttons-container"
          flexDirection="row"
          alignItems="center"
          justifyContent="space-between"
          gap="xs"
        >
          <wui-button
            class="cancel-button"
            fullWidth
            size="lg"
            borderRadius="xs"
            variant="neutral"
            @click=${this.onCancelTransaction.bind(this)}
          >
            <wui-text variant="paragraph-600" color="fg-200">Cancel</wui-text>
          </wui-button>
          <wui-button
            class="action-button"
            fullWidth
            size="lg"
            borderRadius="xs"
            variant="main"
            ?loading=${l}
            ?disabled=${l}
            @click=${this.onSendTransaction.bind(this)}
          >
            <wui-text variant="paragraph-600" color="inverse-100">
              ${this.actionButtonLabel()}
            </wui-text>
          </wui-button>
        </wui-flex>
      </wui-flex>
    `}templateDetails(){return this.sourceToken&&this.toToken&&!this.inputError?o.qy`<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`:null}actionButtonLabel(){return this.loadingApprovalTransaction?"Approving...":this.approvalTransaction?"Approve":"Swap"}onCancelTransaction(){a.IN.goBack()}onSendTransaction(){this.approvalTransaction?a.GN.sendTransactionForApproval(this.approvalTransaction):a.GN.sendTransactionForSwap(this.swapTransaction)}};c.styles=r,l([(0,n.wk)()],c.prototype,"interval",void 0),l([(0,n.wk)()],c.prototype,"detailsOpen",void 0),l([(0,n.wk)()],c.prototype,"approvalTransaction",void 0),l([(0,n.wk)()],c.prototype,"swapTransaction",void 0),l([(0,n.wk)()],c.prototype,"sourceToken",void 0),l([(0,n.wk)()],c.prototype,"sourceTokenAmount",void 0),l([(0,n.wk)()],c.prototype,"sourceTokenPriceInUSD",void 0),l([(0,n.wk)()],c.prototype,"toToken",void 0),l([(0,n.wk)()],c.prototype,"toTokenAmount",void 0),l([(0,n.wk)()],c.prototype,"toTokenPriceInUSD",void 0),l([(0,n.wk)()],c.prototype,"caipNetwork",void 0),l([(0,n.wk)()],c.prototype,"balanceSymbol",void 0),l([(0,n.wk)()],c.prototype,"gasPriceInUSD",void 0),l([(0,n.wk)()],c.prototype,"inputError",void 0),l([(0,n.wk)()],c.prototype,"loadingQuote",void 0),l([(0,n.wk)()],c.prototype,"loadingApprovalTransaction",void 0),l([(0,n.wk)()],c.prototype,"loadingBuildTransaction",void 0),l([(0,n.wk)()],c.prototype,"loadingTransaction",void 0),c=l([(0,s.customElement)("w3m-swap-preview-view")],c)},73651:(t,e,i)=>{var o=i(12618),n=i(6229),a=i(12525),s=i(66955);const r=o.AH`
  .continue-button-container {
    width: 100%;
  }
`;var l=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let c=class extends o.WF{render(){return o.qy`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        gap="xxl"
        .padding=${["0","0","l","0"]}
      >
        ${this.onboardingTemplate()} ${this.buttonsTemplate()}
        <wui-link
          @click=${()=>{a.wE.openHref(n.TC.URLS.FAQ,"_blank")}}
        >
          Learn more
          <wui-icon color="inherit" slot="iconRight" name="externalLink"></wui-icon>
        </wui-link>
      </wui-flex>
    `}onboardingTemplate(){return o.qy` <wui-flex
      flexDirection="column"
      gap="xxl"
      alignItems="center"
      .padding=${["0","xxl","0","xxl"]}
    >
      <wui-flex gap="s" alignItems="center" justifyContent="center">
        <wui-icon-box
          size="xl"
          iconcolor="success-100"
          backgroundcolor="success-100"
          icon="checkmark"
          background="opaque"
        ></wui-icon-box>
      </wui-flex>
      <wui-flex flexDirection="column" alignItems="center" gap="s">
        <wui-text align="center" variant="medium-600" color="fg-100">
          Account name chosen successfully
        </wui-text>
        <wui-text align="center" variant="paragraph-400" color="fg-100">
          You can now fund your account and trade crypto
        </wui-text>
      </wui-flex>
    </wui-flex>`}buttonsTemplate(){return o.qy`<wui-flex
      .padding=${["0","2l","0","2l"]}
      gap="s"
      class="continue-button-container"
    >
      <wui-button fullWidth size="lg" borderRadius="xs" @click=${this.redirectToAccount.bind(this)}
        >Let's Go!
      </wui-button>
    </wui-flex>`}redirectToAccount(){a.IN.replace("Account")}};c.styles=r,c=l([(0,s.customElement)("w3m-register-account-name-success-view")],c)},76556:(t,e,i)=>{var o=i(12525),n=i(66955),a=i(61123),s=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let r=class extends a.H{constructor(){super(),this.email=o.IN.state.data?.email,this.onOtpSubmit=async t=>{try{this.authConnector&&(await this.authConnector.provider.updateEmailPrimaryOtp({otp:t}),o.En.sendEvent({type:"track",event:"EMAIL_VERIFICATION_CODE_PASS"}),o.IN.replace("UpdateEmailSecondaryOtp",o.IN.state.data))}catch(t){throw o.En.sendEvent({type:"track",event:"EMAIL_VERIFICATION_CODE_FAIL",properties:{message:o.wE.parseError(t)}}),t}},this.onStartOver=()=>{o.IN.replace("UpdateEmailWallet",o.IN.state.data)}}};r=s([(0,n.customElement)("w3m-update-email-primary-otp-view")],r)},81393:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(12525),s=i(66955);const r=o.AH`
  :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 var(--wui-color-gray-glass-005);
    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: var(--wui-spacing-xs);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
    background-color: transparent;
    border-radius: var(--wui-border-radius-xxs);
    padding: var(--wui-spacing-xs);
    align-items: center;
    transition: background-color 0.2s linear;
  }

  .select-network-button:hover {
    background-color: var(--wui-color-gray-glass-002);
  }

  .select-network-button > wui-image {
    width: 26px;
    height: 26px;
    border-radius: var(--wui-border-radius-xs);
    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
  }
`;var l=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let c=class extends o.WF{constructor(){super(),this.unsubscribe=[],this.targetToken=a.IN.state.data?.target,this.sourceToken=a.GN.state.sourceToken,this.sourceTokenAmount=a.GN.state.sourceTokenAmount,this.toToken=a.GN.state.toToken,this.myTokensWithBalance=a.GN.state.myTokensWithBalance,this.popularTokens=a.GN.state.popularTokens,this.searchValue="",this.unsubscribe.push(a.GN.subscribe((t=>{this.sourceToken=t.sourceToken,this.toToken=t.toToken,this.myTokensWithBalance=t.myTokensWithBalance})))}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"),e=this.renderRoot?.querySelector(".tokens");t?.removeEventListener("scroll",this.handleSuggestedTokensScroll.bind(this)),e?.removeEventListener("scroll",this.handleTokenListScroll.bind(this)),clearInterval(this.interval)}render(){return o.qy`
      <wui-flex flexDirection="column" gap="s">
        ${this.templateSearchInput()} ${this.templateSuggestedTokens()} ${this.templateTokens()}
      </wui-flex>
    `}onSelectToken(t){"sourceToken"===this.targetToken?a.GN.setSourceToken(t):(a.GN.setToToken(t),this.sourceToken&&this.sourceTokenAmount&&a.GN.swapTokens()),a.IN.goBack()}templateSearchInput(){return o.qy`
      <wui-flex .padding=${["3xs","s","0","s"]} gap="xs">
        <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>
    `}templateTokens(){const t=this.myTokensWithBalance?Object.values(this.myTokensWithBalance):[],e=this.popularTokens?this.popularTokens:[],i=this.filterTokensWithText(t,this.searchValue),n=this.filterTokensWithText(e,this.searchValue);return o.qy`
      <wui-flex class="tokens-container">
        <wui-flex class="tokens" .padding=${["0","s","s","s"]} flexDirection="column">
          ${i?.length>0?o.qy`
                <wui-flex justifyContent="flex-start" padding="s">
                  <wui-text variant="paragraph-500" color="fg-200">Your tokens</wui-text>
                </wui-flex>
                ${i.map((t=>{const e=t.symbol===this.sourceToken?.symbol||t.symbol===this.toToken?.symbol;return o.qy`
                    <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=${()=>{e||this.onSelectToken(t)}}
                    >
                    </wui-token-list-item>
                  `}))}
              `:null}

          <wui-flex justifyContent="flex-start" padding="s">
            <wui-text variant="paragraph-500" color="fg-200">Tokens</wui-text>
          </wui-flex>
          ${n?.length>0?n.map((t=>o.qy`
                  <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>
                `)):null}
        </wui-flex>
      </wui-flex>
    `}templateSuggestedTokens(){const t=a.GN.state.suggestedTokens?a.GN.state.suggestedTokens.slice(0,8):null;return t?o.qy`
      <wui-flex class="suggested-tokens-container" .padding=${["0","s","0","s"]} gap="xs">
        ${t.map((t=>o.qy`
            <wui-token-button
              text=${t.symbol}
              imageSrc=${t.logoUri}
              @click=${()=>this.onSelectToken(t)}
            >
            </wui-token-button>
          `))}
      </wui-flex>
    `:null}onSearchInputChange(t){this.searchValue=t.detail}handleSuggestedTokensScroll(){const t=this.renderRoot?.querySelector(".suggested-tokens-container");t&&(t.style.setProperty("--suggested-tokens-scroll--left-opacity",s.MathUtil.interpolate([0,100],[0,1],t.scrollLeft).toString()),t.style.setProperty("--suggested-tokens-scroll--right-opacity",s.MathUtil.interpolate([0,100],[0,1],t.scrollWidth-t.scrollLeft-t.offsetWidth).toString()))}handleTokenListScroll(){const t=this.renderRoot?.querySelector(".tokens");t&&(t.style.setProperty("--tokens-scroll--top-opacity",s.MathUtil.interpolate([0,100],[0,1],t.scrollTop).toString()),t.style.setProperty("--tokens-scroll--bottom-opacity",s.MathUtil.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())))}};c.styles=r,l([(0,n.wk)()],c.prototype,"interval",void 0),l([(0,n.wk)()],c.prototype,"targetToken",void 0),l([(0,n.wk)()],c.prototype,"sourceToken",void 0),l([(0,n.wk)()],c.prototype,"sourceTokenAmount",void 0),l([(0,n.wk)()],c.prototype,"toToken",void 0),l([(0,n.wk)()],c.prototype,"myTokensWithBalance",void 0),l([(0,n.wk)()],c.prototype,"popularTokens",void 0),l([(0,n.wk)()],c.prototype,"searchValue",void 0),c=l([(0,s.customElement)("w3m-swap-select-token-view")],c)},91778:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(6229),s=i(12525),r=i(66955);const l=o.AH`
  @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);
  }

  .capitalize {
    text-transform: capitalize;
  }
`;var c=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let u=class extends o.WF{constructor(){super(...arguments),this.unsubscribe=[],this.switchToChain=s.IN.state.data?.switchToChain,this.navigateTo=s.IN.state.data?.navigateTo,this.navigateWithReplace=s.IN.state.data?.navigateWithReplace,this.caipNetwork=s.IN.state.data?.network,this.activeChain=s.WB.state.activeChain}firstUpdated(){this.unsubscribe.push(s.WB.subscribeKey("activeChain",(t=>this.activeChain=t)))}disconnectedCallback(){this.unsubscribe.forEach((t=>t()))}render(){const t=this.switchToChain?a.oU.CHAIN_NAME_MAP[this.switchToChain]:"supported";if(!this.switchToChain)return null;const e="eip155"===this.switchToChain?"Ethereum":this.switchToChain;return o.qy`
      <wui-flex
        flexDirection="column"
        alignItems="center"
        .padding=${["3xl","xl","xl","xl"]}
        gap="xl"
      >
        <wui-flex justifyContent="center" flexDirection="column" alignItems="center" gap="xl">
          <wui-visual
            name=${"eip155"===this.switchToChain?"eth":this.switchToChain}
          ></wui-visual>
          <wui-text
            data-testid=${`w3m-switch-active-chain-to-${e}`}
            variant="paragraph-500"
            color="fg-100"
            align="center"
            >Switch to <span class="capitalize">${e}</span></wui-text
          >
          <wui-text variant="small-400" color="fg-200" align="center">
            Connected wallet doesn't support connecting to ${t} chain. You
            need to connect with a different wallet.
          </wui-text>
          <wui-button
            data-testid="w3m-switch-active-chain-button"
            size="md"
            @click=${this.switchActiveChain.bind(this)}
            >Switch</wui-button
          >
        </wui-flex>
      </wui-flex>
    `}async switchActiveChain(){this.switchToChain&&(s.WB.setIsSwitchingNamespace(!0),s.aK.setFilterByNamespace(this.switchToChain),this.caipNetwork?await s.WB.switchActiveNetwork(this.caipNetwork):s.WB.setActiveNamespace(this.switchToChain),s.IN.reset("Connect"))}};u.styles=l,c([(0,n.MZ)()],u.prototype,"activeChain",void 0),u=c([(0,r.customElement)("w3m-switch-active-chain-view")],u)},95417:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(68342),s=i(12525),r=i(66955);const l=o.AH`
  wui-email-input {
    width: 100%;
  }

  form {
    width: 100%;
    display: block;
    position: relative;
  }
`;var c=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let u=class extends o.WF{constructor(){super(...arguments),this.formRef=(0,a._)(),this.initialEmail=s.IN.state.data?.email??"",this.email="",this.loading=!1}firstUpdated(){this.formRef.value?.addEventListener("keydown",(t=>{"Enter"===t.key&&this.onSubmitEmail(t)}))}render(){const t=!this.loading&&this.email.length>3&&this.email!==this.initialEmail;return o.qy`
      <wui-flex flexDirection="column" padding="m" gap="m">
        <form ${(0,a.K)(this.formRef)} @submit=${this.onSubmitEmail.bind(this)}>
          <wui-email-input
            value=${this.initialEmail}
            .disabled=${this.loading}
            @inputChange=${this.onEmailInputChange.bind(this)}
          >
          </wui-email-input>
          <input type="submit" hidden />
        </form>

        <wui-flex gap="s">
          <wui-button size="md" variant="neutral" fullWidth @click=${s.IN.goBack}>
            Cancel
          </wui-button>

          <wui-button
            size="md"
            variant="main"
            fullWidth
            @click=${this.onSubmitEmail.bind(this)}
            .disabled=${!t}
            .loading=${this.loading}
          >
            Save
          </wui-button>
        </wui-flex>
      </wui-flex>
    `}onEmailInputChange(t){this.email=t.detail}async onSubmitEmail(t){try{if(this.loading)return;this.loading=!0,t.preventDefault();const e=s.aK.getAuthConnector();if(!e)throw new Error("w3m-update-email-wallet: Auth connector not found");const i=await e.provider.updateEmail({email:this.email});s.En.sendEvent({type:"track",event:"EMAIL_EDIT"}),"VERIFY_SECONDARY_OTP"===i.action?s.IN.push("UpdateEmailSecondaryOtp",{email:this.initialEmail,newEmail:this.email}):s.IN.push("UpdateEmailPrimaryOtp",{email:this.initialEmail,newEmail:this.email})}catch(t){s.Pt.showError(t),this.loading=!1}}};u.styles=l,c([(0,n.wk)()],u.prototype,"email",void 0),c([(0,n.wk)()],u.prototype,"loading",void 0),u=c([(0,r.customElement)("w3m-update-email-wallet-view")],u)},95600:(t,e,i)=>{var o=i(12525),n=i(66955),a=i(61123),s=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let r=class extends a.H{constructor(){super(),this.email=o.IN.state.data?.newEmail,this.onOtpSubmit=async t=>{try{this.authConnector&&(await this.authConnector.provider.updateEmailSecondaryOtp({otp:t}),o.En.sendEvent({type:"track",event:"EMAIL_VERIFICATION_CODE_PASS"}),o.IN.reset("Account"))}catch(t){throw o.En.sendEvent({type:"track",event:"EMAIL_VERIFICATION_CODE_FAIL",properties:{message:o.wE.parseError(t)}}),t}},this.onStartOver=()=>{o.IN.replace("UpdateEmailWallet",o.IN.state.data)}}};r=s([(0,n.customElement)("w3m-update-email-secondary-otp-view")],r)},98896:(t,e,i)=>{var o=i(12618),n=i(25707),a=i(60031),s=i(12525),r=i(66955);const l=o.AH`
  :host > wui-flex {
    max-height: clamp(360px, 540px, 80vh);
    overflow: scroll;
    scrollbar-width: none;
  }

  :host > wui-flex::-webkit-scrollbar {
    display: none;
  }
`;var c=function(t,e,i,o){var n,a=arguments.length,s=a<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(s=(a<3?n(s):a>3?n(e,i,s):n(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s};let u=class extends o.WF{constructor(){super(),this.swapUnsupportedChain=s.IN.state.data?.swapUnsupportedChain,this.unsubscribe=[],this.disconecting=!1,this.unsubscribe.push(s.jQ.subscribeNetworkImages((()=>this.requestUpdate())))}disconnectedCallback(){this.unsubscribe.forEach((t=>t()))}render(){return o.qy`
      <wui-flex class="container" flexDirection="column" gap="0">
        <wui-flex
          class="container"
          flexDirection="column"
          .padding=${["m","xl","xs","xl"]}
          alignItems="center"
          gap="xl"
        >
          ${this.descriptionTemplate()}
        </wui-flex>

        <wui-flex flexDirection="column" padding="s" gap="xs">
          ${this.networksTemplate()}
        </wui-flex>

        <wui-separator text="or"></wui-separator>
        <wui-flex flexDirection="column" padding="s" gap="xs">
          <wui-list-item
            variant="icon"
            iconVariant="overlay"
            icon="disconnect"
            ?chevron=${!1}
            .loading=${this.disconecting}
            @click=${this.onDisconnect.bind(this)}
            data-testid="disconnect-button"
          >
            <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
          </wui-list-item>
        </wui-flex>
      </wui-flex>
    `}descriptionTemplate(){return this.swapUnsupportedChain?o.qy`
        <wui-text variant="small-400" color="fg-200" align="center">
          The swap feature doesn’t support your current network. Switch to an available option to
          continue.
        </wui-text>
      `:o.qy`
      <wui-text variant="small-400" color="fg-200" align="center">
        This app doesn’t support your current network. Switch to an available option to continue.
      </wui-text>
    `}networksTemplate(){const t=s.WB.getAllRequestedCaipNetworks(),e=s.WB.getAllApprovedCaipNetworkIds(),i=s.wE.sortRequestedNetworks(e,t);return(this.swapUnsupportedChain?i.filter((t=>s.oU.SWAP_SUPPORTED_NETWORKS.includes(t.caipNetworkId))):i).map((t=>o.qy`
        <wui-list-network
          imageSrc=${(0,a.J)(s.$m.getNetworkImage(t))}
          name=${t.name??"Unknown"}
          @click=${()=>this.onSwitchNetwork(t)}
        >
        </wui-list-network>
      `))}async onDisconnect(){try{this.disconecting=!0,await s.x4.disconnect(),s.En.sendEvent({type:"track",event:"DISCONNECT_SUCCESS"}),s.W3.close()}catch{s.En.sendEvent({type:"track",event:"DISCONNECT_ERROR"}),s.Pt.showError("Failed to disconnect")}finally{this.disconecting=!1}}async onSwitchNetwork(t){const e=s.Uj.state.caipAddress,i=s.WB.getAllApprovedCaipNetworkIds(),o=(s.WB.getNetworkProp("supportsAllNetworks",t.chainNamespace),s.IN.state.data);e?i?.includes(t.caipNetworkId)?await s.WB.switchActiveNetwork(t):s.IN.push("SwitchNetwork",{...o,network:t}):e||(s.WB.setActiveCaipNetwork(t),s.IN.push("Connect"))}};u.styles=l,c([(0,n.wk)()],u.prototype,"disconecting",void 0),u=c([(0,r.customElement)("w3m-unsupported-chain-view")],u)}}]);