Merge remote-tracking branch 'origin/main' into trump

src/components/nav/FloatingButtonStrip.tsx

@@ -0,0 +1,57 @@
+import Link from 'next/link';
+
+import { DocsIcon, HistoryIcon, IconButton, PlusIcon, useModal } from '@hyperlane-xyz/widgets';
+import { config } from '../../consts/config';
+import { links } from '../../consts/links';
+import { useStore } from '../../features/store';
+import { AddWarpConfigModal } from '../../features/warpCore/AddWarpConfigModal';
+import { Color } from '../../styles/Color';
+
+export function FloatingButtonStrip() {
+  const { setIsSideBarOpen, isSideBarOpen } = useStore((s) => ({
+    setIsSideBarOpen: s.setIsSideBarOpen,
+    isSideBarOpen: s.isSideBarOpen,
+  }));
+
+  const {
+    isOpen: isAddWarpConfigOpen,
+    open: openAddWarpConfig,
+    close: closeAddWarpConfig,
+  } = useModal();
+
+  return (
+    <>
+      <div className="absolute -right-8 top-2 hidden flex-col items-center justify-end gap-3 sm:flex">
+        <IconButton
+          className={`p-0.5 ${styles.roundedCircle}`}
+          title="History"
+          onClick={() => setIsSideBarOpen(!isSideBarOpen)}
+        >
+          <HistoryIcon color={Color.primary['500']} height={22} width={22} />
+        </IconButton>
+        {config.showAddRouteButton && (
+          <IconButton
+            className={styles.roundedCircle}
+            title="Add route"
+            onClick={openAddWarpConfig}
+          >
+            <PlusIcon color={Color.primary['500']} height={26} width={26} />
+          </IconButton>
+        )}
+        <Link
+          href={links.warpDocs}
+          target="_blank"
+          className={`p-0.5 ${styles.roundedCircle} ${styles.link}`}
+        >
+          <DocsIcon color={Color.primary['500']} height={21} width={21} className="p-px" />
+        </Link>
+      </div>
+      <AddWarpConfigModal isOpen={isAddWarpConfigOpen} close={closeAddWarpConfig} />
+    </>
+  );
+}
+
+const styles = {
+  link: 'hover:opacity-70 active:opacity-60',
+  roundedCircle: 'rounded-full bg-white',
+};

src/consts/config.ts

@@ -18,6 +18,7 @@ interface Config {
   registryUrl: string | undefined; // Optional URL to use a custom registry instead of the published canonical version
   registryBranch?: string | undefined; // Optional customization of the registry branch instead of main
   registryProxyUrl?: string; // Optional URL to use a custom proxy for the GithubRegistry
+  showAddRouteButton: boolean; // Show/Hide the add route config icon in the button strip
   showDisabledTokens: boolean; // Show/Hide invalid token options in the selection modal
   showTipBox: boolean; // Show/Hide the blue tip box above the transfer form
   transferBlacklist: string; // comma-separated list of routes between which transfers are disabled. Expects Caip2Id-Caip2Id (e.g. ethereum:1-sealevel:1399811149)
@@ -33,6 +34,7 @@ export const config: Config = Object.freeze({
   registryUrl,
   registryBranch,
   registryProxyUrl,
+  showAddRouteButton: true,
   showDisabledTokens: false,
   showTipBox: false,
   version,

src/features/store.ts

@@ -1,14 +1,20 @@
 import { GithubRegistry, IRegistry } from '@hyperlane-xyz/registry';
-import { ChainMap, ChainMetadata, MultiProtocolProvider, WarpCore } from '@hyperlane-xyz/sdk';
+import {
+  ChainMap,
+  ChainMetadata,
+  MultiProtocolProvider,
+  WarpCore,
+  WarpCoreConfig,
+} from '@hyperlane-xyz/sdk';
 import { objFilter } from '@hyperlane-xyz/utils';
 import { toast } from 'react-toastify';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { config } from '../consts/config';
 import { logger } from '../utils/logger';
 import { assembleChainMetadata } from './chains/metadata';
-import { assembleWarpCoreConfig } from './tokens/warpCoreConfig';
 import { FinalTransferStatuses, TransferContext, TransferStatus } from './transfer/types';
+import { assembleWarpCoreConfig } from './warpCore/warpCoreConfig';
 
 // Increment this when persist state has breaking changes
 const PERSIST_STATE_VERSION = 2;
@@ -18,8 +24,12 @@ const PERSIST_STATE_VERSION = 2;
 export interface AppState {
   // Chains and providers
   chainMetadata: ChainMap<ChainMetadata>;
+  // Overrides to chain metadata set by user via the chain picker
   chainMetadataOverrides: ChainMap<Partial<ChainMetadata>>;
   setChainMetadataOverrides: (overrides?: ChainMap<Partial<ChainMetadata> | undefined>) => void;
+  // Overrides to warp core configs added by user
+  warpCoreConfigOverrides: WarpCoreConfig[];
+  setWarpCoreConfigOverrides: (overrides?: WarpCoreConfig[] | undefined) => void;
   multiProvider: MultiProtocolProvider;
   registry: IRegistry;
   warpCore: WarpCore;
@@ -61,9 +71,21 @@ export const useStore = create<AppState>()(
         overrides: ChainMap<Partial<ChainMetadata> | undefined> = {},
       ) => {
         logger.debug('Setting chain overrides in store');
-        const { multiProvider } = await initWarpContext(get().registry, overrides);
+        const { multiProvider, warpCore } = await initWarpContext({
+          ...get(),
+          chainMetadataOverrides: overrides,
+        });
         const filtered = objFilter(overrides, (_, metadata) => !!metadata);
-        set({ chainMetadataOverrides: filtered, multiProvider });
+        set({ chainMetadataOverrides: filtered, multiProvider, warpCore });
+      },
+      warpCoreConfigOverrides: [],
+      setWarpCoreConfigOverrides: async (overrides: WarpCoreConfig[] | undefined = []) => {
+        logger.debug('Setting warp core config overrides in store');
+        const { multiProvider, warpCore } = await initWarpContext({
+          ...get(),
+          warpCoreConfigOverrides: overrides,
+        });
+        set({ warpCoreConfigOverrides: overrides, multiProvider, warpCore });
       },
       multiProvider: new MultiProtocolProvider({}),
       registry: new GithubRegistry({
@@ -137,31 +159,34 @@ export const useStore = create<AppState>()(
             logger.error('Error during hydration', error);
             return;
           }
-          initWarpContext(state.registry, state.chainMetadataOverrides).then(
-            ({ registry, chainMetadata, multiProvider, warpCore }) => {
-              state.setWarpContext({ registry, chainMetadata, multiProvider, warpCore });
-              logger.debug('Rehydration complete');
-            },
-          );
+          initWarpContext(state).then(({ registry, chainMetadata, multiProvider, warpCore }) => {
+            state.setWarpContext({ registry, chainMetadata, multiProvider, warpCore });
+            logger.debug('Rehydration complete');
+          });
         };
       },
     },
   ),
 );
 
-async function initWarpContext(
-  registry: IRegistry,
-  storeMetadataOverrides: ChainMap<Partial<ChainMetadata> | undefined>,
-) {
+async function initWarpContext({
+  registry,
+  chainMetadataOverrides,
+  warpCoreConfigOverrides,
+}: {
+  registry: IRegistry;
+  chainMetadataOverrides: ChainMap<Partial<ChainMetadata> | undefined>;
+  warpCoreConfigOverrides: WarpCoreConfig[];
+}) {
   try {
-    const coreConfig = await assembleWarpCoreConfig();
+    const coreConfig = await assembleWarpCoreConfig(warpCoreConfigOverrides);
     const chainsInTokens = Array.from(new Set(coreConfig.tokens.map((t) => t.chainName)));
     // Pre-load registry content to avoid repeated requests
     await registry.listRegistryContent();
     const { chainMetadata, chainMetadataWithOverrides } = await assembleChainMetadata(
       chainsInTokens,
       registry,
-      storeMetadataOverrides,
+      chainMetadataOverrides,
     );
     const multiProvider = new MultiProtocolProvider(chainMetadataWithOverrides);
     const warpCore = WarpCore.FromConfig(multiProvider, coreConfig);