Fix metamask re-connection

src/App.svelte

@@ -23,6 +23,8 @@
       // from a previous session.
       if (cfg.walletConnect.client.connected) {
         await state.connectWalletConnect(cfg);
+      } else if (cfg.metamask.connected) {
+        await state.connectMetamask(cfg);
       }
     }
     return cfg;

src/components/Modal/ConnectWallet.svelte

@@ -68,7 +68,7 @@
     </div>
 
     <div slot="actions">
-      <button class="secondary tiny text-small" on:click={onClickConnect} disabled={!config.metamaskSigner}>
+      <button class="secondary tiny text-small" on:click={onClickConnect} disabled={!config.metamask.signer}>
         Connect with Metamask
       </button>
       <button class="text tiny text-small" on:click={onClose}>

src/config.ts

@@ -41,7 +41,14 @@ export class Config {
     signer: WalletConnectSigner;
     state: Writable<WalletConnectState>;
   };
-  metamaskSigner: ethers.Signer & TypedDataSigner | null;
+  metamask: {
+    connected: true;
+    signer: ethers.Signer & TypedDataSigner;
+    session: { address: string };
+  } | {
+    connected: false;
+    signer: ethers.Signer & TypedDataSigner | null;
+  };
   safe: {
     api?: string;
     client?: SafeServiceClient;
@@ -72,9 +79,18 @@ export class Config {
       walletConnectState,
       provider
     );
+    const metamaskSession = window.localStorage.getItem("metamask");
+    const metamask = metamaskSession ? JSON.parse(metamaskSession) : null;
 
     this.network = network;
-    this.metamaskSigner = metamaskSigner;
+    this.metamask = metamask && metamaskSigner ? {
+      connected: true,
+      session: { address: metamask["address"] },
+      signer: metamaskSigner,
+    } : {
+      connected: false,
+      signer: metamaskSigner,
+    };
     this.walletConnect = {
       bridge: config.walletConnect.bridge,
       client: wc.connector,
@@ -209,6 +225,9 @@ export async function getConfig(): Promise<Config> {
     : null;
   const metamaskSigner = metamask?.getSigner() || null;
 
+  console.log("metamask", metamask);
+  console.log("metamaskSigner", metamaskSigner);
+
   let network = { name: "homestead", chainId: 1 };
   if (metamask) {
     // If Metamask is detected, we use the network configured there.

src/session.ts

@@ -43,16 +43,23 @@ export interface Store extends Readable<State> {
 
 export const loadState = (initial: State): Store => {
   const store = writable<State>(initial);
-  const metamask = window.localStorage.getItem("metamask");
-
-  if (metamask) {
-    store.set({ connection: Connection.Connected, session: JSON.parse(metamask) });
-  }
 
   return {
     subscribe: store.subscribe,
     connectMetamask: async (config: Config) => {
-      assert(config.metamaskSigner);
+      assert(config.metamask.signer);
+
+      // Re-connect using previous session.
+      if (config.metamask.connected) {
+        const metamask = config.metamask.session;
+        const tokenBalance: BigNumber = await config.token.balanceOf(metamask.address);
+        const session = { tokenBalance, tx: null, address: metamask.address };
+
+        store.set({ connection: Connection.Connected, session });
+        config.setSigner(config.metamask.signer);
+
+        return;
+      }
 
       const state = get(store);
 
@@ -61,7 +68,7 @@ export const loadState = (initial: State): Store => {
 
       await window.ethereum.request({ method: 'eth_requestAccounts' });
 
-      const signer = config.metamaskSigner;
+      const signer = config.metamask.signer;
       const address = await signer.getAddress();
 
       config.setSigner(signer);