From 0d5264ca836b996cb6dfdb7109171a4e73a6cd75 Mon Sep 17 00:00:00 2001
From: marcomariscal <marco.a.mariscal@gmail.com>
Date: Fri, 9 Jul 2021 16:38:39 -0400
Subject: [PATCH] updating connect modal based on connectors in state

---
 src/components/Connect.tsx    | 59 ++++++++++++++++++++++-------------
 src/contexts/ChainContext.tsx |  7 ++++-
 2 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/components/Connect.tsx b/src/components/Connect.tsx
index 96c1c26c5..8eafc76c1 100644
--- a/src/components/Connect.tsx
+++ b/src/components/Connect.tsx
@@ -1,17 +1,45 @@
-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">
@@ -19,20 +47,7 @@ const Connect = ({ setConnectOpen }: any) => {
         <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
index be11e750e..5ef8d1c76 100644
--- 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),