@reown/appkit-scaffold-ui 0.0.3

package/dist/esm/src/views/w3m-switch-active-chain-view/styles.js

@@ -0,0 +1,91 @@
+import { css } from 'lit';
+export default css `
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(3px);
+    }
+    50% {
+      transform: translateX(-3px);
+    }
+    75% {
+      transform: translateX(3px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  wui-flex:first-child:not(:only-child) {
+    position: relative;
+  }
+
+  wui-loading-thumbnail {
+    position: absolute;
+  }
+
+  wui-visual {
+    width: var(--wui-wallet-image-size-lg);
+    height: var(--wui-wallet-image-size-lg);
+    border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
+    position: relative;
+    overflow: hidden;
+  }
+
+  wui-visual::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+    border-radius: calc(var(--wui-border-radius-5xs) * 9 - var(--wui-border-radius-xxs));
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  wui-icon-box {
+    position: absolute;
+    right: calc(var(--wui-spacing-3xs) * -1);
+    bottom: calc(var(--wui-spacing-3xs) * -1);
+    opacity: 0;
+    transform: scale(0.5);
+    transition:
+      opacity var(--wui-ease-out-power-2) var(--wui-duration-lg),
+      transform var(--wui-ease-out-power-2) var(--wui-duration-lg);
+    will-change: opacity, transform;
+  }
+
+  wui-text[align='center'] {
+    width: 100%;
+    padding: 0px var(--wui-spacing-l);
+  }
+
+  [data-error='true'] wui-icon-box {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  [data-error='true'] > wui-flex:first-child {
+    animation: shake 250ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+  }
+
+  [data-retry='false'] wui-link {
+    display: none;
+  }
+
+  [data-retry='true'] wui-link {
+    display: block;
+    opacity: 1;
+  }
+
+  wui-link {
+    padding: var(--wui-spacing-4xs) var(--wui-spacing-xxs);
+  }
+
+  .capitalize {
+    text-transform: capitalize;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-switch-active-chain-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-switch-active-chain-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwFjB,CAAA"}

package/dist/esm/src/views/w3m-switch-address-view/index.js

@@ -0,0 +1,132 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { AccountController, BlockchainApiController, ChainController, ModalController, NetworkController, OptionsController, StorageUtil } from '@reown/appkit-core';
+import { UiHelperUtil, customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import styles from './styles.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+let W3mSwitchAddressView = class W3mSwitchAddressView extends LitElement {
+    constructor() {
+        super();
+        this.metadata = OptionsController.state.metadata;
+        this.allAccounts = AccountController.state.allAccounts || [];
+        this.balances = {};
+        this.labels = AccountController.state.addressLabels;
+        this.currentAddress = AccountController.state.address || '';
+        this.connectedConnector = StorageUtil.getConnectedConnector();
+        this.shouldShowIcon = this.connectedConnector === 'AUTH';
+        this.caipNetwork = NetworkController.state.caipNetwork;
+        AccountController.subscribeKey('allAccounts', allAccounts => {
+            this.allAccounts = allAccounts;
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.allAccounts.forEach(account => {
+            BlockchainApiController.getBalance(account.address, this.caipNetwork?.id).then(response => {
+                let total = this.balances[account.address] || 0;
+                if (response.balances.length > 0) {
+                    total = response.balances.reduce((acc, balance) => acc + (balance?.value || 0), 0);
+                }
+                this.balances[account.address] = total;
+                this.requestUpdate();
+            });
+        });
+    }
+    getAddressIcon(type) {
+        if (type === 'smartAccount') {
+            return 'lightbulb';
+        }
+        return 'mail';
+    }
+    render() {
+        return html `
+      <wui-flex justifyContent="center" .padding=${['xl', '0', 'xl', '0']}>
+        <wui-banner-img
+          imageSrc=${ifDefined(this.metadata?.icons[0])}
+          text=${ifDefined(this.metadata?.url)}
+          size="sm"
+        ></wui-banner-img>
+      </wui-flex>
+      <wui-flex flexDirection="column" gap="xxl" .padding=${['l', 'xl', 'xl', 'xl']}>
+        ${this.allAccounts.map((account, index) => this.getAddressTemplate(account, index))}
+      </wui-flex>
+    `;
+    }
+    getAddressTemplate(account, index) {
+        const label = this.labels?.get(account.address);
+        return html `
+      <wui-flex
+        flexDirection="row"
+        justifyContent="space-between"
+        data-testid="switch-address-item"
+      >
+        <wui-flex alignItems="center">
+          <wui-avatar address=${account.address}></wui-avatar>
+          ${this.shouldShowIcon
+            ? html `<wui-icon-box
+                size="sm"
+                iconcolor="fg-200"
+                backgroundcolor="glass-002"
+                background="gray"
+                icon="${this.getAddressIcon(account.type)}"
+                ?border=${true}
+              ></wui-icon-box>`
+            : html `<wui-flex .padding="${['0', '0', '0', 's']}"></wui-flex>`}
+          <wui-flex flexDirection="column">
+            <wui-text class="address" variant="paragraph-500" color="fg-100"
+              >${label
+            ? label
+            : UiHelperUtil.getTruncateString({
+                string: account.address,
+                charsStart: 4,
+                charsEnd: 6,
+                truncate: 'middle'
+            })}</wui-text
+            >
+            <wui-text class="address-description" variant="small-400">
+              ${typeof this.balances[account.address] === 'number'
+            ? `$${this.balances[account.address]?.toFixed(2)}`
+            : html `<wui-loading-spinner size="sm" color="accent-100"></wui-loading-spinner>`}
+            </wui-text>
+          </wui-flex>
+        </wui-flex>
+        <wui-flex gap="s" alignItems="center">
+          ${account.address?.toLowerCase() === this.currentAddress?.toLowerCase()
+            ? ''
+            : html `
+                <wui-button
+                  data-testid=${`w3m-switch-address-button-${index}`}
+                  textVariant="small-600"
+                  size="md"
+                  variant="accent"
+                  @click=${() => this.onSwitchAddress(account.address)}
+                  >Switch to</wui-button
+                >
+              `}
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    onSwitchAddress(address) {
+        AccountController.setShouldUpdateToAddress(address, ChainController.state.activeChain);
+        ModalController.close();
+    }
+};
+W3mSwitchAddressView.styles = styles;
+__decorate([
+    state()
+], W3mSwitchAddressView.prototype, "allAccounts", void 0);
+__decorate([
+    state()
+], W3mSwitchAddressView.prototype, "balances", void 0);
+W3mSwitchAddressView = __decorate([
+    customElement('w3m-switch-address-view')
+], W3mSwitchAddressView);
+export { W3mSwitchAddressView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-switch-address-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-switch-address-view/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/views/w3m-switch-address-view/styles.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export default css `
+  wui-avatar {
+    width: var(--wui-spacing-3xl);
+    height: var(--wui-spacing-3xl);
+    box-shadow: 0 0 0 0;
+  }
+
+  wui-icon-box {
+    position: relative;
+    right: 15px;
+    top: 15px;
+    border: 2px solid var(--wui-color-bg-150);
+    background-color: var(--wui-color-bg-125);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-switch-address-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-switch-address-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAA"}

package/dist/esm/src/views/w3m-transactions-view/index.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import styles from './styles.js';
+let W3mTransactionsView = class W3mTransactionsView extends LitElement {
+    render() {
+        return html `
+      <wui-flex flexDirection="column" .padding=${['0', 'm', 'm', 'm']} gap="s">
+        <w3m-activity-list page="activity"></w3m-activity-list>
+      </wui-flex>
+    `;
+    }
+};
+W3mTransactionsView.styles = styles;
+W3mTransactionsView = __decorate([
+    customElement('w3m-transactions-view')
+], W3mTransactionsView);
+export { W3mTransactionsView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-transactions-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-transactions-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAEtC,OAAO,MAAM,MAAM,aAAa,CAAA;AAGzB,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,UAAU;IAIjC,MAAM;QACpB,OAAO,IAAI,CAAA;kDACmC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;;;KAGjE,CAAA;IACH,CAAC;;AATsB,0BAAM,GAAG,MAAM,AAAT,CAAS;AAD3B,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CAW/B"}

package/dist/esm/src/views/w3m-transactions-view/styles.js

@@ -0,0 +1,14 @@
+import { css } from 'lit';
+export default css `
+  :host > wui-flex:first-child {
+    height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: none;
+  }
+
+  :host > wui-flex:first-child::-webkit-scrollbar {
+    display: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-transactions-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-transactions-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;CAWjB,CAAA"}

package/dist/esm/src/views/w3m-unsupported-chain-view/index.js

@@ -0,0 +1,130 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { AccountController, AssetUtil, ConnectionController, ConstantsUtil, CoreHelperUtil, EventsController, ModalController, NetworkController, RouterController, SnackController } from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './styles.js';
+let W3mUnsupportedChainView = class W3mUnsupportedChainView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.swapUnsupportedChain = RouterController.state.data?.swapUnsupportedChain;
+        this.disconecting = false;
+    }
+    render() {
+        return html `
+      <wui-flex class="container" flexDirection="column" gap="0">
+        <wui-flex
+          class="container"
+          flexDirection="column"
+          .padding=${['m', 'xl', 'xs', 'xl']}
+          alignItems="center"
+          gap="xl"
+        >
+          ${this.descriptionTemplate()}
+        </wui-flex>
+
+        <wui-flex flexDirection="column" padding="s" gap="xs">
+          ${this.networksTemplate()}
+        </wui-flex>
+
+        <wui-separator text="or"></wui-separator>
+        <wui-flex flexDirection="column" padding="s" gap="xs">
+          <wui-list-item
+            variant="icon"
+            iconVariant="overlay"
+            icon="disconnect"
+            ?chevron=${false}
+            .loading=${this.disconecting}
+            @click=${this.onDisconnect.bind(this)}
+            data-testid="disconnect-button"
+          >
+            <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
+          </wui-list-item>
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    descriptionTemplate() {
+        if (this.swapUnsupportedChain) {
+            return html `
+        <wui-text variant="small-400" color="fg-200" align="center">
+          The swap feature doesn’t support your current network. Switch to an available option to
+          continue.
+        </wui-text>
+      `;
+        }
+        return html `
+      <wui-text variant="small-400" color="fg-200" align="center">
+        This app doesn’t support your current network. Switch to an available option to continue.
+      </wui-text>
+    `;
+    }
+    networksTemplate() {
+        const requestedCaipNetworks = NetworkController.getRequestedCaipNetworks();
+        const approvedCaipNetworkIds = NetworkController.state.approvedCaipNetworkIds;
+        const sortedNetworks = CoreHelperUtil.sortRequestedNetworks(approvedCaipNetworkIds, requestedCaipNetworks);
+        const filteredNetworks = this.swapUnsupportedChain
+            ? sortedNetworks.filter(network => ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(network.id))
+            : sortedNetworks;
+        return filteredNetworks.map(network => html `
+        <wui-list-network
+          imageSrc=${ifDefined(AssetUtil.getNetworkImage(network))}
+          name=${network.name ?? 'Unknown'}
+          @click=${() => this.onSwitchNetwork(network)}
+        >
+        </wui-list-network>
+      `);
+    }
+    async onDisconnect() {
+        try {
+            this.disconecting = true;
+            await ConnectionController.disconnect();
+            EventsController.sendEvent({
+                type: 'track',
+                event: 'DISCONNECT_SUCCESS'
+            });
+            ModalController.close();
+        }
+        catch {
+            EventsController.sendEvent({ type: 'track', event: 'DISCONNECT_ERROR' });
+            SnackController.showError('Failed to disconnect');
+        }
+        finally {
+            this.disconecting = false;
+        }
+    }
+    async onSwitchNetwork(network) {
+        const isConnected = AccountController.state.isConnected;
+        const approvedCaipNetworkIds = NetworkController.state.approvedCaipNetworkIds;
+        const supportsAllNetworks = NetworkController.state.supportsAllNetworks;
+        const caipNetwork = NetworkController.state.caipNetwork;
+        const routerData = RouterController.state.data;
+        if (isConnected && caipNetwork?.id !== network.id) {
+            if (approvedCaipNetworkIds?.includes(network.id)) {
+                await NetworkController.switchActiveNetwork(network);
+            }
+            else if (supportsAllNetworks) {
+                RouterController.push('SwitchNetwork', { ...routerData, network });
+            }
+        }
+        else if (!isConnected) {
+            NetworkController.setActiveCaipNetwork(network);
+            RouterController.push('Connect');
+        }
+    }
+};
+W3mUnsupportedChainView.styles = styles;
+__decorate([
+    state()
+], W3mUnsupportedChainView.prototype, "disconecting", void 0);
+W3mUnsupportedChainView = __decorate([
+    customElement('w3m-unsupported-chain-view')
+], W3mUnsupportedChainView);
+export { W3mUnsupportedChainView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-unsupported-chain-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-unsupported-chain-view/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/src/views/w3m-unsupported-chain-view/styles.js

@@ -0,0 +1,13 @@
+import { css } from 'lit';
+export default css `
+  :host > wui-flex {
+    max-height: clamp(360px, 540px, 80vh);
+    overflow: scroll;
+    scrollbar-width: none;
+  }
+
+  :host > wui-flex::-webkit-scrollbar {
+    display: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-unsupported-chain-view/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/views/w3m-unsupported-chain-view/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;CAUjB,CAAA"}

package/dist/esm/src/views/w3m-update-email-primary-otp-view/index.js

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@reown/appkit-ui';
+import { W3mEmailOtpWidget } from '../../utils/w3m-email-otp-widget/index.js';
+import { EventsController, RouterController } from '@reown/appkit-core';
+let W3mUpdateEmailPrimaryOtpView = class W3mUpdateEmailPrimaryOtpView extends W3mEmailOtpWidget {
+    constructor() {
+        super();
+        this.email = RouterController.state.data?.email;
+        this.onOtpSubmit = async (otp) => {
+            try {
+                if (this.authConnector) {
+                    await this.authConnector.provider.updateEmailPrimaryOtp({ otp });
+                    EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_PASS' });
+                    RouterController.replace('UpdateEmailSecondaryOtp', RouterController.state.data);
+                }
+            }
+            catch (error) {
+                EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_FAIL' });
+                throw error;
+            }
+        };
+        this.onStartOver = () => {
+            RouterController.replace('UpdateEmailWallet', RouterController.state.data);
+        };
+    }
+};
+W3mUpdateEmailPrimaryOtpView = __decorate([
+    customElement('w3m-update-email-primary-otp-view')
+], W3mUpdateEmailPrimaryOtpView);
+export { W3mUpdateEmailPrimaryOtpView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-update-email-primary-otp-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-update-email-primary-otp-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAE7E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGhE,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,iBAAiB;IACjE;QACE,KAAK,EAAE,CAAA;QAIA,UAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAA;QAE1C,gBAAW,GAAkB,KAAK,EAAC,GAAG,EAAC,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,MAAM,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;oBAChE,gBAAgB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,8BAA8B,EAAE,CAAC,CAAA;oBACpF,gBAAgB,CAAC,OAAO,CAAC,yBAAyB,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;gBAClF,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,gBAAgB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,8BAA8B,EAAE,CAAC,CAAA;gBACpF,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC,CAAA;QAEQ,gBAAW,GAAG,GAAG,EAAE;YAC1B,gBAAgB,CAAC,OAAO,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC5E,CAAC,CAAA;IApBD,CAAC;CAqBF,CAAA;AAxBY,4BAA4B;IADxC,aAAa,CAAC,mCAAmC,CAAC;GACtC,4BAA4B,CAwBxC"}

package/dist/esm/src/views/w3m-update-email-secondary-otp-view/index.js

@@ -0,0 +1,36 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@reown/appkit-ui';
+import { W3mEmailOtpWidget } from '../../utils/w3m-email-otp-widget/index.js';
+import { EventsController, RouterController } from '@reown/appkit-core';
+let W3mUpdateEmailSecondaryOtpView = class W3mUpdateEmailSecondaryOtpView extends W3mEmailOtpWidget {
+    constructor() {
+        super();
+        this.email = RouterController.state.data?.newEmail;
+        this.onOtpSubmit = async (otp) => {
+            try {
+                if (this.authConnector) {
+                    await this.authConnector.provider.updateEmailSecondaryOtp({ otp });
+                    EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_PASS' });
+                    RouterController.reset('Account');
+                }
+            }
+            catch (error) {
+                EventsController.sendEvent({ type: 'track', event: 'EMAIL_VERIFICATION_CODE_FAIL' });
+                throw error;
+            }
+        };
+        this.onStartOver = () => {
+            RouterController.replace('UpdateEmailWallet', RouterController.state.data);
+        };
+    }
+};
+W3mUpdateEmailSecondaryOtpView = __decorate([
+    customElement('w3m-update-email-secondary-otp-view')
+], W3mUpdateEmailSecondaryOtpView);
+export { W3mUpdateEmailSecondaryOtpView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-update-email-secondary-otp-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-update-email-secondary-otp-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAA;AAE7E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAGhE,IAAM,8BAA8B,GAApC,MAAM,8BAA+B,SAAQ,iBAAiB;IACnE;QACE,KAAK,EAAE,CAAA;QAIA,UAAK,GAAG,gBAAgB,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,CAAA;QAE7C,gBAAW,GAAkB,KAAK,EAAC,GAAG,EAAC,EAAE;YAChD,IAAI,CAAC;gBACH,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;oBACvB,MAAM,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,uBAAuB,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;oBAClE,gBAAgB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,8BAA8B,EAAE,CAAC,CAAA;oBACpF,gBAAgB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;gBACnC,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,gBAAgB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,8BAA8B,EAAE,CAAC,CAAA;gBACpF,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC,CAAA;QAEQ,gBAAW,GAAG,GAAG,EAAE;YAC1B,gBAAgB,CAAC,OAAO,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAC5E,CAAC,CAAA;IApBD,CAAC;CAqBF,CAAA;AAxBY,8BAA8B;IAD1C,aAAa,CAAC,qCAAqC,CAAC;GACxC,8BAA8B,CAwB1C"}

package/dist/esm/src/views/w3m-update-email-wallet-view/index.js

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ConnectorController } from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ref, createRef } from 'lit/directives/ref.js';
+import styles from './styles.js';
+import { SnackController, RouterController, EventsController } from '@reown/appkit-core';
+let W3mUpdateEmailWalletView = class W3mUpdateEmailWalletView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.formRef = createRef();
+        this.initialEmail = RouterController.state.data?.email ?? '';
+        this.email = '';
+        this.loading = false;
+    }
+    firstUpdated() {
+        this.formRef.value?.addEventListener('keydown', event => {
+            if (event.key === 'Enter') {
+                this.onSubmitEmail(event);
+            }
+        });
+    }
+    render() {
+        const showSubmit = !this.loading && this.email.length > 3 && this.email !== this.initialEmail;
+        return html `
+      <wui-flex flexDirection="column" padding="m" gap="m">
+        <form ${ref(this.formRef)} @submit=${this.onSubmitEmail.bind(this)}>
+          <wui-email-input
+            value=${this.initialEmail}
+            .disabled=${this.loading}
+            @inputChange=${this.onEmailInputChange.bind(this)}
+          >
+          </wui-email-input>
+          <input type="submit" hidden />
+        </form>
+
+        <wui-flex gap="s">
+          <wui-button size="md" variant="neutral" fullWidth @click=${RouterController.goBack}>
+            Cancel
+          </wui-button>
+
+          <wui-button
+            size="md"
+            variant="main"
+            fullWidth
+            @click=${this.onSubmitEmail.bind(this)}
+            .disabled=${!showSubmit}
+            .loading=${this.loading}
+          >
+            Save
+          </wui-button>
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    onEmailInputChange(event) {
+        this.email = event.detail;
+    }
+    async onSubmitEmail(event) {
+        try {
+            if (this.loading) {
+                return;
+            }
+            this.loading = true;
+            event.preventDefault();
+            const authConnector = ConnectorController.getAuthConnector();
+            if (!authConnector) {
+                throw new Error('w3m-update-email-wallet: Auth connector not found');
+            }
+            const response = await authConnector.provider.updateEmail({ email: this.email });
+            EventsController.sendEvent({ type: 'track', event: 'EMAIL_EDIT' });
+            if (response.action === 'VERIFY_SECONDARY_OTP') {
+                RouterController.push('UpdateEmailSecondaryOtp', {
+                    email: this.initialEmail,
+                    newEmail: this.email
+                });
+            }
+            else {
+                RouterController.push('UpdateEmailPrimaryOtp', {
+                    email: this.initialEmail,
+                    newEmail: this.email
+                });
+            }
+        }
+        catch (error) {
+            SnackController.showError(error);
+            this.loading = false;
+        }
+    }
+};
+W3mUpdateEmailWalletView.styles = styles;
+__decorate([
+    state()
+], W3mUpdateEmailWalletView.prototype, "email", void 0);
+__decorate([
+    state()
+], W3mUpdateEmailWalletView.prototype, "loading", void 0);
+W3mUpdateEmailWalletView = __decorate([
+    customElement('w3m-update-email-wallet-view')
+], W3mUpdateEmailWalletView);
+export { W3mUpdateEmailWalletView };
+//# sourceMappingURL=index.js.map