refactor: checking light curate in hook

Author: devofficer

package.json

@@ -64,6 +64,8 @@
     "@babel/helper-define-map": "^7.15.4",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
+    "@types/loadable__component": "^5.13.4",
+    "@types/react-router": "^5.1.18",
     "@types/styled-components": "^5.1.25",
     "eslint-config-prettier": "^6.0.0",
     "eslint-config-react-app": "^4.0.1",

src/hooks/use-check-light-curate.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react"
+import { useWeb3Context } from 'web3-react'
+import { ethers } from 'ethers'
+import { useParams } from 'react-router'
+import _gtcr from '../assets/abis/GeneralizedTCR.json'
+
+const useCheckLightCurate = () => {
+  const { library, active } = useWeb3Context()
+  const { tcrAddress } = useParams<{ tcrAddress: string }>()
+
+  const [isLightCurate, setLightCurate] = useState<boolean>(false)
+
+  useEffect(() => {
+    const checkLightCurate = async () => {
+      try {
+        if (!active) return
+        const tcr = new ethers.Contract(tcrAddress, _gtcr, library)
+
+        // Call a function only available on GTCR Classic. If
+        // it throws, its not a light curate instance.
+        await tcr.itemCount()
+        setLightCurate(false)
+        // eslint-disable-next-line no-unused-vars
+      } catch (err) {
+        console.info(
+          `Contract call used to verify if this is a Light Curate instance. Ignore exception.`
+        )
+        setLightCurate(true)
+      }
+    }
+    checkLightCurate()
+  }, [active, library, tcrAddress])
+
+  return isLightCurate
+}
+
+export default useCheckLightCurate

src/pages/item-details-router.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { TCRViewProvider } from 'contexts/tcr-view-context'
+import { LightTCRViewProvider } from 'contexts/light-tcr-view-context'
+import loadable from '@loadable/component'
+import { useParams } from 'react-router'
+import useTcrNetwork from 'hooks/use-tcr-network'
+import { NETWORK_STATUS } from 'config/networks'
+import useCheckLightCurate from 'hooks/use-check-light-curate'
+import Loading from 'components/loading'
+
+const LightItemDetails = loadable(
+  () => import(/* webpackPrefetch: true */ './light-item-details/index'),
+  {
+    fallback: <Loading />
+  }
+)
+
+const ItemDetails = loadable(
+  () => import(/* webpackPrefetch: true */ './item-details/index'),
+  {
+    fallback: <Loading />
+  }
+)
+
+const ItemDetailsRouter = () => {
+  const { tcrAddress, itemID } = useParams<{ tcrAddress: string, itemID: string }>()
+  const { networkStatus } = useTcrNetwork()
+  const search = window.location.search
+  const isLightCurate = useCheckLightCurate()
+
+  if (isLightCurate === undefined || networkStatus !== NETWORK_STATUS.supported)
+    return <Loading />
+
+  if (isLightCurate)
+    return (
+      <LightTCRViewProvider tcrAddress={tcrAddress}>
+        <LightItemDetails search={search} itemID={itemID} />
+      </LightTCRViewProvider>
+    )
+
+  return (
+    <TCRViewProvider tcrAddress={tcrAddress}>
+      <ItemDetails search={search} itemID={itemID} />
+    </TCRViewProvider>
+  )
+}
+
+export default ItemDetailsRouter

src/pages/item-details-router.tsx

@@ -1,14 +1,12 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { TCRViewProvider } from 'contexts/tcr-view-context'
 import { LightTCRViewProvider } from 'contexts/light-tcr-view-context'
 import loadable from '@loadable/component'
-import _gtcr from '../assets/abis/GeneralizedTCR.json'
-import { useWeb3Context } from 'web3-react'
-import { ethers } from 'ethers'
 import { useParams } from 'react-router'
 import Loading from 'components/loading'
 import useTcrNetwork from 'hooks/use-tcr-network'
 import { NETWORK_STATUS } from 'config/networks'
+import useCheckLightCurate from 'hooks/use-check-light-curate'
 
 const LightItems = loadable(
   () => import(/* webpackPrefetch: true */ './light-items/index'),
@@ -25,31 +23,10 @@ const Items = loadable(
 )
 
 const ItemsRouter = () => {
-  const { tcrAddress } = useParams()
-  const [isLightCurate, setIsLightCurate] = useState()
-  const { library, active } = useWeb3Context()
+  const { tcrAddress } = useParams<{ tcrAddress: string }>()
+  const isLightCurate = useCheckLightCurate()
   const { networkStatus } = useTcrNetwork()
 
-  useEffect(() => {
-    ;(async () => {
-      try {
-        if (!active) return
-        const tcr = new ethers.Contract(tcrAddress, _gtcr, library)
-
-        // Call a function only available on GTCR Classic. If
-        // it throws, its not a light curate instance.
-        await tcr.itemCount()
-        setIsLightCurate(false)
-        // eslint-disable-next-line no-unused-vars
-      } catch (err) {
-        console.info(
-          `Contract call used to verify if this is a Light Curate instance. Ignore exception.`
-        )
-        setIsLightCurate(true)
-      }
-    })()
-  }, [active, library, tcrAddress])
-
   if (
     typeof isLightCurate === 'undefined' ||
     networkStatus !== NETWORK_STATUS.supported

src/pages/items-router.js renamed to src/pages/items-router.tsx

@@ -2727,6 +2727,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@^4.7.11":
+  version "4.7.11"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
+  integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -2765,6 +2770,13 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/loadable__component@^5.13.4":
+  version "5.13.4"
+  resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.13.4.tgz#a4646b2406b1283efac1a9d9485824a905b33d4a"
+  integrity sha512-YhoCCxyuvP2XeZNbHbi8Wb9EMaUJuA2VGHxJffcQYrJKIKSkymJrhbzsf9y4zpTmr5pExAAEh5hbF628PAZ8Dg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/minimist@^1.2.0":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
@@ -2812,6 +2824,14 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/react-router@^5.1.18":
+  version "5.1.18"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.18.tgz#c8851884b60bc23733500d86c1266e1cfbbd9ef3"
+  integrity sha512-YYknwy0D0iOwKQgz9v8nOzt2J6l4gouBmDnWqUUznltOTaon+r8US8ky8HvN0tXvc38U9m6z/t2RsVsnd1zM0g==
+  dependencies:
+    "@types/history" "^4.7.11"
+    "@types/react" "*"
+
 "@types/react-slick@^0.23.4":
   version "0.23.5"
   resolved "https://registry.yarnpkg.com/@types/react-slick/-/react-slick-0.23.5.tgz#e55fdc79bf19022ef77a6f22e9d64fd0f7463cc4"