refactor: app router to extract path validation and apollo client

Author: devofficer

package.json

@@ -66,6 +66,7 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@types/loadable__component": "^5.13.4",
     "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.25",
     "eslint-config-prettier": "^6.0.0",
     "eslint-config-react-app": "^4.0.1",

src/bootstrap/app-router.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo } from 'react'
+import {
+  Route,
+  Switch,
+  Redirect
+} from 'react-router-dom'
+import { ApolloProvider } from '@apollo/client'
+import { useWeb3Context, Connectors } from 'web3-react'
+import getNetworkEnv from 'utils/network-env'
+
+import loadable from '@loadable/component'
+import ErrorPage from 'pages/error-page'
+import NoWeb3Detected from 'pages/no-web3'
+import Loading from 'components/loading'
+import connectors from 'config/connectors'
+import { DEFAULT_NETWORK } from 'config/networks'
+import { hexlify } from 'utils/string'
+import usePathValidation from 'hooks/use-path-validation'
+import useGraphQLClient from 'hooks/use-graphql-client'
+import { Web3ContextCurate } from 'types/web3-cotext'
+
+const { Connector } = Connectors;
+
+const ItemsRouter = loadable(
+  () => import(/* webpackPrefetch: true */ 'pages/items-router'),
+  { fallback: <Loading /> }
+)
+
+const ItemDetailsRouter = loadable(
+  () => import(/* webpackPrefetch: true */ 'pages/item-details-router'),
+  { fallback: <Loading /> }
+)
+
+const Factory = loadable(
+  () => import(/* webpackPrefetch: true */ 'pages/factory/index'),
+  { fallback: <Loading /> }
+)
+
+const ClassicFactory = loadable(
+  () => import(/* webpackPrefetch: true */ 'pages/factory-classic/index'),
+  { fallback: <Loading /> }
+)
+
+
+const AppRouter = () => {
+  const { networkId, error }: Web3ContextCurate = useWeb3Context();
+  const isUnsupported = useMemo(() => error?.code === Connector.errorCodes.UNSUPPORTED_NETWORK, [error])
+  const tcrAddress = getNetworkEnv('REACT_APP_DEFAULT_TCR_ADDRESSES', networkId as number);
+  const [pathResolved, invalidTcrAddr] = usePathValidation()
+  const client = useGraphQLClient(networkId)
+
+  useEffect(() => {
+    if (isUnsupported && window.ethereum) {
+      const chainIdTokens = window.location.pathname.match(/\/tcr\/(\d+)\//);
+      const chainId = hexlify(chainIdTokens && chainIdTokens?.length > 1 ? chainIdTokens[1] : DEFAULT_NETWORK);
+
+      window.ethereum.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId }]
+      });
+    }
+  }, [isUnsupported]);
+
+  if (Object.entries(connectors).length === 0)
+    return <NoWeb3Detected />
+
+  if (isUnsupported && error) {
+    return (
+      <ErrorPage
+        code={' '}
+        title={error.code as string}
+        message={error.message}
+        tip={
+          <>
+            <p>Switching network to supported one</p>
+            <Loading />
+          </>
+        }
+      />
+    )
+  } else if (!networkId || !pathResolved) {
+    return <Loading />
+  } else if (invalidTcrAddr || !client) {
+    return <ErrorPage />
+  }
+
+  return (
+    <ApolloProvider client={client}>
+      <Switch>
+        <Route path="/tcr/:chainId/:tcrAddress/:itemID" component={ItemDetailsRouter} />
+        <Route path="/tcr/:chainId/:tcrAddress" component={ItemsRouter} />
+        <Route path="/factory" exact component={Factory} />
+        <Route path="/factory-classic" exact component={ClassicFactory} />
+        <Redirect from="/" exact to={`/tcr/${networkId}/${tcrAddress}`} />
+        <Route path="*" exact component={ErrorPage} />
+      </Switch>
+    </ApolloProvider>
+  )
+}
+
+export default AppRouter;

src/bootstrap/app-router.tsx

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import { ApolloClient, InMemoryCache } from '@apollo/client'
+import { HttpLink } from '@apollo/client/link/http'
+import getNetworkEnv from 'utils/network-env'
+
+const useApolloClientFactory = (networkId: number | Empty) => {
+  const client = useMemo(() => {
+    if (!networkId) return null
+
+    const GTCR_SUBGRAPH_URL = getNetworkEnv('REACT_APP_SUBGRAPH_URL', networkId)
+
+    if (!GTCR_SUBGRAPH_URL) return null
+
+    const httpLink = new HttpLink({
+      uri: GTCR_SUBGRAPH_URL
+    })
+
+    return new ApolloClient({
+      link: httpLink,
+      cache: new InMemoryCache()
+    })
+  }, [networkId])
+
+  return client
+}
+
+export default useApolloClientFactory