@reown/appkit-scaffold-ui 0.0.3

package/dist/esm/src/views/w3m-buy-in-progress-view/index.js

@@ -0,0 +1,212 @@
+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, ConnectionController, CoreHelperUtil, OnRampController, RouterController, SnackController, ThemeController, BlockchainApiController, OptionsController } from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './styles.js';
+let W3mBuyInProgressView = class W3mBuyInProgressView extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.selectedOnRampProvider = OnRampController.state.selectedProvider;
+        this.uri = ConnectionController.state.wcUri;
+        this.ready = false;
+        this.showRetry = false;
+        this.buffering = false;
+        this.error = false;
+        this.startTime = null;
+        this.isMobile = false;
+        this.onRetry = undefined;
+        this.unsubscribe.push(...[
+            OnRampController.subscribeKey('selectedProvider', val => {
+                this.selectedOnRampProvider = val;
+            })
+        ]);
+        this.watchTransactions();
+    }
+    disconnectedCallback() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+        }
+    }
+    render() {
+        let label = 'Continue in external window';
+        if (this.error) {
+            label = 'Buy failed';
+        }
+        else if (this.selectedOnRampProvider) {
+            label = `Buy in ${this.selectedOnRampProvider?.label}`;
+        }
+        const subLabel = this.error
+            ? 'Buy can be declined from your side or due to and error on the provider app'
+            : `We’ll notify you once your Buy is processed`;
+        return html `
+      <wui-flex
+        data-error=${ifDefined(this.error)}
+        data-retry=${this.showRetry}
+        flexDirection="column"
+        alignItems="center"
+        .padding=${['3xl', 'xl', 'xl', 'xl']}
+        gap="xl"
+      >
+        <wui-flex justifyContent="center" alignItems="center">
+          <wui-visual
+            name=${ifDefined(this.selectedOnRampProvider?.name)}
+            size="lg"
+            class="provider-image"
+          >
+          </wui-visual>
+
+          ${this.error ? null : this.loaderTemplate()}
+
+          <wui-icon-box
+            backgroundColor="error-100"
+            background="opaque"
+            iconColor="error-100"
+            icon="close"
+            size="sm"
+            border
+            borderColor="wui-color-bg-125"
+          ></wui-icon-box>
+        </wui-flex>
+
+        <wui-flex flexDirection="column" alignItems="center" gap="xs">
+          <wui-text variant="paragraph-500" color=${this.error ? 'error-100' : 'fg-100'}>
+            ${label}
+          </wui-text>
+          <wui-text align="center" variant="small-500" color="fg-200">${subLabel}</wui-text>
+        </wui-flex>
+
+        ${this.error ? this.tryAgainTemplate() : null}
+      </wui-flex>
+
+      <wui-flex .padding=${['0', 'xl', 'xl', 'xl']} justifyContent="center">
+        <wui-link @click=${this.onCopyUri} color="fg-200">
+          <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
+          Copy link
+        </wui-link>
+      </wui-flex>
+    `;
+    }
+    watchTransactions() {
+        if (!this.selectedOnRampProvider) {
+            return;
+        }
+        switch (this.selectedOnRampProvider.name) {
+            case 'coinbase':
+                this.startTime = Date.now();
+                this.initializeCoinbaseTransactions();
+                break;
+            default:
+                break;
+        }
+    }
+    async initializeCoinbaseTransactions() {
+        await this.watchCoinbaseTransactions();
+        this.intervalId = setInterval(() => this.watchCoinbaseTransactions(), 4000);
+    }
+    async watchCoinbaseTransactions() {
+        try {
+            const address = AccountController.state.address;
+            const projectId = OptionsController.state.projectId;
+            if (!address) {
+                throw new Error('No address found');
+            }
+            const coinbaseResponse = await BlockchainApiController.fetchTransactions({
+                account: address,
+                onramp: 'coinbase',
+                projectId
+            });
+            const newTransactions = coinbaseResponse.data.filter(tx => new Date(tx.metadata.minedAt) > new Date(this.startTime) ||
+                tx.metadata.status === 'ONRAMP_TRANSACTION_STATUS_IN_PROGRESS');
+            if (newTransactions.length) {
+                clearInterval(this.intervalId);
+                RouterController.replace('OnRampActivity');
+            }
+            else if (this.startTime && Date.now() - this.startTime >= 180000) {
+                clearInterval(this.intervalId);
+                this.error = true;
+            }
+        }
+        catch (error) {
+            SnackController.showError(error);
+        }
+    }
+    onTryAgain() {
+        if (!this.selectedOnRampProvider) {
+            return;
+        }
+        this.error = false;
+        CoreHelperUtil.openHref(this.selectedOnRampProvider.url, 'popupWindow', 'width=600,height=800,scrollbars=yes');
+    }
+    tryAgainTemplate() {
+        if (!this.selectedOnRampProvider?.url) {
+            return null;
+        }
+        return html `<wui-button size="md" variant="accent" @click=${this.onTryAgain.bind(this)}>
+      <wui-icon color="inherit" slot="iconLeft" name="refresh"></wui-icon>
+      Try again
+    </wui-button>`;
+    }
+    loaderTemplate() {
+        const borderRadiusMaster = ThemeController.state.themeVariables['--w3m-border-radius-master'];
+        const radius = borderRadiusMaster ? parseInt(borderRadiusMaster.replace('px', ''), 10) : 4;
+        return html `<wui-loading-thumbnail radius=${radius * 9}></wui-loading-thumbnail>`;
+    }
+    onCopyUri() {
+        if (!this.selectedOnRampProvider?.url) {
+            SnackController.showError('No link found');
+            RouterController.goBack();
+            return;
+        }
+        try {
+            CoreHelperUtil.copyToClopboard(this.selectedOnRampProvider.url);
+            SnackController.showSuccess('Link copied');
+        }
+        catch {
+            SnackController.showError('Failed to copy');
+        }
+    }
+};
+W3mBuyInProgressView.styles = styles;
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "intervalId", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "selectedOnRampProvider", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "uri", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "ready", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "showRetry", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "buffering", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "error", void 0);
+__decorate([
+    state()
+], W3mBuyInProgressView.prototype, "startTime", void 0);
+__decorate([
+    property({ type: Boolean })
+], W3mBuyInProgressView.prototype, "isMobile", void 0);
+__decorate([
+    property()
+], W3mBuyInProgressView.prototype, "onRetry", void 0);
+W3mBuyInProgressView = __decorate([
+    customElement('w3m-buy-in-progress-view')
+], W3mBuyInProgressView);
+export { W3mBuyInProgressView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-buy-in-progress-view/index.js.map

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

package/dist/esm/src/views/w3m-buy-in-progress-view/styles.js

@@ -0,0 +1,87 @@
+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);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-buy-in-progress-view/styles.js.map

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

package/dist/esm/src/views/w3m-choose-account-name-view/index.js

@@ -0,0 +1,102 @@
+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 { AccountController, CoreHelperUtil, EventsController, RouterController } from '@reown/appkit-core';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import styles from './styles.js';
+import { NavigationUtil } from '@reown/appkit-common';
+import { W3mFrameRpcConstants } from '@reown/appkit-wallet';
+let W3mChooseAccountNameView = class W3mChooseAccountNameView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.loading = false;
+    }
+    render() {
+        return html `
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        gap="xxl"
+        .padding=${['0', '0', 'l', '0']}
+      >
+        ${this.onboardingTemplate()} ${this.buttonsTemplate()}
+        <wui-link
+          @click=${() => {
+            CoreHelperUtil.openHref(NavigationUtil.URLS.FAQ, '_blank');
+        }}
+        >
+          Learn more about names
+          <wui-icon color="inherit" slot="iconRight" name="externalLink"></wui-icon>
+        </wui-link>
+      </wui-flex>
+    `;
+    }
+    onboardingTemplate() {
+        return html ` <wui-flex
+      flexDirection="column"
+      gap="xxl"
+      alignItems="center"
+      .padding=${['0', 'xxl', '0', 'xxl']}
+    >
+      <wui-flex gap="s" alignItems="center" justifyContent="center">
+        <wui-icon-box
+          icon="id"
+          size="xl"
+          iconSize="xxl"
+          iconColor="fg-200"
+          backgroundColor="fg-200"
+        ></wui-icon-box>
+      </wui-flex>
+      <wui-flex flexDirection="column" alignItems="center" gap="s">
+        <wui-text align="center" variant="medium-600" color="fg-100">
+          Choose your account name
+        </wui-text>
+        <wui-text align="center" variant="paragraph-400" color="fg-100">
+          Finally say goodbye to 0x addresses, name your account to make it easier to exchange
+          assets
+        </wui-text>
+      </wui-flex>
+    </wui-flex>`;
+    }
+    buttonsTemplate() {
+        return html `<wui-flex
+      .padding=${['0', '2l', '0', '2l']}
+      gap="s"
+      class="continue-button-container"
+    >
+      <wui-button
+        fullWidth
+        .loading=${this.loading}
+        size="lg"
+        borderRadius="xs"
+        @click=${this.handleContinue.bind(this)}
+        >Choose name
+      </wui-button>
+    </wui-flex>`;
+    }
+    handleContinue() {
+        RouterController.push('RegisterAccountName');
+        EventsController.sendEvent({
+            type: 'track',
+            event: 'OPEN_ENS_FLOW',
+            properties: {
+                isSmartAccount: AccountController.state.preferredAccountType ===
+                    W3mFrameRpcConstants.ACCOUNT_TYPES.SMART_ACCOUNT
+            }
+        });
+    }
+};
+W3mChooseAccountNameView.styles = styles;
+__decorate([
+    state()
+], W3mChooseAccountNameView.prototype, "loading", void 0);
+W3mChooseAccountNameView = __decorate([
+    customElement('w3m-choose-account-name-view')
+], W3mChooseAccountNameView);
+export { W3mChooseAccountNameView };
+//# sourceMappingURL=index.js.map

package/dist/esm/src/views/w3m-choose-account-name-view/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-choose-account-name-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,gBAAgB,EACjB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAGpD,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;IAAjD;;QAIY,YAAO,GAAG,KAAK,CAAA;IAkFlC,CAAC;IA/EiB,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;mBAKI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU;;UAEtC,IAAI,CAAC,kBAAkB,EAAE,IAAI,IAAI,CAAC,eAAe,EAAE;;mBAE1C,GAAG,EAAE;YACZ,cAAc,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAA;QAC5D,CAAC;;;;;;KAMN,CAAA;IACH,CAAC;IAGO,kBAAkB;QACxB,OAAO,IAAI,CAAA;;;;iBAIE,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,CAAU;;;;;;;;;;;;;;;;;;;;gBAoBlC,CAAA;IACd,CAAC;IAEO,eAAe;QACrB,OAAO,IAAI,CAAA;iBACE,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,CAAU;;;;;;mBAM7B,IAAI,CAAC,OAAO;;;iBAGd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC;;;gBAG/B,CAAA;IACd,CAAC;IAEO,cAAc;QACpB,gBAAgB,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QAC5C,gBAAgB,CAAC,SAAS,CAAC;YACzB,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,eAAe;YACtB,UAAU,EAAE;gBACV,cAAc,EACZ,iBAAiB,CAAC,KAAK,CAAC,oBAAoB;oBAC5C,oBAAoB,CAAC,aAAa,CAAC,aAAa;aACnD;SACF,CAAC,CAAA;IACJ,CAAC;;AApFsB,+BAAM,GAAG,MAAM,AAAT,CAAS;AAGrB;IAAhB,KAAK,EAAE;yDAAwB;AAJrB,wBAAwB;IADpC,aAAa,CAAC,8BAA8B,CAAC;GACjC,wBAAwB,CAsFpC"}

package/dist/esm/src/views/w3m-choose-account-name-view/styles.js

@@ -0,0 +1,7 @@
+import { css } from 'lit';
+export default css `
+  .continue-button-container {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/src/views/w3m-choose-account-name-view/styles.js.map

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

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

@@ -0,0 +1,25 @@
+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 W3mConnectSocialsView = class W3mConnectSocialsView extends LitElement {
+    render() {
+        return html `
+      <wui-flex flexDirection="column" padding="s" gap="xs">
+        <w3m-social-login-list></w3m-social-login-list>
+      </wui-flex>
+      <w3m-legal-footer></w3m-legal-footer>
+    `;
+    }
+};
+W3mConnectSocialsView.styles = styles;
+W3mConnectSocialsView = __decorate([
+    customElement('w3m-connect-socials-view')
+], W3mConnectSocialsView);
+export { W3mConnectSocialsView };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-socials-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,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAInC,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;KAKV,CAAA;IACH,CAAC;;AAVsB,4BAAM,GAAG,MAAM,AAAT,CAAS;AAD3B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAYjC"}

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

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

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

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

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

@@ -0,0 +1,75 @@
+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';
+import { ConnectorController, OptionsController, RouterController } from '@reown/appkit-core';
+import { state } from 'lit/decorators/state.js';
+let W3mConnectView = class W3mConnectView extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.connectors = ConnectorController.state.connectors;
+        this.authConnector = this.connectors.find(c => c.type === 'AUTH');
+        this.features = OptionsController.state.features;
+        this.unsubscribe.push(ConnectorController.subscribeKey('connectors', val => {
+            this.connectors = val;
+            this.authConnector = this.connectors.find(c => c.type === 'AUTH');
+        }), OptionsController.subscribeKey('features', val => (this.features = val)));
+    }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        return html `
+      <wui-flex flexDirection="column" .padding=${['3xs', 's', 's', 's']}>
+        <w3m-email-login-widget></w3m-email-login-widget>
+        <w3m-social-login-widget></w3m-social-login-widget>
+        ${this.walletListTemplate()}
+      </wui-flex>
+      <w3m-legal-footer></w3m-legal-footer>
+    `;
+    }
+    walletListTemplate() {
+        const { socials, emailShowWallets } = this.features;
+        if (this.authConnector && socials) {
+            if (this.authConnector && emailShowWallets) {
+                return html `
+          <wui-flex flexDirection="column" gap="xs" .margin=${['xs', '0', '0', '0']}>
+            <w3m-connector-list></w3m-connector-list>
+            <wui-flex class="all-wallets">
+              <w3m-all-wallets-widget></w3m-all-wallets-widget>
+            </wui-flex>
+          </wui-flex>
+        `;
+            }
+            return html `<wui-list-button
+        @click=${this.onContinueWalletClick.bind(this)}
+        text="Continue with a wallet"
+      ></wui-list-button>`;
+        }
+        return html `<w3m-wallet-login-list></w3m-wallet-login-list>`;
+    }
+    onContinueWalletClick() {
+        RouterController.push('ConnectWallets');
+    }
+};
+W3mConnectView.styles = styles;
+__decorate([
+    state()
+], W3mConnectView.prototype, "connectors", void 0);
+__decorate([
+    state()
+], W3mConnectView.prototype, "authConnector", void 0);
+__decorate([
+    state()
+], W3mConnectView.prototype, "features", void 0);
+W3mConnectView = __decorate([
+    customElement('w3m-connect-view')
+], W3mConnectView);
+export { W3mConnectView };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-view/index.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AACtC,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC7F,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAA;AAGxC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAa5C;QACE,KAAK,EAAE,CAAA;QAVD,gBAAW,GAAmB,EAAE,CAAA;QAGvB,eAAU,GAAG,mBAAmB,CAAC,KAAK,CAAC,UAAU,CAAA;QAEjD,kBAAa,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAA;QAE5D,aAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAA;QAI1D,IAAI,CAAC,WAAW,CAAC,IAAI,CACnB,mBAAmB,CAAC,YAAY,CAAC,YAAY,EAAE,GAAG,CAAC,EAAE;YACnD,IAAI,CAAC,UAAU,GAAG,GAAG,CAAA;YACrB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAA;QACnE,CAAC,CAAC,EACF,iBAAiB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC,CACzE,CAAA;IACH,CAAC;IAEe,oBAAoB;QAClC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;IACxD,CAAC;IAGe,MAAM;QACpB,OAAO,IAAI,CAAA;kDACmC,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC;;;UAG9D,IAAI,CAAC,kBAAkB,EAAE;;;KAG9B,CAAA;IACH,CAAC;IAGO,kBAAkB;QACxB,MAAM,EAAE,OAAO,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAA;QAEnD,IAAI,IAAI,CAAC,aAAa,IAAI,OAAO,EAAE,CAAC;YAClC,IAAI,IAAI,CAAC,aAAa,IAAI,gBAAgB,EAAE,CAAC;gBAC3C,OAAO,IAAI,CAAA;8DAC2C,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAU;;;;;;SAMnF,CAAA;YACH,CAAC;YAED,OAAO,IAAI,CAAA;iBACA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC;;0BAE5B,CAAA;QACtB,CAAC;QAED,OAAO,IAAI,CAAA,iDAAiD,CAAA;IAC9D,CAAC;IAGO,qBAAqB;QAC3B,gBAAgB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IACzC,CAAC;;AAnEsB,qBAAM,GAAG,MAAM,AAAT,CAAS;AAMrB;IAAhB,KAAK,EAAE;kDAA0D;AAEjD;IAAhB,KAAK,EAAE;qDAAqE;AAE5D;IAAhB,KAAK,EAAE;gDAAoD;AAXjD,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAqE1B"}

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

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

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

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

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

@@ -0,0 +1,25 @@
+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 W3mConnectWalletsView = class W3mConnectWalletsView extends LitElement {
+    render() {
+        return html `
+      <wui-flex flexDirection="column" padding="s" gap="xs">
+        <w3m-wallet-login-list></w3m-wallet-login-list>
+      </wui-flex>
+      <w3m-legal-footer></w3m-legal-footer>
+    `;
+    }
+};
+W3mConnectWalletsView.styles = styles;
+W3mConnectWalletsView = __decorate([
+    customElement('w3m-connect-wallets-view')
+], W3mConnectWalletsView);
+export { W3mConnectWalletsView };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connect-wallets-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,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAInC,MAAM;QACpB,OAAO,IAAI,CAAA;;;;;KAKV,CAAA;IACH,CAAC;;AAVsB,4BAAM,GAAG,MAAM,AAAT,CAAS;AAD3B,qBAAqB;IADjC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,qBAAqB,CAYjC"}

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

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

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

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