Upgrade yarn, fix storybook, uprade to SDK 3.7.0

.eslintrc

@@ -15,6 +15,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
     "prettier"
   ],
   "rules": {

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,13 @@
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.vscode/settings.json

@@ -16,14 +16,14 @@
   "[typescript]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescriptreact]": {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-      "source.organizeImports": true
+      "source.organizeImports": "explicit"
     },
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

.yarnrc.yml

@@ -1,7 +1,9 @@
-nodeLinker: node-modules
+compressionLevel: mixed
+
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
+enableScripts: false
+
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

package.json

@@ -1,45 +1,44 @@
 {
   "name": "@hyperlane-xyz/widgets",
   "description": "Common react components for Hyperlane projects",
-  "version": "3.1.4",
+  "version": "3.7.0",
   "author": "J M Rossy",
   "peerDependencies": {
     "@hyperlane-xyz/sdk": "^3.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@hyperlane-xyz/sdk": "3.1.4",
-    "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-interactions": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack4": "^6.5.15",
-    "@storybook/manager-webpack4": "^6.5.15",
-    "@storybook/react": "^6.5.15",
-    "@storybook/testing-library": "^0.0.13",
+    "@hyperlane-xyz/sdk": "3.7.0",
+    "@storybook/addon-essentials": "^7.6.14",
+    "@storybook/addon-interactions": "^7.6.14",
+    "@storybook/addon-links": "^7.6.14",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.14",
+    "@storybook/react": "^7.6.14",
+    "@storybook/react-vite": "^7.6.14",
+    "@storybook/test": "^7.6.14",
     "@svgr/cli": "^6.5.1",
     "@trivago/prettier-plugin-sort-imports": "^3.2.0",
     "@types/node": "^18.11.18",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/ws": "^8.5.5",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "babel-loader": "^8.3.0",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.41.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "postcss": "^8.4.21",
     "prettier": "^2.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "storybook": "^7.6.14",
     "tailwindcss": "^3.2.4",
     "ts-node": "^10.8.0",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vite": "^5.1.1"
   },
   "files": [
     "/dist"
@@ -69,7 +68,7 @@
     "Typescript"
   ],
   "license": "Apache-2.0",
-  "packageManager": "yarn@3.2.0",
+  "packageManager": "yarn@4.0.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
@@ -83,7 +82,7 @@
     "clean": "rm -rf dist cache",
     "lint": "eslint . --ext .ts",
     "prettier": "prettier --write ./src",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

src/icons/ChainLogo.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement, memo } from 'react';
 
 import { chainMetadata } from '@hyperlane-xyz/sdk';
+import { isNumeric } from '@hyperlane-xyz/utils';
 
 import ArbitrumBlack from '../logos/black/Arbitrum';
 import AvalancheBlack from '../logos/black/Avalanche';
@@ -9,29 +10,37 @@ import BscBlack from '../logos/black/Bsc';
 import CeloBlack from '../logos/black/Celo';
 import EthereumBlack from '../logos/black/Ethereum';
 import GnosisBlack from '../logos/black/Gnosis';
+import InevmBlack from '../logos/black/Inevm';
+import InjectiveBlack from '../logos/black/Injective';
 import MantaBlack from '../logos/black/Manta';
 import MoonbeamBlack from '../logos/black/Moonbeam';
+import NautilusBlack from '../logos/black/Nautilus';
 import NeutronBlack from '../logos/black/Neutron';
 import OptimismBlack from '../logos/black/Optimism';
 import PolygonBlack from '../logos/black/Polygon';
 import PolygonzkevmBlack from '../logos/black/Polygonzkevm';
 import ScrollBlack from '../logos/black/Scroll';
 import SolanaBlack from '../logos/black/Solana';
+import VictionBlack from '../logos/black/Viction';
 import ArbitrumColor from '../logos/color/Arbitrum';
 import AvalancheColor from '../logos/color/Avalanche';
 import BaseColor from '../logos/color/Base';
 import BscColor from '../logos/color/Bsc';
 import CeloColor from '../logos/color/Celo';
 import EthereumColor from '../logos/color/Ethereum';
 import GnosisColor from '../logos/color/Gnosis';
+import InevmColor from '../logos/color/Inevm';
+import InjectiveColor from '../logos/color/Injective';
 import MantaColor from '../logos/color/Manta';
 import MoonbeamColor from '../logos/color/Moonbeam';
+import NautilusColor from '../logos/color/Nautilus';
 import NeutronColor from '../logos/color/Neutron';
 import OptimismColor from '../logos/color/Optimism';
 import PolygonColor from '../logos/color/Polygon';
 import PolygonzkevmColor from '../logos/color/Polygonzkevm';
 import ScrollColor from '../logos/color/Scroll';
 import SolanaColor from '../logos/color/Solana';
+import VictionColor from '../logos/color/Viction';
 
 import { Circle } from './Circle';
 import { QuestionMarkIcon } from './QuestionMark';
@@ -40,7 +49,7 @@ type SvgIcon = (props: { width: number; height: number; title?: string }) => Rea
 
 // Keep up to date as new chains are added or
 // icon will fallback to default (question mark)
-const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
+const CHAIN_TO_LOGO: Record<string | number, { black: SvgIcon; color: SvgIcon }> = {
   [chainMetadata.alfajores.chainId]: { black: CeloBlack, color: CeloColor },
   [chainMetadata.arbitrum.chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
   [chainMetadata.arbitrumgoerli.chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
@@ -55,10 +64,13 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
   [chainMetadata.fuji.chainId]: { black: AvalancheBlack, color: AvalancheColor },
   [chainMetadata.gnosis.chainId]: { black: GnosisBlack, color: GnosisColor },
   [chainMetadata.goerli.chainId]: { black: EthereumBlack, color: EthereumColor },
+  [chainMetadata.inevm.chainId]: { black: InevmBlack, color: InevmColor },
+  [chainMetadata.injective.chainId]: { black: InjectiveBlack, color: InjectiveColor },
   [chainMetadata.mantapacific.chainId]: { black: MantaBlack, color: MantaColor },
   [chainMetadata.moonbasealpha.chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
   [chainMetadata.moonbeam.chainId]: { black: MoonbeamBlack, color: MoonbeamColor },
   [chainMetadata.mumbai.chainId]: { black: PolygonBlack, color: PolygonColor },
+  [chainMetadata.nautilus.chainId]: { black: NautilusBlack, color: NautilusColor },
   [chainMetadata.neutron.chainId]: { black: NeutronBlack, color: NeutronColor },
   [chainMetadata.optimism.chainId]: { black: OptimismBlack, color: OptimismColor },
   [chainMetadata.optimismgoerli.chainId]: { black: OptimismBlack, color: OptimismColor },
@@ -73,10 +85,11 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
   [chainMetadata.sepolia.chainId]: { black: EthereumBlack, color: EthereumColor },
   [chainMetadata.solana.chainId]: { black: SolanaBlack, color: SolanaColor },
   [chainMetadata.solanadevnet.chainId]: { black: SolanaBlack, color: SolanaColor },
+  [chainMetadata.viction.chainId]: { black: VictionBlack, color: VictionColor },
 };
 
 export interface ChainLogoProps {
-  chainId?: number;
+  chainId?: number | string;
   chainName?: string;
   size?: number;
   color?: boolean;
@@ -96,10 +109,11 @@ function _ChainLogo({
   const title = chainName || chainId?.toString() || 'Unknown';
   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) {
     return (
-      <Circle size={size} title={title} bgColorSeed={chainId || 0}>
+      <Circle size={size} title={title} bgColorSeed={bgColorSeed}>
         {chainName ? (
           <div style={{ fontSize: iconSize }}>{chainName[0].toUpperCase()}</div>
         ) : (

src/logos/black/Inevm.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInevm = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="184.82 186.46 121.25 133.56" {...props}>
+    <path d="m198.76 224 2.27-2.62.14-.1.28-.21.07-.1c.51-.5 1.07-1 1.72-1.46a23.23 23.23 0 0 1 31.2 1.63c9.8 9.18 8.94 23.98 1.1 33.82-9.86 14.67-26.91 35.13-3.34 53.5 4.24 3.27 7.35 6 20.7 9.86-8.72 1.6-16.8 1.1-25.8-1.2-6.36-3.6-16.37-11.29-19.78-21.68-5.18-15.77 9.07-39.3 15.9-48.39 9.46-12.56-5.83-26.12-17.04-10.97-5.87 7.94-16.16 30.3-12.57 46.9 2.07 9.42 4.83 16.26 15.88 25.68a50.8 50.8 0 0 1-5.94-4.1 58.19 58.19 0 0 1-4.8-80.56Z" />
+    <path d="m286 299.38-2.24 2.62-.14.07-.24.24-.07.07a25.91 25.91 0 0 1-8.94 5.42 23.22 23.22 0 0 1-24.02-5.53c-9.8-9.21-8.94-24.02-1.1-33.85 9.9-14.67 26.92-35.14 3.35-53.5-4.25-3.28-7.39-6-20.71-9.87 8.73-1.59 16.8-1.1 25.81 1.21 6.36 3.59 16.36 11.29 19.78 21.67 5.18 15.74-9.08 39.31-15.91 48.4-9.46 12.52 5.8 26.12 17.05 10.93 5.87-7.9 16.12-30.27 12.56-46.87-2.07-9.42-4.83-16.29-15.87-25.7 2.03 1.2 4 2.58 5.93 4.13a58.19 58.19 0 0 1 4.76 80.56Z" />
+    <path fill="#343434" d="m282.57 186.74-.45 1.55v44.92l.45.46 20.86-12.33z" />
+    <path fill="#8C8C8C" d="m282.57 186.74-20.85 34.6 20.85 12.33v-21.8z" />
+    <path fill="#3C3C3B" d="m282.57 237.62-.26.31v16l.26.76 20.87-29.4z" />
+    <path fill="#8C8C8C" d="M282.57 254.69v-17.07l-20.85-12.32z" />
+    <path fill="#141414" d="m282.57 233.67 20.86-12.33-20.86-9.48z" />
+    <path fill="#393939" d="m261.72 221.34 20.85 12.33v-21.8z" />
+  </svg>
+);
+export default SvgInevm;

src/logos/black/Injective.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgInjective = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    className="injective_svg__w-32"
+    data-icon="logo"
+    data-prefix="fab"
+    viewBox="0 0 33.36 33.36"
+    {...props}
+  >
+    <path d="M4.04 5.76 4.7 5l.04-.03.08-.06.02-.03c.15-.14.31-.29.5-.42a6.73 6.73 0 0 1 9.04.47c2.84 2.66 2.59 6.95.32 9.8-2.86 4.25-7.8 10.18-.97 15.5 1.23.95 2.13 1.74 6 2.86-2.53.46-4.87.32-7.48-.35-1.84-1.04-4.74-3.27-5.73-6.28-1.5-4.57 2.63-11.39 4.61-14.02 2.74-3.64-1.69-7.57-4.94-3.18-1.7 2.3-4.68 8.78-3.64 13.59.6 2.73 1.4 4.71 4.6 7.44a14.7 14.7 0 0 1-1.72-1.19A16.86 16.86 0 0 1 4.04 5.76Z" />
+    <path d="m29.32 27.6-.65.76-.04.02-.07.07-.02.02a7.52 7.52 0 0 1-2.59 1.57 6.73 6.73 0 0 1-6.96-1.6c-2.84-2.67-2.59-6.96-.32-9.81 2.87-4.25 7.8-10.18.97-15.5-1.23-.95-2.14-1.74-6-2.86 2.53-.46 4.87-.32 7.48.35 1.84 1.04 4.74 3.27 5.73 6.28 1.5 4.56-2.63 11.39-4.61 14.02-2.74 3.63 1.68 7.57 4.94 3.17 1.7-2.29 4.67-8.77 3.64-13.58-.6-2.73-1.4-4.72-4.6-7.45.59.35 1.16.75 1.72 1.2a16.86 16.86 0 0 1 1.38 23.34Z" />
+  </svg>
+);
+export default SvgInjective;

src/logos/black/Nautilus.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgNautilus = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 40" {...props}>
+    <path
+      fill="#000"
+      d="M40 13.33A26.67 26.67 0 0 1 13.33 40V26.67a13.33 13.33 0 0 0 13.34-13.34H40ZM13.33 13.33H0v13.33h13.33zM26.67 0H13.34v13.33h13.33z"
+    />
+  </svg>
+);
+export default SvgNautilus;

src/logos/black/Viction.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgViction = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="81.1 83.2 397.7 401.7" {...props}>
+    <defs>
+      <style>{'.viction_svg__cls-1{fill:#231f20}'}</style>
+    </defs>
+    <path
+      d="M478.8 83.2v157.5C417.9 267.3 350.6 282 279.9 282s-138-14.7-198.8-41.3V83.2c60.9 26.6 128.1 41.3 198.8 41.3s138-14.7 198.9-41.3ZM478.8 484.9V327.4C417.9 300.8 350.6 286 279.9 286s-138 14.8-198.8 41.4v157.5c60.9-26.6 128.1-41.4 198.8-41.4s138 14.8 198.9 41.4Z"
+      className="viction_svg__cls-1"
+    />
+  </svg>
+);
+export default SvgViction;

src/logos/black/index.ts

@@ -9,12 +9,16 @@ export { default as Eclipse } from './Eclipse';
 export { default as Ethereum } from './Ethereum';
 export { default as Gnosis } from './Gnosis';
 export { default as Hyperlane } from './Hyperlane';
+export { default as Inevm } from './Inevm';
+export { default as Injective } from './Injective';
 export { default as Manta } from './Manta';
 export { default as Moonbeam } from './Moonbeam';
+export { default as Nautilus } from './Nautilus';
 export { default as Near } from './Near';
 export { default as Neutron } from './Neutron';
 export { default as Optimism } from './Optimism';
 export { default as Polygon } from './Polygon';
 export { default as Polygonzkevm } from './Polygonzkevm';
 export { default as Scroll } from './Scroll';
 export { default as Solana } from './Solana';
+export { default as Viction } from './Viction';