Skip to content

Commit 38968d5

Browse files
artursapekartursapek
committed
wip: update builder to this version of connect
1 parent 1e0276f commit 38968d5

File tree

10 files changed

+112
-298
lines changed

10 files changed

+112
-298
lines changed

‎builder/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"@types/node": "^16.18.25",
1515
"@types/react": "^18.2.0",
1616
"@types/react-dom": "^18.2.1",
17-
"@wormhole-foundation/wormhole-connect": "^0.2.6",
17+
"@wormhole-foundation/wormhole-connect": "file:../wormhole-connect/wormhole-foundation-wormhole-connect-0.0.1-beta.0.tgz",
1818
"react": "^18.2.0",
1919
"react-color": "^2.19.3",
2020
"react-dom": "^18.2.0",

‎builder/src/App.tsx

+39-37
Original file line numberDiff line numberDiff line change
@@ -36,25 +36,22 @@ import {
3636
Typography,
3737
useMediaQuery,
3838
} from "@mui/material";
39-
import WormholeBridge, {
39+
import WormholeConnect, {
4040
ChainName,
4141
MAINNET_CHAINS,
42-
MainnetChainName,
43-
Rpcs,
4442
TESTNET_CHAINS,
45-
TestnetChainName,
46-
Theme,
4743
WormholeConnectConfig,
48-
defaultTheme,
44+
dark,
45+
CONFIG,
4946
} from "@wormhole-foundation/wormhole-connect";
47+
import type { CustomTheme } from "@wormhole-foundation/wormhole-connect";
48+
5049
import { useCallback, useEffect, useMemo, useState } from "react";
5150
import { useDebounce } from "use-debounce";
5251
import Background from "./Background";
5352
import ColorPicker from "./components/ColorPicker";
5453
import RouteCard from "./components/RouteCard";
5554
import {
56-
DEFAULT_MAINNET_RPCS,
57-
DEFAULT_TESTNET_RPCS,
5855
MAINNET_TOKEN_KEYS,
5956
NETWORKS,
6057
ROUTE_INFOS,
@@ -66,7 +63,13 @@ import {
6663
setObjectPathImmutable,
6764
} from "./utils";
6865

69-
const version = "0.2.6";
66+
export type MainnetChainName = keyof typeof MAINNET_CHAINS;
67+
export type TestnetChainName = keyof typeof TESTNET_CHAINS;
68+
export type Rpcs = {
69+
[chain in ChainName]?: string;
70+
};
71+
72+
const version = "0.3.0";
7073
// generated with https://www.srihash.org/
7174
const versionScriptIntegrity =
7275
"sha384-QOTWWlgPEcpWnzakQRaUW71dYatQWsRJYtCjz+y94hwZxjxg9jU7X+sE6pDmo6Ao";
@@ -165,7 +168,7 @@ const ScreenButton = ({
165168
);
166169
};
167170

168-
const customized = defaultTheme;
171+
const customized = dark;
169172
customized.background.default = "transparent";
170173
const defaultThemeJSON = JSON.stringify(customized, undefined, 2);
171174

@@ -215,17 +218,16 @@ function App() {
215218
};
216219
}
217220
}, [debouncedFontHref]);
218-
const [_customTheme, setCustomTheme] = useState<Theme | undefined>(undefined);
219-
const [debouncedCustomTheme] = useDebounce(_customTheme, 1000);
220-
const customTheme =
221-
_customTheme === undefined ? undefined : debouncedCustomTheme;
221+
const [customTheme, setCustomTheme] = useState<CustomTheme | undefined>(
222+
undefined
223+
);
222224
const [customThemeText, setCustomThemeText] = useState(defaultThemeJSON);
223225
// const [customThemeError, setCustomThemeError] = useState<boolean>(false);
224226
const handleModeChange = useCallback(
225227
(e: any, value: string) => {
226228
if (value === "dark" || value === "light") {
227229
setMode(value);
228-
setCustomTheme(undefined);
230+
setCustomTheme({ mode: value });
229231
} else {
230232
setMode(undefined);
231233
try {
@@ -458,16 +460,14 @@ function App() {
458460
},
459461
[]
460462
);
461-
// NOTE: the WormholeBridge component is keyed by the stringified version of config
463+
// NOTE: the WormholeConnect component is keyed by the stringified version of config
462464
// because otherwise the component did not update on changes
463465
const config: WormholeConnectConfig = useMemo(
464466
() => ({
465467
env: "testnet", // always testnet for the builder
466468
rpcs: testnetRpcs,
467469
networks: testnetNetworks, // always testnet for the builder
468470
tokens: testnetTokens, // always testnet for the builder
469-
mode,
470-
customTheme,
471471
cta:
472472
ctaText && ctaLink
473473
? {
@@ -495,8 +495,6 @@ function App() {
495495
testnetRpcs,
496496
testnetNetworks,
497497
testnetTokens,
498-
mode,
499-
customTheme,
500498
ctaText,
501499
ctaLink,
502500
defaultFromNetwork,
@@ -516,7 +514,7 @@ function App() {
516514
const realConfig = { ...config, env, rpcs, networks, tokens };
517515
const realConfigString = JSON.stringify(realConfig);
518516
return [
519-
`<div id="wormhole-connect" config='${realConfigString}' /></div>
517+
`<div id="wormhole-connect" data-config='${realConfigString}' data-theme='${customTheme}' /></div>
520518
<script type="module" src="https://www.unpkg.com/@wormhole-foundation/wormhole-connect@${versionOrTag}/dist/main.js"${
521519
versionOrTag === version
522520
? ` integrity="${versionScriptIntegrity}" crossorigin="anonymous"`
@@ -527,10 +525,10 @@ function App() {
527525
? ` integrity="${versionLinkIntegrity}" crossorigin="anonymous"`
528526
: ""
529527
}/>`,
530-
`import WormholeBridge from '@wormhole-foundation/wormhole-connect';
528+
`import WormholeConnect from '@wormhole-foundation/wormhole-connect';
531529
function App() {
532530
return (
533-
<WormholeBridge config={${realConfigString}} ${
531+
<WormholeConnect config={${realConfigString}} ${
534532
versionOrTag === version ? "" : ` versionOrTag="${versionOrTag}"`
535533
}/>
536534
);
@@ -706,7 +704,7 @@ function App() {
706704
Widget
707705
</Typography>
708706
<ColorPicker
709-
customTheme={_customTheme}
707+
customTheme={customTheme}
710708
setCustomTheme={setCustomTheme}
711709
path="background.default"
712710
defaultTheme={customized}
@@ -720,7 +718,7 @@ function App() {
720718
Modal
721719
</Typography>
722720
<ColorPicker
723-
customTheme={_customTheme}
721+
customTheme={customTheme}
724722
setCustomTheme={setCustomTheme}
725723
path="modal.background"
726724
defaultTheme={customized}
@@ -734,7 +732,7 @@ function App() {
734732
Card
735733
</Typography>
736734
<ColorPicker
737-
customTheme={_customTheme}
735+
customTheme={customTheme}
738736
setCustomTheme={setCustomTheme}
739737
path="card.background"
740738
defaultTheme={customized}
@@ -748,7 +746,7 @@ function App() {
748746
Button
749747
</Typography>
750748
<ColorPicker
751-
customTheme={_customTheme}
749+
customTheme={customTheme}
752750
setCustomTheme={setCustomTheme}
753751
path="button.primary"
754752
defaultTheme={customized}
@@ -762,7 +760,7 @@ function App() {
762760
Action
763761
</Typography>
764762
<ColorPicker
765-
customTheme={_customTheme}
763+
customTheme={customTheme}
766764
setCustomTheme={setCustomTheme}
767765
path="button.action"
768766
defaultTheme={customized}
@@ -779,7 +777,7 @@ function App() {
779777
Primary
780778
</Typography>
781779
<ColorPicker
782-
customTheme={_customTheme}
780+
customTheme={customTheme}
783781
setCustomTheme={setCustomTheme}
784782
path="text.primary"
785783
defaultTheme={customized}
@@ -793,7 +791,7 @@ function App() {
793791
Secondary
794792
</Typography>
795793
<ColorPicker
796-
customTheme={_customTheme}
794+
customTheme={customTheme}
797795
setCustomTheme={setCustomTheme}
798796
path="text.secondary"
799797
defaultTheme={customized}
@@ -805,7 +803,7 @@ function App() {
805803
Button
806804
</Typography>
807805
<ColorPicker
808-
customTheme={_customTheme}
806+
customTheme={customTheme}
809807
setCustomTheme={setCustomTheme}
810808
path="button.primaryText"
811809
/>
@@ -818,7 +816,7 @@ function App() {
818816
Action
819817
</Typography>
820818
<ColorPicker
821-
customTheme={_customTheme}
819+
customTheme={customTheme}
822820
setCustomTheme={setCustomTheme}
823821
path="button.actionText"
824822
defaultTheme={customized}
@@ -840,7 +838,7 @@ function App() {
840838
label="Primary"
841839
name="primary"
842840
fullWidth
843-
value={getObjectPath(_customTheme, "font.primary")}
841+
value={getObjectPath(customTheme, "font.primary")}
844842
onChange={handleFontChange}
845843
size="small"
846844
sx={{ mt: 2 }}
@@ -849,7 +847,7 @@ function App() {
849847
label="Header"
850848
name="header"
851849
fullWidth
852-
value={getObjectPath(_customTheme, "font.header")}
850+
value={getObjectPath(customTheme, "font.header")}
853851
onChange={handleFontChange}
854852
size="small"
855853
sx={{ mt: 2 }}
@@ -985,8 +983,8 @@ function App() {
985983
? "Unknown RPC string scheme. Expected an http or websocket URI."
986984
: `Default: ${
987985
(env === "mainnet"
988-
? DEFAULT_MAINNET_RPCS[n[env]]
989-
: DEFAULT_TESTNET_RPCS[n[env]]) || "None"
986+
? CONFIG.MAINNET.rpcs[n[env]]
987+
: CONFIG.TESTNET.rpcs[n[env]]) || "None"
990988
}`
991989
}
992990
/>
@@ -1438,7 +1436,11 @@ function App() {
14381436
<Typography variant="h4" component="h2" gutterBottom>
14391437
Preview
14401438
</Typography>
1441-
<WormholeBridge config={config} key={JSON.stringify(config)} />
1439+
<WormholeConnect
1440+
config={config}
1441+
theme={customTheme}
1442+
key={JSON.stringify(config)}
1443+
/>
14421444
</Container>
14431445
</Box>
14441446
</Background>

‎builder/src/Background.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from "react";
22
import { makeStyles } from "tss-react/mui";
33
import bg from "./bg.svg";
4-
import { OPACITY } from "./theme";
54

65
const colors = {
76
bg: "#030712",
@@ -65,7 +64,7 @@ const useStyles = makeStyles()((theme) => ({
6564
width: "1379px",
6665
height: "1378px",
6766
position: "absolute",
68-
background: `radial-gradient(closest-side at 50% 50%, ${colors.pink}${OPACITY[60]} 0%, ${colors.pink}00 100%)`,
67+
background: `radial-gradient(closest-side at 50% 50%, ${colors.pink}99 0%, ${colors.pink}00 100%)`,
6968
opacity: "0.5",
7069
zIndex: "-1",
7170
pointerEvent: "none",

‎builder/src/components/ColorPicker.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Box, Button, ClickAwayListener, Tooltip } from "@mui/material";
2-
import { Theme } from "@wormhole-foundation/wormhole-connect";
2+
import { CustomTheme } from "@wormhole-foundation/wormhole-connect";
33
import { useCallback, useMemo, useState } from "react";
44
import {
55
Color,
@@ -37,10 +37,10 @@ export default function ColorPicker({
3737
path,
3838
defaultTheme,
3939
}: {
40-
customTheme: Theme | undefined;
41-
setCustomTheme: React.Dispatch<React.SetStateAction<Theme | undefined>>;
40+
customTheme: CustomTheme | undefined;
41+
setCustomTheme: React.Dispatch<React.SetStateAction<CustomTheme | undefined>>;
4242
path: string;
43-
defaultTheme: Theme;
43+
defaultTheme: CustomTheme;
4444
}) {
4545
const color = useMemo(
4646
() =>

‎builder/src/consts.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import {
2-
MainnetChainName,
3-
TestnetChainName,
2+
MAINNET_CHAINS,
3+
TESTNET_CHAINS,
44
} from "@wormhole-foundation/wormhole-connect";
55

6+
import type ExtendedTheme from "@wormhole-foundation/wormhole-connect";
7+
8+
export type MainnetChainName = keyof typeof MAINNET_CHAINS;
9+
export type TestnetChainName = keyof typeof TESTNET_CHAINS;
10+
611
export type Network = {
712
name: string;
813
testnet: TestnetChainName;

0 commit comments

Comments
 (0)