@dynamic-labs/ethereum 2.0.0-alpha.2 → 2.0.0-alpha.20

package/src/walletConnect/walletConnect.js

@@ -1,100 +1,416 @@
-import { __rest, __awaiter } from '../../_virtual/_tslib.js';
-import WalletConnectProvider from '@walletconnect/ethereum-provider';
+import { __awaiter } from '../../_virtual/_tslib.js';
+import Provider from '@walletconnect/universal-provider';
+import EventEmitter from 'eventemitter3';
 import { createWalletClient, custom } from 'viem';
-import { getDeepLink } from '@dynamic-labs/wallet-connector-core';
+import { toAccount } from 'viem/accounts';
+import { DynamicError, sleep, isMobile } from '@dynamic-labs/utils';
 import { getWalletBookWallet } from '@dynamic-labs/wallet-book';
-import { isMobile, DynamicError } from '@dynamic-labs/utils';
+import { logger, performPlatformSpecificConnectionMethod, getDeepLink } from '@dynamic-labs/wallet-connector-core';
+import { chainsMap } from '@dynamic-labs/viem-utils';
 import { EthWalletConnector } from '../EthWalletConnector.js';
-import { INFURA_ID } from '../constants.js';
-import { initClient, setupWalletConnectEventListeners, teardownWalletConnectEventListeners, fetchWalletConnectEVMPublicAddress, signWalletConnectPersonalMessage, killWalletConnectSession } from './client/client.js';
+import { parseIntSafe } from '../utils/parseIntSafe.js';
 
+const activeAccountKey = (walletName) => `dynamic-wc2-active-account-${walletName}`;
+const sessionTopicKey = (walletName) => `dynamic-wc2-session-topic-${walletName}`;
+const swicthedNetworkKey = (walletName) => `dynamic-wc2-switched-network-${walletName}`;
+const currentChainKey = (walletName) => `dynamic-wc2-current-chain-${walletName}`;
+const ee = new EventEmitter();
 class WalletConnect extends EthWalletConnector {
-    constructor(_a) {
-        var { walletConnectV1Bridge, walletName } = _a, props = __rest(_a, ["walletConnectV1Bridge", "walletName"]);
-        super(props);
+    constructor(opts) {
+        var _a;
+        super(opts);
         this.supportedChains = ['EVM', 'ETH'];
         this.connectedChain = 'EVM';
-        this.bridge = 'https://bridge.walletconnect.org';
+        this.isInitialized = false;
         this.canConnectViaQrCode = true;
         this.isWalletConnect = true;
-        this.switchNetworkOnlyFromWallet = false;
-        this.name = walletName;
-        if (walletConnectV1Bridge) {
-            this.bridge = walletConnectV1Bridge;
+        this.preferredChains = [];
+        // When trying to switch network for MetaMask, the switch promise gets stuck
+        // if the switch got trigged once already, so we need to keep track of that
+        this._hasSwitchedNetwork = false;
+        this.name = opts.walletName;
+        this.projectId = opts.projectId;
+        this.deepLinkPreference = opts.deepLinkPreference || 'native';
+        this.preferredChains = opts.walletConnectPreferredChains || [];
+        this.hasSwitchedNetwork =
+            (_a = Boolean(localStorage.getItem(this.swicthedNetworkKey))) !== null && _a !== void 0 ? _a : false;
+        const lsCurrentChain = localStorage.getItem(this.currentChainKey);
+        this.currentChainId = lsCurrentChain
+            ? parseIntSafe(lsCurrentChain)
+            : undefined;
+    }
+    getMappedChains() {
+        return (this.evmNetworks
+            // Filters out palm that crashes Trust Wallet
+            .filter((network) => network.chainId !== 11297108109)
+            .map((network) => `eip155:${network.chainId}`));
+    }
+    getMappedChainsByPreferredOrder() {
+        const allChains = this.getMappedChains();
+        const reorderedChains = this.preferredChains.filter((chain) => allChains.includes(chain));
+        const remainingChains = allChains.filter((chain) => !this.preferredChains.includes(chain));
+        return [...reorderedChains, ...remainingChains];
+    }
+    initConnection() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { provider } = WalletConnect;
+            if (!provider) {
+                throw new DynamicError('No provider found (init connection)');
+            }
+            // this means there is already a connection in progress, so don't call connect again
+            if (provider === null || provider === void 0 ? void 0 : provider.uri) {
+                return;
+            }
+            const optionalNamespaces = {
+                eip155: {
+                    chains: this.getMappedChainsByPreferredOrder(),
+                    events: ['chainChanged', 'accountsChanged'],
+                    methods: [
+                        'eth_chainId',
+                        'eth_signTypedData',
+                        'eth_signTransaction',
+                        'eth_sign',
+                        'personal_sign',
+                        'eth_sendTransaction',
+                        'eth_signTypedData_v4',
+                        'wallet_switchEthereumChain',
+                        'wallet_addEthereumChain',
+                    ],
+                    rpcMap: this.evmNetworkRpcMap(),
+                },
+            };
+            provider
+                .connect({
+                optionalNamespaces,
+            })
+                .catch((e) => {
+                logger.error(e);
+                ee.emit('walletconnect_connection_failed', e);
+            });
+        });
+    }
+    createInitProviderPromise() {
+        return __awaiter(this, void 0, void 0, function* () {
+            WalletConnect.provider = yield Provider.init({
+                logger: logger.logLevel.toLowerCase() === 'debug' ? 'debug' : undefined,
+                projectId: this.projectId,
+            });
+            this.teardownEventListeners();
+            this.setupEventListeners();
+        });
+    }
+    // We need to add a gate to this method since we will be calling it asynchronously
+    // from different places (such as setShowAuthFlow), which means there's a chance for
+    // a race condition to happen where createInitProviderPromise is called multiple times
+    initProvider() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const { provider } = WalletConnect;
+            if (!provider) {
+                if (this.initializePromise === undefined) {
+                    this.initializePromise = this.createInitProviderPromise();
+                }
+                yield this.initializePromise;
+            }
+        });
+    }
+    refreshSession() {
+        var _a, _b, _c, _d, _e;
+        if ((_b = (_a = WalletConnect.provider) === null || _a === void 0 ? void 0 : _a.session) === null || _b === void 0 ? void 0 : _b.topic) {
+            if (localStorage.getItem(this.sessionTopicKey) ===
+                ((_d = (_c = WalletConnect.provider) === null || _c === void 0 ? void 0 : _c.session) === null || _d === void 0 ? void 0 : _d.topic)) {
+                this.session = WalletConnect.provider.session;
+                this.activeAccount = ((_e = localStorage.getItem(this.activeAccountKey)) !== null && _e !== void 0 ? _e : undefined);
+            }
         }
-        this.deepLinkPreference = props.deepLinkPreference || 'native';
     }
-    getClient() {
-        if (this.client) {
-            return this.client;
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.initProvider();
+            yield this.initConnection();
+            this.isInitialized = true;
+        });
+    }
+    get sessionTopicKey() {
+        return sessionTopicKey(this.key);
+    }
+    get activeAccountKey() {
+        return activeAccountKey(this.key);
+    }
+    get swicthedNetworkKey() {
+        return swicthedNetworkKey(this.key);
+    }
+    get currentChainKey() {
+        return currentChainKey(this.key);
+    }
+    set currentChainId(value) {
+        this._currentChainId = value;
+        if (value) {
+            localStorage.setItem(this.currentChainKey, value.toString());
+        }
+        else {
+            localStorage.removeItem(this.currentChainKey);
         }
-        this.client = initClient(this.key, this.bridge, this.clientOptions);
-        return this.client;
     }
-    supportsNetworkSwitching() {
-        if (this.connectedChain === 'EVM') {
-            return true;
+    get currentChainId() {
+        return this._currentChainId;
+    }
+    set hasSwitchedNetwork(value) {
+        this._hasSwitchedNetwork = value;
+        if (value) {
+            localStorage.setItem(this.swicthedNetworkKey, value.toString());
         }
         else {
-            const client = this.getClient();
-            return Boolean(client === null || client === void 0 ? void 0 : client.chainId);
+            localStorage.removeItem(this.swicthedNetworkKey);
         }
     }
+    get hasSwitchedNetwork() {
+        return this._hasSwitchedNetwork;
+    }
+    supportsNetworkSwitching() {
+        return true;
+    }
     setupEventListeners() {
-        setupWalletConnectEventListeners(this, this.getClient());
+        if (!WalletConnect.provider) {
+            return;
+        }
+        WalletConnect.provider.client.on('session_event', ({ params }) => {
+            logger.debug('session_event was called', { params });
+            if (!params || !params.event) {
+                logger.debug('session_event was called without params or params.event');
+                return;
+            }
+            const { name, data } = params.event;
+            if (name === 'chainChanged') {
+                const chainId = parseIntSafe(data);
+                if (chainId === undefined) {
+                    logger.debug(`received unexpected data for chainChanged: ${data} with type ${typeof data}}`);
+                    return;
+                }
+                this.currentChainId = chainId;
+                this.emit('chainChange', { chain: String(chainId) });
+                // When a user switches network from their wallet, we need the provider to change network
+                // such that any future calls to `getNetwork` will return the correct network
+                this.switchNetwork({ networkChainId: chainId });
+            }
+            else if (name === 'accountsChanged') {
+                if (!Array.isArray(data)) {
+                    logger.debug(`received unexpected data for accountsChanged: ${data} with type ${typeof data}}`);
+                    return;
+                }
+                // eslint-disable-next-line prefer-destructuring
+                const account = data[0].split(':')[2];
+                this.setActiveAccount(account);
+            }
+        });
+        WalletConnect.provider.client.on('session_delete', () => __awaiter(this, void 0, void 0, function* () {
+            this.endSession();
+            this.emit('disconnect');
+        }));
     }
     teardownEventListeners() {
-        teardownWalletConnectEventListeners(this.getClient());
-    }
-    getWalletClient() {
-        const client = this.getClient();
-        return client
-            ? createWalletClient({
-                transport: custom(new WalletConnectProvider({
-                    connector: client,
-                    infuraId: INFURA_ID,
-                    rpc: this.evmNetworkRpcMap(),
-                })),
-            })
-            : undefined;
+        if (!WalletConnect.provider) {
+            return;
+        }
+        WalletConnect.provider.client.removeAllListeners('session_event');
+        WalletConnect.provider.client.removeAllListeners('session_delete');
+    }
+    getWalletClient(chainId) {
+        if (!WalletConnect.provider) {
+            return;
+        }
+        return createWalletClient({
+            account: this.activeAccount ? toAccount(this.activeAccount) : undefined,
+            chain: chainId ? chainsMap[chainId] : undefined,
+            transport: custom(WalletConnect.provider),
+        });
     }
-    fetchPublicAddress(opts) {
+    getAddress(opts) {
+        var _a, _b;
         return __awaiter(this, void 0, void 0, function* () {
-            return fetchWalletConnectEVMPublicAddress(getWalletBookWallet(this.walletBook, this.key), this.getClient(), this.deepLinkPreference, Object.assign(Object.assign({}, opts), { onConnect: (payload) => {
-                    var _a, _b;
-                    (_a = opts === null || opts === void 0 ? void 0 : opts.onConnect) === null || _a === void 0 ? void 0 : _a.call(opts, payload);
-                    this.connectedChain = payload.params[0].chainId ? 'EVM' : 'SOL';
-                    if ((_b = payload.params[0].accounts) === null || _b === void 0 ? void 0 : _b.length) {
-                        this.emit('accountChange', {
-                            accounts: payload.params[0].accounts,
-                        });
+            if (this.activeAccount) {
+                return this.activeAccount;
+            }
+            if (!WalletConnect.provider || !((_a = WalletConnect.provider) === null || _a === void 0 ? void 0 : _a.uri)) {
+                logger.debug('No WC2 provider found, re-initializing...');
+                yield this.endSession();
+                yield this.init();
+                // sleep 1 s to wait for connect call to finish
+                // the connect call isn't await-ed because it only resolves once
+                // the connection is established, but we need to wait for it to
+                // finish setting up the connection URI and making it available
+                // on the provider
+                yield sleep(1000);
+                if (!WalletConnect.provider || !((_b = WalletConnect.provider) === null || _b === void 0 ? void 0 : _b.uri)) {
+                    logger.debug('No WC2 provider found, escaping and throwing error');
+                    throw new DynamicError('No provider found');
+                }
+            }
+            const metadata = getWalletBookWallet(this.walletBook, this.key);
+            performPlatformSpecificConnectionMethod(WalletConnect.provider.uri, metadata, {
+                onDesktopUri: opts === null || opts === void 0 ? void 0 : opts.onDesktopUri,
+                onDisplayUri: opts === null || opts === void 0 ? void 0 : opts.onDisplayUri,
+            }, this.deepLinkPreference);
+            return new Promise((resolve, reject) => {
+                if (!WalletConnect.provider) {
+                    reject(new DynamicError('No provider found'));
+                    return;
+                }
+                const onFail = () => {
+                    const error = new DynamicError('Connection rejected. Please try again.');
+                    error.code = 'connection_rejected';
+                    if (WalletConnect.provider) {
+                        WalletConnect.provider.uri = undefined;
+                        // this is needed for mobile to work when using universal links.
+                        // if the user cancels the connection, we need to re-initialize the provider
+                        // so that the async work is done ahead of time, before the user tries to connect again,
+                        // otherwise they will trigger the iOS bug where they are redirected to the app store
+                        this.init();
                     }
-                } }));
+                    reject(error);
+                    // We must clean up the onConnect and onFail listeners
+                    // whenever the connection attempt either succeeds or fails
+                    cleanupListeners();
+                };
+                const onConnect = ({ session }) => {
+                    if (!session) {
+                        reject(new DynamicError('No session found'));
+                    }
+                    this.setSession(session);
+                    this.setActiveAccount(session.namespaces.eip155.accounts[0].split(':')[2]);
+                    resolve(this.activeAccount);
+                    // We must clean up the onConnect and onFail listeners
+                    // whenever the connection attempt either succeeds or fails
+                    cleanupListeners();
+                };
+                const cleanupListeners = () => {
+                    var _a;
+                    ee.off('walletconnect_connection_failed', onFail);
+                    (_a = WalletConnect.provider) === null || _a === void 0 ? void 0 : _a.off('connect', onConnect);
+                };
+                ee.on('walletconnect_connection_failed', onFail);
+                WalletConnect.provider.on('connect', onConnect);
+            });
+        });
+    }
+    /**
+     * WalletConnect V2 will fail to send the sign message request if the chainId
+     * is not the same as the one in the session. This method will wait for the
+     * chainId to change and then retry the sign message request.
+     *
+     * Otherwise it will just return the result of the sign message request.
+     *
+     * @param signMessageFn - Function to sign message with provider
+     * @param messageToSign - Message to sign
+     * @returns
+     */
+    waitForSignMessage(signMessageFn, messageToSign) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const raceConditionPromise = new Promise((resolve) => {
+                // Create listener for chain change event
+                this.on('chainChange', () => resolve({ success: false }));
+                signMessageFn(messageToSign).then((result) => resolve({ signedMessage: result, success: true }));
+            });
+            const signedMessageResult = yield raceConditionPromise;
+            if (signedMessageResult.success === false) {
+                return signMessageFn(messageToSign);
+            }
+            return signedMessageResult.signedMessage;
         });
     }
     getDeepLink() {
         var _a;
-        const wallet = getWalletBookWallet(this.walletBook, this.key);
-        if (!isMobile() && !((_a = wallet.desktop) === null || _a === void 0 ? void 0 : _a.native)) {
-            return undefined;
+        if (!this.session) {
+            return;
         }
-        return getDeepLink({
-            metadata: wallet,
+        const metadata = getWalletBookWallet(this.walletBook, this.key);
+        const deepLink = getDeepLink({
+            metadata,
             mode: 'regular',
             preference: this.deepLinkPreference,
-            uri: this.getClient().uri,
+            uri: (_a = WalletConnect.provider) === null || _a === void 0 ? void 0 : _a.uri,
         });
+        if (!deepLink) {
+            return;
+        }
+        // we need to include the session topic here because it helps the wallet
+        // auto redirect back to the dapp after signing
+        return `${deepLink}?sessionTopic=${this.session.topic}`;
     }
     signMessage(messageToSign) {
         return __awaiter(this, void 0, void 0, function* () {
-            return signWalletConnectPersonalMessage(messageToSign, getWalletBookWallet(this.walletBook, this.key), this.getClient(), this.deepLinkPreference, 
-            // don't call getPublicClient until we really need to
-            () => __awaiter(this, void 0, void 0, function* () { return this.getPublicClient(); }));
+            if (!this.session) {
+                throw new DynamicError('no session');
+            }
+            const web3Provider = this.getWalletClient();
+            if (!web3Provider) {
+                throw new DynamicError('No WalletConnect provider found to handle signing');
+            }
+            const deepLink = this.getDeepLink();
+            if (isMobile() && deepLink) {
+                window.location.href = deepLink;
+            }
+            const signMessageFn = (messageToSign) => __awaiter(this, void 0, void 0, function* () {
+                const { activeAccount } = this;
+                if (!activeAccount) {
+                    return;
+                }
+                return web3Provider.signMessage({
+                    account: activeAccount,
+                    message: messageToSign,
+                });
+            });
+            const response = yield this.waitForSignMessage(signMessageFn, messageToSign);
+            return response;
         });
     }
+    clearActiveAccount() {
+        localStorage.removeItem(this.activeAccountKey);
+        this.activeAccount = undefined;
+    }
+    clearSession() {
+        localStorage.removeItem(this.sessionTopicKey);
+        this.session = undefined;
+    }
+    setActiveAccount(account) {
+        localStorage.setItem(this.activeAccountKey, account);
+        this.activeAccount = account;
+        this.emit('accountChange', { accounts: [account] });
+    }
+    setSession(session) {
+        localStorage.setItem(this.sessionTopicKey, session.topic);
+        this.session = session;
+    }
     endSession() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.clearActiveAccount();
+            this.clearSession();
+            this.hasSwitchedNetwork = false;
+            this.currentChainId = undefined;
+            if (!((_a = WalletConnect.provider) === null || _a === void 0 ? void 0 : _a.session)) {
+                return;
+            }
+            try {
+                yield WalletConnect.provider.disconnect();
+                // We must unset provider on logout so that a new session can be established
+                // If we don't then the provider will still have the old session and will hang
+                WalletConnect.provider = undefined;
+            }
+            catch (e) {
+                logger.debug(e);
+            }
+        });
+    }
+    getNetwork() {
+        const _super = Object.create(null, {
+            getNetwork: { get: () => super.getNetwork }
+        });
         return __awaiter(this, void 0, void 0, function* () {
-            killWalletConnectSession(this.getClient());
+            if (this.currentChainId) {
+                return this.currentChainId;
+            }
+            yield this.initProvider();
+            return _super.getNetwork.call(this);
         });
     }
     providerSwitchNetwork({ network, provider, }) {
@@ -102,45 +418,67 @@ class WalletConnect extends EthWalletConnector {
             providerSwitchNetwork: { get: () => super.providerSwitchNetwork }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            const client = this.getClient();
             const currentNetworkId = yield this.getNetwork();
             if (currentNetworkId && currentNetworkId === network.chainId) {
                 return;
             }
-            if (this.switchNetworkOnlyFromWallet !== undefined &&
-                this.switchNetworkOnlyFromWallet) {
+            if (this.switchNetworkOnlyFromWallet) {
                 throw new DynamicError('Network switching is only supported through the wallet');
             }
             if (!this.supportsNetworkSwitching()) {
                 throw new DynamicError('Network switching not supported');
             }
-            if (!client) {
-                throw new DynamicError('Client not found');
+            if (!provider) {
+                throw new DynamicError('Provider not found');
             }
-            if (isMobile()) {
-                const deepLink = getDeepLink({
-                    metadata: getWalletBookWallet(this.walletBook, this.key),
-                    mode: 'regular',
-                    preference: this.deepLinkPreference,
-                    uri: client.uri,
-                });
-                window.location.href = deepLink;
-            }
-            return _super.providerSwitchNetwork.call(this, { network, provider });
+            yield _super.providerSwitchNetwork.call(this, { network, provider });
+            this.currentChainId = network.chainId;
+            this.hasSwitchedNetwork = true;
+            this.emit('chainChange', { chain: String(network.chainId) });
         });
     }
     getConnectedAccounts() {
         return __awaiter(this, void 0, void 0, function* () {
-            const client = this.getClient();
-            if (!client.connected)
+            if (this.isInitialized === false) {
+                yield this.initProvider();
+                this.refreshSession();
+                this.isInitialized = true;
+            }
+            if (!this.activeAccount) {
                 return [];
-            return client.accounts;
+            }
+            return [this.activeAccount];
         });
     }
-    getSession() {
+    isMetaMask() {
+        var _a, _b, _c, _d, _e;
+        return ((_e = (_d = (_c = (_b = (_a = this.session) === null || _a === void 0 ? void 0 : _a.peer) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.name) === null || _d === void 0 ? void 0 : _d.toLowerCase().startsWith('metamask')) !== null && _e !== void 0 ? _e : false);
+    }
+    getSupportedNetworks() {
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            return (_a = this.client) === null || _a === void 0 ? void 0 : _a.session;
+            // MM allows you to switch to any network the first time, even if it's not enabled in MM
+            // so we should consider all networks as supported if network switching hasn't been triggered yet
+            if (this.isMetaMask() && !this.hasSwitchedNetwork) {
+                return this.evmNetworks.map((network) => network.chainId.toString());
+            }
+            yield this.initProvider();
+            this.refreshSession();
+            if (!this.session) {
+                return [];
+            }
+            const chains = [];
+            // Some wallet (i.e ZenGo) use namespaces.account to list supported chains
+            // while others use keys within the namespaces object
+            Object.keys(this.session.namespaces).forEach((key) => {
+                if (key.startsWith('eip155:')) {
+                    chains.push(key.split(':')[1]);
+                }
+            });
+            (_a = this.session.namespaces.eip155) === null || _a === void 0 ? void 0 : _a.accounts.forEach((account) => chains.push(account.split(':')[1]));
+            return chains.length
+                ? chains
+                : this.evmNetworks.map((network) => network.chainId.toString());
         });
     }
 }