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

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

{"version":3,"file":"send-DBCfrPnu.cjs","sources":["../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-input-address/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-input-address/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-input-amount/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-input-amount/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-input-token/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-input-token/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-wallet-send-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-wallet-send-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-wallet-send-select-token-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-wallet-send-select-token-view/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-preview-item/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-preview-item/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-list-content/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-list-content/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-wallet-send-details/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-wallet-send-details/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-wallet-send-preview-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-wallet-send-preview-view/index.js"],"sourcesContent":["import { css } from 'lit';\nexport default css `\n  :host {\n    width: 100%;\n    height: 100px;\n    border-radius: var(--wui-border-radius-s);\n    border: 1px solid var(--wui-color-gray-glass-002);\n    background-color: var(--wui-color-gray-glass-002);\n    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);\n    will-change: background-color;\n    position: relative;\n  }\n\n  :host(:hover) {\n    background-color: var(--wui-color-gray-glass-005);\n  }\n\n  wui-flex {\n    width: 100%;\n    height: fit-content;\n  }\n\n  wui-button {\n    display: ruby;\n    color: var(--wui-color-fg-100);\n    margin: 0 var(--wui-spacing-xs);\n  }\n\n  .instruction {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    z-index: 2;\n  }\n\n  .paste {\n    display: inline-flex;\n  }\n\n  textarea {\n    background: transparent;\n    width: 100%;\n    font-family: var(--w3m-font-family);\n    font-size: var(--wui-font-size-medium);\n    font-style: normal;\n    font-weight: var(--wui-font-weight-light);\n    line-height: 130%;\n    letter-spacing: var(--wui-letter-spacing-medium);\n    color: var(--wui-color-fg-100);\n    caret-color: var(--wui-color-accent-100);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n    padding: 0px;\n    border: none;\n    outline: none;\n    appearance: none;\n    resize: none;\n    overflow: hidden;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { ChainController, ConnectionController, CoreHelperUtil, SendController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-button';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon';\nimport '@reown/appkit-ui/wui-text';\nimport styles from './styles.js';\nlet W3mInputAddress = class W3mInputAddress extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.inputElementRef = createRef();\n        this.instructionElementRef = createRef();\n        this.instructionHidden = Boolean(this.value);\n        this.pasting = false;\n        this.onDebouncedSearch = CoreHelperUtil.debounce(async (value) => {\n            if (!value.length) {\n                this.setReceiverAddress('');\n                return;\n            }\n            const activeChain = ChainController.state.activeChain;\n            const isValidAddress = CoreHelperUtil.isAddress(value, activeChain);\n            if (isValidAddress) {\n                this.setReceiverAddress(value);\n                return;\n            }\n            try {\n                const resolvedAddress = await ConnectionController.getEnsAddress(value);\n                if (resolvedAddress) {\n                    SendController.setReceiverProfileName(value);\n                    SendController.setReceiverAddress(resolvedAddress);\n                    const avatar = await ConnectionController.getEnsAvatar(value);\n                    SendController.setReceiverProfileImageUrl(avatar || undefined);\n                }\n            }\n            catch (error) {\n                this.setReceiverAddress(value);\n            }\n            finally {\n                SendController.setLoading(false);\n            }\n        });\n    }\n    firstUpdated() {\n        if (this.value) {\n            this.instructionHidden = true;\n        }\n        this.checkHidden();\n    }\n    render() {\n        return html ` <wui-flex\n      @click=${this.onBoxClick.bind(this)}\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      gap=\"4xs\"\n      .padding=${['2xl', 'l', 'xl', 'l']}\n    >\n      <wui-text\n        ${ref(this.instructionElementRef)}\n        class=\"instruction\"\n        color=\"fg-300\"\n        variant=\"medium-400\"\n      >\n        Type or\n        <wui-button\n          class=\"paste\"\n          size=\"md\"\n          variant=\"neutral\"\n          iconLeft=\"copy\"\n          @click=${this.onPasteClick.bind(this)}\n        >\n          <wui-icon size=\"sm\" color=\"inherit\" slot=\"iconLeft\" name=\"copy\"></wui-icon>\n          Paste\n        </wui-button>\n        address\n      </wui-text>\n      <textarea\n        spellcheck=\"false\"\n        ?disabled=${!this.instructionHidden}\n        ${ref(this.inputElementRef)}\n        @input=${this.onInputChange.bind(this)}\n        @blur=${this.onBlur.bind(this)}\n        .value=${this.value ?? ''}\n        autocomplete=\"off\"\n      >\n${this.value ?? ''}</textarea\n      >\n    </wui-flex>`;\n    }\n    async focusInput() {\n        if (this.instructionElementRef.value) {\n            this.instructionHidden = true;\n            await this.toggleInstructionFocus(false);\n            this.instructionElementRef.value.style.pointerEvents = 'none';\n            this.inputElementRef.value?.focus();\n            if (this.inputElementRef.value) {\n                this.inputElementRef.value.selectionStart = this.inputElementRef.value.selectionEnd =\n                    this.inputElementRef.value.value.length;\n            }\n        }\n    }\n    async focusInstruction() {\n        if (this.instructionElementRef.value) {\n            this.instructionHidden = false;\n            await this.toggleInstructionFocus(true);\n            this.instructionElementRef.value.style.pointerEvents = 'auto';\n            this.inputElementRef.value?.blur();\n        }\n    }\n    async toggleInstructionFocus(focus) {\n        if (this.instructionElementRef.value) {\n            await this.instructionElementRef.value.animate([{ opacity: focus ? 0 : 1 }, { opacity: focus ? 1 : 0 }], {\n                duration: 100,\n                easing: 'ease',\n                fill: 'forwards'\n            }).finished;\n        }\n    }\n    onBoxClick() {\n        if (!this.value && !this.instructionHidden) {\n            this.focusInput();\n        }\n    }\n    onBlur() {\n        if (!this.value && this.instructionHidden && !this.pasting) {\n            this.focusInstruction();\n        }\n    }\n    checkHidden() {\n        if (this.instructionHidden) {\n            this.focusInput();\n        }\n    }\n    async onPasteClick() {\n        this.pasting = true;\n        const text = await navigator.clipboard.readText();\n        SendController.setReceiverAddress(text);\n        this.focusInput();\n    }\n    onInputChange(e) {\n        const element = e.target;\n        this.pasting = false;\n        this.value = e.target?.value;\n        if (element.value && !this.instructionHidden) {\n            this.focusInput();\n        }\n        SendController.setLoading(true);\n        this.onDebouncedSearch(element.value);\n    }\n    setReceiverAddress(address) {\n        SendController.setReceiverAddress(address);\n        SendController.setReceiverProfileName(undefined);\n        SendController.setReceiverProfileImageUrl(undefined);\n        SendController.setLoading(false);\n    }\n};\nW3mInputAddress.styles = styles;\n__decorate([\n    property()\n], W3mInputAddress.prototype, \"value\", void 0);\n__decorate([\n    state()\n], W3mInputAddress.prototype, \"instructionHidden\", void 0);\n__decorate([\n    state()\n], W3mInputAddress.prototype, \"pasting\", void 0);\nW3mInputAddress = __decorate([\n    customElement('w3m-input-address')\n], W3mInputAddress);\nexport { W3mInputAddress };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    position: relative;\n    display: inline-block;\n  }\n\n  input {\n    background: transparent;\n    width: 100%;\n    height: auto;\n    font-family: var(--wui-font-family);\n    color: var(--wui-color-fg-100);\n\n    font-feature-settings: 'case' on;\n    font-size: 32px;\n    font-weight: var(--wui-font-weight-light);\n    caret-color: var(--wui-color-accent-100);\n    line-height: 130%;\n    letter-spacing: -1.28px;\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: textfield;\n    padding: 0px;\n  }\n\n  input::-webkit-outer-spin-button,\n  input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  input::placeholder {\n    color: var(--wui-color-fg-275);\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { createRef, ref } from 'lit/directives/ref.js';\nimport { numbersRegex, specialCharactersRegex } from '../../utils/ConstantsUtil.js';\nimport { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiInputAmount = class WuiInputAmount extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.inputElementRef = createRef();\n        this.disabled = false;\n        this.value = '';\n        this.placeholder = '0';\n    }\n    render() {\n        if (this.inputElementRef?.value && this.value) {\n            this.inputElementRef.value.value = this.value;\n        }\n        return html `<input\n      ${ref(this.inputElementRef)}\n      type=\"text\"\n      inputmode=\"decimal\"\n      pattern=\"[0-9,.]*\"\n      placeholder=${this.placeholder}\n      ?disabled=${this.disabled}\n      autofocus\n      value=${this.value ?? ''}\n      @input=${this.dispatchInputChangeEvent.bind(this)}\n    /> `;\n    }\n    dispatchInputChangeEvent(e) {\n        const inputChar = e.data;\n        if (inputChar && this.inputElementRef?.value) {\n            if (inputChar === ',') {\n                const inputValue = this.inputElementRef.value.value.replace(',', '.');\n                this.inputElementRef.value.value = inputValue;\n                this.value = `${this.value}${inputValue}`;\n            }\n            else if (!numbersRegex.test(inputChar)) {\n                this.inputElementRef.value.value = this.value.replace(new RegExp(inputChar.replace(specialCharactersRegex, '\\\\$&'), 'gu'), '');\n            }\n        }\n        this.dispatchEvent(new CustomEvent('inputChange', {\n            detail: this.inputElementRef.value?.value,\n            bubbles: true,\n            composed: true\n        }));\n    }\n};\nWuiInputAmount.styles = [resetStyles, elementStyles, styles];\n__decorate([\n    property({ type: Boolean })\n], WuiInputAmount.prototype, \"disabled\", void 0);\n__decorate([\n    property({ type: String })\n], WuiInputAmount.prototype, \"value\", void 0);\n__decorate([\n    property({ type: String })\n], WuiInputAmount.prototype, \"placeholder\", void 0);\nWuiInputAmount = __decorate([\n    customElement('wui-input-amount')\n], WuiInputAmount);\nexport { WuiInputAmount };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    width: 100%;\n    height: 100px;\n    border-radius: var(--wui-border-radius-s);\n    border: 1px solid var(--wui-color-gray-glass-002);\n    background-color: var(--wui-color-gray-glass-002);\n    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);\n    will-change: background-color;\n  }\n\n  :host(:hover) {\n    background-color: var(--wui-color-gray-glass-005);\n  }\n\n  wui-flex {\n    width: 100%;\n    height: fit-content;\n  }\n\n  wui-button {\n    width: 100%;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  wui-input-amount {\n    mask-image: linear-gradient(\n      270deg,\n      transparent 0px,\n      transparent 8px,\n      black 24px,\n      black 25px,\n      black 32px,\n      black 100%\n    );\n  }\n\n  .totalValue {\n    width: 100%;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { NumberUtil } from '@reown/appkit-common';\nimport { RouterController, SendController } from '@reown/appkit-controllers';\nimport { UiHelperUtil, customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-button';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-input-amount';\nimport '@reown/appkit-ui/wui-link';\nimport '@reown/appkit-ui/wui-text';\nimport '@reown/appkit-ui/wui-token-button';\nimport styles from './styles.js';\nlet W3mInputToken = class W3mInputToken extends LitElement {\n    render() {\n        return html ` <wui-flex\n      flexDirection=\"column\"\n      gap=\"4xs\"\n      .padding=${['xl', 's', 'l', 'l']}\n    >\n      <wui-flex alignItems=\"center\">\n        <wui-input-amount\n          @inputChange=${this.onInputChange.bind(this)}\n          ?disabled=${!this.token && true}\n          .value=${this.sendTokenAmount ? String(this.sendTokenAmount) : ''}\n        ></wui-input-amount>\n        ${this.buttonTemplate()}\n      </wui-flex>\n      <wui-flex alignItems=\"center\" justifyContent=\"space-between\">\n        ${this.sendValueTemplate()}\n        <wui-flex alignItems=\"center\" gap=\"4xs\" justifyContent=\"flex-end\">\n          ${this.maxAmountTemplate()} ${this.actionTemplate()}\n        </wui-flex>\n      </wui-flex>\n    </wui-flex>`;\n    }\n    buttonTemplate() {\n        if (this.token) {\n            return html `<wui-token-button\n        text=${this.token.symbol}\n        imageSrc=${this.token.iconUrl}\n        @click=${this.handleSelectButtonClick.bind(this)}\n      >\n      </wui-token-button>`;\n        }\n        return html `<wui-button\n      size=\"md\"\n      variant=\"accent\"\n      @click=${this.handleSelectButtonClick.bind(this)}\n      >Select token</wui-button\n    >`;\n    }\n    handleSelectButtonClick() {\n        RouterController.push('WalletSendSelectToken');\n    }\n    sendValueTemplate() {\n        if (this.token && this.sendTokenAmount) {\n            const price = this.token.price;\n            const totalValue = price * this.sendTokenAmount;\n            return html `<wui-text class=\"totalValue\" variant=\"small-400\" color=\"fg-200\"\n        >${totalValue\n                ? `$${UiHelperUtil.formatNumberToLocalString(totalValue, 2)}`\n                : 'Incorrect value'}</wui-text\n      >`;\n        }\n        return null;\n    }\n    maxAmountTemplate() {\n        if (this.token) {\n            if (this.sendTokenAmount && this.sendTokenAmount > Number(this.token.quantity.numeric)) {\n                return html ` <wui-text variant=\"small-400\" color=\"error-100\">\n          ${UiHelperUtil.roundNumber(Number(this.token.quantity.numeric), 6, 5)}\n        </wui-text>`;\n            }\n            return html ` <wui-text variant=\"small-400\" color=\"fg-200\">\n        ${UiHelperUtil.roundNumber(Number(this.token.quantity.numeric), 6, 5)}\n      </wui-text>`;\n        }\n        return null;\n    }\n    actionTemplate() {\n        if (this.token) {\n            if (this.sendTokenAmount && this.sendTokenAmount > Number(this.token.quantity.numeric)) {\n                return html `<wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>`;\n            }\n            return html `<wui-link @click=${this.onMaxClick.bind(this)}>Max</wui-link>`;\n        }\n        return null;\n    }\n    onInputChange(event) {\n        SendController.setTokenAmount(event.detail);\n    }\n    onMaxClick() {\n        if (this.token) {\n            const maxValue = NumberUtil.bigNumber(this.token.quantity.numeric);\n            SendController.setTokenAmount(Number(maxValue.toFixed(20)));\n        }\n    }\n    onBuyClick() {\n        RouterController.push('OnRampProviders');\n    }\n};\nW3mInputToken.styles = styles;\n__decorate([\n    property({ type: Object })\n], W3mInputToken.prototype, \"token\", void 0);\n__decorate([\n    property({ type: Number })\n], W3mInputToken.prototype, \"sendTokenAmount\", void 0);\nW3mInputToken = __decorate([\n    customElement('w3m-input-token')\n], W3mInputToken);\nexport { W3mInputToken };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: block;\n  }\n\n  wui-flex {\n    position: relative;\n  }\n\n  wui-icon-box {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--wui-border-radius-xs) !important;\n    border: 5px solid var(--wui-color-bg-125);\n    background: var(--wui-color-bg-175);\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 3;\n  }\n\n  wui-button {\n    --local-border-radius: var(--wui-border-radius-xs) !important;\n  }\n\n  .inputContainer {\n    height: fit-content;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { ChainController, CoreHelperUtil, RouterController, SendController, SwapController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-button';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon-box';\nimport '../../partials/w3m-input-address/index.js';\nimport '../../partials/w3m-input-token/index.js';\nimport styles from './styles.js';\nlet W3mWalletSendView = class W3mWalletSendView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.token = SendController.state.token;\n        this.sendTokenAmount = SendController.state.sendTokenAmount;\n        this.receiverAddress = SendController.state.receiverAddress;\n        this.receiverProfileName = SendController.state.receiverProfileName;\n        this.loading = SendController.state.loading;\n        this.message = 'Preview Send';\n        this.fetchNetworkPrice();\n        this.fetchBalances();\n        this.unsubscribe.push(...[\n            SendController.subscribe(val => {\n                this.token = val.token;\n                this.sendTokenAmount = val.sendTokenAmount;\n                this.receiverAddress = val.receiverAddress;\n                this.receiverProfileName = val.receiverProfileName;\n                this.loading = val.loading;\n            })\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        this.getMessage();\n        return html ` <wui-flex flexDirection=\"column\" .padding=${['0', 'l', 'l', 'l']}>\n      <wui-flex class=\"inputContainer\" gap=\"xs\" flexDirection=\"column\">\n        <w3m-input-token\n          .token=${this.token}\n          .sendTokenAmount=${this.sendTokenAmount}\n        ></w3m-input-token>\n        <wui-icon-box\n          size=\"inherit\"\n          backgroundColor=\"fg-300\"\n          iconSize=\"lg\"\n          iconColor=\"fg-250\"\n          background=\"opaque\"\n          icon=\"arrowBottom\"\n        ></wui-icon-box>\n        <w3m-input-address\n          .value=${this.receiverProfileName ? this.receiverProfileName : this.receiverAddress}\n        ></w3m-input-address>\n      </wui-flex>\n      <wui-flex .margin=${['l', '0', '0', '0']}>\n        <wui-button\n          @click=${this.onButtonClick.bind(this)}\n          ?disabled=${!this.message.startsWith('Preview Send')}\n          size=\"lg\"\n          variant=\"main\"\n          ?loading=${this.loading}\n          fullWidth\n        >\n          ${this.message}\n        </wui-button>\n      </wui-flex>\n    </wui-flex>`;\n    }\n    async fetchBalances() {\n        await SendController.fetchTokenBalance();\n        SendController.fetchNetworkBalance();\n    }\n    async fetchNetworkPrice() {\n        await SwapController.getNetworkTokenPrice();\n    }\n    onButtonClick() {\n        RouterController.push('WalletSendPreview');\n    }\n    getMessage() {\n        this.message = 'Preview Send';\n        if (this.receiverAddress &&\n            !CoreHelperUtil.isAddress(this.receiverAddress, ChainController.state.activeChain)) {\n            this.message = 'Invalid Address';\n        }\n        if (!this.receiverAddress) {\n            this.message = 'Add Address';\n        }\n        if (this.sendTokenAmount &&\n            this.token &&\n            this.sendTokenAmount > Number(this.token.quantity.numeric)) {\n            this.message = 'Insufficient Funds';\n        }\n        if (!this.sendTokenAmount) {\n            this.message = 'Add Amount';\n        }\n        if (this.sendTokenAmount && this.token?.price) {\n            const value = this.sendTokenAmount * this.token.price;\n            if (!value) {\n                this.message = 'Incorrect Value';\n            }\n        }\n        if (!this.token) {\n            this.message = 'Select Token';\n        }\n    }\n};\nW3mWalletSendView.styles = styles;\n__decorate([\n    state()\n], W3mWalletSendView.prototype, \"token\", void 0);\n__decorate([\n    state()\n], W3mWalletSendView.prototype, \"sendTokenAmount\", void 0);\n__decorate([\n    state()\n], W3mWalletSendView.prototype, \"receiverAddress\", void 0);\n__decorate([\n    state()\n], W3mWalletSendView.prototype, \"receiverProfileName\", void 0);\n__decorate([\n    state()\n], W3mWalletSendView.prototype, \"loading\", void 0);\n__decorate([\n    state()\n], W3mWalletSendView.prototype, \"message\", void 0);\nW3mWalletSendView = __decorate([\n    customElement('w3m-wallet-send-view')\n], W3mWalletSendView);\nexport { W3mWalletSendView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  .contentContainer {\n    height: 440px;\n    overflow: scroll;\n    scrollbar-width: none;\n  }\n\n  .contentContainer::-webkit-scrollbar {\n    display: none;\n  }\n\n  wui-icon-box {\n    width: 40px;\n    height: 40px;\n    border-radius: var(--wui-border-radius-xxs);\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { ChainController, CoreHelperUtil, RouterController, SendController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon';\nimport '@reown/appkit-ui/wui-icon-box';\nimport '@reown/appkit-ui/wui-input-text';\nimport '@reown/appkit-ui/wui-link';\nimport '@reown/appkit-ui/wui-list-token';\nimport '@reown/appkit-ui/wui-separator';\nimport '@reown/appkit-ui/wui-text';\nimport styles from './styles.js';\nlet W3mSendSelectTokenView = class W3mSendSelectTokenView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.tokenBalances = SendController.state.tokenBalances;\n        this.search = '';\n        this.onDebouncedSearch = CoreHelperUtil.debounce((value) => {\n            this.search = value;\n        });\n        this.unsubscribe.push(...[\n            SendController.subscribe(val => {\n                this.tokenBalances = val.tokenBalances;\n            })\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        return html `\n      <wui-flex flexDirection=\"column\">\n        ${this.templateSearchInput()} <wui-separator></wui-separator> ${this.templateTokens()}\n      </wui-flex>\n    `;\n    }\n    templateSearchInput() {\n        return html `\n      <wui-flex gap=\"xs\" padding=\"s\">\n        <wui-input-text\n          @inputChange=${this.onInputChange.bind(this)}\n          class=\"network-search-input\"\n          size=\"sm\"\n          placeholder=\"Search token\"\n          icon=\"search\"\n        ></wui-input-text>\n      </wui-flex>\n    `;\n    }\n    templateTokens() {\n        this.tokens = this.tokenBalances?.filter(token => token.chainId === ChainController.state.activeCaipNetwork?.caipNetworkId);\n        if (this.search) {\n            this.filteredTokens = this.tokenBalances?.filter(token => token.name.toLowerCase().includes(this.search.toLowerCase()));\n        }\n        else {\n            this.filteredTokens = this.tokens;\n        }\n        return html `\n      <wui-flex\n        class=\"contentContainer\"\n        flexDirection=\"column\"\n        .padding=${['0', 's', '0', 's']}\n      >\n        <wui-flex justifyContent=\"flex-start\" .padding=${['m', 's', 's', 's']}>\n          <wui-text variant=\"paragraph-500\" color=\"fg-200\">Your tokens</wui-text>\n        </wui-flex>\n        <wui-flex flexDirection=\"column\" gap=\"xs\">\n          ${this.filteredTokens && this.filteredTokens.length > 0\n            ? this.filteredTokens.map(token => html `<wui-list-token\n                    @click=${this.handleTokenClick.bind(this, token)}\n                    ?clickable=${true}\n                    tokenName=${token.name}\n                    tokenImageUrl=${token.iconUrl}\n                    tokenAmount=${token.quantity.numeric}\n                    tokenValue=${token.value}\n                    tokenCurrency=${token.symbol}\n                  ></wui-list-token>`)\n            : html `<wui-flex\n                .padding=${['4xl', '0', '0', '0']}\n                alignItems=\"center\"\n                flexDirection=\"column\"\n                gap=\"l\"\n              >\n                <wui-icon-box\n                  icon=\"coinPlaceholder\"\n                  size=\"inherit\"\n                  iconColor=\"fg-200\"\n                  backgroundColor=\"fg-200\"\n                  iconSize=\"lg\"\n                ></wui-icon-box>\n                <wui-flex\n                  class=\"textContent\"\n                  gap=\"xs\"\n                  flexDirection=\"column\"\n                  justifyContent=\"center\"\n                  flexDirection=\"column\"\n                >\n                  <wui-text variant=\"paragraph-500\" align=\"center\" color=\"fg-100\"\n                    >No tokens found</wui-text\n                  >\n                  <wui-text variant=\"small-400\" align=\"center\" color=\"fg-200\"\n                    >Your tokens will appear here</wui-text\n                  >\n                </wui-flex>\n                <wui-link @click=${this.onBuyClick.bind(this)}>Buy</wui-link>\n              </wui-flex>`}\n        </wui-flex>\n      </wui-flex>\n    `;\n    }\n    onBuyClick() {\n        RouterController.push('OnRampProviders');\n    }\n    onInputChange(event) {\n        this.onDebouncedSearch(event.detail);\n    }\n    handleTokenClick(token) {\n        SendController.setToken(token);\n        SendController.setTokenAmount(undefined);\n        RouterController.goBack();\n    }\n};\nW3mSendSelectTokenView.styles = styles;\n__decorate([\n    state()\n], W3mSendSelectTokenView.prototype, \"tokenBalances\", void 0);\n__decorate([\n    state()\n], W3mSendSelectTokenView.prototype, \"tokens\", void 0);\n__decorate([\n    state()\n], W3mSendSelectTokenView.prototype, \"filteredTokens\", void 0);\n__decorate([\n    state()\n], W3mSendSelectTokenView.prototype, \"search\", void 0);\nW3mSendSelectTokenView = __decorate([\n    customElement('w3m-wallet-send-select-token-view')\n], W3mSendSelectTokenView);\nexport { W3mSendSelectTokenView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: flex;\n    gap: var(--wui-spacing-xs);\n    border-radius: var(--wui-border-radius-3xl);\n    border: 1px solid var(--wui-color-gray-glass-002);\n    background: var(--wui-color-gray-glass-002);\n    padding: var(--wui-spacing-2xs) var(--wui-spacing-xs) var(--wui-spacing-2xs)\n      var(--wui-spacing-s);\n    align-items: center;\n  }\n\n  wui-avatar,\n  wui-icon,\n  wui-image {\n    width: 32px;\n    height: 32px;\n    border: 1px solid var(--wui-color-gray-glass-002);\n    border-radius: var(--wui-border-radius-3xl);\n    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-002);\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../../components/wui-icon/index.js';\nimport '../../components/wui-image/index.js';\nimport '../../components/wui-text/index.js';\nimport '../../layout/wui-flex/index.js';\nimport { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport '../wui-avatar/index.js';\nimport styles from './styles.js';\nlet WuiPreviewItem = class WuiPreviewItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.text = '';\n        this.address = '';\n        this.isAddress = false;\n    }\n    render() {\n        return html `<wui-text variant=\"large-500\" color=\"fg-100\">${this.text}</wui-text>\n      ${this.imageTemplate()}`;\n    }\n    imageTemplate() {\n        if (this.isAddress) {\n            return html `<wui-avatar address=${this.address} .imageSrc=${this.imageSrc}></wui-avatar>`;\n        }\n        else if (this.imageSrc) {\n            return html `<wui-image src=${this.imageSrc}></wui-image>`;\n        }\n        return html `<wui-icon size=\"inherit\" color=\"fg-200\" name=\"networkPlaceholder\"></wui-icon>`;\n    }\n};\nWuiPreviewItem.styles = [resetStyles, elementStyles, styles];\n__decorate([\n    property()\n], WuiPreviewItem.prototype, \"text\", void 0);\n__decorate([\n    property()\n], WuiPreviewItem.prototype, \"address\", void 0);\n__decorate([\n    property()\n], WuiPreviewItem.prototype, \"imageSrc\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiPreviewItem.prototype, \"isAddress\", void 0);\nWuiPreviewItem = __decorate([\n    customElement('wui-preview-item')\n], WuiPreviewItem);\nexport { WuiPreviewItem };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: flex;\n    column-gap: var(--wui-spacing-s);\n    padding: 17px 18px 17px var(--wui-spacing-m);\n    width: 100%;\n    background-color: var(--wui-color-gray-glass-002);\n    border-radius: var(--wui-border-radius-xs);\n    color: var(--wui-color-fg-250);\n  }\n\n  wui-image {\n    width: var(--wui-icon-size-lg);\n    height: var(--wui-icon-size-lg);\n    border-radius: var(--wui-border-radius-3xl);\n  }\n\n  wui-icon {\n    width: var(--wui-icon-size-lg);\n    height: var(--wui-icon-size-lg);\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../../components/wui-icon/index.js';\nimport '../../components/wui-image/index.js';\nimport '../../components/wui-text/index.js';\nimport '../../layout/wui-flex/index.js';\nimport { elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiListContent = class WuiListContent extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.imageSrc = undefined;\n        this.textTitle = '';\n        this.textValue = undefined;\n    }\n    render() {\n        return html `\n      <wui-flex justifyContent=\"space-between\" alignItems=\"center\">\n        <wui-text variant=\"paragraph-500\" color=${this.textValue ? 'fg-200' : 'fg-100'}>\n          ${this.textTitle}\n        </wui-text>\n        ${this.templateContent()}\n      </wui-flex>\n    `;\n    }\n    templateContent() {\n        if (this.imageSrc) {\n            return html `<wui-image src=${this.imageSrc} alt=${this.textTitle}></wui-image>`;\n        }\n        else if (this.textValue) {\n            return html ` <wui-text variant=\"paragraph-400\" color=\"fg-100\"> ${this.textValue} </wui-text>`;\n        }\n        return html `<wui-icon size=\"inherit\" color=\"fg-200\" name=\"networkPlaceholder\"></wui-icon>`;\n    }\n};\nWuiListContent.styles = [resetStyles, elementStyles, styles];\n__decorate([\n    property()\n], WuiListContent.prototype, \"imageSrc\", void 0);\n__decorate([\n    property()\n], WuiListContent.prototype, \"textTitle\", void 0);\n__decorate([\n    property()\n], WuiListContent.prototype, \"textValue\", void 0);\nWuiListContent = __decorate([\n    customElement('wui-list-content')\n], WuiListContent);\nexport { WuiListContent };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: flex;\n    width: auto;\n    flex-direction: column;\n    gap: var(--wui-border-radius-1xs);\n    border-radius: var(--wui-border-radius-s);\n    background: var(--wui-color-gray-glass-002);\n    padding: var(--wui-spacing-s) var(--wui-spacing-1xs) var(--wui-spacing-1xs)\n      var(--wui-spacing-1xs);\n  }\n\n  wui-text {\n    padding: 0 var(--wui-spacing-1xs);\n  }\n\n  wui-flex {\n    margin-top: var(--wui-spacing-1xs);\n  }\n\n  .network {\n    cursor: pointer;\n    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-lg);\n    will-change: background-color;\n  }\n\n  .network:focus-visible {\n    border: 1px solid var(--wui-color-accent-100);\n    background-color: var(--wui-color-gray-glass-005);\n    -webkit-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);\n    -moz-box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);\n    box-shadow: 0px 0px 0px 4px var(--wui-box-shadow-blue);\n  }\n\n  .network:hover {\n    background-color: var(--wui-color-gray-glass-005);\n  }\n\n  .network:active {\n    background-color: var(--wui-color-gray-glass-010);\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport {} from '@reown/appkit-common';\nimport { AssetUtil, RouterController } from '@reown/appkit-controllers';\nimport { UiHelperUtil, customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-list-content';\nimport '@reown/appkit-ui/wui-text';\nimport styles from './styles.js';\nlet W3mWalletSendDetails = class W3mWalletSendDetails extends LitElement {\n    render() {\n        return html ` <wui-text variant=\"small-400\" color=\"fg-200\">Details</wui-text>\n      <wui-flex flexDirection=\"column\" gap=\"xxs\">\n        <wui-list-content\n          textTitle=\"Address\"\n          textValue=${UiHelperUtil.getTruncateString({\n            string: this.receiverAddress ?? '',\n            charsStart: 4,\n            charsEnd: 4,\n            truncate: 'middle'\n        })}\n        >\n        </wui-list-content>\n        ${this.networkTemplate()}\n      </wui-flex>`;\n    }\n    networkTemplate() {\n        if (this.caipNetwork?.name) {\n            return html ` <wui-list-content\n        @click=${() => this.onNetworkClick(this.caipNetwork)}\n        class=\"network\"\n        textTitle=\"Network\"\n        imageSrc=${ifDefined(AssetUtil.getNetworkImage(this.caipNetwork))}\n      ></wui-list-content>`;\n        }\n        return null;\n    }\n    onNetworkClick(network) {\n        if (network) {\n            RouterController.push('Networks', { network });\n        }\n    }\n};\nW3mWalletSendDetails.styles = styles;\n__decorate([\n    property()\n], W3mWalletSendDetails.prototype, \"receiverAddress\", void 0);\n__decorate([\n    property({ type: Object })\n], W3mWalletSendDetails.prototype, \"caipNetwork\", void 0);\nW3mWalletSendDetails = __decorate([\n    customElement('w3m-wallet-send-details')\n], W3mWalletSendDetails);\nexport { W3mWalletSendDetails };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  wui-avatar,\n  wui-image {\n    display: ruby;\n    width: 32px;\n    height: 32px;\n    border-radius: var(--wui-border-radius-3xl);\n  }\n\n  .sendButton {\n    width: 70%;\n    --local-width: 100% !important;\n    --local-border-radius: var(--wui-border-radius-xs) !important;\n  }\n\n  .cancelButton {\n    width: 30%;\n    --local-width: 100% !important;\n    --local-border-radius: var(--wui-border-radius-xs) !important;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { AccountController, ChainController, EventsController, RouterController, SendController, SnackController } from '@reown/appkit-controllers';\nimport { UiHelperUtil, customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-button';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon';\nimport '@reown/appkit-ui/wui-preview-item';\nimport '@reown/appkit-ui/wui-text';\nimport { W3mFrameRpcConstants } from '@reown/appkit-wallet/utils';\nimport '../../partials/w3m-wallet-send-details/index.js';\nimport styles from './styles.js';\nlet W3mWalletSendPreviewView = class W3mWalletSendPreviewView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.token = SendController.state.token;\n        this.sendTokenAmount = SendController.state.sendTokenAmount;\n        this.receiverAddress = SendController.state.receiverAddress;\n        this.receiverProfileName = SendController.state.receiverProfileName;\n        this.receiverProfileImageUrl = SendController.state.receiverProfileImageUrl;\n        this.caipNetwork = ChainController.state.activeCaipNetwork;\n        this.loading = SendController.state.loading;\n        this.unsubscribe.push(...[\n            SendController.subscribe(val => {\n                this.token = val.token;\n                this.sendTokenAmount = val.sendTokenAmount;\n                this.receiverAddress = val.receiverAddress;\n                this.receiverProfileName = val.receiverProfileName;\n                this.receiverProfileImageUrl = val.receiverProfileImageUrl;\n                this.loading = val.loading;\n            }),\n            ChainController.subscribeKey('activeCaipNetwork', val => (this.caipNetwork = val))\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        return html ` <wui-flex flexDirection=\"column\" .padding=${['0', 'l', 'l', 'l']}>\n      <wui-flex gap=\"xs\" flexDirection=\"column\" .padding=${['0', 'xs', '0', 'xs']}>\n        <wui-flex alignItems=\"center\" justifyContent=\"space-between\">\n          <wui-flex flexDirection=\"column\" gap=\"4xs\">\n            <wui-text variant=\"small-400\" color=\"fg-150\">Send</wui-text>\n            ${this.sendValueTemplate()}\n          </wui-flex>\n          <wui-preview-item\n            text=\"${this.sendTokenAmount\n            ? UiHelperUtil.roundNumber(this.sendTokenAmount, 6, 5)\n            : 'unknown'} ${this.token?.symbol}\"\n            .imageSrc=${this.token?.iconUrl}\n          ></wui-preview-item>\n        </wui-flex>\n        <wui-flex>\n          <wui-icon color=\"fg-200\" size=\"md\" name=\"arrowBottom\"></wui-icon>\n        </wui-flex>\n        <wui-flex alignItems=\"center\" justifyContent=\"space-between\">\n          <wui-text variant=\"small-400\" color=\"fg-150\">To</wui-text>\n          <wui-preview-item\n            text=\"${this.receiverProfileName\n            ? UiHelperUtil.getTruncateString({\n                string: this.receiverProfileName,\n                charsStart: 20,\n                charsEnd: 0,\n                truncate: 'end'\n            })\n            : UiHelperUtil.getTruncateString({\n                string: this.receiverAddress ? this.receiverAddress : '',\n                charsStart: 4,\n                charsEnd: 4,\n                truncate: 'middle'\n            })}\"\n            address=${this.receiverAddress ?? ''}\n            .imageSrc=${this.receiverProfileImageUrl ?? undefined}\n            .isAddress=${true}\n          ></wui-preview-item>\n        </wui-flex>\n      </wui-flex>\n      <wui-flex flexDirection=\"column\" .padding=${['xxl', '0', '0', '0']}>\n        <w3m-wallet-send-details\n          .caipNetwork=${this.caipNetwork}\n          .receiverAddress=${this.receiverAddress}\n        ></w3m-wallet-send-details>\n        <wui-flex justifyContent=\"center\" gap=\"xxs\" .padding=${['s', '0', '0', '0']}>\n          <wui-icon size=\"sm\" color=\"fg-200\" name=\"warningCircle\"></wui-icon>\n          <wui-text variant=\"small-400\" color=\"fg-200\">Review transaction carefully</wui-text>\n        </wui-flex>\n        <wui-flex justifyContent=\"center\" gap=\"s\" .padding=${['l', '0', '0', '0']}>\n          <wui-button\n            class=\"cancelButton\"\n            @click=${this.onCancelClick.bind(this)}\n            size=\"lg\"\n            variant=\"neutral\"\n          >\n            Cancel\n          </wui-button>\n          <wui-button\n            class=\"sendButton\"\n            @click=${this.onSendClick.bind(this)}\n            size=\"lg\"\n            variant=\"main\"\n            .loading=${this.loading}\n          >\n            Send\n          </wui-button>\n        </wui-flex>\n      </wui-flex></wui-flex\n    >`;\n    }\n    sendValueTemplate() {\n        if (this.token && this.sendTokenAmount) {\n            const price = this.token.price;\n            const totalValue = price * this.sendTokenAmount;\n            return html `<wui-text variant=\"paragraph-400\" color=\"fg-100\"\n        >$${totalValue.toFixed(2)}</wui-text\n      >`;\n        }\n        return null;\n    }\n    async onSendClick() {\n        if (!this.sendTokenAmount || !this.receiverAddress) {\n            SnackController.showError('Please enter a valid amount and receiver address');\n            return;\n        }\n        try {\n            await SendController.sendToken();\n            SnackController.showSuccess('Transaction started');\n            RouterController.replace('Account');\n        }\n        catch (error) {\n            SnackController.showError('Failed to send transaction. Please try again.');\n            console.error('SendController:sendToken - failed to send transaction', error);\n            const activeChainNamespace = ChainController.state.activeChain;\n            const errorMessage = error instanceof Error ? error.message : 'Unknown error';\n            EventsController.sendEvent({\n                type: 'track',\n                event: 'SEND_ERROR',\n                properties: {\n                    message: errorMessage,\n                    isSmartAccount: AccountController.state.preferredAccountTypes?.[activeChainNamespace] ===\n                        W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT,\n                    token: this.token?.symbol || '',\n                    amount: this.sendTokenAmount,\n                    network: ChainController.state.activeCaipNetwork?.caipNetworkId || ''\n                }\n            });\n        }\n    }\n    onCancelClick() {\n        RouterController.goBack();\n    }\n};\nW3mWalletSendPreviewView.styles = styles;\n__decorate([\n    state()\n], W3mWalletSendPreviewView.prototype, \"token\", void 0);\n__decorate([\n    state()\n], W3mWalletSendPreviewView.prototype, \"sendTokenAmount\", void 0);\n__decorate([\n    state()\n], W3mWalletSendPreviewView.prototype, \"receiverAddress\", void 0);