@multiversx/sdk-dapp-liquidity 1.0.12 → 1.0.14

package/send-D-5G7tDL.mjs

@@ -0,0 +1,1204 @@
+import { i, f as i$1, x, c as resetStyles, e as elementStyles } from "./bitcoin-dNBGbS2B.mjs";
+import { n, r, c as customElement, U as UiHelperUtil, o } from "./if-defined-DjC5UMfF.mjs";
+import "./index-DT_mc1hV.mjs";
+import "./index-42Rpweo5.mjs";
+import { e, n as n$1 } from "./ref-CqxfRkBm.mjs";
+import { d as CoreHelperUtil, c as ChainController, C as ConnectionController, s as SendController, R as RouterController, N as NumberUtil, m as AssetUtil, S as SnackController, E as EventsController, g as getPreferredAccountType, W as W3mFrameRpcConstants } from "./react-BWxe90Ar.mjs";
+import { n as numbersRegex, s as specialCharactersRegex } from "./ConstantsUtil-BinYIDR2.mjs";
+import "./index-CcgeRPs2.mjs";
+import { S as SwapController } from "./index-DN4fGDgg.mjs";
+import "./index-xBD0nXoB.mjs";
+import "./index-BuL2FC61.mjs";
+import "./index-CZaV8JgR.mjs";
+import "./index--O5ypTeK.mjs";
+const styles$8 = 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 __decorate$8 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mInputAddress = class W3mInputAddress2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.inputElementRef = e();
+    this.instructionElementRef = e();
+    this.instructionHidden = Boolean(this.value);
+    this.pasting = false;
+    this.onDebouncedSearch = CoreHelperUtil.debounce(async (value) => {
+      if (!value.length) {
+        this.setReceiverAddress("");
+        return;
+      }
+      const activeChain = ChainController.state.activeChain;
+      const isValidAddress = CoreHelperUtil.isAddress(value, activeChain);
+      if (isValidAddress) {
+        this.setReceiverAddress(value);
+        return;
+      }
+      try {
+        const resolvedAddress = await ConnectionController.getEnsAddress(value);
+        if (resolvedAddress) {
+          SendController.setReceiverProfileName(value);
+          SendController.setReceiverAddress(resolvedAddress);
+          const avatar = await ConnectionController.getEnsAvatar(value);
+          SendController.setReceiverProfileImageUrl(avatar || void 0);
+        }
+      } catch (error) {
+        this.setReceiverAddress(value);
+      } finally {
+        SendController.setLoading(false);
+      }
+    });
+  }
+  firstUpdated() {
+    if (this.value) {
+      this.instructionHidden = true;
+    }
+    this.checkHidden();
+  }
+  render() {
+    return x` <wui-flex
+      @click=${this.onBoxClick.bind(this)}
+      flexDirection="column"
+      justifyContent="center"
+      gap="4xs"
+      .padding=${["2xl", "l", "xl", "l"]}
+    >
+      <wui-text
+        ${n$1(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}
+        ${n$1(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 _a;
+    if (this.instructionElementRef.value) {
+      this.instructionHidden = true;
+      await this.toggleInstructionFocus(false);
+      this.instructionElementRef.value.style.pointerEvents = "none";
+      (_a = this.inputElementRef.value) == null ? void 0 : _a.focus();
+      if (this.inputElementRef.value) {
+        this.inputElementRef.value.selectionStart = this.inputElementRef.value.selectionEnd = this.inputElementRef.value.value.length;
+      }
+    }
+  }
+  async focusInstruction() {
+    var _a;
+    if (this.instructionElementRef.value) {
+      this.instructionHidden = false;
+      await this.toggleInstructionFocus(true);
+      this.instructionElementRef.value.style.pointerEvents = "auto";
+      (_a = this.inputElementRef.value) == null ? void 0 : _a.blur();
+    }
+  }
+  async toggleInstructionFocus(focus) {
+    if (this.instructionElementRef.value) {
+      await this.instructionElementRef.value.animate([{ opacity: focus ? 0 : 1 }, { opacity: focus ? 1 : 0 }], {
+        duration: 100,
+        easing: "ease",
+        fill: "forwards"
+      }).finished;
+    }
+  }
+  onBoxClick() {
+    if (!this.value && !this.instructionHidden) {
+      this.focusInput();
+    }
+  }
+  onBlur() {
+    if (!this.value && this.instructionHidden && !this.pasting) {
+      this.focusInstruction();
+    }
+  }
+  checkHidden() {
+    if (this.instructionHidden) {
+      this.focusInput();
+    }
+  }
+  async onPasteClick() {
+    this.pasting = true;
+    const text = await navigator.clipboard.readText();
+    SendController.setReceiverAddress(text);
+    this.focusInput();
+  }
+  onInputChange(e2) {
+    var _a;
+    const element = e2.target;
+    this.pasting = false;
+    this.value = (_a = e2.target) == null ? void 0 : _a.value;
+    if (element.value && !this.instructionHidden) {
+      this.focusInput();
+    }
+    SendController.setLoading(true);
+    this.onDebouncedSearch(element.value);
+  }
+  setReceiverAddress(address) {
+    SendController.setReceiverAddress(address);
+    SendController.setReceiverProfileName(void 0);
+    SendController.setReceiverProfileImageUrl(void 0);
+    SendController.setLoading(false);
+  }
+};
+W3mInputAddress.styles = styles$8;
+__decorate$8([
+  n()
+], W3mInputAddress.prototype, "value", void 0);
+__decorate$8([
+  r()
+], W3mInputAddress.prototype, "instructionHidden", void 0);
+__decorate$8([
+  r()
+], W3mInputAddress.prototype, "pasting", void 0);
+W3mInputAddress = __decorate$8([
+  customElement("w3m-input-address")
+], W3mInputAddress);
+const styles$7 = 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 __decorate$7 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiInputAmount = class WuiInputAmount2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.inputElementRef = e();
+    this.disabled = false;
+    this.value = "";
+    this.placeholder = "0";
+  }
+  render() {
+    var _a;
+    if (((_a = this.inputElementRef) == null ? void 0 : _a.value) && this.value) {
+      this.inputElementRef.value.value = this.value;
+    }
+    return x`<input
+      ${n$1(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(e2) {
+    var _a, _b;
+    const inputChar = e2.data;
+    if (inputChar && ((_a = this.inputElementRef) == null ? void 0 : _a.value)) {
+      if (inputChar === ",") {
+        const inputValue = this.inputElementRef.value.value.replace(",", ".");
+        this.inputElementRef.value.value = inputValue;
+        this.value = `${this.value}${inputValue}`;
+      } else if (!numbersRegex.test(inputChar)) {
+        this.inputElementRef.value.value = this.value.replace(new RegExp(inputChar.replace(specialCharactersRegex, "\\$&"), "gu"), "");
+      }
+    }
+    this.dispatchEvent(new CustomEvent("inputChange", {
+      detail: (_b = this.inputElementRef.value) == null ? void 0 : _b.value,
+      bubbles: true,
+      composed: true
+    }));
+  }
+};
+WuiInputAmount.styles = [resetStyles, elementStyles, styles$7];
+__decorate$7([
+  n({ type: Boolean })
+], WuiInputAmount.prototype, "disabled", void 0);
+__decorate$7([
+  n({ type: String })
+], WuiInputAmount.prototype, "value", void 0);
+__decorate$7([
+  n({ type: String })
+], WuiInputAmount.prototype, "placeholder", void 0);
+WuiInputAmount = __decorate$7([
+  customElement("wui-input-amount")
+], WuiInputAmount);
+const styles$6 = 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 __decorate$6 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mInputToken = class W3mInputToken2 extends i$1 {
+  render() {
+    return 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 && true}
+          .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() {
+    if (this.token) {
+      return x`<wui-token-button
+        text=${this.token.symbol}
+        imageSrc=${this.token.iconUrl}
+        @click=${this.handleSelectButtonClick.bind(this)}
+      >
+      </wui-token-button>`;
+    }
+    return x`<wui-button
+      size="md"
+      variant="accent"
+      @click=${this.handleSelectButtonClick.bind(this)}
+      >Select token</wui-button
+    >`;
+  }
+  handleSelectButtonClick() {
+    RouterController.push("WalletSendSelectToken");
+  }
+  sendValueTemplate() {
+    if (this.token && this.sendTokenAmount) {
+      const price = this.token.price;
+      const totalValue = price * this.sendTokenAmount;
+      return x`<wui-text class="totalValue" variant="small-400" color="fg-200"
+        >${totalValue ? `$${UiHelperUtil.formatNumberToLocalString(totalValue, 2)}` : "Incorrect value"}</wui-text
+      >`;
+    }
+    return null;
+  }
+  maxAmountTemplate() {
+    if (this.token) {
+      if (this.sendTokenAmount && this.sendTokenAmount > Number(this.token.quantity.numeric)) {
+        return x` <wui-text variant="small-400" color="error-100">
+          ${UiHelperUtil.roundNumber(Number(this.token.quantity.numeric), 6, 5)}
+        </wui-text>`;
+      }
+      return x` <wui-text variant="small-400" color="fg-200">
+        ${UiHelperUtil.roundNumber(Number(this.token.quantity.numeric), 6, 5)}
+      </wui-text>`;
+    }
+    return null;
+  }
+  actionTemplate() {
+    if (this.token) {
+      if (this.sendTokenAmount && this.sendTokenAmount > Number(this.token.quantity.numeric)) {
+        return x`<wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>`;
+      }
+      return x`<wui-link @click=${this.onMaxClick.bind(this)}>Max</wui-link>`;
+    }
+    return null;
+  }
+  onInputChange(event) {
+    SendController.setTokenAmount(event.detail);
+  }
+  onMaxClick() {
+    if (this.token) {
+      const maxValue = NumberUtil.bigNumber(this.token.quantity.numeric);
+      SendController.setTokenAmount(Number(maxValue.toFixed(20)));
+    }
+  }
+  onBuyClick() {
+    RouterController.push("OnRampProviders");
+  }
+};
+W3mInputToken.styles = styles$6;
+__decorate$6([
+  n({ type: Object })
+], W3mInputToken.prototype, "token", void 0);
+__decorate$6([
+  n({ type: Number })
+], W3mInputToken.prototype, "sendTokenAmount", void 0);
+W3mInputToken = __decorate$6([
+  customElement("w3m-input-token")
+], W3mInputToken);
+const styles$5 = 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 __decorate$5 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mWalletSendView = class W3mWalletSendView2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.token = SendController.state.token;
+    this.sendTokenAmount = SendController.state.sendTokenAmount;
+    this.receiverAddress = SendController.state.receiverAddress;
+    this.receiverProfileName = SendController.state.receiverProfileName;
+    this.loading = SendController.state.loading;
+    this.message = "Preview Send";
+    this.fetchNetworkPrice();
+    this.fetchBalances();
+    this.unsubscribe.push(...[
+      SendController.subscribe((val) => {
+        this.token = val.token;
+        this.sendTokenAmount = val.sendTokenAmount;
+        this.receiverAddress = val.receiverAddress;
+        this.receiverProfileName = val.receiverProfileName;
+        this.loading = val.loading;
+      })
+    ]);
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    this.getMessage();
+    return 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 SendController.fetchTokenBalance();
+    SendController.fetchNetworkBalance();
+  }
+  async fetchNetworkPrice() {
+    await SwapController.getNetworkTokenPrice();
+  }
+  onButtonClick() {
+    RouterController.push("WalletSendPreview");
+  }
+  getMessage() {
+    var _a;
+    this.message = "Preview Send";
+    if (this.receiverAddress && !CoreHelperUtil.isAddress(this.receiverAddress, ChainController.state.activeChain)) {
+      this.message = "Invalid Address";
+    }
+    if (!this.receiverAddress) {
+      this.message = "Add Address";
+    }
+    if (this.sendTokenAmount && this.token && this.sendTokenAmount > Number(this.token.quantity.numeric)) {
+      this.message = "Insufficient Funds";
+    }
+    if (!this.sendTokenAmount) {
+      this.message = "Add Amount";
+    }
+    if (this.sendTokenAmount && ((_a = this.token) == null ? void 0 : _a.price)) {
+      const value = this.sendTokenAmount * this.token.price;
+      if (!value) {
+        this.message = "Incorrect Value";
+      }
+    }
+    if (!this.token) {
+      this.message = "Select Token";
+    }
+  }
+};
+W3mWalletSendView.styles = styles$5;
+__decorate$5([
+  r()
+], W3mWalletSendView.prototype, "token", void 0);
+__decorate$5([
+  r()
+], W3mWalletSendView.prototype, "sendTokenAmount", void 0);
+__decorate$5([
+  r()
+], W3mWalletSendView.prototype, "receiverAddress", void 0);
+__decorate$5([
+  r()
+], W3mWalletSendView.prototype, "receiverProfileName", void 0);
+__decorate$5([
+  r()
+], W3mWalletSendView.prototype, "loading", void 0);
+__decorate$5([
+  r()
+], W3mWalletSendView.prototype, "message", void 0);
+W3mWalletSendView = __decorate$5([
+  customElement("w3m-wallet-send-view")
+], W3mWalletSendView);
+const styles$4 = 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 __decorate$4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mSendSelectTokenView = class W3mSendSelectTokenView2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.tokenBalances = SendController.state.tokenBalances;
+    this.search = "";
+    this.onDebouncedSearch = CoreHelperUtil.debounce((value) => {
+      this.search = value;
+    });
+    this.unsubscribe.push(...[
+      SendController.subscribe((val) => {
+        this.tokenBalances = val.tokenBalances;
+      })
+    ]);
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    return x`
+      <wui-flex flexDirection="column">
+        ${this.templateSearchInput()} <wui-separator></wui-separator> ${this.templateTokens()}
+      </wui-flex>
+    `;
+  }
+  templateSearchInput() {
+    return 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 _a, _b;
+    this.tokens = (_a = this.tokenBalances) == null ? void 0 : _a.filter((token) => {
+      var _a2;
+      return token.chainId === ((_a2 = ChainController.state.activeCaipNetwork) == null ? void 0 : _a2.caipNetworkId);
+    });
+    if (this.search) {
+      this.filteredTokens = (_b = this.tokenBalances) == null ? void 0 : _b.filter((token) => token.name.toLowerCase().includes(this.search.toLowerCase()));
+    } else {
+      this.filteredTokens = this.tokens;
+    }
+    return 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((token) => x`<wui-list-token
+                    @click=${this.handleTokenClick.bind(this, token)}
+                    ?clickable=${true}
+                    tokenName=${token.name}
+                    tokenImageUrl=${token.iconUrl}
+                    tokenAmount=${token.quantity.numeric}
+                    tokenValue=${token.value}
+                    tokenCurrency=${token.symbol}
+                  ></wui-list-token>`) : 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() {
+    RouterController.push("OnRampProviders");
+  }
+  onInputChange(event) {
+    this.onDebouncedSearch(event.detail);
+  }
+  handleTokenClick(token) {
+    SendController.setToken(token);
+    SendController.setTokenAmount(void 0);
+    RouterController.goBack();
+  }
+};
+W3mSendSelectTokenView.styles = styles$4;
+__decorate$4([
+  r()
+], W3mSendSelectTokenView.prototype, "tokenBalances", void 0);
+__decorate$4([
+  r()
+], W3mSendSelectTokenView.prototype, "tokens", void 0);
+__decorate$4([
+  r()
+], W3mSendSelectTokenView.prototype, "filteredTokens", void 0);
+__decorate$4([
+  r()
+], W3mSendSelectTokenView.prototype, "search", void 0);
+W3mSendSelectTokenView = __decorate$4([
+  customElement("w3m-wallet-send-select-token-view")
+], W3mSendSelectTokenView);
+const styles$3 = 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 __decorate$3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiPreviewItem = class WuiPreviewItem2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.text = "";
+    this.address = "";
+    this.isAddress = false;
+  }
+  render() {
+    return x`<wui-text variant="large-500" color="fg-100">${this.text}</wui-text>
+      ${this.imageTemplate()}`;
+  }
+  imageTemplate() {
+    if (this.isAddress) {
+      return x`<wui-avatar address=${this.address} .imageSrc=${this.imageSrc}></wui-avatar>`;
+    } else if (this.imageSrc) {
+      return x`<wui-image src=${this.imageSrc}></wui-image>`;
+    }
+    return x`<wui-icon size="inherit" color="fg-200" name="networkPlaceholder"></wui-icon>`;
+  }
+};
+WuiPreviewItem.styles = [resetStyles, elementStyles, styles$3];
+__decorate$3([
+  n()
+], WuiPreviewItem.prototype, "text", void 0);
+__decorate$3([
+  n()
+], WuiPreviewItem.prototype, "address", void 0);
+__decorate$3([
+  n()
+], WuiPreviewItem.prototype, "imageSrc", void 0);
+__decorate$3([
+  n({ type: Boolean })
+], WuiPreviewItem.prototype, "isAddress", void 0);
+WuiPreviewItem = __decorate$3([
+  customElement("wui-preview-item")
+], WuiPreviewItem);
+const styles$2 = 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 __decorate$2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let WuiListContent = class WuiListContent2 extends i$1 {
+  constructor() {
+    super(...arguments);
+    this.imageSrc = void 0;
+    this.textTitle = "";
+    this.textValue = void 0;
+  }
+  render() {
+    return 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() {
+    if (this.imageSrc) {
+      return x`<wui-image src=${this.imageSrc} alt=${this.textTitle}></wui-image>`;
+    } else if (this.textValue) {
+      return x` <wui-text variant="paragraph-400" color="fg-100"> ${this.textValue} </wui-text>`;
+    }
+    return x`<wui-icon size="inherit" color="fg-200" name="networkPlaceholder"></wui-icon>`;
+  }
+};
+WuiListContent.styles = [resetStyles, elementStyles, styles$2];
+__decorate$2([
+  n()
+], WuiListContent.prototype, "imageSrc", void 0);
+__decorate$2([
+  n()
+], WuiListContent.prototype, "textTitle", void 0);
+__decorate$2([
+  n()
+], WuiListContent.prototype, "textValue", void 0);
+WuiListContent = __decorate$2([
+  customElement("wui-list-content")
+], WuiListContent);
+const styles$1 = 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 __decorate$1 = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mWalletSendDetails = class W3mWalletSendDetails2 extends i$1 {
+  render() {
+    return x` <wui-text variant="small-400" color="fg-200">Details</wui-text>
+      <wui-flex flexDirection="column" gap="xxs">
+        <wui-list-content
+          textTitle="Address"
+          textValue=${UiHelperUtil.getTruncateString({
+      string: this.receiverAddress ?? "",
+      charsStart: 4,
+      charsEnd: 4,
+      truncate: "middle"
+    })}
+        >
+        </wui-list-content>
+        ${this.networkTemplate()}
+      </wui-flex>`;
+  }
+  networkTemplate() {
+    var _a;
+    if ((_a = this.caipNetwork) == null ? void 0 : _a.name) {
+      return x` <wui-list-content
+        @click=${() => this.onNetworkClick(this.caipNetwork)}
+        class="network"
+        textTitle="Network"
+        imageSrc=${o(AssetUtil.getNetworkImage(this.caipNetwork))}
+      ></wui-list-content>`;
+    }
+    return null;
+  }
+  onNetworkClick(network) {
+    if (network) {
+      RouterController.push("Networks", { network });
+    }
+  }
+};
+W3mWalletSendDetails.styles = styles$1;
+__decorate$1([
+  n()
+], W3mWalletSendDetails.prototype, "receiverAddress", void 0);
+__decorate$1([
+  n({ type: Object })
+], W3mWalletSendDetails.prototype, "caipNetwork", void 0);
+W3mWalletSendDetails = __decorate$1([
+  customElement("w3m-wallet-send-details")
+], W3mWalletSendDetails);
+const styles = 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 __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r2 = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r2 = Reflect.decorate(decorators, target, key, desc);
+  else for (var i2 = decorators.length - 1; i2 >= 0; i2--) if (d = decorators[i2]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
+  return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
+};
+let W3mWalletSendPreviewView = class W3mWalletSendPreviewView2 extends i$1 {
+  constructor() {
+    super();
+    this.unsubscribe = [];
+    this.token = SendController.state.token;
+    this.sendTokenAmount = SendController.state.sendTokenAmount;
+    this.receiverAddress = SendController.state.receiverAddress;
+    this.receiverProfileName = SendController.state.receiverProfileName;
+    this.receiverProfileImageUrl = SendController.state.receiverProfileImageUrl;
+    this.caipNetwork = ChainController.state.activeCaipNetwork;
+    this.loading = SendController.state.loading;
+    this.unsubscribe.push(...[
+      SendController.subscribe((val) => {
+        this.token = val.token;
+        this.sendTokenAmount = val.sendTokenAmount;
+        this.receiverAddress = val.receiverAddress;
+        this.receiverProfileName = val.receiverProfileName;
+        this.receiverProfileImageUrl = val.receiverProfileImageUrl;
+        this.loading = val.loading;
+      }),
+      ChainController.subscribeKey("activeCaipNetwork", (val) => this.caipNetwork = val)
+    ]);
+  }
+  disconnectedCallback() {
+    this.unsubscribe.forEach((unsubscribe) => unsubscribe());
+  }
+  render() {
+    var _a, _b;
+    return 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 ? UiHelperUtil.roundNumber(this.sendTokenAmount, 6, 5) : "unknown"} ${(_a = this.token) == null ? void 0 : _a.symbol}"
+            .imageSrc=${(_b = this.token) == null ? void 0 : _b.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 ? UiHelperUtil.getTruncateString({
+      string: this.receiverProfileName,
+      charsStart: 20,
+      charsEnd: 0,
+      truncate: "end"
+    }) : UiHelperUtil.getTruncateString({
+      string: this.receiverAddress ? this.receiverAddress : "",
+      charsStart: 4,
+      charsEnd: 4,
+      truncate: "middle"
+    })}"
+            address=${this.receiverAddress ?? ""}
+            .imageSrc=${this.receiverProfileImageUrl ?? void 0}
+            .isAddress=${true}
+          ></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 price = this.token.price;
+      const totalValue = price * this.sendTokenAmount;
+      return x`<wui-text variant="paragraph-400" color="fg-100"
+        >$${totalValue.toFixed(2)}</wui-text
+      >`;
+    }
+    return null;
+  }
+  async onSendClick() {
+    var _a, _b;
+    if (!this.sendTokenAmount || !this.receiverAddress) {
+      SnackController.showError("Please enter a valid amount and receiver address");
+      return;
+    }
+    try {
+      await SendController.sendToken();
+      SnackController.showSuccess("Transaction started");
+      RouterController.replace("Account");
+    } catch (error) {
+      SnackController.showError("Failed to send transaction. Please try again.");
+      console.error("SendController:sendToken - failed to send transaction", error);
+      const activeChainNamespace = ChainController.state.activeChain;
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      EventsController.sendEvent({
+        type: "track",
+        event: "SEND_ERROR",
+        properties: {
+          message: errorMessage,
+          isSmartAccount: getPreferredAccountType(activeChainNamespace) === W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,
+          token: ((_a = this.token) == null ? void 0 : _a.symbol) || "",
+          amount: this.sendTokenAmount,
+          network: ((_b = ChainController.state.activeCaipNetwork) == null ? void 0 : _b.caipNetworkId) || ""
+        }
+      });
+    }
+  }
+  onCancelClick() {
+    RouterController.goBack();
+  }
+};
+W3mWalletSendPreviewView.styles = styles;
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "token", void 0);
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "sendTokenAmount", void 0);
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "receiverAddress", void 0);
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "receiverProfileName", void 0);
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "receiverProfileImageUrl", void 0);
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "caipNetwork", void 0);
+__decorate([
+  r()
+], W3mWalletSendPreviewView.prototype, "loading", void 0);
+W3mWalletSendPreviewView = __decorate([
+  customElement("w3m-wallet-send-preview-view")
+], W3mWalletSendPreviewView);
+export {
+  W3mSendSelectTokenView,
+  W3mWalletSendPreviewView,
+  W3mWalletSendView
+};