Feat/user wallet page

client/config/allowedChains.js

@@ -0,0 +1,7 @@
+export const allowedChains = [
+	{
+		id: 80001,
+		hx: "0x13881",
+		name: "Polygon Testnet Mumbai",
+	},
+];

client/contracts/index.js

@@ -0,0 +1,9 @@
+import _PriToken from "./abi/PriToken.json";
+
+export const contractAddress = {
+  PriToken: "0x01Ef30F46Ae1eBABBf9D6280257Bf11fDc5C8327",
+};
+
+export const contracts = [
+  { name: "PriToken", abi: _PriToken.abi, address: contractAddress.PriToken },
+];

client/hooks/useMetamask.js

@@ -0,0 +1,79 @@
+import { useCallback, useState } from "react";
+import Web3 from "web3";
+
+// UTILS
+import { isConnectedToAllowedNetwork } from "../utils/isConnectedToAllowedChains";
+
+// CONFIGS
+import { allowedChains } from "../config/allowedChains";
+
+/**
+ * @param setAccount id of account
+ * @returns if account is connected
+ */
+
+export function useMetaMaskWallet() {
+   const [account, setAccount] = useState();
+
+   const isConnected = useCallback(async () => {
+      // await window?.ethereum.enable();
+      if (typeof window.ethereum !== "undefined") {
+         const web3 = new Web3(window.ethereum);
+         const account = await window.ethereum.request({
+            method: "eth_requestAccounts",
+         });
+         setAccount(account);
+         try {
+            let timestamp = Date.now();
+            var message = timestamp.toString();
+            var hash = web3.utils.sha3(message) ;
+            var accounts = await web3.eth.getAccounts();
+
+            var signature = await web3.eth.personal.sign(hash, accounts[0], "");
+            setAccount(accounts[0]);
+         } catch (err) {
+            console.log("MetaMask not connected");
+         }
+      }
+   }, []);
+
+   const connectWallet = useCallback(async (cb) => {
+      // await window?.ethereum.enable();
+      if (typeof window.ethereum !== "undefined") {
+         console.log("MetaMask is installed!");
+         const web3 = new Web3(window.ethereum);
+         const account = await window.ethereum.request({
+            method: "eth_requestAccounts",
+         });
+         setAccount(account);
+         try {
+            // await window.ethereum.enable();
+            const chainId = await web3.eth.getChainId();
+            const isConnectedToAllowedChain = await isConnectedToAllowedNetwork(
+               chainId
+            );
+
+            if (!isConnectedToAllowedChain) {
+               try {
+                  await window.ethereum.request({
+                     method: "wallet_switchEthereumChain",
+                     params: [{ chainId: allowedChains[0].hx }], // chainId must be in hexadecimal numbers
+                  });
+               } catch (err) {
+                  throw new Error(err);
+               }
+            }
+            const accounts = await web3.eth.getAccounts();
+            setAccount(accounts[0]);
+            if (cb) cb(accounts[0]);
+            return true;
+         } catch (err) {
+            // User denied access
+            console.error(err);
+            return false;
+         }
+      }
+   }, []);
+
+   return { account, setAccount, connectWallet, isConnected };
+}

client/package.json

@@ -17,7 +17,8 @@
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-icons": "^4.3.1"
+    "react-icons": "^4.3.1",
+    "web3": "^1.7.3"
   },
   "devDependencies": {
     "eslint": "8.4.1",

client/pages/wallet.js

@@ -0,0 +1,190 @@
+import {
+  Flex,
+  Grid,
+  GridItem,
+  Heading,
+  Text,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Divider,
+  Container,
+  Input,
+  Button,
+} from "@chakra-ui/react";
+import { useState, useEffect, useCallback } from "react";
+import Web3 from "web3";
+
+// COMPONENT
+import Navbar from "../components/navbar";
+
+// HOOKS
+import { useMetaMaskWallet } from "../hooks/useMetamask";
+
+// CONTRACTS
+import ContractInstances from "../utils/contractInstances";
+
+export default function Simple() {
+  const [balance, setBalance] = useState('100');
+
+  const {connectWallet, account} = useMetaMaskWallet()
+
+  const getBalance = useCallback( async (account) => {
+
+    const contracts = ContractInstances.instances;
+    const PriToken = contracts.PriToken;
+
+    const balance = await PriToken.methods.balanceOf(account).call()
+
+    setBalance(Web3.utils.fromWei(`${balance}`))
+
+  }, [connectWallet])
+
+  useEffect(() => {
+
+    connectWallet(getBalance)
+
+  }, [getBalance])
+
+
+
+
+  return (
+    <>
+      <Navbar />
+      <Container maxW={"container.xl"}>
+        <Grid templateRows="1fr" gap={4}>
+          <GridItem p={"1rem"} rounded={"md"}>
+            <Heading color={"brand.500"}>My Wallet</Heading>
+            <Divider my={"10px"} />
+            <Flex justify={"space-between"}>
+              <Flex flexDir={"column"}>
+                <Heading
+                  as={"h6"}
+                  size={"xs"}
+                  textTransform={"uppercase"}
+                  color={"gray.400"}
+                >
+                  Balance
+                </Heading>
+                <Flex align={"baseline"} gap={"5px"}>
+                  <Heading size={"3xl"}>{balance}</Heading>
+                  <Text fontSize={"lg"} fontWeight={"600"}>
+                    $PRI
+                  </Text>
+                </Flex>
+              </Flex>
+              <Flex flexDir={"column"}>
+                <Heading
+                  as={"h6"}
+                  size={"xs"}
+                  textTransform={"uppercase"}
+                  color={"gray.400"}
+                  p={"5px"}
+                >
+                  User Wallet Address
+                </Heading>
+                <Flex align={"baseline"} gap={"5px"}>
+                  <Text
+                    bg={"gray.100"}
+                    border={"gray.500"}
+                    rounded={"lg"}
+                    p={"10px"}
+                  >
+                    {account}
+                  </Text>
+                  <Button colorScheme="blue" size="sm">
+                    Copy
+                  </Button>
+                </Flex>
+              </Flex>
+            </Flex>
+          </GridItem>
+          <GridItem>
+          <Divider my={"10px"} />
+            <Flex justify={"space-between"}>
+              <Flex flexDir={"column"}>
+                <Heading
+                  as={"h6"}
+                  size={"xs"}
+                  textTransform={"uppercase"}
+                  color={"gray.400"}
+                >
+                  Balance
+                </Heading>
+                <Flex align={"baseline"} gap={"5px"}>
+                  <Heading size={"3xl"}>{balance}</Heading>
+                  <Text fontSize={"lg"} fontWeight={"600"}>
+                    $PRI
+                  </Text>
+                </Flex>
+              </Flex>
+              <Flex flexDir={"column"}>
+                <Heading
+                  as={"h6"}
+                  size={"xs"}
+                  textTransform={"uppercase"}
+                  color={"gray.400"}
+                  p={"5px"}
+                >
+                  Driver Wallet Address
+                </Heading>
+                <Flex align={"baseline"} gap={"5px"}>
+                  <Text
+                    bg={"gray.100"}
+                    border={"gray.500"}
+                    rounded={"lg"}
+                    p={"10px"}
+                  >
+                    {account}
+                  </Text>
+                  <Button colorScheme="blue" size="sm">
+                    Confirm
+                  </Button>
+                </Flex>
+              </Flex>
+            </Flex>
+
+          </GridItem>
+
+          <GridItem p={"1rem"} rounded={"md"}>
+            <Heading color={"brand.500"}>Transaction</Heading>
+            <Divider my={"10px"} />
+            <TableContainer>
+              <Table variant="striped">
+                <Thead>
+                  <Tr color={"gray.400"}>
+                    <Th>Name</Th>
+                    <Th>Date</Th>
+                    <Th isNumeric>Amount</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  <Tr>
+                    <Td>Person 1</Td>
+                    <Td>12-03-2018</Td>
+                    <Td isNumeric>25.4</Td>
+                  </Tr>
+                  <Tr>
+                    <Td>Person 2</Td>
+                    <Td>12-03-2018</Td>
+                    <Td isNumeric>30.48</Td>
+                  </Tr>
+                  <Tr>
+                    <Td>Person 3</Td>
+                    <Td>12-03-2018</Td>
+                    <Td isNumeric>120</Td>
+                  </Tr>
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </GridItem>
+        </Grid>
+      </Container>
+    </>
+  );
+}

client/utils/contractInstances.js

@@ -0,0 +1,30 @@
+// UTILS
+import Web3 from "./web3";
+
+// CONTRACTS
+import { contracts } from "../contracts";
+
+export default class Contracts {
+  static _instances;
+
+  static get instances() {
+    if (Contracts._instances) return Contracts._instances;
+
+    const web3 = Web3.instance;
+    const ContractInstances = {};
+    web3.eth
+      .getPastLogs({address: "0x7bE3C2F8476610C6d206794b3DA7f98294538839"})
+      .then((dta) => console.log(dta))
+      .catch((err) => console.log(err));
+
+	// console.log(web3.eth);
+    contracts.forEach((contract) => {
+      ContractInstances[contract.name] = new web3.eth.Contract(
+        contract.abi,
+        contract.address
+      );
+    });
+    Contracts._instances = ContractInstances;
+    return Contracts._instances;
+  }
+}

client/utils/isConnectedToAllowedChains.js

@@ -0,0 +1,8 @@
+import { allowedChains } from "../config/allowedChains";
+
+export const isConnectedToAllowedNetwork = async (chainId) => {
+	return !(
+		allowedChains.length > 0 &&
+		!allowedChains.find((chain) => chain.id === chainId)
+	);
+};

client/utils/web3.js

@@ -0,0 +1,17 @@
+import web3 from 'web3';
+
+// fallback url helpful for loading web3 data even if user not connected to metamask
+export default class Web3 {
+	 static _instance;
+
+	 static get instance() {
+		if (Web3._instance) return Web3._instance;
+		Web3._instance = new web3(web3.givenProvider);
+		return Web3._instance;
+	}
+
+	 static isEnabled() {
+		if(typeof window !== 'undefined')
+			return typeof (window).ethereum !== 'undefined';
+	}
+}