@web3modal/scaffold - npm Package Compare versions

Comparing version 3.0.0-31553f77 to 3.0.0-547be88e

dist/esm/index.js

@@ -31,2 +31,3 @@ export * from './src/modal/w3m-account-button/index.js';
 export { Web3ModalScaffold } from './src/client.js';
+export { CoreHelperUtil } from '@web3modal/core';
 //# sourceMappingURL=index.js.map

dist/esm/src/client.js

@@ -1,2 +0,2 @@
-import { AccountController, ApiController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, ModalController, NetworkController, OptionsController, ThemeController } from '@web3modal/core';
+import { AccountController, ApiController, BlockchainApiController, ConnectionController, ConnectorController, CoreHelperUtil, ModalController, NetworkController, OptionsController, PublicStateController, ThemeController } from '@web3modal/core';
 import { setColorTheme, setThemeVariables } from '@web3modal/ui';
@@ -39,2 +39,5 @@ let isInitialized = false;
         };
+        this.addConnector = connector => {
+            ConnectorController.addConnector(connector);
+        };
         this.resetWcConnection = () => {
@@ -75,2 +78,8 @@ ConnectionController.resetWcConnection();
     }
+    getState() {
+        return { ...PublicStateController.state };
+    }
+    subscribeState(callback) {
+        return PublicStateController.subscribe(callback);
+    }
     initControllers(options) {
@@ -100,3 +109,3 @@ NetworkController.setClient(options.networkControllerClient);
             this.initPromise = new Promise(async (resolve) => {
-                await Promise.all([import('@web3modal/ui'), import('./modal/w3m-modal')]);
+                await Promise.all([import('@web3modal/ui'), import('./modal/w3m-modal/index.js')]);
                 const modal = document.createElement('w3m-modal');
@@ -103,0 +112,0 @@ document.body.insertAdjacentElement('beforeend', modal);

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

@@ -54,2 +54,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         address=${ifDefined(this.profileName ?? this.address)}
+        ?isProfileName=${Boolean(this.profileName)}
         networkSrc=${ifDefined(networkImage)}
@@ -56,0 +57,0 @@ avatarSrc=${ifDefined(this.profileImage)}

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

@@ -11,3 +11,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, state } from 'lit/decorators.js';
-import { animate } from 'motion';
 import styles from './styles.js';
@@ -32,3 +31,3 @@ const SCROLL_LOCK = 'scroll-lock';
             ? html `
-          <wui-overlay @click=${this.onOverlayClick.bind(this)}>
+          <wui-flex @click=${this.onOverlayClick.bind(this)}>
             <wui-card role="alertdialog" aria-modal="true" tabindex="0">
@@ -39,3 +38,3 @@ <w3m-header></w3m-header>
             </wui-card>
-          </wui-overlay>
+          </wui-flex>
         `
@@ -51,9 +50,12 @@ : null;
         const { themeVariables, themeMode } = ThemeController.state;
-        initializeTheming(themeVariables, themeMode);
         const defaultThemeMode = UiHelperUtil.getColorTheme(themeMode);
-        ThemeController.setThemeMode(defaultThemeMode);
+        initializeTheming(themeVariables, defaultThemeMode);
     }
     async onClose() {
         this.onScrollUnlock();
-        await animate(this, { opacity: [1, 0] }, { duration: 0.2 }).finished;
+        await this.animate([{ opacity: 1 }, { opacity: 0 }], {
+            duration: 200,
+            easing: 'ease',
+            fill: 'forwards'
+        }).finished;
         SnackController.hide();
@@ -66,10 +68,11 @@ this.open = false;
         this.open = true;
-        await animate(this, { opacity: [0, 1] }, { duration: 0.2 }).finished;
+        await this.animate([{ opacity: 0 }, { opacity: 1 }], {
+            duration: 200,
+            easing: 'ease',
+            fill: 'forwards',
+            delay: 300
+        }).finished;
         this.onAddKeyboardListener();
     }
     onScrollLock() {
-        const { body } = document;
-        const { innerHeight: viewportHeight } = window;
-        const scrollHeight = body?.scrollHeight;
-        const scrollbarGutter = scrollHeight > viewportHeight ? 'scrollbar-gutter: stable;' : '';
         const styleTag = document.createElement('style');
@@ -82,4 +85,6 @@ styleTag.dataset['w3m'] = SCROLL_LOCK;
         overscroll-behavior: contain;
-       ${scrollbarGutter}
       }
+      w3m-modal {
+        pointer-events: auto;
+      }
     `;
@@ -86,0 +91,0 @@ document.head.appendChild(styleTag);

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

 import { css } from 'lit';
 export default css `
+  :host {
+    z-index: var(--w3m-z-index);
+    display: block;
+    backface-visibility: hidden;
+    will-change: opacity;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    opacity: 0;
+    background-color: var(--wui-cover);
+  }
+
   @keyframes zoom-in {
@@ -25,2 +40,3 @@ 0% {
     position: relative;
+    animation-delay: 0.3s;
     animation-duration: 0.2s;
@@ -33,4 +49,24 @@ animation-name: zoom-in;
 
+  wui-flex {
+    overflow-x: hidden;
+    overflow-y: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (max-height: 700px) and (min-width: 431px) {
+    wui-flex {
+      align-items: flex-start;
+    }
+
+    wui-card {
+      margin: var(--wui-spacing-xxl) 0px;
+    }
+  }
+
   @media (max-width: 430px) {
-    wui-overlay {
+    wui-flex {
       align-items: flex-end;
@@ -37,0 +73,0 @@ }

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

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { AccountController, AssetController, ModalController, NetworkController } from '@web3modal/core';
+import { AccountController, AssetUtil, ModalController, NetworkController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -17,3 +17,2 @@ import { customElement, property, state } from 'lit/decorators.js';
         this.disabled = false;
-        this.networkImages = AssetController.state.networkImages;
         this.network = NetworkController.state.caipNetwork;
@@ -23,4 +22,3 @@ this.connected = AccountController.state.isConnected;
             NetworkController.subscribeKey('caipNetwork', val => (this.network = val)),
-            AccountController.subscribeKey('isConnected', val => (this.connected = val)),
-            AssetController.subscribeNetworkImages(val => (this.networkImages = { ...val }))
+            AccountController.subscribeKey('isConnected', val => (this.connected = val))
         ]);
@@ -32,7 +30,6 @@ }
     render() {
-        const networkImage = this.networkImages[this.network?.imageId ?? ''];
         return html `
       <wui-network-button
         .disabled=${Boolean(this.disabled)}
-        imageSrc=${ifDefined(networkImage)}
+        imageSrc=${ifDefined(AssetUtil.getNetworkImage(this.network))}
         @click=${this.onClick.bind(this)}
@@ -53,5 +50,2 @@ >
     state()
-], W3mNetworkButton.prototype, "networkImages", void 0);
-__decorate([
-    state()
 ], W3mNetworkButton.prototype, "network", void 0);
@@ -58,0 +52,0 @@ __decorate([

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

@@ -10,3 +10,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, state } from 'lit/decorators.js';
-import { animate } from 'motion';
 import styles from './styles.js';
@@ -27,3 +26,7 @@ let W3mRouter = class W3mRouter extends LitElement {
             if (this.prevHeight !== '0px') {
-                await animate(this, { height: [this.prevHeight, height] }, { duration: 0.15 }).finished;
+                await this.animate([{ height: this.prevHeight }, { height }], {
+                    duration: 150,
+                    easing: 'ease',
+                    fill: 'forwards'
+                }).finished;
                 this.style.height = 'auto';
@@ -77,5 +80,11 @@ }
         this.prevHistoryLength = history.length;
-        await animate(this, { opacity: [1, 0], x: [0, xOut] }, { duration: 0.15 }).finished;
+        await this.animate([
+            { opacity: 1, transform: 'translateX(0px)' },
+            { opacity: 0, transform: `translateX(${xOut}px)` }
+        ], { duration: 150, easing: 'ease', fill: 'forwards' }).finished;
         this.view = newView;
-        animate(this, { opacity: [0, 1], x: [xIn, 0] }, { duration: 0.15, delay: 0.05 });
+        await this.animate([
+            { opacity: 0, transform: `translateX(${xIn}px)` },
+            { opacity: 1, transform: 'translateX(0px)' }
+        ], { duration: 150, easing: 'ease', fill: 'forwards', delay: 50 }).finished;
     }
@@ -82,0 +91,0 @@ getWrapper() {

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

@@ -11,3 +11,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { animate } from 'motion';
 import styles from './styles.js';
@@ -43,3 +42,2 @@ const PAGINATOR_ID = 'local-paginator';
         .padding=${['0', 's', 's', 's']}
-        gridTemplateColumns="repeat(auto-fill, 76px)"
         columnGap="xxs"
@@ -58,5 +56,13 @@ rowGap="l"
             await ApiController.fetchWallets({ page: 1 });
-            await animate(gridEl, { opacity: [1, 0] }, { duration: 0.2 }).finished;
+            await gridEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }).finished;
             this.initial = false;
-            animate(gridEl, { opacity: [0, 1] }, { duration: 0.2 });
+            gridEl.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -82,4 +88,9 @@ }
         const { wallets, recommended, featured, count } = ApiController.state;
+        const columns = window.innerWidth < 352 ? 3 : 4;
+        const currentWallets = wallets.length + recommended.length;
+        const minimumRows = Math.ceil(currentWallets / columns);
+        let shimmerCount = minimumRows * columns - currentWallets + columns;
+        shimmerCount -= wallets.length ? featured.length % columns : 0;
         if (count === 0 || [...featured, ...wallets, ...recommended].length < count) {
-            return this.shimmerTemplate(4, PAGINATOR_ID);
+            return this.shimmerTemplate(shimmerCount, PAGINATOR_ID);
         }
@@ -86,0 +97,0 @@ return null;

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

 import { css } from 'lit';
 export default css `
   wui-grid {
-    max-height: 360px;
+    max-height: clamp(360px, 400px, 80vh);
     overflow: scroll;
     scrollbar-width: none;
     grid-auto-rows: min-content;
+    grid-template-columns: repeat(auto-fill, 76px);
   }
 
+  @media (max-width: 435px) {
+    wui-grid {
+      grid-template-columns: repeat(auto-fill, 77px);
+    }
+  }
+
   wui-grid[data-scroll='false'] {
@@ -11,0 +18,0 @@ overflow: hidden;

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

@@ -7,11 +7,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
+import { ConnectionController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 let W3mConnectingHeader = class W3mConnectingHeader extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.platformTabs = [];
+        this.unsubscribe = [];
         this.platforms = [];
         this.onSelectPlatfrom = undefined;
+        this.buffering = false;
+        this.unsubscribe.push(ConnectionController.subscribeKey('buffering', val => (this.buffering = val)));
     }
+    disconnectCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+    }
     render() {
@@ -21,3 +28,7 @@ const tabs = this.generateTabs();
       <wui-flex justifyContent="center" .padding=${['l', '0', '0', '0']}>
-        <wui-tabs .tabs=${tabs} .onTabChange=${this.onTabChange.bind(this)}></wui-tabs>
+        <wui-tabs
+          ?disabled=${this.buffering}
+          .tabs=${tabs}
+          .onTabChange=${this.onTabChange.bind(this)}
+        ></wui-tabs>
       </wui-flex>
@@ -61,2 +72,5 @@ `;
 ], W3mConnectingHeader.prototype, "onSelectPlatfrom", void 0);
+__decorate([
+    state()
+], W3mConnectingHeader.prototype, "buffering", void 0);
 W3mConnectingHeader = __decorate([
@@ -63,0 +77,0 @@ customElement('w3m-connecting-header')

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

@@ -24,3 +24,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 this.onConnect?.();
-            }, 250);
+            }, 200);
         }
@@ -27,0 +27,0 @@ }

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

@@ -22,3 +22,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             this.error = false;
-            await ConnectionController.connectExternal('injected');
+            await ConnectionController.connectExternal({ id: 'injected' });
             ModalController.close();
@@ -25,0 +25,0 @@ }

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

@@ -46,5 +46,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     onBuffering() {
-        if (document.visibilityState === 'visible' && !this.error) {
-            this.buffering = true;
-            setTimeout(() => (this.buffering = false), 5000);
+        const isIos = CoreHelperUtil.isIos();
+        if (document?.visibilityState === 'visible' && !this.error && isIos) {
+            ConnectionController.setBuffering(true);
+            setTimeout(() => {
+                ConnectionController.setBuffering(false);
+            }, 5000);
         }
@@ -51,0 +54,0 @@ }

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

@@ -46,3 +46,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 this.ready = true;
-            }, 250);
+            }, 200);
         }
@@ -49,0 +49,0 @@ }

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

@@ -7,6 +7,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ModalController, RouterController } from '@web3modal/core';
+import { ConnectionController, ModalController, RouterController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { animate } from 'motion';
 import styles from './styles.js';
@@ -36,2 +35,3 @@ function headings() {
         this.heading = headings()[RouterController.state.view];
+        this.buffering = false;
         this.showBack = false;
@@ -41,3 +41,3 @@ this.unsubscribe.push(RouterController.subscribeKey('view', val => {
             this.onHistoryChange();
-        }));
+        }), ConnectionController.subscribeKey('buffering', val => (this.buffering = val)));
     }
@@ -51,3 +51,7 @@ disconnectCallback() {
         ${this.dynamicButtonTemplate()} ${this.titleTemplate()}
-        <wui-icon-link icon="close" @click=${ModalController.close}></wui-icon-link>
+        <wui-icon-link
+          ?disabled=${this.buffering}
+          icon="close"
+          @click=${ModalController.close}
+        ></wui-icon-link>
       </wui-flex>
@@ -67,2 +71,3 @@ ${this.separatorTemplate()}
         icon="chevronLeft"
+        ?disabled=${this.buffering}
         @click=${RouterController.goBack}
@@ -94,5 +99,13 @@ ></wui-icon-link>`;
             const preset = headings()[view];
-            await animate(headingEl, { opacity: [1, 0] }, { duration: 0.2 }).finished;
+            await headingEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }).finished;
             this.heading = preset;
-            animate(headingEl, { opacity: [0, 1] }, { duration: 0.2 });
+            headingEl.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -104,10 +117,26 @@ }
         if (history.length > 1 && !this.showBack && buttonEl) {
-            await animate(buttonEl, { opacity: [1, 0] }, { duration: 0.2 }).finished;
+            await buttonEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }).finished;
             this.showBack = true;
-            animate(buttonEl, { opacity: [0, 1] }, { duration: 0.2 });
+            buttonEl.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
         else if (history.length <= 1 && this.showBack && buttonEl) {
-            await animate(buttonEl, { opacity: [1, 0] }, { duration: 0.2 }).finished;
+            await buttonEl.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }).finished;
             this.showBack = false;
-            animate(buttonEl, { opacity: [0, 1] }, { duration: 0.2 });
+            buttonEl.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -122,2 +151,5 @@ }
     state()
+], W3mHeader.prototype, "buffering", void 0);
+__decorate([
+    state()
 ], W3mHeader.prototype, "showBack", void 0);
@@ -124,0 +156,0 @@ W3mHeader = __decorate([

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

@@ -10,3 +10,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, state } from 'lit/decorators.js';
-import { animate } from 'motion';
 import styles from './styles.js';
@@ -55,7 +54,21 @@ const presets = {
         if (this.open) {
-            animate(this, { opacity: [0, 1], x: ['-50%', '-50%'], scale: [0.85, 1] }, { duration: 0.15 });
+            this.animate([
+                { opacity: 0, transform: 'translateX(-50%) scale(0.85)' },
+                { opacity: 1, transform: 'translateX(-50%) scale(1)' }
+            ], {
+                duration: 150,
+                fill: 'forwards',
+                easing: 'ease'
+            });
             this.timeout = setTimeout(() => SnackController.hide(), 2500);
         }
         else {
-            animate(this, { opacity: [1, 0], x: ['-50%', '-50%'], scale: [1, 0.85] }, { duration: 0.15 });
+            this.animate([
+                { opacity: 1, transform: 'translateX(-50%) scale(1)' },
+                { opacity: 0, transform: 'translateX(-50%) scale(0.85)' }
+            ], {
+                duration: 150,
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -62,0 +75,0 @@ }

dist/esm/src/utils/w3m-connecting-widget/index.js

@@ -11,3 +11,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { animate } from 'motion';
 import styles from './styles.js';
@@ -45,3 +44,4 @@ export class W3mConnectingWidget extends LitElement {
             }),
-            ConnectionController.subscribeKey('wcError', val => (this.error = val))
+            ConnectionController.subscribeKey('wcError', val => (this.error = val)),
+            ConnectionController.subscribeKey('buffering', val => (this.buffering = val))
         ]);
@@ -128,3 +128,6 @@ }
             const retryButton = this.shadowRoot?.querySelector('wui-button');
-            animate(retryButton, { opacity: [0, 1] });
+            retryButton.animate([{ opacity: 0 }, { opacity: 1 }], {
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -131,0 +134,0 @@ }

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

@@ -68,3 +68,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             <wui-text variant="large-600" color="fg-100">
-              ${this.profileName ?? UiHelperUtil.getTruncateAddress(this.address, 4)}
+              ${this.profileName
+            ? UiHelperUtil.getTruncateString(this.profileName, 20, 'end')
+            : UiHelperUtil.getTruncateString(this.address, 8, 'middle')}
             </wui-text>
@@ -82,7 +84,4 @@ <wui-icon-link
             </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>
+
+            ${this.explorerBtnTemplate()}
           </wui-flex>
@@ -118,2 +117,15 @@ </wui-flex>
     }
+    explorerBtnTemplate() {
+        const { addressExplorerUrl } = AccountController.state;
+        if (!addressExplorerUrl) {
+            return null;
+        }
+        return html `
+      <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>
+    `;
+    }
     isMultiNetwork() {
@@ -120,0 +132,0 @@ const { requestedCaipNetworks } = NetworkController.state;

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

@@ -10,3 +10,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, state } from 'lit/decorators.js';
-import styles from './styles.js';
 let W3mAllWalletsView = class W3mAllWalletsView extends LitElement {
@@ -45,3 +44,3 @@ constructor() {
           border
-          borderColor="wui-overlay-accent-010"
+          borderColor="wui-accent-glass-010"
           @click=${this.onWalletConnectQr.bind(this)}
@@ -57,3 +56,2 @@ ></wui-icon-box>
 };
-W3mAllWalletsView.styles = styles;
 __decorate([
@@ -60,0 +58,0 @@ state()

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

@@ -25,3 +25,4 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
       <wui-flex flexDirection="column" padding="s" gap="xs">
-        ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()} ${this.featuredTemplate()}
+        ${this.walletConnectConnectorTemplate()} ${this.recentTemplate()}
+        ${this.installedTemplate()} ${this.browserWalletTemplate()} ${this.featuredTemplate()}
         ${this.customTemplate()} ${this.recommendedTemplate()} ${this.connectorsTemplate()}
@@ -95,17 +96,43 @@ ${this.allWalletsTemplate()}
     }
+    installedTemplate() {
+        return this.connectors.map(connector => {
+            const isAnnounced = connector.type === 'ANNOUNCED';
+            if (isAnnounced) {
+                return html `
+          <wui-list-wallet
+            imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
+            name=${connector.name ?? 'Unknown'}
+            @click=${() => this.onConnector(connector)}
+            tagLabel="installed"
+            tagVariant="success"
+          >
+          </wui-list-wallet>
+        `;
+            }
+            return null;
+        });
+    }
+    browserWalletTemplate() {
+        return this.connectors.map(connector => {
+            const isInjectedInstalled = connector.type === 'INJECTED' && ConnectionController.checkInjectedInstalled();
+            if (isInjectedInstalled) {
+                return html `
+          <wui-list-wallet
+            imageSrc=${ifDefined(AssetUtil.getConnectorImage(connector))}
+            name=${connector.name ?? 'Unknown'}
+            @click=${() => this.onConnector(connector)}
+            tagLabel="installed"
+            tagVariant="success"
+          >
+          </wui-list-wallet>
+        `;
+            }
+            return null;
+        });
+    }
     connectorsTemplate() {
         return this.connectors.map(connector => {
-            if (connector.type === 'WALLET_CONNECT') {
+            if (['WALLET_CONNECT', 'INJECTED', 'ANNOUNCED'].includes(connector.type)) {
                 return null;
             }
-            let tagLabel = undefined;
-            let tagVariant = undefined;
-            if (connector.type === 'INJECTED') {
-                const isInstalled = ConnectionController.checkInjectedInstalled();
-                if (!isInstalled) {
-                    return null;
-                }
-                tagLabel = 'installed';
-                tagVariant = 'success';
-            }
             return html `
@@ -116,4 +143,2 @@ <wui-list-wallet
           @click=${() => this.onConnector(connector)}
-          tagLabel=${ifDefined(tagLabel)}
-          tagVariant=${ifDefined(tagVariant)}
         >
@@ -125,2 +150,3 @@ </wui-list-wallet>
     allWalletsTemplate() {
+        const roundedCount = Math.floor(ApiController.state.count / 10) * 10;
         return html `
@@ -132,3 +158,3 @@ <wui-list-wallet
         @click=${() => RouterController.push('AllWallets')}
-        tagLabel=${`${ApiController.state.count}+`}
+        tagLabel=${`${roundedCount}+`}
         tagVariant="shade"
@@ -141,7 +167,14 @@ ></wui-list-wallet>
         const { customWallets } = OptionsController.state;
-        if (!recommended.length || featured.length || customWallets?.length) {
+        const { connectors } = ConnectorController.state;
+        const recent = StorageUtil.getRecentWallets();
+        const announced = connectors.filter(c => c.type === 'ANNOUNCED');
+        if (!recommended.length) {
             return null;
         }
-        const [first, second] = this.filterOutRecentWallets(recommended);
-        return [first, second].map(wallet => html `
+        const featuredLength = featured?.length ?? 0;
+        const customLength = customWallets?.length ?? 0;
+        const overrideLength = featuredLength + customLength + announced.length + recent.length;
+        const maxRecommended = Math.max(0, 2 - overrideLength);
+        const wallets = this.filterOutRecentWallets(recommended).slice(0, maxRecommended);
+        return wallets.map(wallet => html `
         <wui-list-wallet
@@ -148,0 +181,0 @@ imageSrc=${ifDefined(AssetUtil.getWalletImage(wallet))}

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

 import { css } from 'lit';
 export default css `
   wui-flex {
-    max-height: 420px;
+    max-height: clamp(360px, 540px, 80vh);
     overflow: scroll;
@@ -6,0 +6,0 @@ scrollbar-width: none;

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

@@ -24,3 +24,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
             if (this.connector) {
-                await ConnectionController.connectExternal(this.connector.id);
+                await ConnectionController.connectExternal(this.connector);
                 ModalController.close();
@@ -27,0 +27,0 @@ }

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

@@ -10,3 +10,2 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { customElement, state } from 'lit/decorators.js';
-import { animate } from 'motion';
 let W3mConnectingWcView = class W3mConnectingWcView extends LitElement {
@@ -99,5 +98,2 @@ constructor() {
     platformTemplate() {
-        if (!this.platform) {
-            return null;
-        }
         switch (this.platform) {
@@ -143,5 +139,13 @@ case 'injected':
         if (container) {
-            await animate(container, { opacity: [1, 0] }, { duration: 0.2 }).finished;
+            await container.animate([{ opacity: 1 }, { opacity: 0 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            }).finished;
             this.platform = platform;
-            animate(container, { opacity: [0, 1] }, { duration: 0.2 });
+            container.animate([{ opacity: 0 }, { opacity: 1 }], {
+                duration: 200,
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -148,0 +152,0 @@ }

dist/esm/src/views/w3m-get-wallet-view/index.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ApiController, AssetUtil, CoreHelperUtil } from '@web3modal/core';
+import { ApiController, AssetUtil, CoreHelperUtil, OptionsController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -14,6 +14,2 @@ import { customElement } from 'lit/decorators.js';
 let W3mGetWalletView = class W3mGetWalletView extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.recommendedWallets = ApiController.state.recommended;
-    }
     render() {
@@ -36,3 +32,6 @@ return html `
     recommendedWalletsTemplate() {
-        return this.recommendedWallets.map(wallet => html `
+        const { recommended, featured } = ApiController.state;
+        const { customWallets } = OptionsController.state;
+        const wallets = [...featured, ...(customWallets ?? []), ...recommended].slice(0, 4);
+        return wallets.map(wallet => html `
         <wui-list-wallet
@@ -39,0 +38,0 @@ name=${wallet.name ?? 'Unknown'}

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

@@ -11,11 +11,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { animate } from 'motion';
 import styles from './styles.js';
 let W3mNetworkSwitchView = class W3mNetworkSwitchView extends LitElement {
     constructor() {
-        super(...arguments);
+        super();
         this.network = RouterController.state.data?.network;
+        this.unsubscribe = [];
         this.showRetry = false;
         this.error = false;
+        this.currentNetwork = NetworkController.state.caipNetwork;
+        this.unsubscribe.push(NetworkController.subscribeKey('caipNetwork', val => {
+            if (val?.id !== this.currentNetwork?.id) {
+                RouterController.goBack();
+            }
+        }));
     }
+    disconnectedCallback() {
+        this.unsubscribe.forEach(unsubscribe => unsubscribe());
+    }
     firstUpdated() {
@@ -81,3 +90,6 @@ this.onSwitchNetwork();
             const retryButton = this.shadowRoot?.querySelector('wui-button');
-            animate(retryButton, { opacity: [0, 1] });
+            retryButton.animate([{ opacity: 0 }, { opacity: 1 }], {
+                fill: 'forwards',
+                easing: 'ease'
+            });
         }
@@ -105,2 +117,5 @@ }
 ], W3mNetworkSwitchView.prototype, "error", void 0);
+__decorate([
+    state()
+], W3mNetworkSwitchView.prototype, "currentNetwork", void 0);
 W3mNetworkSwitchView = __decorate([
@@ -107,0 +122,0 @@ customElement('w3m-network-switch-view')

dist/types/index.d.ts

@@ -33,1 +33,2 @@ export * from './src/modal/w3m-account-button/index.js';
 export type * from '@web3modal/core';
+export { CoreHelperUtil } from '@web3modal/core';

dist/types/src/client.d.ts

@@ -1,2 +0,2 @@
-import type { ApiControllerState, ConnectionControllerClient, ModalControllerArguments, NetworkControllerClient, NetworkControllerState, OptionsControllerState, ThemeControllerState, ThemeMode, ThemeVariables } from '@web3modal/core';
+import type { ApiControllerState, ConnectionControllerClient, NetworkControllerClient, NetworkControllerState, OptionsControllerState, PublicStateControllerState, ThemeControllerState, ThemeMode, ThemeVariables } from '@web3modal/core';
 import { AccountController, BlockchainApiController, ConnectionController, ConnectorController, NetworkController } from '@web3modal/core';
@@ -21,6 +21,9 @@ export interface LibraryOptions {
 }
+export interface OpenOptions {
+    view: 'Account' | 'Connect' | 'Networks';
+}
 export declare class Web3ModalScaffold {
     private initPromise?;
     constructor(options: ScaffoldOptions);
-    open(options?: ModalControllerArguments['open']): Promise<void>;
+    open(options?: OpenOptions): Promise<void>;
     close(): Promise<void>;
@@ -32,2 +35,7 @@ getThemeMode(): ThemeMode;
     subscribeTheme(callback: (newState: ThemeControllerState) => void): () => void;
+    getState(): {
+        open: boolean;
+        selectedNetworkId?: `${string}:${string}` | undefined;
+    };
+    subscribeState(callback: (newState: PublicStateControllerState) => void): () => void;
     protected setIsConnected: (typeof AccountController)['setIsConnected'];
@@ -45,2 +53,3 @@ protected setCaipAddress: (typeof AccountController)['setCaipAddress'];
     protected setConnectors: (typeof ConnectorController)['setConnectors'];
+    protected addConnector: (typeof ConnectorController)['addConnector'];
     protected resetWcConnection: (typeof ConnectionController)['resetWcConnection'];
@@ -47,0 +56,0 @@ protected fetchIdentity: (typeof BlockchainApiController)['fetchIdentity'];

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

@@ -6,3 +6,2 @@ import type { WuiNetworkButton } from '@web3modal/ui';
     disabled?: WuiNetworkButton['disabled'];
-    private networkImages;
     private network;
@@ -9,0 +8,0 @@ private connected;

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

@@ -5,4 +5,8 @@ import type { Platform } from '@web3modal/core';
     private platformTabs;
+    private unsubscribe;
     platforms: Platform[];
     onSelectPlatfrom?: (platform: Platform) => void;
+    private buffering;
+    constructor();
+    disconnectCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -9,0 +13,0 @@ private generateTabs;

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

@@ -6,2 +6,3 @@ import { LitElement } from 'lit';
     private heading;
+    private buffering;
     private showBack;
@@ -8,0 +9,0 @@ constructor();

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

@@ -16,2 +16,3 @@ import { LitElement } from 'lit';
     render(): import("lit-html").TemplateResult<1>;
+    private explorerBtnTemplate;
     private isMultiNetwork;
@@ -18,0 +19,0 @@ private onCopyAddress;

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

 import { LitElement } from 'lit';
 export declare class W3mAllWalletsView extends LitElement {
-    static styles: import("lit").CSSResult;
     private search;
@@ -5,0 +4,0 @@ render(): import("lit-html").TemplateResult<1>;

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

@@ -13,2 +13,4 @@ import { LitElement } from 'lit';
     private recentTemplate;
+    private installedTemplate;
+    private browserWalletTemplate;
     private connectorsTemplate;
@@ -15,0 +17,0 @@ private allWalletsTemplate;

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

 import { LitElement } from 'lit';
 export declare class W3mGetWalletView extends LitElement {
-    private recommendedWallets;
     render(): import("lit-html").TemplateResult<1>;
@@ -5,0 +4,0 @@ private recommendedWalletsTemplate;

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

@@ -5,4 +5,8 @@ import { LitElement } from 'lit';
     private network;
+    private unsubscribe;
     private showRetry;
     error: boolean;
+    private currentNetwork;
+    constructor();
+    disconnectedCallback(): void;
     firstUpdated(): void;
@@ -9,0 +13,0 @@ render(): import("lit-html").TemplateResult<1>;

package.json

 {
   "name": "@web3modal/scaffold",
-  "version": "3.0.0-31553f77",
+  "version": "3.0.0-547be88e",
   "type": "module",
@@ -18,4 +18,4 @@ "main": "./dist/esm/index.js",
   "dependencies": {
-    "@web3modal/core": "3.0.0-31553f77",
-    "@web3modal/ui": "3.0.0-31553f77",
+    "@web3modal/core": "3.0.0-547be88e",
+    "@web3modal/ui": "3.0.0-547be88e",
     "lit": "2.8.0"
@@ -22,0 +22,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

216580

increased by4.66%

Lines of code

3677

increased by5.45%

Worsened metrics

Number of package files

134

decreased by-2.19%

Dependency changes

• + Added@web3modal/core@3.0.0-547be88e(transitive)

• + Added@web3modal/ui@3.0.0-547be88e(transitive)

• - Removed@motionone/animation@10.18.0(transitive)

• - Removed@motionone/dom@10.18.0(transitive)

• - Removed@motionone/easing@10.18.0(transitive)

• - Removed@motionone/generators@10.18.0(transitive)

• - Removed@motionone/svelte@10.16.4(transitive)

• - Removed@motionone/types@10.17.1(transitive)

• - Removed@motionone/utils@10.18.0(transitive)

• - Removed@motionone/vue@10.16.4(transitive)

• - Removed@web3modal/core@3.0.0-31553f77(transitive)

• - Removed@web3modal/ui@3.0.0-31553f77(transitive)

• - Removedhey-listen@1.0.8(transitive)

• - Removedmotion@10.16.2(transitive)

• - Removedtslib@2.8.1(transitive)

• Updated@web3modal/core@3.0.0-547be88e

• Updated@web3modal/ui@3.0.0-547be88e