From 1cd397a7e15cbf64bb267eb950c0457f3afcb675 Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Thu, 14 Mar 2024 12:07:37 -0400 Subject: [PATCH] revert changes to builder --- builder/package.json | 2 +- builder/src/App.tsx | 184 ++++++++++--------- builder/src/Background.tsx | 3 +- builder/src/components/ColorPicker.tsx | 8 +- builder/src/consts.ts | 17 +- builder/src/theme.ts | 244 +++++++++++++++++++++++++ 6 files changed, 352 insertions(+), 106 deletions(-) create mode 100644 builder/src/theme.ts diff --git a/builder/package.json b/builder/package.json index 08e098f1f..7f91cad8a 100644 --- a/builder/package.json +++ b/builder/package.json @@ -14,7 +14,7 @@ "@types/node": "^16.18.25", "@types/react": "^18.2.0", "@types/react-dom": "^18.2.1", - "@wormhole-foundation/wormhole-connect": "file:../wormhole-connect/wormhole-foundation-wormhole-connect-0.0.1-beta.0.tgz", + "@wormhole-foundation/wormhole-connect": "^0.1.4", "react": "^18.2.0", "react-color": "^2.19.3", "react-dom": "^18.2.0", diff --git a/builder/src/App.tsx b/builder/src/App.tsx index 02359d10a..ec5ffe160 100644 --- a/builder/src/App.tsx +++ b/builder/src/App.tsx @@ -36,22 +36,25 @@ import { Typography, useMediaQuery, } from "@mui/material"; -import WormholeConnect, { +import WormholeBridge, { ChainName, MAINNET_CHAINS, + MainnetChainName, + Rpcs, TESTNET_CHAINS, + TestnetChainName, + Theme, WormholeConnectConfig, - dark, - CONFIG, + defaultTheme, } from "@wormhole-foundation/wormhole-connect"; -import type { CustomTheme } from "@wormhole-foundation/wormhole-connect"; - import { useCallback, useEffect, useMemo, useState } from "react"; import { useDebounce } from "use-debounce"; import Background from "./Background"; import ColorPicker from "./components/ColorPicker"; import RouteCard from "./components/RouteCard"; import { + DEFAULT_MAINNET_RPCS, + DEFAULT_TESTNET_RPCS, MAINNET_TOKEN_KEYS, NETWORKS, ROUTE_INFOS, @@ -63,18 +66,12 @@ import { setObjectPathImmutable, } from "./utils"; -export type MainnetChainName = keyof typeof MAINNET_CHAINS; -export type TestnetChainName = keyof typeof TESTNET_CHAINS; -export type Rpcs = { - [chain in ChainName]?: string; -}; - -const version = "0.3.0"; +const version = "0.1.4"; // generated with https://www.srihash.org/ const versionScriptIntegrity = - "sha384-QOTWWlgPEcpWnzakQRaUW71dYatQWsRJYtCjz+y94hwZxjxg9jU7X+sE6pDmo6Ao"; + "sha384-NUeZzmcZSVf4i3sUHD1rhtihig08WkCKu42too+Na8ll/2Sxr8v8D1i9IuVrF70A"; const versionLinkIntegrity = - "sha384-BTkX2AhTeIfxDRFsJbLtR26TQ9QKKpi7EMe807JdfQQBTAkUT9a2mSGwf/5CJ4bF"; + "sha384-KGZI5sQxWDSIe8Xzhvu4eO0fi8KYtEmDnYS2Qn5xrtw667xfxFINL3uN48d/djuY"; const nonBreakingTag = "latest-v0.1"; const latestTag = "latest"; @@ -168,7 +165,7 @@ const ScreenButton = ({ ); }; -const customized = dark; +const customized = defaultTheme; customized.background.default = "transparent"; const defaultThemeJSON = JSON.stringify(customized, undefined, 2); @@ -218,16 +215,17 @@ function App() { }; } }, [debouncedFontHref]); - const [customTheme, setCustomTheme] = useState( - undefined - ); + const [_customTheme, setCustomTheme] = useState(undefined); + const [debouncedCustomTheme] = useDebounce(_customTheme, 1000); + const customTheme = + _customTheme === undefined ? undefined : debouncedCustomTheme; const [customThemeText, setCustomThemeText] = useState(defaultThemeJSON); // const [customThemeError, setCustomThemeError] = useState(false); const handleModeChange = useCallback( (e: any, value: string) => { if (value === "dark" || value === "light") { setMode(value); - setCustomTheme({ mode: value }); + setCustomTheme(undefined); } else { setMode(undefined); try { @@ -269,9 +267,10 @@ function App() { // END ROUTES // BEGIN ENV const [env, setEnv] = useState<"testnet" | "mainnet">("testnet"); - const [selectedChains, setSelectedChains] = useState( + const [_networkIndexes, setNetworkIndexes] = useState( undefined ); + const [networkIndexes] = useDebounce(_networkIndexes, 1000); const [_tokens, setTokens] = useState(undefined); const [tokens] = useDebounce(_tokens, 1000); const testnetTokens = useMemo( @@ -312,21 +311,21 @@ function App() { }, []); // networks and tokens handlers come after defaults so they can appropriately reset them const handleClearNetworks = useCallback(() => { - setSelectedChains(undefined); + setNetworkIndexes(undefined); }, []); const handleNoneNetworks = useCallback(() => { // clear defaults to avoid bugs (could be smarter) setDefaultFromNetwork(undefined); setDefaultToNetwork(undefined); setRequiredNetwork(undefined); - setSelectedChains([]); + setNetworkIndexes([]); }, []); const handleNetworksChange = useCallback((e: any) => { // clear defaults to avoid bugs (could be smarter) setDefaultFromNetwork(undefined); setDefaultToNetwork(undefined); setRequiredNetwork(undefined); - setSelectedChains( + setNetworkIndexes( typeof e.target.value === "string" ? e.target.value .split(",") @@ -406,10 +405,19 @@ function App() { setEnv(value); } }, []); - - const chains = - env === "mainnet" ? CONFIG.MAINNET.chains : CONFIG.TESTNET.chains; - + const [networks, testnetNetworks] = useMemo(() => { + return !networkIndexes + ? [undefined, undefined] + : NETWORKS.filter((v, i) => networkIndexes.indexOf(i) > -1).reduce< + [ChainName[], TestnetChainName[]] + >( + ([networks, testnetNetworks], v) => [ + [...networks, v[env]], + [...testnetNetworks, v.testnet], + ], + [[], []] + ); + }, [networkIndexes, env]); // END ENV // START BRIDGE COMPLETE const [_ctaText, setCtaText] = useState(""); @@ -433,7 +441,7 @@ function App() { setDefaultToNetwork(undefined); setDefaultToken(undefined); setRequiredNetwork(undefined); - setSelectedChains(undefined); + setNetworkIndexes(undefined); setTokens(undefined); setRpcs(undefined); setEnv("testnet"); @@ -450,13 +458,16 @@ function App() { }, [] ); - // NOTE: the WormholeConnect component is keyed by the stringified version of config + // NOTE: the WormholeBridge component is keyed by the stringified version of config // because otherwise the component did not update on changes const config: WormholeConnectConfig = useMemo( () => ({ env: "testnet", // always testnet for the builder rpcs: testnetRpcs, + networks: testnetNetworks, // always testnet for the builder tokens: testnetTokens, // always testnet for the builder + mode, + customTheme, cta: ctaText && ctaLink ? { @@ -482,7 +493,10 @@ function App() { }), [ testnetRpcs, + testnetNetworks, testnetTokens, + mode, + customTheme, ctaText, ctaLink, defaultFromNetwork, @@ -499,17 +513,11 @@ function App() { setVersionOrTag(value); }, []); const [htmlCode, jsxCode] = useMemo(() => { - const realConfig = { - ...config, - env, - rpcs, - networks: selectedChains, - tokens, - }; + const realConfig = { ...config, env, rpcs, networks, tokens }; const realConfigString = JSON.stringify(realConfig); return [ - `
-