From d2394b84e075c81895b3257423d1165d31478b9d Mon Sep 17 00:00:00 2001 From: Artur Sapek Date: Thu, 22 Feb 2024 17:19:55 -0500 Subject: [PATCH] mess --- wormhole-connect/src/App.tsx | 86 +++++++--------------------- wormhole-connect/src/config/index.ts | 37 +++++++++++- wormhole-connect/src/config/types.ts | 2 +- wormhole-connect/src/main.tsx | 19 +++++- wormhole-connect/src/theme.ts | 4 +- 5 files changed, 73 insertions(+), 75 deletions(-) diff --git a/wormhole-connect/src/App.tsx b/wormhole-connect/src/App.tsx index 4b7123b6e..6cbb528f2 100644 --- a/wormhole-connect/src/App.tsx +++ b/wormhole-connect/src/App.tsx @@ -2,84 +2,38 @@ import * as React from 'react'; import { Provider } from 'react-redux'; import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; import { ThemeProvider, createTheme } from '@mui/material/styles'; -// import Box from '@mui/material/Box'; -import { PaletteMode } from '@mui/material'; -// import IconButton from '@mui/material/IconButton'; -// import Brightness4Icon from '@mui/icons-material/Brightness4'; -// import Brightness7Icon from '@mui/icons-material/Brightness7'; import './App.css'; import { store } from './store'; import AppRouter from './AppRouter'; -import { getDesignTokens } from './theme'; -import { THEME_MODE } from './config'; +import { getDesignTokens, dark } from './theme'; import BackgroundImage from './components/Background/BackgroundImage'; import ErrorBoundary from './components/ErrorBoundary'; +import { WormholeConnectConfig } from './config/types'; -const ColorModeContext = React.createContext({ - toggleColorMode: () => { - /* noop TODO ??? what is this for */ - }, -}); - -function App() { - const [mode, setMode] = React.useState(THEME_MODE); - const colorMode = React.useMemo( - () => ({ - // The dark mode switch would invoke this method - toggleColorMode: () => { - setMode((prevMode: PaletteMode) => - prevMode === 'light' ? 'dark' : 'light', - ); - }, - }), - [], - ); - // Update the theme only if the mode changes - const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]); - - return ( - - - - - - - - - - - - - - ); +export interface WormholeConnectProps { + config: WormholeConnectConfig; } -export default function ToggleColorMode() { - const [mode, setMode] = React.useState<'light' | 'dark'>('light'); - const colorMode = React.useMemo( - () => ({ - toggleColorMode: () => { - setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); - }, - }), - [], - ); - - const theme = React.useMemo( +export default function WormholeConnect({ config }: WormholeConnectProps) { + const muiTheme = React.useMemo( () => - createTheme({ - palette: { - mode, - }, - }), - [mode], + createTheme( + getDesignTokens(config.mode ?? 'dark', config.customTheme ?? dark), + ), + [config], ); return ( - - - + + + + + + + + + - + ); } diff --git a/wormhole-connect/src/config/index.ts b/wormhole-connect/src/config/index.ts index cb2329dab..80ab540ee 100644 --- a/wormhole-connect/src/config/index.ts +++ b/wormhole-connect/src/config/index.ts @@ -21,11 +21,42 @@ import { import { Alignment } from 'components/Header'; const el = document.getElementById('wormhole-connect'); -if (!el) - throw new Error('must specify an anchor element with id wormhole-connect'); -const configJson = el.getAttribute('config'); +let configJson = '{}'; +if (el) + //throw new Error('must specify an anchor element with id wormhole-connect'); + configJson = el.getAttribute('config') || '{}'; export const config: WormholeConnectConfig = JSON.parse(configJson!) || {}; +function getDefaultConfig( + env: 'MAINNET' | 'TESTNET' | 'DEVNET', +): Required { + const sdkConfig = WormholeContext.getConfig(env); + const networkData = { MAINNET, DEVNET, TESTNET }[env]; + + let config: Required = { + env, + showHamburgerMenu: false, + }; + + config.rpcs = Object.assign({}, sdkConfig.rpcs, networkData.rpcs); + + config.wormholeRpcs = { + MAINNET: [ + 'https://wormhole-v2-mainnet-api.mcf.rocks', + 'https://wormhole-v2-mainnet-api.chainlayer.network', + 'https://wormhole-v2-mainnet-api.staking.fund', + ], + TESTNET: [ + 'https://guardian.testnet.xlabs.xyz', + 'https://guardian-01.testnet.xlabs.xyz', + 'https://guardian-02.testnet.xlabs.xyz', + ], + DEVNET: ['http://localhost:7071'], + }[env]; + + return config; +} + const getEnv = () => { const processEnv = import.meta.env.REACT_APP_CONNECT_ENV?.toLowerCase(); if (config.env === 'mainnet' || processEnv === 'mainnet') return 'MAINNET'; diff --git a/wormhole-connect/src/config/types.ts b/wormhole-connect/src/config/types.ts index 8352e0336..6db758094 100644 --- a/wormhole-connect/src/config/types.ts +++ b/wormhole-connect/src/config/types.ts @@ -74,7 +74,7 @@ export interface WormholeConnectConfig { tokens?: string[]; tokensConfig?: TokensConfig; mode?: 'dark' | 'light'; - customTheme?: ExtendedTheme; + theme?: ExtendedTheme; cta?: { text: string; link: string; diff --git a/wormhole-connect/src/main.tsx b/wormhole-connect/src/main.tsx index 4aa23c0a3..c56fa6c0b 100644 --- a/wormhole-connect/src/main.tsx +++ b/wormhole-connect/src/main.tsx @@ -1,17 +1,30 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import App from './App'; import ErrorBoundary from './components/ErrorBoundary'; - +import WormholeConnect from './App'; +import { dark } from './theme'; export * from './theme'; +function DemoApp() { + return ( + + ); +} + const root = ReactDOM.createRoot( document.getElementById('wormhole-connect') as HTMLElement, ); + root.render( - + + , ); diff --git a/wormhole-connect/src/theme.ts b/wormhole-connect/src/theme.ts index eec054f8c..c982d9fb0 100644 --- a/wormhole-connect/src/theme.ts +++ b/wormhole-connect/src/theme.ts @@ -286,7 +286,7 @@ export const dark: ExtendedTheme = { }, }; -export const getDesignTokens = (mode: PaletteMode) => +export const getDesignTokens = (mode: PaletteMode, theme: ExtendedTheme) => createTheme({ components: { MuiPaper: { @@ -315,6 +315,6 @@ export const getDesignTokens = (mode: PaletteMode) => }, palette: { mode, - ...THEME, + ...theme, }, });