Improve ChainLogo icons for PI chains

Fix bug with MultiProvider init

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.11",
     "@hyperlane-xyz/sdk": "1.2.1",
-    "@hyperlane-xyz/widgets": "1.2.1",
+    "@hyperlane-xyz/widgets": "1.2.2-beta0",
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6",
     "@rainbow-me/rainbowkit": "^0.11.0",
     "@tanstack/react-query": "^4.24.10",

src/components/icons/ChainLogo.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+
+import { ChainLogo as ChainLogoInner } from '@hyperlane-xyz/widgets';
+
+import { getChainName } from '../../features/chains/utils';
+
+export function ChainLogo(props: ComponentProps<typeof ChainLogoInner>) {
+  const { chainName, ...rest } = props;
+  const name = chainName || getChainName(props.chainId);
+  return <ChainLogoInner {...rest} chainName={name} />;
+}

src/components/icons/ChainToChain.tsx

@@ -1,11 +1,11 @@
 import Image from 'next/image';
 import { memo } from 'react';
 
-import { ChainLogo } from '@hyperlane-xyz/widgets';
-
 import ArrowRightIcon from '../../images/icons/arrow-right-short.svg';
 import { useIsMobile } from '../../styles/mediaQueries';
 
+import { ChainLogo } from './ChainLogo';
+
 function _ChainToChain({
   originChainId,
   destinationChainId,

src/components/search/SearchFilterBar.tsx

@@ -3,13 +3,13 @@ import Link from 'next/link';
 import { useState } from 'react';
 
 import { ChainMetadata, mainnetChainsMetadata, testnetChainsMetadata } from '@hyperlane-xyz/sdk';
-import { ChainLogo } from '@hyperlane-xyz/widgets';
 
 import { getChainDisplayName } from '../../features/chains/utils';
 import GearIcon from '../../images/icons/gear.svg';
 import { arrayToObject } from '../../utils/objects';
 import { BorderedButton } from '../buttons/BorderedButton';
 import { TextButton } from '../buttons/TextButton';
+import { ChainLogo } from '../icons/ChainLogo';
 import { ChevronIcon } from '../icons/Chevron';
 import { CheckBox } from '../input/Checkbox';
 import { DatetimeField } from '../input/DatetimeField';

src/features/chains/ConfigureChains.tsx

@@ -1,10 +1,10 @@
 import { ChangeEventHandler, useState } from 'react';
 
 import { mainnetChainsMetadata, testnetChainsMetadata } from '@hyperlane-xyz/sdk';
-import { ChainLogo } from '@hyperlane-xyz/widgets';
 
 import { SolidButton } from '../../components/buttons/SolidButton';
 import { XIconButton } from '../../components/buttons/XIconButton';
+import { ChainLogo } from '../../components/icons/ChainLogo';
 import { Card } from '../../components/layout/Card';
 import { Modal } from '../../components/layout/Modal';
 import { links } from '../../consts/links';

src/features/chains/chainConfig.ts

@@ -1,11 +1,8 @@
 import { z } from 'zod';
 
-import {
-  ChainMetadata,
-  ChainMetadataSchema,
-  chainIdToMetadata as defaultChainIdToMetadata,
-} from '@hyperlane-xyz/sdk';
+import { ChainMetadata, ChainMetadataSchema } from '@hyperlane-xyz/sdk';
 
+import { getMultiProvider } from '../../multiProvider';
 import { logger } from '../../utils/logger';
 
 export const chainContractsSchema = z.object({
@@ -54,10 +51,15 @@ export function tryParseChainConfig(input: string): ParseResult {
   }
 
   const chainConfig = result.data as ChainConfig;
-  if (defaultChainIdToMetadata[chainConfig.chainId]) {
+  const mp = getMultiProvider();
+  if (
+    mp.tryGetChainMetadata(chainConfig.name) ||
+    mp.tryGetChainMetadata(chainConfig.chainId) ||
+    (chainConfig.domainId && mp.tryGetChainMetadata(chainConfig.domainId))
+  ) {
     return {
       success: false,
-      error: 'Chain ID already included in explorer defaults',
+      error: 'chainId, name, or domainId is already in use',
     };
   }
 

src/features/chains/utils.ts

@@ -1,14 +1,18 @@
 import { Environment } from '../../consts/environments';
 import { getMultiProvider } from '../../multiProvider';
 
+export function getChainName(chainId?: number) {
+  return getMultiProvider().tryGetChainName(chainId || 0) || undefined;
+}
+
 export function getChainDisplayName(chainId?: number, shortName = false) {
-  if (!chainId) return 'Unknown';
-  const metadata = getMultiProvider().getChainMetadata(chainId);
+  const metadata = getMultiProvider().tryGetChainMetadata(chainId || 0);
+  if (!metadata) return 'Unknown';
   const displayName = shortName ? metadata.displayNameShort : metadata.displayName;
   return displayName || metadata.name;
 }
 
 export function getChainEnvironment(chainIdOrName: number | string) {
-  const isTestnet = getMultiProvider().getChainMetadata(chainIdOrName).isTestnet;
+  const isTestnet = getMultiProvider().tryGetChainMetadata(chainIdOrName)?.isTestnet;
   return isTestnet ? Environment.Testnet : Environment.Mainnet;
 }

src/features/messages/MessageTable.tsx

@@ -1,8 +1,7 @@
 import Link from 'next/link';
 import { PropsWithChildren } from 'react';
 
-import { ChainLogo } from '@hyperlane-xyz/widgets';
-
+import { ChainLogo } from '../../components/icons/ChainLogo';
 import { MessageStatus, MessageStub } from '../../types';
 import { shortenAddress } from '../../utils/addresses';
 import { getHumanReadableDuration, getHumanReadableTimeString } from '../../utils/time';

src/features/messages/cards/TransactionCard.tsx

@@ -1,8 +1,7 @@
 import Image from 'next/image';
 
-import { ChainLogo } from '@hyperlane-xyz/widgets';
-
 import { Spinner } from '../../../components/animation/Spinner';
+import { ChainLogo } from '../../../components/icons/ChainLogo';
 import { HelpIcon } from '../../../components/icons/HelpIcon';
 import { Card } from '../../../components/layout/Card';
 import MailUnknown from '../../../images/icons/mail-unknown.svg';
@@ -135,7 +134,7 @@ export function TransactionCard({
           <div className="text-gray-500 text-center max-w-xs">
             Destination transaction tracking is unavailable for this message, sorry!{' '}
           </div>
-          <Image src={MailUnknown} alt="" width={64} height={64} className="mt-6" />
+          <Image src={MailUnknown} alt="" width={60} height={60} className="mt-7" />
         </div>
       )}
     </Card>

src/multiProvider.ts

@@ -2,9 +2,10 @@ import { MultiProvider, chainMetadata } from '@hyperlane-xyz/sdk';
 
 import { ChainConfig } from './features/chains/chainConfig';
 
-let multiProvider: MultiProvider = new MultiProvider();
+let multiProvider: MultiProvider;
 
 export function getMultiProvider() {
+  if (!multiProvider) multiProvider = new MultiProvider();
   return multiProvider;
 }
 
@@ -18,5 +19,5 @@ export function setMultiProviderChains(customChainConfigs: Record<number, ChainC
 }
 
 export function getProvider(chainId) {
-  return multiProvider.getProvider(chainId);
+  return getMultiProvider().getProvider(chainId);
 }

src/store.ts

@@ -4,6 +4,7 @@ import { persist } from 'zustand/middleware';
 import { Environment } from './consts/environments';
 import { ChainConfig } from './features/chains/chainConfig';
 import { setMultiProviderChains } from './multiProvider';
+import { logger } from './utils/logger';
 
 // Keeping everything here for now as state is simple
 // Will refactor into slices as necessary
@@ -32,6 +33,10 @@ export const useStore = create<AppState>()(
     {
       name: 'hyperlane', // name in storage
       partialize: (state) => ({ chainConfigs: state.chainConfigs }), // fields to persist
+      onRehydrateStorage: () => (state, error) => {
+        if (state?.chainConfigs) setMultiProviderChains(state.chainConfigs);
+        else if (error) logger.debug('Error rehydrating store', error);
+      },
     },
   ),
 );

yarn.lock

@@ -1311,7 +1311,7 @@ __metadata:
   dependencies:
     "@headlessui/react": ^1.7.11
     "@hyperlane-xyz/sdk": 1.2.1
-    "@hyperlane-xyz/widgets": 1.2.1
+    "@hyperlane-xyz/widgets": 1.2.2-beta0
     "@metamask/jazzicon": "https://github.com/jmrossy/jazzicon#7a8df28974b4e81129bfbe3cab76308b889032a6"
     "@rainbow-me/rainbowkit": ^0.11.0
     "@tanstack/react-query": ^4.24.10
@@ -1373,14 +1373,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hyperlane-xyz/widgets@npm:1.2.1":
-  version: 1.2.1
-  resolution: "@hyperlane-xyz/widgets@npm:1.2.1"
+"@hyperlane-xyz/widgets@npm:1.2.2-beta0":
+  version: 1.2.2-beta0
+  resolution: "@hyperlane-xyz/widgets@npm:1.2.2-beta0"
   peerDependencies:
     "@hyperlane-xyz/sdk": ^1.2
     react: ^18
     react-dom: ^18
-  checksum: 102b21a4c2e25906e7097bd63bf87c6f4028abfb30b6c44b64ac7c91fdf594cfde4c4daf327d077bdedac3fc64a0fdec27a1caf365b0a444783539b808505aa5
+  checksum: ba4bc62e28f99576c0099b3e26dbd0b5ea974345da9aab55b1c7fc4c5eb321b35456a7952d730ebb74f40c824bcf88ce06cdaf4e08d9d8f4b0fbb0f4cd0628bf
   languageName: node
   linkType: hard