Upgrade to 3.8.0-beta0

package.json

@@ -1,15 +1,15 @@
 {
   "name": "@hyperlane-xyz/widgets",
   "description": "Common react components for Hyperlane projects",
-  "version": "3.7.0",
+  "version": "3.8.0-beta0",
   "author": "J M Rossy",
   "peerDependencies": {
     "@hyperlane-xyz/sdk": "^3.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@hyperlane-xyz/sdk": "3.7.0",
+    "@hyperlane-xyz/sdk": "3.8.0-beta0",
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
     "@storybook/addon-links": "^7.6.14",

src/icons/ChainLogo.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement, memo } from 'react';
 
-import { chainMetadata } from '@hyperlane-xyz/sdk';
+import { Chains, chainMetadata } from '@hyperlane-xyz/sdk';
 import { isNumeric } from '@hyperlane-xyz/utils';
 
 import ArbitrumBlack from '../logos/black/Arbitrum';
@@ -17,6 +17,7 @@ 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 PlumeBlack from '../logos/black/Plume';
 import PolygonBlack from '../logos/black/Polygon';
 import PolygonzkevmBlack from '../logos/black/Polygonzkevm';
 import ScrollBlack from '../logos/black/Scroll';
@@ -36,6 +37,7 @@ 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 PlumeColor from '../logos/color/Plume';
 import PolygonColor from '../logos/color/Polygon';
 import PolygonzkevmColor from '../logos/color/Polygonzkevm';
 import ScrollColor from '../logos/color/Scroll';
@@ -50,42 +52,44 @@ 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<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 },
-  [chainMetadata.avalanche.chainId]: { black: AvalancheBlack, color: AvalancheColor },
-  [chainMetadata.base.chainId]: { black: BaseBlack, color: BaseColor },
-  [chainMetadata.basegoerli.chainId]: { black: BaseBlack, color: BaseColor },
-  [chainMetadata.bsc.chainId]: { black: BscBlack, color: BscColor },
-  [chainMetadata.bsctestnet.chainId]: { black: BscBlack, color: BscColor },
-  [chainMetadata.celo.chainId]: { black: CeloBlack, color: CeloColor },
-  [chainMetadata.chiado.chainId]: { black: GnosisBlack, color: GnosisColor },
-  [chainMetadata.ethereum.chainId]: { black: EthereumBlack, color: EthereumColor },
-  [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 },
-  [chainMetadata.polygon.chainId]: { black: PolygonBlack, color: PolygonColor },
-  [chainMetadata.polygonzkevm.chainId]: { black: PolygonzkevmBlack, color: PolygonzkevmColor },
-  [chainMetadata.polygonzkevmtestnet.chainId]: {
+  [chainMetadata[Chains.alfajores].chainId]: { black: CeloBlack, color: CeloColor },
+  [chainMetadata[Chains.arbitrum].chainId]: { black: ArbitrumBlack, color: ArbitrumColor },
+  [chainMetadata[Chains.arbitrumgoerli].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.goerli].chainId]: { black: EthereumBlack, color: EthereumColor },
+  [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.optimismgoerli].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.scroll.chainId]: { black: ScrollBlack, color: ScrollColor },
-  [chainMetadata.scrollsepolia.chainId]: { black: ScrollBlack, color: ScrollColor },
-  [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 },
+  [chainMetadata[Chains.polygonzkevmtestnet].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 {

src/logos/black/Plume.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgPlume = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx={175} cy={175} r={175} fill="url(#plume_svg__a)" />
+    <path d="M285.938 65.823v81.645l-40.823-40.823 40.823-40.822Z" fill="#fff" fillOpacity={0.95} />
+    <path d="M285.938 65.823h-81.646l40.823 40.822 40.823-40.822Z" fill="#fff" />
+    <path d="M163.47 106.646v81.646l-40.823-40.823 40.823-40.823Z" fill="#fff" fillOpacity={0.75} />
+    <path d="M122.648 147.47v81.646l-40.823-40.823 40.823-40.823Z" fill="#fff" fillOpacity={0.55} />
+    <path
+      d="M204.293 147.468h81.646l-40.823-40.823-40.823 40.823Z"
+      fill="#fff"
+      fillOpacity={0.85}
+    />
+    <path d="M163.47 188.292h81.646l-40.823-40.823-40.823 40.823Z" fill="#fff" fillOpacity={0.7} />
+    <path d="M122.648 229.115h81.646l-40.823-40.824-40.823 40.824Z" fill="#fff" fillOpacity={0.5} />
+    <path d="M285.938 147.468h-81.646l40.823 40.824 40.823-40.824Z" fill="#fff" fillOpacity={0.8} />
+    <path
+      d="M245.115 188.292h-81.646l40.823 40.823 40.823-40.823Z"
+      fill="#fff"
+      fillOpacity={0.65}
+    />
+    <path
+      d="M204.293 229.115h-81.646l40.823 40.823 40.823-40.823Z"
+      fill="#fff"
+      fillOpacity={0.45}
+    />
+    <path d="M204.293 147.468V65.823l40.823 40.823-40.823 40.822Z" fill="#fff" fillOpacity={0.9} />
+    <path d="M163.47 188.292v-81.646l40.823 40.823-40.823 40.823Z" fill="#fff" fillOpacity={0.8} />
+    <path d="M122.648 229.115v-81.647l40.823 40.823-40.823 40.824Z" fill="#fff" fillOpacity={0.6} />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m81.822 269.938 40.822-40.823 40.823 40.823h-70.27l-30.713 19.337 19.338-19.337Z"
+      fill="#F8F8F8"
+      fillOpacity={0.3}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M81.823 258.567v-70.275l40.823 40.823-33.149 33.149.001.001-27.01 27.01 19.335-30.708Z"
+      fill="#F9F9F9"
+      fillOpacity={0.4}
+    />
+    <defs>
+      <radialGradient
+        id="plume_svg__a"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="rotate(-44.594 391.795 86.596) scale(348.966 454.21)"
+      >
+        <stop offset={0.232} stopColor="#0F0F0F" />
+        <stop offset={0.871} stopColor="#737373" />
+      </radialGradient>
+    </defs>
+  </svg>
+);
+export default SvgPlume;

src/logos/black/index.ts

@@ -17,6 +17,7 @@ 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 Plume } from './Plume';
 export { default as Polygon } from './Polygon';
 export { default as Polygonzkevm } from './Polygonzkevm';
 export { default as Scroll } from './Scroll';

src/logos/color/Plume.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgPlume = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <circle cx={175} cy={175} r={175} fill="url(#plume_svg__a)" />
+    <path d="M285.938 65.823v81.645l-40.823-40.823 40.823-40.822Z" fill="#fff" fillOpacity={0.95} />
+    <path d="M285.938 65.823h-81.646l40.823 40.822 40.823-40.822Z" fill="#fff" />
+    <path d="M163.47 106.646v81.646l-40.823-40.823 40.823-40.823Z" fill="#fff" fillOpacity={0.75} />
+    <path d="M122.648 147.47v81.646l-40.823-40.823 40.823-40.823Z" fill="#fff" fillOpacity={0.55} />
+    <path
+      d="M204.293 147.468h81.646l-40.823-40.823-40.823 40.823Z"
+      fill="#fff"
+      fillOpacity={0.85}
+    />
+    <path d="M163.47 188.292h81.646l-40.823-40.823-40.823 40.823Z" fill="#fff" fillOpacity={0.7} />
+    <path d="M122.648 229.115h81.646l-40.823-40.824-40.823 40.824Z" fill="#fff" fillOpacity={0.5} />
+    <path d="M285.938 147.468h-81.646l40.823 40.824 40.823-40.824Z" fill="#fff" fillOpacity={0.8} />
+    <path
+      d="M245.115 188.292h-81.646l40.823 40.823 40.823-40.823Z"
+      fill="#fff"
+      fillOpacity={0.65}
+    />
+    <path
+      d="M204.293 229.115h-81.646l40.823 40.823 40.823-40.823Z"
+      fill="#fff"
+      fillOpacity={0.45}
+    />
+    <path d="M204.293 147.468V65.823l40.823 40.823-40.823 40.822Z" fill="#fff" fillOpacity={0.9} />
+    <path d="M163.47 188.292v-81.646l40.823 40.823-40.823 40.823Z" fill="#fff" fillOpacity={0.8} />
+    <path d="M122.648 229.115v-81.647l40.823 40.823-40.823 40.824Z" fill="#fff" fillOpacity={0.6} />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m81.822 269.938 40.822-40.823 40.823 40.823h-70.27l-30.713 19.337 19.338-19.337Z"
+      fill="#F8F8F8"
+      fillOpacity={0.3}
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M81.823 258.567v-70.275l40.823 40.823-33.15 33.149.002.001-27.01 27.01 19.335-30.708Z"
+      fill="#F9F9F9"
+      fillOpacity={0.4}
+    />
+    <defs>
+      <radialGradient
+        id="plume_svg__a"
+        cx={0}
+        cy={0}
+        r={1}
+        gradientUnits="userSpaceOnUse"
+        gradientTransform="rotate(-44.594 391.795 86.596) scale(348.966 454.21)"
+      >
+        <stop offset={0.232} stopColor="#AD253F" />
+        <stop offset={0.871} stopColor="#FF692E" />
+      </radialGradient>
+    </defs>
+  </svg>
+);
+export default SvgPlume;

src/logos/color/index.ts

@@ -16,6 +16,7 @@ export { default as Moonbeam } from './Moonbeam';
 export { default as Nautilus } from './Nautilus';
 export { default as Neutron } from './Neutron';
 export { default as Optimism } from './Optimism';
+export { default as Plume } from './Plume';
 export { default as Polygon } from './Polygon';
 export { default as Polygonzkevm } from './Polygonzkevm';
 export { default as Scroll } from './Scroll';

yarn.lock

@@ -2879,30 +2879,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hyperlane-xyz/core@npm:3.7.0":
-  version: 3.7.0
-  resolution: "@hyperlane-xyz/core@npm:3.7.0"
+"@hyperlane-xyz/core@npm:3.8.0-beta0":
+  version: 3.8.0-beta0
+  resolution: "@hyperlane-xyz/core@npm:3.8.0-beta0"
   dependencies:
     "@eth-optimism/contracts": "npm:^0.6.0"
-    "@hyperlane-xyz/utils": "npm:3.7.0"
+    "@hyperlane-xyz/utils": "npm:3.8.0-beta0"
     "@openzeppelin/contracts": "npm:^4.9.3"
     "@openzeppelin/contracts-upgradeable": "npm:^v4.9.3"
   peerDependencies:
     "@ethersproject/abi": "*"
     "@ethersproject/providers": "*"
     "@types/sinon-chai": "*"
-  checksum: efa01d943dd5b67830bb7244291c8ba9849472e804dff589463de76d3c03e56bc8d62454b575a6621aa1b8b53cc0d1d3b752a83d34f4b328ecd85e1ff23230d5
+  checksum: ab41e4a20ec6980988022afc1854d9cf3047e8ef29628365160f67e48e846a0ef4403d17a678b7db9342ee2146c348eb54ae7a6b8b548f7e631d676b85dd1ece
   languageName: node
   linkType: hard
 
-"@hyperlane-xyz/sdk@npm:3.7.0":
-  version: 3.7.0
-  resolution: "@hyperlane-xyz/sdk@npm:3.7.0"
+"@hyperlane-xyz/sdk@npm:3.8.0-beta0":
+  version: 3.8.0-beta0
+  resolution: "@hyperlane-xyz/sdk@npm:3.8.0-beta0"
   dependencies:
     "@cosmjs/cosmwasm-stargate": "npm:^0.31.3"
     "@cosmjs/stargate": "npm:^0.31.3"
-    "@hyperlane-xyz/core": "npm:3.7.0"
-    "@hyperlane-xyz/utils": "npm:3.7.0"
+    "@hyperlane-xyz/core": "npm:3.8.0-beta0"
+    "@hyperlane-xyz/utils": "npm:3.8.0-beta0"
     "@solana/spl-token": "npm:^0.3.8"
     "@solana/web3.js": "npm:^1.78.0"
     "@types/coingecko-api": "npm:^1.0.10"
@@ -2919,27 +2919,27 @@ __metadata:
   peerDependencies:
     "@ethersproject/abi": "*"
     "@ethersproject/providers": "*"
-  checksum: b124a42f34502c4dad4127723d345158f592056d7e60e17d87c84bf81664ead20232ffaff66e6c21968dfd5693ba5122910fbcaa6b7db5b05fdd5d2051592835
+  checksum: 967ce263c79ef152acb9684491486ccf5182c7b34136006ec8520cf67dc300ae407201802103ded3425e46f93dc1d901ede6c85b381ad56d516c7383e688c68b
   languageName: node
   linkType: hard
 
-"@hyperlane-xyz/utils@npm:3.7.0":
-  version: 3.7.0
-  resolution: "@hyperlane-xyz/utils@npm:3.7.0"
+"@hyperlane-xyz/utils@npm:3.8.0-beta0":
+  version: 3.8.0-beta0
+  resolution: "@hyperlane-xyz/utils@npm:3.8.0-beta0"
   dependencies:
     "@cosmjs/encoding": "npm:^0.31.3"
     "@solana/web3.js": "npm:^1.78.0"
     bignumber.js: "npm:^9.1.1"
     ethers: "npm:^5.7.2"
-  checksum: c76f36913c572702b9dfe22fd868db6fed01c0da9485319e33e8d00a6b8a1bfdcecb5f61c8a3fd8ccbef0b36809e8055db62d75d0c6759d5e079ee330586bcd1
+  checksum: 4344b7a46a0db684a75689aed5ceefb321149b0a3e0110c50a8db987c223d9d70f57f32ff4a5bca2cde6dec2fe172db2bdee62689a1c9bea18065aa5339abf35
   languageName: node
   linkType: hard
 
 "@hyperlane-xyz/widgets@workspace:.":
   version: 0.0.0-use.local
   resolution: "@hyperlane-xyz/widgets@workspace:."
   dependencies:
-    "@hyperlane-xyz/sdk": "npm:3.7.0"
+    "@hyperlane-xyz/sdk": "npm:3.8.0-beta0"
     "@storybook/addon-essentials": "npm:^7.6.14"
     "@storybook/addon-interactions": "npm:^7.6.14"
     "@storybook/addon-links": "npm:^7.6.14"