@safe-stars/components/dist/send-DBCfrPnu.cjs

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

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./index-DFmTudTt.cjs"),s=require("./if-defined-CdwTRez8.cjs");require("./index-aiG5ISpA.cjs");require("./index-CHjCYjqZ.cjs");const h=require("./ref-CWlZ6M3T.cjs"),T=require("./ConstantsUtil-B0ngppsM.cjs");require("./index-DRhMXnf4.cjs");const A=require("./index-CdQsYbQb.cjs");require("./index-B2mex_bf.cjs");require("./index-C3SZk0d4.cjs");require("./index-CPhfFWmV.cjs");require("./index-D_XBPfGV.cjs");const R=t.i`
  :host {
    width: 100%;
    height: 100px;
    border-radius: var(--wui-border-radius-s);
    border: 1px solid var(--wui-color-gray-glass-002);
    background-color: var(--wui-color-gray-glass-002);
    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
    will-change: background-color;
    position: relative;
  }

  :host(:hover) {
    background-color: var(--wui-color-gray-glass-005);
  }

  wui-flex {
    width: 100%;
    height: fit-content;
  }

  wui-button {
    display: ruby;
    color: var(--wui-color-fg-100);
    margin: 0 var(--wui-spacing-xs);
  }

  .instruction {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .paste {
    display: inline-flex;
  }

  textarea {
    background: transparent;
    width: 100%;
    font-family: var(--w3m-font-family);
    font-size: var(--wui-font-size-medium);
    font-style: normal;
    font-weight: var(--wui-font-weight-light);
    line-height: 130%;
    letter-spacing: var(--wui-letter-spacing-medium);
    color: var(--wui-color-fg-100);
    caret-color: var(--wui-color-accent-100);
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    padding: 0px;
    border: none;
    outline: none;
    appearance: none;
    resize: none;
    overflow: hidden;
  }
`;var k=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};let w=class extends t.i$1{constructor(){super(...arguments),this.inputElementRef=h.e(),this.instructionElementRef=h.e(),this.instructionHidden=!!this.value,this.pasting=!1,this.onDebouncedSearch=t.CoreHelperUtil.debounce(async e=>{if(!e.length){this.setReceiverAddress("");return}const n=t.ChainController.state.activeChain;if(t.CoreHelperUtil.isAddress(e,n)){this.setReceiverAddress(e);return}try{const o=await t.ConnectionController.getEnsAddress(e);if(o){t.SendController.setReceiverProfileName(e),t.SendController.setReceiverAddress(o);const i=await t.ConnectionController.getEnsAvatar(e);t.SendController.setReceiverProfileImageUrl(i||void 0)}}catch{this.setReceiverAddress(e)}finally{t.SendController.setLoading(!1)}})}firstUpdated(){this.value&&(this.instructionHidden=!0),this.checkHidden()}render(){return t.x` <wui-flex
      @click=${this.onBoxClick.bind(this)}
      flexDirection="column"
      justifyContent="center"
      gap="4xs"
      .padding=${["2xl","l","xl","l"]}
    >
      <wui-text
        ${h.n(this.instructionElementRef)}
        class="instruction"
        color="fg-300"
        variant="medium-400"
      >
        Type or
        <wui-button
          class="paste"
          size="md"
          variant="neutral"
          iconLeft="copy"
          @click=${this.onPasteClick.bind(this)}
        >
          <wui-icon size="sm" color="inherit" slot="iconLeft" name="copy"></wui-icon>
          Paste
        </wui-button>
        address
      </wui-text>
      <textarea
        spellcheck="false"
        ?disabled=${!this.instructionHidden}
        ${h.n(this.inputElementRef)}
        @input=${this.onInputChange.bind(this)}
        @blur=${this.onBlur.bind(this)}
        .value=${this.value??""}
        autocomplete="off"
      >
${this.value??""}</textarea
      >
    </wui-flex>`}async focusInput(){var e;this.instructionElementRef.value&&(this.instructionHidden=!0,await this.toggleInstructionFocus(!1),this.instructionElementRef.value.style.pointerEvents="none",(e=this.inputElementRef.value)==null||e.focus(),this.inputElementRef.value&&(this.inputElementRef.value.selectionStart=this.inputElementRef.value.selectionEnd=this.inputElementRef.value.value.length))}async focusInstruction(){var e;this.instructionElementRef.value&&(this.instructionHidden=!1,await this.toggleInstructionFocus(!0),this.instructionElementRef.value.style.pointerEvents="auto",(e=this.inputElementRef.value)==null||e.blur())}async toggleInstructionFocus(e){this.instructionElementRef.value&&await this.instructionElementRef.value.animate([{opacity:e?0:1},{opacity:e?1:0}],{duration:100,easing:"ease",fill:"forwards"}).finished}onBoxClick(){!this.value&&!this.instructionHidden&&this.focusInput()}onBlur(){!this.value&&this.instructionHidden&&!this.pasting&&this.focusInstruction()}checkHidden(){this.instructionHidden&&this.focusInput()}async onPasteClick(){this.pasting=!0;const e=await navigator.clipboard.readText();t.SendController.setReceiverAddress(e),this.focusInput()}onInputChange(e){var r;const n=e.target;this.pasting=!1,this.value=(r=e.target)==null?void 0:r.value,n.value&&!this.instructionHidden&&this.focusInput(),t.SendController.setLoading(!0),this.onDebouncedSearch(n.value)}setReceiverAddress(e){t.SendController.setReceiverAddress(e),t.SendController.setReceiverProfileName(void 0),t.SendController.setReceiverProfileImageUrl(void 0),t.SendController.setLoading(!1)}};w.styles=R;k([s.n()],w.prototype,"value",void 0);k([s.r()],w.prototype,"instructionHidden",void 0);k([s.r()],w.prototype,"pasting",void 0);w=k([s.customElement("w3m-input-address")],w);const P=t.i`
  :host {
    position: relative;
    display: inline-block;
  }

  input {
    background: transparent;
    width: 100%;
    height: auto;
    font-family: var(--wui-font-family);
    color: var(--wui-color-fg-100);

    font-feature-settings: 'case' on;
    font-size: 32px;
    font-weight: var(--wui-font-weight-light);
    caret-color: var(--wui-color-accent-100);
    line-height: 130%;
    letter-spacing: -1.28px;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    padding: 0px;
  }

  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input::placeholder {
    color: var(--wui-color-fg-275);
  }
`;var C=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};let f=class extends t.i$1{constructor(){super(...arguments),this.inputElementRef=h.e(),this.disabled=!1,this.value="",this.placeholder="0"}render(){var e;return(e=this.inputElementRef)!=null&&e.value&&this.value&&(this.inputElementRef.value.value=this.value),t.x`<input
      ${h.n(this.inputElementRef)}
      type="text"
      inputmode="decimal"
      pattern="[0-9,.]*"
      placeholder=${this.placeholder}
      ?disabled=${this.disabled}
      autofocus
      value=${this.value??""}
      @input=${this.dispatchInputChangeEvent.bind(this)}
    /> `}dispatchInputChangeEvent(e){var r,o;const n=e.data;if(n&&((r=this.inputElementRef)!=null&&r.value))if(n===","){const i=this.inputElementRef.value.value.replace(",",".");this.inputElementRef.value.value=i,this.value=`${this.value}${i}`}else T.numbersRegex.test(n)||(this.inputElementRef.value.value=this.value.replace(new RegExp(n.replace(T.specialCharactersRegex,"\\$&"),"gu"),""));this.dispatchEvent(new CustomEvent("inputChange",{detail:(o=this.inputElementRef.value)==null?void 0:o.value,bubbles:!0,composed:!0}))}};f.styles=[t.resetStyles,t.elementStyles,P];C([s.n({type:Boolean})],f.prototype,"disabled",void 0);C([s.n({type:String})],f.prototype,"value",void 0);C([s.n({type:String})],f.prototype,"placeholder",void 0);f=C([s.customElement("wui-input-amount")],f);const W=t.i`
  :host {
    width: 100%;
    height: 100px;
    border-radius: var(--wui-border-radius-s);
    border: 1px solid var(--wui-color-gray-glass-002);
    background-color: var(--wui-color-gray-glass-002);
    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
    will-change: background-color;
  }

  :host(:hover) {
    background-color: var(--wui-color-gray-glass-005);
  }

  wui-flex {
    width: 100%;
    height: fit-content;
  }

  wui-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }

  wui-input-amount {
    mask-image: linear-gradient(
      270deg,
      transparent 0px,
      transparent 8px,
      black 24px,
      black 25px,
      black 32px,
      black 100%
    );
  }

  .totalValue {
    width: 100%;
  }
`;var S=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};let g=class extends t.i$1{render(){return t.x` <wui-flex
      flexDirection="column"
      gap="4xs"
      .padding=${["xl","s","l","l"]}
    >
      <wui-flex alignItems="center">
        <wui-input-amount
          @inputChange=${this.onInputChange.bind(this)}
          ?disabled=${!this.token&&!0}
          .value=${this.sendTokenAmount?String(this.sendTokenAmount):""}
        ></wui-input-amount>
        ${this.buttonTemplate()}
      </wui-flex>
      <wui-flex alignItems="center" justifyContent="space-between">
        ${this.sendValueTemplate()}
        <wui-flex alignItems="center" gap="4xs" justifyContent="flex-end">
          ${this.maxAmountTemplate()} ${this.actionTemplate()}
        </wui-flex>
      </wui-flex>
    </wui-flex>`}buttonTemplate(){return this.token?t.x`<wui-token-button
        text=${this.token.symbol}
        imageSrc=${this.token.iconUrl}
        @click=${this.handleSelectButtonClick.bind(this)}
      >
      </wui-token-button>`:t.x`<wui-button
      size="md"
      variant="accent"
      @click=${this.handleSelectButtonClick.bind(this)}
      >Select token</wui-button
    >`}handleSelectButtonClick(){t.RouterController.push("WalletSendSelectToken")}sendValueTemplate(){if(this.token&&this.sendTokenAmount){const n=this.token.price*this.sendTokenAmount;return t.x`<wui-text class="totalValue" variant="small-400" color="fg-200"
        >${n?`$${s.UiHelperUtil.formatNumberToLocalString(n,2)}`:"Incorrect value"}</wui-text
      >`}return null}maxAmountTemplate(){return this.token?this.sendTokenAmount&&this.sendTokenAmount>Number(this.token.quantity.numeric)?t.x` <wui-text variant="small-400" color="error-100">
          ${s.UiHelperUtil.roundNumber(Number(this.token.quantity.numeric),6,5)}
        </wui-text>`:t.x` <wui-text variant="small-400" color="fg-200">
        ${s.UiHelperUtil.roundNumber(Number(this.token.quantity.numeric),6,5)}
      </wui-text>`:null}actionTemplate(){return this.token?this.sendTokenAmount&&this.sendTokenAmount>Number(this.token.quantity.numeric)?t.x`<wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>`:t.x`<wui-link @click=${this.onMaxClick.bind(this)}>Max</wui-link>`:null}onInputChange(e){t.SendController.setTokenAmount(e.detail)}onMaxClick(){if(this.token){const e=t.NumberUtil.bigNumber(this.token.quantity.numeric);t.SendController.setTokenAmount(Number(e.toFixed(20)))}}onBuyClick(){t.RouterController.push("OnRampProviders")}};g.styles=W;S([s.n({type:Object})],g.prototype,"token",void 0);S([s.n({type:Number})],g.prototype,"sendTokenAmount",void 0);g=S([s.customElement("w3m-input-token")],g);const N=t.i`
  :host {
    display: block;
  }

  wui-flex {
    position: relative;
  }

  wui-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--wui-border-radius-xs) !important;
    border: 5px solid var(--wui-color-bg-125);
    background: var(--wui-color-bg-175);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }

  wui-button {
    --local-border-radius: var(--wui-border-radius-xs) !important;
  }

  .inputContainer {
    height: fit-content;
  }
`;var p=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};exports.W3mWalletSendView=class extends t.i$1{constructor(){super(),this.unsubscribe=[],this.token=t.SendController.state.token,this.sendTokenAmount=t.SendController.state.sendTokenAmount,this.receiverAddress=t.SendController.state.receiverAddress,this.receiverProfileName=t.SendController.state.receiverProfileName,this.loading=t.SendController.state.loading,this.message="Preview Send",this.fetchNetworkPrice(),this.fetchBalances(),this.unsubscribe.push(t.SendController.subscribe(e=>{this.token=e.token,this.sendTokenAmount=e.sendTokenAmount,this.receiverAddress=e.receiverAddress,this.receiverProfileName=e.receiverProfileName,this.loading=e.loading}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){return this.getMessage(),t.x` <wui-flex flexDirection="column" .padding=${["0","l","l","l"]}>
      <wui-flex class="inputContainer" gap="xs" flexDirection="column">
        <w3m-input-token
          .token=${this.token}
          .sendTokenAmount=${this.sendTokenAmount}
        ></w3m-input-token>
        <wui-icon-box
          size="inherit"
          backgroundColor="fg-300"
          iconSize="lg"
          iconColor="fg-250"
          background="opaque"
          icon="arrowBottom"
        ></wui-icon-box>
        <w3m-input-address
          .value=${this.receiverProfileName?this.receiverProfileName:this.receiverAddress}
        ></w3m-input-address>
      </wui-flex>
      <wui-flex .margin=${["l","0","0","0"]}>
        <wui-button
          @click=${this.onButtonClick.bind(this)}
          ?disabled=${!this.message.startsWith("Preview Send")}
          size="lg"
          variant="main"
          ?loading=${this.loading}
          fullWidth
        >
          ${this.message}
        </wui-button>
      </wui-flex>
    </wui-flex>`}async fetchBalances(){await t.SendController.fetchTokenBalance(),t.SendController.fetchNetworkBalance()}async fetchNetworkPrice(){await A.SwapController.getNetworkTokenPrice()}onButtonClick(){t.RouterController.push("WalletSendPreview")}getMessage(){var e;this.message="Preview Send",this.receiverAddress&&!t.CoreHelperUtil.isAddress(this.receiverAddress,t.ChainController.state.activeChain)&&(this.message="Invalid Address"),this.receiverAddress||(this.message="Add Address"),this.sendTokenAmount&&this.token&&this.sendTokenAmount>Number(this.token.quantity.numeric)&&(this.message="Insufficient Funds"),this.sendTokenAmount||(this.message="Add Amount"),this.sendTokenAmount&&((e=this.token)!=null&&e.price)&&(this.sendTokenAmount*this.token.price||(this.message="Incorrect Value")),this.token||(this.message="Select Token")}};exports.W3mWalletSendView.styles=N;p([s.r()],exports.W3mWalletSendView.prototype,"token",void 0);p([s.r()],exports.W3mWalletSendView.prototype,"sendTokenAmount",void 0);p([s.r()],exports.W3mWalletSendView.prototype,"receiverAddress",void 0);p([s.r()],exports.W3mWalletSendView.prototype,"receiverProfileName",void 0);p([s.r()],exports.W3mWalletSendView.prototype,"loading",void 0);p([s.r()],exports.W3mWalletSendView.prototype,"message",void 0);exports.W3mWalletSendView=p([s.customElement("w3m-wallet-send-view")],exports.W3mWalletSendView);const E=t.i`
  .contentContainer {
    height: 440px;
    overflow: scroll;
    scrollbar-width: none;
  }

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

  wui-icon-box {
    width: 40px;
    height: 40px;
    border-radius: var(--wui-border-radius-xxs);
  }
`;var x=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};exports.W3mSendSelectTokenView=class extends t.i$1{constructor(){super(),this.unsubscribe=[],this.tokenBalances=t.SendController.state.tokenBalances,this.search="",this.onDebouncedSearch=t.CoreHelperUtil.debounce(e=>{this.search=e}),this.unsubscribe.push(t.SendController.subscribe(e=>{this.tokenBalances=e.tokenBalances}))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){return t.x`
      <wui-flex flexDirection="column">
        ${this.templateSearchInput()} <wui-separator></wui-separator> ${this.templateTokens()}
      </wui-flex>
    `}templateSearchInput(){return t.x`
      <wui-flex gap="xs" padding="s">
        <wui-input-text
          @inputChange=${this.onInputChange.bind(this)}
          class="network-search-input"
          size="sm"
          placeholder="Search token"
          icon="search"
        ></wui-input-text>
      </wui-flex>
    `}templateTokens(){var e,n;return this.tokens=(e=this.tokenBalances)==null?void 0:e.filter(r=>{var o;return r.chainId===((o=t.ChainController.state.activeCaipNetwork)==null?void 0:o.caipNetworkId)}),this.search?this.filteredTokens=(n=this.tokenBalances)==null?void 0:n.filter(r=>r.name.toLowerCase().includes(this.search.toLowerCase())):this.filteredTokens=this.tokens,t.x`
      <wui-flex
        class="contentContainer"
        flexDirection="column"
        .padding=${["0","s","0","s"]}
      >
        <wui-flex justifyContent="flex-start" .padding=${["m","s","s","s"]}>
          <wui-text variant="paragraph-500" color="fg-200">Your tokens</wui-text>
        </wui-flex>
        <wui-flex flexDirection="column" gap="xs">
          ${this.filteredTokens&&this.filteredTokens.length>0?this.filteredTokens.map(r=>t.x`<wui-list-token
                    @click=${this.handleTokenClick.bind(this,r)}
                    ?clickable=${!0}
                    tokenName=${r.name}
                    tokenImageUrl=${r.iconUrl}
                    tokenAmount=${r.quantity.numeric}
                    tokenValue=${r.value}
                    tokenCurrency=${r.symbol}
                  ></wui-list-token>`):t.x`<wui-flex
                .padding=${["4xl","0","0","0"]}
                alignItems="center"
                flexDirection="column"
                gap="l"
              >
                <wui-icon-box
                  icon="coinPlaceholder"
                  size="inherit"
                  iconColor="fg-200"
                  backgroundColor="fg-200"
                  iconSize="lg"
                ></wui-icon-box>
                <wui-flex
                  class="textContent"
                  gap="xs"
                  flexDirection="column"
                  justifyContent="center"
                  flexDirection="column"
                >
                  <wui-text variant="paragraph-500" align="center" color="fg-100"
                    >No tokens found</wui-text
                  >
                  <wui-text variant="small-400" align="center" color="fg-200"
                    >Your tokens will appear here</wui-text
                  >
                </wui-flex>
                <wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>
              </wui-flex>`}
        </wui-flex>
      </wui-flex>
    `}onBuyClick(){t.RouterController.push("OnRampProviders")}onInputChange(e){this.onDebouncedSearch(e.detail)}handleTokenClick(e){t.SendController.setToken(e),t.SendController.setTokenAmount(void 0),t.RouterController.goBack()}};exports.W3mSendSelectTokenView.styles=E;x([s.r()],exports.W3mSendSelectTokenView.prototype,"tokenBalances",void 0);x([s.r()],exports.W3mSendSelectTokenView.prototype,"tokens",void 0);x([s.r()],exports.W3mSendSelectTokenView.prototype,"filteredTokens",void 0);x([s.r()],exports.W3mSendSelectTokenView.prototype,"search",void 0);exports.W3mSendSelectTokenView=x([s.customElement("w3m-wallet-send-select-token-view")],exports.W3mSendSelectTokenView);const I=t.i`
  :host {
    display: flex;
    gap: var(--wui-spacing-xs);
    border-radius: var(--wui-border-radius-3xl);
    border: 1px solid var(--wui-color-gray-glass-002);
    background: var(--wui-color-gray-glass-002);
    padding: var(--wui-spacing-2xs) var(--wui-spacing-xs) var(--wui-spacing-2xs)
      var(--wui-spacing-s);
    align-items: center;
  }

  wui-avatar,
  wui-icon,
  wui-image {
    width: 32px;
    height: 32px;
    border: 1px solid var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-3xl);
    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-002);
  }
`;var b=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};let d=class extends t.i$1{constructor(){super(...arguments),this.text="",this.address="",this.isAddress=!1}render(){return t.x`<wui-text variant="large-500" color="fg-100">${this.text}</wui-text>
      ${this.imageTemplate()}`}imageTemplate(){return this.isAddress?t.x`<wui-avatar address=${this.address} .imageSrc=${this.imageSrc}></wui-avatar>`:this.imageSrc?t.x`<wui-image src=${this.imageSrc}></wui-image>`:t.x`<wui-icon size="inherit" color="fg-200" name="networkPlaceholder"></wui-icon>`}};d.styles=[t.resetStyles,t.elementStyles,I];b([s.n()],d.prototype,"text",void 0);b([s.n()],d.prototype,"address",void 0);b([s.n()],d.prototype,"imageSrc",void 0);b([s.n({type:Boolean})],d.prototype,"isAddress",void 0);d=b([s.customElement("wui-preview-item")],d);const V=t.i`
  :host {
    display: flex;
    column-gap: var(--wui-spacing-s);
    padding: 17px 18px 17px var(--wui-spacing-m);
    width: 100%;
    background-color: var(--wui-color-gray-glass-002);
    border-radius: var(--wui-border-radius-xs);
    color: var(--wui-color-fg-250);
  }

  wui-image {
    width: var(--wui-icon-size-lg);
    height: var(--wui-icon-size-lg);
    border-radius: var(--wui-border-radius-3xl);
  }

  wui-icon {
    width: var(--wui-icon-size-lg);
    height: var(--wui-icon-size-lg);
  }
`;var y=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};let m=class extends t.i$1{constructor(){super(...arguments),this.imageSrc=void 0,this.textTitle="",this.textValue=void 0}render(){return t.x`
      <wui-flex justifyContent="space-between" alignItems="center">
        <wui-text variant="paragraph-500" color=${this.textValue?"fg-200":"fg-100"}>
          ${this.textTitle}
        </wui-text>
        ${this.templateContent()}
      </wui-flex>
    `}templateContent(){return this.imageSrc?t.x`<wui-image src=${this.imageSrc} alt=${this.textTitle}></wui-image>`:this.textValue?t.x` <wui-text variant="paragraph-400" color="fg-100"> ${this.textValue} </wui-text>`:t.x`<wui-icon size="inherit" color="fg-200" name="networkPlaceholder"></wui-icon>`}};m.styles=[t.resetStyles,t.elementStyles,V];y([s.n()],m.prototype,"imageSrc",void 0);y([s.n()],m.prototype,"textTitle",void 0);y([s.n()],m.prototype,"textValue",void 0);m=y([s.customElement("wui-list-content")],m);const j=t.i`
  :host {
    display: flex;
    width: auto;
    flex-direction: column;
    gap: var(--wui-border-radius-1xs);
    border-radius: var(--wui-border-radius-s);
    background: var(--wui-color-gray-glass-002);
    padding: var(--wui-spacing-s) var(--wui-spacing-1xs) var(--wui-spacing-1xs)
      var(--wui-spacing-1xs);
  }

  wui-text {
    padding: 0 var(--wui-spacing-1xs);
  }

  wui-flex {
    margin-top: var(--wui-spacing-1xs);
  }

  .network {
    cursor: pointer;
    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);
    will-change: background-color;
  }

  .network:focus-visible {
    border: 1px solid var(--wui-color-accent-100);
    background-color: var(--wui-color-gray-glass-005);
    -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
    -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
    box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);
  }

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

  .network:active {
    background-color: var(--wui-color-gray-glass-010);
  }
`;var $=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};let v=class extends t.i$1{render(){return t.x` <wui-text variant="small-400" color="fg-200">Details</wui-text>
      <wui-flex flexDirection="column" gap="xxs">
        <wui-list-content
          textTitle="Address"
          textValue=${s.UiHelperUtil.getTruncateString({string:this.receiverAddress??"",charsStart:4,charsEnd:4,truncate:"middle"})}
        >
        </wui-list-content>
        ${this.networkTemplate()}
      </wui-flex>`}networkTemplate(){var e;return(e=this.caipNetwork)!=null&&e.name?t.x` <wui-list-content
        @click=${()=>this.onNetworkClick(this.caipNetwork)}
        class="network"
        textTitle="Network"
        imageSrc=${s.o(t.AssetUtil.getNetworkImage(this.caipNetwork))}
      ></wui-list-content>`:null}onNetworkClick(e){e&&t.RouterController.push("Networks",{network:e})}};v.styles=j;$([s.n()],v.prototype,"receiverAddress",void 0);$([s.n({type:Object})],v.prototype,"caipNetwork",void 0);v=$([s.customElement("w3m-wallet-send-details")],v);const _=t.i`
  wui-avatar,
  wui-image {
    display: ruby;
    width: 32px;
    height: 32px;
    border-radius: var(--wui-border-radius-3xl);
  }

  .sendButton {
    width: 70%;
    --local-width: 100% !important;
    --local-border-radius: var(--wui-border-radius-xs) !important;
  }

  .cancelButton {
    width: 30%;
    --local-width: 100% !important;
    --local-border-radius: var(--wui-border-radius-xs) !important;
  }
`;var c=function(a,e,n,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,n):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,n,r);else for(var u=a.length-1;u>=0;u--)(l=a[u])&&(i=(o<3?l(i):o>3?l(e,n,i):l(e,n))||i);return o>3&&i&&Object.defineProperty(e,n,i),i};exports.W3mWalletSendPreviewView=class extends t.i$1{constructor(){super(),this.unsubscribe=[],this.token=t.SendController.state.token,this.sendTokenAmount=t.SendController.state.sendTokenAmount,this.receiverAddress=t.SendController.state.receiverAddress,this.receiverProfileName=t.SendController.state.receiverProfileName,this.receiverProfileImageUrl=t.SendController.state.receiverProfileImageUrl,this.caipNetwork=t.ChainController.state.activeCaipNetwork,this.loading=t.SendController.state.loading,this.unsubscribe.push(t.SendController.subscribe(e=>{this.token=e.token,this.sendTokenAmount=e.sendTokenAmount,this.receiverAddress=e.receiverAddress,this.receiverProfileName=e.receiverProfileName,this.receiverProfileImageUrl=e.receiverProfileImageUrl,this.loading=e.loading}),t.ChainController.subscribeKey("activeCaipNetwork",e=>this.caipNetwork=e))}disconnectedCallback(){this.unsubscribe.forEach(e=>e())}render(){var e,n;return t.x` <wui-flex flexDirection="column" .padding=${["0","l","l","l"]}>
      <wui-flex gap="xs" flexDirection="column" .padding=${["0","xs","0","xs"]}>
        <wui-flex alignItems="center" justifyContent="space-between">
          <wui-flex flexDirection="column" gap="4xs">
            <wui-text variant="small-400" color="fg-150">Send</wui-text>
            ${this.sendValueTemplate()}
          </wui-flex>
          <wui-preview-item
            text="${this.sendTokenAmount?s.UiHelperUtil.roundNumber(this.sendTokenAmount,6,5):"unknown"} ${(e=this.token)==null?void 0:e.symbol}"
            .imageSrc=${(n=this.token)==null?void 0:n.iconUrl}
          ></wui-preview-item>
        </wui-flex>
        <wui-flex>
          <wui-icon color="fg-200" size="md" name="arrowBottom"></wui-icon>
        </wui-flex>
        <wui-flex alignItems="center" justifyContent="space-between">
          <wui-text variant="small-400" color="fg-150">To</wui-text>
          <wui-preview-item
            text="${this.receiverProfileName?s.UiHelperUtil.getTruncateString({string:this.receiverProfileName,charsStart:20,charsEnd:0,truncate:"end"}):s.UiHelperUtil.getTruncateString({string:this.receiverAddress?this.receiverAddress:"",charsStart:4,charsEnd:4,truncate:"middle"})}"
            address=${this.receiverAddress??""}
            .imageSrc=${this.receiverProfileImageUrl??void 0}
            .isAddress=${!0}
          ></wui-preview-item>
        </wui-flex>
      </wui-flex>
      <wui-flex flexDirection="column" .padding=${["xxl","0","0","0"]}>
        <w3m-wallet-send-details
          .caipNetwork=${this.caipNetwork}
          .receiverAddress=${this.receiverAddress}
        ></w3m-wallet-send-details>
        <wui-flex justifyContent="center" gap="xxs" .padding=${["s","0","0","0"]}>
          <wui-icon size="sm" color="fg-200" name="warningCircle"></wui-icon>
          <wui-text variant="small-400" color="fg-200">Review transaction carefully</wui-text>
        </wui-flex>
        <wui-flex justifyContent="center" gap="s" .padding=${["l","0","0","0"]}>
          <wui-button
            class="cancelButton"
            @click=${this.onCancelClick.bind(this)}
            size="lg"
            variant="neutral"
          >
            Cancel
          </wui-button>
          <wui-button
            class="sendButton"
            @click=${this.onSendClick.bind(this)}
            size="lg"
            variant="main"
            .loading=${this.loading}
          >
            Send
          </wui-button>
        </wui-flex>
      </wui-flex></wui-flex
    >`}sendValueTemplate(){if(this.token&&this.sendTokenAmount){const n=this.token.price*this.sendTokenAmount;return t.x`<wui-text variant="paragraph-400" color="fg-100"
        >$${n.toFixed(2)}</wui-text
      >`}return null}async onSendClick(){var e,n,r;if(!this.sendTokenAmount||!this.receiverAddress){t.SnackController.showError("Please enter a valid amount and receiver address");return}try{await t.SendController.sendToken(),t.SnackController.showSuccess("Transaction started"),t.RouterController.replace("Account")}catch(o){t.SnackController.showError("Failed to send transaction. Please try again."),console.error("SendController:sendToken - failed to send transaction",o);const i=t.ChainController.state.activeChain,l=o instanceof Error?o.message:"Unknown error";t.EventsController.sendEvent({type:"track",event:"SEND_ERROR",properties:{message:l,isSmartAccount:((e=t.AccountController.state.preferredAccountTypes)==null?void 0:e[i])===t.W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,token:((n=this.token)==null?void 0:n.symbol)||"",amount:this.sendTokenAmount,network:((r=t.ChainController.state.activeCaipNetwork)==null?void 0:r.caipNetworkId)||""}})}}onCancelClick(){t.RouterController.goBack()}};exports.W3mWalletSendPreviewView.styles=_;c([s.r()],exports.W3mWalletSendPreviewView.prototype,"token",void 0);c([s.r()],exports.W3mWalletSendPreviewView.prototype,"sendTokenAmount",void 0);c([s.r()],exports.W3mWalletSendPreviewView.prototype,"receiverAddress",void 0);c([s.r()],exports.W3mWalletSendPreviewView.prototype,"receiverProfileName",void 0);c([s.r()],exports.W3mWalletSendPreviewView.prototype,"receiverProfileImageUrl",void 0);c([s.r()],exports.W3mWalletSendPreviewView.prototype,"caipNetwork",void 0);c([s.r()],exports.W3mWalletSendPreviewView.prototype,"loading",void 0);exports.W3mWalletSendPreviewView=c([s.customElement("w3m-wallet-send-preview-view")],exports.W3mWalletSendPreviewView);
//# sourceMappingURL=send-DBCfrPnu.cjs.map