chore: merge main into ezeth

.github/workflows/ci.yml

@@ -6,6 +6,7 @@ on:
     branches: [main, nautilus, nexus, injective, ezeth, trump, ousdt]
   pull_request:
     branches: [main, nautilus, nexus, injective, ezeth, trump, ousdt]
+  merge_group:
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

.gitignore

@@ -31,7 +31,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # local env files
-.env*.local
+.env*
+!.env.example
 
 # vercel
 .vercel

.vscode/settings.json

@@ -4,8 +4,8 @@
   },
   "files.exclude": {
     "**/*.js.map": true,
-    "**/*.js": {"when": "$(basename).ts"},
-    "**/*.map": {"when": "$(basename).map"},
+    "**/*.js": { "when": "$(basename).ts" },
+    "**/*.map": { "when": "$(basename).map" }
   },
   "files.watcherExclude": {
     "**/.git/objects/**": true,
@@ -38,5 +38,6 @@
   },
   "editor.tabSize": 2,
   "editor.detectIndentation": false,
-  "tailwindCSS.experimental.classRegex": [["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]]
+  "tailwindCSS.experimental.classRegex": [["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]],
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

next.config.js

@@ -1,18 +1,26 @@
 /** @type {import('next').NextConfig} */
 
-const { version } = require('./package.json')
-const { withSentryConfig } = require("@sentry/nextjs");
+const { version } = require('./package.json');
+const { withSentryConfig } = require('@sentry/nextjs');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
-})
+});
 
-const isDev = process.env.NODE_ENV !== 'production'
+const isDev = process.env.NODE_ENV !== 'production';
 
 // Sometimes useful to disable this during development
 const ENABLE_CSP_HEADER = true;
-const FRAME_SRC_HOSTS = ['https://*.walletconnect.com', 'https://*.walletconnect.org','https://*.solflare.com'];
-const STYLE_SRC_HOSTS = []
-const IMG_SRC_HOSTS = ['https://*.walletconnect.com', 'https://*.githubusercontent.com', 'https://*.hyperlane.xyz'];
+const FRAME_SRC_HOSTS = [
+  'https://*.walletconnect.com',
+  'https://*.walletconnect.org',
+  'https://cdn.solflare.com',
+];
+const STYLE_SRC_HOSTS = [];
+const IMG_SRC_HOSTS = [
+  'https://*.walletconnect.com',
+  'https://*.githubusercontent.com',
+  'https://cdn.jsdelivr.net/gh/hyperlane-xyz/hyperlane-registry@main/',
+];
 const cspHeader = `
   default-src 'self';
   script-src 'self'${isDev ? " 'unsafe-eval'" : ''};
@@ -27,7 +35,9 @@ const cspHeader = `
   frame-ancestors 'none';
   ${!isDev ? 'block-all-mixed-content;' : ''}
   ${!isDev ? 'upgrade-insecure-requests;' : ''}
-`.replace(/\s{2,}/g, ' ').trim();
+`
+  .replace(/\s{2,}/g, ' ')
+  .trim();
 
 const securityHeaders = [
   {
@@ -54,8 +64,8 @@ const securityHeaders = [
           value: cspHeader,
         },
       ]
-    : [])
-]
+    : []),
+];
 
 const nextConfig = {
   webpack(config) {
@@ -72,27 +82,27 @@ const nextConfig = {
         source: '/(.*)',
         headers: securityHeaders,
       },
-    ]
+    ];
   },
 
   env: {
     NEXT_PUBLIC_VERSION: version,
   },
 
   reactStrictMode: true,
-}
+};
 
 const sentryOptions = {
-  org: "hyperlane",
-  project: "warp-ui",
+  org: 'hyperlane',
+  project: 'warp-ui',
   authToken: process.env.SENTRY_AUTH_TOKEN,
   hideSourceMaps: true,
-  tunnelRoute: "/monitoring-tunnel",
+  tunnelRoute: '/monitoring-tunnel',
   bundleSizeOptimizations: {
     excludeDebugStatements: true,
     excludeReplayIframe: true,
     excludeReplayShadowDom: true,
   },
 };
 
-module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryOptions));
+module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryOptions));

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hyperlane-xyz/warp-ui-template",
   "description": "A web app template for building Hyperlane Warp Route UIs",
-  "version": "8.5.0",
+  "version": "12.1.0",
   "author": "J M Rossy",
   "dependencies": {
     "@chakra-ui/next-js": "^2.4.2",
@@ -17,10 +17,10 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.2.0",
-    "@hyperlane-xyz/registry": "12.1.0",
-    "@hyperlane-xyz/sdk": "9.2.1",
-    "@hyperlane-xyz/utils": "9.2.1",
-    "@hyperlane-xyz/widgets": "9.2.1",
+    "@hyperlane-xyz/registry": "15.5.0",
+    "@hyperlane-xyz/sdk": "12.5.0",
+    "@hyperlane-xyz/utils": "12.5.0",
+    "@hyperlane-xyz/widgets": "12.5.0",
     "@interchain-ui/react": "^1.23.28",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",

src/components/icons/TokenIcon.tsx

@@ -1,9 +1,8 @@
-import { IRegistry } from '@hyperlane-xyz/registry';
 import { IToken } from '@hyperlane-xyz/sdk';
 import { isHttpsUrl, isRelativeUrl } from '@hyperlane-xyz/utils';
 import { Circle } from '@hyperlane-xyz/widgets';
 import { useState } from 'react';
-import { useStore } from '../../features/store';
+import { links } from '../../consts/links';
 
 interface Props {
   token?: IToken | null;
@@ -16,8 +15,7 @@ export function TokenIcon({ token, size = 32 }: Props) {
   const fontSize = Math.floor(size / 2);
 
   const [fallbackToText, setFallbackToText] = useState(false);
-  const registry = useStore((s) => s.registry);
-  const imageSrc = getImageSrc(registry, token);
+  const imageSrc = getImageSrc(token);
   const bgColorSeed =
     token && (!imageSrc || fallbackToText)
       ? (Buffer.from(token.addressOrDenom).at(0) || 0) % 5
@@ -32,6 +30,7 @@ export function TokenIcon({ token, size = 32 }: Props) {
           height={size}
           className="p-0.5"
           onError={() => setFallbackToText(true)}
+          loading="lazy"
         />
       ) : (
         <div className={`text-[${fontSize}px]`}>{character}</div>
@@ -40,11 +39,11 @@ export function TokenIcon({ token, size = 32 }: Props) {
   );
 }
 
-function getImageSrc(registry: IRegistry, token?: IToken | null) {
+function getImageSrc(token?: IToken | null) {
   if (!token?.logoURI) return null;
   // If it's a valid, direct URL, return it
   if (isHttpsUrl(token.logoURI)) return token.logoURI;
   // Otherwise assume it's a relative URL to the registry base
-  if (isRelativeUrl(token.logoURI)) return registry.getUri(token.logoURI);
+  if (isRelativeUrl(token.logoURI)) return `${links.imgPath}${token.logoURI}`;
   return null;
 }

src/consts/chains.ts

@@ -3,6 +3,10 @@ import {
   eclipsemainnetAddresses,
   solanamainnet,
   solanamainnetAddresses,
+  sonicsvm,
+  sonicsvmAddresses,
+  soon,
+  soonAddresses,
 } from '@hyperlane-xyz/registry';
 import { ChainMap, ChainMetadata } from '@hyperlane-xyz/sdk';
 
@@ -15,12 +19,19 @@ export const chains: ChainMap<ChainMetadata & { mailbox?: Address }> = {
     ...solanamainnet,
     // SVM chains require mailbox addresses for the token adapters
     mailbox: solanamainnetAddresses.mailbox,
-    // Including a convenient rpc override because the Solana public RPC does not allow browser requests from localhost
   },
   eclipsemainnet: {
     ...eclipsemainnet,
     mailbox: eclipsemainnetAddresses.mailbox,
   },
+  soon: {
+    ...soon,
+    mailbox: soonAddresses.mailbox,
+  },
+  sonicsvm: {
+    ...sonicsvm,
+    mailbox: sonicsvmAddresses.mailbox,
+  },
   // mycustomchain: {
   //   protocol: ProtocolType.Ethereum,
   //   chainId: 123123,

src/consts/links.ts

@@ -13,4 +13,5 @@ export const links = {
   privacyPolicy: 'https://hyperlane.xyz/privacy-policy',
   bounty:
     'https://github.com/search?q=org:hyperlane-xyz+label:bounty+is:open+is:issue&type=issues&s=&o=desc',
+  imgPath: 'https://cdn.jsdelivr.net/gh/hyperlane-xyz/hyperlane-registry@main',
 };

src/features/chains/ChainConnectionWarning.test.ts

@@ -0,0 +1,64 @@
+import { ChainMetadata, isRpcHealthy } from '@hyperlane-xyz/sdk';
+import { ProtocolType } from '@hyperlane-xyz/utils';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { checkRpcHealth } from './ChainConnectionWarning';
+
+vi.mock('@hyperlane-xyz/sdk', async (importOriginal) => {
+  const actual = (await importOriginal()) as { MultiProtocolProvider: any };
+  return {
+    ...actual,
+    MultiProtocolProvider: vi.fn().mockImplementation(() => ({
+      getProvider: vi.fn(),
+    })),
+    isRpcHealthy: vi.fn(),
+  };
+});
+
+const mockRpcUrl = 'http://mock.test.rpc.com';
+
+const mockEvmChainMetadata: ChainMetadata = {
+  name: 'TestChain',
+  protocol: ProtocolType.Ethereum,
+  rpcUrls: [{ http: mockRpcUrl }, { http: mockRpcUrl }],
+  chainId: 10000000,
+  domainId: 10000000,
+};
+const mockSvmChainMetadata = {
+  name: 'TestChain',
+  protocol: ProtocolType.Sealevel,
+  rpcUrls: [{ http: mockRpcUrl }, { http: mockRpcUrl }],
+  chainId: 10000000,
+  domainId: 10000000,
+};
+
+describe('checkRpcHealth', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  test('should call isRpcHealthy as many times as rpcUrls length when chain protocol is Ethereum', async () => {
+    (isRpcHealthy as ReturnType<typeof vi.fn>).mockImplementation(() => Promise.resolve(true));
+    await checkRpcHealth(mockEvmChainMetadata);
+    expect(isRpcHealthy).toHaveBeenCalledTimes(mockEvmChainMetadata.rpcUrls.length);
+  });
+
+  test('should call isRpcHealthy only once for non Ethereum chains', async () => {
+    (isRpcHealthy as ReturnType<typeof vi.fn>).mockImplementation(() => Promise.resolve(true));
+    await checkRpcHealth(mockSvmChainMetadata);
+    expect(isRpcHealthy).toHaveBeenCalledTimes(1);
+  });
+
+  test('should return true if at least one Ethereum RPC is healthy', async () => {
+    (isRpcHealthy as ReturnType<typeof vi.fn>).mockImplementation((_, i) =>
+      i === 1 ? Promise.resolve(true) : Promise.reject(),
+    );
+    const result = await checkRpcHealth(mockEvmChainMetadata);
+    expect(result).toBe(true);
+  });
+
+  test('should return false if no RPCs are healthy', async () => {
+    (isRpcHealthy as ReturnType<typeof vi.fn>).mockImplementation(() => Promise.resolve(false));
+    const result = await checkRpcHealth(mockEvmChainMetadata as any);
+    expect(result).toBe(false);
+  });
+});

src/features/chains/ChainConnectionWarning.tsx

@@ -1,4 +1,5 @@
 import { ChainMetadata, isRpcHealthy } from '@hyperlane-xyz/sdk';
+import { ProtocolType } from '@hyperlane-xyz/utils';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 import { FormWarningBanner } from '../../components/banner/FormWarningBanner';
@@ -25,7 +26,7 @@ export function ChainConnectionWarning({
       const isDestinationHealthy = await checkRpcHealth(destinationMetadata);
       return { isOriginHealthy, isDestinationHealthy };
     },
-    refetchInterval: 5000,
+    refetchInterval: 300000, // 5 minutes
   });
 
   const unhealthyChain =
@@ -62,14 +63,21 @@ export function ChainConnectionWarning({
   );
 }
 
-async function checkRpcHealth(chainMetadata: ChainMetadata) {
+export async function checkRpcHealth(chainMetadata: ChainMetadata) {
   try {
-    // Note: this currently checks the health of only the first RPC,
-    // which is what wallets and wallet libs (e.g. wagmi) will use
-    const isHealthy = await isRpcHealthy(chainMetadata, 0);
-    return isHealthy;
+    // Note: this currently checks the health of only the first RPC for non EVM chains,
+    // which is what wallets and wallet libs will use
+    // for EVM chains it will use a fallback RPC, that is why we need to check if any RPC are healthy instead
+    if (chainMetadata.protocol === ProtocolType.Ethereum) {
+      const healthChecks = chainMetadata.rpcUrls.map((_, i) =>
+        isRpcHealthy(chainMetadata, i).then((result) => (result ? true : Promise.reject())),
+      );
+      return await Promise.any(healthChecks);
+    } else return await isRpcHealthy(chainMetadata, 0);
   } catch (error) {
-    logger.warn('Error checking RPC health', error);
+    if (error instanceof AggregateError)
+      logger.warn(`No healthy RPCs found for ${chainMetadata.name}`);
+    else logger.warn('Error checking RPC health', error);
     return false;
   }
 }

src/features/chains/metadata.ts

@@ -6,11 +6,18 @@ import {
   mergeChainMetadataMap,
   RpcUrlSchema,
 } from '@hyperlane-xyz/sdk';
-import { objFilter, objMap, promiseObjAll, tryParseJsonOrYaml } from '@hyperlane-xyz/utils';
+import {
+  objFilter,
+  objMap,
+  promiseObjAll,
+  ProtocolType,
+  tryParseJsonOrYaml,
+} from '@hyperlane-xyz/utils';
 import { z } from 'zod';
 import { chains as ChainsTS } from '../../consts/chains.ts';
 import ChainsYaml from '../../consts/chains.yaml';
 import { config } from '../../consts/config.ts';
+import { links } from '../../consts/links.ts';
 import { logger } from '../../utils/logger.ts';
 
 export async function assembleChainMetadata(
@@ -49,7 +56,7 @@ export async function assembleChainMetadata(
       registryChainMetadata,
       async (chainName, metadata): Promise<ChainMetadata> => ({
         ...metadata,
-        logoURI: (await registry.getChainLogoUri(chainName)) || undefined,
+        logoURI: `${links.imgPath}/chains/${chainName}/logo.svg`,
       }),
     ),
   );
@@ -63,13 +70,23 @@ export async function assembleChainMetadata(
     logger.warn('Invalid RPC overrides config', rpcOverrides.error);
   }
 
-  const chainMetadata = objMap(mergedChainMetadata, (chainName, metadata) => ({
-    ...metadata,
-    rpcUrls:
+  const chainMetadata = objMap(mergedChainMetadata, (chainName, metadata) => {
+    const overridesUrl =
       rpcOverrides.success && rpcOverrides.data[chainName]
-        ? [rpcOverrides.data[chainName], ...metadata.rpcUrls]
-        : metadata.rpcUrls,
-  }));
+        ? rpcOverrides.data[chainName]
+        : undefined;
+
+    if (!overridesUrl) return metadata;
+
+    // Only EVM supports fallback transport, so we are putting the override at the end
+    const rpcUrls =
+      metadata.protocol === ProtocolType.Ethereum
+        ? [...metadata.rpcUrls, overridesUrl]
+        : [overridesUrl, ...metadata.rpcUrls];
+
+    return { ...metadata, rpcUrls };
+  });
+
   const chainMetadataWithOverrides = mergeChainMetadataMap(chainMetadata, storeMetadataOverrides);
   return { chainMetadata, chainMetadataWithOverrides };
 }