Organize UI-related config properties (wormhole-foundation#2628)

* wip: grouping UI-related configs together * wip substitutions * remaining config.ui substitutions * add config.ui as dependency
wormholelabs-xyz · Sep 18, 2024 · f7dc4ba · f7dc4ba
1 parent ffa196a
commit f7dc4ba
Show file tree

Hide file tree

Showing 29 changed files with 214 additions and 208 deletions.
diff --git a/wormhole-connect/src/components/ChainsModal.tsx b/wormhole-connect/src/components/ChainsModal.tsx
@@ -94,7 +94,11 @@ function ChainsModal(props: Props) {
     if (href) {
       props.onMoreNetworkSelect?.(href, chainName, target);
     } else {
-      props.onMoreNetworkSelect?.(config.moreNetworks!.href, chainName, target);
+      props.onMoreNetworkSelect?.(
+        config.ui.moreChains!.href,
+        chainName,
+        target,
+      );
     }
   };
   const supportedChains = useMemo(() => {
@@ -169,7 +173,7 @@ function ChainsModal(props: Props) {
                 )
               );
             })}
-            {config.moreNetworks?.networks.map((chain, i) => {
+            {config.ui.moreChains?.networks.map((chain, i) => {
               return (
                 <div
                   key={i}
@@ -179,10 +183,10 @@ function ChainsModal(props: Props) {
                   ])}
                   onClick={() =>
                     handleExtraNetwork(
-                      chain.href || config.moreNetworks!.href,
+                      chain.href || config.ui.moreChains!.href,
                       chain.name ||
                         chain.label.toLocaleLowerCase().split(' ').join('_'),
-                      chain.target || config.moreNetworks?.target,
+                      chain.target || config.ui.moreChains?.target,
                     )
                   }
                 >
@@ -192,7 +196,7 @@ function ChainsModal(props: Props) {
                     height={48}
                     showOpenInNewIcon={chain.showOpenInNewIcon}
                     description={
-                      chain.description || config.moreNetworks?.description
+                      chain.description || config.ui.moreChains?.description
                     }
                   />
                   <div className={classes.chainText}>{chain.label}</div>

diff --git a/wormhole-connect/src/components/ConnectWallet.tsx b/wormhole-connect/src/components/ConnectWallet.tsx
@@ -17,7 +17,7 @@ import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state';
 import Popover from '@mui/material/Popover';
 import config from 'config';
 import { TransferSide } from 'config/types';
-import { ExplorerConfig } from 'config/types';
+import { ExplorerConfig } from 'config/ui';
 
 type StyleProps = { disabled?: boolean };
 const useStyles = makeStyles<StyleProps>()((theme: any, { disabled }) => ({
@@ -153,12 +153,12 @@ function ConnectWallet(props: Props) {
                     >
                       Copy address
                     </div>
-                    {config.explorer ? (
+                    {config.ui.explorer ? (
                       <ExplorerLink
                         address={wallet.address}
-                        href={config.explorer.href}
-                        target={config.explorer.target}
-                        label={config.explorer.label}
+                        href={config.ui.explorer.href}
+                        target={config.ui.explorer.target}
+                        label={config.ui.explorer.label}
                       />
                     ) : null}
                     <div

diff --git a/wormhole-connect/src/components/FooterNavBar.tsx b/wormhole-connect/src/components/FooterNavBar.tsx
@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui';
 import { ICON } from 'utils/style';
 import { Route, setRoute } from 'store/router';
 import config from 'config';
-import { MenuEntry } from 'config/types';
+import { MenuEntry } from 'config/ui';
 
 const useStyles = makeStyles()((theme) => ({
   menuIcon: ICON,
@@ -60,7 +60,10 @@ export default function FooterNavBar() {
     [dispatch],
   );
 
-  const entries = config.menu.reduce(itemAppender, defaultMenuItems(navigate));
+  const entries = config.ui.menu.reduce(
+    itemAppender,
+    defaultMenuItems(navigate),
+  );
 
   return (
     <div className={classes.menu}>

diff --git a/wormhole-connect/src/components/TokensModal.tsx b/wormhole-connect/src/components/TokensModal.tsx
@@ -223,22 +223,22 @@ function DisplayTokens(props: DisplayTokensProps) {
                 </div>
               </div>
             ))}
-            {config.moreTokens ? (
+            {config.ui.moreTokens ? (
               <>
                 <div>
                   <Button
                     disableRipple
                     className={classes.moreTokens}
                     onClick={() =>
-                      config.moreTokens &&
+                      config.ui.moreTokens &&
                       moreTokens(
-                        config.moreTokens.href,
-                        config.moreTokens.target,
+                        config.ui.moreTokens.href,
+                        config.ui.moreTokens.target,
                       )
                     }
                   >
                     <span className={classes.moreTokensLabel}>
-                      {config.moreTokens.label}
+                      {config.ui.moreTokens.label}
                     </span>
                     <IconButton className={classes.iconButton}>
                       <OpenInNewIcon className={classes.iconOpenInNew} />

diff --git a/wormhole-connect/src/config/constants.ts b/wormhole-connect/src/config/constants.ts
@@ -1,4 +1,4 @@
-import { type Chain } from '@wormhole-foundation/sdk';
+import { type Chain, Network } from '@wormhole-foundation/sdk';
 
 export const WORMSCAN = 'https://wormholescan.io/#/';
 
@@ -32,3 +32,11 @@ export const CHAIN_ORDER: Chain[] = [
   'Evmos',
   'Mantle',
 ];
+
+export const getAttestUrl = (network: Network): string => {
+  if (network === 'Testnet') {
+    return 'https://wormhole-foundation.github.io/example-token-bridge-ui/#/register';
+  } else {
+    return 'https://portalbridge.com/advanced-tools/#/register';
+  }
+};
diff --git a/wormhole-connect/src/config/index.ts b/wormhole-connect/src/config/index.ts
@@ -39,6 +39,7 @@ import RouteOperator from 'routes/operator';
 import { getTokenDecimals, getWrappedTokenId } from 'utils';
 import { CHAIN_ORDER } from './constants';
 import { getTokenBridgeWrappedTokenAddressSync } from 'utils/sdkv2';
+import { createUiConfig } from './ui';
 
 export function buildConfig(
   customConfig?: WormholeConnectConfig,
@@ -78,8 +79,8 @@ export function buildConfig(
 
   const whLegacy = getLegacyWormholeContext(network, sdkConfig, rpcs);
 
-  if (customConfig?.bridgeDefaults) {
-    validateDefaults(customConfig.bridgeDefaults, networkData.chains, tokens);
+  if (customConfig?.ui?.defaultInputs) {
+    validateDefaults(customConfig.ui.defaultInputs, networkData.chains, tokens);
   }
 
   const sdkConverter = new SDKConverter(whLegacy);
@@ -159,28 +160,7 @@ export function buildConfig(
     routes: new RouteOperator(customConfig?.routes),
 
     // UI details
-    cta: customConfig?.cta,
-    explorer: customConfig?.explorer,
-    attestUrl: {
-      mainnet: 'https://portalbridge.com/advanced-tools/#/register',
-      devnet: '',
-      testnet:
-        'https://wormhole-foundation.github.io/example-token-bridge-ui/#/register',
-    }[network],
-    bridgeDefaults: customConfig?.bridgeDefaults,
-    cctpWarning: customConfig?.cctpWarning?.href || '',
-    pageHeader: customConfig?.pageHeader,
-    pageSubHeader: customConfig?.pageSubHeader,
-    menu: customConfig?.menu ?? [],
-    searchTx: customConfig?.searchTx,
-    moreTokens: customConfig?.moreTokens,
-    moreNetworks: customConfig?.moreNetworks,
-    partnerLogo: customConfig?.partnerLogo,
-    walletConnectProjectId:
-      customConfig?.walletConnectProjectId ??
-      import.meta.env.REACT_APP_WALLET_CONNECT_PROJECT_ID,
-    showHamburgerMenu: customConfig?.showHamburgerMenu ?? false,
-    previewMode: !!customConfig?.previewMode,
+    ui: createUiConfig({ ...customConfig?.ui }),
 
     // Route options
     ethBridgeMaxAmount: customConfig?.ethBridgeMaxAmount ?? 5,

diff --git a/wormhole-connect/src/config/types.ts b/wormhole-connect/src/config/types.ts
@@ -15,13 +15,13 @@ import {
   TokenAddress as TokenAddressV2,
 } from '@wormhole-foundation/sdk';
 
-import { Alignment } from 'components/Header';
 import { WormholeConnectPartialTheme } from 'theme';
 import { TransferDetails, WormholeConnectEventHandler } from 'telemetry/types';
 import { SDKConverter } from './converter';
 
 import { routes } from '@wormhole-foundation/sdk';
 import RouteOperator from 'routes/operator';
+import { UiConfig } from './ui';
 
 export enum Icon {
   'AVAX' = 1,
@@ -63,13 +63,6 @@ export enum Icon {
 // Used in bridging components
 export type TransferSide = 'source' | 'destination';
 
-export interface BridgeDefaults {
-  fromChain?: Chain;
-  toChain?: Chain;
-  tokenKey?: string;
-  requiredChain?: Chain;
-}
-
 export interface ExtendedTransferDetails extends TransferDetails {
   fromWalletAddress: string;
   toWalletAddress: string;
@@ -102,6 +95,7 @@ export interface WormholeConnectConfig {
   // White lists
   chains?: Chain[];
   tokens?: string[];
+  routes?: routes.RouteConstructor<any>[];
 
   // Custom tokens
   tokensConfig?: TokensConfig;
@@ -121,26 +115,7 @@ export interface WormholeConnectConfig {
   isRouteSupportedHandler?: IsRouteSupportedHandler;
 
   // UI details
-  cta?: {
-    text: string;
-    link: string;
-  };
-  showHamburgerMenu?: boolean;
-  explorer?: ExplorerConfig;
-  bridgeDefaults?: BridgeDefaults;
-  routes?: routes.RouteConstructor<any>[];
-  cctpWarning?: {
-    href: string;
-  };
-  pageHeader?: string | PageHeader;
-  pageSubHeader?: string;
-  menu?: MenuEntry[];
-  searchTx?: SearchTxConfig;
-  moreTokens?: MoreTokenConfig;
-  moreNetworks?: MoreChainConfig;
-  partnerLogo?: string;
-  walletConnectProjectId?: string;
-  previewMode?: boolean;
+  ui?: UiConfig;
 
   // Route settings
   ethBridgeMaxAmount?: number;
@@ -184,25 +159,8 @@ export interface InternalConfig<N extends Network> {
   validateTransfer?: ValidateTransferHandler;
   isRouteSupportedHandler?: IsRouteSupportedHandler;
 
-  // UI details
-  cta?: {
-    text: string;
-    link: string;
-  };
-  explorer?: ExplorerConfig;
-  attestUrl: string;
-  bridgeDefaults?: BridgeDefaults;
-  cctpWarning: string;
-  pageHeader?: string | PageHeader;
-  pageSubHeader?: string;
-  menu: MenuEntry[];
-  searchTx?: SearchTxConfig;
-  moreTokens?: MoreTokenConfig;
-  moreNetworks?: MoreChainConfig;
-  partnerLogo?: string;
-  walletConnectProjectId?: string;
-  showHamburgerMenu: boolean;
-  previewMode?: boolean; // Disables making transfers
+  // UI configuration
+  ui: UiConfig;
 
   // Route settings
   ethBridgeMaxAmount: number;
@@ -211,45 +169,6 @@ export interface InternalConfig<N extends Network> {
   guardianSet: GuardianSetData;
 }
 
-export type ExplorerConfig = {
-  href: string;
-  label?: string;
-  target?: '_blank' | '_self';
-};
-
-export type PageHeader = {
-  text: string;
-  align: Alignment;
-};
-
-export type SearchTxConfig = {
-  txHash?: string;
-  chainName?: string;
-};
-
-export type MoreTokenConfig = {
-  label: string;
-  href: string;
-  target?: '_blank' | '_self';
-};
-
-export type MoreChainConfig = {
-  href: string;
-  target?: '_blank' | '_self';
-  description: string;
-  networks: MoreChainDefinition[];
-};
-
-export type MoreChainDefinition = {
-  icon: string;
-  href?: string;
-  label: string;
-  name?: string;
-  description?: string;
-  target?: '_blank' | '_self';
-  showOpenInNewIcon?: boolean;
-};
-
 export type TokenConfig = {
   key: string;
   symbol: string;
@@ -296,13 +215,6 @@ export type NetworkData = {
   guardianSet: GuardianSetData;
 };
 
-export interface MenuEntry {
-  label: string;
-  href: string;
-  target?: string;
-  order?: number;
-}
-
 export type TokenAddressesByChain = {
   [tokenKey: string]: {
     [chain in Chain]?: string;