feat: add multi-chain support (#506)

.github/workflows/test_ci.yml

@@ -36,7 +36,7 @@ jobs:
         if: ${{ !contains(github.event.head_commit.message, '[skip test]') }}
         run: npm run test
       - name: Build
-        run: npm run build
+        run: npm run build:test
       - name: Integration - testcafe
         if: ${{ !contains(github.event.head_commit.message, '[skip test]') }}
         run: npm run integration:headless

package.json

@@ -10,8 +10,11 @@
     "blockchain": "ganache-cli --mnemonic \"indicate swing place chair flight used hammer soon photo region volume shuffle\"",
     "blockchain:contracts": "node --experimental-modules ./integration/local/setup-contracts.mjs",
     "build": "run-s check-types build:css build:app",
-    "build:css": "cross-env NODE_ENV=production postcss src/tailwind.css -o src/index.css",
-    "build:app": "cross-env NODE_ENV=production webpack --progress --mode production",
+    "build:dev": "cross-env NODE_ENV=development npm run build",
+    "build:test": "cross-env NODE_ENV=test npm run build",
+    "build:prod": "cross-env NODE_ENV=production NET=mainnet npm run build",
+    "build:css": "postcss src/tailwind.css -o src/index.css",
+    "build:app": "webpack --progress --mode production",
     "check-types": "tsc --sourceMap false --noEmit",
     "dev": "run-p dev:*",
     "dev:css": "postcss src/tailwind.css -o src/index.css --watch",
@@ -43,7 +46,7 @@
     "@govtechsg/decentralized-renderer-react-components": "^3.6.2",
     "@govtechsg/ethers-contract-hook": "^2.2.0",
     "@govtechsg/oa-encryption": "^1.3.3",
-    "@govtechsg/oa-verify": "^7.7.0",
+    "@govtechsg/oa-verify": "^7.8.0",
     "@govtechsg/open-attestation": "^6.2.0",
     "@govtechsg/open-attestation-cli": "^1.40.4",
     "@govtechsg/token-registry": "2.5.1",

src/AppContainer.tsx

@@ -3,38 +3,39 @@ import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { Footer } from "./components/Layout/Footer";
 import { NavigationBar, leftNavItems, rightNavItems } from "./components/Layout/NavigationBar";
-import { NETWORK } from "./config";
 import { Routes, routes } from "./routes";
-import styled from "@emotion/styled";
-
-const Main = styled.main`
-  background-image: url("/static/images/common/wave-lines.png");
-  background-size: cover;
-`;
+import { useProviderContext } from "./common/contexts/provider";
+import { getChainInfo } from "./common/utils/chain-utils";
 
 const AppContainer = (): React.ReactElement => {
   const location = useLocation();
   const [toggleNavBar, setToggleNavBar] = useState(false);
+  const { currentChainId } = useProviderContext();
 
   useEffect(() => {
     setToggleNavBar(false);
     window.scrollTo(0, 0);
   }, [location]);
 
+  const networkName = currentChainId ? getChainInfo(currentChainId).label : "Unsupported";
+
   return (
     <div className="flex flex-col min-h-full" data-location={location.pathname}>
-      <NetworkBar network={NETWORK}>
-        You are currently on <span className="capitalize">{NETWORK}</span> network.
+      <NetworkBar network={networkName}>
+        You are currently on <span className="capitalize">{networkName}</span> network.
       </NetworkBar>
       <NavigationBar
         toggleNavBar={toggleNavBar}
         setToggleNavBar={setToggleNavBar}
         leftItems={leftNavItems}
         rightItems={rightNavItems}
       />
-      <Main className="bg-cerulean-50 flex-1">
+      <main
+        className="bg-cerulean-50 flex-1 bg-cover"
+        style={{ backgroundImage: "url('/static/images/common/wave-lines.png')" }}
+      >
         <Routes routes={routes} />
-      </Main>
+      </main>
       <Footer />
       <Overlay />
     </div>

src/common/contexts/TokenInformationContext/TokenInformationContext.tsx

@@ -74,9 +74,10 @@ export const TokenInformationContextProvider: FunctionComponent<TokenInformation
 }) => {
   const [tokenId, setTokenId] = useState<string>();
   const [tokenRegistryAddress, setTokenRegistryAddress] = useState<string>();
-  const { provider } = useProviderContext();
-  const { tokenRegistry } = useTokenRegistryContract(tokenRegistryAddress, provider);
-  const { titleEscrow, updateTitleEscrow, documentOwner } = useTitleEscrowContract(provider, tokenRegistry, tokenId);
+  const { getTransactor } = useProviderContext();
+  const transactor = getTransactor();
+  const { tokenRegistry } = useTokenRegistryContract(tokenRegistryAddress, transactor);
+  const { titleEscrow, updateTitleEscrow, documentOwner } = useTitleEscrowContract(transactor, tokenRegistry, tokenId);
   const isSurrendered = documentOwner === tokenRegistryAddress;
   const isTokenBurnt = documentOwner === "0x000000000000000000000000000000000000dEaD"; // check if the token belongs to burn address.
 
@@ -98,7 +99,7 @@ export const TokenInformationContextProvider: FunctionComponent<TokenInformation
     reset: resetDestroyingTokenState,
   } = useContractFunctionHook(tokenRegistry, "destroyToken");
 
-  const { restoreToken, state: restoreTokenState } = useRestoreToken(provider, tokenRegistry, tokenId);
+  const { restoreToken, state: restoreTokenState } = useRestoreToken(transactor, tokenRegistry, tokenId);
 
   // Contract Write Functions (available only after provider has been upgraded)
   const {
@@ -194,7 +195,7 @@ export const TokenInformationContextProvider: FunctionComponent<TokenInformation
   }, [transferToNewEscrowState, updateTitleEscrow]);
 
   // Reset states for all write functions when provider changes to allow methods to be called again without refreshing
-  useEffect(resetProviders, [resetProviders, provider]);
+  useEffect(resetProviders, [resetProviders, transactor]);
 
   return (
     <TokenInformationContext.Provider