coinley-checkout/dist/w3m-modal-e943cdec.mjs.map

A React SDK for Coinley cryptocurrency payment processing with multi-network support

{"version":3,"file":"w3m-modal-e943cdec.mjs","sources":["../node_modules/@reown/appkit-controllers/dist/esm/src/controllers/TooltipController.js","../node_modules/@reown/appkit-controllers/dist/esm/src/utils/ModalUtil.js","../node_modules/@reown/appkit-ui/dist/esm/src/components/wui-card/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/components/wui-card/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-alertbar/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-alertbar/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-alertbar/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-alertbar/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-icon-link/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-icon-link/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-select/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-select/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-header/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-header/index.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-snackbar/styles.js","../node_modules/@reown/appkit-ui/dist/esm/src/composites/wui-snackbar/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-snackbar/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-snackbar/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-tooltip/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/partials/w3m-tooltip/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/modal/w3m-router/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/modal/w3m-router/index.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/modal/w3m-modal/styles.js","../node_modules/@reown/appkit-scaffold-ui/dist/esm/src/modal/w3m-modal/index.js"],"sourcesContent":["import { proxy, subscribe as sub } from 'valtio/vanilla';\nimport { subscribeKey as subKey } from 'valtio/vanilla/utils';\nimport { withErrorBoundary } from '../utils/withErrorBoundary.js';\n// -- State --------------------------------------------- //\nconst state = proxy({\n    message: '',\n    open: false,\n    triggerRect: {\n        width: 0,\n        height: 0,\n        top: 0,\n        left: 0\n    },\n    variant: 'shade'\n});\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    showTooltip({ message, triggerRect, variant }) {\n        state.open = true;\n        state.message = message;\n        state.triggerRect = triggerRect;\n        state.variant = variant;\n    },\n    hide() {\n        state.open = false;\n        state.message = '';\n        state.triggerRect = {\n            width: 0,\n            height: 0,\n            top: 0,\n            left: 0\n        };\n    }\n};\n// Export the controller wrapped with our error boundary\nexport const TooltipController = withErrorBoundary(controller);\n//# sourceMappingURL=TooltipController.js.map","import { ModalController } from '../controllers/ModalController.js';\nimport { RouterController } from '../controllers/RouterController.js';\nimport { SIWXUtil } from './SIWXUtil.js';\nexport const ModalUtil = {\n    isUnsupportedChainView() {\n        return (RouterController.state.view === 'UnsupportedChain' ||\n            (RouterController.state.view === 'SwitchNetwork' &&\n                RouterController.state.history.includes('UnsupportedChain')));\n    },\n    async safeClose() {\n        if (this.isUnsupportedChainView()) {\n            ModalController.shake();\n            return;\n        }\n        const isSIWXCloseDisabled = await SIWXUtil.isSIWXCloseDisabled();\n        if (isSIWXCloseDisabled) {\n            ModalController.shake();\n            return;\n        }\n        ModalController.close();\n    }\n};\n//# sourceMappingURL=ModalUtil.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: block;\n    border-radius: clamp(0px, var(--wui-border-radius-l), 44px);\n    box-shadow: 0 0 0 1px var(--wui-color-gray-glass-005);\n    background-color: var(--wui-color-modal-bg);\n    overflow: hidden;\n  }\n\n  :host([data-embedded='true']) {\n    box-shadow:\n      0 0 0 1px var(--wui-color-gray-glass-005),\n      0px 4px 12px 4px var(--w3m-card-embedded-shadow-color);\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 { resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiCard = class WuiCard extends LitElement {\n    render() {\n        return html `<slot></slot>`;\n    }\n};\nWuiCard.styles = [resetStyles, styles];\nWuiCard = __decorate([\n    customElement('wui-card')\n], WuiCard);\nexport { WuiCard };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-s);\n    border: 1px solid var(--wui-color-dark-glass-100);\n    box-sizing: border-box;\n    background-color: var(--wui-color-bg-325);\n    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.25);\n  }\n\n  wui-flex {\n    width: 100%;\n  }\n\n  wui-text {\n    word-break: break-word;\n    flex: 1;\n  }\n\n  .close {\n    cursor: pointer;\n  }\n\n  .icon-box {\n    height: 40px;\n    width: 40px;\n    border-radius: var(--wui-border-radius-3xs);\n    background-color: var(--local-icon-bg-value);\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 { AlertController } from '@reown/appkit-controllers';\nimport '../../components/wui-icon/index.js';\nimport '../../components/wui-text/index.js';\nimport '../../layout/wui-flex/index.js';\nimport { resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiAlertBar = class WuiAlertBar extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.message = '';\n        this.backgroundColor = 'accent-100';\n        this.iconColor = 'accent-100';\n        this.icon = 'info';\n    }\n    render() {\n        this.style.cssText = `\n      --local-icon-bg-value: var(--wui-color-${this.backgroundColor});\n   `;\n        return html `\n      <wui-flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n        <wui-flex columnGap=\"xs\" flexDirection=\"row\" alignItems=\"center\">\n          <wui-flex\n            flexDirection=\"row\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            class=\"icon-box\"\n          >\n            <wui-icon color=${this.iconColor} size=\"md\" name=${this.icon}></wui-icon>\n          </wui-flex>\n          <wui-text variant=\"small-500\" color=\"bg-350\" data-testid=\"wui-alertbar-text\"\n            >${this.message}</wui-text\n          >\n        </wui-flex>\n        <wui-icon\n          class=\"close\"\n          color=\"bg-350\"\n          size=\"sm\"\n          name=\"close\"\n          @click=${this.onClose}\n        ></wui-icon>\n      </wui-flex>\n    `;\n    }\n    onClose() {\n        AlertController.close();\n    }\n};\nWuiAlertBar.styles = [resetStyles, styles];\n__decorate([\n    property()\n], WuiAlertBar.prototype, \"message\", void 0);\n__decorate([\n    property()\n], WuiAlertBar.prototype, \"backgroundColor\", void 0);\n__decorate([\n    property()\n], WuiAlertBar.prototype, \"iconColor\", void 0);\n__decorate([\n    property()\n], WuiAlertBar.prototype, \"icon\", void 0);\nWuiAlertBar = __decorate([\n    customElement('wui-alertbar')\n], WuiAlertBar);\nexport { WuiAlertBar };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: block;\n    position: absolute;\n    top: var(--wui-spacing-s);\n    left: var(--wui-spacing-l);\n    right: var(--wui-spacing-l);\n    opacity: 0;\n    pointer-events: 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 { AlertController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-alertbar';\nimport styles from './styles.js';\nexport const presets = {\n    info: {\n        backgroundColor: 'fg-350',\n        iconColor: 'fg-325',\n        icon: 'info'\n    },\n    success: {\n        backgroundColor: 'success-glass-reown-020',\n        iconColor: 'success-125',\n        icon: 'checkmark'\n    },\n    warning: {\n        backgroundColor: 'warning-glass-reown-020',\n        iconColor: 'warning-100',\n        icon: 'warningCircle'\n    },\n    error: {\n        backgroundColor: 'error-glass-reown-020',\n        iconColor: 'error-125',\n        icon: 'exclamationTriangle'\n    }\n};\nlet W3mAlertBar = class W3mAlertBar extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.open = AlertController.state.open;\n        this.onOpen(true);\n        this.unsubscribe.push(AlertController.subscribeKey('open', val => {\n            this.open = val;\n            this.onOpen(false);\n        }));\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        const { message, variant } = AlertController.state;\n        const preset = presets[variant];\n        return html `\n      <wui-alertbar\n        message=${message}\n        backgroundColor=${preset?.backgroundColor}\n        iconColor=${preset?.iconColor}\n        icon=${preset?.icon}\n      ></wui-alertbar>\n    `;\n    }\n    onOpen(isMounted) {\n        if (this.open) {\n            this.animate([\n                { opacity: 0, transform: 'scale(0.85)' },\n                { opacity: 1, transform: 'scale(1)' }\n            ], {\n                duration: 150,\n                fill: 'forwards',\n                easing: 'ease'\n            });\n            this.style.cssText = `pointer-events: auto`;\n        }\n        else if (!isMounted) {\n            this.animate([\n                { opacity: 1, transform: 'scale(1)' },\n                { opacity: 0, transform: 'scale(0.85)' }\n            ], {\n                duration: 150,\n                fill: 'forwards',\n                easing: 'ease'\n            });\n            this.style.cssText = `pointer-events: none`;\n        }\n    }\n};\nW3mAlertBar.styles = styles;\n__decorate([\n    state()\n], W3mAlertBar.prototype, \"open\", void 0);\nW3mAlertBar = __decorate([\n    customElement('w3m-alertbar')\n], W3mAlertBar);\nexport { W3mAlertBar };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  button {\n    border-radius: var(--local-border-radius);\n    color: var(--wui-color-fg-100);\n    padding: var(--local-padding);\n  }\n\n  @media (max-width: 700px) {\n    button {\n      padding: var(--wui-spacing-s);\n    }\n  }\n\n  button > wui-icon {\n    pointer-events: none;\n  }\n\n  button:disabled > wui-icon {\n    color: var(--wui-color-bg-300) !important;\n  }\n\n  button:disabled {\n    background-color: transparent;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../../components/wui-icon/index.js';\nimport { colorStyles, elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiIconLink = class WuiIconLink extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.size = 'md';\n        this.disabled = false;\n        this.icon = 'copy';\n        this.iconColor = 'inherit';\n    }\n    render() {\n        const borderRadius = this.size === 'lg' ? '--wui-border-radius-xs' : '--wui-border-radius-xxs';\n        const padding = this.size === 'lg' ? '--wui-spacing-1xs' : '--wui-spacing-2xs';\n        this.style.cssText = `\n    --local-border-radius: var(${borderRadius});\n    --local-padding: var(${padding});\n`;\n        return html `\n      <button ?disabled=${this.disabled}>\n        <wui-icon color=${this.iconColor} size=${this.size} name=${this.icon}></wui-icon>\n      </button>\n    `;\n    }\n};\nWuiIconLink.styles = [resetStyles, elementStyles, colorStyles, styles];\n__decorate([\n    property()\n], WuiIconLink.prototype, \"size\", void 0);\n__decorate([\n    property({ type: Boolean })\n], WuiIconLink.prototype, \"disabled\", void 0);\n__decorate([\n    property()\n], WuiIconLink.prototype, \"icon\", void 0);\n__decorate([\n    property()\n], WuiIconLink.prototype, \"iconColor\", void 0);\nWuiIconLink = __decorate([\n    customElement('wui-icon-link')\n], WuiIconLink);\nexport { WuiIconLink };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  button {\n    display: block;\n    display: flex;\n    align-items: center;\n    padding: var(--wui-spacing-xxs);\n    gap: var(--wui-spacing-xxs);\n    transition: all var(--wui-ease-out-power-1) var(--wui-duration-md);\n    border-radius: var(--wui-border-radius-xxs);\n  }\n\n  wui-image {\n    border-radius: 100%;\n    width: var(--wui-spacing-xl);\n    height: var(--wui-spacing-xl);\n  }\n\n  wui-icon-box {\n    width: var(--wui-spacing-xl);\n    height: var(--wui-spacing-xl);\n  }\n\n  button:hover {\n    background-color: var(--wui-color-gray-glass-002);\n  }\n\n  button:active {\n    background-color: var(--wui-color-gray-glass-005);\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport '../../components/wui-icon/index.js';\nimport '../../components/wui-image/index.js';\nimport '../../composites/wui-icon-box/index.js';\nimport { colorStyles, elementStyles, resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport styles from './styles.js';\nlet WuiSelect = class WuiSelect extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.imageSrc = '';\n    }\n    render() {\n        return html `<button>\n      ${this.imageTemplate()}\n      <wui-icon size=\"xs\" color=\"fg-200\" name=\"chevronBottom\"></wui-icon>\n    </button>`;\n    }\n    imageTemplate() {\n        if (this.imageSrc) {\n            return html `<wui-image src=${this.imageSrc} alt=\"select visual\"></wui-image>`;\n        }\n        return html `<wui-icon-box\n      size=\"xxs\"\n      iconColor=\"fg-200\"\n      backgroundColor=\"fg-100\"\n      background=\"opaque\"\n      icon=\"networkPlaceholder\"\n    ></wui-icon-box>`;\n    }\n};\nWuiSelect.styles = [resetStyles, elementStyles, colorStyles, styles];\n__decorate([\n    property()\n], WuiSelect.prototype, \"imageSrc\", void 0);\nWuiSelect = __decorate([\n    customElement('wui-select')\n], WuiSelect);\nexport { WuiSelect };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    height: 64px;\n  }\n\n  wui-text {\n    text-transform: capitalize;\n  }\n\n  wui-flex.w3m-header-title {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  wui-flex.w3m-header-title[view-direction='prev'] {\n    animation:\n      slide-down-out 120ms forwards var(--wui-ease-out-power-2),\n      slide-down-in 120ms forwards var(--wui-ease-out-power-2);\n    animation-delay: 0ms, 200ms;\n  }\n\n  wui-flex.w3m-header-title[view-direction='next'] {\n    animation:\n      slide-up-out 120ms forwards var(--wui-ease-out-power-2),\n      slide-up-in 120ms forwards var(--wui-ease-out-power-2);\n    animation-delay: 0ms, 200ms;\n  }\n\n  wui-icon-link[data-hidden='true'] {\n    opacity: 0 !important;\n    pointer-events: none;\n  }\n\n  @keyframes slide-up-out {\n    from {\n      transform: translateY(0px);\n      opacity: 1;\n    }\n    to {\n      transform: translateY(3px);\n      opacity: 0;\n    }\n  }\n\n  @keyframes slide-up-in {\n    from {\n      transform: translateY(-3px);\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slide-down-out {\n    from {\n      transform: translateY(0px);\n      opacity: 1;\n    }\n    to {\n      transform: translateY(-3px);\n      opacity: 0;\n    }\n  }\n\n  @keyframes slide-down-in {\n    from {\n      transform: translateY(3px);\n      opacity: 0;\n    }\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\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 { AccountController, AssetController, AssetUtil, ChainController, ConnectorController, EventsController, ModalUtil, OptionsController, RouterController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-flex';\nimport '@reown/appkit-ui/wui-icon-link';\nimport '@reown/appkit-ui/wui-select';\nimport '@reown/appkit-ui/wui-tag';\nimport '@reown/appkit-ui/wui-text';\nimport { ConstantsUtil } from '../../utils/ConstantsUtil.js';\nimport styles from './styles.js';\nconst BETA_SCREENS = ['SmartSessionList'];\nfunction headings() {\n    const connectorName = RouterController.state.data?.connector?.name;\n    const walletName = RouterController.state.data?.wallet?.name;\n    const networkName = RouterController.state.data?.network?.name;\n    const name = walletName ?? connectorName;\n    const connectors = ConnectorController.getConnectors();\n    const isEmail = connectors.length === 1 && connectors[0]?.id === 'w3m-email';\n    return {\n        Connect: `Connect ${isEmail ? 'Email' : ''} Wallet`,\n        Create: 'Create Wallet',\n        ChooseAccountName: undefined,\n        Account: undefined,\n        AccountSettings: undefined,\n        AllWallets: 'All Wallets',\n        ApproveTransaction: 'Approve Transaction',\n        BuyInProgress: 'Buy',\n        ConnectingExternal: name ?? 'Connect Wallet',\n        ConnectingWalletConnect: name ?? 'WalletConnect',\n        ConnectingWalletConnectBasic: 'WalletConnect',\n        ConnectingSiwe: 'Sign In',\n        Convert: 'Convert',\n        ConvertSelectToken: 'Select token',\n        ConvertPreview: 'Preview convert',\n        Downloads: name ? `Get ${name}` : 'Downloads',\n        EmailLogin: 'Email Login',\n        EmailVerifyOtp: 'Confirm Email',\n        EmailVerifyDevice: 'Register Device',\n        GetWallet: 'Get a wallet',\n        Networks: 'Choose Network',\n        OnRampProviders: 'Choose Provider',\n        OnRampActivity: 'Activity',\n        OnRampTokenSelect: 'Select Token',\n        OnRampFiatSelect: 'Select Currency',\n        Pay: 'How you pay',\n        Profile: undefined,\n        SwitchNetwork: networkName ?? 'Switch Network',\n        SwitchAddress: 'Switch Address',\n        Transactions: 'Activity',\n        UnsupportedChain: 'Switch Network',\n        UpgradeEmailWallet: 'Upgrade your Wallet',\n        UpdateEmailWallet: 'Edit Email',\n        UpdateEmailPrimaryOtp: 'Confirm Current Email',\n        UpdateEmailSecondaryOtp: 'Confirm New Email',\n        WhatIsABuy: 'What is Buy?',\n        RegisterAccountName: 'Choose name',\n        RegisterAccountNameSuccess: '',\n        WalletReceive: 'Receive',\n        WalletCompatibleNetworks: 'Compatible Networks',\n        Swap: 'Swap',\n        SwapSelectToken: 'Select token',\n        SwapPreview: 'Preview swap',\n        WalletSend: 'Send',\n        WalletSendPreview: 'Review send',\n        WalletSendSelectToken: 'Select Token',\n        WhatIsANetwork: 'What is a network?',\n        WhatIsAWallet: 'What is a wallet?',\n        ConnectWallets: 'Connect wallet',\n        ConnectSocials: 'All socials',\n        ConnectingSocial: AccountController.state.socialProvider\n            ? AccountController.state.socialProvider\n            : 'Connect Social',\n        ConnectingMultiChain: 'Select chain',\n        ConnectingFarcaster: 'Farcaster',\n        SwitchActiveChain: 'Switch chain',\n        SmartSessionCreated: undefined,\n        SmartSessionList: 'Smart Sessions',\n        SIWXSignMessage: 'Sign In',\n        PayLoading: 'Payment in progress'\n    };\n}\nlet W3mHeader = class W3mHeader extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.heading = headings()[RouterController.state.view];\n        this.network = ChainController.state.activeCaipNetwork;\n        this.networkImage = AssetUtil.getNetworkImage(this.network);\n        this.showBack = false;\n        this.prevHistoryLength = 1;\n        this.view = RouterController.state.view;\n        this.viewDirection = '';\n        this.headerText = headings()[RouterController.state.view];\n        this.unsubscribe.push(AssetController.subscribeNetworkImages(() => {\n            this.networkImage = AssetUtil.getNetworkImage(this.network);\n        }), RouterController.subscribeKey('view', val => {\n            setTimeout(() => {\n                this.view = val;\n                this.headerText = headings()[val];\n            }, ConstantsUtil.ANIMATION_DURATIONS.HeaderText);\n            this.onViewChange();\n            this.onHistoryChange();\n        }), ChainController.subscribeKey('activeCaipNetwork', val => {\n            this.network = val;\n            this.networkImage = AssetUtil.getNetworkImage(this.network);\n        }));\n    }\n    disconnectCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        return html `\n      <wui-flex .padding=${this.getPadding()} justifyContent=\"space-between\" alignItems=\"center\">\n        ${this.leftHeaderTemplate()} ${this.titleTemplate()} ${this.rightHeaderTemplate()}\n      </wui-flex>\n    `;\n    }\n    onWalletHelp() {\n        EventsController.sendEvent({ type: 'track', event: 'CLICK_WALLET_HELP' });\n        RouterController.push('WhatIsAWallet');\n    }\n    async onClose() {\n        await ModalUtil.safeClose();\n    }\n    rightHeaderTemplate() {\n        const isSmartSessionsEnabled = OptionsController?.state?.features?.smartSessions;\n        if (RouterController.state.view !== 'Account' || !isSmartSessionsEnabled) {\n            return this.closeButtonTemplate();\n        }\n        return html `<wui-flex>\n      <wui-icon-link\n        icon=\"clock\"\n        @click=${() => RouterController.push('SmartSessionList')}\n        data-testid=\"w3m-header-smart-sessions\"\n      ></wui-icon-link>\n      ${this.closeButtonTemplate()}\n    </wui-flex> `;\n    }\n    closeButtonTemplate() {\n        return html `\n      <wui-icon-link\n        icon=\"close\"\n        @click=${this.onClose.bind(this)}\n        data-testid=\"w3m-header-close\"\n      ></wui-icon-link>\n    `;\n    }\n    titleTemplate() {\n        const isBeta = BETA_SCREENS.includes(this.view);\n        return html `\n      <wui-flex\n        view-direction=\"${this.viewDirection}\"\n        class=\"w3m-header-title\"\n        alignItems=\"center\"\n        gap=\"xs\"\n      >\n        <wui-text variant=\"paragraph-700\" color=\"fg-100\" data-testid=\"w3m-header-text\"\n          >${this.headerText}</wui-text\n        >\n        ${isBeta ? html `<wui-tag variant=\"main\">Beta</wui-tag>` : null}\n      </wui-flex>\n    `;\n    }\n    leftHeaderTemplate() {\n        const { view } = RouterController.state;\n        const isConnectHelp = view === 'Connect';\n        const isEmbeddedEnable = OptionsController.state.enableEmbedded;\n        const isApproveTransaction = view === 'ApproveTransaction';\n        const isConnectingSIWEView = view === 'ConnectingSiwe';\n        const isAccountView = view === 'Account';\n        const enableNetworkSwitch = OptionsController.state.enableNetworkSwitch;\n        const shouldHideBack = isApproveTransaction || isConnectingSIWEView || (isConnectHelp && isEmbeddedEnable);\n        if (isAccountView && enableNetworkSwitch) {\n            return html `<wui-select\n        id=\"dynamic\"\n        data-testid=\"w3m-account-select-network\"\n        active-network=${ifDefined(this.network?.name)}\n        @click=${this.onNetworks.bind(this)}\n        imageSrc=${ifDefined(this.networkImage)}\n      ></wui-select>`;\n        }\n        if (this.showBack && !shouldHideBack) {\n            return html `<wui-icon-link\n        data-testid=\"header-back\"\n        id=\"dynamic\"\n        icon=\"chevronLeft\"\n        @click=${this.onGoBack.bind(this)}\n      ></wui-icon-link>`;\n        }\n        return html `<wui-icon-link\n      data-hidden=${!isConnectHelp}\n      id=\"dynamic\"\n      icon=\"helpCircle\"\n      @click=${this.onWalletHelp.bind(this)}\n    ></wui-icon-link>`;\n    }\n    onNetworks() {\n        if (this.isAllowedNetworkSwitch()) {\n            EventsController.sendEvent({ type: 'track', event: 'CLICK_NETWORKS' });\n            RouterController.push('Networks');\n        }\n    }\n    isAllowedNetworkSwitch() {\n        const requestedCaipNetworks = ChainController.getAllRequestedCaipNetworks();\n        const isMultiNetwork = requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false;\n        const isValidNetwork = requestedCaipNetworks?.find(({ id }) => id === this.network?.id);\n        return isMultiNetwork || !isValidNetwork;\n    }\n    getPadding() {\n        if (this.heading) {\n            return ['l', '2l', 'l', '2l'];\n        }\n        return ['0', '2l', '0', '2l'];\n    }\n    onViewChange() {\n        const { history } = RouterController.state;\n        let direction = ConstantsUtil.VIEW_DIRECTION.Next;\n        if (history.length < this.prevHistoryLength) {\n            direction = ConstantsUtil.VIEW_DIRECTION.Prev;\n        }\n        this.prevHistoryLength = history.length;\n        this.viewDirection = direction;\n    }\n    async onHistoryChange() {\n        const { history } = RouterController.state;\n        const buttonEl = this.shadowRoot?.querySelector('#dynamic');\n        if (history.length > 1 && !this.showBack && buttonEl) {\n            await buttonEl.animate([{ opacity: 1 }, { opacity: 0 }], {\n                duration: 200,\n                fill: 'forwards',\n                easing: 'ease'\n            }).finished;\n            this.showBack = true;\n            buttonEl.animate([{ opacity: 0 }, { opacity: 1 }], {\n                duration: 200,\n                fill: 'forwards',\n                easing: 'ease'\n            });\n        }\n        else if (history.length <= 1 && this.showBack && buttonEl) {\n            await buttonEl.animate([{ opacity: 1 }, { opacity: 0 }], {\n                duration: 200,\n                fill: 'forwards',\n                easing: 'ease'\n            }).finished;\n            this.showBack = false;\n            buttonEl.animate([{ opacity: 0 }, { opacity: 1 }], {\n                duration: 200,\n                fill: 'forwards',\n                easing: 'ease'\n            });\n        }\n    }\n    onGoBack() {\n        RouterController.goBack();\n    }\n};\nW3mHeader.styles = styles;\n__decorate([\n    state()\n], W3mHeader.prototype, \"heading\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"network\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"networkImage\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"showBack\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"prevHistoryLength\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"view\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"viewDirection\", void 0);\n__decorate([\n    state()\n], W3mHeader.prototype, \"headerText\", void 0);\nW3mHeader = __decorate([\n    customElement('w3m-header')\n], W3mHeader);\nexport { W3mHeader };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: flex;\n    column-gap: var(--wui-spacing-s);\n    align-items: center;\n    padding: var(--wui-spacing-xs) var(--wui-spacing-m) var(--wui-spacing-xs) var(--wui-spacing-xs);\n    border-radius: var(--wui-border-radius-s);\n    border: 1px solid var(--wui-color-gray-glass-005);\n    box-sizing: border-box;\n    background-color: var(--wui-color-bg-175);\n    box-shadow:\n      0px 14px 64px -4px rgba(0, 0, 0, 0.15),\n      0px 8px 22px -6px rgba(0, 0, 0, 0.15);\n\n    max-width: 300px;\n  }\n\n  :host wui-loading-spinner {\n    margin-left: 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 { property } from 'lit/decorators.js';\nimport '../../components/wui-icon/index.js';\nimport '../../components/wui-loading-spinner/index.js';\nimport '../../components/wui-text/index.js';\nimport { resetStyles } from '../../utils/ThemeUtil.js';\nimport { customElement } from '../../utils/WebComponentsUtil.js';\nimport '../wui-icon-box/index.js';\nimport styles from './styles.js';\nlet WuiSnackbar = class WuiSnackbar extends LitElement {\n    constructor() {\n        super(...arguments);\n        this.backgroundColor = 'accent-100';\n        this.iconColor = 'accent-100';\n        this.icon = 'checkmark';\n        this.message = '';\n        this.loading = false;\n        this.iconType = 'default';\n    }\n    render() {\n        return html `\n      ${this.templateIcon()}\n      <wui-text variant=\"paragraph-500\" color=\"fg-100\" data-testid=\"wui-snackbar-message\"\n        >${this.message}</wui-text\n      >\n    `;\n    }\n    templateIcon() {\n        if (this.loading) {\n            return html `<wui-loading-spinner size=\"md\" color=\"accent-100\"></wui-loading-spinner>`;\n        }\n        if (this.iconType === 'default') {\n            return html `<wui-icon size=\"xl\" color=${this.iconColor} name=${this.icon}></wui-icon>`;\n        }\n        return html `<wui-icon-box\n      size=\"sm\"\n      iconSize=\"xs\"\n      iconColor=${this.iconColor}\n      backgroundColor=${this.backgroundColor}\n      icon=${this.icon}\n      background=\"opaque\"\n    ></wui-icon-box>`;\n    }\n};\nWuiSnackbar.styles = [resetStyles, styles];\n__decorate([\n    property()\n], WuiSnackbar.prototype, \"backgroundColor\", void 0);\n__decorate([\n    property()\n], WuiSnackbar.prototype, \"iconColor\", void 0);\n__decorate([\n    property()\n], WuiSnackbar.prototype, \"icon\", void 0);\n__decorate([\n    property()\n], WuiSnackbar.prototype, \"message\", void 0);\n__decorate([\n    property()\n], WuiSnackbar.prototype, \"loading\", void 0);\n__decorate([\n    property()\n], WuiSnackbar.prototype, \"iconType\", void 0);\nWuiSnackbar = __decorate([\n    customElement('wui-snackbar')\n], WuiSnackbar);\nexport { WuiSnackbar };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    display: block;\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n    top: 11px;\n    left: 50%;\n    width: max-content;\n  }\n`;\n//# sourceMappingURL=styles.js.map","var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n    return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nimport { LitElement, html } from 'lit';\nimport { state } from 'lit/decorators.js';\nimport { SnackController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport '@reown/appkit-ui/wui-snackbar';\nimport styles from './styles.js';\nconst presets = {\n    loading: undefined,\n    success: {\n        backgroundColor: 'success-100',\n        iconColor: 'success-100',\n        icon: 'checkmark'\n    },\n    error: {\n        backgroundColor: 'error-100',\n        iconColor: 'error-100',\n        icon: 'close'\n    }\n};\nlet W3mSnackBar = class W3mSnackBar extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.timeout = undefined;\n        this.open = SnackController.state.open;\n        this.unsubscribe.push(SnackController.subscribeKey('open', val => {\n            this.open = val;\n            this.onOpen();\n        }));\n    }\n    disconnectedCallback() {\n        clearTimeout(this.timeout);\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        const { message, variant, svg } = SnackController.state;\n        const preset = presets[variant];\n        const { icon, iconColor } = svg ?? preset ?? {};\n        return html `\n      <wui-snackbar\n        message=${message}\n        backgroundColor=${preset?.backgroundColor}\n        iconColor=${iconColor}\n        icon=${icon}\n        .loading=${variant === 'loading'}\n      ></wui-snackbar>\n    `;\n    }\n    onOpen() {\n        clearTimeout(this.timeout);\n        if (this.open) {\n            this.animate([\n                { opacity: 0, transform: 'translateX(-50%) scale(0.85)' },\n                { opacity: 1, transform: 'translateX(-50%) scale(1)' }\n            ], {\n                duration: 150,\n                fill: 'forwards',\n                easing: 'ease'\n            });\n            if (this.timeout) {\n                clearTimeout(this.timeout);\n            }\n            if (SnackController.state.autoClose) {\n                this.timeout = setTimeout(() => SnackController.hide(), 2500);\n            }\n        }\n        else {\n            this.animate([\n                { opacity: 1, transform: 'translateX(-50%) scale(1)' },\n                { opacity: 0, transform: 'translateX(-50%) scale(0.85)' }\n            ], {\n                duration: 150,\n                fill: 'forwards',\n                easing: 'ease'\n            });\n        }\n    }\n};\nW3mSnackBar.styles = styles;\n__decorate([\n    state()\n], W3mSnackBar.prototype, \"open\", void 0);\nW3mSnackBar = __decorate([\n    customElement('w3m-snackbar')\n], W3mSnackBar);\nexport { W3mSnackBar };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    pointer-events: none;\n  }\n\n  :host > wui-flex {\n    display: var(--w3m-tooltip-display);\n    opacity: var(--w3m-tooltip-opacity);\n    padding: 9px var(--wui-spacing-s) 10px var(--wui-spacing-s);\n    border-radius: var(--wui-border-radius-xxs);\n    color: var(--wui-color-bg-100);\n    position: fixed;\n    top: var(--w3m-tooltip-top);\n    left: var(--w3m-tooltip-left);\n    transform: translate(calc(-50% + var(--w3m-tooltip-parent-width)), calc(-100% - 8px));\n    max-width: calc(var(--w3m-modal-width) - var(--wui-spacing-xl));\n    transition: opacity 0.2s var(--wui-ease-out-power-2);\n    will-change: opacity;\n  }\n\n  :host([data-variant='shade']) > wui-flex {\n    background-color: var(--wui-color-bg-150);\n    border: 1px solid var(--wui-color-gray-glass-005);\n  }\n\n  :host([data-variant='shade']) > wui-flex > wui-text {\n    color: var(--wui-color-fg-150);\n  }\n\n  :host([data-variant='fill']) > wui-flex {\n    background-color: var(--wui-color-fg-100);\n    border: none;\n  }\n\n  wui-icon {\n    position: absolute;\n    width: 12px !important;\n    height: 4px !important;\n    color: var(--wui-color-bg-150);\n  }\n\n  wui-icon[data-placement='top'] {\n    bottom: 0px;\n    left: 50%;\n    transform: translate(-50%, 95%);\n  }\n\n  wui-icon[data-placement='bottom'] {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -95%) rotate(180deg);\n  }\n\n  wui-icon[data-placement='right'] {\n    top: 50%;\n    left: 0;\n    transform: translate(-65%, -50%) rotate(90deg);\n  }\n\n  wui-icon[data-placement='left'] {\n    top: 50%;\n    right: 0%;\n    transform: translate(65%, -50%) rotate(270deg);\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 { TooltipController } 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-text';\nimport styles from './styles.js';\nlet W3mTooltip = class W3mTooltip extends LitElement {\n    constructor() {\n        super();\n        this.unsubscribe = [];\n        this.open = TooltipController.state.open;\n        this.message = TooltipController.state.message;\n        this.triggerRect = TooltipController.state.triggerRect;\n        this.variant = TooltipController.state.variant;\n        this.unsubscribe.push(...[\n            TooltipController.subscribe(newState => {\n                this.open = newState.open;\n                this.message = newState.message;\n                this.triggerRect = newState.triggerRect;\n                this.variant = newState.variant;\n            })\n        ]);\n    }\n    disconnectedCallback() {\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        this.dataset['variant'] = this.variant;\n        const topValue = this.triggerRect.top;\n        const leftValue = this.triggerRect.left;\n        this.style.cssText = `\n    --w3m-tooltip-top: ${topValue}px;\n    --w3m-tooltip-left: ${leftValue}px;\n    --w3m-tooltip-parent-width: ${this.triggerRect.width / 2}px;\n    --w3m-tooltip-display: ${this.open ? 'flex' : 'none'};\n    --w3m-tooltip-opacity: ${this.open ? 1 : 0};\n    `;\n        return html `<wui-flex>\n      <wui-icon data-placement=\"top\" color=\"fg-100\" size=\"inherit\" name=\"cursor\"></wui-icon>\n      <wui-text color=\"inherit\" variant=\"small-500\">${this.message}</wui-text>\n    </wui-flex>`;\n    }\n};\nW3mTooltip.styles = [styles];\n__decorate([\n    state()\n], W3mTooltip.prototype, \"open\", void 0);\n__decorate([\n    state()\n], W3mTooltip.prototype, \"message\", void 0);\n__decorate([\n    state()\n], W3mTooltip.prototype, \"triggerRect\", void 0);\n__decorate([\n    state()\n], W3mTooltip.prototype, \"variant\", void 0);\nW3mTooltip = __decorate([\n    customElement('w3m-tooltip'),\n    customElement('w3m-tooltip')\n], W3mTooltip);\nexport { W3mTooltip };\n//# sourceMappingURL=index.js.map","import { css } from 'lit';\nexport default css `\n  :host {\n    --prev-height: 0px;\n    --new-height: 0px;\n    display: block;\n  }\n\n  div.w3m-router-container {\n    transform: translateY(0);\n    opacity: 1;\n  }\n\n  div.w3m-router-container[view-direction='prev'] {\n    animation:\n      slide-left-out 150ms forwards ease,\n      slide-left-in 150ms forwards ease;\n    animation-delay: 0ms, 200ms;\n  }\n\n  div.w3m-router-container[view-direction='next'] {\n    animation:\n      slide-right-out 150ms forwards ease,\n      slide-right-in 150ms forwards ease;\n    animation-delay: 0ms, 200ms;\n  }\n\n  @keyframes slide-left-out {\n    from {\n      transform: translateX(0px);\n      opacity: 1;\n    }\n    to {\n      transform: translateX(10px);\n      opacity: 0;\n    }\n  }\n\n  @keyframes slide-left-in {\n    from {\n      transform: translateX(-10px);\n      opacity: 0;\n    }\n    to {\n      transform: translateX(0);\n      opacity: 1;\n    }\n  }\n\n  @keyframes slide-right-out {\n    from {\n      transform: translateX(0px);\n      opacity: 1;\n    }\n    to {\n      transform: translateX(-10px);\n      opacity: 0;\n    }\n  }\n\n  @keyframes slide-right-in {\n    from {\n      transform: translateX(10px);\n      opacity: 0;\n    }\n    to {\n      transform: translateX(0);\n      opacity: 1;\n    }\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 { RouterController, TooltipController } from '@reown/appkit-controllers';\nimport { customElement } from '@reown/appkit-ui';\nimport { ConstantsUtil } from '../../utils/ConstantsUtil.js';\nimport styles from './styles.js';\nlet W3mRouter = class W3mRouter extends LitElement {\n    constructor() {\n        super();\n        this.resizeObserver = undefined;\n        this.prevHeight = '0px';\n        this.prevHistoryLength = 1;\n        this.unsubscribe = [];\n        this.view = RouterController.state.view;\n        this.viewDirection = '';\n        this.unsubscribe.push(RouterController.subscribeKey('view', val => this.onViewChange(val)));\n    }\n    firstUpdated() {\n        this.resizeObserver = new ResizeObserver(([content]) => {\n            const height = `${content?.contentRect.height}px`;\n            if (this.prevHeight !== '0px') {\n                this.style.setProperty('--prev-height', this.prevHeight);\n                this.style.setProperty('--new-height', height);\n                this.style.animation = 'w3m-view-height 150ms forwards ease';\n                this.style.height = 'auto';\n            }\n            setTimeout(() => {\n                this.prevHeight = height;\n                this.style.animation = 'unset';\n            }, ConstantsUtil.ANIMATION_DURATIONS.ModalHeight);\n        });\n        this.resizeObserver?.observe(this.getWrapper());\n    }\n    disconnectedCallback() {\n        this.resizeObserver?.unobserve(this.getWrapper());\n        this.unsubscribe.forEach(unsubscribe => unsubscribe());\n    }\n    render() {\n        return html `<div class=\"w3m-router-container\" view-direction=\"${this.viewDirection}\">\n      ${this.viewTemplate()}\n    </div>`;\n    }\n    viewTemplate() {\n        switch (this.view) {\n            case 'AccountSettings':\n                return html `<w3m-account-settings-view></w3m-account-settings-view>`;\n            case 'Account':\n                return html `<w3m-account-view></w3m-account-view>`;\n            case 'AllWallets':\n                return html `<w3m-all-wallets-view></w3m-all-wallets-view>`;\n            case 'ApproveTransaction':\n                return html `<w3m-approve-transaction-view></w3m-approve-transaction-view>`;\n            case 'BuyInProgress':\n                return html `<w3m-buy-in-progress-view></w3m-buy-in-progress-view>`;\n            case 'ChooseAccountName':\n                return html `<w3m-choose-account-name-view></w3m-choose-account-name-view>`;\n            case 'Connect':\n                return html `<w3m-connect-view></w3m-connect-view>`;\n            case 'Create':\n                return html `<w3m-connect-view walletGuide=\"explore\"></w3m-connect-view>`;\n            case 'ConnectingWalletConnect':\n                return html `<w3m-connecting-wc-view></w3m-connecting-wc-view>`;\n            case 'ConnectingWalletConnectBasic':\n                return html `<w3m-connecting-wc-basic-view></w3m-connecting-wc-basic-view>`;\n            case 'ConnectingExternal':\n                return html `<w3m-connecting-external-view></w3m-connecting-external-view>`;\n            case 'ConnectingSiwe':\n                return html `<w3m-connecting-siwe-view></w3m-connecting-siwe-view>`;\n            case 'ConnectWallets':\n                return html `<w3m-connect-wallets-view></w3m-connect-wallets-view>`;\n            case 'ConnectSocials':\n                return html `<w3m-connect-socials-view></w3m-connect-socials-view>`;\n            case 'ConnectingSocial':\n                return html `<w3m-connecting-social-view></w3m-connecting-social-view>`;\n            case 'Downloads':\n                return html `<w3m-downloads-view></w3m-downloads-view>`;\n            case 'EmailLogin':\n                return html `<w3m-email-login-view></w3m-email-login-view>`;\n            case 'EmailVerifyOtp':\n                return html `<w3m-email-verify-otp-view></w3m-email-verify-otp-view>`;\n            case 'EmailVerifyDevice':\n                return html `<w3m-email-verify-device-view></w3m-email-verify-device-view>`;\n            case 'GetWallet':\n                return html `<w3m-get-wallet-view></w3m-get-wallet-vi