@safe-stars/components/dist/onramp-DH9IWLzS.cjs.map

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

{"version":3,"file":"onramp-DH9IWLzS.cjs","sources":["../node_modules/@reown/appkit-controllers/dist/esm/src/controllers/OnRampController.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-activity-item/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-activity-item/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-activity-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-activity-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-fiat-select-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-fiat-select-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-provider-item/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-provider-item/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-providers-footer/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-providers-footer/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-providers-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-tokens-select-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-onramp-tokens-select-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-buy-in-progress-view/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-buy-in-progress-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/views/w3m-what-is-a-buy-view/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-input/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-onramp-input/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/modal/w3m-onramp-widget/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/modal/w3m-onramp-widget/index.js"],"sourcesContent":["import { proxy, subscribe as sub } from 'valtio/vanilla';\nimport { subscribeKey as subKey } from 'valtio/vanilla/utils';\nimport { ConstantsUtil } from '@reown/appkit-common';\nimport { MELD_PUBLIC_KEY, ONRAMP_PROVIDERS } from '../utils/ConstantsUtil.js';\nimport { withErrorBoundary } from '../utils/withErrorBoundary.js';\nimport { AccountController } from './AccountController.js';\nimport { ApiController } from './ApiController.js';\nimport { BlockchainApiController } from './BlockchainApiController.js';\nimport { ChainController } from './ChainController.js';\nexport const USDC_CURRENCY_DEFAULT = {\n    id: '2b92315d-eab7-5bef-84fa-089a131333f5',\n    name: 'USD Coin',\n    symbol: 'USDC',\n    networks: [\n        {\n            name: 'ethereum-mainnet',\n            display_name: 'Ethereum',\n            chain_id: '1',\n            contract_address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48'\n        },\n        {\n            name: 'polygon-mainnet',\n            display_name: 'Polygon',\n            chain_id: '137',\n            contract_address: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174'\n        }\n    ]\n};\nexport const USD_CURRENCY_DEFAULT = {\n    id: 'USD',\n    payment_method_limits: [\n        {\n            id: 'card',\n            min: '10.00',\n            max: '7500.00'\n        },\n        {\n            id: 'ach_bank_account',\n            min: '10.00',\n            max: '25000.00'\n        }\n    ]\n};\nconst defaultState = {\n    providers: ONRAMP_PROVIDERS,\n    selectedProvider: null,\n    error: null,\n    purchaseCurrency: USDC_CURRENCY_DEFAULT,\n    paymentCurrency: USD_CURRENCY_DEFAULT,\n    purchaseCurrencies: [USDC_CURRENCY_DEFAULT],\n    paymentCurrencies: [],\n    quotesLoading: false\n};\n// -- State --------------------------------------------- //\nconst state = proxy(defaultState);\n// -- Controller ---------------------------------------- //\nconst controller = {\n    state,\n    subscribe(callback) {\n        return sub(state, () => callback(state));\n    },\n    subscribeKey(key, callback) {\n        return subKey(state, key, callback);\n    },\n    setSelectedProvider(provider) {\n        if (provider && provider.name === 'meld') {\n            const currency = ChainController.state.activeChain === ConstantsUtil.CHAIN.SOLANA ? 'SOL' : 'USDC';\n            const address = AccountController.state.address ?? '';\n            const url = new URL(provider.url);\n            url.searchParams.append('publicKey', MELD_PUBLIC_KEY);\n            url.searchParams.append('destinationCurrencyCode', currency);\n            url.searchParams.append('walletAddress', address);\n            provider.url = url.toString();\n        }\n        state.selectedProvider = provider;\n    },\n    setPurchaseCurrency(currency) {\n        state.purchaseCurrency = currency;\n    },\n    setPaymentCurrency(currency) {\n        state.paymentCurrency = currency;\n    },\n    setPurchaseAmount(amount) {\n        OnRampController.state.purchaseAmount = amount;\n    },\n    setPaymentAmount(amount) {\n        OnRampController.state.paymentAmount = amount;\n    },\n    async getAvailableCurrencies() {\n        const options = await BlockchainApiController.getOnrampOptions();\n        state.purchaseCurrencies = options.purchaseCurrencies;\n        state.paymentCurrencies = options.paymentCurrencies;\n        state.paymentCurrency = options.paymentCurrencies[0] || USD_CURRENCY_DEFAULT;\n        state.purchaseCurrency = options.purchaseCurrencies[0] || USDC_CURRENCY_DEFAULT;\n        await ApiController.fetchCurrencyImages(options.paymentCurrencies.map(currency => currency.id));\n        await ApiController.fetchTokenImages(options.purchaseCurrencies.map(currency => currency.symbol));\n    },\n    async getQuote() {\n        state.quotesLoading = true;\n        try {\n            const quote = await BlockchainApiController.getOnrampQuote({\n                purchaseCurrency: state.purchaseCurrency,\n                paymentCurrency: state.paymentCurrency,\n                amount: state.paymentAmount?.toString() || '0',\n                network: state.purchaseCurrency?.symbol\n            });\n            state.quotesLoading = false;\n            state.purchaseAmount = Number(quote?.purchaseAmount.amount);\n            return quote;\n        }\n        catch (error) {\n            state.error = error.message;\n            state.quotesLoading = false;\n            return null;\n        }\n        finally {\n            state.quotesLoading = false;\n        }\n    },\n    resetState() {\n        state.providers = ONRAMP_PROVIDERS;\n        state.selectedProvider = null;\n        state.error = null;\n        state.purchaseCurrency = USDC_CURRENCY_DEFAULT;\n        state.paymentCurrency = USD_CURRENCY_DEFAULT;\n        state.purchaseCurrencies = [USDC_CURRENCY_DEFAULT];\n        state.paymentCurrencies = [];\n        state.paymentAmount = undefined;\n        state.purchaseAmount = undefined;\n        state.quotesLoading = false;\n    }\n};\n// Export the controller wrapped with our error boundary\nexport const OnRampController = withErrorBoundary(controller);\n//# sourceMappingURL=OnRampController.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    width: 100%;\n  }\n\n  :host > wui-flex {\n    width: 100%;\n    padding: var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-xs);\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--wui-spacing-s);\n  }\n\n  :host > wui-flex:hover {\n    background-color: var(--wui-color-gray-glass-002);\n  }\n\n  .purchase-image-container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n    width: var(--wui-icon-box-size-lg);\n    height: var(--wui-icon-box-size-lg);\n  }\n\n  .purchase-image-container wui-image {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    border-radius: calc(var(--wui-icon-box-size-lg) / 2);\n  }\n\n  .purchase-image-container wui-image::after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    inset: 0;\n    border-radius: calc(var(--wui-icon-box-size-lg) / 2);\n    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);\n  }\n\n  .purchase-image-container wui-icon-box {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    transform: translate(20%, 20%);\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 { ApiController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon-box';\nimport '@reown/appkit-ui/wui-image';\nimport '@reown/appkit-ui/wui-loading-spinner';\nimport '@reown/appkit-ui/wui-text';\nimport styles from './styles.js';\nlet W3mOnRampActivityItem = class W3mOnRampActivityItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.disabled = false;\n        this.color = 'inherit';\n        this.label = 'Bought';\n        this.purchaseValue = '';\n        this.purchaseCurrency = '';\n        this.date = '';\n        this.completed = false;\n        this.inProgress = false;\n        this.failed = false;\n        this.onClick = null;\n        this.symbol = '';\n    }\n    firstUpdated() {\n        if (!this.icon) {\n            this.fetchTokenImage();\n        }\n    }\n    render() {\n        return html `\n      <wui-flex>\n        ${this.imageTemplate()}\n        <wui-flex flexDirection=\"column\" gap=\"4xs\" flexGrow=\"1\">\n          <wui-flex gap=\"xxs\" alignItems=\"center\" justifyContent=\"flex-start\">\n            ${this.statusIconTemplate()}\n            <wui-text variant=\"paragraph-500\" color=\"fg-100\"> ${this.label}</wui-text>\n          </wui-flex>\n          <wui-text variant=\"small-400\" color=\"fg-200\">\n            + ${this.purchaseValue} ${this.purchaseCurrency}\n          </wui-text>\n        </wui-flex>\n        ${this.inProgress\n            ? html `<wui-loading-spinner color=\"fg-200\" size=\"md\"></wui-loading-spinner>`\n            : html `<wui-text variant=\"micro-700\" color=\"fg-300\"><span>${this.date}</span></wui-text>`}\n      </wui-flex>\n    `;\n    }\n    async fetchTokenImage() {\n        await ApiController._fetchTokenImage(this.purchaseCurrency);\n    }\n    statusIconTemplate() {\n        if (this.inProgress) {\n            return null;\n        }\n        return this.completed ? this.boughtIconTemplate() : this.errorIconTemplate();\n    }\n    errorIconTemplate() {\n        return html `<wui-icon-box\n      size=\"xxs\"\n      iconColor=\"error-100\"\n      backgroundColor=\"error-100\"\n      background=\"opaque\"\n      icon=\"close\"\n      borderColor=\"wui-color-bg-125\"\n    ></wui-icon-box>`;\n    }\n    imageTemplate() {\n        const icon = this.icon || `https://avatar.vercel.sh/andrew.svg?size=50&text=${this.symbol}`;\n        return html `<wui-flex class=\"purchase-image-container\">\n      <wui-image src=${icon}></wui-image>\n    </wui-flex>`;\n    }\n    boughtIconTemplate() {\n        return html `<wui-icon-box\n      size=\"xxs\"\n      iconColor=\"success-100\"\n      backgroundColor=\"success-100\"\n      background=\"opaque\"\n      icon=\"arrowBottom\"\n      borderColor=\"wui-color-bg-125\"\n    ></wui-icon-box>`;\n    }\n};\nW3mOnRampActivityItem.styles = [styles];\n__decorate([\n    property({ type: Boolean })\n], W3mOnRampActivityItem.prototype, \"disabled\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"color\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"label\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"purchaseValue\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"purchaseCurrency\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"date\", void 0);\n__decorate([\n    property({ type: Boolean })\n], W3mOnRampActivityItem.prototype, \"completed\", void 0);\n__decorate([\n    property({ type: Boolean })\n], W3mOnRampActivityItem.prototype, \"inProgress\", void 0);\n__decorate([\n    property({ type: Boolean })\n], W3mOnRampActivityItem.prototype, \"failed\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"onClick\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"symbol\", void 0);\n__decorate([\n    property()\n], W3mOnRampActivityItem.prototype, \"icon\", void 0);\nW3mOnRampActivityItem = __decorate([\n    customElement('w3m-onramp-activity-item')\n], W3mOnRampActivityItem);\nexport { W3mOnRampActivityItem };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host > wui-flex {\n    height: 500px;\n    overflow-y: auto;\n    overflow-x: hidden;\n    scrollbar-width: none;\n    padding: var(--wui-spacing-m);\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  :host > wui-flex::-webkit-scrollbar {\n    display: none;\n  }\n\n  :host > wui-flex > wui-flex {\n    width: 100%;\n  }\n\n  wui-transaction-list-item-loader {\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 { state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { DateUtil } from '@reown/appkit-common';\nimport { AccountController, AssetController, OnRampController, OptionsController, TransactionsController } from '@reown/appkit-controllers';\nimport { TransactionUtil, customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-text';\nimport '@reown/appkit-ui/wui-transaction-list-item-loader';\nimport '../../partials/w3m-onramp-activity-item/index.js';\nimport styles from './styles.js';\nconst LOADING_ITEM_COUNT = 7;\nlet W3mOnRampActivityView = class W3mOnRampActivityView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.selectedOnRampProvider = OnRampController.state.selectedProvider;\n        this.loading = false;\n        this.coinbaseTransactions = TransactionsController.state.coinbaseTransactions;\n        this.tokenImages = AssetController.state.tokenImages;\n        this.unsubscribe.push(...[\n            OnRampController.subscribeKey('selectedProvider', val => {\n                this.selectedOnRampProvider = val;\n            }),\n            AssetController.subscribeKey('tokenImages', val => (this.tokenImages = val)),\n            () => {\n                clearTimeout(this.refetchTimeout);\n            },\n            TransactionsController.subscribe(val => {\n                this.coinbaseTransactions = { ...val.coinbaseTransactions };\n            })\n        ]);\n        TransactionsController.clearCursor();\n        this.fetchTransactions();\n    }\n    render() {\n        return html `\n      <wui-flex flexDirection=\"column\" .padding=${['0', 's', 's', 's']} gap=\"xs\">\n        ${this.loading ? this.templateLoading() : this.templateTransactionsByYear()}\n      </wui-flex>\n    `;\n    }\n    templateTransactions(transactions) {\n        return transactions?.map(transaction => {\n            const date = DateUtil.formatDate(transaction?.metadata?.minedAt);\n            const transfer = transaction.transfers[0];\n            const fungibleInfo = transfer?.fungible_info;\n            if (!fungibleInfo) {\n                return null;\n            }\n            const icon = fungibleInfo?.icon?.url || this.tokenImages?.[fungibleInfo.symbol || ''];\n            return html `\n        <w3m-onramp-activity-item\n          label=\"Bought\"\n          .completed=${transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_SUCCESS'}\n          .inProgress=${transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS'}\n          .failed=${transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_FAILED'}\n          purchaseCurrency=${ifDefined(fungibleInfo.symbol)}\n          purchaseValue=${transfer.quantity.numeric}\n          date=${date}\n          icon=${ifDefined(icon)}\n          symbol=${ifDefined(fungibleInfo.symbol)}\n        ></w3m-onramp-activity-item>\n      `;\n        });\n    }\n    templateTransactionsByYear() {\n        const sortedYearKeys = Object.keys(this.coinbaseTransactions).sort().reverse();\n        return sortedYearKeys.map(year => {\n            const yearInt = parseInt(year, 10);\n            const sortedMonthIndexes = new Array(12)\n                .fill(null)\n                .map((_, idx) => idx)\n                .reverse();\n            return sortedMonthIndexes.map(month => {\n                const groupTitle = TransactionUtil.getTransactionGroupTitle(yearInt, month);\n                const transactions = this.coinbaseTransactions[yearInt]?.[month];\n                if (!transactions) {\n                    return null;\n                }\n                return html `\n          <wui-flex flexDirection=\"column\">\n            <wui-flex\n              alignItems=\"center\"\n              flexDirection=\"row\"\n              .padding=${['xs', 's', 's', 's']}\n            >\n              <wui-text variant=\"paragraph-500\" color=\"fg-200\">${groupTitle}</wui-text>\n            </wui-flex>\n            <wui-flex flexDirection=\"column\" gap=\"xs\">\n              ${this.templateTransactions(transactions)}\n            </wui-flex>\n          </wui-flex>\n        `;\n            });\n        });\n    }\n    async fetchTransactions() {\n        const provider = 'coinbase';\n        if (provider === 'coinbase') {\n            await this.fetchCoinbaseTransactions();\n        }\n    }\n    async fetchCoinbaseTransactions() {\n        const address = AccountController.state.address;\n        const projectId = OptionsController.state.projectId;\n        if (!address) {\n            throw new Error('No address found');\n        }\n        if (!projectId) {\n            throw new Error('No projectId found');\n        }\n        this.loading = true;\n        await TransactionsController.fetchTransactions(address, 'coinbase');\n        this.loading = false;\n        this.refetchLoadingTransactions();\n    }\n    refetchLoadingTransactions() {\n        const today = new Date();\n        const currentMonthTxs = this.coinbaseTransactions[today.getFullYear()]?.[today.getMonth()] || [];\n        const loadingTransactions = currentMonthTxs.filter(transaction => transaction.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS');\n        if (loadingTransactions.length === 0) {\n            clearTimeout(this.refetchTimeout);\n            return;\n        }\n        this.refetchTimeout = setTimeout(async () => {\n            const address = AccountController.state.address;\n            await TransactionsController.fetchTransactions(address, 'coinbase');\n            this.refetchLoadingTransactions();\n        }, 3000);\n    }\n    templateLoading() {\n        return Array(LOADING_ITEM_COUNT)\n            .fill(html ` <wui-transaction-list-item-loader></wui-transaction-list-item-loader> `)\n            .map(item => item);\n    }\n};\nW3mOnRampActivityView.styles = styles;\n__decorate([\n    state()\n], W3mOnRampActivityView.prototype, \"selectedOnRampProvider\", void 0);\n__decorate([\n    state()\n], W3mOnRampActivityView.prototype, \"loading\", void 0);\n__decorate([\n    state()\n], W3mOnRampActivityView.prototype, \"coinbaseTransactions\", void 0);\n__decorate([\n    state()\n], W3mOnRampActivityView.prototype, \"tokenImages\", void 0);\nW3mOnRampActivityView = __decorate([\n    customElement('w3m-onramp-activity-view')\n], W3mOnRampActivityView);\nexport { W3mOnRampActivityView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host > wui-grid {\n    max-height: 360px;\n    overflow: auto;\n  }\n\n  wui-flex {\n    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);\n    will-change: opacity;\n  }\n\n  wui-grid::-webkit-scrollbar {\n    display: none;\n  }\n\n  wui-flex.disabled {\n    opacity: 0.3;\n    pointer-events: none;\n    user-select: none;\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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { AssetController, ModalController, OnRampController, OptionsController, OptionsStateController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-list-item';\nimport '@reown/appkit-ui/wui-text';\nimport '../../partials/w3m-legal-checkbox/index.js';\nimport '../../partials/w3m-legal-footer/index.js';\nimport styles from './styles.js';\nlet W3mOnrampFiatSelectView = class W3mOnrampFiatSelectView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.selectedCurrency = OnRampController.state.paymentCurrency;\n        this.currencies = OnRampController.state.paymentCurrencies;\n        this.currencyImages = AssetController.state.currencyImages;\n        this.checked = OptionsStateController.state.isLegalCheckboxChecked;\n        this.unsubscribe.push(...[\n            OnRampController.subscribe(val => {\n                this.selectedCurrency = val.paymentCurrency;\n                this.currencies = val.paymentCurrencies;\n            }),\n            AssetController.subscribeKey('currencyImages', val => (this.currencyImages = val)),\n            OptionsStateController.subscribeKey('isLegalCheckboxChecked', val => {\n                this.checked = val;\n            })\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;\n        const legalCheckbox = OptionsController.state.features?.legalCheckbox;\n        const legalUrl = termsConditionsUrl || privacyPolicyUrl;\n        const showLegalCheckbox = Boolean(legalUrl) && Boolean(legalCheckbox);\n        const disabled = showLegalCheckbox && !this.checked;\n        return html `\n      <w3m-legal-checkbox></w3m-legal-checkbox>\n      <wui-flex\n        flexDirection=\"column\"\n        .padding=${['0', 's', 's', 's']}\n        gap=\"xs\"\n        class=${ifDefined(disabled ? 'disabled' : undefined)}\n      >\n        ${this.currenciesTemplate(disabled)}\n      </wui-flex>\n      <w3m-legal-footer></w3m-legal-footer>\n    `;\n    }\n    currenciesTemplate(disabled = false) {\n        return this.currencies.map(currency => html `\n        <wui-list-item\n          imageSrc=${ifDefined(this.currencyImages?.[currency.id])}\n          @click=${() => this.selectCurrency(currency)}\n          variant=\"image\"\n          tabIdx=${ifDefined(disabled ? -1 : undefined)}\n        >\n          <wui-text variant=\"paragraph-500\" color=\"fg-100\">${currency.id}</wui-text>\n        </wui-list-item>\n      `);\n    }\n    selectCurrency(currency) {\n        if (!currency) {\n            return;\n        }\n        OnRampController.setPaymentCurrency(currency);\n        ModalController.close();\n    }\n};\nW3mOnrampFiatSelectView.styles = styles;\n__decorate([\n    state()\n], W3mOnrampFiatSelectView.prototype, \"selectedCurrency\", void 0);\n__decorate([\n    state()\n], W3mOnrampFiatSelectView.prototype, \"currencies\", void 0);\n__decorate([\n    state()\n], W3mOnrampFiatSelectView.prototype, \"currencyImages\", void 0);\n__decorate([\n    state()\n], W3mOnrampFiatSelectView.prototype, \"checked\", void 0);\nW3mOnrampFiatSelectView = __decorate([\n    customElement('w3m-onramp-fiat-select-view')\n], W3mOnrampFiatSelectView);\nexport { W3mOnrampFiatSelectView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  button {\n    padding: var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-xs);\n    border: none;\n    outline: none;\n    background-color: var(--wui-color-gray-glass-002);\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start;\n    gap: var(--wui-spacing-s);\n    transition: background-color var(--wui-ease-out-power-1) var(--wui-duration-md);\n    will-change: background-color;\n  }\n\n  button:hover {\n    background-color: var(--wui-color-gray-glass-005);\n  }\n\n  .provider-image {\n    width: var(--wui-spacing-3xl);\n    min-width: var(--wui-spacing-3xl);\n    height: var(--wui-spacing-3xl);\n    border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2));\n    position: relative;\n    overflow: hidden;\n  }\n\n  .provider-image::after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    inset: 0;\n    border-radius: calc(var(--wui-border-radius-xs) - calc(var(--wui-spacing-s) / 2));\n    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);\n  }\n\n  .network-icon {\n    width: var(--wui-spacing-m);\n    height: var(--wui-spacing-m);\n    border-radius: calc(var(--wui-spacing-m) / 2);\n    overflow: hidden;\n    box-shadow:\n      0 0 0 3px var(--wui-color-gray-glass-002),\n      0 0 0 3px var(--wui-color-modal-bg);\n    transition: box-shadow var(--wui-ease-out-power-1) var(--wui-duration-md);\n    will-change: box-shadow;\n  }\n\n  button:hover .network-icon {\n    box-shadow:\n      0 0 0 3px var(--wui-color-gray-glass-005),\n      0 0 0 3px var(--wui-color-modal-bg);\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 { AssetUtil, ChainController } 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-image';\nimport '@reown/appkit-ui/wui-loading-spinner';\nimport '@reown/appkit-ui/wui-text';\nimport '@reown/appkit-ui/wui-visual';\nimport styles from './styles.js';\nlet W3mOnRampProviderItem = class W3mOnRampProviderItem extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.disabled = false;\n        this.color = 'inherit';\n        this.label = '';\n        this.feeRange = '';\n        this.loading = false;\n        this.onClick = null;\n    }\n    render() {\n        return html `\n      <button ?disabled=${this.disabled} @click=${this.onClick} ontouchstart>\n        <wui-visual name=${ifDefined(this.name)} class=\"provider-image\"></wui-visual>\n        <wui-flex flexDirection=\"column\" gap=\"4xs\">\n          <wui-text variant=\"paragraph-500\" color=\"fg-100\">${this.label}</wui-text>\n          <wui-flex alignItems=\"center\" justifyContent=\"flex-start\" gap=\"l\">\n            <wui-text variant=\"tiny-500\" color=\"fg-100\">\n              <wui-text variant=\"tiny-400\" color=\"fg-200\">Fees</wui-text>\n              ${this.feeRange}\n            </wui-text>\n            <wui-flex gap=\"xxs\">\n              <wui-icon name=\"bank\" size=\"xs\" color=\"fg-150\"></wui-icon>\n              <wui-icon name=\"card\" size=\"xs\" color=\"fg-150\"></wui-icon>\n            </wui-flex>\n            ${this.networksTemplate()}\n          </wui-flex>\n        </wui-flex>\n        ${this.loading\n            ? html `<wui-loading-spinner color=\"fg-200\" size=\"md\"></wui-loading-spinner>`\n            : html `<wui-icon name=\"chevronRight\" color=\"fg-200\" size=\"sm\"></wui-icon>`}\n      </button>\n    `;\n    }\n    networksTemplate() {\n        const requestedCaipNetworks = ChainController.getAllRequestedCaipNetworks();\n        const slicedNetworks = requestedCaipNetworks\n            ?.filter(network => network?.assets?.imageId)\n            ?.slice(0, 5);\n        return html `\n      <wui-flex class=\"networks\">\n        ${slicedNetworks?.map(network => html `\n            <wui-flex class=\"network-icon\">\n              <wui-image src=${ifDefined(AssetUtil.getNetworkImage(network))}></wui-image>\n            </wui-flex>\n          `)}\n      </wui-flex>\n    `;\n    }\n};\nW3mOnRampProviderItem.styles = [styles];\n__decorate([\n    property({ type: Boolean })\n], W3mOnRampProviderItem.prototype, \"disabled\", void 0);\n__decorate([\n    property()\n], W3mOnRampProviderItem.prototype, \"color\", void 0);\n__decorate([\n    property()\n], W3mOnRampProviderItem.prototype, \"name\", void 0);\n__decorate([\n    property()\n], W3mOnRampProviderItem.prototype, \"label\", void 0);\n__decorate([\n    property()\n], W3mOnRampProviderItem.prototype, \"feeRange\", void 0);\n__decorate([\n    property({ type: Boolean })\n], W3mOnRampProviderItem.prototype, \"loading\", void 0);\n__decorate([\n    property()\n], W3mOnRampProviderItem.prototype, \"onClick\", void 0);\nW3mOnRampProviderItem = __decorate([\n    customElement('w3m-onramp-provider-item')\n], W3mOnRampProviderItem);\nexport { W3mOnRampProviderItem };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  wui-flex {\n    border-top: 1px solid var(--wui-color-gray-glass-005);\n  }\n\n  a {\n    text-decoration: none;\n    color: var(--wui-color-fg-175);\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--wui-spacing-3xs);\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 { AccountController, ChainController, EventsController, OptionsController, RouterController } 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-link';\nimport '@reown/appkit-ui/wui-text';\nimport { W3mFrameRpcConstants } from '@reown/appkit-wallet/utils';\nimport styles from './styles.js';\nlet W3mOnRampProvidersFooter = class W3mOnRampProvidersFooter extends LitElement {\n    render() {\n        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;\n        if (!termsConditionsUrl && !privacyPolicyUrl) {\n            return null;\n        }\n        return html `\n      <wui-flex\n        .padding=${['m', 's', 's', 's']}\n        flexDirection=\"column\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        gap=\"s\"\n      >\n        <wui-text color=\"fg-250\" variant=\"small-400\" align=\"center\">\n          We work with the best providers to give you the lowest fees and best support. More options\n          coming soon!\n        </wui-text>\n\n        ${this.howDoesItWorkTemplate()}\n      </wui-flex>\n    `;\n    }\n    howDoesItWorkTemplate() {\n        return html ` <wui-link @click=${this.onWhatIsBuy.bind(this)}>\n      <wui-icon size=\"xs\" color=\"accent-100\" slot=\"iconLeft\" name=\"helpCircle\"></wui-icon>\n      How does it work?\n    </wui-link>`;\n    }\n    onWhatIsBuy() {\n        const activeChainNamespace = ChainController.state.activeChain;\n        EventsController.sendEvent({\n            type: 'track',\n            event: 'SELECT_WHAT_IS_A_BUY',\n            properties: {\n                isSmartAccount: AccountController.state.preferredAccountTypes?.[activeChainNamespace] ===\n                    W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT\n            }\n        });\n        RouterController.push('WhatIsABuy');\n    }\n};\nW3mOnRampProvidersFooter.styles = [styles];\nW3mOnRampProvidersFooter = __decorate([\n    customElement('w3m-onramp-providers-footer')\n], W3mOnRampProvidersFooter);\nexport { W3mOnRampProvidersFooter };\n//# sourceMappingURL=index.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, BlockchainApiController, ChainController, ConstantsUtil, CoreHelperUtil, EventsController, OnRampController, RouterController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport { W3mFrameRpcConstants } from '@reown/appkit-wallet/utils';\nimport '../../partials/w3m-onramp-provider-item/index.js';\nimport '../../partials/w3m-onramp-providers-footer/index.js';\nlet W3mOnRampProvidersView = class W3mOnRampProvidersView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.providers = OnRampController.state.providers;\n        this.unsubscribe.push(...[\n            OnRampController.subscribeKey('providers', val => {\n                this.providers = val;\n            })\n        ]);\n    }\n    firstUpdated() {\n        const urlPromises = this.providers.map(async (provider) => {\n            if (provider.name === 'coinbase') {\n                return await this.getCoinbaseOnRampURL();\n            }\n            return Promise.resolve(provider?.url);\n        });\n        Promise.all(urlPromises).then(urls => {\n            this.providers = this.providers.map((provider, index) => ({\n                ...provider,\n                url: urls[index] || ''\n            }));\n        });\n    }\n    render() {\n        return html `\n      <wui-flex flexDirection=\"column\" .padding=${['0', 's', 's', 's']} gap=\"xs\">\n        ${this.onRampProvidersTemplate()}\n      </wui-flex>\n      <w3m-onramp-providers-footer></w3m-onramp-providers-footer>\n    `;\n    }\n    onRampProvidersTemplate() {\n        return this.providers\n            .filter(provider => provider.supportedChains.includes(ChainController.state.activeChain ?? 'eip155'))\n            .map(provider => html `\n          <w3m-onramp-provider-item\n            label=${provider.label}\n            name=${provider.name}\n            feeRange=${provider.feeRange}\n            @click=${() => {\n            this.onClickProvider(provider);\n        }}\n            ?disabled=${!provider.url}\n          ></w3m-onramp-provider-item>\n        `);\n    }\n    onClickProvider(provider) {\n        const activeChainNamespace = ChainController.state.activeChain;\n        OnRampController.setSelectedProvider(provider);\n        RouterController.push('BuyInProgress');\n        CoreHelperUtil.openHref(provider.url, 'popupWindow', 'width=600,height=800,scrollbars=yes');\n        EventsController.sendEvent({\n            type: 'track',\n            event: 'SELECT_BUY_PROVIDER',\n            properties: {\n                provider: provider.name,\n                isSmartAccount: AccountController.state.preferredAccountTypes?.[activeChainNamespace] ===\n                    W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT\n            }\n        });\n    }\n    async getCoinbaseOnRampURL() {\n        const address = AccountController.state.address;\n        const network = ChainController.state.activeCaipNetwork;\n        if (!address) {\n            throw new Error('No address found');\n        }\n        if (!network?.name) {\n            throw new Error('No network found');\n        }\n        const defaultNetwork = ConstantsUtil.WC_COINBASE_PAY_SDK_CHAIN_NAME_MAP[network.name] ?? ConstantsUtil.WC_COINBASE_PAY_SDK_FALLBACK_CHAIN;\n        const purchaseCurrency = OnRampController.state.purchaseCurrency;\n        const assets = purchaseCurrency\n            ? [purchaseCurrency.symbol]\n            : OnRampController.state.purchaseCurrencies.map(currency => currency.symbol);\n        return await BlockchainApiController.generateOnRampURL({\n            defaultNetwork,\n            destinationWallets: [\n                { address, blockchains: ConstantsUtil.WC_COINBASE_PAY_SDK_CHAINS, assets }\n            ],\n            partnerUserId: address,\n            purchaseAmount: OnRampController.state.purchaseAmount\n        });\n    }\n};\n__decorate([\n    state()\n], W3mOnRampProvidersView.prototype, \"providers\", void 0);\nW3mOnRampProvidersView = __decorate([\n    customElement('w3m-onramp-providers-view')\n], W3mOnRampProvidersView);\nexport { W3mOnRampProvidersView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host > wui-grid {\n    max-height: 360px;\n    overflow: auto;\n  }\n\n  wui-flex {\n    transition: opacity var(--wui-ease-out-power-1) var(--wui-duration-md);\n    will-change: opacity;\n  }\n\n  wui-grid::-webkit-scrollbar {\n    display: none;\n  }\n\n  wui-flex.disabled {\n    opacity: 0.3;\n    pointer-events: none;\n    user-select: none;\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 { ifDefined } from 'lit/directives/if-defined.js';\nimport { AssetController, ModalController, OnRampController, OptionsController, OptionsStateController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-list-item';\nimport '@reown/appkit-ui/wui-text';\nimport '../../partials/w3m-legal-checkbox/index.js';\nimport '../../partials/w3m-legal-footer/index.js';\nimport styles from './styles.js';\nlet W3mOnrampTokensView = class W3mOnrampTokensView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.selectedCurrency = OnRampController.state.purchaseCurrencies;\n        this.tokens = OnRampController.state.purchaseCurrencies;\n        this.tokenImages = AssetController.state.tokenImages;\n        this.checked = OptionsStateController.state.isLegalCheckboxChecked;\n        this.unsubscribe.push(...[\n            OnRampController.subscribe(val => {\n                this.selectedCurrency = val.purchaseCurrencies;\n                this.tokens = val.purchaseCurrencies;\n            }),\n            AssetController.subscribeKey('tokenImages', val => (this.tokenImages = val)),\n            OptionsStateController.subscribeKey('isLegalCheckboxChecked', val => {\n                this.checked = val;\n            })\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        const { termsConditionsUrl, privacyPolicyUrl } = OptionsController.state;\n        const legalCheckbox = OptionsController.state.features?.legalCheckbox;\n        const legalUrl = termsConditionsUrl || privacyPolicyUrl;\n        const showLegalCheckbox = Boolean(legalUrl) && Boolean(legalCheckbox);\n        const disabled = showLegalCheckbox && !this.checked;\n        return html `\n      <w3m-legal-checkbox></w3m-legal-checkbox>\n      <wui-flex\n        flexDirection=\"column\"\n        .padding=${['0', 's', 's', 's']}\n        gap=\"xs\"\n        class=${ifDefined(disabled ? 'disabled' : undefined)}\n      >\n        ${this.currenciesTemplate(disabled)}\n      </wui-flex>\n      <w3m-legal-footer></w3m-legal-footer>\n    `;\n    }\n    currenciesTemplate(disabled = false) {\n        return this.tokens.map(token => html `\n        <wui-list-item\n          imageSrc=${ifDefined(this.tokenImages?.[token.symbol])}\n          @click=${() => this.selectToken(token)}\n          variant=\"image\"\n          tabIdx=${ifDefined(disabled ? -1 : undefined)}\n        >\n          <wui-flex gap=\"3xs\" alignItems=\"center\">\n            <wui-text variant=\"paragraph-500\" color=\"fg-100\">${token.name}</wui-text>\n            <wui-text variant=\"small-400\" color=\"fg-200\">${token.symbol}</wui-text>\n          </wui-flex>\n        </wui-list-item>\n      `);\n    }\n    selectToken(currency) {\n        if (!currency) {\n            return;\n        }\n        OnRampController.setPurchaseCurrency(currency);\n        ModalController.close();\n    }\n};\nW3mOnrampTokensView.styles = styles;\n__decorate([\n    state()\n], W3mOnrampTokensView.prototype, \"selectedCurrency\", void 0);\n__decorate([\n    state()\n], W3mOnrampTokensView.prototype, \"tokens\", void 0);\n__decorate([\n    state()\n], W3mOnrampTokensView.prototype, \"tokenImages\", void 0);\n__decorate([\n    state()\n], W3mOnrampTokensView.prototype, \"checked\", void 0);\nW3mOnrampTokensView = __decorate([\n    customElement('w3m-onramp-token-select-view')\n], W3mOnrampTokensView);\nexport { W3mOnrampTokensView };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  @keyframes shake {\n    0% {\n      transform: translateX(0);\n    }\n    25% {\n      transform: translateX(3px);\n    }\n    50% {\n      transform: translateX(-3px);\n    }\n    75% {\n      transform: translateX(3px);\n    }\n    100% {\n      transform: translateX(0);\n    }\n  }\n\n  wui-flex:first-child:not(:only-child) {\n    position: relative;\n  }\n\n  wui-loading-thumbnail {\n    position: absolute;\n  }\n\n  wui-visual {\n    width: var(--wui-wallet-image-size-lg);\n    height: var(--wui-wallet-image-size-lg);\n    border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));\n    position: relative;\n    overflow: hidden;\n  }\n\n  wui-visual::after {\n    content: '';\n    display: block;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    inset: 0;\n    border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));\n    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);\n  }\n\n  wui-icon-box {\n    position: absolute;\n    right: calc(var(--wui-spacing-3xs) * -1);\n    bottom: calc(var(--wui-spacing-3xs) * -1);\n    opacity: 0;\n    transform: scale(0.5);\n    transition:\n      opacity var(--wui-ease-out-power-2) var(--wui-duration-lg),\n      transform var(--wui-ease-out-power-2) var(--wui-duration-lg);\n    will-change: opacity, transform;\n  }\n\n  wui-text[align='center'] {\n    width: 100%;\n    padding: 0px var(--wui-spacing-l);\n  }\n\n  [data-error='true'] wui-icon-box {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  [data-error='true'] > wui-flex:first-child {\n    animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;\n  }\n\n  [data-retry='false'] wui-link {\n    display: none;\n  }\n\n  [data-retry='true'] wui-link {\n    display: block;\n    opacity: 1;\n  }\n\n  wui-link {\n    padding: var(--wui-spacing-4xs) var(--wui-spacing-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 { property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { AccountController, BlockchainApiController, ConnectionController, CoreHelperUtil, OnRampController, RouterController, SnackController, ThemeController } 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-icon-box';\nimport '@reown/appkit-ui/wui-link';\nimport '@reown/appkit-ui/wui-loading-thumbnail';\nimport '@reown/appkit-ui/wui-text';\nimport '@reown/appkit-ui/wui-visual';\nimport styles from './styles.js';\nlet W3mBuyInProgressView = class W3mBuyInProgressView extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.selectedOnRampProvider = OnRampController.state.selectedProvider;\n        this.uri = ConnectionController.state.wcUri;\n        this.ready = false;\n        this.showRetry = false;\n        this.buffering = false;\n        this.error = false;\n        this.startTime = null;\n        this.isMobile = false;\n        this.onRetry = undefined;\n        this.unsubscribe.push(...[\n            OnRampController.subscribeKey('selectedProvider', val => {\n                this.selectedOnRampProvider = val;\n            })\n        ]);\n        this.watchTransactions();\n    }\n    disconnectedCallback() {\n        if (this.intervalId) {\n            clearInterval(this.intervalId);\n        }\n    }\n    render() {\n        let label = 'Continue in external window';\n        if (this.error) {\n            label = 'Buy failed';\n        }\n        else if (this.selectedOnRampProvider) {\n            label = `Buy in ${this.selectedOnRampProvider?.label}`;\n        }\n        const subLabel = this.error\n            ? 'Buy can be declined from your side or due to and error on the provider app'\n            : `We’ll notify you once your Buy is processed`;\n        return html `\n      <wui-flex\n        data-error=${ifDefined(this.error)}\n        data-retry=${this.showRetry}\n        flexDirection=\"column\"\n        alignItems=\"center\"\n        .padding=${['3xl', 'xl', 'xl', 'xl']}\n        gap=\"xl\"\n      >\n        <wui-flex justifyContent=\"center\" alignItems=\"center\">\n          <wui-visual\n            name=${ifDefined(this.selectedOnRampProvider?.name)}\n            size=\"lg\"\n            class=\"provider-image\"\n          >\n          </wui-visual>\n\n          ${this.error ? null : this.loaderTemplate()}\n\n          <wui-icon-box\n            background