Redirect unsupported chain routes before loader fetches

Author: 0xferit

src/data/ethereumProvider.jsx

@@ -21,7 +21,7 @@ export const networkMap = {
 const LONGPOLLING_PERIOD_MS = 20000;
 
 const initializeContract = (chainId) => new ethers.Contract(Object.keys(networkMap[chainId].deployments)[0], ABI);
-const getDefaultNetwork = () => {
+export const getDefaultNetwork = () => {
   const defaultNetworkKeys = Object.keys(networkMap).filter((key) => networkMap[key].default);
 
   if (defaultNetworkKeys.length !== 1)

src/index.jsx

@@ -12,7 +12,7 @@ import Account, { loader as AccountLoader } from "./routes/account";
 import Court, { loader as CourtLoader } from "./routes/court";
 import EthereumProviderErrors from "./components/others/ethereumProviderErrors";
 
-import EthereumProvider, { EthereumContext, networkMap } from "./data/ethereumProvider.jsx";
+import EthereumProvider, { EthereumContext, getDefaultNetwork, networkMap } from "./data/ethereumProvider.jsx";
 import RouteRedirect from "./components/RouteRedirect";
 import AuthRequired from "./components/AuthRequired";
 
@@ -55,7 +55,7 @@ const router = createBrowserRouter(
 function App() {
   const { pathname } = window.location;
   const pathSegment = pathname.split("/")[1];
-  const chainId = pathSegment.startsWith("0x") && networkMap[pathSegment] ? pathSegment : undefined;
+  const chainId = pathSegment.startsWith("0x") ? (networkMap[pathSegment] ? pathSegment : getDefaultNetwork()) : undefined;
   return (
     <EthereumProvider chainId={chainId}>
       <RouterProvider router={router} />

src/routes/account/index.jsx

@@ -1,11 +1,12 @@
-import { useLoaderData, useParams } from "react-router-dom";
+import { redirect, useLoaderData, useParams } from "react-router-dom";
 import * as styles from "./index.module.scss";
 
 import ListArticles from "/src/components/others/listArticles";
-import { getArticlesByAuthor } from "/src/data/ethereumProvider";
+import { getArticlesByAuthor, getDefaultNetwork, networkMap } from "/src/data/ethereumProvider";
 import populateArticleContents from "../../utils/populateArticleContents";
 
 export async function loader({ params }) {
+  if (!networkMap[params.chain]) return redirect(`/${getDefaultNetwork()}/account/${params.id}`);
   const articles = await getArticlesByAuthor(params.chain, params.id);
   return await populateArticleContents(articles);
 }

src/routes/article/index.jsx

@@ -1,10 +1,10 @@
 import { useState, useContext } from "react";
-import { useLoaderData, useRevalidator } from "react-router-dom";
+import { redirect, useLoaderData, useRevalidator } from "react-router-dom";
 import Interval from "react-interval-rerender";
 import * as styles from "./index.module.scss";
 import { formatTime, getTimeLeft } from "/src/hooks/useCountdown";
 
-import { EthereumContext, getArticleByID } from "/src/data/ethereumProvider";
+import { EthereumContext, getArticleByID, getDefaultNetwork, networkMap } from "/src/data/ethereumProvider";
 import { ipfsGateway } from "/src/utils/addToIPFS";
 
 import CustomButton from "/src/components/presentational/button";
@@ -18,6 +18,9 @@ import ArbitrationDetails from "/src/components/others/route_article/arbitration
 import BountyModal from "/src/components/others/bountyModal";
 
 export async function loader({ params }) {
+  const defaultChain = getDefaultNetwork();
+  if (!networkMap[params.chain]?.deployments?.[params.contract]) return redirect(`/${defaultChain}`);
+
   const article = await getArticleByID(params.chain, params.contract, params.id);
   let articleContent = {};
   try {

src/routes/browse/index.jsx

@@ -1,15 +1,16 @@
 import { useContext } from "react";
-import { useLoaderData, useParams } from "react-router-dom";
+import { redirect, useLoaderData, useParams } from "react-router-dom";
 import * as styles from "./index.module.scss";
 
 import EthereumProviderErrors from "/src/components/others/ethereumProviderErrors";
 import ListArticles from "/src/components/others/listArticles";
 import SyncStatus from "/src/components/presentational/syncStatus";
 
-import { EthereumContext, networkMap, getAllArticles } from "/src/data/ethereumProvider";
+import { EthereumContext, getAllArticles, getDefaultNetwork, networkMap } from "/src/data/ethereumProvider";
 import populateArticleContents from "../../utils/populateArticleContents";
 
 export async function loader({ params }) {
+  if (!networkMap[params.chain]) return redirect(`/${getDefaultNetwork()}`);
   const articles = await getAllArticles(params.chain);
   return await populateArticleContents(articles);
 }

src/routes/court/index.jsx

@@ -1,13 +1,15 @@
-import { useLoaderData } from "react-router-dom";
+import { redirect, useLoaderData } from "react-router-dom";
 import * as styles from "./index.module.scss";
 
-import { getCourtById } from "/src/data/ethereumProvider";
+import { getCourtById, getDefaultNetwork, networkMap } from "/src/data/ethereumProvider";
 import { ipfsGateway } from "/src/utils/addToIPFS";
 
 const PERIODS = ["Evidence", "Vote", "Appeal", "Execution"];
 
 export async function loader({ params }) {
   const { chain, contract, id } = params;
+  if (!networkMap[chain]?.deployments?.[contract]) return redirect(`/${getDefaultNetwork()}`);
+
   const court = await getCourtById(chain, contract, id);
   court.policy = await (await fetch(ipfsGateway + court.policyURI)).json();
   return court;