wallet connect & auto connect (aragon#157)

* adding walletconnector info and improving check for last connected account for auto connecto

* lint fixes

* removing unused code

* removing more useless code

* added autoconnect to simple-example

Co-authored-by: WissenIstNacht <[email protected]>

Author: githubdoramon

examples/simple-connect/index.js

@@ -97,6 +97,7 @@ function App() {
 
 ReactDOM.render(
   <UseWalletProvider
+    autoConnect
     connectors={{
       injected: {
         //allows you to connect and switch between mainnet and rinkeby within Metamask.

src/index.tsx

@@ -28,7 +28,15 @@ import {
   ChainUnsupportedError,
   ConnectorUnsupportedError,
 } from './errors'
-import { getAccountIsContract, blockExplorerUrl } from './utils'
+import {
+  getAccountIsContract,
+  blockExplorerUrl,
+  getLastActiveAccount,
+  clearLastActiveAccount,
+  setLastActiveAccount,
+  setLastConnector,
+  getLastConnector,
+} from './utils'
 
 import {
   getProviderFromUseWalletId,
@@ -168,6 +176,7 @@ function UseWalletProvider({
     if (web3ReactContext.active) {
       web3ReactContext.deactivate()
     }
+    clearLastActiveAccount()
     setConnector(null)
     setError(null)
     setStatus('disconnected')
@@ -225,6 +234,16 @@ function UseWalletProvider({
         // could reconnect to the last provider the user tried to connect to.
         setConnector(connectorId)
         await web3ReactContext.activate(web3ReactConnector, undefined, true)
+        setLastConnector(connectorId)
+        if (connectorId === 'injected') {
+          const account = await web3ReactConnector.getAccount()
+          account && setLastActiveAccount(account)
+          web3ReactConnector.getProvider().then((provider) => {
+            provider.on('accountsChanged', (accounts: string[]) => {
+              setLastActiveAccount(accounts[0])
+            })
+          })
+        }
         setStatus('connected')
       } catch (err) {
         // Don’t throw if another connection has happened in the meantime.
@@ -261,20 +280,19 @@ function UseWalletProvider({
       return
     }
 
-    const { ethereum } = window
-    ethereum.enable.then(() => {
-      if (!ethereum?.selectedAddress) {
-        return
-      }
+    const lastConnector = getLastConnector()
+    const lastActiveAccount = getLastActiveAccount()
 
+    if (lastActiveAccount && lastConnector === 'injected') {
       const isInjectedAvailable = Object.keys(connectors).some(
         (key) => key === 'injected'
       )
 
       if (isInjectedAvailable) {
         connect()
       }
-    })
+    }
+
     //eslint-disable-next-line
   }, [])
 
@@ -372,5 +390,6 @@ export {
   getProviderString,
   getProviderFromUseWalletId,
   blockExplorerUrl,
+  getLastActiveAccount,
   chains,
 }

src/providers/index.tsx

@@ -75,6 +75,15 @@ const PROVIDERS = new Map<string, Provider>(
         'your Ethereum wallet': 'Portis',
       },
     },
+    {
+      id: 'walletconnect',
+      name: 'WalletConnect',
+      type: 'Any',
+      image: `${BASE_URL}/walletconnect.png`,
+      strings: {
+        'your Ethereum wallet': 'WalletConnect',
+      },
+    },
     {
       id: 'unknown',
       name: 'Unknown',

src/utils.ts

@@ -147,3 +147,26 @@ export function pollEvery<R, T>(
     }
   }
 }
+
+const ACCOUNT_KEY = 'LAST_ACTIVE_ACCOUNT'
+const CONNECTOR_KEY = 'LAST_WALLET_CONNECTOR'
+
+export const setLastActiveAccount = (account: Account) => {
+  localStorage?.setItem(ACCOUNT_KEY, account)
+}
+
+export const clearLastActiveAccount = () => {
+  localStorage?.removeItem(ACCOUNT_KEY)
+}
+
+export const getLastActiveAccount = (): Account | null => {
+  return localStorage?.getItem(ACCOUNT_KEY)
+}
+
+export const setLastConnector = (connector: string) => {
+  localStorage?.setItem(CONNECTOR_KEY, connector)
+}
+
+export const getLastConnector = (): string | null => {
+  return localStorage?.getItem(CONNECTOR_KEY)
+}