mess

Author: artursapek

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