Merge pull request #18 from NikhilSharma03/auto_wallet_connect

feat: add `auto connect` wallet
NikhilSharma03 · Dec 30, 2023 · ccf38eb · ccf38eb
2 parents 825f900 + 509b89b
commit ccf38eb
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 1,890 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -14,7 +14,6 @@
     "dependencies": {
         "@reduxjs/toolkit": "^1.8.1",
         "@tippyjs/react": "^4.2.6",
-        "@walletconnect/web3-provider": "^1.8.0",
         "axios": "^0.26.1",
         "notistack": "^3.0.1",
         "react": "^18.0.0",
@@ -26,8 +25,7 @@
         "redux-thunk": "^2.4.1",
         "styled-components": "^5.3.5",
         "web-vitals": "^2.1.4",
-        "web3": "^1.7.3",
-        "web3modal": "^1.9.9"
+        "web3": "^1.7.3"
     },
     "devDependencies": {
         "@types/node": "^16.11.26",
@@ -37,6 +35,7 @@
         "assert": "^2.0.0",
         "buffer": "^6.0.3",
         "crypto-browserify": "^3.12.0",
+        "gh-pages": "^5.0.0",
         "https-browserify": "^1.0.0",
         "os-browserify": "^0.3.0",
         "prettier": "2.6.2",
@@ -45,8 +44,7 @@
         "stream-browserify": "^3.0.0",
         "stream-http": "^3.2.0",
         "typescript": "^4.6.3",
-        "url": "^0.11.0",
-        "gh-pages": "^5.0.0"
+        "url": "^0.11.0"
     },
     "browserslist": {
         "production": [

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { SnackbarProvider } from 'notistack';
@@ -9,7 +9,9 @@ import Layout from './components/Layout/layout';
 
 import themeScheme from './theme/schema';
 
-import { useTheme } from './hooks/hooks';
+import { useAppDispatch, useTheme } from './hooks/hooks';
+
+import { onConnectWallet } from './redux/actions/user';
 
 import {
     Campaign,
@@ -26,6 +28,16 @@ const App: React.FC = () => {
         return selected === 'light' ? themeScheme.light : themeScheme.dark;
     };
 
+    const dispatch = useAppDispatch();
+    const connectWallet = () => dispatch(onConnectWallet());
+
+    useEffect(() => {
+        const userConnect = localStorage.getItem('user-address');
+        if (userConnect) {
+            connectWallet();
+        }
+    }, []);
+
     return (
         <ThemeProvider theme={getTheme(currentTheme)}>
             <GlobalStyle />

diff --git a/ui/src/components/Navbar/navbar.tsx b/ui/src/components/Navbar/navbar.tsx
@@ -11,6 +11,8 @@ import {
     UserAuthBtn,
 } from './navbar.style';
 
+import Metamask from '../Modals/Metamask/metamask';
+
 import { IoMdCreate } from 'react-icons/io';
 import { MdCampaign } from 'react-icons/md';
 import { FaHome, FaWallet } from 'react-icons/fa';
@@ -20,6 +22,8 @@ import { useAppDispatch, useAppSelector } from './../../hooks/hooks';
 import { formatAddress } from '../../utils/formatAddress';
 
 import { onConnectWallet } from './../../redux/actions/user';
+import { onClearUserError } from './../../redux/reducers/user';
+import ErrorModal from '../Modals/Error/error';
 
 interface Props {
     toggleSideDrawer: React.MouseEventHandler<HTMLDivElement> | undefined;
@@ -34,9 +38,11 @@ const Navbar: React.FC<Props> = ({ toggleSideDrawer }) => {
     const userWalletAccount: string = useAppSelector(
         (state) => state.users.userWalletAccount
     );
+    const error: string = useAppSelector((state) => state.users.error);
 
     const dispatch = useAppDispatch();
     const connectWallet = () => dispatch(onConnectWallet());
+    const clearUserError = () => dispatch(onClearUserError());
 
     const navbarScrollHandler = () => {
         if (window.scrollY >= 100) {
@@ -53,50 +59,63 @@ const Navbar: React.FC<Props> = ({ toggleSideDrawer }) => {
     }, []);
 
     return (
-        <Container changeNavbarColor={changeNavbarColor}>
-            <Title>
-                <Link to="/">
-                    AEI<span>OU</span>
-                </Link>
-            </Title>
-            {isWalletConnected && (
-                <NavMain>
-                    <Nav>
-                        <NavItems>
-                            <NavItem to="/">
-                                <FaHome size={25} color="#ccc" /> Home
-                            </NavItem>
-                        </NavItems>
-                        <NavItems>
-                            <NavItem to="/campaigns">
-                                <MdCampaign size={25} color="#ccc" /> Campaigns
-                            </NavItem>
-                        </NavItems>
-                        <NavItems>
-                            <NavItem to="/campaigns/new">
-                                <IoMdCreate size={25} color="#ccc" /> New
-                                Campaign
-                            </NavItem>
-                        </NavItems>
-                    </Nav>
-                </NavMain>
+        <>
+            {error === 'Please Install Metamask' && (
+                <Metamask showModal={!!error} closeModal={clearUserError} />
+            )}
+            {error !== 'Please Install Metamask' && (
+                <ErrorModal
+                    content={error}
+                    showModal={!!error}
+                    closeModal={clearUserError}
+                />
             )}
-            <SideBarMenu onClick={toggleSideDrawer}>
-                <div></div>
-                <div></div>
-                <div></div>
-            </SideBarMenu>
-            <UserAuthBtn onClick={connectWallet}>
-                {isWalletConnected ? (
-                    <div>
-                        <FaWallet size={15} color="#ccc" />{' '}
-                        <span>{formatAddress(userWalletAccount)}</span>
-                    </div>
-                ) : (
-                    'Connect Wallet'
+            <Container changeNavbarColor={changeNavbarColor}>
+                <Title>
+                    <Link to="/">
+                        AEI<span>OU</span>
+                    </Link>
+                </Title>
+                {isWalletConnected && (
+                    <NavMain>
+                        <Nav>
+                            <NavItems>
+                                <NavItem to="/">
+                                    <FaHome size={25} color="#ccc" /> Home
+                                </NavItem>
+                            </NavItems>
+                            <NavItems>
+                                <NavItem to="/campaigns">
+                                    <MdCampaign size={25} color="#ccc" />{' '}
+                                    Campaigns
+                                </NavItem>
+                            </NavItems>
+                            <NavItems>
+                                <NavItem to="/campaigns/new">
+                                    <IoMdCreate size={25} color="#ccc" /> New
+                                    Campaign
+                                </NavItem>
+                            </NavItems>
+                        </Nav>
+                    </NavMain>
                 )}
-            </UserAuthBtn>
-        </Container>
+                <SideBarMenu onClick={toggleSideDrawer}>
+                    <div></div>
+                    <div></div>
+                    <div></div>
+                </SideBarMenu>
+                <UserAuthBtn onClick={connectWallet}>
+                    {isWalletConnected ? (
+                        <div>
+                            <FaWallet size={15} color="#ccc" />{' '}
+                            <span>{formatAddress(userWalletAccount)}</span>
+                        </div>
+                    ) : (
+                        'Connect Wallet'
+                    )}
+                </UserAuthBtn>
+            </Container>
+        </>
     );
 };
 

diff --git a/ui/src/pages/Campaign/campaign.tsx b/ui/src/pages/Campaign/campaign.tsx
@@ -189,16 +189,12 @@ const Campaign: React.FC = () => {
     };
 
     useEffect(() => {
-        if (!isWalletConnected) {
-            navigate('/');
-            return;
-        }
         if (web3) {
             dispatch(
                 onGetContractByAddress({ address: String(address), web3 })
             );
         }
-    }, []);
+    }, [isWalletConnected]);
 
     return (
         <React.Fragment>

diff --git a/ui/src/pages/Campaigns/campaigns.tsx b/ui/src/pages/Campaigns/campaigns.tsx
@@ -40,14 +40,10 @@ const Campaigns: React.FC = () => {
     const clearContractError = () => dispatch(onClearContractError());
 
     useEffect(() => {
-        if (!isWalletConnected) {
-            navigate('/');
-            return;
-        }
         if (web3) {
             dispatch(onGetAllContracts(web3));
         }
-    }, []);
+    }, [isWalletConnected]);
 
     return (
         <React.Fragment>

diff --git a/ui/src/pages/NewCampaign/newcampaign.tsx b/ui/src/pages/NewCampaign/newcampaign.tsx
@@ -121,12 +121,6 @@ const NewCampaign: React.FC = () => {
         );
     };
 
-    useEffect(() => {
-        if (!isWalletConnected) {
-            navigate('/');
-        }
-    }, []);
-
     return (
         <Container>
             <ErrorModal

diff --git a/ui/src/redux/actions/user.ts b/ui/src/redux/actions/user.ts
@@ -1,5 +1,4 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import web3Modal from '../../utils/web3modal';
 import Web3 from 'web3';
 
 export const toHex = (num) => {
@@ -13,15 +12,24 @@ export const onConnectWallet = createAsyncThunk<
     { rejectValue: string }
 >('user/connectWallet', async (_, { rejectWithValue }) => {
     try {
-        const provider = await web3Modal.connect();
-        const web3 = new Web3(provider);
+        if (typeof window.ethereum === 'undefined') {
+            return rejectWithValue('Please Install Metamask');
+        }
+
+        const provider = window.ethereum;
+
+        const accounts = await provider.request({
+            method: 'eth_requestAccounts',
+        });
 
-        provider.request({
+        await provider.request({
             method: 'wallet_switchEthereumChain',
             params: [{ chainId: toHex(5) }],
         });
 
-        const accounts = await web3.eth.getAccounts();
+        const web3 = new Web3(provider);
+
+        localStorage.setItem('user-address', accounts[0].toLowerCase());
 
         return { web3, account: accounts[0].toLowerCase() };
     } catch (err) {

diff --git a/ui/src/utils/web3modal.ts b/ui/src/utils/web3modal.ts