Improvement: Wallet Logic

yam-www/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
+    "react-svg": "^11.0.35",
     "styled-components": "^5.1.1",
     "typescript": "^3.9.7",
     "use-wallet": "^0.8.0",

yam-www/src/App.tsx

@@ -18,21 +18,24 @@ import useModal from './hooks/useModal'
 
 import Farms from './views/Farms'
 import Home from './views/Home'
+import Page from './components/Page'
 
 import theme from './theme'
 
 const App: React.FC = () => {
   return (
     <Providers>
       <Router>
-        <Switch>
-          <Route path="/" exact>
-            <Home />
-          </Route>
-          <Route path="/farms">
-            <Farms />
-          </Route>
-        </Switch>
+        <Page>
+          <Switch>
+            <Route path="/" exact>
+              <Home />
+            </Route>
+            <Route path="/farms">
+              <Farms />
+            </Route>
+          </Switch>
+        </Page>
       </Router>
       <Disclaimer />
     </Providers>
@@ -42,7 +45,16 @@ const App: React.FC = () => {
 const Providers: React.FC = ({ children }) => {
   return (
     <ThemeProvider theme={theme}>
-      <UseWalletProvider chainId={1}>
+      <UseWalletProvider 
+        chainId={1}   
+        connectors={{
+          walletconnect: { rpcUrl: 'https://mainnet.eth.aragon.network/' },
+          walletlink: {
+            url: 'https://test.com',
+            appName: 'Yam Finance',
+            appLogoUrl: 'https://yam.finance/static/media/farmer.85a01356.png',
+          },
+        }}>
         <YamProvider>
           <TransactionProvider>
             <ModalsProvider>

yam-www/src/components/Page/Page.tsx

@@ -1,26 +1,51 @@
-import React from 'react'
+import React, { useMemo, useEffect } from 'react'
 import styled from 'styled-components'
 
+import { useWallet } from 'use-wallet'
+import useLocalStorage from '../../hooks/useLocalStorage'
+
 import Footer from '../Footer'
 import TopBar from '../TopBar'
 
-const Page: React.FC = ({ children }) => (
-  <StyledPage>
-    <TopBar />
-    <StyledMain>
-      {children}
-    </StyledMain>
-    <Footer />
-  </StyledPage>
-)
+const Page: React.FC = ({ children }) => {
+  const { account, connect, connector, status } = useWallet()
+  const [provider, setProvider] = useLocalStorage('provider', false)
+
+  // Login if we have a provider in storage
+  useMemo(() => {
+    if (provider) {
+      connect(provider)
+    }
+  }, [])
+
+  // Catch connection & error
+  useEffect(() => {
+    switch (status) {
+      case 'connected':
+        setProvider(connector)
+        break
+      case 'error':
+        setProvider(false)
+        break
+    }
+  })
+
+  return (
+    <StyledPage>
+      <TopBar />
+      <StyledMain>{children}</StyledMain>
+      <Footer />
+    </StyledPage>
+  )
+}
 
 const StyledPage = styled.div``
 
 const StyledMain = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - ${props => props.theme.topBarSize * 2}px);
+  min-height: calc(100vh - ${(props) => props.theme.topBarSize * 2}px);
 `
 
-export default Page
+export default Page

yam-www/src/components/TopBar/components/AccountButton.tsx

@@ -1,41 +1,106 @@
-import React, { useMemo } from 'react'
+import React, { useEffect } from 'react'
 import styled from 'styled-components'
 
 import { useWallet } from 'use-wallet'
 
 import useModal from '../../../hooks/useModal'
 import { formatAddress } from '../../../utils'
 
+import { ReactSVG } from 'react-svg'
+import injected from '../../../assets/img/metamask.svg'
+import walletconnect from '../../../assets/img/walletconnect.svg'
+import walletlink from '../../../assets/img/walletlink.svg'
+
 import Button from '../../Button'
 
 import AccountModal from './AccountModal'
+import WalletProviderModal from './WalletProviderModal'
 
 interface AccountButtonProps {}
 
+const icons: any = {
+  injected,
+  walletconnect,
+  walletlink,
+}
+
 const AccountButton: React.FC<AccountButtonProps> = (props) => {
+  // Uncomment the below line & the onClick functions
+  // below to enable the modal wallet chooser
+  // const [onPresentWalletProvider] = useModal(<WalletProviderModal />)
   const [onPresentAccountModal] = useModal(<AccountModal />)
-
-  const { account, connect } = useWallet()
-
-  return (
-    <StyledAccountButton>
-      {!account ? (
-        <Button
-          onClick={() => connect('injected')}
-          size="sm"
-          text="Unlock Wallet"
-        />
-      ) : (
-        <Button
-          onClick={onPresentAccountModal}
-          size="sm"
-          text="My Wallet"
-        />
-      )}
-    </StyledAccountButton>
-  )
+  const { account, connector, connect, status } = useWallet()
+
+  // Catch connection & error
+  switch (status) {
+    case 'disconnected':
+      return (
+        <StyledAccountButton>
+          <Button
+            onClick={() => connect('injected')}
+            // onClick={onPresentWalletProvider}
+            size="sm"
+            text="Unlock Wallet"
+          />
+        </StyledAccountButton>
+      )
+      break
+    case 'connecting':
+      return (
+        <StyledAccountButton>
+          <Button
+            onClick={() => connect('injected')}
+            // onClick={onPresentWalletProvider}
+            size="sm"
+            text="Connecting..."
+          />
+        </StyledAccountButton>
+      )
+      break
+    case 'connected':
+      return (
+        <StyledAccountButton>
+          <StyledProviderRow>
+            <Button onClick={onPresentAccountModal} size="sm">
+              <StyledProviderIcon>
+                <ReactSVG src={icons[connector]} />
+              </StyledProviderIcon>
+              {`${account.slice(0, 5)}...${account.slice(-4, -1)}`}
+            </Button>
+          </StyledProviderRow>
+        </StyledAccountButton>
+      )
+      break
+    case 'error':
+      alert(
+        'There was an error connecting to your wallet. \n \nMake sure your browser has a wallet like MetaMask installed or that you have allowed the application to access it.'
+      )
+      return (
+        <StyledAccountButton>
+          <Button
+            onClick={() => connect('injected')}
+            // onClick={onPresentWalletProvider}
+            size="sm"
+            text="Error Connecting..."
+          />
+        </StyledAccountButton>
+      )
+      break
+  }
 }
 
+const StyledProviderRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+`
+
+const StyledProviderIcon = styled.div`
+  height: 25px;
+  width: 25px;
+  margin-right: 5px;
+`
+
 const StyledAccountButton = styled.div``
 
-export default AccountButton
+export default AccountButton

yam-www/src/components/TopBar/components/AccountModal.tsx

@@ -1,6 +1,9 @@
 import React, { useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 
+import { useWallet } from 'use-wallet'
+import useLocalStorage from '../../../hooks/useLocalStorage'
+
 import { yam as yamAddress } from '../../../constants/tokenAddresses'
 import useTokenBalance from '../../../hooks/useTokenBalance'
 import { getDisplayBalance } from '../../../utils/formatBalance'
@@ -14,8 +17,12 @@ import Modal, { ModalProps } from '../../Modal'
 import ModalTitle from '../../ModalTitle'
 
 const AccountModal: React.FC<ModalProps> = ({ onDismiss }) => {
+  const { reset } = useWallet()
+  const [provider, setProvider] = useLocalStorage('provider', false)
 
   const handleSignOutClick = useCallback(() => {
+    reset()
+    setProvider(false)
     onDismiss!()
   }, [onDismiss])
 
@@ -46,27 +53,20 @@ const AccountModal: React.FC<ModalProps> = ({ onDismiss }) => {
       </StyledBalanceWrapper>
 
       <StyledSpacer />
-      <Button
-        href=""
-        text="More info"
-        variant="secondary"
-      />
+      <Button href="" text="More info" variant="secondary" />
       <StyledSpacer />
-      <Button
-        onClick={handleSignOutClick}
-        text="Sign out"
-      />
+      <Button onClick={handleSignOutClick} text="Sign out" />
     </Modal>
   )
 }
 
 const StyledSpacer = styled.div`
-  height: ${props => props.theme.spacing[4]}px;
-  width: ${props => props.theme.spacing[4]}px;
+  height: ${(props) => props.theme.spacing[4]}px;
+  width: ${(props) => props.theme.spacing[4]}px;
 `
 
 const StyledValue = styled.div`
-  color: ${props => props.theme.color.grey[600]};
+  color: ${(props) => props.theme.color.grey[600]};
   font-size: 36px;
   font-weight: 700;
 `
@@ -81,18 +81,18 @@ const StyledBalanceWrapper = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
-  margin-bottom: ${props => props.theme.spacing[4]}px;
+  margin-bottom: ${(props) => props.theme.spacing[4]}px;
 `
 
 const StyledBalanceIcon = styled.div`
   font-size: 36px;
-  margin-right: ${props => props.theme.spacing[3]}px;
+  margin-right: ${(props) => props.theme.spacing[3]}px;
 `
 
 const StyledBalanceActions = styled.div`
   align-items: center;
   display: flex;
-  margin-top: ${props => props.theme.spacing[4]}px;
+  margin-top: ${(props) => props.theme.spacing[4]}px;
 `
 
-export default AccountModal
+export default AccountModal