Add logic to connect to wallet or redirect to connect page if no wallet connected

xivanc · xivanc · commit 37d38df331fc · 2021-11-25T13:43:01.000+01:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "currentprovider",
     "walletconnect"
   ]
 }
diff --git a/components/connect/index.tsx b/components/connect/index.tsx
@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+import { Button } from "@chakra-ui/react";
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useWeb3Context } from "@/contexts/Web3Context";
+
+const Connect: NextPage = () => {
+  const { loading, account, connectWeb3, errors } = useWeb3Context();
+  const router = useRouter();
+  const handleConnect = () => {
+    if (!account) {
+      connectWeb3();
+      router.push("/connected");
+    }
+  };
+
+  useEffect(() => {
+    if (!loading && !errors && account) {
+      router.push("/connected");
+    }
+  }, [account, errors, loading, router]);
+
+  return (
+    <div>
+      <Button onClick={handleConnect}>Connect</Button>
+    </div>
+  );
+};
+
+export default Connect;
diff --git a/components/connected/index.tsx b/components/connected/index.tsx
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useWeb3Context } from "@/contexts/Web3Context";
+
+const Connect: NextPage = () => {
+  const { loading, account, errors } = useWeb3Context();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!loading && (!account || errors)) {
+      router.push("/connect");
+    }
+  }, [account, router, loading, errors]);
+
+  return <div>CONNECTED</div>;
+};
+
+export default Connect;
diff --git a/components/navigation/index.tsx b/components/navigation/index.tsx
@@ -3,12 +3,14 @@ import Link from "next/link";
 import React from "react";
 import { Flex, Spacer, Box } from "@chakra-ui/react";
 import { useRouter } from "next/router";
+import { useWeb3Context } from "@/contexts/Web3Context";
+import { formatAddress } from "@/utils/presentationHelper";
 
 export const LOGO_HEIGHT = 64;
 
 const Navigation: React.FC = () => {
   const router = useRouter();
-  const currentPath = router.asPath;
+  const { account, loading, errors } = useWeb3Context();
 
   return (
     <Flex
@@ -30,32 +32,35 @@ const Navigation: React.FC = () => {
         </a>
       </Box>
       <Flex p="4">
-        <Box px="2" bg={currentPath === "/project" ? "yellow" : ""}>
+        <Box px="2" bg={router.asPath === "/project" ? "yellow" : ""}>
           <Link href="/project">Project</Link>
         </Box>
-        <Box px="2" bg={currentPath === "/robot" ? "yellow" : ""}>
+        <Box px="2" bg={router.asPath === "/robot" ? "yellow" : ""}>
           <Link href="/robot">$Robot</Link>
         </Box>
-        <Flex px="2" bg={currentPath === "/shop" ? "yellow" : ""}>
+        <Flex px="2" bg={router.asPath === "/shop" ? "yellow" : ""}>
           <Box pr="1">
             <Image src="/arrow.svg" alt="" width="10px" height="10px" />
           </Box>
           <Link href="/shop">Shop</Link>
         </Flex>
-        <Box px="2" bg={currentPath === "/curate" ? "yellow" : ""}>
+        <Box px="2" bg={router.asPath === "/curate" ? "yellow" : ""}>
           <Link href="/curate">Curate</Link>
         </Box>
       </Flex>
       <Spacer />
       <Flex>
-        <Box px="2" bg={currentPath === "/exchange" ? "yellow" : ""}>
+        <Box px="2" bg={router.asPath === "/exchange" ? "yellow" : ""}>
           <Link href="/exchange">Exchange</Link>
         </Box>
-        <Box px="2" bg={currentPath === "/claim" ? "yellow" : ""}>
+        <Box px="2" bg={router.asPath === "/claim" ? "yellow" : ""}>
           <Link href="/claim">Claim</Link>
         </Box>
-        <Box px="2" border="1px" bg={currentPath === "/connect" ? "yellow" : ""}>
-          <Link href="/connect">Connect</Link>
+        <Box px="2" border="1px" bg={router.asPath.indexOf("/connect") >= 0 ? "yellow" : ""}>
+          {!loading && !errors && !!account && (
+            <Link href="/connected">{formatAddress(account)}</Link>
+          )}
+          {!loading && !account && <Link href="/connect">Connect</Link>}
         </Box>
         <Box width={`${LOGO_HEIGHT}px`} />
       </Flex>
diff --git a/contexts/Web3Context.tsx b/contexts/Web3Context.tsx
@@ -7,6 +7,7 @@ import WalletConnectProvider from "@walletconnect/web3-provider";
 type Web3ContextType = {
   account: null | string;
   provider: null | ethers.providers.Web3Provider;
+  errors: any
 };
 
 const providerOptions: IProviderOptions = {
@@ -15,7 +16,7 @@ const providerOptions: IProviderOptions = {
     package: WalletConnectProvider,
     options: {
       rpc: {
-        1: 'https://rinkeby.infura.io/v3/a2eae6b8a91442c8a6e3fe5e8c4ef4bd',
+        1: "https://rinkeby.infura.io/v3/a2eae6b8a91442c8a6e3fe5e8c4ef4bd",
       },
     },
   },
@@ -29,6 +30,7 @@ const web3Modal =
   });
 
 const Web3Context = createContext<Web3ContextType & { loading: boolean; connectWeb3: () => void }>({
+  errors: null,
   account: null,
   provider: null,
   loading: false,
@@ -37,37 +39,36 @@ const Web3Context = createContext<Web3ContextType & { loading: boolean; connectW
 
 const Web3ContextProvider: React.FC = ({ children }) => {
   const [loading, setLoading] = useState(false);
-  const [{ account, provider }, setWeb3State] = useState<Web3ContextType>({
+  const [{ account, provider, errors }, setWeb3State] = useState<Web3ContextType>({
     account: null,
     provider: null,
+    errors: null,
   });
 
   const connectWeb3 = useCallback(async () => {
-    const modalProvider = web3Modal && (await web3Modal.connect());
-    const currentprovider = new ethers.providers.Web3Provider(
-      new Web3(modalProvider).currentProvider as ethers.providers.ExternalProvider,
-    );
-    const currentAccount = await currentprovider.getSigner().getAddress();
+    try {
+      const modalProvider = web3Modal && (await web3Modal.connect());
+      const currentprovider = new ethers.providers.Web3Provider(
+        new Web3(modalProvider).currentProvider as ethers.providers.ExternalProvider,
+      );
+      const currentAccount = await currentprovider.getSigner().getAddress();
 
-    modalProvider.on("accountsChanged", async (newAcc: string[]) =>
-      setWeb3State((prev) => ({ ...prev, account: newAcc[0] })),
-    );
+      modalProvider.on("accountsChanged", async (newAcc: string[]) =>
+        setWeb3State((prev) => ({ ...prev, account: newAcc[0] })),
+      );
 
-    setWeb3State({ provider: currentprovider, account: currentAccount });
-    setLoading(false);
+      setWeb3State({ provider: currentprovider, account: currentAccount, errors: null });
+    } catch (e) {
+      setWeb3State({ provider: null, account: null, errors: e });
+    } finally {
+      setLoading(false);
+    }
   }, []);
 
-  useEffect(() => {
-    setLoading(true);
-    if (window.ethereum) window.ethereum.autoRefreshOnNetworkChange = false;
-
-    // eslint-disable-next-line no-unused-expressions
-    web3Modal && web3Modal.cachedProvider ? connectWeb3() : setLoading(false);
-  }, [connectWeb3]);
-
   return (
     <Web3Context.Provider
       value={{
+        errors,
         account,
         provider,
         loading,
diff --git a/package.json b/package.json
@@ -14,6 +14,8 @@
     "@chakra-ui/react": "^1.6.10",
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11",
+    "@ethersproject/bignumber": "^5.5.0",
+    "@ethersproject/units": "^5.5.0",
     "@visx/event": "^2.1.2",
     "@visx/gradient": "^2.1.0",
     "@visx/grid": "^2.4.0",
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,3 +1,5 @@
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
 import "@/styles/globals.css";
 import Head from "next/head";
 import type { AppProps } from "next/app";
@@ -8,6 +10,13 @@ import Layout from "@/components/layout";
 import Web3ContextProvider from "@/contexts/Web3Context";
 
 function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  const [routerIsReady, setRouterIsReady] = useState(false);
+
+  useEffect(() => {
+    setRouterIsReady(router.isReady);
+  }, [router.isReady]);
+
   return (
     <Web3ContextProvider>
       <ChakraProvider theme={customTheme}>
@@ -29,9 +38,11 @@ function MyApp({ Component, pageProps }: AppProps) {
           <link rel="preload" href="/fonts/188 Sans-Regular.otf" as="font" crossOrigin="" />
           <link rel="preload" href="/fonts/188 Sans-Thin Condensed.otf" as="font" crossOrigin="" />
         </Head>
-        <Layout>
-          <Component {...pageProps} />
-        </Layout>
+        {routerIsReady && (
+          <Layout>
+            <Component {...pageProps} />
+          </Layout>
+        )}
       </ChakraProvider>
     </Web3ContextProvider>
   );
diff --git a/pages/connect.tsx b/pages/connect.tsx
@@ -0,0 +1,3 @@
+import Connect from "@/components/connect";
+
+export default Connect;
diff --git a/pages/connected.tsx b/pages/connected.tsx
@@ -0,0 +1,3 @@
+import Connected from "@/components/connected";
+
+export default Connected;
diff --git a/utils/presentationHelper.ts b/utils/presentationHelper.ts
@@ -0,0 +1,41 @@
+import { BigNumber } from "@ethersproject/bignumber";
+import { formatUnits } from "@ethersproject/units";
+
+export const formatAddress = (
+  address: string | null | undefined,
+  ensName?: string | null,
+  chars = 4,
+): string => {
+  if (ensName) return ensName;
+  if (address)
+    return `${address.substring(0, chars)}...${address.substring(address.length - chars)}`;
+  return "";
+};
+
+export const formatNumber = (number: number): string => number.toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  });
+
+export const formatToUSD = ({ usdPrice, number }: { usdPrice: number; number?: BigNumber }) => {
+  const usdValue = usdPrice * Number(formatToken(number));
+  return formatNumber(usdValue);
+};
+
+export const formatToken = (
+  number?: BigNumber | string,
+  decimals: string | number = 18,
+): string | undefined => {
+  if (!number) {
+    return;
+  }
+  const num = BigNumber.from(number);
+  const formatted = formatUnits(num, Number(decimals));
+  const split = formatted.split(".");
+  if (split.length > 1) {
+    // eslint-disable-next-line consistent-return
+    return `${split[0]}.${split[1].substr(0, 6)}`;
+  }
+  // eslint-disable-next-line consistent-return
+  return formatted;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1207,7 +1207,7 @@
 
 "@ethersproject/bignumber@5.5.0", "@ethersproject/bignumber@^5.0.7", "@ethersproject/bignumber@^5.5.0":
   version "5.5.0"
-  resolved "https://registry.npmjs.org/@ethersproject/bignumber/-/bignumber-5.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@ethersproject/bignumber/-/bignumber-5.5.0.tgz#875b143f04a216f4f8b96245bde942d42d279527"
   integrity sha512-6Xytlwvy6Rn3U3gKEc1vP7nR92frHkv6wtVr95LFR3jREXiCPzdWxKQ1cx4JGQBXxcguAwjA8murlYN2TSiEbg==
   dependencies:
     "@ethersproject/bytes" "^5.5.0"
@@ -1437,6 +1437,15 @@
     "@ethersproject/constants" "^5.5.0"
     "@ethersproject/logger" "^5.5.0"
 
+"@ethersproject/units@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/@ethersproject/units/-/units-5.5.0.tgz#104d02db5b5dc42cc672cc4587bafb87a95ee45e"
+  integrity sha512-7+DpjiZk4v6wrikj+TCyWWa9dXLNU73tSTa7n0TSJDxkYbV3Yf1eRh9ToMLlZtuctNYu9RDNNy2USq3AdqSbag==
+  dependencies:
+    "@ethersproject/bignumber" "^5.5.0"
+    "@ethersproject/constants" "^5.5.0"
+    "@ethersproject/logger" "^5.5.0"
+
 "@ethersproject/wallet@5.5.0":
   version "5.5.0"
   resolved "https://registry.npmjs.org/@ethersproject/wallet/-/wallet-5.5.0.tgz"

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"cSpell.words": [`
	`3`	`+ "currentprovider",`
`3`	`4`	`"walletconnect"`
`4`	`5`	`]`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Connect from "@/components/connect";`
	`2`	`+`
	`3`	`+export default Connect;`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import Connected from "@/components/connected";`
	`2`	`+`
	`3`	`+export default Connected;`