From 07af323f5d90577235535ac3e8b57c8e965e8645 Mon Sep 17 00:00:00 2001 From: Anni Piragauta Date: Tue, 6 Aug 2024 15:20:55 -0500 Subject: [PATCH] fix: keep web3 rlogin address on reload --- src/common/store/constants.ts | 1 + src/common/store/session/actions.ts | 88 +++++++++++++++++------------ src/main.ts | 4 ++ 3 files changed, 57 insertions(+), 36 deletions(-) diff --git a/src/common/store/constants.ts b/src/common/store/constants.ts index 7e5e83fa2..621e38ec6 100644 --- a/src/common/store/constants.ts +++ b/src/common/store/constants.ts @@ -192,6 +192,7 @@ export const SESSION_SET_LOCALE = 'SESSION_SET_LOCALE'; export const SESSION_SET_FEATURES = 'SESSION_SET_FEATURES'; export const SESSION_GET_RBTC_GAS_FEE = 'SESSION_GET_RBTC_GAS_FEE'; export const SESSION_SET_API_VERSION = 'SESSION_SET_API_VERSION'; +export const SESSION_CONNECT_WEB3_FROM_CACHE = 'SESSION_CONNECT_WEB3_FROM_CACHE'; // Pegin tx getters export const WALLET_NAME = 'WALLET_NAME'; diff --git a/src/common/store/session/actions.ts b/src/common/store/session/actions.ts index ded1795d0..2d661c2f8 100644 --- a/src/common/store/session/actions.ts +++ b/src/common/store/session/actions.ts @@ -21,9 +21,44 @@ import { ethers, providers } from 'ethers'; import { markRaw } from 'vue'; import { toUtf8Bytes } from 'ethers/lib/utils'; +const rpcUrls = {}; +const supportedChains = Object.keys(rpcUrls).map(Number); +const customLedgerProviderOptions = ledgerProviderOptions; +customLedgerProviderOptions.connector = async (ProviderPackage, options) => { + const ledgerOptions = options; + ledgerOptions.messageHashed = true; + const provider = new ProviderPackage(ledgerOptions); + await provider.connect(); + return provider; +}; +const rLoginSetup = new RLogin({ + cacheProvider: true, + defaultTheme: 'dark', + providerOptions: { + walletconnect: { + package: WalletConnectProvider, + options: { + rpc: rpcUrls, + }, + }, + 'custom-ledger': customLedgerProviderOptions, + 'custom-trezor': { + ...trezorProviderOptions, + options: { + dPath: "m/44'/37310'/0'/0/0", + manifestEmail: EnvironmentAccessorService + .getEnvironmentVariables().vueAppManifestEmail, + manifestAppUrl: EnvironmentAccessorService + .getEnvironmentVariables().vueAppManifestAppUrl, + }, + }, + }, + rpcUrls, + supportedChains, +}); + export const actions: ActionTree = { [constants.SESSION_CONNECT_WEB3]: ({ commit, state, dispatch }): Promise => { - const rpcUrls = {}; const network = EnvironmentAccessorService.getEnvironmentVariables().vueAppCoin; if (network === constants.BTC_NETWORK_MAINNET) { Object @@ -42,40 +77,7 @@ export const actions: ActionTree = { enumerable: true, }); } - const supportedChains = Object.keys(rpcUrls).map(Number); - const customLedgerProviderOptions = ledgerProviderOptions; - customLedgerProviderOptions.connector = async (ProviderPackage, options) => { - const ledgerOptions = options; - ledgerOptions.messageHashed = true; - const provider = new ProviderPackage(ledgerOptions); - await provider.connect(); - return provider; - }; - const rLogin = state.rLoginInstance === undefined ? new RLogin({ - cacheProvider: false, - defaultTheme: 'dark', - providerOptions: { - walletconnect: { - package: WalletConnectProvider, - options: { - rpc: rpcUrls, - }, - }, - 'custom-ledger': customLedgerProviderOptions, - 'custom-trezor': { - ...trezorProviderOptions, - options: { - dPath: "m/44'/37310'/0'/0/0", - manifestEmail: EnvironmentAccessorService - .getEnvironmentVariables().vueAppManifestEmail, - manifestAppUrl: EnvironmentAccessorService - .getEnvironmentVariables().vueAppManifestAppUrl, - }, - }, - }, - rpcUrls, - supportedChains, - }) : state.rLoginInstance; + const rLogin = state.rLoginInstance === undefined ? rLoginSetup : state.rLoginInstance; return new Promise((resolve, reject) => { rLogin.connect() .then((rLoginResponse) => { @@ -97,11 +99,12 @@ export const actions: ActionTree = { }); }); }, - [constants.WEB3_SESSION_GET_ACCOUNT]: async ({ state, commit }) => { + [constants.WEB3_SESSION_GET_ACCOUNT]: async ({ state, commit, dispatch }) => { const { ethersProvider } = state; if (ethersProvider) { const accounts = await ethersProvider.listAccounts(); commit(constants.SESSION_SET_ACCOUNT, accounts[0]); + dispatch(constants.WEB3_SESSION_ADD_BALANCE); } }, [constants.WEB3_SESSION_ADD_BALANCE]: async ({ commit, state }) => { @@ -186,4 +189,17 @@ export const actions: ActionTree = { }); } }, + [constants.SESSION_CONNECT_WEB3_FROM_CACHE]: async ({ commit, dispatch }) => { + const rLogin = rLoginSetup; + rLogin.connectTo(rLogin.cachedProvider) + .then((rLoginResponse) => { + const provider = new providers.Web3Provider(rLoginResponse.provider); + commit(constants.SESSION_IS_ENABLED, true); + commit(constants.SESSION_SET_RLOGIN, rLoginResponse); + commit(constants.SESSION_SET_RLOGIN_INSTANCE, rLogin); + commit(constants.SESSION_SET_WEB3_INSTANCE, markRaw(provider)); + return dispatch(constants.WEB3_SESSION_GET_ACCOUNT); + }) + .catch(() => dispatch(constants.WEB3_SESSION_CLEAR_ACCOUNT)); + }, }; diff --git a/src/main.ts b/src/main.ts index 39129a2d5..c85c2ecb1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -44,6 +44,10 @@ app.use(vuetify); app.use(store); app.mount('#app'); +if (localStorage.getItem('RLOGIN_CACHED_PROVIDER')) { + await store.dispatch(`web3Session/${constants.SESSION_CONNECT_WEB3_FROM_CACHE}`); +} + if (window.ethereum) { window.ethereum.on('accountsChanged', await store.dispatch(`web3Session/${constants.WEB3_SESSION_GET_ACCOUNT}`)); }