feat: Upgrade hyperlane packages (#10)

- Update to registry 2.0
- Update to SDK 3.13
- Fix chain logo caching bug

package.json

@@ -1,17 +1,15 @@
 {
   "name": "@hyperlane-xyz/widgets",
   "description": "Common react components for Hyperlane projects",
-  "version": "3.11.0",
+  "version": "3.13.0",
   "author": "J M Rossy",
   "peerDependencies": {
     "react": "^18",
     "react-dom": "^18"
   },
-  "dependencies": {
-    "@hyperlane-xyz/registry": "1.1.2"
-  },
   "devDependencies": {
-    "@hyperlane-xyz/sdk": "^3.11.1",
+    "@hyperlane-xyz/registry": "2.0.0",
+    "@hyperlane-xyz/sdk": "^3.13.0",
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
     "@storybook/addon-links": "^7.6.14",
@@ -20,7 +18,6 @@
     "@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",

src/icons/ChainLogo.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 
-import { IRegistry } from '@hyperlane-xyz/registry';
+import type { IRegistry } from '@hyperlane-xyz/registry';
 
 import { Circle } from './Circle.js';
 import { QuestionMarkIcon } from './QuestionMark.js';
@@ -26,16 +26,18 @@ export function ChainLogo({
   const bgColorSeed = title.charCodeAt(0);
   const iconSize = Math.floor(size / 1.9);
 
-  const [svgLogo, setSvgLogo] = useState('');
+  const [svgLogos, setSvgLogos] = useState({});
   useEffect(() => {
-    if (!chainName || svgLogo || Icon) return;
+    if (!chainName || svgLogos[chainName] || Icon) return;
     registry
       .getChainLogoUri(chainName)
-      .then((uri) => uri && setSvgLogo(uri))
+      .then((uri) => uri && setSvgLogos({ ...svgLogos, [chainName]: uri }))
       .catch((err) => console.error(err));
-  }, [chainName, registry, svgLogo, Icon]);
+  }, [chainName, registry, svgLogos, Icon]);
 
-  if (!svgLogo) {
+  const logoUri = svgLogos[chainName];
+
+  if (!logoUri) {
     return (
       <Circle size={size} title={title} bgColorSeed={bgColorSeed}>
         {chainName ? (
@@ -53,15 +55,15 @@ export function ChainLogo({
         {Icon ? (
           <Icon width={iconSize} height={iconSize} title={title} />
         ) : (
-          <img src={svgLogo} alt={title} width={iconSize} height={iconSize} />
+          <img src={logoUri} alt={title} width={iconSize} height={iconSize} />
         )}
       </Circle>
     );
   } else {
     return Icon ? (
       <Icon width={size} height={size} title={title} />
     ) : (
-      <img src={svgLogo} alt={title} width={size} height={size} />
+      <img src={logoUri} alt={title} width={size} height={size} />
     );
   }
 }