Skip to content

Commit 8dd923a

Browse files
author
devofficer
committed
chore: extract path-validation and apollo-factory from AppRouter
1 parent 478aef7 commit 8dd923a

File tree

3 files changed

+109
-89
lines changed

3 files changed

+109
-89
lines changed

‎src/bootstrap/app-router.jsx‎

Lines changed: 6 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
import React, { useEffect, useMemo, useState } from 'react'
1+
import React, { useEffect, useMemo } from 'react'
22
import {
33
Route,
44
Switch,
55
Redirect
66
} from 'react-router-dom'
7-
import { useHistory } from 'react-router'
8-
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
9-
import { HttpLink } from '@apollo/client/link/http'
7+
import { ApolloProvider } from '@apollo/client'
108
import { useWeb3Context } from 'web3-react'
119
import getNetworkEnv from 'utils/network-env'
1210

@@ -17,7 +15,8 @@ import Loading from 'components/loading'
1715
import connectors from 'config/connectors'
1816
import { DEFAULT_NETWORK } from 'config/networks'
1917
import { hexlify } from 'utils/string'
20-
import { TCR_EXISTENCE_TEST } from 'utils/graphql'
18+
import usePathValidation from 'hooks/use-path-validation'
19+
import useApolloClientFactory from 'hooks/use-apollo-client-factory'
2120

2221
const ItemsRouter = loadable(
2322
() => import(/* webpackPrefetch: true */ 'pages/items-router'),
@@ -41,93 +40,11 @@ const ClassicFactory = loadable(
4140

4241

4342
const AppRouter = () => {
44-
const history = useHistory()
4543
const { networkId, error } = useWeb3Context();
4644
const isUnsupported = useMemo(() => error?.code === 'UNSUPPORTED_NETWORK', [error])
47-
const [pathResolved, setPathResolved] = useState(false);
48-
const [invalidTcrAddr, setInvalidTcrAddr] = useState(false);
49-
5045
const tcrAddress = getNetworkEnv('REACT_APP_DEFAULT_TCR_ADDRESSES', networkId);
51-
52-
const client = useMemo(() => {
53-
if (!networkId) {
54-
return null
55-
}
56-
57-
const GTCR_SUBGRAPH_URL = getNetworkEnv(
58-
'REACT_APP_SUBGRAPH_URL',
59-
networkId
60-
)
61-
62-
if (!GTCR_SUBGRAPH_URL) {
63-
return null;
64-
}
65-
66-
const httpLink = new HttpLink({
67-
uri: GTCR_SUBGRAPH_URL
68-
})
69-
return new ApolloClient({
70-
link: httpLink,
71-
cache: new InMemoryCache()
72-
})
73-
}, [networkId])
74-
75-
useEffect(() => {
76-
const checkPathValidation = async () => {
77-
const pathname = history.location.pathname;
78-
const search = history.location.search;
79-
const isOldPath = /\/tcr\/0x/.test(pathname);
80-
81-
if (isOldPath) {
82-
const searchParams = new URLSearchParams(search);
83-
let chainId = null;
84-
const tcrAddress = pathname.match(/tcr\/(0x[0-9a-zA-Z]+)/)[1].toLowerCase();
85-
86-
if (searchParams.has('chainId')) {
87-
chainId = searchParams.get('chainId');
88-
} else {
89-
const DEFAULT_TCR_ADDRESSES = JSON.parse(process.env.REACT_APP_DEFAULT_TCR_ADDRESSES);
90-
const ADDRs = Object.values(DEFAULT_TCR_ADDRESSES).map(addr => addr.toLowerCase());
91-
const CHAIN_IDs = Object.keys(DEFAULT_TCR_ADDRESSES);
92-
const tcrIndex = ADDRs.findIndex(addr => addr === tcrAddress);
93-
94-
if (tcrIndex >= 0) {
95-
chainId = Number(CHAIN_IDs[tcrIndex]);
96-
} else {
97-
const SUBGRAPH_URLS = JSON.parse(process.env.REACT_APP_SUBGRAPH_URL);
98-
const queryResults = await Promise.all(Object.values(SUBGRAPH_URLS).map(subgraph => {
99-
const client = new ApolloClient({
100-
link: new HttpLink({ uri: subgraph }),
101-
cache: new InMemoryCache()
102-
});
103-
return client.query({
104-
query: TCR_EXISTENCE_TEST,
105-
variables: {
106-
tcrAddress,
107-
},
108-
});
109-
}));
110-
const validIndex = queryResults.findIndex(
111-
({ data: { lregistry, registry } }) => lregistry !== null || registry !== null
112-
);
113-
114-
if (validIndex >= 0) {
115-
chainId = Object.keys(SUBGRAPH_URLS)[validIndex];
116-
}
117-
}
118-
}
119-
120-
if (chainId) {
121-
const newPathname = pathname.replace('/tcr/', `/tcr/${chainId}/`);
122-
history.push({ pathname: newPathname, search });
123-
} else {
124-
setInvalidTcrAddr(true);
125-
}
126-
}
127-
setPathResolved(true);
128-
};
129-
checkPathValidation();
130-
}, [history, setPathResolved]);
46+
const [pathResolved, invalidTcrAddr] = usePathValidation()
47+
const client = useApolloClientFactory(networkId)
13148

13249
useEffect(() => {
13350
if (isUnsupported && window.ethereum) {

‎src/hooks/use-apollo-client-factory.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { useMemo } from 'react'
2+
import { ApolloClient, InMemoryCache } from '@apollo/client'
3+
import { HttpLink } from '@apollo/client/link/http'
4+
import getNetworkEnv from 'utils/network-env'
5+
6+
const useApolloClientFactory = networkId => {
7+
const client = useMemo(() => {
8+
if (!networkId) return null
9+
10+
const GTCR_SUBGRAPH_URL = getNetworkEnv('REACT_APP_SUBGRAPH_URL', networkId)
11+
12+
if (!GTCR_SUBGRAPH_URL) return null
13+
14+
const httpLink = new HttpLink({
15+
uri: GTCR_SUBGRAPH_URL
16+
})
17+
18+
return new ApolloClient({
19+
link: httpLink,
20+
cache: new InMemoryCache()
21+
})
22+
}, [networkId])
23+
24+
return client
25+
}
26+
27+
export default useApolloClientFactory

‎src/hooks/use-path-validation.js‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { useEffect, useState } from 'react'
2+
import { useHistory } from 'react-router'
3+
import { TCR_EXISTENCE_TEST } from 'utils/graphql'
4+
import { ApolloClient, InMemoryCache } from '@apollo/client'
5+
import { HttpLink } from '@apollo/client/link/http'
6+
7+
const usePathValidation = () => {
8+
const history = useHistory()
9+
const [pathResolved, setPathResolved] = useState(false)
10+
const [invalidTcrAddr, setInvalidTcrAddr] = useState(false)
11+
12+
useEffect(() => {
13+
const checkPathValidation = async () => {
14+
const pathname = history.location.pathname
15+
const search = history.location.search
16+
const isOldPath = /\/tcr\/0x/.test(pathname)
17+
18+
if (isOldPath) {
19+
const searchParams = new URLSearchParams(search)
20+
let chainId = null
21+
const tcrAddress = pathname
22+
.match(/tcr\/(0x[0-9a-zA-Z]+)/)[1]
23+
.toLowerCase()
24+
25+
if (searchParams.has('chainId')) chainId = searchParams.get('chainId')
26+
else {
27+
const DEFAULT_TCR_ADDRESSES = JSON.parse(
28+
process.env.REACT_APP_DEFAULT_TCR_ADDRESSES
29+
)
30+
const ADDRs = Object.values(DEFAULT_TCR_ADDRESSES).map(addr =>
31+
addr.toLowerCase()
32+
)
33+
const CHAIN_IDS = Object.keys(DEFAULT_TCR_ADDRESSES)
34+
const tcrIndex = ADDRs.findIndex(addr => addr === tcrAddress)
35+
36+
if (tcrIndex >= 0) chainId = Number(CHAIN_IDS[tcrIndex])
37+
else {
38+
const SUBGRAPH_URLS = JSON.parse(process.env.REACT_APP_SUBGRAPH_URL)
39+
const queryResults = await Promise.all(
40+
Object.values(SUBGRAPH_URLS).map(subgraph => {
41+
const client = new ApolloClient({
42+
link: new HttpLink({ uri: subgraph }),
43+
cache: new InMemoryCache()
44+
})
45+
return client.query({
46+
query: TCR_EXISTENCE_TEST,
47+
variables: {
48+
tcrAddress
49+
}
50+
})
51+
})
52+
)
53+
const validIndex = queryResults.findIndex(
54+
({ data: { lregistry, registry } }) =>
55+
lregistry !== null || registry !== null
56+
)
57+
58+
if (validIndex >= 0)
59+
chainId = Object.keys(SUBGRAPH_URLS)[validIndex]
60+
}
61+
}
62+
63+
if (chainId) {
64+
const newPathname = pathname.replace('/tcr/', `/tcr/${chainId}/`)
65+
history.push({ pathname: newPathname, search })
66+
} else setInvalidTcrAddr(true)
67+
}
68+
setPathResolved(true)
69+
}
70+
checkPathValidation()
71+
}, [history, setPathResolved])
72+
73+
return [pathResolved, invalidTcrAddr]
74+
}
75+
76+
export default usePathValidation

0 commit comments

Comments
 (0)