@web3modal/wagmi - npm Package Compare versions

Comparing version 3.0.0-23dbc01e to 3.0.0-73ed03f2

dist/esm/src/client.js

 import { connect, disconnect, fetchBalance, fetchEnsAvatar, fetchEnsName, getAccount, getNetwork, switchNetwork, watchAccount, watchNetwork } from '@wagmi/core';
 import { mainnet } from '@wagmi/core/chains';
-import { Web3ModalScaffoldHtml } from '@web3modal/scaffold';
-import { ADD_CHAIN_METHOD, INJECTED_ID, NAMESPACE, NAME_MAP, TYPE_MAP, WALLET_CHOICE_KEY, WALLET_CONNECT_ID } from './constants';
-export class Web3Modal extends Web3ModalScaffoldHtml {
+import { Web3ModalScaffold } from '@web3modal/scaffold';
+import { ADD_CHAIN_METHOD, NAMESPACE, VERSION, WALLET_CHOICE_KEY, WALLET_CONNECT_CONNECTOR_ID } from './utils/constants.js';
+import { getCaipDefaultChain, getCaipTokens } from './utils/helpers.js';
+import { ConnectorExplorerIds, ConnectorImageIds, ConnectorNamesMap, ConnectorTypesMap, NetworkImageIds } from './utils/presets.js';
+export class Web3Modal extends Web3ModalScaffold {
     constructor(options) {
-        const { wagmiConfig, projectId, chains } = options;
+        const { wagmiConfig, chains, defaultChain, _sdkVersion, tokens, ...w3mOptions } = options;
         if (!wagmiConfig) {
             throw new Error('web3modal:constructor - wagmiConfig is undefined');
         }
-        if (!projectId) {
+        if (!w3mOptions.projectId) {
             throw new Error('web3modal:constructor - projectId is undefined');
         }
-        if (!wagmiConfig.connectors.find(c => c.id === WALLET_CONNECT_ID)) {
+        if (!wagmiConfig.connectors.find(c => c.id === WALLET_CONNECT_CONNECTOR_ID)) {
             throw new Error('web3modal:constructor - WalletConnectConnector is required');
@@ -26,4 +28,4 @@ }
                 const walletChoice = localStorage.getItem(WALLET_CHOICE_KEY);
-                if (walletChoice?.includes(WALLET_CONNECT_ID)) {
-                    const connector = wagmiConfig.connectors.find(c => c.id === WALLET_CONNECT_ID);
+                if (walletChoice?.includes(WALLET_CONNECT_CONNECTOR_ID)) {
+                    const connector = wagmiConfig.connectors.find(c => c.id === WALLET_CONNECT_CONNECTOR_ID);
                     if (!connector) {
@@ -46,3 +48,3 @@ throw new Error('networkControllerClient:getApprovedCaipNetworks - connector is undefined');
             connectWalletConnect: async (onUri) => {
-                const connector = wagmiConfig.connectors.find(c => c.id === WALLET_CONNECT_ID);
+                const connector = wagmiConfig.connectors.find(c => c.id === WALLET_CONNECT_CONNECTOR_ID);
                 if (!connector) {
@@ -68,10 +70,2 @@ throw new Error('connectionControllerClient:getWalletConnectUri - connector is undefined');
             },
-            connectInjected: async () => {
-                const connector = wagmiConfig.connectors.find(c => c.id === INJECTED_ID);
-                if (!connector) {
-                    throw new Error('connectionControllerClient:connectInjected - connector is undefined');
-                }
-                const chainId = this.caipNetworkIdToNumber(this.getCaipNetwork()?.id);
-                await connect({ connector, chainId });
-            },
             checkInjectedInstalled(ids) {
@@ -91,9 +85,13 @@ if (!window?.ethereum) {
             connectionControllerClient,
-            projectId
+            defaultChain: getCaipDefaultChain(defaultChain),
+            tokens: getCaipTokens(tokens),
+            _sdkVersion: _sdkVersion ?? `html-wagmi-${VERSION}`,
+            ...w3mOptions
         });
+        this.hasSyncedConnectedAccount = false;
+        this.options = undefined;
+        this.options = options;
         this.syncRequestedNetworks(chains);
         this.syncConnectors(wagmiConfig.connectors);
-        this.syncAccount();
         watchAccount(() => this.syncAccount());
-        this.syncNetwork();
         watchNetwork(() => this.syncNetwork());
@@ -104,3 +102,4 @@ }
             id: `${NAMESPACE}:${chain.id}`,
-            name: chain.name
+            name: chain.name,
+            imageId: NetworkImageIds[chain.id]
         }));
@@ -114,10 +113,14 @@ this.setRequestedCaipNetworks(requestedCaipNetworks ?? []);
         if (isConnected && address && chain) {
-            this.resetWcConnection();
             const caipAddress = `${NAMESPACE}:${chain.id}:${address}`;
             this.setIsConnected(isConnected);
             this.setCaipAddress(caipAddress);
-            this.syncNetwork();
-            await Promise.all([this.syncProfile(address), this.getApprovedCaipNetworksData()]);
+            await Promise.all([
+                this.syncProfile(address),
+                this.syncBalance(address, chain),
+                this.getApprovedCaipNetworksData()
+            ]);
+            this.hasSyncedConnectedAccount = true;
         }
-        else if (!isConnected) {
+        else if (!isConnected && this.hasSyncedConnectedAccount) {
+            this.resetWcConnection();
             this.resetNetwork();
@@ -132,7 +135,13 @@ }
             const caipChainId = `${NAMESPACE}:${chainId}`;
-            this.setCaipNetwork({ id: caipChainId, name: chain.name });
+            this.setCaipNetwork({ id: caipChainId, name: chain.name, imageId: NetworkImageIds[chain.id] });
             if (isConnected && address) {
                 const caipAddress = `${NAMESPACE}:${chain.id}:${address}`;
                 this.setCaipAddress(caipAddress);
-                await this.syncBalance(address, chain);
+                if (chain.blockExplorers?.default?.url) {
+                    const url = `${chain.blockExplorers.default.url}/address/${address}`;
+                    this.setAddressExplorerUrl(url);
+                }
+                if (this.hasSyncedConnectedAccount) {
+                    await this.syncBalance(address, chain);
+                }
             }
@@ -142,8 +151,18 @@ }
     async syncProfile(address) {
-        const profileName = await fetchEnsName({ address, chainId: mainnet.id });
-        if (profileName) {
-            this.setProfileName(profileName);
-            const profileImage = await fetchEnsAvatar({ name: profileName, chainId: mainnet.id });
-            if (profileImage) {
-                this.setProfileImage(profileImage);
+        try {
+            const { name, avatar } = await this.fetchIdentity({
+                caipChainId: `${NAMESPACE}:${mainnet.id}`,
+                address
+            });
+            this.setProfileName(name);
+            this.setProfileImage(avatar);
+        }
+        catch {
+            const profileName = await fetchEnsName({ address, chainId: mainnet.id });
+            if (profileName) {
+                this.setProfileName(profileName);
+                const profileImage = await fetchEnsAvatar({ name: profileName, chainId: mainnet.id });
+                if (profileImage) {
+                    this.setProfileImage(profileImage);
+                }
             }
@@ -153,10 +172,16 @@ }
     async syncBalance(address, chain) {
-        const balance = await fetchBalance({ address, chainId: chain.id });
+        const balance = await fetchBalance({
+            address,
+            chainId: chain.id,
+            token: this.options?.tokens?.[chain.id]?.address
+        });
         this.setBalance(balance.formatted, balance.symbol);
     }
     syncConnectors(connectors) {
-        const w3mConnectors = connectors.map(connector => ({
-            id: connector.id,
-            name: NAME_MAP[connector.id] ?? connector.name,
-            type: TYPE_MAP[connector.id] ?? 'EXTERNAL'
+        const w3mConnectors = connectors.map(({ id, name }) => ({
+            id,
+            explorerId: ConnectorExplorerIds[id],
+            imageId: ConnectorImageIds[id],
+            name: ConnectorNamesMap[id] ?? name,
+            type: ConnectorTypesMap[id] ?? 'EXTERNAL'
         }));
@@ -163,0 +188,0 @@ this.setConnectors(w3mConnectors ?? []);

dist/types/src/client.d.ts

 import type { Chain, Config } from '@wagmi/core';
-import type { ProjectId } from '@web3modal/scaffold';
-import { Web3ModalScaffoldHtml } from '@web3modal/scaffold';
-export interface Web3ModalOptions {
+import type { LibraryOptions, Token } from '@web3modal/scaffold';
+import { Web3ModalScaffold } from '@web3modal/scaffold';
+export interface Web3ModalClientOptions extends Omit<LibraryOptions, 'defaultChain' | 'tokens'> {
     wagmiConfig: Config<any, any>;
-    projectId: ProjectId;
     chains?: Chain[];
+    defaultChain?: Chain;
+    tokens?: Record<number, Token>;
 }
+export type Web3ModalOptions = Omit<Web3ModalClientOptions, '_sdkVersion'>;
 declare global {
@@ -14,4 +16,6 @@ interface Window {
 }
-export declare class Web3Modal extends Web3ModalScaffoldHtml {
-    constructor(options: Web3ModalOptions);
+export declare class Web3Modal extends Web3ModalScaffold {
+    private hasSyncedConnectedAccount;
+    private options;
+    constructor(options: Web3ModalClientOptions);
     private syncRequestedNetworks;
@@ -18,0 +22,0 @@ private syncAccount;

package.json

 {
   "name": "@web3modal/wagmi",
-  "version": "3.0.0-23dbc01e",
+  "version": "3.0.0-73ed03f2",
   "type": "module",
-  "main": "./dist/esm/index.js",
-  "types": "./dist/types/index.d.ts",
+  "main": "./dist/esm/exports/index.js",
+  "types": "./dist/types/exports/index.d.ts",
   "files": [
@@ -12,24 +12,35 @@ "dist"
     ".": {
-      "import": "./dist/esm/index.js",
-      "types": "./dist/types/index.d.ts"
+      "import": "./dist/esm/exports/index.js",
+      "types": "./dist/types/exports/index.d.ts"
     },
     "./react": {
-      "import": "./dist/esm/src/react.js",
-      "types": "./dist/types/src/react.d.ts"
+      "import": "./dist/esm/exports/react.js",
+      "types": "./dist/types/exports/react.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/esm/exports/vue.js",
+      "types": "./dist/types/exports/vue.d.ts"
     }
   },
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/types/exports/react.d.ts"
+      ],
+      "vue": [
+        "./dist/types/exports/vue.d.ts"
+      ]
+    }
+  },
   "scripts": {
     "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/scaffold": "3.0.0-23dbc01e"
+    "@web3modal/polyfills": "3.0.0-73ed03f2",
+    "@web3modal/scaffold": "3.0.0-73ed03f2"
   },
-  "devDependencies": {
-    "@wagmi/core": "^1",
-    "viem": "^1"
-  },
   "peerDependencies": {
@@ -39,3 +50,4 @@ "@wagmi/core": ">=1",
     "react-dom": ">=17",
-    "viem": ">=1"
+    "viem": ">=1",
+    "vue": ">=3"
   },
@@ -42,0 +54,0 @@ "keywords": [

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

268368

increased by1315.52%

Dev dependency count

0

decreased by-100%

Number of package files

33

increased by135.71%

Lines of code

585

increased by158.85%

Worsened metrics

Dependency count

7

increased by40%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@web3modal/polyfills@3.0.0-73ed03f2

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.5(transitive)

• + Added@babel/types@7.26.5(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@noble/curves@1.8.1(transitive)

• + Added@noble/hashes@1.7.1(transitive)

• + Added@scure/bip32@1.6.2(transitive)

• + Added@scure/bip39@1.5.4(transitive)

• + Added@vue/compiler-core@3.5.13(transitive)

• + Added@vue/compiler-dom@3.5.13(transitive)

• + Added@vue/compiler-sfc@3.5.13(transitive)

• + Added@vue/compiler-ssr@3.5.13(transitive)

• + Added@vue/reactivity@3.5.13(transitive)

• + Added@vue/runtime-core@3.5.13(transitive)

• + Added@vue/runtime-dom@3.5.13(transitive)

• + Added@vue/server-renderer@3.5.13(transitive)

• + Added@vue/shared@3.5.13(transitive)

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

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

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

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

• + Addedabitype@1.0.8(transitive)

• + Addedbase64-js@1.5.1(transitive)

• + Addedbuffer@6.0.3(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addedentities@4.5.0(transitive)

• + Addedestree-walker@2.0.2(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedlit@2.8.0(transitive)

• + Addedmagic-string@0.30.17(transitive)

• + Addednanoid@3.3.8(transitive)

• + Addedox@0.6.7(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpostcss@8.5.1(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedvaltio@1.11.2(transitive)

• + Addedviem@2.22.13(transitive)

• + Addedvue@3.5.13(transitive)

• - Removed@noble/curves@1.7.0(transitive)

• - Removed@noble/hashes@1.6.01.6.1(transitive)

• - Removed@scure/bip32@1.6.0(transitive)

• - Removed@scure/bip39@1.5.0(transitive)

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

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

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

• - Removedabitype@1.0.7(transitive)

• - Removedlit@2.7.6(transitive)

• - Removedox@0.6.5(transitive)

• - Removedvaltio@1.11.1(transitive)

• - Removedviem@2.22.12(transitive)

• Updated@web3modal/scaffold@3.0.0-73ed03f2