@safe-stars/components/dist/swaps-B_Wi8Xev.cjs.map

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

{"version":3,"file":"swaps-B_Wi8Xev.cjs","sources":["../node_modules/@reown/appkit-common/dist/esm/src/utils/InputUtil.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-swap-details/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-swap-details/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-swap-input-skeleton/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-swap-input-skeleton/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-swap-input/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-swap-input/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-swap-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-swap-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-swap-preview-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-swap-preview-view/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-token-list-item/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-token-list-item/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-swap-select-token-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-swap-select-token-view/index.js"],"sourcesContent":["export const InputUtil = {\n    numericInputKeyDown(event, currentValue, onChange) {\n        const allowedKeys = [\n            'Backspace',\n            'Meta',\n            'Ctrl',\n            'a',\n            'A',\n            'c',\n            'C',\n            'x',\n            'X',\n            'v',\n            'V',\n            'ArrowLeft',\n            'ArrowRight',\n            'Tab'\n        ];\n        const controlPressed = event.metaKey || event.ctrlKey;\n        const eventKey = event.key;\n        const lowercaseEventKey = eventKey.toLocaleLowerCase();\n        const selectAll = lowercaseEventKey === 'a';\n        const copyKey = lowercaseEventKey === 'c';\n        const pasteKey = lowercaseEventKey === 'v';\n        const cutKey = lowercaseEventKey === 'x';\n        const isComma = eventKey === ',';\n        const isDot = eventKey === '.';\n        const isNumericKey = eventKey >= '0' && eventKey <= '9';\n        if (!controlPressed && (selectAll || copyKey || pasteKey || cutKey)) {\n            event.preventDefault();\n        }\n        if (currentValue === '0' && !isComma && !isDot && eventKey === '0') {\n            event.preventDefault();\n        }\n        if (currentValue === '0' && isNumericKey) {\n            onChange(eventKey);\n            event.preventDefault();\n        }\n        if (isComma || isDot) {\n            if (!currentValue) {\n                onChange('0.');\n                event.preventDefault();\n            }\n            if (currentValue?.includes('.') || currentValue?.includes(',')) {\n                event.preventDefault();\n            }\n        }\n        if (!isNumericKey && !allowedKeys.includes(eventKey) && !isDot && !isComma) {\n            event.preventDefault();\n        }\n    }\n};\n//# sourceMappingURL=InputUtil.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    width: 100%;\n  }\n\n  .details-container > wui-flex {\n    background: var(--wui-color-gray-glass-002);\n    border-radius: var(--wui-border-radius-xxs);\n    width: 100%;\n  }\n\n  .details-container > wui-flex > button {\n    border: none;\n    background: none;\n    padding: var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-xxs);\n    cursor: pointer;\n  }\n\n  .details-content-container {\n    padding: var(--wui-spacing-1xs);\n    padding-top: 0px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .details-content-container > wui-flex {\n    width: 100%;\n  }\n\n  .details-row {\n    width: 100%;\n    padding: var(--wui-spacing-s);\n    padding-left: var(--wui-spacing-s);\n    padding-right: var(--wui-spacing-1xs);\n    border-radius: calc(var(--wui-border-radius-5xs) + var(--wui-border-radius-4xs));\n    background: var(--wui-color-gray-glass-002);\n  }\n\n  .details-row-title {\n    white-space: nowrap;\n  }\n\n  .details-row.provider-free-row {\n    padding-right: var(--wui-spacing-xs);\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 { NumberUtil } from '@reown/appkit-common';\nimport { ChainController, ConstantsUtil, SwapController } from '@reown/appkit-controllers';\nimport { UiHelperUtil, customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon';\nimport '@reown/appkit-ui/wui-text';\nimport '../w3m-tooltip-trigger/index.js';\nimport '../w3m-tooltip/index.js';\nimport styles from './styles.js';\nconst slippageRate = ConstantsUtil.CONVERT_SLIPPAGE_TOLERANCE;\nlet WuiSwapDetails = class WuiSwapDetails extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.networkName = ChainController.state.activeCaipNetwork?.name;\n        this.detailsOpen = false;\n        this.sourceToken = SwapController.state.sourceToken;\n        this.toToken = SwapController.state.toToken;\n        this.toTokenAmount = SwapController.state.toTokenAmount;\n        this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;\n        this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;\n        this.priceImpact = SwapController.state.priceImpact;\n        this.maxSlippage = SwapController.state.maxSlippage;\n        this.networkTokenSymbol = SwapController.state.networkTokenSymbol;\n        this.inputError = SwapController.state.inputError;\n        this.unsubscribe.push(...[\n            SwapController.subscribe(newState => {\n                this.sourceToken = newState.sourceToken;\n                this.toToken = newState.toToken;\n                this.toTokenAmount = newState.toTokenAmount;\n                this.priceImpact = newState.priceImpact;\n                this.maxSlippage = newState.maxSlippage;\n                this.sourceTokenPriceInUSD = newState.sourceTokenPriceInUSD;\n                this.toTokenPriceInUSD = newState.toTokenPriceInUSD;\n                this.inputError = newState.inputError;\n            })\n        ]);\n    }\n    render() {\n        const minReceivedAmount = this.toTokenAmount && this.maxSlippage\n            ? NumberUtil.bigNumber(this.toTokenAmount).minus(this.maxSlippage).toString()\n            : null;\n        if (!this.sourceToken || !this.toToken || this.inputError) {\n            return null;\n        }\n        const toTokenSwappedAmount = this.sourceTokenPriceInUSD && this.toTokenPriceInUSD\n            ? (1 / this.toTokenPriceInUSD) * this.sourceTokenPriceInUSD\n            : 0;\n        return html `\n      <wui-flex flexDirection=\"column\" alignItems=\"center\" gap=\"1xs\" class=\"details-container\">\n        <wui-flex flexDirection=\"column\">\n          <button @click=${this.toggleDetails.bind(this)}>\n            <wui-flex justifyContent=\"space-between\" .padding=${['0', 'xs', '0', 'xs']}>\n              <wui-flex justifyContent=\"flex-start\" flexGrow=\"1\" gap=\"xs\">\n                <wui-text variant=\"small-400\" color=\"fg-100\">\n                  1 ${this.sourceToken.symbol} =\n                  ${UiHelperUtil.formatNumberToLocalString(toTokenSwappedAmount, 3)}\n                  ${this.toToken.symbol}\n                </wui-text>\n                <wui-text variant=\"small-400\" color=\"fg-200\">\n                  $${UiHelperUtil.formatNumberToLocalString(this.sourceTokenPriceInUSD)}\n                </wui-text>\n              </wui-flex>\n              <wui-icon name=\"chevronBottom\"></wui-icon>\n            </wui-flex>\n          </button>\n          ${this.detailsOpen\n            ? html `\n                <wui-flex flexDirection=\"column\" gap=\"xs\" class=\"details-content-container\">\n                  ${this.priceImpact\n                ? html ` <wui-flex flexDirection=\"column\" gap=\"xs\">\n                        <wui-flex\n                          justifyContent=\"space-between\"\n                          alignItems=\"center\"\n                          class=\"details-row\"\n                        >\n                          <wui-flex alignItems=\"center\" gap=\"xs\">\n                            <wui-text class=\"details-row-title\" variant=\"small-400\" color=\"fg-150\">\n                              Price impact\n                            </wui-text>\n                            <w3m-tooltip-trigger\n                              text=\"Price impact reflects the change in market price due to your trade\"\n                            >\n                              <wui-icon size=\"xs\" color=\"fg-250\" name=\"infoCircle\"></wui-icon>\n                            </w3m-tooltip-trigger>\n                          </wui-flex>\n                          <wui-flex>\n                            <wui-text variant=\"small-400\" color=\"fg-200\">\n                              ${UiHelperUtil.formatNumberToLocalString(this.priceImpact, 3)}%\n                            </wui-text>\n                          </wui-flex>\n                        </wui-flex>\n                      </wui-flex>`\n                : null}\n                  ${this.maxSlippage && this.sourceToken.symbol\n                ? html `<wui-flex flexDirection=\"column\" gap=\"xs\">\n                        <wui-flex\n                          justifyContent=\"space-between\"\n                          alignItems=\"center\"\n                          class=\"details-row\"\n                        >\n                          <wui-flex alignItems=\"center\" gap=\"xs\">\n                            <wui-text class=\"details-row-title\" variant=\"small-400\" color=\"fg-150\">\n                              Max. slippage\n                            </wui-text>\n                            <w3m-tooltip-trigger\n                              text=${`Max slippage sets the minimum amount you must receive for the transaction to proceed. ${minReceivedAmount\n                    ? `Transaction will be reversed if you receive less than ${UiHelperUtil.formatNumberToLocalString(minReceivedAmount, 6)} ${this.toToken.symbol} due to price changes.`\n                    : ''}`}\n                            >\n                              <wui-icon size=\"xs\" color=\"fg-250\" name=\"infoCircle\"></wui-icon>\n                            </w3m-tooltip-trigger>\n                          </wui-flex>\n                          <wui-flex>\n                            <wui-text variant=\"small-400\" color=\"fg-200\">\n                              ${UiHelperUtil.formatNumberToLocalString(this.maxSlippage, 6)}\n                              ${this.toToken.symbol} ${slippageRate}%\n                            </wui-text>\n                          </wui-flex>\n                        </wui-flex>\n                      </wui-flex>`\n                : null}\n                  <wui-flex flexDirection=\"column\" gap=\"xs\">\n                    <wui-flex\n                      justifyContent=\"space-between\"\n                      alignItems=\"center\"\n                      class=\"details-row provider-free-row\"\n                    >\n                      <wui-flex alignItems=\"center\" gap=\"xs\">\n                        <wui-text class=\"details-row-title\" variant=\"small-400\" color=\"fg-150\">\n                          Provider fee\n                        </wui-text>\n                      </wui-flex>\n                      <wui-flex>\n                        <wui-text variant=\"small-400\" color=\"fg-200\">0.85%</wui-text>\n                      </wui-flex>\n                    </wui-flex>\n                  </wui-flex>\n                </wui-flex>\n              `\n            : null}\n        </wui-flex>\n      </wui-flex>\n    `;\n    }\n    toggleDetails() {\n        this.detailsOpen = !this.detailsOpen;\n    }\n};\nWuiSwapDetails.styles = [styles];\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"networkName\", void 0);\n__decorate([\n    property()\n], WuiSwapDetails.prototype, \"detailsOpen\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"sourceToken\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"toToken\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"toTokenAmount\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"sourceTokenPriceInUSD\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"toTokenPriceInUSD\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"priceImpact\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"maxSlippage\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"networkTokenSymbol\", void 0);\n__decorate([\n    state()\n], WuiSwapDetails.prototype, \"inputError\", void 0);\nWuiSwapDetails = __decorate([\n    customElement('w3m-swap-details')\n], WuiSwapDetails);\nexport { WuiSwapDetails };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    width: 100%;\n  }\n\n  :host > wui-flex {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    border-radius: var(--wui-border-radius-s);\n    padding: var(--wui-spacing-xl);\n    padding-right: var(--wui-spacing-s);\n    background-color: var(--wui-color-gray-glass-002);\n    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);\n    width: 100%;\n    height: 100px;\n    box-sizing: border-box;\n    position: relative;\n  }\n\n  wui-shimmer.market-value {\n    opacity: 0;\n  }\n\n  :host > wui-flex > svg.input_mask {\n    position: absolute;\n    inset: 0;\n    z-index: 5;\n  }\n\n  :host wui-flex .input_mask__border,\n  :host wui-flex .input_mask__background {\n    transition: fill var(--wui-duration-md) var(--wui-ease-out-power-1);\n    will-change: fill;\n  }\n\n  :host wui-flex .input_mask__border {\n    fill: var(--wui-color-gray-glass-020);\n  }\n\n  :host wui-flex .input_mask__background {\n    fill: 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 {} from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-shimmer';\nimport styles from './styles.js';\nlet W3mSwapInputSkeleton = class W3mSwapInputSkeleton extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.target = 'sourceToken';\n    }\n    render() {\n        return html `\n      <wui-flex class justifyContent=\"space-between\">\n        <wui-flex\n          flex=\"1\"\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          justifyContent=\"center\"\n          class=\"swap-input\"\n          gap=\"xxs\"\n        >\n          <wui-shimmer width=\"80px\" height=\"40px\" borderRadius=\"xxs\" variant=\"light\"></wui-shimmer>\n        </wui-flex>\n        ${this.templateTokenSelectButton()}\n      </wui-flex>\n    `;\n    }\n    templateTokenSelectButton() {\n        return html `\n      <wui-flex\n        class=\"swap-token-button\"\n        flexDirection=\"column\"\n        alignItems=\"flex-end\"\n        justifyContent=\"center\"\n        gap=\"xxs\"\n      >\n        <wui-shimmer width=\"80px\" height=\"40px\" borderRadius=\"3xl\" variant=\"light\"></wui-shimmer>\n      </wui-flex>\n    `;\n    }\n};\nW3mSwapInputSkeleton.styles = [styles];\n__decorate([\n    property()\n], W3mSwapInputSkeleton.prototype, \"target\", void 0);\nW3mSwapInputSkeleton = __decorate([\n    customElement('w3m-swap-input-skeleton')\n], W3mSwapInputSkeleton);\nexport { W3mSwapInputSkeleton };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host > wui-flex {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    border-radius: var(--wui-border-radius-s);\n    background-color: var(--wui-color-gray-glass-002);\n    padding: var(--wui-spacing-xl);\n    padding-right: var(--wui-spacing-s);\n    width: 100%;\n    height: 100px;\n    box-sizing: border-box;\n    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-002);\n    position: relative;\n    transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-lg);\n    will-change: background-color;\n  }\n\n  :host wui-flex.focus {\n    box-shadow: inset 0px 0px 0px 1px var(--wui-color-gray-glass-005);\n  }\n\n  :host > wui-flex .swap-input,\n  :host > wui-flex .swap-token-button {\n    z-index: 10;\n  }\n\n  :host > wui-flex .swap-input {\n    -webkit-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    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  :host > wui-flex .swap-input input {\n    background: none;\n    border: none;\n    height: 42px;\n    width: 100%;\n    font-size: 32px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 130%;\n    letter-spacing: -1.28px;\n    outline: none;\n    caret-color: var(--wui-color-accent-100);\n    color: var(--wui-color-fg-100);\n    padding: 0px;\n  }\n\n  :host > wui-flex .swap-input input:focus-visible {\n    outline: none;\n  }\n\n  :host > wui-flex .swap-input input::-webkit-outer-spin-button,\n  :host > wui-flex .swap-input input::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  .max-value-button {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--wui-color-gray-glass-020);\n    padding-left: 0px;\n  }\n\n  .market-value {\n    min-height: 18px;\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 { InputUtil, NumberUtil } from '@reown/appkit-common';\nimport { EventsController, RouterController } 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-text';\nimport '@reown/appkit-ui/wui-token-button';\nimport styles from './styles.js';\nconst MINIMUM_USD_VALUE_TO_CONVERT = 0.00005;\nlet W3mSwapInput = class W3mSwapInput extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.focused = false;\n        this.price = 0;\n        this.target = 'sourceToken';\n        this.onSetAmount = null;\n        this.onSetMaxValue = null;\n    }\n    render() {\n        const marketValue = this.marketValue || '0';\n        const isMarketValueGreaterThanZero = NumberUtil.bigNumber(marketValue).gt('0');\n        return html `\n      <wui-flex class=\"${this.focused ? 'focus' : ''}\" justifyContent=\"space-between\">\n        <wui-flex\n          flex=\"1\"\n          flexDirection=\"column\"\n          alignItems=\"flex-start\"\n          justifyContent=\"center\"\n          class=\"swap-input\"\n        >\n          <input\n            data-testid=\"swap-input-${this.target}\"\n            @focusin=${() => this.onFocusChange(true)}\n            @focusout=${() => this.onFocusChange(false)}\n            ?disabled=${this.disabled}\n            .value=${this.value}\n            @input=${this.dispatchInputChangeEvent}\n            @keydown=${this.handleKeydown}\n            placeholder=\"0\"\n            type=\"text\"\n            inputmode=\"decimal\"\n          />\n          <wui-text class=\"market-value\" variant=\"small-400\" color=\"fg-200\">\n            ${isMarketValueGreaterThanZero\n            ? `$${UiHelperUtil.formatNumberToLocalString(this.marketValue, 2)}`\n            : null}\n          </wui-text>\n        </wui-flex>\n        ${this.templateTokenSelectButton()}\n      </wui-flex>\n    `;\n    }\n    handleKeydown(event) {\n        return InputUtil.numericInputKeyDown(event, this.value, (value) => this.onSetAmount?.(this.target, value));\n    }\n    dispatchInputChangeEvent(event) {\n        if (!this.onSetAmount) {\n            return;\n        }\n        const value = event.target.value.replace(/[^0-9.]/gu, '');\n        if (value === ',' || value === '.') {\n            this.onSetAmount(this.target, '0.');\n        }\n        else if (value.endsWith(',')) {\n            this.onSetAmount(this.target, value.replace(',', '.'));\n        }\n        else {\n            this.onSetAmount(this.target, value);\n        }\n    }\n    setMaxValueToInput() {\n        this.onSetMaxValue?.(this.target, this.balance);\n    }\n    templateTokenSelectButton() {\n        if (!this.token) {\n            return html ` <wui-button\n        data-testid=\"swap-select-token-button-${this.target}\"\n        class=\"swap-token-button\"\n        size=\"md\"\n        variant=\"accent\"\n        @click=${this.onSelectToken.bind(this)}\n      >\n        Select token\n      </wui-button>`;\n        }\n        return html `\n      <wui-flex\n        class=\"swap-token-button\"\n        flexDirection=\"column\"\n        alignItems=\"flex-end\"\n        justifyContent=\"center\"\n        gap=\"xxs\"\n      >\n        <wui-token-button\n          data-testid=\"swap-input-token-${this.target}\"\n          text=${this.token.symbol}\n          imageSrc=${this.token.logoUri}\n          @click=${this.onSelectToken.bind(this)}\n        >\n        </wui-token-button>\n        <wui-flex alignItems=\"center\" gap=\"xxs\"> ${this.tokenBalanceTemplate()} </wui-flex>\n      </wui-flex>\n    `;\n    }\n    tokenBalanceTemplate() {\n        const balanceValueInUSD = NumberUtil.multiply(this.balance, this.price);\n        const haveBalance = balanceValueInUSD\n            ? balanceValueInUSD?.gt(MINIMUM_USD_VALUE_TO_CONVERT)\n            : false;\n        return html `\n      ${haveBalance\n            ? html `<wui-text variant=\"small-400\" color=\"fg-200\">\n            ${UiHelperUtil.formatNumberToLocalString(this.balance, 2)}\n          </wui-text>`\n            : null}\n      ${this.target === 'sourceToken' ? this.tokenActionButtonTemplate(haveBalance) : null}\n    `;\n    }\n    tokenActionButtonTemplate(haveBalance) {\n        if (haveBalance) {\n            return html ` <button class=\"max-value-button\" @click=${this.setMaxValueToInput.bind(this)}>\n        <wui-text color=\"accent-100\" variant=\"small-600\">Max</wui-text>\n      </button>`;\n        }\n        return html ` <button class=\"max-value-button\" @click=${this.onBuyToken.bind(this)}>\n      <wui-text color=\"accent-100\" variant=\"small-600\">Buy</wui-text>\n    </button>`;\n    }\n    onFocusChange(state) {\n        this.focused = state;\n    }\n    onSelectToken() {\n        EventsController.sendEvent({ type: 'track', event: 'CLICK_SELECT_TOKEN_TO_SWAP' });\n        RouterController.push('SwapSelectToken', {\n            target: this.target\n        });\n    }\n    onBuyToken() {\n        RouterController.push('OnRampProviders');\n    }\n};\nW3mSwapInput.styles = [styles];\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"focused\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"balance\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"value\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"price\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"marketValue\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"disabled\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"target\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"token\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"onSetAmount\", void 0);\n__decorate([\n    property()\n], W3mSwapInput.prototype, \"onSetMaxValue\", void 0);\nW3mSwapInput = __decorate([\n    customElement('w3m-swap-input')\n], W3mSwapInput);\nexport { W3mSwapInput };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host > wui-flex:first-child {\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n  }\n\n  :host > wui-flex:first-child::-webkit-scrollbar {\n    display: none;\n  }\n\n  wui-loading-hexagon {\n    position: absolute;\n  }\n\n  .action-button {\n    width: 100%;\n    border-radius: var(--wui-border-radius-xs);\n  }\n\n  .action-button:disabled {\n    border-color: 1px solid var(--wui-color-gray-glass-005);\n  }\n\n  .swap-inputs-container {\n    position: relative;\n  }\n\n  .replace-tokens-button-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    gap: var(--wui-spacing-1xs);\n    border-radius: var(--wui-border-radius-xs);\n    background-color: var(--wui-color-modal-bg-base);\n    padding: var(--wui-spacing-xxs);\n  }\n\n  .replace-tokens-button-container > button {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 40px;\n    width: 40px;\n    padding: var(--wui-spacing-xs);\n    border: none;\n    border-radius: var(--wui-border-radius-xxs);\n    background: var(--wui-color-gray-glass-002);\n    transition: background-color var(--wui-duration-md) var(--wui-ease-out-power-1);\n    will-change: background-color;\n    z-index: 20;\n  }\n\n  .replace-tokens-button-container > button:hover {\n    background: var(--wui-color-gray-glass-005);\n  }\n\n  .details-container > wui-flex {\n    background: var(--wui-color-gray-glass-002);\n    border-radius: var(--wui-border-radius-xxs);\n    width: 100%;\n  }\n\n  .details-container > wui-flex > button {\n    border: none;\n    background: none;\n    padding: var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-xxs);\n    transition: background 0.2s linear;\n  }\n\n  .details-container > wui-flex > button:hover {\n    background: var(--wui-color-gray-glass-002);\n  }\n\n  .details-content-container {\n    padding: var(--wui-spacing-1xs);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .details-content-container > wui-flex {\n    width: 100%;\n  }\n\n  .details-row {\n    width: 100%;\n    padding: var(--wui-spacing-s) var(--wui-spacing-xl);\n    border-radius: var(--wui-border-radius-xxs);\n    background: 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, state } from 'lit/decorators.js';\nimport { NumberUtil } from '@reown/appkit-common';\nimport { AccountController, ChainController, CoreHelperUtil, EventsController, ModalController, RouterController, 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';\nimport '@reown/appkit-ui/wui-text';\nimport { W3mFrameRpcConstants } from '@reown/appkit-wallet/utils';\nimport '../../partials/w3m-swap-details/index.js';\nimport '../../partials/w3m-swap-input-skeleton/index.js';\nimport '../../partials/w3m-swap-input/index.js';\nimport styles from './styles.js';\nlet W3mSwapView = class W3mSwapView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.initialParams = RouterController.state.data?.swap;\n        this.detailsOpen = false;\n        this.caipAddress = AccountController.state.caipAddress;\n        this.caipNetworkId = ChainController.state.activeCaipNetwork?.caipNetworkId;\n        this.initialized = SwapController.state.initialized;\n        this.loadingQuote = SwapController.state.loadingQuote;\n        this.loadingPrices = SwapController.state.loadingPrices;\n        this.loadingTransaction = SwapController.state.loadingTransaction;\n        this.sourceToken = SwapController.state.sourceToken;\n        this.sourceTokenAmount = SwapController.state.sourceTokenAmount;\n        this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;\n        this.toToken = SwapController.state.toToken;\n        this.toTokenAmount = SwapController.state.toTokenAmount;\n        this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;\n        this.inputError = SwapController.state.inputError;\n        this.fetchError = SwapController.state.fetchError;\n        this.onDebouncedGetSwapCalldata = CoreHelperUtil.debounce(async () => {\n            await SwapController.swapTokens();\n        }, 200);\n        ChainController.subscribeKey('activeCaipNetwork', newCaipNetwork => this.onCaipNetworkChange({\n            newCaipNetwork,\n            resetSwapState: true,\n            initializeSwapState: false\n        }));\n        AccountController.subscribeKey('caipAddress', newCaipAddress => this.onCaipAddressChange({\n            newCaipAddress,\n            resetSwapState: true,\n            initializeSwapState: false\n        }));\n        this.unsubscribe.push(...[\n            ChainController.subscribeKey('activeCaipNetwork', newCaipNetwork => this.onCaipNetworkChange({\n                newCaipNetwork,\n                resetSwapState: false,\n                initializeSwapState: true\n            })),\n            AccountController.subscribeKey('caipAddress', newCaipAddress => this.onCaipAddressChange({\n                newCaipAddress,\n                resetSwapState: false,\n                initializeSwapState: true\n            })),\n            ModalController.subscribeKey('open', isOpen => {\n                if (!isOpen) {\n                    SwapController.resetState();\n                }\n            }),\n            RouterController.subscribeKey('view', newRoute => {\n                if (!newRoute.includes('Swap')) {\n                    SwapController.resetValues();\n                }\n            }),\n            SwapController.subscribe(newState => {\n                this.initialized = newState.initialized;\n                this.loadingQuote = newState.loadingQuote;\n                this.loadingPrices = newState.loadingPrices;\n                this.loadingTransaction = newState.loadingTransaction;\n                this.sourceToken = newState.sourceToken;\n                this.sourceTokenAmount = newState.sourceTokenAmount;\n                this.sourceTokenPriceInUSD = newState.sourceTokenPriceInUSD;\n                this.toToken = newState.toToken;\n                this.toTokenAmount = newState.toTokenAmount;\n                this.toTokenPriceInUSD = newState.toTokenPriceInUSD;\n                this.inputError = newState.inputError;\n                this.fetchError = newState.fetchError;\n            })\n        ]);\n    }\n    async firstUpdated() {\n        SwapController.initializeState();\n        this.watchTokensAndValues();\n        await this.handleSwapParameters();\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe?.());\n        clearInterval(this.interval);\n    }\n    render() {\n        return html `\n      <wui-flex flexDirection=\"column\" .padding=${['0', 'l', 'l', 'l']} gap=\"s\">\n        ${this.initialized ? this.templateSwap() : this.templateLoading()}\n      </wui-flex>\n    `;\n    }\n    watchTokensAndValues() {\n        this.interval = setInterval(() => {\n            SwapController.getNetworkTokenPrice();\n            SwapController.getMyTokensWithBalance();\n            SwapController.swapTokens();\n        }, 10_000);\n    }\n    templateSwap() {\n        return html `\n      <wui-flex flexDirection=\"column\" gap=\"s\">\n        <wui-flex flexDirection=\"column\" alignItems=\"center\" gap=\"xs\" class=\"swap-inputs-container\">\n          ${this.templateTokenInput('sourceToken', this.sourceToken)}\n          ${this.templateTokenInput('toToken', this.toToken)} ${this.templateReplaceTokensButton()}\n        </wui-flex>\n        ${this.templateDetails()} ${this.templateActionButton()}\n      </wui-flex>\n    `;\n    }\n    actionButtonLabel() {\n        if (this.fetchError) {\n            return 'Swap';\n        }\n        if (!this.sourceToken || !this.toToken) {\n            return 'Select token';\n        }\n        if (!this.sourceTokenAmount) {\n            return 'Enter amount';\n        }\n        if (this.inputError) {\n            return this.inputError;\n        }\n        return 'Review swap';\n    }\n    templateReplaceTokensButton() {\n        return html `\n      <wui-flex class=\"replace-tokens-button-container\">\n        <button @click=${this.onSwitchTokens.bind(this)}>\n          <wui-icon name=\"recycleHorizontal\" color=\"fg-250\" size=\"lg\"></wui-icon>\n        </button>\n      </wui-flex>\n    `;\n    }\n    templateLoading() {\n        return html `\n      <wui-flex flexDirection=\"column\" gap=\"l\">\n        <wui-flex flexDirection=\"column\" alignItems=\"center\" gap=\"xs\" class=\"swap-inputs-container\">\n          <w3m-swap-input-skeleton target=\"sourceToken\"></w3m-swap-input-skeleton>\n          <w3m-swap-input-skeleton target=\"toToken\"></w3m-swap-input-skeleton>\n          ${this.templateReplaceTokensButton()}\n        </wui-flex>\n        ${this.templateActionButton()}\n      </wui-flex>\n    `;\n    }\n    templateTokenInput(target, token) {\n        const myToken = SwapController.state.myTokensWithBalance?.find(ct => ct?.address === token?.address);\n        const amount = target === 'toToken' ? this.toTokenAmount : this.sourceTokenAmount;\n        const price = target === 'toToken' ? this.toTokenPriceInUSD : this.sourceTokenPriceInUSD;\n        const marketValue = NumberUtil.parseLocalStringToNumber(amount) * price;\n        return html `<w3m-swap-input\n      .value=${target === 'toToken' ? this.toTokenAmount : this.sourceTokenAmount}\n      .disabled=${target === 'toToken'}\n      .onSetAmount=${this.handleChangeAmount.bind(this)}\n      target=${target}\n      .token=${token}\n      .balance=${myToken?.quantity?.numeric}\n      .price=${myToken?.price}\n      .marketValue=${marketValue}\n      .onSetMaxValue=${this.onSetMaxValue.bind(this)}\n    ></w3m-swap-input>`;\n    }\n    onSetMaxValue(target, balance) {\n        const maxValue = NumberUtil.bigNumber(balance || '0');\n        this.handleChangeAmount(target, maxValue.gt(0) ? maxValue.toFixed(20) : '0');\n    }\n    templateDetails() {\n        if (!this.sourceToken || !this.toToken || this.inputError) {\n            return null;\n        }\n        return html `<w3m-swap-details .detailsOpen=${this.detailsOpen}></w3m-swap-details>`;\n    }\n    handleChangeAmount(target, value) {\n        SwapController.clearError();\n        if (target === 'sourceToken') {\n            SwapController.setSourceTokenAmount(value);\n        }\n        else {\n            SwapController.setToTokenAmount(value);\n        }\n        this.onDebouncedGetSwapCalldata();\n    }\n    templateActionButton() {\n        const haveNoTokenSelected = !this.toToken || !this.sourceToken;\n        const haveNoAmount = !this.sourceTokenAmount;\n        const loading = this.loadingQuote || this.loadingPrices || this.loadingTransaction;\n        const disabled = loading || haveNoTokenSelected || haveNoAmount || this.inputError;\n        return html ` <wui-flex gap=\"xs\">\n      <wui-button\n        data-testid=\"swap-action-button\"\n        class=\"action-button\"\n        fullWidth\n        size=\"lg\"\n        borderRadius=\"xs\"\n        variant=${haveNoTokenSelected ? 'neutral' : 'main'}\n        .loading=${loading}\n        .disabled=${disabled}\n        @click=${this.onSwapPreview.bind(this)}\n      >\n        ${this.actionButtonLabel()}\n      </wui-button>\n    </wui-flex>`;\n    }\n    onSwitchTokens() {\n        SwapController.switchTokens();\n    }\n    async onSwapPreview() {\n        const activeChainNamespace = ChainController.state.activeChain;\n        if (this.fetchError) {\n            await SwapController.swapTokens();\n        }\n        EventsController.sendEvent({\n            type: 'track',\n            event: 'INITIATE_SWAP',\n            properties: {\n                network: this.caipNetworkId || '',\n                swapFromToken: this.sourceToken?.symbol || '',\n                swapToToken: this.toToken?.symbol || '',\n                swapFromAmount: this.sourceTokenAmount || '',\n                swapToAmount: this.toTokenAmount || '',\n                isSmartAccount: AccountController.state.preferredAccountTypes?.[activeChainNamespace] ===\n                    W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT\n            }\n        });\n        RouterController.push('SwapPreview');\n    }\n    async handleSwapParameters() {\n        if (!this.initialParams) {\n            return;\n        }\n        if (!SwapController.state.initialized) {\n            const waitForInitialization = new Promise(resolve => {\n                const unsubscribe = SwapController.subscribeKey('initialized', initialized => {\n                    if (initialized) {\n                        unsubscribe?.();\n                        resolve();\n                    }\n                });\n            });\n            await waitForInitialization;\n        }\n        await this.setSwapParameters(this.initialParams);\n    }\n    async setSwapParameters({ amount, fromToken, toToken }) {\n        if (!SwapController.state.tokens || !SwapController.state.myTokensWithBalance) {\n            const waitForTokens = new Promise(resolve => {\n                const unsubscribe = SwapController.subscribeKey('myTokensWithBalance', tokens => {\n                    if (tokens && tokens.length > 0) {\n                        unsubscribe?.();\n                        resolve();\n                    }\n                });\n                setTimeout(() => {\n                    unsubscribe?.();\n                    resolve();\n                }, 5000);\n            });\n            await waitForTokens;\n        }\n        const allTokens = [\n            ...(SwapController.state.tokens || []),\n            ...(SwapController.state.myTokensWithBalance || [])\n        ];\n        if (fromToken) {\n            const token = allTokens.find(t => t.symbol.toLowerCase() === fromToken.toLowerCase());\n            if (token) {\n                SwapController.setSourceToken(token);\n            }\n        }\n        if (toToken) {\n            const token = allTokens.find(t => t.symbol.toLowerCase() === toToken.toLowerCase());\n            if (token) {\n                SwapController.setToToken(token);\n            }\n        }\n        if (amount && !isNaN(Number(amount))) {\n            SwapController.setSourceTokenAmount(amount);\n        }\n    }\n    onCaipAddressChange({ newCaipAddress, resetSwapState, initializeSwapState }) {\n        if (this.caipAddress !== newCaipAddress) {\n            this.caipAddress = newCaipAddress;\n            if (resetSwapState) {\n                SwapController.resetState();\n            }\n            if (initializeSwapState) {\n                SwapController.initializeState();\n            }\n        }\n    }\n    onCaipNetworkChange({ newCaipNetwork, resetSwapState, initializeSwapState }) {\n        if (this.caipNetworkId !== newCaipNetwork?.caipNetworkId) {\n            this.caipNetworkId = newCaipNetwork?.caipNetworkId;\n            if (resetSwapState) {\n                SwapController.resetState();\n            }\n            if (initializeSwapState) {\n                SwapController.initializeState();\n            }\n        }\n    }\n};\nW3mSwapView.styles = styles;\n__decorate([\n    property({ type: Object })\n], W3mSwapView.prototype, \"initialParams\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"interval\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"detailsOpen\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"caipAddress\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"caipNetworkId\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"initialized\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"loadingQuote\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"loadingPrices\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"loadingTransaction\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"sourceToken\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"sourceTokenAmount\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"sourceTokenPriceInUSD\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"toToken\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"toTokenAmount\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"toTokenPriceInUSD\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"inputError\", void 0);\n__decorate([\n    state()\n], W3mSwapView.prototype, \"fetchError\", void 0);\nW3mSwapView = __decorate([\n    customElement('w3m-swap-view')\n], W3mSwapView);\nexport { W3mSwapView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host > wui-flex:first-child {\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n  }\n\n  :host > wui-flex:first-child::-webkit-scrollbar {\n    display: none;\n  }\n\n  .preview-container,\n  .details-container {\n    width: 100%;\n  }\n\n  .token-image {\n    width: 24px;\n    height: 24px;\n    box-shadow: 0 0 0 2px var(--wui-color-gray-glass-005);\n    border-radius: 12px;\n  }\n\n  wui-loading-hexagon {\n    position: absolute;\n  }\n\n  .token-item {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--wui-spacing-xxs);\n    padding: var(--wui-spacing-xs);\n    height: 40px;\n    border: none;\n    border-radius: 80px;\n    background: var(--wui-color-gray-glass-002);\n    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);\n    cursor: pointer;\n    transition: background 0.2s linear;\n  }\n\n  .token-item:hover {\n    background: var(--wui-color-gray-glass-005);\n  }\n\n  .preview-token-details-container {\n    width: 100%;\n  }\n\n  .details-row {\n    width: 100%;\n    padding: var(--wui-spacing-s) var(--wui-spacing-xl);\n    border-radius: var(--wui-border-radius-xxs);\n    background: var(--wui-color-gray-glass-002);\n  }\n\n  .action-buttons-container {\n    width: 100%;\n    gap: var(--wui-spacing-xs);\n  }\n\n  .action-buttons-container > button {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    height: 48px;\n    border-radius: var(--wui-border-radius-xs);\n    border: none;\n    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);\n  }\n\n  .action-buttons-container > button:disabled {\n    opacity: 0.8;\n    cursor: not-allowed;\n  }\n\n  .action-button > wui-loading-spinner {\n    display: inline-block;\n  }\n\n  .cancel-button:hover,\n  .action-button:hover {\n    cursor: pointer;\n  }\n\n  .action-buttons-container > wui-button.cancel-button {\n    flex: 2;\n  }\n\n  .action-buttons-container > wui-button.action-button {\n    flex: 4;\n  }\n\n  .action-buttons-container > button.action-button > wui-text {\n    color: white;\n  }\n\n  .details-container > wui-flex {\n    background: var(--wui-color-gray-glass-002);\n    border-radius: var(--wui-border-radius-xxs);\n    width: 100%;\n  }\n\n  .details-container > wui-flex > button {\n    border: none;\n    background: none;\n    padding: var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-xxs);\n    transition: background 0.2s linear;\n  }\n\n  .details-container > wui-flex > button:hover {\n    background: var(--wui-color-gray-glass-002);\n  }\n\n  .details-content-container {\n    padding: var(--wui-spacing-1xs);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .details-content-container > wui-flex {\n    width: 100%;\n  }\n\n  .details-row {\n    width: 100%;\n    padding: var(--wui-spacing-s) var(--wui-spacing-xl);\n    border-radius: var(--wui-border-radius-xxs);\n    background: 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 { state } from 'lit/decorators.js';\nimport { AccountController, ChainController, RouterController, SwapController } 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-text';\nimport '@reown/appkit-ui/wui-token-button';\nimport '../../partials/w3m-swap-details/index.js';\nimport styles from './styles.js';\nlet W3mSwapPreviewView = class W3mSwapPreviewView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.detailsOpen = true;\n        this.approvalTransaction = SwapController.state.approvalTransaction;\n        this.swapTransaction = SwapController.state.swapTransaction;\n        this.sourceToken = SwapController.state.sourceToken;\n        this.sourceTokenAmount = SwapController.state.sourceTokenAmount ?? '';\n        this.sourceTokenPriceInUSD = SwapController.state.sourceTokenPriceInUSD;\n        this.toToken = SwapController.state.toToken;\n        this.toTokenAmount = SwapController.state.toTokenAmount ?? '';\n        this.toTokenPriceInUSD = SwapController.state.toTokenPriceInUSD;\n        this.caipNetwork = ChainController.state.activeCaipNetwork;\n        this.balanceSymbol = AccountController.state.balanceSymbol;\n        this.inputError = SwapController.state.inputError;\n        this.loadingQuote = SwapController.state.loadingQuote;\n        this.loadingApprovalTransaction = SwapController.state.loadingApprovalTransaction;\n        this.loadingBuildTransaction = SwapController.state.loadingBuildTransaction;\n        this.loadingTransaction = SwapController.state.loadingTransaction;\n        this.unsubscribe.push(...[\n            AccountController.subscribeKey('balanceSymbol', newBalanceSymbol => {\n                if (this.balanceSymbol !== newBalanceSymbol) {\n                    RouterController.goBack();\n                }\n            }),\n            ChainController.subscribeKey('activeCaipNetwork', newCaipNetwork => {\n                if (this.caipNetwork !== newCaipNetwork) {\n