feat(hyperliquid): UI integration

scripts/extern-configs/hyper-liquid/index.ts

@@ -0,0 +1,13 @@
+import { CHAIN_IDs } from "@across-protocol/constants";
+import { ExternalProjectConfig } from "../types";
+
+export default {
+  name: "Hyperliquid",
+  projectId: "hyper-liquid",
+  explorer: "https://arbiscan.io",
+  logoPath: "./assets/logo.svg",
+  grayscaleLogoPath: "./assets/grayscale-logo.svg",
+  publicRpcUrl: "https://arbitrum.publicnode.com",
+  intermediaryChain: CHAIN_IDs.ARBITRUM,
+  tokens: ["USDC"],
+} as ExternalProjectConfig;

scripts/extern-configs/index.ts

@@ -0,0 +1 @@
+export { default as HYPER_LIQUID } from "./hyper-liquid";

scripts/extern-configs/types.ts

@@ -0,0 +1,13 @@
+// Destination only projects that are supported through a message bridge
+// at a known supported intermediary chain
+export type ExternalProjectConfig = {
+  projectId: string;
+  name: string;
+  fullName?: string;
+  explorer: string;
+  publicRpcUrl: string;
+  logoPath: string;
+  grayscaleLogoPath: string;
+  intermediaryChain: number;
+  tokens: string[];
+};

scripts/generate-routes.ts

@@ -6,6 +6,8 @@ import { writeFileSync } from "fs";
 import * as prettier from "prettier";
 import path from "path";
 import * as chainConfigs from "./chain-configs";
+import * as externConfigs from "./extern-configs";
+import assert from "assert";
 
 function getTokenSymbolForLogo(tokenSymbol: string): string {
   switch (tokenSymbol) {
@@ -29,6 +31,8 @@ type ToToken = ToChain["tokens"][number];
 type SwapToken = ToChain["swapTokens"][number];
 type ValidTokenSymbol = string;
 
+const enabledMainnetExternalProjects = [externConfigs.HYPER_LIQUID];
+
 const enabledMainnetChainConfigs = [
   chainConfigs.MAINNET,
   chainConfigs.OPTIMISM,
@@ -109,7 +113,10 @@ const enabledRoutes = {
         // [CHAIN_IDs.BASE]: "0xbcfbCE9D92A516e3e7b0762AE218B4194adE34b4",
       },
     },
-    routes: transformChainConfigs(enabledMainnetChainConfigs),
+    routes: transformChainConfigs(
+      enabledMainnetChainConfigs,
+      enabledMainnetExternalProjects
+    ),
   },
   [CHAIN_IDs.SEPOLIA]: {
     hubPoolChain: CHAIN_IDs.SEPOLIA,
@@ -136,18 +143,21 @@ const enabledRoutes = {
           "0x17496824Ba574A4e9De80110A91207c4c63e552a", // Mocked
       },
     },
-    routes: transformChainConfigs(enabledSepoliaChainConfigs),
+    routes: transformChainConfigs(enabledSepoliaChainConfigs, []),
   },
 } as const;
 
 function transformChainConfigs(
-  enabledChainConfigs: typeof enabledMainnetChainConfigs
+  enabledChainConfigs: typeof enabledMainnetChainConfigs,
+  enabledExternalProjects: typeof enabledMainnetExternalProjects
 ) {
   const transformedChainConfigs: {
     fromChain: number;
     fromSpokeAddress: string;
+    externalProjectId?: string;
     toChains: {
       chainId: number;
+      externalProjectId?: string;
       tokens: (
         | string
         | {
@@ -342,6 +352,47 @@ function transformChainConfigs(
       toChains.push(toChain);
     }
 
+    for (const externalProject of enabledExternalProjects) {
+      if (externalProject.intermediaryChain === fromChainId) {
+        continue;
+      }
+      const associatedChain = enabledChainConfigs.find(
+        (config) => config.chainId === externalProject.intermediaryChain
+      );
+      assert(associatedChain, "Associated chain not found");
+
+      let associatedRoutes = processTokenRoutes(
+        chainConfig,
+        { ...associatedChain, enableCCTP: false },
+        externalProject.tokens
+      );
+
+      const externalProjectId = externalProject.projectId;
+
+      // Handle USDC swap tokens
+      const usdcSwapTokens = [];
+
+      const toChain = {
+        chainId: externalProject.intermediaryChain,
+        externalProjectId,
+        tokens: associatedRoutes,
+        swapTokens: usdcSwapTokens.filter(
+          ({ acrossInputTokenSymbol, acrossOutputTokenSymbol }) =>
+            associatedRoutes.some((token) =>
+              typeof token === "string"
+                ? token === acrossInputTokenSymbol
+                : token.inputTokenSymbol === acrossInputTokenSymbol
+            ) &&
+            associatedRoutes.some((token) =>
+              typeof token === "string"
+                ? token === acrossOutputTokenSymbol
+                : token.outputTokenSymbol === acrossOutputTokenSymbol
+            )
+        ),
+      };
+      toChains.push(toChain);
+    }
+
     transformedChainConfigs.push({
       fromChain: fromChainId,
       fromSpokeAddress,
@@ -352,6 +403,126 @@ function transformChainConfigs(
   return transformedChainConfigs;
 }
 
+function processTokenRoutes(
+  fromConfig: typeof chainConfigs.MAINNET,
+  toConfig: typeof chainConfigs.MAINNET,
+  tokensToProcess?: string[]
+) {
+  const toChainId = toConfig.chainId;
+  const tokens = tokensToProcess ?? fromConfig.tokens;
+  return tokens.flatMap((token) => {
+    const tokenSymbol = typeof token === "string" ? token : token.symbol;
+
+    // If the fromConfig does not support the token, return an empty array
+    if (!fromConfig.tokens.includes(tokenSymbol)) {
+      return [];
+    }
+
+    // Handle native USDC -> bridged USDC routes
+    if (tokenSymbol === "USDC") {
+      if (toConfig.enableCCTP) {
+        return [
+          "USDC",
+          {
+            inputTokenSymbol: "USDC",
+            outputTokenSymbol: getBridgedUsdcSymbol(toChainId),
+          },
+        ];
+      } else if (
+        toConfig.tokens.find(
+          (token) => typeof token === "string" && sdkUtils.isBridgedUsdc(token)
+        )
+      ) {
+        return [
+          {
+            inputTokenSymbol: "USDC",
+            outputTokenSymbol: getBridgedUsdcSymbol(toChainId),
+          },
+        ];
+      }
+    }
+
+    // Handle bridged USDC -> native/bridged USDC routes
+    if (sdkUtils.isBridgedUsdc(tokenSymbol)) {
+      if (toConfig.enableCCTP) {
+        return [
+          {
+            inputTokenSymbol: tokenSymbol,
+            outputTokenSymbol: "USDC",
+          },
+          {
+            inputTokenSymbol: tokenSymbol,
+            outputTokenSymbol: getBridgedUsdcSymbol(toChainId),
+          },
+        ];
+      } else if (toConfig.tokens.includes("USDC")) {
+        return [
+          {
+            inputTokenSymbol: tokenSymbol,
+            outputTokenSymbol: "USDC",
+          },
+        ];
+      } else if (
+        toConfig.tokens.find(
+          (token) => typeof token === "string" && sdkUtils.isBridgedUsdc(token)
+        )
+      ) {
+        return [
+          {
+            inputTokenSymbol: tokenSymbol,
+            outputTokenSymbol: getBridgedUsdcSymbol(toChainId),
+          },
+        ];
+      }
+    }
+
+    // Handle USDB -> DAI
+    if (tokenSymbol === "USDB" && toConfig.tokens.includes("DAI")) {
+      return [
+        {
+          inputTokenSymbol: "USDB",
+          outputTokenSymbol: "DAI",
+        },
+      ];
+    }
+    if (tokenSymbol === "DAI" && toConfig.tokens.includes("USDB")) {
+      return [
+        {
+          inputTokenSymbol: "DAI",
+          outputTokenSymbol: "USDB",
+        },
+      ];
+    }
+
+    // Handle WETH Polygon & other non-eth chains
+    if (
+      tokenSymbol === "WETH" &&
+      !toConfig.tokens.includes("ETH") &&
+      fromConfig.tokens.includes("ETH")
+    ) {
+      return ["WETH", "ETH"];
+    }
+
+    const chainIds = typeof token === "string" ? [toChainId] : token.chainIds;
+
+    const toToken = toConfig.tokens.find((token) =>
+      typeof token === "string"
+        ? token === tokenSymbol
+        : token.symbol === tokenSymbol
+    );
+    if (
+      !toToken ||
+      (typeof toToken === "object" &&
+        !toToken.chainIds.includes(fromConfig.chainId)) ||
+      !chainIds.includes(toChainId)
+    ) {
+      return [];
+    }
+
+    return tokenSymbol;
+  });
+}
+
 async function generateRoutes(hubPoolChainId = 1) {
   const config = enabledRoutes[hubPoolChainId];
 
@@ -573,6 +744,7 @@ function transformToRoute(
     toTokenSymbol: outputTokenSymbol,
     isNative: inputTokenSymbol === TOKEN_SYMBOLS_MAP.ETH.symbol,
     l1TokenAddress: inputToken.l1TokenAddress,
+    externalProjectId: toChain.externalProjectId,
   };
 }
 

scripts/generate-ui-assets.ts

@@ -3,18 +3,20 @@ import * as prettier from "prettier";
 import { camelCase, capitalize } from "lodash-es";
 
 import * as chainConfigs from "./chain-configs";
+import * as externConfigs from "./extern-configs";
 
 const chainsConstantsFileTargetDir = process.cwd() + "/src/constants/chains";
 const chainsConstantsFilePath = chainsConstantsFileTargetDir + "/configs.ts";
 const chainAssetsTargetDir = process.cwd() + "/src/assets/chain-logos";
+const externAssetsTargetDir = process.cwd() + "/src/assets/extern-logos";
 
 async function generateUiAssets() {
   const chainsFileImports: string[] = [
     "// This file is auto-generated by scripts/generate-ui-assets.ts",
   ];
   const chainsFileContent: string[] = [];
   const chainVarNames: string[] = [];
-
+  const externVarNames: string[] = [];
   for (const [chainKey, chainConfig] of Object.entries(chainConfigs)) {
     const { chainId, logoPath, grayscaleLogoPath, name, fullName } =
       chainConfig;
@@ -66,13 +68,76 @@ async function generateUiAssets() {
     `);
     chainVarNames.push(chainVarName);
   }
+
+  // Process external project configs
+  for (const [projectKey, projectConfig] of Object.entries(externConfigs)) {
+    if (projectKey === "types") continue; // Skip the types file
+
+    const { projectId, logoPath, grayscaleLogoPath, name, fullName } =
+      projectConfig;
+
+    // Copy logos into assets directory
+    const assetFileNameBase = projectKey.toLowerCase().replace("_", "-");
+    const projectLogoTargetFileName = assetFileNameBase + ".svg";
+    const projectGrayscaleLogoTargetFileName =
+      assetFileNameBase + "-grayscale.svg";
+    const projectConfigSrcDir =
+      process.cwd() + "/scripts/extern-configs/" + assetFileNameBase + "/";
+
+    copyFileSync(
+      projectConfigSrcDir + logoPath,
+      externAssetsTargetDir + "/" + projectLogoTargetFileName
+    );
+    copyFileSync(
+      projectConfigSrcDir + grayscaleLogoPath,
+      externAssetsTargetDir + "/" + projectGrayscaleLogoTargetFileName
+    );
+
+    // Generate external project constants
+    const projectVarName = camelCase(name);
+    const projectLogoVarName = camelCase(name + "Logo");
+    const projectGrayscaleLogoVarName = camelCase(name + "GrayscaleLogo");
+    const projectLogoSvgVarName = projectLogoVarName + "Svg";
+    const projectGrayscaleLogoSvgVarName = projectGrayscaleLogoVarName + "Svg";
+
+    chainsFileImports.push(`
+      import ${projectLogoVarName} from "assets/extern-logos/${projectLogoTargetFileName}";
+      import ${projectGrayscaleLogoVarName} from "assets/extern-logos/${projectGrayscaleLogoTargetFileName}";
+      import {ReactComponent as ${projectLogoSvgVarName}} from "assets/extern-logos/${projectLogoTargetFileName}";
+      import {ReactComponent as ${projectGrayscaleLogoSvgVarName}} from "assets/extern-logos/${projectGrayscaleLogoTargetFileName}";
+    `);
+
+    chainsFileContent.push(`
+      export const ${projectVarName} = {
+        name: "${name}",
+        fullName: "${fullName || capitalize(name)}",
+        projectId: "${projectId}",
+        logoURI: ${projectLogoVarName},
+        grayscaleLogoURI: ${projectGrayscaleLogoVarName},
+        logoSvg: ${projectLogoSvgVarName},
+        grayscaleLogoSvg: ${projectGrayscaleLogoSvgVarName},
+        explorerUrl: "${projectConfig.explorer}",
+        rpcUrl: "${projectConfig.publicRpcUrl}",
+        intermediaryChain: ${projectConfig.intermediaryChain},
+      };
+    `);
+    externVarNames.push(projectVarName);
+  }
+
   chainsFileContent.push(`
     export const chainConfigs = [${chainVarNames.join(", ")}].reduce((acc, chain) => {
       acc[chain.chainId] = chain;
       return acc;
     }, {} as Record<number, typeof ${chainVarNames[0]}>);
   `);
 
+  chainsFileContent.push(`
+    export const externConfigs = [${externVarNames.join(", ")}].reduce((acc, extern) => {
+      acc[extern.projectId] = extern;
+      return acc;
+    }, {} as Record<string, typeof ${externVarNames[0]}>);
+  `);
+
   // Write chains file
   const chainsFileContentStr =
     chainsFileImports.join("\n") + chainsFileContent.join("\n");