Migrate widgets to registry

.storybook/preview.ts

@@ -1,3 +1,5 @@
+import '../src/styles.css';
+
 const preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },

package.json

@@ -1,15 +1,17 @@
 {
   "name": "@hyperlane-xyz/widgets",
   "description": "Common react components for Hyperlane projects",
-  "version": "3.8.0",
+  "version": "3.11.0",
   "author": "J M Rossy",
   "peerDependencies": {
-    "@hyperlane-xyz/sdk": "^3.8",
     "react": "^18",
     "react-dom": "^18"
   },
+  "dependencies": {
+    "@hyperlane-xyz/registry": "1.1.0"
+  },
   "devDependencies": {
-    "@hyperlane-xyz/sdk": "3.8.0",
+    "@hyperlane-xyz/sdk": "^3.11.1",
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
     "@storybook/addon-links": "^7.6.14",
@@ -64,10 +66,9 @@
     "url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
   },
   "scripts": {
-    "build": "yarn build:svg && yarn build:ts && yarn build:css",
+    "build": "yarn build:ts && yarn build:css",
     "build:ts": "tsc",
     "build:css": "tailwindcss -c ./tailwind.config.cjs -i ./src/styles.css -o ./dist/styles.css --minify",
-    "build:svg": "svgr --typescript --no-index --out-dir src/logos -- node_modules/@hyperlane-xyz/sdk/logos",
     "clean": "rm -rf dist cache",
     "lint": "eslint . --ext .ts",
     "prettier": "prettier --write ./src",

src/icons/ChainLogo.tsx

@@ -1,114 +1,41 @@
-import React, { ReactElement, memo } from 'react';
+import React, { ReactElement, useEffect, useState } from 'react';
 
-import { Chains, chainMetadata } from '@hyperlane-xyz/sdk';
-import { isNumeric } from '@hyperlane-xyz/utils';
-
-import ArbitrumBlack from '../logos/black/Arbitrum.js';
-import AvalancheBlack from '../logos/black/Avalanche.js';
-import BaseBlack from '../logos/black/Base.js';
-import BscBlack from '../logos/black/Bsc.js';
-import CeloBlack from '../logos/black/Celo.js';
-import EthereumBlack from '../logos/black/Ethereum.js';
-import GnosisBlack from '../logos/black/Gnosis.js';
-import InevmBlack from '../logos/black/Inevm.js';
-import InjectiveBlack from '../logos/black/Injective.js';
-import MantaBlack from '../logos/black/Manta.js';
-import MoonbeamBlack from '../logos/black/Moonbeam.js';
-import NautilusBlack from '../logos/black/Nautilus.js';
-import NeutronBlack from '../logos/black/Neutron.js';
-import OptimismBlack from '../logos/black/Optimism.js';
-import PlumeBlack from '../logos/black/Plume.js';
-import PolygonBlack from '../logos/black/Polygon.js';
-import PolygonzkevmBlack from '../logos/black/Polygonzkevm.js';
-import ScrollBlack from '../logos/black/Scroll.js';
-import SolanaBlack from '../logos/black/Solana.js';
-import VictionBlack from '../logos/black/Viction.js';
-import ArbitrumColor from '../logos/color/Arbitrum.js';
-import AvalancheColor from '../logos/color/Avalanche.js';
-import BaseColor from '../logos/color/Base.js';
-import BscColor from '../logos/color/Bsc.js';
-import CeloColor from '../logos/color/Celo.js';
-import EthereumColor from '../logos/color/Ethereum.js';
-import GnosisColor from '../logos/color/Gnosis.js';
-import InevmColor from '../logos/color/Inevm.js';
-import InjectiveColor from '../logos/color/Injective.js';
-import MantaColor from '../logos/color/Manta.js';
-import MoonbeamColor from '../logos/color/Moonbeam.js';
-import NautilusColor from '../logos/color/Nautilus.js';
-import NeutronColor from '../logos/color/Neutron.js';
-import OptimismColor from '../logos/color/Optimism.js';
-import PlumeColor from '../logos/color/Plume.js';
-import PolygonColor from '../logos/color/Polygon.js';
-import PolygonzkevmColor from '../logos/color/Polygonzkevm.js';
-import ScrollColor from '../logos/color/Scroll.js';
-import SolanaColor from '../logos/color/Solana.js';
-import VictionColor from '../logos/color/Viction.js';
+import { IRegistry } from '@hyperlane-xyz/registry';
 
 import { Circle } from './Circle.js';
 import { QuestionMarkIcon } from './QuestionMark.js';
 
 type SvgIcon = (props: { width: number; height: number; title?: string }) => ReactElement;
 
-// Keep up to date as new chains are added or
-// icon will fallback to default (question mark)
-const CHAIN_TO_LOGO: Record<string | number, { black: SvgIcon; color: SvgIcon }> = {
-  [chainMetadata[Chains.alfajores].chainId]: { black: CeloBlack, color: CeloColor },
-  [chainMetadata[Chains.arbitrum].chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
-  [chainMetadata[Chains.avalanche].chainId]: { black: AvalancheBlack, color: AvalancheColor },
-  [chainMetadata[Chains.base].chainId]: { black: BaseBlack, color: BaseColor },
-  [chainMetadata[Chains.bsc].chainId]: { black: BscBlack, color: BscColor },
-  [chainMetadata[Chains.bsctestnet].chainId]: { black: BscBlack, color: BscColor },
-  [chainMetadata[Chains.celo].chainId]: { black: CeloBlack, color: CeloColor },
-  [chainMetadata[Chains.chiado].chainId]: { black: GnosisBlack, color: GnosisColor },
-  [chainMetadata[Chains.ethereum].chainId]: { black: EthereumBlack, color: EthereumColor },
-  [chainMetadata[Chains.fuji].chainId]: { black: AvalancheBlack, color: AvalancheColor },
-  [chainMetadata[Chains.gnosis].chainId]: { black: GnosisBlack, color: GnosisColor },
-  [chainMetadata[Chains.inevm].chainId]: { black: InevmBlack, color: InevmColor },
-  [chainMetadata[Chains.injective].chainId]: { black: InjectiveBlack, color: InjectiveColor },
-  [chainMetadata[Chains.mantapacific].chainId]: { black: MantaBlack, color: MantaColor },
-  [chainMetadata[Chains.moonbeam].chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
-  [chainMetadata[Chains.mumbai].chainId]: { black: PolygonBlack, color: PolygonColor },
-  [chainMetadata[Chains.nautilus].chainId]: { black: NautilusBlack, color: NautilusColor },
-  [chainMetadata[Chains.neutron].chainId]: { black: NeutronBlack, color: NeutronColor },
-  [chainMetadata[Chains.optimism].chainId]: { black: OptimismBlack, color: OptimismColor },
-  [chainMetadata[Chains.plumetestnet].chainId]: { black: PlumeBlack, color: PlumeColor },
-  [chainMetadata[Chains.polygon].chainId]: { black: PolygonBlack, color: PolygonColor },
-  [chainMetadata[Chains.polygonzkevm].chainId]: {
-    black: PolygonzkevmBlack,
-    color: PolygonzkevmColor,
-  },
-  [chainMetadata[Chains.scroll].chainId]: { black: ScrollBlack, color: ScrollColor },
-  [chainMetadata[Chains.scrollsepolia].chainId]: { black: ScrollBlack, color: ScrollColor },
-  [chainMetadata[Chains.sepolia].chainId]: { black: EthereumBlack, color: EthereumColor },
-  [chainMetadata[Chains.solana].chainId]: { black: SolanaBlack, color: SolanaColor },
-  [chainMetadata[Chains.solanadevnet].chainId]: { black: SolanaBlack, color: SolanaColor },
-  [chainMetadata[Chains.viction].chainId]: { black: VictionBlack, color: VictionColor },
-};
-
 export interface ChainLogoProps {
-  chainId?: number | string;
-  chainName?: string;
+  chainName: string;
+  registry: IRegistry;
   size?: number;
-  color?: boolean;
   background?: boolean;
-  icon?: SvgIcon; // Override the default set used above. Necessary for PI chain logos.
+  Icon?: SvgIcon; // Override the default set used above. Necessary for PI chain logos.
 }
 
-function _ChainLogo({
-  chainId,
+export function ChainLogo({
   chainName,
+  registry,
   size = 32,
-  color = true,
   background = false,
-  icon,
+  Icon,
 }: ChainLogoProps) {
-  const colorType = color ? 'color' : 'black';
-  const title = chainName || chainId?.toString() || 'Unknown';
+  const title = chainName || 'Unknown';
+  const bgColorSeed = title.charCodeAt(0);
   const iconSize = Math.floor(size / 1.9);
-  const ImageNode = icon ?? (chainId ? CHAIN_TO_LOGO[chainId]?.[colorType] : null);
-  const bgColorSeed = chainId && isNumeric(chainId) ? parseInt(chainId.toString(), 10) : 0;
 
-  if (!ImageNode) {
+  const [svgLogo, setSvgLogo] = useState('');
+  useEffect(() => {
+    if (!chainName || svgLogo || Icon) return;
+    registry
+      .getChainLogoUri(chainName)
+      .then((uri) => uri && setSvgLogo(uri))
+      .catch((err) => console.error(err));
+  }, [chainName, registry, svgLogo, Icon]);
+
+  if (!svgLogo) {
     return (
       <Circle size={size} title={title} bgColorSeed={bgColorSeed}>
         {chainName ? (
@@ -123,12 +50,18 @@ function _ChainLogo({
   if (background) {
     return (
       <Circle size={size} title={title} classes="htw-bg-gray-100">
-        <ImageNode width={iconSize} height={iconSize} />
+        {Icon ? (
+          <Icon width={iconSize} height={iconSize} title={title} />
+        ) : (
+          <img src={svgLogo} alt={title} width={iconSize} height={iconSize} />
+        )}
       </Circle>
     );
   } else {
-    return <ImageNode width={size} height={size} title={title} />;
+    return Icon ? (
+      <Icon width={size} height={size} title={title} />
+    ) : (
+      <img src={svgLogo} alt={title} width={size} height={size} />
+    );
   }
 }
-
-export const ChainLogo = memo(_ChainLogo);