@dynamic-labs/ethereum 4.0.0-alpha.9 → 4.0.1

package/src/metaMask/MetaMaskConnector.js

@@ -0,0 +1,372 @@
+'use client'
+import { __awaiter } from '../../_virtual/_tslib.js';
+import { MetaMaskSDK } from '@metamask/sdk';
+import { createWalletClient, custom, isHex, toHex } from 'viem';
+import { getOrMapViemChain } from '@dynamic-labs/ethereum-core';
+import { eventListenerHandlers } from '@dynamic-labs/wallet-connector-core';
+import { createEventTimeline, PlatformService, isMobile, retryableFn } from '@dynamic-labs/utils';
+import { logger } from '../utils/logger.js';
+import { InjectedWalletBase } from '../injected/InjectedWalletBase.js';
+import { createMetaMaskSDKDisplayUriState } from './utils/createMetaMaskSDKDisplayUriState.js';
+import { waitForConnection } from './utils/waitForConnection.js';
+import { isPendingWalletRequestPermissionError } from './utils/isPendingWalletRequestPermissionError.js';
+
+/**
+ * The MetaMask SDK must be initialized only once, so we store the instance
+ * in these variables to avoid initializing it multiple times
+ */
+let _metaMaskSDK = null;
+let _metaMaskSDKDisplayUriState = null;
+const eventTimeline = createEventTimeline();
+class MetaMaskConnector extends InjectedWalletBase {
+    constructor(props) {
+        super(props);
+        this.name = 'MetaMask';
+        this.overrideKey = 'metamask';
+        this.canConnectViaQrCode = true;
+        this.isInAppBrowser = false;
+        this.appName = props.appName;
+        this.appLogoUrl = props.appLogoUrl;
+        /**
+         * The isInAppBrowser must be calculated before initializing the MetaMask SDK.
+         *
+         * The isInAppBrowser is calculated by checking if the window provider is installed
+         * in the browser and if it is running on a mobile device.
+         *
+         * But the MetaMask SDK will inject its own provider to the window if not provider is injected.
+         * This means the MetaMask SDK can interfere with the isInAppBrowser calculation.
+         *
+         * So we need to calculate the isInAppBrowser before initializing the MetaMask SDK
+         * to prevent a false negative
+         */
+        this.isInAppBrowser = this.getIsInAppBrowser();
+        if (!_metaMaskSDK) {
+            this.createMetaMaskSDK();
+        }
+    }
+    getSupportedNetworks() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return this.evmNetworks.map((network) => network.chainId.toString());
+        });
+    }
+    get metaMaskSDK() {
+        if (!_metaMaskSDK)
+            throw new Error('MetaMaskSDK not initialized');
+        return _metaMaskSDK;
+    }
+    set metaMaskSDK(metaMaskSDK) {
+        _metaMaskSDK = metaMaskSDK;
+    }
+    get metaMaskSDKDisplayUriState() {
+        if (!_metaMaskSDKDisplayUriState)
+            throw new Error('MetaMaskSDKDisplayUriState not initialized');
+        return _metaMaskSDKDisplayUriState;
+    }
+    createMetaMaskSDK() {
+        const dappMetadata = {
+            iconUrl: this.appLogoUrl,
+            name: this.appName,
+            url: PlatformService.getOrigin(),
+        };
+        _metaMaskSDK = new MetaMaskSDK({
+            _source: 'dynamic-labs',
+            checkInstallationImmediately: true,
+            dappMetadata,
+            enableAnalytics: true,
+            extensionOnly: this.isInstalledOnBrowser(),
+            headless: true,
+            openDeeplink: PlatformService.openURL,
+            preferDesktop: !isMobile(),
+            readonlyRPCMap: getReadonlyRPCMap(this.evmNetworkRpcMap()),
+            useDeeplink: true,
+        });
+        _metaMaskSDKDisplayUriState =
+            createMetaMaskSDKDisplayUriState(_metaMaskSDK);
+    }
+    endSession() {
+        return __awaiter(this, void 0, void 0, function* () {
+            eventTimeline.postEvent('disconnect');
+            /**
+             * The MetaMask SDK must be terminated and reinitialized on mobile
+             * to prevent deeplinks not working
+             */
+            if (isMobile()) {
+                return this.metaMaskSDK.terminate().then(() => {
+                    _metaMaskSDK = null;
+                    _metaMaskSDKDisplayUriState = null;
+                    return this.createMetaMaskSDK();
+                });
+            }
+            /**
+             * Just terminate the SDK on desktop
+             */
+            return this.metaMaskSDK.terminate();
+        });
+    }
+    getAddress(opts) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve, reject) => {
+                // QR Code flow
+                if (!isMobile() && Boolean(opts === null || opts === void 0 ? void 0 : opts.onDisplayUri)) {
+                    this.metaMaskSDKDisplayUriState
+                        .consumeDisplayUri()
+                        .then((displayUri) => {
+                        var _a;
+                        if (!displayUri) {
+                            reject(new Error('MetaMask display uri not found'));
+                            return;
+                        }
+                        (_a = opts === null || opts === void 0 ? void 0 : opts.onDisplayUri) === null || _a === void 0 ? void 0 : _a.call(opts, displayUri);
+                    });
+                }
+                // Deep link to MetaMask app in-app browser
+                if (this.shouldDeepLinkToMetaMaskInAppBrowser() &&
+                    this.metadata.inAppBrowserUrl) {
+                    // Redirect to the in-app browser and append the current url
+                    window.location.href = `${this.metadata.inAppBrowserUrl}/${window.location.href}`;
+                    resolve(undefined);
+                    return;
+                }
+                // Connect to MetaMask
+                this.getConnectedAccountsSafely().then((initialConnectedAccounts) => __awaiter(this, void 0, void 0, function* () {
+                    if (initialConnectedAccounts.length) {
+                        resolve(initialConnectedAccounts[0]);
+                        return;
+                    }
+                    try {
+                        yield this.metaMaskSDK.connect();
+                    }
+                    catch (error) {
+                        const isRequestPendingError = isPendingWalletRequestPermissionError(error);
+                        if (!isRequestPendingError) {
+                            throw error;
+                        }
+                        else {
+                            yield waitForConnection(this.getProvider());
+                        }
+                    }
+                    const accounts = yield this.getConnectedAccounts();
+                    resolve(accounts[0]);
+                }));
+            });
+        });
+    }
+    getConnectedAccountsSafely() {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                const connectedAccounts = yield this.getConnectedAccounts();
+                return connectedAccounts;
+            }
+            catch (err) {
+                logger.error(err);
+                return [];
+            }
+        });
+    }
+    getConnectedAccounts() {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Wait for for MetaMask SDK to initialize
+            yield this.metaMaskSDK.sdkInitPromise;
+            const provider = this.getProvider();
+            if (!provider) {
+                return [];
+            }
+            /**
+             * The eth_accounts method can hang on mobile devices when
+             * the MetaMask SDK has not connected yet. So we use a retryable
+             * to ensure the timeout will be respected
+             */
+            const accounts = yield retryableFn(() => provider.request({
+                method: 'eth_accounts',
+                params: [],
+            }), {
+                fallbackValue: [],
+                timeoutMs: 1000,
+            });
+            if (!(accounts === null || accounts === void 0 ? void 0 : accounts.length)) {
+                return [];
+            }
+            return accounts;
+        });
+    }
+    signMessage(messageToSign) {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.metaMaskSDK.sdkInitPromise;
+            /**
+             * Should wait for the window to be focused on mobile
+             * to account for the user moving between the MetaMaskApp
+             * and the browser
+             */
+            const windowFocusPromiseForMobile = !this.isInAppBrowser && isMobile()
+                ? waitForFocusWindowEvent()
+                : Promise.resolve();
+            const provider = this.getProvider();
+            if (!provider) {
+                return undefined;
+            }
+            const [selectedAddress] = yield this.getConnectedAccounts();
+            if (!selectedAddress) {
+                return undefined;
+            }
+            const walletClient = this.getWalletClientForAddress(selectedAddress);
+            if (!walletClient)
+                return undefined;
+            const signature = yield walletClient.signMessage({
+                message: messageToSign,
+            });
+            yield windowFocusPromiseForMobile;
+            return signature;
+        });
+    }
+    chooseAccountsToConnect() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return [];
+        });
+    }
+    getWalletClient(chainId) {
+        const provider = this.getProvider();
+        if (!provider) {
+            return undefined;
+        }
+        const selectedAddress = provider.getSelectedAddress();
+        return this.getWalletClientForAddress(selectedAddress || undefined, chainId);
+    }
+    get rdns() {
+        const { rdns } = this.metadata;
+        if (!rdns) {
+            throw new Error('rdns not found in metadata');
+        }
+        return rdns;
+    }
+    setupEventListeners() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.metaMaskSDK.sdkInitPromise;
+            const metaMaskProvider = this.getProvider();
+            if (!metaMaskProvider) {
+                return;
+            }
+            const { handleAccountChange, handleChainChange, handleDisconnect } = eventListenerHandlers(this);
+            const handleAccountsChangedFromMetaMask = (accounts) => {
+                /**
+                 * MetaMask emits an account changed event when the wallet is disconnected
+                 * so we ignore the accountsChanged event if the disconnect event was recent
+                 */
+                if (eventTimeline.isEventRecent('disconnect', 1000)) {
+                    return;
+                }
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                handleAccountChange(accounts);
+            };
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            metaMaskProvider.on('accountsChanged', handleAccountsChangedFromMetaMask);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            metaMaskProvider.on('chainChanged', handleChainChange);
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            metaMaskProvider.on('disconnect', handleDisconnect);
+            this.teardownEventListeners = () => {
+                metaMaskProvider.off('accountsChanged', handleAccountsChangedFromMetaMask);
+                metaMaskProvider.off('chainChanged', handleChainChange);
+                metaMaskProvider.off('disconnect', handleDisconnect);
+            };
+        });
+    }
+    /**
+     * This override is necessary to wait for the MetaMask SDK to initialize
+     * before calling the super method. Otherwise, the super method may fail
+     * to fetch the provider
+     */
+    getNetwork() {
+        const _super = Object.create(null, {
+            getNetwork: { get: () => super.getNetwork }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.metaMaskSDK.sdkInitPromise;
+            const net = yield _super.getNetwork.call(this);
+            return net;
+        });
+    }
+    // Utils
+    getProvider() {
+        var _a;
+        return ((_a = this.metaMaskSDK.getProvider()) !== null && _a !== void 0 ? _a : this.metaMaskSDK.getMobileProvider());
+    }
+    evmNetworkByChainId(chainId) {
+        return this.evmNetworks.find((network) => network.chainId === chainId);
+    }
+    getWalletClientForAddress(address, chainId) {
+        var _a, _b;
+        const provider = this.getProvider();
+        if (!provider) {
+            return undefined;
+        }
+        const effectiveChainId = (_b = (_a = this.toInt(chainId)) !== null && _a !== void 0 ? _a : this.getCurrentChainId()) !== null && _b !== void 0 ? _b : '1';
+        const network = this.evmNetworkByChainId(effectiveChainId);
+        return createWalletClient({
+            account: address,
+            chain: network ? getOrMapViemChain(network) : this.getActiveChain(),
+            transport: custom(provider),
+        });
+    }
+    toInt(chainId) {
+        if (!chainId)
+            return undefined;
+        try {
+            return parseInt(chainId);
+        }
+        catch (err) {
+            logger.debug(err);
+            return undefined;
+        }
+    }
+    getCurrentChainId() {
+        const provider = this.getProvider();
+        if (!provider) {
+            return undefined;
+        }
+        const chainId = provider.getChainId();
+        if (isHex(chainId)) {
+            return parseInt(chainId);
+        }
+        return chainId;
+    }
+    /**
+     * Checks if the current environment is the MetaMask in-app browser
+     * by checking if the MetaMask provider is installed in the window object
+     * on a mobile device
+     */
+    getIsInAppBrowser() {
+        if (!isMobile())
+            return false;
+        return this.isInstalledOnBrowser();
+    }
+    shouldDeepLinkToMetaMaskInAppBrowser() {
+        // Not in an in-app browser
+        if (this.isInAppBrowser)
+            return false;
+        // Not a mobile device
+        if (!isMobile())
+            return false;
+        // SDK is configured to use the in-app browser
+        if (this.mobileExperience !== 'in-app-browser')
+            return false;
+        // Wallet does not have an in-app browser link
+        if (!this.metadata.inAppBrowserUrl)
+            return false;
+        return true;
+    }
+}
+// Utils
+const getReadonlyRPCMap = (evmNetworkRpcMap) => Object.keys(evmNetworkRpcMap).reduce((acc, chainId) => (Object.assign(Object.assign({}, acc), { [toHex(parseInt(chainId))]: evmNetworkRpcMap[chainId] })), {});
+/**
+ * Waits for the focus page event and await for an extra second
+ * This is necessary to ensure the verify call will succeed
+ */
+const waitForFocusWindowEvent = () => new Promise((resolve) => {
+    window.addEventListener('focus', resolve);
+}).then(() => new Promise((resolve) => setTimeout(resolve, 1000)));
+
+export { MetaMaskConnector };

package/src/metaMask/utils/createMetaMaskSDKDisplayUriState.cjs

@@ -0,0 +1,58 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../_virtual/_tslib.cjs');
+
+/**
+ * Listens for the `display_uri` event emitted by the MetaMask SDK.
+ *
+ * The `display_uri` event is triggered during SDK initialization or when the `connect` method is called.
+ * Calling `terminate` in the MetaMask SDK resets the connection, and a new `display_uri` will only be emitted
+ * when `connect` is called again.
+ *
+ * This function manages the new `display_uri` received from these events.
+ */
+const createMetaMaskSDKDisplayUriState = (metaMaskSDK) => {
+    let lastKnownMetaMaskDeepLinkUri = null;
+    let displayUri = null;
+    metaMaskSDK.on('display_uri', (latestDisplayUri) => {
+        if (lastKnownMetaMaskDeepLinkUri !== latestDisplayUri) {
+            lastKnownMetaMaskDeepLinkUri = latestDisplayUri;
+            displayUri = latestDisplayUri.trim();
+        }
+    });
+    return {
+        consumeDisplayUri: () => _tslib.__awaiter(void 0, void 0, void 0, function* () {
+            const currentDisplayUri = displayUri;
+            if (currentDisplayUri) {
+                displayUri = null;
+                return currentDisplayUri;
+            }
+            return new Promise((resolve) => {
+                let timeoutId = null;
+                let intervalId = null;
+                const cleanUp = () => {
+                    if (timeoutId)
+                        clearTimeout(timeoutId);
+                    if (intervalId)
+                        clearInterval(intervalId);
+                };
+                timeoutId = setTimeout(() => {
+                    cleanUp();
+                    resolve(undefined);
+                }, 1000);
+                intervalId = setInterval(() => {
+                    if (displayUri) {
+                        cleanUp();
+                        resolve(displayUri);
+                        displayUri = null;
+                    }
+                }, 10);
+            });
+        }),
+    };
+};
+
+exports.createMetaMaskSDKDisplayUriState = createMetaMaskSDKDisplayUriState;

package/src/metaMask/utils/createMetaMaskSDKDisplayUriState.d.ts

@@ -0,0 +1,14 @@
+import { MetaMaskSDK } from '@metamask/sdk';
+export type MetaMaskSDKDisplayUriState = {
+    consumeDisplayUri: () => Promise<string | undefined>;
+};
+/**
+ * Listens for the `display_uri` event emitted by the MetaMask SDK.
+ *
+ * The `display_uri` event is triggered during SDK initialization or when the `connect` method is called.
+ * Calling `terminate` in the MetaMask SDK resets the connection, and a new `display_uri` will only be emitted
+ * when `connect` is called again.
+ *
+ * This function manages the new `display_uri` received from these events.
+ */
+export declare const createMetaMaskSDKDisplayUriState: (metaMaskSDK: MetaMaskSDK) => MetaMaskSDKDisplayUriState;

package/src/metaMask/utils/createMetaMaskSDKDisplayUriState.js

@@ -0,0 +1,54 @@
+'use client'
+import { __awaiter } from '../../../_virtual/_tslib.js';
+
+/**
+ * Listens for the `display_uri` event emitted by the MetaMask SDK.
+ *
+ * The `display_uri` event is triggered during SDK initialization or when the `connect` method is called.
+ * Calling `terminate` in the MetaMask SDK resets the connection, and a new `display_uri` will only be emitted
+ * when `connect` is called again.
+ *
+ * This function manages the new `display_uri` received from these events.
+ */
+const createMetaMaskSDKDisplayUriState = (metaMaskSDK) => {
+    let lastKnownMetaMaskDeepLinkUri = null;
+    let displayUri = null;
+    metaMaskSDK.on('display_uri', (latestDisplayUri) => {
+        if (lastKnownMetaMaskDeepLinkUri !== latestDisplayUri) {
+            lastKnownMetaMaskDeepLinkUri = latestDisplayUri;
+            displayUri = latestDisplayUri.trim();
+        }
+    });
+    return {
+        consumeDisplayUri: () => __awaiter(void 0, void 0, void 0, function* () {
+            const currentDisplayUri = displayUri;
+            if (currentDisplayUri) {
+                displayUri = null;
+                return currentDisplayUri;
+            }
+            return new Promise((resolve) => {
+                let timeoutId = null;
+                let intervalId = null;
+                const cleanUp = () => {
+                    if (timeoutId)
+                        clearTimeout(timeoutId);
+                    if (intervalId)
+                        clearInterval(intervalId);
+                };
+                timeoutId = setTimeout(() => {
+                    cleanUp();
+                    resolve(undefined);
+                }, 1000);
+                intervalId = setInterval(() => {
+                    if (displayUri) {
+                        cleanUp();
+                        resolve(displayUri);
+                        displayUri = null;
+                    }
+                }, 10);
+            });
+        }),
+    };
+};
+
+export { createMetaMaskSDKDisplayUriState };

package/src/metaMask/utils/isPendingWalletRequestPermissionError.cjs

@@ -0,0 +1,11 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const isPendingWalletRequestPermissionError = (error) => typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    error.message.includes("Request of type 'wallet_requestPermissions' already pending for origin");
+
+exports.isPendingWalletRequestPermissionError = isPendingWalletRequestPermissionError;

package/src/metaMask/utils/isPendingWalletRequestPermissionError.d.ts

@@ -0,0 +1 @@
+export declare const isPendingWalletRequestPermissionError: (error: any) => any;

package/src/metaMask/utils/isPendingWalletRequestPermissionError.js

@@ -0,0 +1,7 @@
+'use client'
+const isPendingWalletRequestPermissionError = (error) => typeof error === 'object' &&
+    error !== null &&
+    'message' in error &&
+    error.message.includes("Request of type 'wallet_requestPermissions' already pending for origin");
+
+export { isPendingWalletRequestPermissionError };

package/src/metaMask/utils/waitForConnection.cjs

@@ -0,0 +1,10 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const waitForConnection = (provider) => new Promise((resolve) => {
+    provider.once('connect', () => resolve());
+});
+
+exports.waitForConnection = waitForConnection;

package/src/metaMask/utils/waitForConnection.d.ts

@@ -0,0 +1,2 @@
+import { SDKProvider } from '@metamask/sdk';
+export declare const waitForConnection: (provider: SDKProvider) => Promise<void>;

package/src/metaMask/utils/waitForConnection.js

@@ -0,0 +1,6 @@
+'use client'
+const waitForConnection = (provider) => new Promise((resolve) => {
+    provider.once('connect', () => resolve());
+});
+
+export { waitForConnection };

package/src/utils/createInjectedConnector/createInjectedConnector.cjs

@@ -0,0 +1,93 @@
+'use client'
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _tslib = require('../../../_virtual/_tslib.cjs');
+require('@dynamic-labs/utils');
+var InjectedWalletBase = require('../../injected/InjectedWalletBase.cjs');
+require('@dynamic-labs/wallet-connector-core');
+require('../logger.cjs');
+
+const createInjectedConnector = (customConnectorFn) => (props) => {
+    const delegate = customConnectorFn(props);
+    return [
+        class extends InjectedWalletBase.InjectedWalletBase {
+            constructor(props) {
+                super(Object.assign(Object.assign({}, props), { metadata: delegate.metadata }));
+                this.name = delegate.metadata.name;
+            }
+            init() {
+                return _tslib.__awaiter(this, void 0, void 0, function* () {
+                    return delegate.init();
+                });
+            }
+            findProvider() {
+                return delegate.findProvider();
+            }
+            signMessage(messageToSign) {
+                return _tslib.__awaiter(this, void 0, void 0, function* () {
+                    return delegate.signMessage(messageToSign);
+                });
+            }
+            connect() {
+                const _super = Object.create(null, {
+                    connect: { get: () => super.connect }
+                });
+                return _tslib.__awaiter(this, void 0, void 0, function* () {
+                    if (delegate.connect) {
+                        return delegate.connect();
+                    }
+                    return _super.connect.call(this);
+                });
+            }
+            endSession() {
+                const _super = Object.create(null, {
+                    endSession: { get: () => super.endSession }
+                });
+                return _tslib.__awaiter(this, void 0, void 0, function* () {
+                    if (delegate.disconnect) {
+                        yield delegate.disconnect();
+                    }
+                    return _super.endSession.call(this);
+                });
+            }
+            getAddress() {
+                const _super = Object.create(null, {
+                    getAddress: { get: () => super.getAddress }
+                });
+                return _tslib.__awaiter(this, void 0, void 0, function* () {
+                    if (delegate.getAddress) {
+                        return delegate.getAddress();
+                    }
+                    return _super.getAddress.call(this);
+                });
+            }
+            getConnectedAccounts() {
+                const _super = Object.create(null, {
+                    getConnectedAccounts: { get: () => super.getConnectedAccounts }
+                });
+                return _tslib.__awaiter(this, void 0, void 0, function* () {
+                    if (delegate.getConnectedAccounts) {
+                        return delegate.getConnectedAccounts();
+                    }
+                    return _super.getConnectedAccounts.call(this);
+                });
+            }
+            filter() {
+                if (delegate.filter) {
+                    return delegate.filter();
+                }
+                return super.filter();
+            }
+            supportsNetworkSwitching() {
+                if (delegate.supportsNetworkSwitching) {
+                    return delegate.supportsNetworkSwitching();
+                }
+                return super.supportsNetworkSwitching();
+            }
+        },
+    ];
+};
+
+exports.createInjectedConnector = createInjectedConnector;

package/src/utils/createInjectedConnector/createInjectedConnector.d.ts

@@ -0,0 +1,16 @@
+import { WalletConnectorsMethod, WalletMetadata } from '@dynamic-labs/wallet-connector-core';
+import { IEthereum } from '../../types';
+type CustomConnectorDelegate = {
+    metadata: WalletMetadata;
+    init: () => Promise<void>;
+    findProvider: () => IEthereum | undefined;
+    signMessage: (messageToSign: string) => Promise<string>;
+    connect?: () => Promise<void>;
+    disconnect?: () => Promise<void>;
+    filter?: () => boolean;
+    getAddress?: () => Promise<string>;
+    getConnectedAccounts?: () => Promise<string[]>;
+    supportsNetworkSwitching?: () => boolean;
+};
+export declare const createInjectedConnector: (customConnectorFn: (props: any) => CustomConnectorDelegate) => WalletConnectorsMethod;
+export {};