mess

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<PaletteMode>(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 (
- <Provider store={store}>
- <ColorModeContext.Provider value={colorMode}>
- <ThemeProvider theme={theme}>
- <ScopedCssBaseline enableColorScheme>
- <ErrorBoundary>
- <BackgroundImage>
- <AppRouter />
- </BackgroundImage>
- </ErrorBoundary>
- </ScopedCssBaseline>
- </ThemeProvider>
- </ColorModeContext.Provider>
- </Provider>
- );
+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 (
- <ColorModeContext.Provider value={colorMode}>
- <ThemeProvider theme={theme}>
- <App />
+ <Provider store={store}>
+ <ThemeProvider theme={muiTheme}>
+ <ScopedCssBaseline enableColorScheme>
+ <ErrorBoundary>
+ <BackgroundImage>
+ <AppRouter />
+ </BackgroundImage>
+ </ErrorBoundary>
+ </ScopedCssBaseline>
  </ThemeProvider>
- </ColorModeContext.Provider>
+ </Provider>
  );
 }

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<WormholeConnectConfig> {
+ const sdkConfig = WormholeContext.getConfig(env);
+ const networkData = { MAINNET, DEVNET, TESTNET }[env];
+
+ let config: Required<WormholeConnectConfig> = {
+ 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';

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;

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 (
+ <WormholeConnect
+ config={{
+ mode: 'dark',
+ theme: dark,
+ }}
+ />
+ );
+}
+
 const root = ReactDOM.createRoot(
  document.getElementById('wormhole-connect') as HTMLElement,
 );
+
 root.render(
  <React.StrictMode>
  <ErrorBoundary>
- <App />
+ <DemoApp />
  </ErrorBoundary>
+ <DemoApp />
  </React.StrictMode>,
 );

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,
  },
  });