@web3modal/scaffold - npm Package Compare versions

Comparing version 3.0.0-alpha.3 to 3.0.0-alpha.4

dist/esm/src/client.js

@@ -1,2 +0,3 @@
-import { AccountController, ApiController, ConnectionController, ConnectorController, CoreHelperUtil, 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;
@@ -41,2 +42,3 @@ export class Web3ModalScaffold {
         };
+        this.fetchIdentity = request => BlockchainApiController.fetchIdentity(request);
         this.initControllers(options);
@@ -53,7 +55,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);
         ConnectionController.setClient(options.connectionControllerClient);
-        ApiController.setProjectId(options.projectId);
-        ApiController.setSdkVersion(options.sdkVersion);
+        OptionsController.setProjectId(options.projectId);
+        OptionsController.setIncludeWalletIds(options.includeWalletIds);
+        OptionsController.setExcludeWalletIds(options.excludeWalletIds);
+        ApiController.setSdkVersion(options._sdkVersion);
+        if (options.themeMode) {
+            ThemeController.setThemeMode(options.themeMode);
+        }
+        if (options.themeVariables) {
+            ThemeController.setThemeVariables(options.themeVariables);
+        }
+        if (options.defaultChain) {
+            NetworkController.setDefaultCaipNetwork(options.defaultChain);
+        }
     }
@@ -60,0 +90,0 @@ async initOrContinue() {

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

@@ -7,4 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { ApiController, ModalController, SnackController } from '@web3modal/core';
-import { initializeTheming, setColorTheme } from '@web3modal/ui';
+import { ApiController, ModalController, SnackController, ThemeController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -14,2 +13,3 @@ import { customElement, state } from 'lit/decorators.js';
 import styles from './styles.js';
+import { UiHelperUtil, initializeTheming } from '@web3modal/ui';
 const SCROLL_LOCK = 'scroll-lock';
@@ -22,4 +22,3 @@ export let W3mModal = class W3mModal extends LitElement {
         this.open = ModalController.state.open;
-        initializeTheming();
-        setColorTheme('dark');
+        this.initializeTheming();
         ApiController.fetchRecommendedWallets();
@@ -52,2 +51,8 @@ ApiController.fetchNetworkImages();
     }
+    initializeTheming() {
+        const { themeVariables, themeMode } = ThemeController.state;
+        initializeTheming(themeVariables, themeMode);
+        const defaultThemeMode = UiHelperUtil.getColorTheme(themeMode);
+        ThemeController.setThemeMode(defaultThemeMode);
+    }
     async onClose() {
@@ -54,0 +59,0 @@ this.onScrollUnlock();

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

@@ -73,5 +73,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     paginationLoaderTemplate() {
-        const { wallets, count } = ApiController.state;
-        if (count === 0 || wallets.length < count) {
-            return html `<wui-loading-spinner color="blue-100"></wui-loading-spinner>`;
+        const { wallets, recommended, count } = ApiController.state;
+        if (count === 0 || [...wallets, ...recommended].length < count) {
+            return html `<wui-loading-spinner color="accent-100"></wui-loading-spinner>`;
         }
@@ -78,0 +78,0 @@ return null;

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

@@ -22,3 +22,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         return this.loading
-            ? html `<wui-loading-spinner color="blue-100"></wui-loading-spinner>`
+            ? html `<wui-loading-spinner color="accent-100"></wui-loading-spinner>`
             : this.walletsTemplate();
@@ -25,0 +25,0 @@ }

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

@@ -58,2 +58,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 ConnectionController.setWcLinking({ name, href });
+                ConnectionController.setRecentWallet(this.wallet);
                 CoreHelperUtil.openHref(redirect, '_self');
@@ -60,0 +61,0 @@ }

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

@@ -54,2 +54,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 ConnectionController.setWcLinking({ name, href });
+                ConnectionController.setRecentWallet(this.wallet);
                 CoreHelperUtil.openHref(redirect, '_self');
@@ -56,0 +57,0 @@ }

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

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { AssetUtil, ConnectionController, CoreHelperUtil, RouterController, SnackController } from '@web3modal/core';
+import { AssetUtil, ConnectionController, CoreHelperUtil, RouterController, SnackController, ThemeController } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -55,5 +55,7 @@ import { customElement, state } from 'lit/decorators.js';
         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}
@@ -60,0 +62,0 @@ imageSrc=${ifDefined(AssetUtil.getWalletImage(this.wallet?.image_id))}

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

@@ -58,2 +58,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 ConnectionController.setWcLinking({ name, href });
+                ConnectionController.setRecentWallet(this.wallet);
                 CoreHelperUtil.openHref(redirect, '_blank');
@@ -60,0 +61,0 @@ }

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

@@ -24,2 +24,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.network = NetworkController.state.caipNetwork;
+        this.disconecting = false;
         this.usubscribe.push(...[
@@ -38,3 +39,7 @@ AccountController.subscribe(val => {
             })
-        ], NetworkController.subscribeKey('caipNetwork', val => (this.network = val)));
+        ], NetworkController.subscribeKey('caipNetwork', val => {
+            if (val?.id) {
+                this.network = val;
+            }
+        }));
     }
@@ -62,12 +67,15 @@ disconnectedCallback() {
 
-        <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-text variant="paragraph-500" color="fg-200">${this.showBalance()}</wui-text>
         </wui-flex>
@@ -85,3 +93,5 @@ </wui-flex>
         >
-          <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>
@@ -93,2 +103,3 @@ <wui-list-item
           ?chevron=${false}
+          .loading=${this.disconecting}
           @click=${this.onDisconnect.bind(this)}
@@ -116,4 +127,13 @@ >
     async onDisconnect() {
-        await ConnectionController.disconnect();
-        ModalController.close();
+        try {
+            this.disconecting = true;
+            await ConnectionController.disconnect();
+            ModalController.close();
+        }
+        catch {
+            SnackController.showError('Failed to disconnect');
+        }
+        finally {
+            this.disconecting = false;
+        }
     }
@@ -153,2 +173,5 @@ showBalance() {
 ], W3mAccountView.prototype, "network", void 0);
+__decorate([
+    state()
+], W3mAccountView.prototype, "disconecting", void 0);
 W3mAccountView = __decorate([
@@ -155,0 +178,0 @@ customElement('w3m-account-view')

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

@@ -6,3 +6,7 @@ import { css } from 'lit';
   }
+
+  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,3 +7,3 @@ 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';
@@ -23,4 +23,5 @@ import { customElement, state } from 'lit/decorators.js';
         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');
+    }
 };
@@ -37,0 +56,0 @@ W3mAllWalletsView.styles = styles;

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

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { AssetController, AssetUtil, ConnectorController, RouterController } from '@web3modal/core';
+import { AssetController, AssetUtil, ConnectionController, ConnectorController, CoreHelperUtil, RouterController, StorageUtil } from '@web3modal/core';
 import { LitElement, html } from 'lit';
@@ -23,26 +23,73 @@ import { customElement, state } from 'lit/decorators.js';
     render() {
-        const { walletImages } = AssetController.state;
-        const walletImagesSrc = Object.values(walletImages).map(src => ({ src }));
         return html `
       <wui-flex flexDirection="column" padding="s" gap="xs">
-        ${this.connectorsTemplate()}
-        <wui-list-wallet
-          name="All Wallets"
-          showAllWallets
-          .walletImages=${walletImagesSrc}
-          @click=${this.onAllWallets.bind(this)}
-        ></wui-list-wallet>
+        ${this.recentTemplate()} ${this.connectorsTemplate()} ${this.dynamicTemplate()}
       </wui-flex>
     `;
     }
+    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 => {
+            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>
+      `;
+        });
     }
+    dynamicTemplate() {
+        if (CoreHelperUtil.isMobile()) {
+            return null;
+        }
+        const { walletImages } = AssetController.state;
+        const walletImagesSrc = Object.values(walletImages).map(src => ({ src }));
+        return html `
+      <wui-list-wallet
+        name="All Wallets"
+        showAllWallets
+        .walletImages=${walletImagesSrc}
+        @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');
+            }
         }
@@ -49,0 +96,0 @@ else {

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

@@ -41,6 +41,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 await ConnectionController.state.wcPromise;
-                const { wcLinking } = ConnectionController.state;
-                if (wcLinking) {
-                    StorageUtil.setWalletConnectDeepLink(wcLinking);
-                }
+                this.storeWalletConnectDeeplink();
                 ModalController.close();
@@ -57,2 +54,11 @@ }
     }
+    storeWalletConnectDeeplink() {
+        const { wcLinking, recentWallet } = ConnectionController.state;
+        if (wcLinking) {
+            StorageUtil.setWalletConnectDeepLink(wcLinking);
+        }
+        if (recentWallet) {
+            StorageUtil.setWeb3ModalRecent(recentWallet);
+        }
+    }
     determinePlatforms() {
@@ -59,0 +65,0 @@ if (!this.wallet) {

dist/types/index.d.ts

@@ -27,2 +27,3 @@ export * from './src/modal/w3m-modal/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,14 +0,26 @@
-import type { ApiControllerState, ConnectionControllerClient, 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'];
+    defaultChain?: NetworkControllerState['caipNetwork'];
+    _sdkVersion: ApiControllerState['sdkVersion'];
+}
+export interface ScaffoldOptions extends LibraryOptions {
     networkControllerClient: NetworkControllerClient;
     connectionControllerClient: ConnectionControllerClient;
-    projectId: ApiControllerState['projectId'];
-    sdkVersion: ApiControllerState['sdkVersion'];
 }
 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'];
@@ -27,5 +39,5 @@ protected setCaipAddress: (typeof AccountController)['setCaipAddress'];
     protected resetWcConnection: (typeof ConnectionController)['resetWcConnection'];
+    protected fetchIdentity: (typeof BlockchainApiController)['fetchIdentity'];
     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/views/w3m-account-view/index.d.ts

@@ -12,2 +12,3 @@ import { LitElement } from 'lit';
     private network;
+    private disconecting;
     constructor();
@@ -14,0 +15,0 @@ disconnectedCallback(): void;

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

@@ -8,3 +8,6 @@ import { LitElement } from 'lit';
     render(): import("lit-html").TemplateResult<1>;
+    private recentTemplate;
     private connectorsTemplate;
+    private dynamicTemplate;
+    private getTag;
     private onConnector;
@@ -11,0 +14,0 @@ private onAllWallets;

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

@@ -12,2 +12,3 @@ import { LitElement } from 'lit';
     private initializeConnection;
+    private storeWalletConnectDeeplink;
     private determinePlatforms;
@@ -14,0 +15,0 @@ private platformTemplate;

package.json

 {
   "name": "@web3modal/scaffold",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "type": "module",
@@ -14,7 +14,8 @@ "main": "./dist/esm/index.js",
     "watch": "npm run build:clean; tsc --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
-    "@web3modal/core": "3.0.0-alpha.3",
-    "@web3modal/ui": "3.0.0-alpha.3",
+    "@web3modal/core": "3.0.0-alpha.4",
+    "@web3modal/ui": "3.0.0-alpha.4",
     "lit": "2.8.0",
@@ -21,0 +22,0 @@ "motion": "10.16.2"

No alert changes

Improved metrics

Total package byte prevSize

291699

increased by3.65%

Lines of code

3010

increased by5.58%

Dependency changes

• + Added@web3modal/core@3.0.0-alpha.4(transitive)

• + Added@web3modal/ui@3.0.0-alpha.4(transitive)

• - Removed@web3modal/core@3.0.0-alpha.3(transitive)

• - Removed@web3modal/ui@3.0.0-alpha.3(transitive)

• Updated@web3modal/core@3.0.0-alpha.4

• Updated@web3modal/ui@3.0.0-alpha.4