Merge pull request #33 from yieldprotocol/feature-connect

Feature connect
yieldprotocol · Jul 13, 2021 · cd91e2f · cd91e2f
2 parents 4bb0fd6 + c2b3155
commit cd91e2f
Show file tree

Hide file tree

Showing 8 changed files with 20,319 additions and 25 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   extends: ['airbnb-typescript', 'react-app', 'prettier'],
   parserOptions: {
     project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
   },
   rules: {
     // "@typescript-eslint/no-unused-expressions": ["error", { "allowTernary": true }],

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -82,12 +82,12 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.3.2",
     "react-test-renderer": "^17.0.2",
     "source-map-explorer": "^2.5.2",
     "ts-node": "^9.1.1",
     "typechain": "^5.0.0",
-    "typescript": "^4.2.2",
-    "prettier": "^2.3.2"
+    "typescript": "^4.2.2"
   },
   "lavamoat": {
     "allowScripts": {

diff --git a/src/components/Connect.tsx b/src/components/Connect.tsx
@@ -0,0 +1,55 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { Box, Button, Text } from 'grommet';
+import { FiCheckSquare, FiX } from 'react-icons/fi';
+import { ChainContext } from '../contexts/ChainContext';
+
+const Connect = ({ setConnectOpen }: any) => {
+  const {
+    chainState: { connector, connectors },
+    chainActions: { connect },
+  } = useContext(ChainContext);
+
+  const [activatingConnector, setActivatingConnector] = useState<any>();
+
+  /* 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">{connectorsRender}</Box>
+    </Box>
+  );
+};
+
+export default Connect;
diff --git a/src/components/YieldAccount.tsx b/src/components/YieldAccount.tsx
@@ -1,28 +1,35 @@
-import React, { useState, useEffect, useContext } from 'react';
-import { Text, Box, ResponsiveContext, Layer, Avatar } from 'grommet';
-import { FiSettings, FiMenu } from 'react-icons/fi';
+import React, { useState, useContext } from 'react';
+import { Text, Box, ResponsiveContext, Layer } from 'grommet';
+import { FiCircle, FiMenu, FiSettings } from 'react-icons/fi';
 
 import YieldBalances from './YieldBalances';
 
 import { ChainContext } from '../contexts/ChainContext';
 import { abbreviateHash } from '../utils/appUtils';
 import YieldAvatar from './YieldAvatar';
 import YieldSettings from './YieldSettings';
+import Connect from './Connect';
 
 const YieldAccount = (props: any) => {
   const mobile: boolean = useContext<any>(ResponsiveContext) === 'small';
   const {
-    chainState: { account, chainId },
-    chainActions: { connect, disconnect },
+    chainState: { account },
   } = useContext(ChainContext);
 
   const [settingsOpen, setSettingsOpen] = useState<boolean>();
+  const [connectOpen, setConnectOpen] = useState<boolean>();
 
   return (
     <>
-      {settingsOpen && (
+      {connectOpen && (
+        <Layer onClickOutside={() => setConnectOpen(false)} onEsc={() => setConnectOpen(false)}>
+          <Connect setConnectOpen={setConnectOpen} />
+        </Layer>
+      )}
+
+      {account && settingsOpen && (
         <Layer onClickOutside={() => setSettingsOpen(false)} onEsc={() => setSettingsOpen(false)}>
-          <YieldSettings setSettingsOpen={setSettingsOpen} />
+          <YieldSettings setConnectOpen={setConnectOpen} setSettingsOpen={setSettingsOpen} />
         </Layer>
       )}
 
@@ -45,24 +52,20 @@ const YieldAccount = (props: any) => {
                     {abbreviateHash(account)}
                   </Text>
                   <Text size="xsmall" color="text-weak">
-                    o Connected
+                    <FiCircle color="#00C781" size=".5rem" /> Connected
                   </Text>
                 </Box>
-
                 <Box>
                   <YieldAvatar address={account.concat('y')} size={2.5} />
                 </Box>
-
-                {/* <FiSettings /> */}
               </Box>
             )}
           </Box>
         </Box>
       ) : (
-        <Box border={!mobile} onClick={() => connect()} pad="small">
+        <Box border={!mobile} onClick={() => setConnectOpen(true)} pad="small">
           <Text size="small" color="text">
-            {' '}
-            {mobile ? <FiMenu /> : 'Connect Wallet'}{' '}
+            {mobile ? <FiMenu /> : 'Connect Wallet'}
           </Text>
         </Box>
       )}

diff --git a/src/components/YieldSettings.tsx b/src/components/YieldSettings.tsx
@@ -5,23 +5,22 @@ import { ChainContext } from '../contexts/ChainContext';
 import { abbreviateHash } from '../utils/appUtils';
 import YieldAvatar from './YieldAvatar';
 
-const YieldSettings = ({ setSettingsOpen }: any) => {
+const YieldSettings = ({ setConnectOpen, setSettingsOpen }: any) => {
   const {
     chainState: { account, chainId },
-    chainActions: { connect, disconnect },
   } = useContext(ChainContext);
 
   const [copySuccess, setCopySuccess] = useState<boolean>(false);
 
   const connectType: string = 'Metamask';
 
   const handleChangeConnectType = () => {
-    console.log('changing connect type');
+    setSettingsOpen(false);
+    setConnectOpen(true);
   };
 
   const handleCopy = (text: any) => {
     navigator.clipboard.writeText(text);
-    console.log(account);
   };
 
   return (
@@ -30,10 +29,15 @@ const YieldSettings = ({ setSettingsOpen }: any) => {
         <Text>Account</Text>
         <Button icon={<FiX size="1.5rem" />} onClick={() => setSettingsOpen(false)} plain />
       </Box>
-      <Box border={{ color: 'brand', size: 'xsmall' }} gap="small" pad="small" round="small">
+      <Box border={{ color: '#2563EB', size: 'xsmall' }} gap="small" pad="small" round="small">
         <Box justify="between" align="center" direction="row">
           <Text size="small">Connected with {connectType}</Text>
-          <Button color="accent-2" secondary onClick={handleChangeConnectType} label="Change" size="small" />
+          <Button
+            style={{ backgroundColor: '#DBEAFE' }}
+            onClick={handleChangeConnectType}
+            label="Change"
+            size="small"
+          />
         </Box>
         <Box align="center" direction="row" gap="xsmall">
           <YieldAvatar address={account.concat('y')} size={1.2} />
@@ -53,7 +57,9 @@ const YieldSettings = ({ setSettingsOpen }: any) => {
             </Text>
           </Anchor>
         </Box>
-        <Text size="small">Connected to Chain ID {chainId}</Text>
+        <Text color="#6B7280" size="small">
+          Connected to Chain ID {chainId}
+        </Text>
       </Box>
     </Box>
   );

diff --git a/src/contexts/ChainContext.tsx b/src/contexts/ChainContext.tsx
@@ -50,7 +50,7 @@ connectors.set(
 connectors.set(
   'walletconnect',
   new WalletConnectConnector({
-    rpc: { 1: RPC_URLS[1] },
+    rpc: { 1: RPC_URLS[1], 42: RPC_URLS[42] },
     bridge: 'https://bridge.walletconnect.org',
     qrcode: true,
     pollingInterval: POLLING_INTERVAL,
@@ -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),

diff --git a/src/themes/index.ts b/src/themes/index.ts
@@ -15,6 +15,7 @@ export const yieldTheme = {
       selected: '#3f53d9',
       'accent-1': '#FFCA58',
       'accent-2': '#81FCED',
+      'tailwind-blue': '#2563EB',
       text: {
         dark: '#EEEEEE',
         light: '#555555',