handle config in AppRouter so we can dispatch

Author: artursapek

wormhole-connect/src/AppRouter.tsx

@@ -6,6 +6,8 @@ import { RootState } from './store';
 import { clearRedeem } from './store/redeem';
 import { clearTransfer } from './store/transferInput';
 import { usePrevious } from './utils';
+import { WormholeConnectConfig } from './config/types';
+import { setConfig } from './config';
 
 import Bridge from './views/Bridge/Bridge';
 import FAQ from './views/FAQ';
@@ -34,11 +36,27 @@ const useStyles = makeStyles()((theme: any) => ({
   },
 }));
 
+interface Props {
+  config?: WormholeConnectConfig;
+}
+
 // since this will be embedded, we'll have to use pseudo routes instead of relying on the url
-function AppRouter() {
+function AppRouter({ config }: Props) {
   const { classes } = useStyles();
   const dispatch = useDispatch();
 
+  // We update the global config once when WormholeConnect is first mounted, if a custom
+  // config was provided.
+  //
+  // We don't allow config changes afterwards because they could lead to lots of
+  // broken and undesired behavior.
+  React.useEffect(() => {
+    if (config) {
+      setConfig(config);
+      dispatch(clearTransfer());
+    }
+  }, []);
+
   const showWalletModal = useSelector(
     (state: RootState) => state.router.showWalletModal,
   );

wormhole-connect/src/WormholeConnect.tsx

@@ -5,11 +5,11 @@ import { ThemeProvider, createTheme } from '@mui/material/styles';
 import './App.css';
 import { store } from './store';
 import AppRouter from './AppRouter';
-import { getDesignTokens, CustomTheme, dark } from './theme';
+import { getDesignTokens, dark } from './theme';
 import BackgroundImage from './components/Background/BackgroundImage';
 import ErrorBoundary from './components/ErrorBoundary';
 import { WormholeConnectConfig } from './config/types';
-import { setConfig } from './config';
+import { CustomTheme } from 'theme';
 
 export interface WormholeConnectProps {
   // theme can be updated at any time to change the colors of Connect
@@ -22,15 +22,6 @@ export default function WormholeConnect({
   config,
   theme,
 }: WormholeConnectProps) {
-  // We update the global config once when WormholeConnect is first mounted, if a custom
-  // config was provided.
-  //
-  // We don't allow config changes afterwards because they could lead to lots of
-  // broken and undesired behavior.
-  React.useEffect(() => {
-    if (config) setConfig(config);
-  }, []);
-
   // Handle theme changes at any time
   const muiTheme = React.useMemo(
     () => createTheme(getDesignTokens(theme ?? dark)),
@@ -43,7 +34,7 @@ export default function WormholeConnect({
         <ScopedCssBaseline enableColorScheme>
           <ErrorBoundary>
             <BackgroundImage>
-              <AppRouter />
+              <AppRouter config={config} />
             </BackgroundImage>
           </ErrorBoundary>
         </ScopedCssBaseline>

wormhole-connect/src/store/transferInput.ts

@@ -127,43 +127,46 @@ export interface TransferInputState {
   supportedDestTokens: TokenConfig[];
 }
 
-const initialState: TransferInputState = {
-  showValidationState: false,
-  validations: {
-    fromChain: '',
-    toChain: '',
-    token: '',
+// This is a function because config might have changed since we last cleared this store
+function getInitialState(): TransferInputState {
+  return {
+    showValidationState: false,
+    validations: {
+      fromChain: '',
+      toChain: '',
+      token: '',
+      destToken: '',
+      amount: '',
+      route: '',
+      toNativeToken: '',
+      sendingWallet: '',
+      receivingWallet: '',
+      foreignAsset: '',
+      relayerFee: '',
+      receiveAmount: '',
+    },
+    routeStates: undefined,
+    fromChain: config.bridgeDefaults?.fromNetwork || undefined,
+    toChain: config.bridgeDefaults?.toNetwork || undefined,
+    token: config.bridgeDefaults?.token || '',
     destToken: '',
     amount: '',
-    route: '',
-    toNativeToken: '',
-    sendingWallet: '',
-    receivingWallet: '',
+    receiveAmount: getEmptyDataWrapper(),
+    route: undefined,
+    balances: {},
     foreignAsset: '',
-    relayerFee: '',
-    receiveAmount: '',
-  },
-  routeStates: undefined,
-  fromChain: config.bridgeDefaults?.fromNetwork || undefined,
-  toChain: config.bridgeDefaults?.toNetwork || undefined,
-  token: config.bridgeDefaults?.token || '',
-  destToken: '',
-  amount: '',
-  receiveAmount: getEmptyDataWrapper(),
-  route: undefined,
-  balances: {},
-  foreignAsset: '',
-  associatedTokenAddress: '',
-  gasEst: {
-    send: '',
-    claim: '',
-  },
-  isTransactionInProgress: false,
-  receiverNativeBalance: '',
-  supportedSourceTokens: [],
-  allSupportedDestTokens: [],
-  supportedDestTokens: [],
-};
+    associatedTokenAddress: '',
+    gasEst: {
+      send: '',
+      claim: '',
+    },
+    isTransactionInProgress: false,
+    receiverNativeBalance: '',
+    supportedSourceTokens: [],
+    allSupportedDestTokens: [],
+    supportedDestTokens: [],
+  };
+}
 
 const performModificationsIfFromChainChanged = (state: TransferInputState) => {
   const { fromChain, token, route } = state;
@@ -259,7 +262,7 @@ const establishRoute = (state: TransferInputState) => {
 
 export const transferInputSlice = createSlice({
   name: 'transfer',
-  initialState,
+  initialState: getInitialState(),
   reducers: {
     // validations
     setValidations: (
@@ -409,6 +412,7 @@ export const transferInputSlice = createSlice({
     },
     // clear inputs
     clearTransfer: (state: TransferInputState) => {
+      const initialState = getInitialState();
       Object.keys(state).forEach((key) => {
         // @ts-ignore
         state[key] = initialState[key];