Merge pull request #237 from devofficer/fix/frame-wallet

Fix/frame wallet

Author: greenlucid

.eslintrc.js

@@ -70,16 +70,6 @@ module.exports = {
     'import/no-named-default': 2,
     'import/no-useless-path-segments': 2,
 
-    // React JSX
-    'react/jsx-filename-extension': [
-      1,
-      {
-        extensions: ['.js']
-      }
-    ],
-    'react/jsx-indent': 0,
-    'react/jsx-curly-brace-presence': [2, 'never'],
-
     // React
     'react/prefer-stateless-function': 2,
     'react/destructuring-assignment': [2, 'always'],

package.json

@@ -8,9 +8,9 @@
     "build": "yarn build:theme && react-scripts --max_old_space_size=4096 build",
     "build:theme": "lessc --js ./src/bootstrap/theme.less ./src/bootstrap/theme.css",
     "release": "standard-version",
-    "lint": "eslint \"./src/**/*.js\"",
-    "lint:eslint:fix": "eslint \"./src/**/*.js\" --fix",
-    "lint:prettier:fix": "prettier --write \"./src/**/*.js\"",
+    "lint": "eslint \"./src/**/*.js\" \"./src/**/*.ts\" \"./src/**/*.tsx\"",
+    "lint:eslint:fix": "eslint \"./src/**/*.js\" \"./src/**/*.ts\" \"./src/**/*.tsx\" --fix",
+    "lint:prettier:fix": "prettier --write \"./src/**/*.js\" \"./src/**/*.ts\" \"./src/**/*.tsx\"",
     "format": "yarn run lint:eslint:fix && yarn run lint:prettier:fix"
   },
   "dependencies": {
@@ -64,6 +64,9 @@
     "@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/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,104 @@
+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-context'
+
+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,21 @@
+import { useMemo } from 'react'
+import { useParams } from 'react-router'
+import { useQuery } from '@apollo/client'
+import { TCR_EXISTENCE_TEST } from 'utils/graphql'
+
+const useCheckLightCurate = (): {
+  isLightCurate: boolean
+  checking: boolean
+} => {
+  const { tcrAddress } = useParams<{ tcrAddress: string }>()
+  const { loading, data } = useQuery(TCR_EXISTENCE_TEST, {
+    variables: {
+      tcrAddress: tcrAddress.toLowerCase()
+    }
+  })
+  const isLightCurate = useMemo<boolean>(() => data?.lregistry ?? false, [data])
+
+  return { isLightCurate, checking: loading }
+}
+
+export default useCheckLightCurate

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

@@ -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