celo-org · aaronmgdr · Jun 3, 2022 · May 31, 2022 · May 31, 2022 · Jun 1, 2022
diff --git a/packages/react-celo/__tests__/connectors/ledger.test.ts b/packages/react-celo/__tests__/connectors/ledger.test.ts
@@ -2,6 +2,10 @@ import { CeloContract } from '@celo/contractkit';
 
 import { Alfajores, localStorageKeys, WalletTypes } from '../../src';
 import { LedgerConnector } from '../../src/connectors';
+import {
+  getLastUsedWalletArgs,
+  getTypedStorageKey,
+} from '../../src/utils/localStorage';
 
 describe('LedgerConnector', () => {
   let connector: LedgerConnector;
@@ -10,36 +14,32 @@ describe('LedgerConnector', () => {
   });
 
   it('remembers info in localStorage', () => {
-    expect(localStorage.getItem(localStorageKeys.lastUsedFeeCurrency)).toEqual(
+    expect(getTypedStorageKey(localStorageKeys.lastUsedFeeCurrency)).toEqual(
       null
     );
 
-    expect(localStorage.getItem(localStorageKeys.lastUsedWalletType)).toEqual(
+    expect(getTypedStorageKey(localStorageKeys.lastUsedWalletType)).toEqual(
       WalletTypes.Ledger
     );
 
-    expect(
-      localStorage.getItem(localStorageKeys.lastUsedWalletArguments)
-    ).toEqual('[0]');
-
-    expect(localStorage.getItem(localStorageKeys.lastUsedNetwork)).toEqual(
+    expect(getTypedStorageKey(localStorageKeys.lastUsedNetwork)).toEqual(
       'Alfajores'
     );
+
+    expect(getLastUsedWalletArgs()).toEqual([0]);
   });
 
   describe('close()', () => {
     it('clears out localStorage', () => {
       connector.close();
 
-      expect(
-        localStorage.getItem(localStorageKeys.lastUsedFeeCurrency)
-      ).toEqual(null);
+      expect(getTypedStorageKey(localStorageKeys.lastUsedFeeCurrency)).toEqual(
+        null
+      );
 
-      expect(
-        localStorage.getItem(localStorageKeys.lastUsedWalletArguments)
-      ).toEqual(null);
+      expect(getLastUsedWalletArgs()).toEqual(null);
 
-      expect(localStorage.getItem(localStorageKeys.lastUsedNetwork)).toEqual(
+      expect(getTypedStorageKey(localStorageKeys.lastUsedNetwork)).toEqual(
         null
       );
     });

diff --git a/packages/react-celo/__tests__/connectors/metamask.test.ts b/packages/react-celo/__tests__/connectors/metamask.test.ts
@@ -1,9 +1,10 @@
 import { CeloContract } from '@celo/contractkit/lib/base';
 import { generateTestingUtils } from 'eth-testing';
 
+import { localStorageKeys } from '../../src';
 import { MetaMaskConnector } from '../../src/connectors';
-import { Alfajores, Baklava, localStorageKeys } from '../../src/constants';
-import localStorage from '../../src/utils/localStorage';
+import { Alfajores, Baklava } from '../../src/constants';
+import { getTypedStorageKey } from '../../src/utils/localStorage';
 
 const ACCOUNT = '0xf61B443A155b07D2b2cAeA2d99715dC84E839EEf';
 
@@ -42,7 +43,7 @@ describe('MetaMaskConnector', () => {
     it('sets network in local storage and in connection', async () => {
       await connector.updateKitWithNetwork(Baklava);
 
-      expect(localStorage.getItem(localStorageKeys.lastUsedNetwork)).toEqual(
+      expect(getTypedStorageKey(localStorageKeys.lastUsedNetwork)).toEqual(
         Baklava.name
       );
     });

diff --git a/packages/react-celo/__tests__/connectors/private-key.test.ts b/packages/react-celo/__tests__/connectors/private-key.test.ts
@@ -2,6 +2,10 @@ import { CeloContract } from '@celo/contractkit';
 
 import { Alfajores, localStorageKeys } from '../../src';
 import { PrivateKeyConnector } from '../../src/connectors';
+import {
+  getLastUsedWalletArgs,
+  getTypedStorageKey,
+} from '../../src/utils/localStorage';
 
 const TEST_KEY =
   '1234567890abcdef1234567890abcdef1234567890abcdef1234567890abbdef';
@@ -31,13 +35,11 @@ describe('PrivateKeyConnector', () => {
     });
 
     it('sets the private key in locale storage', () => {
-      expect(
-        localStorage.getItem(localStorageKeys.lastUsedWalletArguments)
-      ).toEqual(JSON.stringify([TEST_KEY]));
+      expect(getLastUsedWalletArgs()).toEqual([TEST_KEY]);
     });
 
     it('sets the last network in local storage', () => {
-      expect(localStorage.getItem(localStorageKeys.lastUsedNetwork)).toEqual(
+      expect(getTypedStorageKey(localStorageKeys.lastUsedNetwork)).toEqual(
         Alfajores.name
       );
     });
@@ -54,15 +56,15 @@ describe('PrivateKeyConnector', () => {
 
       connector.close();
 
-      expect(
-        localStorage.getItem(localStorageKeys.lastUsedFeeCurrency)
      ).toEqual(null);
+      expect(getTypedStorageKey(localStorageKeys.lastUsedFeeCurrency)).toEqual(
+        null
+      );
 
       expect(
-        localStorage.getItem(localStorageKeys.lastUsedWalletArguments)
+        getTypedStorageKey(localStorageKeys.lastUsedWalletArguments)
       ).toEqual(null);
 
-      expect(localStorage.getItem(localStorageKeys.lastUsedNetwork)).toEqual(
+      expect(getTypedStorageKey(localStorageKeys.lastUsedNetwork)).toEqual(
         null
       );
     });

diff --git a/packages/react-celo/__tests__/utils/react-celo-reducer.test.ts b/packages/react-celo/__tests__/utils/react-celo-reducer.test.ts
@@ -1,8 +1,10 @@
 import { CeloContract } from '@celo/contractkit';
 
+import { localStorageKeys } from '../../src';
 import { UnauthenticatedConnector } from '../../src/connectors';
-import { Alfajores, Baklava, localStorageKeys } from '../../src/constants';
+import { Alfajores, Baklava } from '../../src/constants';
 import { celoReactReducer, ReducerState } from '../../src/react-celo-reducer';
+import { getTypedStorageKey } from '../../src/utils/localStorage';
 
 const initialState: ReducerState = {
   connector: new UnauthenticatedConnector(Alfajores),
@@ -34,7 +36,7 @@ describe('setAddress', () => {
     expect(newState).toEqual({ ...initialState, address: 'test-address' });
   });
   it('saves the address in localStorage', () => {
-    expect(localStorage.getItem(localStorageKeys.lastUsedAddress)).toEqual(
+    expect(getTypedStorageKey(localStorageKeys.lastUsedAddress)).toEqual(
       'test-address'
     );
   });

diff --git a/packages/react-celo/src/connectors/connectors.ts b/packages/react-celo/src/connectors/connectors.ts
@@ -1,4 +1,3 @@
-import { ReadOnlyWallet } from '@celo/connect/lib';
 import { CeloContract, CeloTokenContract } from '@celo/contractkit/lib/base';
 import {
   MiniContractKit,
@@ -20,8 +19,13 @@ import { BigNumber } from 'bignumber.js';
 import { localStorageKeys, WalletTypes } from '../constants';
 import { Connector, Maybe, Network } from '../types';
 import { getEthereum, getInjectedEthereum } from '../utils/ethereum';
-import { clearPreviousConfig } from '../utils/helpers';
-import localStorage from '../utils/localStorage';
+import {
+  clearPreviousConfig,
+  forgetConnection,
+  setLastUsedWalletArgs,
+  setTypedStorageKey,
+  WalletArgs,
+} from '../utils/localStorage';
 import { switchToCeloNetwork } from '../utils/metamask';
 
 type Web3Type = Parameters<typeof newKitFromWeb3>[0];
@@ -43,9 +47,7 @@ export class UnauthenticatedConnector implements Connector {
   }
 
   persist() {
-    localStorage.removeItem(localStorageKeys.lastUsedWalletType);
-    localStorage.removeItem(localStorageKeys.lastUsedWalletArguments);
-    localStorage.removeItem(localStorageKeys.lastUsedNetwork);
+    forgetConnection();
   }
 
   initialise(): this {
@@ -123,15 +125,9 @@ export class LedgerConnector implements Connector {
     private index: number,
     public feeCurrency: CeloTokenContract
   ) {
-    localStorage.setItem(
-      localStorageKeys.lastUsedWalletType,
-      WalletTypes.Ledger
-    );
-    localStorage.setItem(
-      localStorageKeys.lastUsedWalletArguments,
-      JSON.stringify([index])
-    );
-    localStorage.setItem(localStorageKeys.lastUsedNetwork, network.name);
+    setLastUsedWalletArgs([index]);
+    setTypedStorageKey(localStorageKeys.lastUsedWalletType, WalletTypes.Ledger);
+    setTypedStorageKey(localStorageKeys.lastUsedNetwork, network.name);
     this.kit = newKit(network.rpcUrl);
   }
 
@@ -260,7 +256,7 @@ export class InjectedConnector implements Connector {
   }
 
   async updateKitWithNetwork(network: Network): Promise<void> {
-    localStorage.setItem(localStorageKeys.lastUsedNetwork, network.name);
+    setTypedStorageKey(localStorageKeys.lastUsedNetwork, network.name);
     this.network = network;
     await this.initialise();
   }
@@ -387,7 +383,7 @@ export class WalletConnectConnector implements Connector {
     // version == 1
     //   ? new WalletConnectWalletV1(options as WalletConnectWalletOptionsV1)
     //   : new WalletConnectWallet(options as WalletConnectWalletOptions);
-    this.kit = newKit(network.rpcUrl, wallet as ReadOnlyWallet);
+    this.kit = newKit(network.rpcUrl, wallet);
     this.version = version;
   }
 
@@ -514,20 +510,17 @@ function persist({
 }: {
   walletType?: WalletTypes;
   walletId?: string;
-  options?: unknown[];
+  options?: WalletArgs;
   network?: Network;
 }): void {
   if (walletType) {
-    localStorage.setItem(localStorageKeys.lastUsedWalletType, walletType);
+    setTypedStorageKey(localStorageKeys.lastUsedWalletType, walletType);
   }
   if (walletId) {
-    localStorage.setItem(localStorageKeys.lastUsedWalletId, walletId);
+    setTypedStorageKey(localStorageKeys.lastUsedWalletId, walletId);
   }
   if (network) {
-    localStorage.setItem(localStorageKeys.lastUsedNetwork, network.name);
+    setTypedStorageKey(localStorageKeys.lastUsedNetwork, network.name);
   }
-  localStorage.setItem(
-    localStorageKeys.lastUsedWalletArguments,
-    JSON.stringify(options)
-  );
+  setLastUsedWalletArgs(options);
 }
diff --git a/packages/react-celo/src/constants.tsx b/packages/react-celo/src/constants.tsx
@@ -22,14 +22,14 @@ import {
   WALLETCONNECT,
 } from './walletIcons';
 
-export const localStorageKeys = {
-  lastUsedAddress: 'react-celo/last-used-address',
-  lastUsedNetwork: 'react-celo/last-used-network',
-  lastUsedWalletType: 'react-celo/last-used-wallet',
-  lastUsedWalletId: 'react-celo/last-used-wallet-id',
-  lastUsedWalletArguments: 'react-celo/last-used-wallet-arguments',
-  lastUsedFeeCurrency: 'react-celo/last-used-fee-currency',
-};
+export enum localStorageKeys {
+  lastUsedAddress = 'react-celo/last-used-address',
+  lastUsedNetwork = 'react-celo/last-used-network',
+  lastUsedWalletType = 'react-celo/last-used-wallet',
+  lastUsedWalletId = 'react-celo/last-used-wallet-id',
+  lastUsedWalletArguments = 'react-celo/last-used-wallet-arguments',
+  lastUsedFeeCurrency = 'react-celo/last-used-fee-currency',
+}
 
 export enum SupportedProviders {
   CeloExtensionWallet = 'Celo Extension Wallet',

diff --git a/packages/react-celo/src/react-celo-reducer.ts b/packages/react-celo/src/react-celo-reducer.ts
@@ -1,10 +1,13 @@
 import { CeloTokenContract } from '@celo/contractkit/lib/base';
 
 import { UnauthenticatedConnector } from './connectors';
-import { localStorageKeys } from './constants';
+import { localStorageKeys as lsKeys } from './constants';
 import { Connector, Dapp, Maybe, Network, Theme } from './types';
-import { clearPreviousConfig } from './utils/helpers';
-import localStorage from './utils/localStorage';
+import {
+  clearPreviousConfig,
+  removeLastUsedAddress,
+  setTypedStorageKey,
+} from './utils/localStorage';
 
 export function celoReactReducer(
   state: ReducerState,
@@ -22,9 +25,9 @@ export function celoReactReducer(
         return state;
       }
       if (action.payload) {
-        localStorage.setItem(localStorageKeys.lastUsedAddress, action.payload);
+        setTypedStorageKey(lsKeys.lastUsedAddress, action.payload);
       } else {
-        localStorage.removeItem(localStorageKeys.lastUsedAddress);
+        removeLastUsedAddress();
       }
       return {
         ...state,
@@ -34,17 +37,14 @@ export function celoReactReducer(
       if (action.payload === state.network) {
         return state;
       }
-      localStorage.setItem(
-        localStorageKeys.lastUsedNetwork,
-        action.payload.name
-      );
+      setTypedStorageKey(lsKeys.lastUsedNetwork, action.payload.name);
       return {
         ...state,
         network: action.payload,
       };
 
     case 'setConnector':
-      localStorage.removeItem(localStorageKeys.lastUsedAddress);
+      removeLastUsedAddress();
       return {
         ...state,
         connector: action.payload,
@@ -55,16 +55,13 @@ export function celoReactReducer(
       if (action.payload === state.feeCurrency) {
         return state;
       }
-      localStorage.setItem(
-        localStorageKeys.lastUsedFeeCurrency,
-        action.payload
-      );
+      setTypedStorageKey(lsKeys.lastUsedFeeCurrency, action.payload);
       return { ...state, feeCurrency: action.payload };
     case 'initialisedConnector': {
       const newConnector = action.payload;
       const address = newConnector.kit.connection.defaultAccount ?? null;
       if (address) {
-        localStorage.setItem(localStorageKeys.lastUsedAddress, address);
+        setTypedStorageKey(lsKeys.lastUsedAddress, address);
       }
       return {
         ...state,

diff --git a/packages/react-celo/src/use-celo-methods.ts b/packages/react-celo/src/use-celo-methods.ts
@@ -4,18 +4,15 @@ import { useCallback } from 'react';
 import { isMobile } from 'react-device-detect';
 
 import { CONNECTOR_TYPES } from './connectors';
-import {
-  localStorageKeys,
-  STATIC_NETWORK_WALLETS,
-  WalletTypes,
-} from './constants';
+import { STATIC_NETWORK_WALLETS, WalletTypes } from './constants';
 import {
   ContractCacheBuilder,
   useContractsCache,
 } from './ContractCacheBuilder';
 import { Dispatcher } from './react-celo-provider';
 import { Connector, Network, Theme } from './types';
 import { contrastCheck, fixTheme } from './utils/colors';
+import { getLastUsedWalletArgs } from './utils/localStorage';
 
 export function useCeloMethods(
   {
@@ -122,9 +119,7 @@ export function useCeloMethods(
       }
       if (network === newNetwork) return;
       if (connector.initialised) {
-        const connectorArgs = JSON.parse(
-          localStorage.getItem(localStorageKeys.lastUsedWalletArguments) || '[]'
-        ) as unknown[];
+        const connectorArgs = getLastUsedWalletArgs() || [];
         await connector.close();
         const ConnectorConstructor = CONNECTOR_TYPES[connector.type];
         const newConnector = new ConnectorConstructor(