refactor: improve web3 login logic when load website

Author: Lanttcat

Diff for: components/Navigation.tsx

@@ -34,10 +34,9 @@ const config = [
 
 export const Navigation = () => {
   const router = useRouter()
-  console.log(router.asPath);
   const isActivePath = (path: string) => router.asPath === path
   return (
-    <div className="flex mt-4">
+    <div className="flex mt-4 grow">
       { config.map((item) => {
         return (
           <Link key={item.path} href={item.path}>

Diff for: constants/index.ts

@@ -0,0 +1,20 @@
+export const RPC_URLS = [
+  "https://speedy-nodes-nyc.moralis.io/cebf590f4bcd4f12d78ee1d4/polygon/mumbai",
+]
+
+export const BLOCK_EXPLORER_URLS = ["https://explorer-mumbai.maticvigil.com/"]
+export const SUPPORT_NETWORKS = [80001]
+export const STORAGE_KEY_ACCOUNT = 'ethAccount'
+export const STORAGE_KEY_ACCOUNT_SIG = 'sig_login'
+export const DOMAIN = {
+  name: "DwebLab Alpha",
+  version: "1",
+  chainId: 80001,
+}
+
+export const signInfo = {
+  types: {
+    Message: [{name: "content", type: "string"}],
+  },
+  message: {content: "Sign this msg to login"}
+}

Diff for: context/web3Context.ts

@@ -0,0 +1,68 @@
+import {createContext, Dispatch, useContext} from "react"
+
+type StateType = {
+  provider?: any
+  web3Provider?: any
+  account?: string
+  chainId?: number
+}
+
+export const initialWeb3State: StateType = {
+  provider: null,
+  web3Provider: null,
+  account: null,
+  chainId: null,
+}
+
+type ActionType =
+  | {
+  type: 'SET_WEB3_PROVIDER'
+  provider?: StateType['provider']
+  web3Provider?: StateType['web3Provider']
+  account?: StateType['account']
+  chainId?: StateType['chainId']
+}
+  | {
+  type: 'SET_ACCOUNT'
+  account?: StateType['account']
+}
+  | {
+  type: 'SET_CHAIN_ID'
+  chainId?: StateType['chainId']
+}
+  | {
+  type: 'RESET_WEB3_PROVIDER'
+}
+
+export function web3Reducer(state: StateType, action: ActionType): StateType {
+  switch (action.type) {
+    case 'SET_WEB3_PROVIDER':
+      return {
+        ...state,
+        provider: action.provider,
+        web3Provider: action.web3Provider,
+        account: action.account,
+        chainId: action.chainId,
+      }
+    case 'SET_ACCOUNT':
+      return {
+        ...state,
+        account: action.account,
+      }
+    case 'SET_CHAIN_ID':
+      return {
+        ...state,
+        chainId: action.chainId,
+      }
+    case 'RESET_WEB3_PROVIDER':
+      return initialWeb3State
+    default:
+      throw new Error()
+  }
+}
+
+
+export const Web3Context = createContext<{ state: StateType, dispatch: Dispatch<ActionType> | undefined}>({ state: initialWeb3State, dispatch: undefined});
+export function useWeb3Context() {
+  return useContext(Web3Context);
+}

Diff for: hooks/useAccount.ts

@@ -0,0 +1,6 @@
+import {useWeb3Context} from "../context/web3Context";
+
+export const useAccount = () => {
+  const { state} = useWeb3Context()
+  return state.account
+}

Diff for: hooks/useChainId.ts

@@ -0,0 +1,6 @@
+import {useWeb3Context} from "../context/web3Context";
+
+export const useChainId = () => {
+  const { state: { chainId }} = useWeb3Context()
+  return chainId
+}

Diff for: hooks/useProvider.ts

@@ -0,0 +1,6 @@
+import {useWeb3Context} from "../context/web3Context";
+
+export const useProvider = () => {
+  const { state: { provider }} = useWeb3Context()
+  return provider
+}

Diff for: hooks/useWeb3.ts

@@ -0,0 +1,6 @@
+import {useWeb3Context} from "../context/web3Context";
+
+export const useWeb3 = () => {
+    const { state: { web3Provider }} = useWeb3Context()
+    return web3Provider
+}

Diff for: package.json

@@ -16,6 +16,7 @@
     "@react-hookz/web": "^12.0.4",
     "@textile/eth-storage": "^1.0.0",
     "axios": "^0.24.0",
+    "bignumber.js": "^9.0.2",
     "ethers": "^5.5.2",
     "graphql-tag": "^2.12.6",
     "ipfs-http-client": "^55.0.0",
@@ -27,6 +28,7 @@
     "react-dom": "^17.0.2",
     "react-hook-form": "^7.22.5",
     "react-markdown": "^7.1.1",
+    "web3": "^1.6.1",
     "web3modal": "^1.9.4",
     "yup": "^0.32.11"
   },