updating connect modal based on connectors in state

yieldprotocol · Jul 9, 2021 · 0d5264c · 0d5264c
1 parent 407c8b7
commit 0d5264c
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 23 deletions.
diff --git a/src/components/Connect.tsx b/src/components/Connect.tsx
@@ -1,38 +1,53 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import { Box, Button, Text } from 'grommet';
-import { FiX } from 'react-icons/fi';
+import { FiCheckSquare, FiX } from 'react-icons/fi';
 import { ChainContext } from '../contexts/ChainContext';
 
 const Connect = ({ setConnectOpen }: any) => {
-  const { chainState } = useContext(ChainContext);
+  const {
+    chainState: { connector, connectors },
+    chainActions: { connect },
+  } = useContext(ChainContext);
 
-  console.log(chainState);
-  const connectTypes: string[] = ['Metamask', 'Ledger', 'WalletConnect'];
+  const [activatingConnector, setActivatingConnector] = useState<any>();
 
-  const handleConnect = (connectType: string) => {
-    console.log(`Connecting with ${connectType}`);
-  };
+  /* Handle logic to recognize the connector currently being activated */
+  useEffect(() => {
+    activatingConnector && activatingConnector === connector && setActivatingConnector(undefined);
+  }, [activatingConnector, connector]);
+
+  const connectorsRender = [...connectors.keys()].map((name: string) => {
+    const currentConnector = connectors.get(name);
+    const activating = currentConnector === activatingConnector;
+    const connected = currentConnector === connector;
+
+    return (
+      <Box
+        key={name}
+        onClick={() => {
+          setActivatingConnector(name);
+          connect(name);
+        }}
+        border={{ color: 'tailwind-blue', size: 'xsmall' }}
+        hoverIndicator={{ color: 'tailwind-blue', size: 'xsmall' }}
+        pad="small"
+        round="small"
+      >
+        <Box direction="row" gap="xsmall">
+          {connected && <FiCheckSquare color="green" />}
+          {activating ? 'Connecting' : name}
+        </Box>
+      </Box>
+    );
+  });
 
   return (
     <Box basis="auto" width="medium" pad="small" gap="small">
       <Box justify="between" align="center" direction="row">
         <Text>Connect</Text>
         <Button icon={<FiX size="1.5rem" />} onClick={() => setConnectOpen(false)} plain />
       </Box>
-      <Box gap="xsmall">
-        {connectTypes.map((type) => (
-          <Box
-            key={type}
-            onClick={() => handleConnect(type)}
-            border={{ color: 'tailwind-blue', size: 'xsmall' }}
-            hoverIndicator={{ color: 'tailwind-blue', size: 'xsmall' }}
-            pad="small"
-            round="small"
-          >
-            {type}
-          </Box>
-        ))}
-      </Box>
+      <Box gap="xsmall">{connectorsRender}</Box>
     </Box>
   );
 };

diff --git a/src/contexts/ChainContext.tsx b/src/contexts/ChainContext.tsx
@@ -69,6 +69,8 @@ const initState = {
   account: null as string | null,
   web3Active: false as boolean,
   fallbackActive: false as boolean,
+  connectors,
+  connector: null as any,
 
   /* settings */
   connectOnLoad: true as boolean,
@@ -105,6 +107,8 @@ function chainReducer(state: any, action: any) {
       return { ...state, account: onlyIfChanged(action) };
     case 'web3Active':
       return { ...state, web3Active: onlyIfChanged(action) };
+    case 'connector':
+      return { ...state, connector: onlyIfChanged(action) };
     case 'contractMap':
       return { ...state, contractMap: onlyIfChanged(action) };
     case 'addSeries':
@@ -351,7 +355,8 @@ const ChainProvider = ({ children }: any) => {
     updateState({ type: 'provider', payload: library || null });
     updateState({ type: 'account', payload: account || null });
     updateState({ type: 'signer', payload: library?.getSigner(account!) || null });
-  }, [active, account, chainId, library]);
+    updateState({ type: 'connector', payload: connector || null });
+  }, [active, account, chainId, library, connector]);
 
   /*
       Watch the chainId for changes (most likely instigated by metamask),