Skip to content

Commit 8fc6584

Browse files
artursapekartursapek
committed
update network selector to pull from connect lib
1 parent 0b29578 commit 8fc6584

File tree

1 file changed

+45
-57
lines changed

1 file changed

+45
-57
lines changed

‎builder/src/App.tsx

+45-57
Original file line numberDiff line numberDiff line change
@@ -269,10 +269,9 @@ function App() {
269269
// END ROUTES
270270
// BEGIN ENV
271271
const [env, setEnv] = useState<"testnet" | "mainnet">("testnet");
272-
const [_networkIndexes, setNetworkIndexes] = useState<number[] | undefined>(
272+
const [selectedChains, setSelectedChains] = useState<string[] | undefined>(
273273
undefined
274274
);
275-
const [networkIndexes] = useDebounce(_networkIndexes, 1000);
276275
const [_tokens, setTokens] = useState<string[] | undefined>(undefined);
277276
const [tokens] = useDebounce(_tokens, 1000);
278277
const testnetTokens = useMemo(
@@ -313,21 +312,21 @@ function App() {
313312
}, []);
314313
// networks and tokens handlers come after defaults so they can appropriately reset them
315314
const handleClearNetworks = useCallback(() => {
316-
setNetworkIndexes(undefined);
315+
setSelectedChains(undefined);
317316
}, []);
318317
const handleNoneNetworks = useCallback(() => {
319318
// clear defaults to avoid bugs (could be smarter)
320319
setDefaultFromNetwork(undefined);
321320
setDefaultToNetwork(undefined);
322321
setRequiredNetwork(undefined);
323-
setNetworkIndexes([]);
322+
setSelectedChains([]);
324323
}, []);
325324
const handleNetworksChange = useCallback((e: any) => {
326325
// clear defaults to avoid bugs (could be smarter)
327326
setDefaultFromNetwork(undefined);
328327
setDefaultToNetwork(undefined);
329328
setRequiredNetwork(undefined);
330-
setNetworkIndexes(
329+
setSelectedChains(
331330
typeof e.target.value === "string"
332331
? e.target.value
333332
.split(",")
@@ -407,19 +406,10 @@ function App() {
407406
setEnv(value);
408407
}
409408
}, []);
410-
const [networks, testnetNetworks] = useMemo(() => {
411-
return !networkIndexes
412-
? [undefined, undefined]
413-
: NETWORKS.filter((v, i) => networkIndexes.indexOf(i) > -1).reduce<
414-
[ChainName[], TestnetChainName[]]
415-
>(
416-
([networks, testnetNetworks], v) => [
417-
[...networks, v[env]],
418-
[...testnetNetworks, v.testnet],
419-
],
420-
[[], []]
421-
);
422-
}, [networkIndexes, env]);
409+
410+
const chains =
411+
env === "mainnet" ? CONFIG.MAINNET.chains : CONFIG.TESTNET.chains;
412+
423413
// END ENV
424414
// START BRIDGE COMPLETE
425415
const [_ctaText, setCtaText] = useState<string>("");
@@ -443,7 +433,7 @@ function App() {
443433
setDefaultToNetwork(undefined);
444434
setDefaultToken(undefined);
445435
setRequiredNetwork(undefined);
446-
setNetworkIndexes(undefined);
436+
setSelectedChains(undefined);
447437
setTokens(undefined);
448438
setRpcs(undefined);
449439
setEnv("testnet");
@@ -466,7 +456,6 @@ function App() {
466456
() => ({
467457
env: "testnet", // always testnet for the builder
468458
rpcs: testnetRpcs,
469-
networks: testnetNetworks, // always testnet for the builder
470459
tokens: testnetTokens, // always testnet for the builder
471460
cta:
472461
ctaText && ctaLink
@@ -493,7 +482,6 @@ function App() {
493482
}),
494483
[
495484
testnetRpcs,
496-
testnetNetworks,
497485
testnetTokens,
498486
ctaText,
499487
ctaLink,
@@ -511,7 +499,13 @@ function App() {
511499
setVersionOrTag(value);
512500
}, []);
513501
const [htmlCode, jsxCode] = useMemo(() => {
514-
const realConfig = { ...config, env, rpcs, networks, tokens };
502+
const realConfig = {
503+
...config,
504+
env,
505+
rpcs,
506+
networks: selectedChains,
507+
tokens,
508+
};
515509
const realConfigString = JSON.stringify(realConfig);
516510
return [
517511
`<div id="wormhole-connect" data-config='${realConfigString}' data-theme='${customTheme}' /></div>
@@ -534,7 +528,7 @@ function App() {
534528
);
535529
}`,
536530
];
537-
}, [config, env, rpcs, networks, tokens, versionOrTag]);
531+
}, [config, env, rpcs, selectedChains, tokens, versionOrTag]);
538532
const [openCopySnack, setOpenCopySnack] = useState<boolean>(false);
539533
const handleCopySnackClose = useCallback(() => {
540534
setOpenCopySnack(false);
@@ -1003,30 +997,24 @@ function App() {
1003997
<TextField
1004998
select
1005999
fullWidth
1006-
value={
1007-
_networkIndexes
1008-
? _networkIndexes
1009-
: NETWORKS.map((_, i) => i)
1010-
}
1000+
value={selectedChains || Object.keys(chains)}
10111001
onChange={handleNetworksChange}
10121002
SelectProps={{
10131003
multiple: true,
10141004
renderValue: (selected: any) =>
1015-
!_networkIndexes
1005+
!selectedChains
10161006
? "All Networks"
1017-
: selected
1018-
.map((i: number) => NETWORKS[i].name)
1019-
.join(", "),
1007+
: selectedChains.join(", "),
10201008
}}
10211009
>
1022-
{NETWORKS.map((network, idx) => (
1023-
<MenuItem key={idx} value={idx}>
1010+
{Object.keys(chains).map((chain) => (
1011+
<MenuItem key={chain} value={chain}>
10241012
<Checkbox
10251013
checked={
1026-
!_networkIndexes || _networkIndexes.indexOf(idx) > -1
1014+
!selectedChains || selectedChains.includes(chain)
10271015
}
10281016
/>
1029-
<ListItemText primary={network.name} />
1017+
<ListItemText primary={chain} />
10301018
</MenuItem>
10311019
))}
10321020
</TextField>
@@ -1112,15 +1100,15 @@ function App() {
11121100
<MenuItem value={""}>
11131101
<ListItemText primary="(None)" />
11141102
</MenuItem>
1115-
{_networkIndexes
1116-
? _networkIndexes.map((nIdx) => (
1117-
<MenuItem key={nIdx} value={NETWORKS[nIdx][env]}>
1118-
<ListItemText primary={NETWORKS[nIdx].name} />
1103+
{selectedChains
1104+
? selectedChains.map((chain) => (
1105+
<MenuItem key={chain} value={chain}>
1106+
<ListItemText primary={chain} />
11191107
</MenuItem>
11201108
))
1121-
: NETWORKS.map((n) => (
1122-
<MenuItem key={n.name} value={n[env]}>
1123-
<ListItemText primary={n.name} />
1109+
: Object.keys(chains).map((chain) => (
1110+
<MenuItem key={chain} value={chain}>
1111+
<ListItemText primary={chain} />
11241112
</MenuItem>
11251113
))}
11261114
</TextField>
@@ -1147,15 +1135,15 @@ function App() {
11471135
<MenuItem value={""}>
11481136
<ListItemText primary="(None)" />
11491137
</MenuItem>
1150-
{_networkIndexes
1151-
? _networkIndexes.map((nIdx) => (
1152-
<MenuItem key={nIdx} value={NETWORKS[nIdx][env]}>
1153-
<ListItemText primary={NETWORKS[nIdx].name} />
1138+
{selectedChains
1139+
? selectedChains.map((chain) => (
1140+
<MenuItem key={chain} value={chain}>
1141+
<ListItemText primary={chain} />
11541142
</MenuItem>
11551143
))
1156-
: NETWORKS.map((n) => (
1157-
<MenuItem key={n.name} value={n[env]}>
1158-
<ListItemText primary={n.name} />
1144+
: Object.keys(chains).map((chain) => (
1145+
<MenuItem key={chain} value={chain}>
1146+
<ListItemText primary={chain} />
11591147
</MenuItem>
11601148
))}
11611149
</TextField>
@@ -1206,15 +1194,15 @@ function App() {
12061194
<MenuItem value={""}>
12071195
<ListItemText primary="(None)" />
12081196
</MenuItem>
1209-
{_networkIndexes
1210-
? _networkIndexes.map((nIdx) => (
1211-
<MenuItem key={nIdx} value={NETWORKS[nIdx][env]}>
1212-
<ListItemText primary={NETWORKS[nIdx].name} />
1197+
{selectedChains
1198+
? selectedChains.map((chain) => (
1199+
<MenuItem key={chain} value={chain}>
1200+
<ListItemText primary={chain} />
12131201
</MenuItem>
12141202
))
1215-
: NETWORKS.map((n) => (
1216-
<MenuItem key={n.name} value={n[env]}>
1217-
<ListItemText primary={n.name} />
1203+
: Object.keys(chains).map((chain) => (
1204+
<MenuItem key={chain} value={chain}>
1205+
<ListItemText primary={chain} />
12181206
</MenuItem>
12191207
))}
12201208
</TextField>

0 commit comments

Comments
 (0)