@dynamic-labs/starknet 1.4.14 → 1.4.16

package/CHANGELOG.md

@@ -1,4 +1,18 @@
 
+### [1.4.16](https://github.com/dynamic-labs/DynamicAuth/compare/v1.4.15...v1.4.16) (2024-07-25)
+
+
+### Bug Fixes
+
+* improve network switch ux for metamask starknet snap ([#6376](https://github.com/dynamic-labs/DynamicAuth/issues/6376)) ([#6419](https://github.com/dynamic-labs/DynamicAuth/issues/6419)) ([4909806](https://github.com/dynamic-labs/DynamicAuth/commit/4909806ee5fa8a6a90d85f7e9c24b2bde6de5e75))
+
+### [1.4.15](https://github.com/dynamic-labs/DynamicAuth/compare/v1.4.14...v1.4.15) (2024-07-17)
+
+
+### Bug Fixes
+
+* re-establish connection to metamask starknet snap on page reload ([#6362](https://github.com/dynamic-labs/DynamicAuth/issues/6362)) ([176bd0e](https://github.com/dynamic-labs/DynamicAuth/commit/176bd0e096a523731e815b1e32961509db1e05d2))
+
 ### [1.4.14](https://github.com/dynamic-labs/DynamicAuth/compare/v1.4.13...v1.4.14) (2024-07-11)
 
 ### [1.4.13](https://github.com/dynamic-labs/DynamicAuth/compare/v1.4.12...v1.4.13) (2024-06-05)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-labs/starknet",
-  "version": "1.4.14",
+  "version": "1.4.16",
   "repository": {
     "type": "git",
     "url": "https://github.com/dynamic-labs/DynamicAuth.git",
@@ -32,11 +32,12 @@
     "starknetkit": "1.1.3",
     "@dynamic-labs/sdk-api": "0.0.387",
     "@module-federation/runtime": "0.1.19",
-    "@dynamic-labs/rpc-providers": "1.4.14",
-    "@dynamic-labs/types": "1.4.14",
-    "@dynamic-labs/utils": "1.4.14",
-    "@dynamic-labs/wallet-book": "1.4.14",
-    "@dynamic-labs/wallet-connector-core": "1.4.14"
+    "@dynamic-labs/logger": "1.4.16",
+    "@dynamic-labs/rpc-providers": "1.4.16",
+    "@dynamic-labs/types": "1.4.16",
+    "@dynamic-labs/utils": "1.4.16",
+    "@dynamic-labs/wallet-book": "1.4.16",
+    "@dynamic-labs/wallet-connector-core": "1.4.16"
   },
   "peerDependencies": {}
 }

package/src/utils/starknetSnap.cjs

@@ -25,13 +25,34 @@ function _interopNamespace(e) {
 
 var moduleFederation__namespace = /*#__PURE__*/_interopNamespace(moduleFederation);
 
-let metaMaskSnapWallet;
 /**
  *
  * @param {IEthereum} provider the metamask window provider object
  * @returns {StarknetWindowObject} the metamask provider wrapper formed into starknet window object
  */
 const createMetaMaskProviderWrapper = (provider) => {
+    let metaMaskSnapWallet;
+    // using @module-federation to load the get-starknet remoteEntry, as recommended
+    // by the starknet team. this file is a small wrapper around the metamask snap api
+    // to communicate with starknet, which we then wrap into a starknet window object
+    // and use in our starknet connector, just like braavos and argent
+    const initMetaMaskSnapWallet = () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+        if (!metaMaskSnapWallet) {
+            moduleFederation__namespace.init({
+                name: 'MetaMaskStarknetSnapWallet',
+                remotes: [
+                    {
+                        alias: 'MetaMaskStarknetSnapWallet',
+                        entry: 'https://snaps.consensys.io/starknet/get-starknet/v1/remoteEntry.js',
+                        name: 'MetaMaskStarknetSnapWallet',
+                    },
+                ],
+            });
+            const result = yield moduleFederation__namespace.loadRemote('MetaMaskStarknetSnapWallet/index');
+            const { MetaMaskSnapWallet } = result;
+            metaMaskSnapWallet = new MetaMaskSnapWallet(provider, '*');
+        }
+    });
     const metaMaskProviderWrapper = {
         get account() {
             return metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.account;
@@ -40,21 +61,7 @@ const createMetaMaskProviderWrapper = (provider) => {
             return metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.chainId;
         },
         enable: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
-            if (!metaMaskSnapWallet) {
-                yield moduleFederation__namespace.init({
-                    name: 'MetaMaskStarknetSnapWallet',
-                    remotes: [
-                        {
-                            alias: 'MetaMaskStarknetSnapWallet',
-                            entry: 'https://snaps.consensys.io/starknet/get-starknet/v1/remoteEntry.js',
-                            name: 'MetaMaskStarknetSnapWallet',
-                        },
-                    ],
-                });
-                const result = yield moduleFederation__namespace.loadRemote('MetaMaskStarknetSnapWallet/index');
-                const { MetaMaskSnapWallet } = result;
-                metaMaskSnapWallet = new MetaMaskSnapWallet(provider, '*');
-            }
+            yield initMetaMaskSnapWallet();
             if (!metaMaskSnapWallet) {
                 return [];
             }
@@ -65,7 +72,11 @@ const createMetaMaskProviderWrapper = (provider) => {
         get isConnected() {
             return metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.isConnected;
         },
-        isPreauthorized: () => { var _a; return (_a = metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.isPreauthorized()) !== null && _a !== void 0 ? _a : Promise.resolve(false); },
+        isPreauthorized: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            yield initMetaMaskSnapWallet();
+            return (_a = (yield (metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.isPreauthorized()))) !== null && _a !== void 0 ? _a : false;
+        }),
         name: 'MetaMaskStarknetSnapWallet',
         off: (
         // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/utils/starknetSnap.js

@@ -1,13 +1,34 @@
 import { __awaiter } from '../../_virtual/_tslib.js';
 import * as moduleFederation from '@module-federation/runtime/dist/index.cjs.js';
 
-let metaMaskSnapWallet;
 /**
  *
  * @param {IEthereum} provider the metamask window provider object
  * @returns {StarknetWindowObject} the metamask provider wrapper formed into starknet window object
  */
 const createMetaMaskProviderWrapper = (provider) => {
+    let metaMaskSnapWallet;
+    // using @module-federation to load the get-starknet remoteEntry, as recommended
+    // by the starknet team. this file is a small wrapper around the metamask snap api
+    // to communicate with starknet, which we then wrap into a starknet window object
+    // and use in our starknet connector, just like braavos and argent
+    const initMetaMaskSnapWallet = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!metaMaskSnapWallet) {
+            moduleFederation.init({
+                name: 'MetaMaskStarknetSnapWallet',
+                remotes: [
+                    {
+                        alias: 'MetaMaskStarknetSnapWallet',
+                        entry: 'https://snaps.consensys.io/starknet/get-starknet/v1/remoteEntry.js',
+                        name: 'MetaMaskStarknetSnapWallet',
+                    },
+                ],
+            });
+            const result = yield moduleFederation.loadRemote('MetaMaskStarknetSnapWallet/index');
+            const { MetaMaskSnapWallet } = result;
+            metaMaskSnapWallet = new MetaMaskSnapWallet(provider, '*');
+        }
+    });
     const metaMaskProviderWrapper = {
         get account() {
             return metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.account;
@@ -16,21 +37,7 @@ const createMetaMaskProviderWrapper = (provider) => {
             return metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.chainId;
         },
         enable: () => __awaiter(void 0, void 0, void 0, function* () {
-            if (!metaMaskSnapWallet) {
-                yield moduleFederation.init({
-                    name: 'MetaMaskStarknetSnapWallet',
-                    remotes: [
-                        {
-                            alias: 'MetaMaskStarknetSnapWallet',
-                            entry: 'https://snaps.consensys.io/starknet/get-starknet/v1/remoteEntry.js',
-                            name: 'MetaMaskStarknetSnapWallet',
-                        },
-                    ],
-                });
-                const result = yield moduleFederation.loadRemote('MetaMaskStarknetSnapWallet/index');
-                const { MetaMaskSnapWallet } = result;
-                metaMaskSnapWallet = new MetaMaskSnapWallet(provider, '*');
-            }
+            yield initMetaMaskSnapWallet();
             if (!metaMaskSnapWallet) {
                 return [];
             }
@@ -41,7 +48,11 @@ const createMetaMaskProviderWrapper = (provider) => {
         get isConnected() {
             return metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.isConnected;
         },
-        isPreauthorized: () => { var _a; return (_a = metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.isPreauthorized()) !== null && _a !== void 0 ? _a : Promise.resolve(false); },
+        isPreauthorized: () => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            yield initMetaMaskSnapWallet();
+            return (_a = (yield (metaMaskSnapWallet === null || metaMaskSnapWallet === void 0 ? void 0 : metaMaskSnapWallet.isPreauthorized()))) !== null && _a !== void 0 ? _a : false;
+        }),
         name: 'MetaMaskStarknetSnapWallet',
         off: (
         // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/wallets/metamask.cjs

@@ -4,43 +4,106 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _tslib = require('../../_virtual/_tslib.cjs');
 var utils = require('@dynamic-labs/utils');
+var logger$1 = require('@dynamic-labs/logger');
 var starknetWalletConnector = require('../starknetWalletConnector.cjs');
 var starknetSnap = require('../utils/starknetSnap.cjs');
 
+const logger = new logger$1.Logger('MetaMask Starknet Snap', logger$1.LogLevel.INFO);
 class MetaMask extends starknetWalletConnector["default"] {
     constructor(opts) {
         super('MetaMask Starknet', 'metamask_snap', opts);
         this.overrideKey = 'metamaskstarknet';
-        this.canSetEventListeners = false;
-        if (!window.starknet_metamask_snap) {
-            const { providers } = utils.Eip6963ProviderSingleton.get();
-            const metamaskProvider = providers.find((p) => ['io.metamask', 'io.metamask.flask'].includes(p.info.rdns));
-            if (metamaskProvider) {
-                window.starknet_metamask_snap = starknetSnap.createMetaMaskProviderWrapper(metamaskProvider.provider);
-            }
+        const { providers } = utils.Eip6963ProviderSingleton.get();
+        const metamaskProvider = providers.find((p) => ['io.metamask', 'io.metamask.flask'].includes(p.info.rdns));
+        if (metamaskProvider) {
+            this.provider = metamaskProvider.provider;
+        }
+        if (!window.starknet_metamask_snap && metamaskProvider) {
+            window.starknet_metamask_snap = starknetSnap.createMetaMaskProviderWrapper(metamaskProvider.provider);
         }
     }
-    getConnectedAccounts() {
+    getNetwork() {
         return _tslib.__awaiter(this, void 0, void 0, function* () {
-            const wallet = this.getWallet();
-            if (!wallet) {
-                return [];
+            if (!this.provider) {
+                logger.error('[getNetwork] - No provider found, returning undefined');
+                return undefined;
             }
             try {
-                yield this.reconnectIfNeeded(wallet);
+                logger.info('[getNetwork] - trying to fetch network using provider');
+                // we are using this method to get the network so that we always "see" the absolute
+                // active network in the companion site. when using the snap wrapper to get the network,
+                // we don't "see" the actual active network in the companion site – instead we see the
+                // network that was active at the time of the snap initialization
+                const result = yield this.provider.request({
+                    method: 'wallet_invokeSnap',
+                    params: {
+                        request: {
+                            method: 'starkNet_getCurrentNetwork',
+                            params: {},
+                        },
+                        snapId: 'npm:@consensys/starknet-snap',
+                    },
+                });
+                if (!('chainId' in result) || typeof result.chainId !== 'string') {
+                    logger.error(`[getNetwork] - result.chainId should be a string, but got: ${
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    result.chainId}`);
+                    return undefined;
+                }
+                if (result.chainId !== this.currentChainId) {
+                    const resultChainName = this.mapChainIdToNetworkName(result.chainId);
+                    const currentChainName = this.currentChainId
+                        ? this.mapChainIdToNetworkName(this.currentChainId)
+                        : undefined;
+                    logger.info(`[getNetwork] - emitting chainChange event. got chainId: ${result.chainId} (${resultChainName}). current chainId: ${this.currentChainId} (${currentChainName})`);
+                    this.emit('chainChange', { chain: result.chainId });
+                }
+                this.currentChainId = result.chainId;
+                return this.currentChainId;
             }
             catch (e) {
-                return [];
+                logger.error('[getNetwork] - network fetch request failed, returning undefined', e);
+                return undefined;
             }
-            const getSelectedAddress = () => wallet.selectedAddress
-                ? Promise.resolve([wallet.selectedAddress])
-                : Promise.reject();
-            return utils.retryableFn(getSelectedAddress, {
-                fallbackValue: [],
-                maxRetries: 10,
-                retryIntervalMs: 750,
-                retryStrategy: 'timeout-and-rejection',
+        });
+    }
+    setupEventListeners() {
+        this.intervalId = setInterval(() => {
+            this.getNetwork().then((chainId) => {
+                if (!chainId) {
+                    return;
+                }
+                const resultChainName = this.mapChainIdToNetworkName(chainId);
+                const currentChainName = this.currentChainId
+                    ? this.mapChainIdToNetworkName(this.currentChainId)
+                    : undefined;
+                logger.info(`[setupEventListeners] - got network: ${chainId} (${resultChainName}). current network: ${this.currentChainId} (${currentChainName})`);
+                if (chainId !== this.currentChainId) {
+                    logger.info(`[setupEventListeners] - emitting chainChange event: ${chainId}`);
+                    this.emit('chainChange', { chain: chainId });
+                    this.currentChainId = chainId;
+                }
             });
+        }, 5000);
+    }
+    teardownEventListeners() {
+        return _tslib.__awaiter(this, void 0, void 0, function* () {
+            clearInterval(this.intervalId);
+        });
+    }
+    getConnectedAccounts() {
+        return _tslib.__awaiter(this, void 0, void 0, function* () {
+            const wallet = this.getWallet();
+            if (!wallet) {
+                return [];
+            }
+            const isProviderConnected = this.isProviderConnected();
+            const isPreauthorized = yield wallet.isPreauthorized();
+            const shouldReconnect = !isProviderConnected && isPreauthorized;
+            if (shouldReconnect) {
+                yield this.connect();
+            }
+            return wallet.selectedAddress ? [wallet.selectedAddress] : [];
         });
     }
 }

package/src/wallets/metamask.d.ts

@@ -2,7 +2,12 @@ import { type WalletConnector } from '@dynamic-labs/wallet-connector-core';
 import StarknetProvider from '../starknetWalletConnector';
 export declare class MetaMask extends StarknetProvider implements WalletConnector {
     overrideKey: string;
-    canSetEventListeners: boolean;
+    private currentChainId;
+    private intervalId;
+    private provider;
     constructor(opts: any);
+    getNetwork(): Promise<string | undefined>;
+    setupEventListeners(): void;
+    teardownEventListeners(): Promise<void>;
     getConnectedAccounts(): Promise<string[]>;
 }

package/src/wallets/metamask.js

@@ -1,42 +1,105 @@
 import { __awaiter } from '../../_virtual/_tslib.js';
-import { Eip6963ProviderSingleton, retryableFn } from '@dynamic-labs/utils';
+import { Eip6963ProviderSingleton } from '@dynamic-labs/utils';
+import { Logger, LogLevel } from '@dynamic-labs/logger';
 import StarknetWalletConnector from '../starknetWalletConnector.js';
 import { createMetaMaskProviderWrapper } from '../utils/starknetSnap.js';
 
+const logger = new Logger('MetaMask Starknet Snap', LogLevel.INFO);
 class MetaMask extends StarknetWalletConnector {
     constructor(opts) {
         super('MetaMask Starknet', 'metamask_snap', opts);
         this.overrideKey = 'metamaskstarknet';
-        this.canSetEventListeners = false;
-        if (!window.starknet_metamask_snap) {
-            const { providers } = Eip6963ProviderSingleton.get();
-            const metamaskProvider = providers.find((p) => ['io.metamask', 'io.metamask.flask'].includes(p.info.rdns));
-            if (metamaskProvider) {
-                window.starknet_metamask_snap = createMetaMaskProviderWrapper(metamaskProvider.provider);
-            }
+        const { providers } = Eip6963ProviderSingleton.get();
+        const metamaskProvider = providers.find((p) => ['io.metamask', 'io.metamask.flask'].includes(p.info.rdns));
+        if (metamaskProvider) {
+            this.provider = metamaskProvider.provider;
+        }
+        if (!window.starknet_metamask_snap && metamaskProvider) {
+            window.starknet_metamask_snap = createMetaMaskProviderWrapper(metamaskProvider.provider);
         }
     }
-    getConnectedAccounts() {
+    getNetwork() {
         return __awaiter(this, void 0, void 0, function* () {
-            const wallet = this.getWallet();
-            if (!wallet) {
-                return [];
+            if (!this.provider) {
+                logger.error('[getNetwork] - No provider found, returning undefined');
+                return undefined;
             }
             try {
-                yield this.reconnectIfNeeded(wallet);
+                logger.info('[getNetwork] - trying to fetch network using provider');
+                // we are using this method to get the network so that we always "see" the absolute
+                // active network in the companion site. when using the snap wrapper to get the network,
+                // we don't "see" the actual active network in the companion site – instead we see the
+                // network that was active at the time of the snap initialization
+                const result = yield this.provider.request({
+                    method: 'wallet_invokeSnap',
+                    params: {
+                        request: {
+                            method: 'starkNet_getCurrentNetwork',
+                            params: {},
+                        },
+                        snapId: 'npm:@consensys/starknet-snap',
+                    },
+                });
+                if (!('chainId' in result) || typeof result.chainId !== 'string') {
+                    logger.error(`[getNetwork] - result.chainId should be a string, but got: ${
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    result.chainId}`);
+                    return undefined;
+                }
+                if (result.chainId !== this.currentChainId) {
+                    const resultChainName = this.mapChainIdToNetworkName(result.chainId);
+                    const currentChainName = this.currentChainId
+                        ? this.mapChainIdToNetworkName(this.currentChainId)
+                        : undefined;
+                    logger.info(`[getNetwork] - emitting chainChange event. got chainId: ${result.chainId} (${resultChainName}). current chainId: ${this.currentChainId} (${currentChainName})`);
+                    this.emit('chainChange', { chain: result.chainId });
+                }
+                this.currentChainId = result.chainId;
+                return this.currentChainId;
             }
             catch (e) {
-                return [];
+                logger.error('[getNetwork] - network fetch request failed, returning undefined', e);
+                return undefined;
             }
-            const getSelectedAddress = () => wallet.selectedAddress
-                ? Promise.resolve([wallet.selectedAddress])
-                : Promise.reject();
-            return retryableFn(getSelectedAddress, {
-                fallbackValue: [],
-                maxRetries: 10,
-                retryIntervalMs: 750,
-                retryStrategy: 'timeout-and-rejection',
+        });
+    }
+    setupEventListeners() {
+        this.intervalId = setInterval(() => {
+            this.getNetwork().then((chainId) => {
+                if (!chainId) {
+                    return;
+                }
+                const resultChainName = this.mapChainIdToNetworkName(chainId);
+                const currentChainName = this.currentChainId
+                    ? this.mapChainIdToNetworkName(this.currentChainId)
+                    : undefined;
+                logger.info(`[setupEventListeners] - got network: ${chainId} (${resultChainName}). current network: ${this.currentChainId} (${currentChainName})`);
+                if (chainId !== this.currentChainId) {
+                    logger.info(`[setupEventListeners] - emitting chainChange event: ${chainId}`);
+                    this.emit('chainChange', { chain: chainId });
+                    this.currentChainId = chainId;
+                }
             });
+        }, 5000);
+    }
+    teardownEventListeners() {
+        return __awaiter(this, void 0, void 0, function* () {
+            clearInterval(this.intervalId);
+        });
+    }
+    getConnectedAccounts() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const wallet = this.getWallet();
+            if (!wallet) {
+                return [];
+            }
+            const isProviderConnected = this.isProviderConnected();
+            const isPreauthorized = yield wallet.isPreauthorized();
+            const shouldReconnect = !isProviderConnected && isPreauthorized;
+            if (shouldReconnect) {
+                yield this.connect();
+            }
+            return wallet.selectedAddress ? [wallet.selectedAddress] : [];
         });
     }
 }