@reown/appkit-scaffold-ui 0.0.3

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

@@ -0,0 +1,57 @@
+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 { ConnectionController, EventsController } from '@reown/appkit-core';
+import { ConstantsUtil } from '@reown/appkit-utils';
+import { customElement } from '@reown/appkit-ui';
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+let W3mConnectingExternalView = class W3mConnectingExternalView extends W3mConnectingWidget {
+    constructor() {
+        super();
+        if (!this.connector) {
+            throw new Error('w3m-connecting-view: No connector provided');
+        }
+        EventsController.sendEvent({
+            type: 'track',
+            event: 'SELECT_WALLET',
+            properties: {
+                name: this.connector.name ?? 'Unknown',
+                platform: 'browser'
+            }
+        });
+        this.onConnect = this.onConnectProxy.bind(this);
+        this.onAutoConnect = this.onConnectProxy.bind(this);
+        this.isWalletConnect = false;
+    }
+    async onConnectProxy() {
+        try {
+            this.error = false;
+            if (this.connector) {
+                if (this.connector.id !== ConstantsUtil.COINBASE_SDK_CONNECTOR_ID || !this.error) {
+                    await ConnectionController.connectExternal(this.connector, this.connector.chain);
+                    EventsController.sendEvent({
+                        type: 'track',
+                        event: 'CONNECT_SUCCESS',
+                        properties: { method: 'browser', name: this.connector.name || 'Unknown' }
+                    });
+                }
+            }
+        }
+        catch (error) {
+            EventsController.sendEvent({
+                type: 'track',
+                event: 'CONNECT_ERROR',
+                properties: { message: error?.message ?? 'Unknown' }
+            });
+            this.error = true;
+        }
+    }
+};
+W3mConnectingExternalView = __decorate([
+    customElement('w3m-connecting-external-view')
+], W3mConnectingExternalView);
+export { W3mConnectingExternalView };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/views/w3m-connecting-external-view/index.ts"],"names":[],"mappings":";;;;;;AACA,OAAO,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4CAA4C,CAAA;AAGzE,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,mBAAmB;IAChE;QACE,KAAK,EAAE,CAAA;QACP,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACpB,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAA;QAC/D,CAAC;QAED,gBAAgB,CAAC,SAAS,CAAC;YACzB,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,eAAe;YACtB,UAAU,EAAE;gBACV,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,SAAS;gBACtC,QAAQ,EAAE,SAAS;aACpB;SACF,CAAC,CAAA;QACF,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;QACnD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAA;IAC9B,CAAC;IAGO,KAAK,CAAC,cAAc;QAC1B,IAAI,CAAC;YACH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YAClB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;gBAMnB,IAAI,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,aAAa,CAAC,yBAAyB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;oBACjF,MAAM,oBAAoB,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;oBAEhF,gBAAgB,CAAC,SAAS,CAAC;wBACzB,IAAI,EAAE,OAAO;wBACb,KAAK,EAAE,iBAAiB;wBACxB,UAAU,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,IAAI,SAAS,EAAE;qBAC1E,CAAC,CAAA;gBACJ,CAAC;YACH,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,gBAAgB,CAAC,SAAS,CAAC;gBACzB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,eAAe;gBACtB,UAAU,EAAE,EAAE,OAAO,EAAG,KAAmB,EAAE,OAAO,IAAI,SAAS,EAAE;aACpE,CAAC,CAAA;YACF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;QACnB,CAAC;IACH,CAAC;CACF,CAAA;AAjDY,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAiDrC"}

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

@@ -0,0 +1,237 @@
+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, ConnectorController, CoreHelperUtil, ModalController, RouterController, SnackController, StorageUtil, ThemeController } from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import styles from './styles.js';
+let W3mConnectingFarcasterView = class W3mConnectingFarcasterView extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.timeout = undefined;
+        this.socialProvider = AccountController.state.socialProvider;
+        this.uri = AccountController.state.farcasterUrl;
+        this.ready = false;
+        this.loading = false;
+        this.authConnector = ConnectorController.getAuthConnector();
+        this.forceUpdate = () => {
+            this.requestUpdate();
+        };
+        this.unsubscribe.push(...[
+            AccountController.subscribeKey('farcasterUrl', val => {
+                if (val) {
+                    this.uri = val;
+                    this.connectFarcaster();
+                }
+            }),
+            AccountController.subscribeKey('socialProvider', val => {
+                if (val) {
+                    this.socialProvider = val;
+                }
+            })
+        ]);
+        window.addEventListener('resize', this.forceUpdate);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        clearTimeout(this.timeout);
+        window.removeEventListener('resize', this.forceUpdate);
+    }
+    render() {
+        this.onRenderProxy();
+        return html `${this.platformTemplate()}`;
+    }
+    platformTemplate() {
+        if (CoreHelperUtil.isMobile()) {
+            return html `${this.mobileTemplate()}`;
+        }
+        return html `${this.desktopTemplate()}`;
+    }
+    desktopTemplate() {
+        if (this.loading) {
+            return html `${this.loadingTemplate()}`;
+        }
+        return html `${this.qrTemplate()}`;
+    }
+    qrTemplate() {
+        return html ` <wui-flex
+      flexDirection="column"
+      alignItems="center"
+      .padding=${['0', 'xl', 'xl', 'xl']}
+      gap="xl"
+    >
+      <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTemplate()} </wui-shimmer>
+
+      <wui-text variant="paragraph-500" color="fg-100">
+        Scan this QR Code with your phone
+      </wui-text>
+      ${this.copyTemplate()}
+    </wui-flex>`;
+    }
+    loadingTemplate() {
+        return html `
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${['xl', 'xl', 'xl', 'xl']}
+        gap="xl"
+      >
+        <wui-flex justifyContent="center" alignItems="center">
+          <wui-logo logo="farcaster"></wui-logo>
+          ${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 align="center" variant="paragraph-500" color="fg-100">
+            Loading user data
+          </wui-text>
+          <wui-text align="center" variant="small-400" color="fg-200">
+            Please wait a moment while we load your data.
+          </wui-text>
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    mobileTemplate() {
+        return html ` <wui-flex
+      flexDirection="column"
+      alignItems="center"
+      .padding=${['3xl', 'xl', 'xl', 'xl']}
+      gap="xl"
+    >
+      <wui-flex justifyContent="center" alignItems="center">
+        <wui-logo logo="farcaster"></wui-logo>
+        ${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 align="center" variant="paragraph-500" color="fg-100"
+          >Continue in Farcaster</span></wui-text
+        >
+        <wui-text align="center" variant="small-400" color="fg-200"
+          >Accept connection request in the app</wui-text
+        ></wui-flex
+      >
+      ${this.mobileLinkTemplate()}
+    </wui-flex>`;
+    }
+    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>`;
+    }
+    async connectFarcaster() {
+        if (this.authConnector) {
+            try {
+                await this.authConnector?.provider.connectFarcaster();
+                if (this.socialProvider) {
+                    StorageUtil.setConnectedSocialProvider(this.socialProvider);
+                }
+                this.loading = true;
+                await ConnectionController.connectExternal(this.authConnector, this.authConnector.chain);
+                this.loading = false;
+                ModalController.close();
+            }
+            catch (error) {
+                RouterController.goBack();
+                SnackController.showError(error);
+            }
+        }
+    }
+    mobileLinkTemplate() {
+        return html `<wui-button
+      size="md"
+      ?loading=${this.loading}
+      ?disabled=${!this.uri || this.loading}
+      @click=${() => {
+            if (this.uri) {
+                CoreHelperUtil.openHref(this.uri, '_blank');
+            }
+        }}
+    >
+      Open farcaster</wui-button
+    >`;
+    }
+    onRenderProxy() {
+        if (!this.ready && this.uri) {
+            this.timeout = setTimeout(() => {
+                this.ready = true;
+            }, 0);
+        }
+    }
+    qrCodeTemplate() {
+        if (!this.uri || !this.ready) {
+            return null;
+        }
+        const size = this.getBoundingClientRect().width - 40;
+        return html ` <wui-qr-code
+      size=${size}
+      theme=${ThemeController.state.themeMode}
+      uri=${this.uri}
+      ?farcaster=${true}
+      data-testid="wui-qr-code"
+    ></wui-qr-code>`;
+    }
+    copyTemplate() {
+        const inactive = !this.uri || !this.ready;
+        return html `<wui-link
+      .disabled=${inactive}
+      @click=${this.onCopyUri}
+      color="fg-200"
+      data-testid="copy-wc2-uri"
+    >
+      <wui-icon size="xs" color="fg-200" slot="iconLeft" name="copy"></wui-icon>
+      Copy link
+    </wui-link>`;
+    }
+    onCopyUri() {
+        try {
+            if (this.uri) {
+                CoreHelperUtil.copyToClopboard(this.uri);
+                SnackController.showSuccess('Link copied');
+            }
+        }
+        catch {
+            SnackController.showError('Failed to copy');
+        }
+    }
+};
+W3mConnectingFarcasterView.styles = styles;
+__decorate([
+    state()
+], W3mConnectingFarcasterView.prototype, "socialProvider", void 0);
+__decorate([
+    state()
+], W3mConnectingFarcasterView.prototype, "uri", void 0);
+__decorate([
+    state()
+], W3mConnectingFarcasterView.prototype, "ready", void 0);
+__decorate([
+    state()
+], W3mConnectingFarcasterView.prototype, "loading", void 0);
+W3mConnectingFarcasterView = __decorate([
+    customElement('w3m-connecting-farcaster-view')
+], W3mConnectingFarcasterView);
+export { W3mConnectingFarcasterView };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,47 @@
+import { css } from 'lit';
+export default css `
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  wui-shimmer {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    border-radius: clamp(0px, var(--wui-border-radius-l), 40px) !important;
+  }
+
+  wui-qr-code {
+    opacity: 0;
+    animation-duration: 200ms;
+    animation-timing-function: ease;
+    animation-name: fadein;
+    animation-fill-mode: forwards;
+  }
+
+  wui-logo {
+    width: 80px;
+    height: 80px;
+    border-radius: var(--wui-border-radius-m);
+  }
+
+  wui-flex:first-child:not(:only-child) {
+    position: relative;
+  }
+  wui-loading-thumbnail {
+    position: absolute;
+  }
+  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: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,101 @@
+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 { AssetUtil, ChainController, CoreHelperUtil, RouterController, SnackController } from '@reown/appkit-core';
+import { customElement } from '@reown/appkit-ui';
+import { html, LitElement } from 'lit';
+import { state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './styles.js';
+let W3mConnectingMultiChainView = class W3mConnectingMultiChainView extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.activeConnector = ChainController.state.activeConnector;
+        this.unsubscribe.push(...[ChainController.subscribeKey('activeConnector', val => (this.activeConnector = val))]);
+    }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+    }
+    render() {
+        return html `
+      <wui-flex
+        flexDirection="column"
+        alignItems="center"
+        .padding=${['m', 'xl', 'xl', 'xl']}
+        gap="xl"
+      >
+        <wui-flex justifyContent="center" alignItems="center">
+          <wui-wallet-image
+            size="lg"
+            imageSrc=${ifDefined(AssetUtil.getConnectorImage(this.activeConnector))}
+          ></wui-wallet-image>
+        </wui-flex>
+        <wui-flex
+          flexDirection="column"
+          alignItems="center"
+          gap="xs"
+          .padding=${['0', 's', '0', 's']}
+        >
+          <wui-text variant="paragraph-500" color="fg-100">
+            Select Chain for ${this.activeConnector?.name}
+          </wui-text>
+          <wui-text align="center" variant="small-500" color="fg-200"
+            >Select which chain to connect to your multi chain wallet</wui-text
+          >
+        </wui-flex>
+        <wui-flex
+          flexGrow="1"
+          flexDirection="column"
+          alignItems="center"
+          gap="xs"
+          .padding=${['xs', '0', 'xs', '0']}
+        >
+          ${this.networksTemplate()}
+        </wui-flex>
+      </wui-flex>
+    `;
+    }
+    networksTemplate() {
+        return this.activeConnector?.providers?.map(provider => provider.name
+            ? html `
+            <wui-list-wallet
+              imageSrc=${ifDefined(AssetUtil.getChainImage(provider.chain))}
+              name=${provider.name}
+              @click=${() => this.onConnector(provider)}
+            ></wui-list-wallet>
+          `
+            : null);
+    }
+    onConnector(provider) {
+        ChainController.setActiveChain(provider.chain);
+        const connector = this.activeConnector?.providers?.find(p => p.chain === provider.chain);
+        if (!connector) {
+            SnackController.showError('Failed to find connector');
+            return;
+        }
+        if (connector.type === 'WALLET_CONNECT') {
+            if (CoreHelperUtil.isMobile()) {
+                RouterController.push('AllWallets');
+            }
+            else {
+                RouterController.push('ConnectingWalletConnect');
+            }
+        }
+        else {
+            RouterController.push('ConnectingExternal', { connector });
+        }
+    }
+};
+W3mConnectingMultiChainView.styles = styles;
+__decorate([
+    state()
+], W3mConnectingMultiChainView.prototype, "activeConnector", void 0);
+W3mConnectingMultiChainView = __decorate([
+    customElement('w3m-connecting-multi-chain-view')
+], W3mConnectingMultiChainView);
+export { W3mConnectingMultiChainView };
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+export default css `
+  wui-flex,
+  wui-list-wallet {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,179 @@
+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, ChainController, ConnectionController, ConnectorController, EventsController, ModalController, RouterController, SnackController, StorageUtil, ThemeController } 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';
+import { ConstantsUtil } from '../../utils/ConstantsUtil.js';
+let W3mConnectingSocialView = class W3mConnectingSocialView extends LitElement {
+    constructor() {
+        super();
+        this.unsubscribe = [];
+        this.socialProvider = AccountController.state.socialProvider;
+        this.socialWindow = AccountController.state.socialWindow;
+        this.error = false;
+        this.connecting = false;
+        this.message = 'Connect in the provider window';
+        this.authConnector = ConnectorController.getAuthConnector();
+        this.handleSocialConnection = async (event) => {
+            if (event.data?.resultUri) {
+                if (event.origin === ConstantsUtil.SECURE_SITE_ORIGIN) {
+                    window.removeEventListener('message', this.handleSocialConnection, false);
+                    try {
+                        if (this.authConnector && !this.connecting) {
+                            if (this.socialWindow) {
+                                this.socialWindow.close();
+                                AccountController.setSocialWindow(undefined, ChainController.state.activeChain);
+                            }
+                            this.connecting = true;
+                            this.updateMessage();
+                            const uri = event.data.resultUri;
+                            await this.authConnector.provider.connectSocial(uri);
+                            if (this.socialProvider) {
+                                StorageUtil.setConnectedSocialProvider(this.socialProvider);
+                                await ConnectionController.connectExternal(this.authConnector, this.authConnector.chain);
+                                EventsController.sendEvent({
+                                    type: 'track',
+                                    event: 'SOCIAL_LOGIN_SUCCESS',
+                                    properties: { provider: this.socialProvider }
+                                });
+                            }
+                        }
+                    }
+                    catch (error) {
+                        this.error = true;
+                        this.updateMessage();
+                        if (this.socialProvider) {
+                            EventsController.sendEvent({
+                                type: 'track',
+                                event: 'SOCIAL_LOGIN_ERROR',
+                                properties: { provider: this.socialProvider }
+                            });
+                        }
+                    }
+                }
+                else {
+                    RouterController.goBack();
+                    SnackController.showError('Untrusted Origin');
+                    if (this.socialProvider) {
+                        EventsController.sendEvent({
+                            type: 'track',
+                            event: 'SOCIAL_LOGIN_ERROR',
+                            properties: { provider: this.socialProvider }
+                        });
+                    }
+                }
+            }
+        };
+        this.unsubscribe.push(...[
+            AccountController.subscribe(val => {
+                if (val.socialProvider) {
+                    this.socialProvider = val.socialProvider;
+                }
+                if (val.socialWindow) {
+                    this.socialWindow = val.socialWindow;
+                }
+                if (val.address) {
+                    if (ModalController.state.open) {
+                        ModalController.close();
+                    }
+                }
+            })
+        ]);
+        if (this.authConnector) {
+            this.connectSocial();
+        }
+    }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+        window.removeEventListener('message', this.handleSocialConnection, false);
+    }
+    render() {
+        return html `
+      <wui-flex
+        data-error=${ifDefined(this.error)}
+        flexDirection="column"
+        alignItems="center"
+        .padding=${['3xl', 'xl', 'xl', 'xl']}
+        gap="xl"
+      >
+        <wui-flex justifyContent="center" alignItems="center">
+          <wui-logo logo=${ifDefined(this.socialProvider)}></wui-logo>
+          ${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 align="center" variant="paragraph-500" color="fg-100"
+            >Log in with
+            <span class="capitalize">${this.socialProvider ?? 'Social'}</span></wui-text
+          >
+          <wui-text align="center" variant="small-400" color=${this.error ? 'error-100' : 'fg-200'}
+            >${this.message}</wui-text
+          ></wui-flex
+        >
+      </wui-flex>
+    `;
+    }
+    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>`;
+    }
+    connectSocial() {
+        const interval = setInterval(() => {
+            if (this.socialWindow?.closed) {
+                if (!this.connecting && RouterController.state.view === 'ConnectingSocial') {
+                    RouterController.goBack();
+                }
+                clearInterval(interval);
+            }
+        }, 1000);
+        window.addEventListener('message', this.handleSocialConnection, false);
+    }
+    updateMessage() {
+        if (this.error) {
+            this.message = 'Something went wrong';
+        }
+        else if (this.connecting) {
+            this.message = 'Retrieving user data';
+        }
+        else {
+            this.message = 'Connect in the provider window';
+        }
+    }
+};
+W3mConnectingSocialView.styles = styles;
+__decorate([
+    state()
+], W3mConnectingSocialView.prototype, "socialProvider", void 0);
+__decorate([
+    state()
+], W3mConnectingSocialView.prototype, "socialWindow", void 0);
+__decorate([
+    state()
+], W3mConnectingSocialView.prototype, "error", void 0);
+__decorate([
+    state()
+], W3mConnectingSocialView.prototype, "connecting", void 0);
+__decorate([
+    state()
+], W3mConnectingSocialView.prototype, "message", void 0);
+W3mConnectingSocialView = __decorate([
+    customElement('w3m-connecting-social-view')
+], W3mConnectingSocialView);
+export { W3mConnectingSocialView };
+//# sourceMappingURL=index.js.map