@web3modal/scaffold - npm Package Compare versions

Comparing version 3.0.0-23dbc01e to 3.0.0-73ed03f2

dist/esm/index.js

@@ -1,26 +0,29 @@
-export * from './src/modal/w3m-modal';
-export * from './src/modal/w3m-router';
-export * from './src/views/w3m-account-view';
-export * from './src/views/w3m-all-wallets-view';
-export * from './src/views/w3m-connect-view';
-export * from './src/views/w3m-connecting-external-view';
-export * from './src/views/w3m-connecting-wc-view';
-export * from './src/views/w3m-network-switch-view';
-export * from './src/views/w3m-networks-view';
-export * from './src/views/w3m-what-is-a-network-view';
-export * from './src/views/w3m-what-is-a-wallet-view';
-export * from './src/partials/w3m-all-wallets-list';
-export * from './src/partials/w3m-all-wallets-search';
-export * from './src/partials/w3m-connecting-header';
-export * from './src/partials/w3m-connecting-wc-desktop';
-export * from './src/partials/w3m-connecting-wc-injected';
-export * from './src/partials/w3m-connecting-wc-mobile';
-export * from './src/partials/w3m-connecting-wc-qrcode';
-export * from './src/partials/w3m-connecting-wc-unsupported';
-export * from './src/partials/w3m-connecting-wc-web';
-export * from './src/partials/w3m-connecting-widget';
-export * from './src/partials/w3m-header';
-export * from './src/partials/w3m-help-widget';
-export * from './src/partials/w3m-snackbar';
-export { Web3ModalScaffoldHtml } from './src/client';
+export * from './src/modal/w3m-account-button/index.js';
+export * from './src/modal/w3m-connect-button/index.js';
+export * from './src/modal/w3m-modal/index.js';
+export * from './src/modal/w3m-network-button/index.js';
+export * from './src/modal/w3m-router/index.js';
+export * from './src/views/w3m-account-view/index.js';
+export * from './src/views/w3m-all-wallets-view/index.js';
+export * from './src/views/w3m-connect-view/index.js';
+export * from './src/views/w3m-connecting-external-view/index.js';
+export * from './src/views/w3m-connecting-wc-view/index.js';
+export * from './src/views/w3m-get-wallet-view/index.js';
+export * from './src/views/w3m-network-switch-view/index.js';
+export * from './src/views/w3m-networks-view/index.js';
+export * from './src/views/w3m-what-is-a-network-view/index.js';
+export * from './src/views/w3m-what-is-a-wallet-view/index.js';
+export * from './src/partials/w3m-all-wallets-list/index.js';
+export * from './src/partials/w3m-all-wallets-search/index.js';
+export * from './src/partials/w3m-connecting-header/index.js';
+export * from './src/partials/w3m-connecting-wc-desktop/index.js';
+export * from './src/partials/w3m-connecting-wc-injected/index.js';
+export * from './src/partials/w3m-connecting-wc-mobile/index.js';
+export * from './src/partials/w3m-connecting-wc-qrcode/index.js';
+export * from './src/partials/w3m-connecting-wc-unsupported/index.js';
+export * from './src/partials/w3m-connecting-wc-web/index.js';
+export * from './src/partials/w3m-header/index.js';
+export * from './src/partials/w3m-help-widget/index.js';
+export * from './src/partials/w3m-snackbar/index.js';
+export { Web3ModalScaffold } from './src/client.js';
 //# sourceMappingURL=index.js.map

dist/esm/src/client.js

@@ -1,4 +0,5 @@
-import { AccountController, ConnectionController, ConnectorController, CoreHelperUtil, ExplorerApiController, ModalController, NetworkController } from '@web3modal/core';
+import { AccountController, ApiController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, ModalController, NetworkController, OptionsController, ThemeController } from '@web3modal/core';
+import { setColorTheme, setThemeVariables } from '@web3modal/ui';
 let isInitialized = false;
-export class Web3ModalScaffoldHtml {
+export class Web3ModalScaffold {
     constructor(options) {
@@ -41,2 +42,6 @@ this.initPromise = undefined;
         };
+        this.fetchIdentity = request => BlockchainApiController.fetchIdentity(request);
+        this.setAddressExplorerUrl = addressExplorerUrl => {
+            AccountController.setAddressExplorerUrl(addressExplorerUrl);
+        };
         this.initControllers(options);
@@ -53,6 +58,35 @@ this.initOrContinue();
     }
+    getThemeMode() {
+        return ThemeController.state.themeMode;
+    }
+    getThemeVariables() {
+        return ThemeController.state.themeVariables;
+    }
+    setThemeMode(themeMode) {
+        ThemeController.setThemeMode(themeMode);
+        setColorTheme(ThemeController.state.themeMode);
+    }
+    setThemeVariables(themeVariables) {
+        ThemeController.setThemeVariables(themeVariables);
+        setThemeVariables(ThemeController.state.themeVariables);
+    }
+    subscribeTheme(callback) {
+        return ThemeController.subscribe(callback);
+    }
     initControllers(options) {
         NetworkController.setClient(options.networkControllerClient);
+        NetworkController.setDefaultCaipNetwork(options.defaultChain);
+        OptionsController.setProjectId(options.projectId);
+        OptionsController.setIncludeWalletIds(options.includeWalletIds);
+        OptionsController.setExcludeWalletIds(options.excludeWalletIds);
+        OptionsController.setFeaturedWalletIds(options.featuredWalletIds);
+        OptionsController.setTokens(options.tokens);
         ConnectionController.setClient(options.connectionControllerClient);
-        ExplorerApiController.setProjectId(options.projectId);
+        ApiController.setSdkVersion(options._sdkVersion);
+        if (options.themeMode) {
+            ThemeController.setThemeMode(options.themeMode);
+        }
+        if (options.themeVariables) {
+            ThemeController.setThemeVariables(options.themeVariables);
+        }
     }
@@ -59,0 +93,0 @@ async initOrContinue() {

dist/esm/src/modal/w3m-modal/index.js

@@ -7,10 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ExplorerApiController, ModalController, SnackController } from '@web3modal/core';
-import { initializeTheming, setColorTheme } from '@web3modal/ui';
+import { ApiController, ModalController, SnackController, ThemeController } from '@web3modal/core';
+import { UiHelperUtil, initializeTheming } from '@web3modal/ui';
 import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { animate } from 'motion';
-import styles from './styles';
+import styles from './styles.js';
 const SCROLL_LOCK = 'scroll-lock';
-export let W3mModal = class W3mModal extends LitElement {
+let W3mModal = class W3mModal extends LitElement {
     constructor() {
@@ -21,5 +21,4 @@ super();
         this.open = ModalController.state.open;
-        initializeTheming();
-        setColorTheme('dark');
-        ExplorerApiController.fetchRecommendedListings();
+        this.initializeTheming();
+        ApiController.prefetch();
         this.unsubscribe.push(ModalController.subscribeKey('open', val => (val ? this.onOpen() : this.onClose())));
@@ -49,2 +48,8 @@ }
     }
+    initializeTheming() {
+        const { themeVariables, themeMode } = ThemeController.state;
+        initializeTheming(themeVariables, themeMode);
+        const defaultThemeMode = UiHelperUtil.getColorTheme(themeMode);
+        ThemeController.setThemeMode(defaultThemeMode);
+    }
     async onClose() {
@@ -110,2 +115,3 @@ this.onScrollUnlock();
 ], W3mModal);
+export { W3mModal };
 //# sourceMappingURL=index.js.map

dist/esm/src/modal/w3m-modal/styles.js

@@ -21,8 +21,2 @@ import { css } from 'lit';
 
-  wui-overlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   wui-card {
@@ -29,0 +23,0 @@ max-width: 360px;

dist/esm/src/modal/w3m-router/index.js

@@ -11,4 +11,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { animate } from 'motion';
-import styles from './styles';
-export let W3mRouter = class W3mRouter extends LitElement {
+import styles from './styles.js';
+let W3mRouter = class W3mRouter extends LitElement {
     constructor() {
@@ -61,2 +61,4 @@ super();
                 return html `<w3m-what-is-a-network-view></w3m-what-is-a-network-view>`;
+            case 'GetWallet':
+                return html `<w3m-get-wallet-view></w3m-get-wallet-view>`;
             default:
@@ -90,2 +92,3 @@ return html `<w3m-connect-view></w3m-connect-view>`;
 ], W3mRouter);
+export { W3mRouter };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-all-wallets-list/index.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ExplorerApiController, RouterController } from '@web3modal/core';
+import { ApiController, AssetController, ConnectorController, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -13,4 +13,5 @@ import { customElement, state } from 'lit/decorators.js';
 import { animate } from 'motion';
-import styles from './styles';
-export let W3mAllWalletsList = class W3mAllWalletsList extends LitElement {
+import styles from './styles.js';
+const PAGINATOR_ID = 'local-paginator';
+let W3mAllWalletsList = class W3mAllWalletsList extends LitElement {
     constructor() {
@@ -20,8 +21,10 @@ super();
         this.paginationObserver = undefined;
-        this.initial = !ExplorerApiController.state.listings.length;
-        this.listings = ExplorerApiController.state.listings;
-        this.recommended = ExplorerApiController.state.recommended;
+        this.initial = !ApiController.state.wallets.length;
+        this.wallets = ApiController.state.wallets;
+        this.recommended = ApiController.state.recommended;
+        this.featured = ApiController.state.featured;
         this.unsubscribe.push(...[
-            ExplorerApiController.subscribeKey('listings', val => (this.listings = val)),
-            ExplorerApiController.subscribeKey('recommended', val => (this.recommended = val))
+            ApiController.subscribeKey('wallets', val => (this.wallets = val)),
+            ApiController.subscribeKey('recommended', val => (this.recommended = val)),
+            ApiController.subscribeKey('featured', val => (this.featured = val))
         ]);
@@ -42,7 +45,8 @@ }
         .padding=${['0', 's', 's', 's']}
-        gridTemplateColumns="repeat(4, 1fr)"
+        gridTemplateColumns="repeat(auto-fill, 76px)"
+        columnGap="xxs"
         rowGap="l"
-        columnGap="xs"
+        justifyContent="space-between"
       >
-        ${this.initial ? this.shimmerTemplate() : this.walletsTemplate()}
+        ${this.initial ? this.shimmerTemplate(16) : this.walletsTemplate()}
         ${this.paginationLoaderTemplate()}
@@ -55,3 +59,3 @@ </wui-grid>
         if (this.initial && gridEl) {
-            await ExplorerApiController.fetchListings();
+            await ApiController.fetchWallets({ page: 1 });
             await animate(gridEl, { opacity: [1, 0] }, { duration: 0.2 }).finished;
@@ -62,14 +66,16 @@ this.initial = false;
     }
-    shimmerTemplate() {
-        return [...Array(16)].map(() => html `<wui-card-select-loader type="wallet"></wui-card-select-loader>`);
+    shimmerTemplate(items, id) {
+        return [...Array(items)].map(() => html `
+        <wui-card-select-loader type="wallet" id=${ifDefined(id)}></wui-card-select-loader>
+      `);
     }
     walletsTemplate() {
-        const { images } = ExplorerApiController.state;
-        const wallets = [...this.recommended, ...this.listings];
-        return wallets.map(listing => html `
+        const { walletImages } = AssetController.state;
+        const wallets = [...this.featured, ...this.recommended, ...this.wallets];
+        return wallets.map(wallet => html `
         <wui-card-select
-          imageSrc=${ifDefined(images[listing.image_id])}
+          imageSrc=${ifDefined(walletImages[wallet.image_id])}
           type="wallet"
-          name=${listing.name}
-          @click=${() => this.onConnectListing(listing)}
+          name=${wallet.name}
+          @click=${() => this.onConnectWallet(wallet)}
         ></wui-card-select>
@@ -79,5 +85,5 @@ `);
     paginationLoaderTemplate() {
-        const { listings, total } = ExplorerApiController.state;
-        if (total === 0 || listings.length < total) {
-            return html `<wui-loading-spinner></wui-loading-spinner>`;
+        const { wallets, recommended, featured, count } = ApiController.state;
+        if (count === 0 || [...featured, ...wallets, ...recommended].length < count) {
+            return this.shimmerTemplate(4, PAGINATOR_ID);
         }
@@ -87,9 +93,9 @@ return null;
     createPaginationObserver() {
-        const loaderEl = this.shadowRoot?.querySelector('wui-loading-spinner');
+        const loaderEl = this.shadowRoot?.querySelector(`#${PAGINATOR_ID}`);
         if (loaderEl) {
             this.paginationObserver = new IntersectionObserver(([element]) => {
                 if (element?.isIntersecting && !this.initial) {
-                    const { page, total, listings } = ExplorerApiController.state;
-                    if (listings.length < total) {
-                        ExplorerApiController.fetchListings({ page: page + 1 });
+                    const { page, count, wallets } = ApiController.state;
+                    if (wallets.length < count) {
+                        ApiController.fetchWallets({ page: page + 1 });
                     }
@@ -101,4 +107,11 @@ }
     }
-    onConnectListing(listing) {
-        RouterController.push('ConnectingWalletConnect', { listing });
+    onConnectWallet(wallet) {
+        const { connectors } = ConnectorController.state;
+        const connector = connectors.find(({ explorerId }) => explorerId === wallet.id);
+        if (connector) {
+            RouterController.push('ConnectingExternal', { connector });
+        }
+        else {
+            RouterController.push('ConnectingWalletConnect', { wallet });
+        }
     }
@@ -112,9 +125,13 @@ };
     state()
-], W3mAllWalletsList.prototype, "listings", void 0);
+], W3mAllWalletsList.prototype, "wallets", void 0);
 __decorate([
     state()
 ], W3mAllWalletsList.prototype, "recommended", void 0);
+__decorate([
+    state()
+], W3mAllWalletsList.prototype, "featured", void 0);
 W3mAllWalletsList = __decorate([
     customElement('w3m-all-wallets-list')
 ], W3mAllWalletsList);
+export { W3mAllWalletsList };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-all-wallets-search/index.js

@@ -7,8 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ExplorerApiController, RouterController } from '@web3modal/core';
+import { ApiController, AssetController, ConnectorController, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './styles';
-export let W3mAllWalletsSearch = class W3mAllWalletsSearch extends LitElement {
+import styles from './styles.js';
+let W3mAllWalletsSearch = class W3mAllWalletsSearch extends LitElement {
     constructor() {
@@ -22,3 +22,5 @@ super(...arguments);
         this.onSearch();
-        return this.loading ? html `<wui-loading-spinner></wui-loading-spinner>` : this.walletsTemplate();
+        return this.loading
+            ? html `<wui-loading-spinner color="accent-100"></wui-loading-spinner>`
+            : this.walletsTemplate();
     }
@@ -29,3 +31,3 @@ async onSearch() {
             this.loading = true;
-            await ExplorerApiController.searchListings({ search: this.query });
+            await ApiController.searchWallet({ search: this.query });
             this.loading = false;
@@ -35,3 +37,4 @@ }
     walletsTemplate() {
-        const { search, images } = ExplorerApiController.state;
+        const { search } = ApiController.state;
+        const { walletImages } = AssetController.state;
         if (!search.length) {
@@ -58,8 +61,8 @@ return html `
       >
-        ${search.map(listing => html `
+        ${search.map(wallet => html `
             <wui-card-select
-              imageSrc=${ifDefined(images[listing.image_id])}
+              imageSrc=${ifDefined(walletImages[wallet.image_id])}
               type="wallet"
-              name=${listing.name}
-              @click=${() => this.onConnectListing(listing)}
+              name=${wallet.name}
+              @click=${() => this.onConnectWallet(wallet)}
             ></wui-card-select>
@@ -70,4 +73,11 @@ `)}
     }
-    onConnectListing(listing) {
-        RouterController.push('ConnectingWalletConnect', { listing });
+    onConnectWallet(wallet) {
+        const { connectors } = ConnectorController.state;
+        const connector = connectors.find(({ explorerId }) => explorerId === wallet.id);
+        if (connector) {
+            RouterController.push('ConnectingExternal', { connector });
+        }
+        else {
+            RouterController.push('ConnectingWalletConnect', { wallet });
+        }
     }
@@ -85,2 +95,3 @@ };
 ], W3mAllWalletsSearch);
+export { W3mAllWalletsSearch };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-header/index.js

@@ -9,3 +9,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, property } from 'lit/decorators.js';
-export let W3mConnectingHeader = class W3mConnectingHeader extends LitElement {
+let W3mConnectingHeader = class W3mConnectingHeader extends LitElement {
     constructor() {
@@ -28,3 +28,3 @@ super(...arguments);
             if (platform === 'injected') {
-                return { label: 'Extension', icon: 'extension', platform: 'injected' };
+                return { label: 'Browser', icon: 'extension', platform: 'injected' };
             }
@@ -43,3 +43,3 @@ else if (platform === 'mobile') {
             }
-            return { label: 'Extension', icon: 'extension', platform: 'unsupported' };
+            return { label: 'Browser', icon: 'extension', platform: 'unsupported' };
         });
@@ -65,2 +65,3 @@ this.platformTabs = tabs.map(({ platform }) => platform);
 ], W3mConnectingHeader);
+export { W3mConnectingHeader };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-wc-desktop/index.js

@@ -7,54 +7,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectionController, CoreHelperUtil, ExplorerApiController, RouterController, SnackController } from '@web3modal/core';
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mConnectingWcDesktop = class W3mConnectingWcDesktop extends LitElement {
+import { ConnectionController, CoreHelperUtil } from '@web3modal/core';
+import { customElement } from 'lit/decorators.js';
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+let W3mConnectingWcDesktop = class W3mConnectingWcDesktop extends W3mConnectingWidget {
     constructor() {
         super();
-        this.listing = RouterController.state.data?.listing;
-        this.images = ExplorerApiController.state.images;
-        this.unsubscribe = [];
-        this.timeout = undefined;
-        this.error = false;
-        this.uri = ConnectionController.state.wcUri;
-        this.ready = false;
-        this.multiPlatfrom = false;
-        this.unsubscribe.push(ConnectionController.subscribeKey('wcUri', val => (this.uri = val)));
-    }
-    disconnectedCallback() {
-        this.unsubscribe.forEach(unsubscribe => unsubscribe());
-        clearTimeout(this.timeout);
-    }
-    render() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-desktop: No listing provided');
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-desktop: No wallet provided');
         }
-        this.isReady();
-        return html `
-      <w3m-connecting-widget
-        imageSrc=${ifDefined(this.images[this.listing.image_id])}
-        name=${this.listing.name}
-        .error=${this.error}
-        .onConnect=${this.onConnect.bind(this)}
-        .onCopyUri=${this.onCopyUri.bind(this)}
-        .autoConnect=${false}
-      ></w3m-connecting-widget>
-    `;
+        this.onConnect = this.onConnectProxy.bind(this);
+        this.onRender = this.onRenderProxy.bind(this);
     }
-    isReady() {
+    onRenderProxy() {
         if (!this.ready && this.uri) {
+            this.ready = true;
             this.timeout = setTimeout(() => {
-                this.ready = true;
-                this.onConnect();
+                this.onConnect?.();
             }, 250);
         }
     }
-    onConnect() {
-        if (this.listing && this.uri) {
+    onConnectProxy() {
+        if (this.wallet?.desktop_link && this.uri) {
             try {
                 this.error = false;
-                const { desktop, name } = this.listing;
-                const { redirect, href } = CoreHelperUtil.formatNativeUrl(desktop.native, this.uri);
+                const { desktop_link, name } = this.wallet;
+                const { redirect, href } = CoreHelperUtil.formatNativeUrl(desktop_link, this.uri);
                 ConnectionController.setWcLinking({ name, href });
+                ConnectionController.setRecentWallet(this.wallet);
                 CoreHelperUtil.openHref(redirect, '_self');
@@ -67,29 +43,7 @@ }
     }
-    onCopyUri() {
-        try {
-            if (this.uri) {
-                CoreHelperUtil.copyToClopboard(this.uri);
-                SnackController.showSuccess('Link copied');
-            }
-        }
-        catch {
-            SnackController.showError('Failed to copy');
-        }
-    }
 };
-__decorate([
-    state()
-], W3mConnectingWcDesktop.prototype, "error", void 0);
-__decorate([
-    state()
-], W3mConnectingWcDesktop.prototype, "uri", void 0);
-__decorate([
-    state()
-], W3mConnectingWcDesktop.prototype, "ready", void 0);
-__decorate([
-    property({ type: Boolean })
-], W3mConnectingWcDesktop.prototype, "multiPlatfrom", void 0);
 W3mConnectingWcDesktop = __decorate([
     customElement('w3m-connecting-wc-desktop')
 ], W3mConnectingWcDesktop);
+export { W3mConnectingWcDesktop };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-wc-injected/index.js

@@ -7,31 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectionController, ExplorerApiController, ModalController, RouterController } from '@web3modal/core';
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mConnectingWcInjected = class W3mConnectingWcInjected extends LitElement {
+import { ConnectionController, ModalController } from '@web3modal/core';
+import { customElement } from 'lit/decorators.js';
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+let W3mConnectingWcInjected = class W3mConnectingWcInjected extends W3mConnectingWidget {
     constructor() {
-        super(...arguments);
-        this.listing = RouterController.state.data?.listing;
-        this.images = ExplorerApiController.state.images;
-        this.error = false;
-        this.multiPlatfrom = false;
-    }
-    render() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-injected: No listing provided');
+        super();
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-injected: No wallet provided');
         }
-        return html `
-      <w3m-connecting-widget
-        name=${this.listing.name}
-        imageSrc=${ifDefined(this.images[this.listing.image_id])}
-        .error=${this.error}
-        .onConnect=${this.onConnect.bind(this)}
-      ></w3m-connecting-widget>
-    `;
+        this.onConnect = this.onConnectProxy.bind(this);
+        this.onAutoConnect = this.onConnectProxy.bind(this);
     }
-    async onConnect() {
+    async onConnectProxy() {
         try {
             this.error = false;
-            await ConnectionController.connectInjected();
+            await ConnectionController.connectExternal('injected');
             ModalController.close();
@@ -44,11 +31,6 @@ }
 };
-__decorate([
-    state()
-], W3mConnectingWcInjected.prototype, "error", void 0);
-__decorate([
-    property({ type: Boolean })
-], W3mConnectingWcInjected.prototype, "multiPlatfrom", void 0);
 W3mConnectingWcInjected = __decorate([
     customElement('w3m-connecting-wc-injected')
 ], W3mConnectingWcInjected);
+export { W3mConnectingWcInjected };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-wc-mobile/index.js

@@ -7,50 +7,33 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectionController, CoreHelperUtil, ExplorerApiController, RouterController, SnackController } from '@web3modal/core';
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mConnectingWcMobile = class W3mConnectingWcMobile extends LitElement {
+import { ConnectionController, CoreHelperUtil } from '@web3modal/core';
+import { customElement } from 'lit/decorators.js';
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+let W3mConnectingWcMobile = class W3mConnectingWcMobile extends W3mConnectingWidget {
     constructor() {
         super();
-        this.listing = RouterController.state.data?.listing;
-        this.images = ExplorerApiController.state.images;
-        this.unsubscribe = [];
-        this.error = false;
-        this.uri = ConnectionController.state.wcUri;
-        this.ready = false;
-        this.multiPlatfrom = false;
-        this.unsubscribe.push(ConnectionController.subscribeKey('wcUri', val => (this.uri = val)));
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-mobile: No wallet provided');
+        }
+        this.onConnect = this.onConnectProxy.bind(this);
+        this.onRender = this.onRenderProxy.bind(this);
+        document.addEventListener('visibilitychange', this.onBuffering.bind(this));
     }
     disconnectedCallback() {
-        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+        super.disconnectedCallback();
+        document.removeEventListener('visibilitychange', this.onBuffering.bind(this));
     }
-    render() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-mobile: No listing provided');
-        }
-        this.isReady();
-        return html `
-      <w3m-connecting-widget
-        name=${this.listing.name}
-        imageSrc=${ifDefined(this.images[this.listing.image_id])}
-        .error=${this.error}
-        .onConnect=${this.onConnect.bind(this)}
-        .onCopyUri=${this.onCopyUri.bind(this)}
-        .autoConnect=${false}
-      ></w3m-connecting-widget>
-    `;
-    }
-    isReady() {
+    onRenderProxy() {
         if (!this.ready && this.uri) {
             this.ready = true;
-            this.onConnect();
+            this.onConnect?.();
         }
     }
-    onConnect() {
-        if (this.listing && this.uri) {
+    onConnectProxy() {
+        if (this.wallet?.mobile_link && this.uri) {
             try {
                 this.error = false;
-                const { mobile, name } = this.listing;
-                const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile.native ?? mobile.universal, this.uri);
+                const { mobile_link, name } = this.wallet;
+                const { redirect, href } = CoreHelperUtil.formatNativeUrl(mobile_link, this.uri);
                 ConnectionController.setWcLinking({ name, href });
+                ConnectionController.setRecentWallet(this.wallet);
                 CoreHelperUtil.openHref(redirect, '_self');
@@ -63,29 +46,13 @@ }
     }
-    onCopyUri() {
-        try {
-            if (this.uri) {
-                CoreHelperUtil.copyToClopboard(this.uri);
-                SnackController.showSuccess('Link copied');
-            }
+    onBuffering() {
+        if (document.visibilityState === 'visible' && !this.error) {
+            this.buffering = true;
+            setTimeout(() => (this.buffering = false), 5000);
         }
-        catch {
-            SnackController.showError('Failed to copy');
-        }
     }
 };
-__decorate([
-    state()
-], W3mConnectingWcMobile.prototype, "error", void 0);
-__decorate([
-    state()
-], W3mConnectingWcMobile.prototype, "uri", void 0);
-__decorate([
-    state()
-], W3mConnectingWcMobile.prototype, "ready", void 0);
-__decorate([
-    property({ type: Boolean })
-], W3mConnectingWcMobile.prototype, "multiPlatfrom", void 0);
 W3mConnectingWcMobile = __decorate([
     customElement('w3m-connecting-wc-mobile')
 ], W3mConnectingWcMobile);
+export { W3mConnectingWcMobile };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-wc-qrcode/index.js

@@ -7,27 +7,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectionController, CoreHelperUtil, ExplorerApiController, RouterController, SnackController } from '@web3modal/core';
-import { LitElement, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { AssetUtil, ConnectionController, ThemeController } from '@web3modal/core';
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './styles';
-export let W3mConnectingWcQrcode = class W3mConnectingWcQrcode extends LitElement {
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+import styles from './styles.js';
+let W3mConnectingWcQrcode = class W3mConnectingWcQrcode extends W3mConnectingWidget {
     constructor() {
         super();
-        this.unsubscribe = [];
-        this.timeout = undefined;
-        this.listing = RouterController.state.data?.listing;
-        this.images = ExplorerApiController.state.images;
-        this.uri = ConnectionController.state.wcUri;
-        this.ready = false;
-        this.unsubscribe.push(ConnectionController.subscribeKey('wcUri', val => (this.uri = val)));
+        this.forceUpdate = () => {
+            this.requestUpdate();
+        };
+        window.addEventListener('resize', this.forceUpdate);
     }
     disconnectedCallback() {
-        this.unsubscribe.forEach(unsubscribe => unsubscribe());
-        clearTimeout(this.timeout);
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.forceUpdate);
     }
     render() {
-        this.isReady();
+        this.onRenderProxy();
         return html `
       <wui-flex padding="xl" flexDirection="column" gap="xl" alignItems="center">
-        <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTenmplate()} </wui-shimmer>
+        <wui-shimmer borderRadius="l" width="100%"> ${this.qrCodeTemplate()} </wui-shimmer>
 
@@ -45,8 +43,10 @@ <wui-text variant="paragraph-500" color="fg-100">
     }
-    isReady() {
+    onRenderProxy() {
         if (!this.ready && this.uri) {
-            this.timeout = setTimeout(() => (this.ready = true), 250);
+            this.timeout = setTimeout(() => {
+                this.ready = true;
+            }, 250);
         }
     }
-    qrCodeTenmplate() {
+    qrCodeTemplate() {
         if (!this.uri || !this.ready) {
@@ -56,34 +56,19 @@ return null;
         const size = this.getBoundingClientRect().width - 40;
-        const imageSrc = this.listing ? this.images[this.listing.image_id] : undefined;
-        const alt = this.listing ? this.listing.name : undefined;
+        const alt = this.wallet ? this.wallet.name : undefined;
+        ConnectionController.setWcLinking(undefined);
+        ConnectionController.setRecentWallet(this.wallet);
         return html `<wui-qr-code
       size=${size}
-      theme="dark"
+      theme=${ThemeController.state.themeMode}
       uri=${this.uri}
-      imageSrc=${ifDefined(imageSrc)}
+      imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet?.image_id))}
       alt=${ifDefined(alt)}
     ></wui-qr-code>`;
     }
-    onCopyUri() {
-        try {
-            if (this.uri) {
-                CoreHelperUtil.copyToClopboard(this.uri);
-                SnackController.showSuccess('Link copied');
-            }
-        }
-        catch {
-            SnackController.showError('Failed to copy');
-        }
-    }
 };
 W3mConnectingWcQrcode.styles = styles;
-__decorate([
-    state()
-], W3mConnectingWcQrcode.prototype, "uri", void 0);
-__decorate([
-    state()
-], W3mConnectingWcQrcode.prototype, "ready", void 0);
 W3mConnectingWcQrcode = __decorate([
     customElement('w3m-connecting-wc-qrcode')
 ], W3mConnectingWcQrcode);
+export { W3mConnectingWcQrcode };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-wc-qrcode/styles.js

@@ -15,3 +15,3 @@ import { css } from 'lit';
     aspect-ratio: 1 / 1;
-    border-radius: var(--wui-border-radius-m) !important;
+    border-radius: var(--wui-border-radius-l) !important;
   }
@@ -18,0 +18,0 @@

dist/esm/src/partials/w3m-connecting-wc-unsupported/index.js

@@ -7,15 +7,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { CoreHelperUtil, ExplorerApiController, RouterController } from '@web3modal/core';
+import { AssetUtil, CoreHelperUtil, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mConnectingWcUnsupported = class W3mConnectingWcUnsupported extends LitElement {
+let W3mConnectingWcUnsupported = class W3mConnectingWcUnsupported extends LitElement {
     constructor() {
         super(...arguments);
-        this.listing = RouterController.state.data?.listing;
-        this.images = ExplorerApiController.state.images;
+        this.wallet = RouterController.state.data?.wallet;
     }
     render() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-unsupported: No listing provided');
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-unsupported: No wallet provided');
         }
@@ -31,3 +30,3 @@ return html `
           size="lg"
-          imageSrc=${ifDefined(this.images[this.listing.image_id])}
+          imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet.image_id))}
         ></wui-wallet-image>
@@ -38,3 +37,3 @@
           <wui-text variant="small-500" color="fg-200" align="center">
-            Download and install ${this.listing.name} to continue
+            Download and install ${this.wallet.name} to continue
           </wui-text>
@@ -51,6 +50,6 @@ </wui-flex>
     onDownload() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-unsupported:onDownload No listing provided');
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-unsupported:onDownload No wallet provided');
         }
-        CoreHelperUtil.openHref(this.listing.homepage, '_blank');
+        CoreHelperUtil.openHref(this.wallet.homepage, '_blank');
     }
@@ -61,2 +60,3 @@ };
 ], W3mConnectingWcUnsupported);
+export { W3mConnectingWcUnsupported };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-connecting-wc-web/index.js

@@ -7,54 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectionController, CoreHelperUtil, ExplorerApiController, RouterController, SnackController } from '@web3modal/core';
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mConnectingWcWeb = class W3mConnectingWcWeb extends LitElement {
+import { ConnectionController, CoreHelperUtil } from '@web3modal/core';
+import { customElement } from 'lit/decorators.js';
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+let W3mConnectingWcWeb = class W3mConnectingWcWeb extends W3mConnectingWidget {
     constructor() {
         super();
-        this.listing = RouterController.state.data?.listing;
-        this.images = ExplorerApiController.state.images;
-        this.unsubscribe = [];
-        this.timeout = undefined;
-        this.error = false;
-        this.uri = ConnectionController.state.wcUri;
-        this.ready = false;
-        this.multiPlatfrom = false;
-        this.unsubscribe.push(ConnectionController.subscribeKey('wcUri', val => (this.uri = val)));
-    }
-    disconnectedCallback() {
-        this.unsubscribe.forEach(unsubscribe => unsubscribe());
-        clearTimeout(this.timeout);
-    }
-    render() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-web: No listing provided');
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-web: No wallet provided');
         }
-        this.isReady();
-        return html `
-      <w3m-connecting-widget
-        name=${this.listing.name}
-        imageSrc=${ifDefined(this.images[this.listing.image_id])}
-        .error=${this.error}
-        .onConnect=${this.onConnect.bind(this)}
-        .onCopyUri=${this.onCopyUri.bind(this)}
-        .autoConnect=${false}
-      ></w3m-connecting-widget>
-    `;
+        this.onConnect = this.onConnectProxy.bind(this);
+        this.secondaryBtnLabel = 'Open';
+        this.secondaryLabel = 'Open and continue in a new browser tab';
+        this.secondaryBtnIcon = 'externalLink';
     }
-    isReady() {
-        if (!this.ready && this.uri) {
-            this.timeout = setTimeout(() => {
-                this.ready = true;
-                this.onConnect();
-            }, 250);
-        }
-    }
-    onConnect() {
-        if (this.listing && this.uri) {
+    onConnectProxy() {
+        if (this.wallet?.webapp_link && this.uri) {
             try {
                 this.error = false;
-                const { desktop, name } = this.listing;
-                const { redirect, href } = CoreHelperUtil.formatUniversalUrl(desktop.universal, this.uri);
+                const { webapp_link, name } = this.wallet;
+                const { redirect, href } = CoreHelperUtil.formatUniversalUrl(webapp_link, this.uri);
                 ConnectionController.setWcLinking({ name, href });
+                ConnectionController.setRecentWallet(this.wallet);
                 CoreHelperUtil.openHref(redirect, '_blank');
@@ -67,29 +37,7 @@ }
     }
-    onCopyUri() {
-        try {
-            if (this.uri) {
-                CoreHelperUtil.copyToClopboard(this.uri);
-                SnackController.showSuccess('Link copied');
-            }
-        }
-        catch {
-            SnackController.showError('Failed to copy');
-        }
-    }
 };
-__decorate([
-    state()
-], W3mConnectingWcWeb.prototype, "error", void 0);
-__decorate([
-    state()
-], W3mConnectingWcWeb.prototype, "uri", void 0);
-__decorate([
-    state()
-], W3mConnectingWcWeb.prototype, "ready", void 0);
-__decorate([
-    property({ type: Boolean })
-], W3mConnectingWcWeb.prototype, "multiPlatfrom", void 0);
 W3mConnectingWcWeb = __decorate([
     customElement('w3m-connecting-wc-web')
 ], W3mConnectingWcWeb);
+export { W3mConnectingWcWeb };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-header/index.js

@@ -11,10 +11,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { animate } from 'motion';
+import styles from './styles.js';
 function headings() {
     const connectorName = RouterController.state.data?.connector?.name;
-    const listingName = RouterController.state.data?.listing?.name;
+    const walletName = RouterController.state.data?.wallet?.name;
     const networkName = RouterController.state.data?.network?.name;
-    const name = listingName ?? connectorName;
+    const name = walletName ?? connectorName;
     return {
         Connect: 'Connect Wallet',
-        Account: 'Account',
+        Account: undefined,
         ConnectingExternal: name ?? 'Connect Wallet',
@@ -26,6 +27,7 @@ ConnectingWalletConnect: name ?? 'WalletConnect',
         WhatIsANetwork: 'What is a network?',
-        WhatIsAWallet: 'What is a wallet?'
+        WhatIsAWallet: 'What is a wallet?',
+        GetWallet: 'Get a Wallet'
     };
 }
-export let W3mHeader = class W3mHeader extends LitElement {
+let W3mHeader = class W3mHeader extends LitElement {
     constructor() {
@@ -46,15 +48,15 @@ super();
         return html `
-      <wui-flex
-        .padding=${['l', '2l', 'l', '2l']}
-        justifyContent="space-between"
-        alignItems="center"
-      >
-        ${this.dynamicButtonTemplate()}
-        <wui-text variant="paragraph-700" color="fg-100">${this.heading}</wui-text>
+      <wui-flex .padding=${this.getPadding()} justifyContent="space-between" alignItems="center">
+        ${this.dynamicButtonTemplate()} ${this.titleTemplate()}
         <wui-icon-link icon="close" @click=${ModalController.close}></wui-icon-link>
       </wui-flex>
-      <wui-separator></wui-separator>
+      ${this.separatorTemplate()}
     `;
     }
+    titleTemplate() {
+        return html `<wui-text variant="paragraph-700" color="fg-100">${this.heading}</wui-text>`;
+    }
     dynamicButtonTemplate() {
+        const { view } = RouterController.state;
+        const isConnectHelp = view === 'Connect';
         if (this.showBack) {
@@ -68,14 +70,19 @@ return html `<wui-icon-link
         return html `<wui-icon-link
+      data-hidden=${!isConnectHelp}
       id="dynamic"
       icon="helpCircle"
-      @click=${this.handleHelpClick}
+      @click=${() => RouterController.push('WhatIsAWallet')}
     ></wui-icon-link>`;
     }
-    handleHelpClick() {
-        if (RouterController.state.view === 'Networks') {
-            RouterController.push('WhatIsANetwork');
+    separatorTemplate() {
+        if (!this.heading) {
+            return null;
         }
-        else {
-            RouterController.push('WhatIsAWallet');
+        return html ` <wui-separator></wui-separator>`;
+    }
+    getPadding() {
+        if (this.heading) {
+            return ['l', '2l', 'l', '2l'];
         }
+        return ['l', '2l', '0', '2l'];
     }
@@ -106,2 +113,3 @@ async onViewChange(view) {
 };
+W3mHeader.styles = [styles];
 __decorate([
@@ -116,2 +124,3 @@ state()
 ], W3mHeader);
+export { W3mHeader };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-help-widget/index.js

@@ -9,3 +9,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, property } from 'lit/decorators.js';
-export let W3mHelpWidget = class W3mHelpWidget extends LitElement {
+let W3mHelpWidget = class W3mHelpWidget extends LitElement {
     constructor() {
@@ -41,2 +41,3 @@ super(...arguments);
 ], W3mHelpWidget);
+export { W3mHelpWidget };
 //# sourceMappingURL=index.js.map

dist/esm/src/partials/w3m-snackbar/index.js

@@ -11,3 +11,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { animate } from 'motion';
-import styles from './styles';
+import styles from './styles.js';
 const presets = {
@@ -25,3 +25,3 @@ success: {
 };
-export let W3mSnackBar = class W3mSnackBar extends LitElement {
+let W3mSnackBar = class W3mSnackBar extends LitElement {
     constructor() {
@@ -71,2 +71,3 @@ super();
 ], W3mSnackBar);
+export { W3mSnackBar };
 //# sourceMappingURL=index.js.map

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

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { AccountController, ConnectionController, CoreHelperUtil, ModalController, RouterController, SnackController } from '@web3modal/core';
+import { AccountController, AssetController, ConnectionController, CoreHelperUtil, ModalController, NetworkController, RouterController, SnackController } from '@web3modal/core';
 import { UiHelperUtil } from '@web3modal/ui';
@@ -13,7 +13,8 @@ import { LitElement, html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import styles from './styles';
-export let W3mAccountView = class W3mAccountView extends LitElement {
+import styles from './styles.js';
+let W3mAccountView = class W3mAccountView extends LitElement {
     constructor() {
         super();
         this.usubscribe = [];
+        this.networkImages = AssetController.state.networkImages;
         this.address = AccountController.state.address;
@@ -24,13 +25,21 @@ this.profileImage = AccountController.state.profileImage;
         this.balanceSymbol = AccountController.state.balanceSymbol;
-        this.usubscribe.push(AccountController.subscribe(val => {
-            if (val.address) {
-                this.address = val.address;
-                this.profileImage = val.profileImage;
-                this.profileName = val.profileName;
-                this.balance = val.balance;
-                this.balanceSymbol = val.balanceSymbol;
+        this.network = NetworkController.state.caipNetwork;
+        this.disconecting = false;
+        this.usubscribe.push(...[
+            AccountController.subscribe(val => {
+                if (val.address) {
+                    this.address = val.address;
+                    this.profileImage = val.profileImage;
+                    this.profileName = val.profileName;
+                    this.balance = val.balance;
+                    this.balanceSymbol = val.balanceSymbol;
+                }
+                else {
+                    ModalController.close();
+                }
+            })
+        ], NetworkController.subscribeKey('caipNetwork', val => {
+            if (val?.id) {
+                this.network = val;
             }
-            else {
-                ModalController.close();
-            }
         }));
@@ -45,8 +54,9 @@ }
         }
+        const networkImage = this.networkImages[this.network?.imageId ?? ''];
         return html `
       <wui-flex
         flexDirection="column"
-        .padding=${['s', 's', 'xl', 's']}
+        .padding=${['0', 's', 'm', 's']}
         alignItems="center"
-        gap="xs"
+        gap="l"
       >
@@ -59,12 +69,24 @@ <wui-avatar
 
-        <wui-flex gap="3xs" alignItems="center" justifyContent="center">
-          <wui-text variant="large-600" color="fg-100">
-            ${this.profileName ?? UiHelperUtil.getTruncateAddress(this.address, 4)}
-          </wui-text>
-          <wui-icon-link
-            size="md"
-            icon="copy"
-            iconColor="fg-200"
-            @click=${this.onCopyAddress}
-          ></wui-icon-link>
+        <wui-flex flexDirection="column" alignItems="center">
+          <wui-flex gap="3xs" alignItems="center" justifyContent="center">
+            <wui-text variant="large-600" color="fg-100">
+              ${this.profileName ?? UiHelperUtil.getTruncateAddress(this.address, 4)}
+            </wui-text>
+            <wui-icon-link
+              size="md"
+              icon="copy"
+              iconColor="fg-200"
+              @click=${this.onCopyAddress}
+            ></wui-icon-link>
+          </wui-flex>
+          <wui-flex gap="s" flexDirection="column" alignItems="center">
+            <wui-text variant="paragraph-500" color="fg-200">
+              ${CoreHelperUtil.formatBalance(this.balance, this.balanceSymbol)}
+            </wui-text>
+            <wui-button size="sm" variant="shade" @click=${this.onExplorer.bind(this)}>
+              <wui-icon size="sm" color="inherit" slot="iconLeft" name="compass"></wui-icon>
+              Block Explorer
+              <wui-icon size="sm" color="inherit" slot="iconRight" name="externalLink"></wui-icon>
+            </wui-button>
+          </wui-flex>
         </wui-flex>
@@ -75,8 +97,12 @@ </wui-flex>
         <wui-list-item
-          variant="icon"
+          .variant=${networkImage ? 'image' : 'icon'}
           iconVariant="overlay"
           icon="networkPlaceholder"
+          imageSrc=${ifDefined(networkImage)}
+          ?chevron=${this.isMultiNetwork()}
           @click=${this.onNetworks.bind(this)}
         >
-          <wui-text variant="paragraph-500" color="fg-100">${this.showBalance()}</wui-text>
+          <wui-text variant="paragraph-500" color="fg-100">
+            ${this.network?.name ?? 'Unknown'}
+          </wui-text>
         </wui-list-item>
@@ -87,2 +113,4 @@ <wui-list-item
           icon="disconnect"
+          ?chevron=${false}
+          .loading=${this.disconecting}
           @click=${this.onDisconnect.bind(this)}
@@ -95,2 +123,6 @@ >
     }
+    isMultiNetwork() {
+        const { requestedCaipNetworks } = NetworkController.state;
+        return requestedCaipNetworks ? requestedCaipNetworks.length > 1 : false;
+    }
     onCopyAddress() {
@@ -108,21 +140,25 @@ try {
     onNetworks() {
-        RouterController.push('Networks');
+        if (this.isMultiNetwork()) {
+            RouterController.push('Networks');
+        }
     }
     async onDisconnect() {
-        await ConnectionController.disconnect();
-        ModalController.close();
-    }
-    showBalance() {
-        let formattedBalance = undefined;
-        if (this.balance === '0.0') {
-            formattedBalance = '0';
+        try {
+            this.disconecting = true;
+            await ConnectionController.disconnect();
+            ModalController.close();
         }
-        else if (typeof this.balance === 'string' && this.balance.length > 6) {
-            formattedBalance = this.balance.substring(0, 6);
+        catch {
+            SnackController.showError('Failed to disconnect');
         }
-        else if (typeof this.balance === 'string') {
-            formattedBalance = this.balance;
+        finally {
+            this.disconecting = false;
         }
-        return formattedBalance ? `${formattedBalance} ${this.balanceSymbol}` : '_._';
     }
+    onExplorer() {
+        const { addressExplorerUrl } = AccountController.state;
+        if (addressExplorerUrl) {
+            CoreHelperUtil.openHref(addressExplorerUrl, '_blank');
+        }
+    }
 };
@@ -145,5 +181,12 @@ W3mAccountView.styles = styles;
 ], W3mAccountView.prototype, "balanceSymbol", void 0);
+__decorate([
+    state()
+], W3mAccountView.prototype, "network", void 0);
+__decorate([
+    state()
+], W3mAccountView.prototype, "disconecting", void 0);
 W3mAccountView = __decorate([
     customElement('w3m-account-view')
 ], W3mAccountView);
+export { W3mAccountView };
 //# sourceMappingURL=index.js.map

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

@@ -6,3 +6,11 @@ import { css } from 'lit';
   }
+
+  :host > wui-flex:first-child {
+    transform: translateY(calc(var(--wui-spacing-xxs) * -1));
+  }
+
+  wui-icon-link {
+    margin-right: calc(var(--wui-icon-box-size-md) * -1);
+  }
 `;
 //# sourceMappingURL=styles.js.map

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { CoreHelperUtil } from '@web3modal/core';
+import { CoreHelperUtil, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import styles from './styles';
-export let W3mAllWalletsView = class W3mAllWalletsView extends LitElement {
+import styles from './styles.js';
+let W3mAllWalletsView = class W3mAllWalletsView extends LitElement {
     constructor() {
@@ -23,4 +23,5 @@ super(...arguments);
         return html `
-      <wui-flex padding="s">
+      <wui-flex padding="s" gap="s">
         <wui-search-bar @inputChange=${this.onInputChange.bind(this)}></wui-search-bar>
+        ${this.qrButtonTemplate()}
       </wui-flex>
@@ -35,2 +36,20 @@ ${isSearch
     }
+    qrButtonTemplate() {
+        if (CoreHelperUtil.isMobile()) {
+            return html `
+        <wui-icon-box
+          size="lg"
+          iconcolor="accent-100"
+          backgroundcolor="accent-100"
+          icon="qrCode"
+          background="transparent"
+          @click=${this.onWalletConnectQr.bind(this)}
+        ></wui-icon-box>
+      `;
+        }
+        return null;
+    }
+    onWalletConnectQr() {
+        RouterController.push('ConnectingWalletConnect');
+    }
 };
@@ -44,2 +63,3 @@ W3mAllWalletsView.styles = styles;
 ], W3mAllWalletsView);
+export { W3mAllWalletsView };
 //# sourceMappingURL=index.js.map

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

 import { css } from 'lit';
 export default css `
   wui-grid {
-    max-height: 360px;
+    max-height: 420px;
     overflow: scroll;
@@ -6,0 +6,0 @@ scrollbar-width: none;

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

@@ -7,10 +7,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectorController, ExplorerApiController, RouterController } from '@web3modal/core';
+import { ApiController, AssetUtil, ConnectionController, ConnectorController, CoreHelperUtil, RouterController, StorageUtil } from '@web3modal/core';
 import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-export let W3mConnectView = class W3mConnectView extends LitElement {
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './styles.js';
+let W3mConnectView = class W3mConnectView extends LitElement {
     constructor() {
         super();
         this.unsubscribe = [];
-        this.images = ExplorerApiController.state.images;
         this.connectors = ConnectorController.state.connectors;
@@ -23,24 +24,109 @@ this.unsubscribe.push(ConnectorController.subscribeKey('connectors', val => (this.connectors = val)));
     render() {
-        const walletImages = Object.values(this.images).map(src => ({ src }));
         return html `
       <wui-flex flexDirection="column" padding="s" gap="xs">
-        ${this.connectorsTemplate()}
-        <wui-list-wallet
-          name="All Wallets"
-          showAllWallets
-          .walletImages=${walletImages}
-          @click=${this.onAllWallets.bind(this)}
-        ></wui-list-wallet>
+        ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()} ${this.featuredTemplate()}
+        ${this.connectorsTemplate()} ${this.allWalletsTemplate()}
       </wui-flex>
     `;
     }
+    walletConnectConnectorTemplate() {
+        const connector = this.connectors.find(c => c.type === 'WALLET_CONNECT');
+        if (!connector) {
+            return null;
+        }
+        const { tagLabel, tagVariant } = this.getTag(connector);
+        return html `
+      <wui-list-wallet
+        imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector.imageId))}
+        name=${connector.name ?? 'Unknown'}
+        @click=${() => this.onConnector(connector)}
+        tagLabel=${ifDefined(tagLabel)}
+        tagVariant=${ifDefined(tagVariant)}
+      >
+      </wui-list-wallet>
+    `;
+    }
+    featuredTemplate() {
+        const { featured } = ApiController.state;
+        if (!featured.length) {
+            return null;
+        }
+        const recent = StorageUtil.getRecentWallets();
+        const recentIds = recent.map(wallet => wallet.id);
+        const featuredWallets = featured.filter(wallet => !recentIds.includes(wallet.id));
+        return featuredWallets.map(wallet => html `
+        <wui-list-wallet
+          imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet.image_id))}
+          name=${wallet.name ?? 'Unknown'}
+          @click=${() => RouterController.push('ConnectingWalletConnect', { wallet })}
+        >
+        </wui-list-wallet>
+      `);
+    }
+    recentTemplate() {
+        const recent = StorageUtil.getRecentWallets();
+        return recent.map(wallet => html `
+        <wui-list-wallet
+          imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet.image_id))}
+          name=${wallet.name ?? 'Unknown'}
+          @click=${() => RouterController.push('ConnectingWalletConnect', { wallet })}
+          tagLabel="recent"
+          tagVariant="shade"
+        >
+        </wui-list-wallet>
+      `);
+    }
     connectorsTemplate() {
-        return this.connectors.map(connector => html `<wui-list-wallet
+        return this.connectors.map(connector => {
+            if (connector.type === 'WALLET_CONNECT') {
+                return null;
+            }
+            const { tagLabel, tagVariant } = this.getTag(connector);
+            return html `
+        <wui-list-wallet
+          imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector.imageId))}
           name=${connector.name ?? 'Unknown'}
           @click=${() => this.onConnector(connector)}
-        ></wui-list-wallet>`);
+          tagLabel=${ifDefined(tagLabel)}
+          tagVariant=${ifDefined(tagVariant)}
+        >
+        </wui-list-wallet>
+      `;
+        });
     }
+    allWalletsTemplate() {
+        if (CoreHelperUtil.isMobile()) {
+            return null;
+        }
+        return html `
+      <wui-list-wallet
+        name="All Wallets"
+        walletIcon="allWallets"
+        showAllWallets
+        @click=${this.onAllWallets.bind(this)}
+      ></wui-list-wallet>
+    `;
+    }
+    getTag(connector) {
+        if (connector.type === 'WALLET_CONNECT') {
+            if (CoreHelperUtil.isMobile()) {
+                return { tagLabel: 'all', tagVariant: 'main' };
+            }
+            return { tagLabel: 'qr code', tagVariant: 'main' };
+        }
+        if (connector.type === 'INJECTED') {
+            if (ConnectionController.checkInjectedInstalled()) {
+                return { tagLabel: 'installed', tagVariant: 'success' };
+            }
+        }
+        return { tagLabel: undefined, tagVariant: undefined };
+    }
     onConnector(connector) {
         if (connector.type === 'WALLET_CONNECT') {
-            RouterController.push('ConnectingWalletConnect', { connector });
+            if (CoreHelperUtil.isMobile()) {
+                RouterController.push('AllWallets');
+            }
+            else {
+                RouterController.push('ConnectingWalletConnect');
+            }
         }
@@ -55,2 +141,3 @@ else {
 };
+W3mConnectView.styles = styles;
 __decorate([
@@ -62,2 +149,3 @@ state()
 ], W3mConnectView);
+export { W3mConnectView };
 //# sourceMappingURL=index.js.map

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

@@ -7,25 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ConnectionController, ModalController, RouterController } from '@web3modal/core';
-import { LitElement, html } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mConnectingExternalView = class W3mConnectingExternalView extends LitElement {
+import { ConnectionController, ModalController } from '@web3modal/core';
+import { customElement } from 'lit/decorators.js';
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+let W3mConnectingExternalView = class W3mConnectingExternalView extends W3mConnectingWidget {
     constructor() {
-        super(...arguments);
-        this.connector = RouterController.state.data?.connector;
-        this.error = false;
-    }
-    render() {
+        super();
         if (!this.connector) {
             throw new Error('w3m-connecting-view: No connector provided');
         }
-        return html `
-      <w3m-connecting-widget
-        name=${ifDefined(this.connector.name)}
-        .error=${this.error}
-        .onConnect=${this.onConnect.bind(this)}
-      ></w3m-connecting-widget>
-    `;
+        this.onConnect = this.onConnectProxy.bind(this);
+        this.onAutoConnect = this.onConnectProxy.bind(this);
+        this.isWalletConnect = false;
     }
-    async onConnect() {
+    async onConnectProxy() {
         try {
@@ -43,8 +34,6 @@ this.error = false;
 };
-__decorate([
-    state()
-], W3mConnectingExternalView.prototype, "error", void 0);
 W3mConnectingExternalView = __decorate([
     customElement('w3m-connecting-external-view')
 ], W3mConnectingExternalView);
+export { W3mConnectingExternalView };
 //# sourceMappingURL=index.js.map

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

@@ -11,3 +11,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { animate } from 'motion';
-export let W3mConnectingWcView = class W3mConnectingWcView extends LitElement {
+let W3mConnectingWcView = class W3mConnectingWcView extends LitElement {
     constructor() {
@@ -17,3 +17,3 @@ super();
         this.lastRetry = Date.now();
-        this.listing = RouterController.state.data?.listing;
+        this.wallet = RouterController.state.data?.wallet;
         this.platform = undefined;
@@ -28,3 +28,3 @@ this.platforms = [];
     render() {
-        if (!this.listing) {
+        if (!this.wallet) {
             return html `<w3m-connecting-wc-qrcode></w3m-connecting-wc-qrcode>`;
@@ -44,6 +44,3 @@ }
                 await ConnectionController.state.wcPromise;
-                const { wcLinking } = ConnectionController.state;
-                if (wcLinking) {
-                    StorageUtil.setWalletConnectDeepLink(wcLinking);
-                }
+                this.storeWalletConnectDeeplink();
                 ModalController.close();
@@ -53,2 +50,3 @@ }
         catch {
+            ConnectionController.setWcError(true);
             if (CoreHelperUtil.isAllowedRetry(this.lastRetry)) {
@@ -61,5 +59,14 @@ SnackController.showError('Declined');
     }
+    storeWalletConnectDeeplink() {
+        const { wcLinking, recentWallet } = ConnectionController.state;
+        if (wcLinking) {
+            StorageUtil.setWalletConnectDeepLink(wcLinking);
+        }
+        if (recentWallet) {
+            StorageUtil.setWeb3ModalRecent(recentWallet);
+        }
+    }
     determinePlatforms() {
-        if (!this.listing) {
-            throw new Error('w3m-connecting-wc-view:determinePlatforms No listing');
+        if (!this.wallet) {
+            throw new Error('w3m-connecting-wc-view:determinePlatforms No wallet');
         }
@@ -70,11 +77,11 @@ if (this.platform) {
         const { connectors } = ConnectorController.state;
-        const { mobile, desktop, injected } = this.listing;
+        const { mobile_link, desktop_link, webapp_link, injected } = this.wallet;
         const injectedIds = injected?.map(({ injected_id }) => injected_id) ?? [];
         const isInjected = injectedIds.length;
-        const isMobileWc = mobile?.native || mobile?.universal;
-        const isWebWc = desktop?.universal;
+        const isMobileWc = mobile_link;
+        const isWebWc = webapp_link;
         const isInjectedConnector = connectors.find(c => c.type === 'INJECTED');
         const isInjectedInstalled = ConnectionController.checkInjectedInstalled(injectedIds);
         const isInjectedWc = isInjected && isInjectedInstalled && isInjectedConnector;
-        const isDesktopWc = desktop?.native && !CoreHelperUtil.isMobile();
+        const isDesktopWc = desktop_link && !CoreHelperUtil.isMobile();
         if (isInjectedWc) {
@@ -98,3 +105,2 @@ this.platforms.push('injected');
     platformTemplate() {
-        const multiPlatform = this.platforms.length > 1;
         if (!this.platform) {
@@ -105,16 +111,17 @@ return null;
             case 'injected':
-                return html `
-          <w3m-connecting-wc-injected .multiPlatfrom=${multiPlatform}></w3m-connecting-wc-injected>
-        `;
+                return html `<w3m-connecting-wc-injected></w3m-connecting-wc-injected>`;
             case 'desktop':
                 return html `
-          <w3m-connecting-wc-desktop .multiPlatfrom=${multiPlatform}></w3m-connecting-wc-desktop>
+          <w3m-connecting-wc-desktop .onRetry=${() => this.initializeConnection(true)}>
+          </w3m-connecting-wc-desktop>
         `;
             case 'web':
                 return html `
-          <w3m-connecting-wc-web .multiPlatfrom=${multiPlatform}></w3m-connecting-wc-web>
+          <w3m-connecting-wc-web .onRetry=${() => this.initializeConnection(true)}>
+          </w3m-connecting-wc-web>
         `;
             case 'mobile':
                 return html `
-          <w3m-connecting-wc-mobile .multiPlatfrom=${multiPlatform}></w3m-connecting-wc-mobile>
+          <w3m-connecting-wc-mobile .onRetry=${() => this.initializeConnection(true)}>
+          </w3m-connecting-wc-mobile>
         `;
@@ -158,2 +165,3 @@ case 'qrcode':
 ], W3mConnectingWcView);
+export { W3mConnectingWcView };
 //# sourceMappingURL=index.js.map

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

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { NetworkController, RouterController } from '@web3modal/core';
+import { AssetUtil, NetworkController, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -13,4 +13,4 @@ import { customElement, state } from 'lit/decorators.js';
 import { animate } from 'motion';
-import styles from './styles';
-export let W3mNetworkSwitchView = class W3mNetworkSwitchView extends LitElement {
+import styles from './styles.js';
+let W3mNetworkSwitchView = class W3mNetworkSwitchView extends LitElement {
     constructor() {
@@ -45,3 +45,3 @@ super(...arguments);
             size="lg"
-            imageSrc=${ifDefined(this.network.imageSrc)}
+            imageSrc=${ifDefined(AssetUtil.getNetworkImage(this.network.imageId))}
           ></wui-network-image>
@@ -57,3 +57,3 @@
             size="sm"
-            border
+            ?border=${true}
           ></wui-icon-box>
@@ -109,2 +109,3 @@ </wui-flex>
 ], W3mNetworkSwitchView);
+export { W3mNetworkSwitchView };
 //# sourceMappingURL=index.js.map

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

@@ -35,2 +35,3 @@ import { css } from 'lit';
     transform: scale(0.5);
+    z-index: 1;
     transition: all var(--wui-ease-out-power-2) var(--wui-duration-lg);
@@ -37,0 +38,0 @@ }

dist/esm/src/views/w3m-networks-view/index.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { AccountController, NetworkController, RouterController } from '@web3modal/core';
+import { AccountController, AssetUtil, NetworkController, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-export let W3mNetworksView = class W3mNetworksView extends LitElement {
+let W3mNetworksView = class W3mNetworksView extends LitElement {
     constructor() {
@@ -30,6 +30,10 @@ super();
 
-      <wui-flex padding="s">
+      <wui-flex padding="s" flexDirection="column" gap="m" alignItems="center">
         <wui-text variant="small-500" color="fg-300" align="center">
           Your connected wallet may not support some of the networks available for this dApp
         </wui-text>
+        <wui-link @click=${() => RouterController.push('WhatIsANetwork')}>
+          <wui-icon size="xs" color="accent-100" slot="iconLeft" name="helpCircle"></wui-icon>
+          What is a network
+        </wui-link>
       </wui-flex>
@@ -48,3 +52,3 @@ `;
           .selected=${this.caipNetwork?.id === network.id}
-          imageSrc=${ifDefined(network.imageSrc)}
+          imageSrc=${ifDefined(AssetUtil.getNetworkImage(network.imageId))}
           type="network"
@@ -80,2 +84,3 @@ name=${network.name ?? network.id}
 ], W3mNetworksView);
+export { W3mNetworksView };
 //# sourceMappingURL=index.js.map

dist/esm/src/views/w3m-what-is-a-network-view/index.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { RouterController } from '@web3modal/core';
+import { CoreHelperUtil } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -20,6 +20,6 @@ import { customElement } from 'lit/decorators.js';
         title: 'Designed for different uses',
-        text: 'A wallet lets you store, send and receive digital assets like cryptocurrencies and NFTs.'
+        text: 'Each network is designed differently, and may therefore suit certain apps and experiences.'
     }
 ];
-export let W3mWhatIsANetworkView = class W3mWhatIsANetworkView extends LitElement {
+let W3mWhatIsANetworkView = class W3mWhatIsANetworkView extends LitElement {
     render() {
@@ -37,3 +37,5 @@ return html `
           size="sm"
-          @click=${() => RouterController.push('WhatIsANetwork')}
+          @click=${() => {
+            CoreHelperUtil.openHref('https://ethereum.org/en/developers/docs/networks/', '_blank');
+        }}
         >
@@ -50,2 +52,3 @@ Learn more
 ], W3mWhatIsANetworkView);
+export { W3mWhatIsANetworkView };
 //# sourceMappingURL=index.js.map

dist/esm/src/views/w3m-what-is-a-wallet-view/index.js

@@ -27,3 +27,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 ];
-export let W3mWhatIsAWalletView = class W3mWhatIsAWalletView extends LitElement {
+let W3mWhatIsAWalletView = class W3mWhatIsAWalletView extends LitElement {
     render() {
@@ -38,3 +38,3 @@ return html `
         <w3m-help-widget .data=${data}></w3m-help-widget>
-        <wui-button variant="fill" size="sm" @click=${() => RouterController.push('WhatIsAWallet')}>
+        <wui-button variant="fill" size="sm" @click=${() => RouterController.push('GetWallet')}>
           <wui-icon color="inherit" slot="iconLeft" name="wallet"></wui-icon>
@@ -50,2 +50,3 @@ Get a Wallet
 ], W3mWhatIsAWalletView);
+export { W3mWhatIsAWalletView };
 //# sourceMappingURL=index.js.map

dist/types/index.d.ts

@@ -1,26 +0,30 @@
-export * from './src/modal/w3m-modal';
-export * from './src/modal/w3m-router';
-export * from './src/views/w3m-account-view';
-export * from './src/views/w3m-all-wallets-view';
-export * from './src/views/w3m-connect-view';
-export * from './src/views/w3m-connecting-external-view';
-export * from './src/views/w3m-connecting-wc-view';
-export * from './src/views/w3m-network-switch-view';
-export * from './src/views/w3m-networks-view';
-export * from './src/views/w3m-what-is-a-network-view';
-export * from './src/views/w3m-what-is-a-wallet-view';
-export * from './src/partials/w3m-all-wallets-list';
-export * from './src/partials/w3m-all-wallets-search';
-export * from './src/partials/w3m-connecting-header';
-export * from './src/partials/w3m-connecting-wc-desktop';
-export * from './src/partials/w3m-connecting-wc-injected';
-export * from './src/partials/w3m-connecting-wc-mobile';
-export * from './src/partials/w3m-connecting-wc-qrcode';
-export * from './src/partials/w3m-connecting-wc-unsupported';
-export * from './src/partials/w3m-connecting-wc-web';
-export * from './src/partials/w3m-connecting-widget';
-export * from './src/partials/w3m-header';
-export * from './src/partials/w3m-help-widget';
-export * from './src/partials/w3m-snackbar';
-export { Web3ModalScaffoldHtml } from './src/client';
+export * from './src/modal/w3m-account-button/index.js';
+export * from './src/modal/w3m-connect-button/index.js';
+export * from './src/modal/w3m-modal/index.js';
+export * from './src/modal/w3m-network-button/index.js';
+export * from './src/modal/w3m-router/index.js';
+export * from './src/views/w3m-account-view/index.js';
+export * from './src/views/w3m-all-wallets-view/index.js';
+export * from './src/views/w3m-connect-view/index.js';
+export * from './src/views/w3m-connecting-external-view/index.js';
+export * from './src/views/w3m-connecting-wc-view/index.js';
+export * from './src/views/w3m-get-wallet-view/index.js';
+export * from './src/views/w3m-network-switch-view/index.js';
+export * from './src/views/w3m-networks-view/index.js';
+export * from './src/views/w3m-what-is-a-network-view/index.js';
+export * from './src/views/w3m-what-is-a-wallet-view/index.js';
+export * from './src/partials/w3m-all-wallets-list/index.js';
+export * from './src/partials/w3m-all-wallets-search/index.js';
+export * from './src/partials/w3m-connecting-header/index.js';
+export * from './src/partials/w3m-connecting-wc-desktop/index.js';
+export * from './src/partials/w3m-connecting-wc-injected/index.js';
+export * from './src/partials/w3m-connecting-wc-mobile/index.js';
+export * from './src/partials/w3m-connecting-wc-qrcode/index.js';
+export * from './src/partials/w3m-connecting-wc-unsupported/index.js';
+export * from './src/partials/w3m-connecting-wc-web/index.js';
+export * from './src/partials/w3m-header/index.js';
+export * from './src/partials/w3m-help-widget/index.js';
+export * from './src/partials/w3m-snackbar/index.js';
+export { Web3ModalScaffold } from './src/client.js';
+export type { LibraryOptions, ScaffoldOptions } from './src/client.js';
 export type * from '@web3modal/core';

dist/types/src/client.d.ts

@@ -1,13 +0,28 @@
-import type { ConnectionControllerClient, ExplorerApiControllerState, ModalControllerArguments, NetworkControllerClient } from '@web3modal/core';
-import { AccountController, ConnectionController, ConnectorController, NetworkController } from '@web3modal/core';
-interface Options {
+import type { ApiControllerState, ConnectionControllerClient, ModalControllerArguments, NetworkControllerClient, NetworkControllerState, OptionsControllerState, ThemeControllerState, ThemeMode, ThemeVariables } from '@web3modal/core';
+import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, NetworkController } from '@web3modal/core';
+export interface LibraryOptions {
+    projectId: OptionsControllerState['projectId'];
+    themeMode?: ThemeMode;
+    themeVariables?: ThemeVariables;
+    includeWalletIds?: OptionsControllerState['includeWalletIds'];
+    excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
+    featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
+    defaultChain?: NetworkControllerState['caipNetwork'];
+    tokens?: OptionsControllerState['tokens'];
+    _sdkVersion: ApiControllerState['sdkVersion'];
+}
+export interface ScaffoldOptions extends LibraryOptions {
     networkControllerClient: NetworkControllerClient;
     connectionControllerClient: ConnectionControllerClient;
-    projectId: ExplorerApiControllerState['projectId'];
 }
-export declare class Web3ModalScaffoldHtml {
+export declare class Web3ModalScaffold {
     private initPromise?;
-    constructor(options: Options);
+    constructor(options: ScaffoldOptions);
     open(options?: ModalControllerArguments['open']): Promise<void>;
     close(): Promise<void>;
+    getThemeMode(): ThemeMode;
+    getThemeVariables(): ThemeVariables;
+    setThemeMode(themeMode: ThemeControllerState['themeMode']): void;
+    setThemeVariables(themeVariables: ThemeControllerState['themeVariables']): void;
+    subscribeTheme(callback: (newState: ThemeControllerState) => void): () => void;
     protected setIsConnected: (typeof AccountController)['setIsConnected'];
@@ -26,5 +41,6 @@ protected setCaipAddress: (typeof AccountController)['setCaipAddress'];
     protected resetWcConnection: (typeof ConnectionController)['resetWcConnection'];
+    protected fetchIdentity: (typeof BlockchainApiController)['fetchIdentity'];
+    protected setAddressExplorerUrl: (typeof AccountController)['setAddressExplorerUrl'];
     private initControllers;
     private initOrContinue;
 }
-export {};

dist/types/src/modal/w3m-modal/index.d.ts

@@ -11,2 +11,3 @@ import { LitElement } from 'lit';
     private onOverlayClick;
+    private initializeTheming;
     private onClose;
@@ -13,0 +14,0 @@ private onOpen;

dist/types/src/partials/w3m-all-wallets-list/index.d.ts

@@ -7,4 +7,5 @@ import { LitElement } from 'lit';
     private initial;
-    private listings;
+    private wallets;
     private recommended;
+    private featured;
     constructor();
@@ -19,3 +20,3 @@ firstUpdated(): void;
     private createPaginationObserver;
-    private onConnectListing;
+    private onConnectWallet;
 }
@@ -22,0 +23,0 @@ declare global {

dist/types/src/partials/w3m-all-wallets-search/index.d.ts

@@ -10,3 +10,3 @@ import { LitElement } from 'lit';
     private walletsTemplate;
-    private onConnectListing;
+    private onConnectWallet;
 }
@@ -13,0 +13,0 @@ declare global {

dist/types/src/partials/w3m-connecting-wc-desktop/index.d.ts

@@ -1,17 +0,6 @@
-import { LitElement } from 'lit';
-export declare class W3mConnectingWcDesktop extends LitElement {
-    private readonly listing;
-    private readonly images;
-    private unsubscribe;
-    private timeout?;
-    private error;
-    private uri;
-    private ready;
-    multiPlatfrom: boolean;
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+export declare class W3mConnectingWcDesktop extends W3mConnectingWidget {
     constructor();
-    disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private isReady;
-    private onConnect;
-    private onCopyUri;
+    private onRenderProxy;
+    private onConnectProxy;
 }
@@ -18,0 +7,0 @@ declare global {

dist/types/src/partials/w3m-connecting-wc-injected/index.d.ts

@@ -1,9 +0,5 @@
-import { LitElement } from 'lit';
-export declare class W3mConnectingWcInjected extends LitElement {
-    private readonly listing;
-    private readonly images;
-    private error;
-    multiPlatfrom: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    private onConnect;
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+export declare class W3mConnectingWcInjected extends W3mConnectingWidget {
+    constructor();
+    private onConnectProxy;
 }
@@ -10,0 +6,0 @@ declare global {

dist/types/src/partials/w3m-connecting-wc-mobile/index.d.ts

@@ -1,16 +0,8 @@
-import { LitElement } from 'lit';
-export declare class W3mConnectingWcMobile extends LitElement {
-    private readonly listing;
-    private readonly images;
-    private unsubscribe;
-    private error;
-    private uri;
-    private ready;
-    multiPlatfrom: boolean;
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+export declare class W3mConnectingWcMobile extends W3mConnectingWidget {
     constructor();
     disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private isReady;
-    private onConnect;
-    private onCopyUri;
+    private onRenderProxy;
+    private onConnectProxy;
+    private onBuffering;
 }
@@ -17,0 +9,0 @@ declare global {

dist/types/src/partials/w3m-connecting-wc-qrcode/index.d.ts

@@ -1,16 +0,10 @@
-import { LitElement } from 'lit';
-export declare class W3mConnectingWcQrcode extends LitElement {
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+export declare class W3mConnectingWcQrcode extends W3mConnectingWidget {
     static styles: import("lit").CSSResult;
-    private unsubscribe;
-    private timeout?;
-    private readonly listing;
-    private readonly images;
-    private uri;
-    private ready;
     constructor();
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private isReady;
-    private qrCodeTenmplate;
-    private onCopyUri;
+    private onRenderProxy;
+    private qrCodeTemplate;
+    private forceUpdate;
 }
@@ -17,0 +11,0 @@ declare global {

dist/types/src/partials/w3m-connecting-wc-unsupported/index.d.ts

 import { LitElement } from 'lit';
 export declare class W3mConnectingWcUnsupported extends LitElement {
-    private readonly listing;
-    private readonly images;
+    private readonly wallet;
     render(): import("lit-html").TemplateResult<1>;
@@ -6,0 +5,0 @@ private onDownload;

dist/types/src/partials/w3m-connecting-wc-web/index.d.ts

@@ -1,17 +0,5 @@
-import { LitElement } from 'lit';
-export declare class W3mConnectingWcWeb extends LitElement {
-    private readonly listing;
-    private readonly images;
-    private unsubscribe;
-    private timeout?;
-    private error;
-    private uri;
-    private ready;
-    multiPlatfrom: boolean;
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+export declare class W3mConnectingWcWeb extends W3mConnectingWidget {
     constructor();
-    disconnectedCallback(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    private isReady;
-    private onConnect;
-    private onCopyUri;
+    private onConnectProxy;
 }
@@ -18,0 +6,0 @@ declare global {

dist/types/src/partials/w3m-header/index.d.ts

 import { LitElement } from 'lit';
 export declare class W3mHeader extends LitElement {
+    static styles: import("lit").CSSResult[];
     private unsubscribe;
@@ -9,4 +10,6 @@ private heading;
     render(): import("lit-html").TemplateResult<1>;
+    private titleTemplate;
     private dynamicButtonTemplate;
-    private handleHelpClick;
+    private separatorTemplate;
+    private getPadding;
     private onViewChange;
@@ -13,0 +16,0 @@ private onHistoryChange;

dist/types/src/views/w3m-account-view/index.d.ts

@@ -5,2 +5,3 @@ import { LitElement } from 'lit';
     private usubscribe;
+    private readonly networkImages;
     private address;
@@ -11,9 +12,12 @@ private profileImage;
     private balanceSymbol;
+    private network;
+    private disconecting;
     constructor();
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    private isMultiNetwork;
     private onCopyAddress;
     private onNetworks;
     private onDisconnect;
-    private showBalance;
+    private onExplorer;
 }
@@ -20,0 +24,0 @@ declare global {

dist/types/src/views/w3m-all-wallets-view/index.d.ts

@@ -8,2 +8,4 @@ import { LitElement } from 'lit';
     private onDebouncedSearch;
+    private qrButtonTemplate;
+    private onWalletConnectQr;
 }
@@ -10,0 +12,0 @@ declare global {

dist/types/src/views/w3m-connect-view/index.d.ts

 import { LitElement } from 'lit';
 export declare class W3mConnectView extends LitElement {
+    static styles: import("lit").CSSResult;
     private unsubscribe;
-    private images;
     private connectors;
@@ -9,3 +9,8 @@ constructor();
     render(): import("lit-html").TemplateResult<1>;
+    private walletConnectConnectorTemplate;
+    private featuredTemplate;
+    private recentTemplate;
     private connectorsTemplate;
+    private allWalletsTemplate;
+    private getTag;
     private onConnector;
@@ -12,0 +17,0 @@ private onAllWallets;

dist/types/src/views/w3m-connecting-external-view/index.d.ts

@@ -1,7 +0,5 @@
-import { LitElement } from 'lit';
-export declare class W3mConnectingExternalView extends LitElement {
-    private readonly connector;
-    private error;
-    render(): import("lit-html").TemplateResult<1>;
-    private onConnect;
+import { W3mConnectingWidget } from '../../utils/w3m-connecting-widget/index.js';
+export declare class W3mConnectingExternalView extends W3mConnectingWidget {
+    constructor();
+    private onConnectProxy;
 }
@@ -8,0 +6,0 @@ declare global {

dist/types/src/views/w3m-connecting-wc-view/index.d.ts

@@ -5,3 +5,3 @@ import { LitElement } from 'lit';
     private lastRetry;
-    private listing;
+    private wallet;
     private platform?;
@@ -13,2 +13,3 @@ private platforms;
     private initializeConnection;
+    private storeWalletConnectDeeplink;
     private determinePlatforms;
@@ -15,0 +16,0 @@ private platformTemplate;

package.json

 {
   "name": "@web3modal/scaffold",
-  "version": "3.0.0-23dbc01e",
+  "version": "3.0.0-73ed03f2",
   "type": "module",
@@ -12,11 +12,11 @@ "main": "./dist/esm/index.js",
     "build:clean": "rm -rf dist",
-    "build:types": "tsc --declaration --emitDeclarationOnly --outDir ./dist/types",
-    "build:source": "tsc --outDir ./dist/esm",
-    "build": "npm run build:clean; npm run build:types; npm run build:source",
-    "typecheck": "tsc --noEmit"
+    "build": "npm run build:clean; tsc --build",
+    "watch": "npm run build:clean; tsc --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/core": "3.0.0-23dbc01e",
-    "@web3modal/ui": "3.0.0-23dbc01e",
-    "lit": "2.7.6",
+    "@web3modal/core": "3.0.0-73ed03f2",
+    "@web3modal/ui": "3.0.0-73ed03f2",
+    "lit": "2.8.0",
     "motion": "10.16.2"
@@ -23,0 +23,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

309687

increased by93.18%

Number of package files

129

increased by17.27%

Lines of code

3239

increased by17.23%

Dependency changes

• + Added@web3modal/core@3.0.0-73ed03f2(transitive)

• + Added@web3modal/ui@3.0.0-73ed03f2(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedvaltio@1.11.2(transitive)

• - Removed@web3modal/core@3.0.0-23dbc01e(transitive)

• - Removed@web3modal/ui@3.0.0-23dbc01e(transitive)

• - Removedlit@2.7.6(transitive)

• - Removedvaltio@1.11.1(transitive)

• Updated@web3modal/core@3.0.0-73ed03f2

• Updated@web3modal/ui@3.0.0-73ed03f2

• Updatedlit@2.8.0