Update to SDK 3.1.4

Add new chain logos
hyperlane-xyz · Nov 16, 2023 · 96490da · 96490da
1 parent 57d168d
commit 96490da
Show file tree

Hide file tree

Showing 19 changed files with 1,128 additions and 105 deletions.
diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
   "name": "@hyperlane-xyz/widgets",
   "description": "Common react components for Hyperlane projects",
-  "version": "1.5.0",
+  "version": "3.1.4",
   "author": "J M Rossy",
   "peerDependencies": {
-    "@hyperlane-xyz/sdk": "^1.4",
+    "@hyperlane-xyz/sdk": "^3.1",
     "react": "^18",
     "react-dom": "^18"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@hyperlane-xyz/sdk": "1.5.0",
+    "@hyperlane-xyz/sdk": "3.1.4",
     "@mdx-js/react": "^1.6.22",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-docs": "^6.5.15",

diff --git a/src/icons/ChainLogo.tsx b/src/icons/ChainLogo.tsx
@@ -1,27 +1,36 @@
 import React, { ReactElement, memo } from 'react';
 
 import { chainMetadata } from '@hyperlane-xyz/sdk';
-import { solana, solanatestnet } from '@hyperlane-xyz/sdk/dist/consts/chainMetadata';
 
 import ArbitrumBlack from '../logos/black/Arbitrum';
 import AvalancheBlack from '../logos/black/Avalanche';
+import BaseBlack from '../logos/black/Base';
 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 MantaBlack from '../logos/black/Manta';
 import MoonbeamBlack from '../logos/black/Moonbeam';
+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 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 MantaColor from '../logos/color/Manta';
 import MoonbeamColor from '../logos/color/Moonbeam';
+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 { Circle } from './Circle';
@@ -36,23 +45,33 @@ const CHAIN_TO_LOGO: Record<number, { black: SvgIcon; color: SvgIcon }> = {
   [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.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.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]: {
+    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 },
-  // TODO replace with access via chainMetadata when it's added there
-  [solana.chainId]: { black: SolanaBlack, color: SolanaColor },
-  [solanatestnet.chainId]: { black: SolanaBlack, color: SolanaColor },
+  [chainMetadata.solana.chainId]: { black: SolanaBlack, color: SolanaColor },
   [chainMetadata.solanadevnet.chainId]: { black: SolanaBlack, color: SolanaColor },
 };
 

diff --git a/src/logos/black/Base.tsx b/src/logos/black/Base.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgBase = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" {...props}>
+    <path d="M1247.8 2500c691.6 0 1252.2-559.6 1252.2-1250S1939.4 0 1247.8 0C591.7 0 53.5 503.8 0 1144.9h1655.1v210.2H0C53.5 1996.2 591.7 2500 1247.8 2500z" />
+  </svg>
+);
+export default SvgBase;
diff --git a/src/logos/black/Cosmos.tsx b/src/logos/black/Cosmos.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCosmos = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" {...props}>
+    <circle
+      cx={1250}
+      cy={1250}
+      r={1250}
+      style={{
+        fill: '#aaa',
+      }}
+    />
+    <circle
+      cx={1250}
+      cy={1250}
+      r={725.3}
+      style={{
+        fill: '#000',
+      }}
+    />
+    <path
+      d="M1252.6 159.5c-135 0-244.4 489.4-244.4 1093s109.4 1093.2 244.4 1093.2 244.3-489.4 244.3-1093.1-109.4-1093.1-244.3-1093.1Zm16.8 2124.5c-15.4 20.6-30.8 5.1-30.8 5.1-62.2-72-93.2-205.7-93.2-205.7-108.7-349.8-82.8-1100.8-82.8-1100.8 51-596.3 144-737.1 175.6-768.4a19.3 19.3 0 0 1 24.7-2c45.9 32.5 84.4 168.5 84.4 168.5 113.6 421.8 103.3 817.9 103.3 817.9 10.3 344.6-57 730.4-57 730.4-51.7 293.2-124.2 355-124.2 355Z"
+      style={{
+        fill: '#ccc',
+      }}
+    />
+    <path
+      d="M2200.7 708.6c-67.2-117-546 31.6-1070 332s-893.5 638.9-826.3 756 546-31.7 1070-332 893.4-639 826.3-756ZM366.4 1780.5c-25.8-3.3-20-24.4-20-24.4 31.6-89.7 132-183.3 132-183.3 249.4-268.3 913.8-619.6 913.8-619.6 542.5-252.4 711-241.8 753.8-230a19.3 19.3 0 0 1 14 20.6c-5.1 56-104.2 157-104.2 157-309 308.6-657.8 496.8-657.8 496.8-293.8 180.5-662 314-662 314-280 101-369.6 68.8-369.6 68.8Z"
+      style={{
+        fill: '#ccc',
+      }}
+    />
+    <path
+      d="M2198.3 1800.4c67.7-116.8-300.9-456.8-823-759.5S374.4 587.8 306.8 704.7s301 456.8 823.3 759.5 1000.6 453.2 1068.3 336.2ZM351.6 750c-10-23.8 11.2-29.5 11.2-29.5 93.4-17.6 224.7 22.6 224.7 22.6 357.1 81.3 994 480.3 994 480.3 490.3 343 565.5 494.2 576.8 537a19.3 19.3 0 0 1-10.7 22.5c-51.1 23.4-188-11.5-188-11.5-422.1-113.1-759.7-320.5-759.7-320.5-303.3-163.6-603.2-415.3-603.2-415.3-227.9-191.8-245-285.4-245-285.4Z"
+      style={{
+        fill: '#ccc',
+      }}
+    />
+    <circle
+      cx={1250}
+      cy={1250}
+      r={128.6}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+    <ellipse
+      cx={1777.3}
+      cy={756.2}
+      rx={74.6}
+      ry={77.2}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+    <ellipse
+      cx={553}
+      cy={1018.5}
+      rx={74.6}
+      ry={77.2}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+    <ellipse
+      cx={1098.3}
+      cy={1965}
+      rx={74.6}
+      ry={77.2}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+  </svg>
+);
+export default SvgCosmos;
diff --git a/src/logos/black/Cosmwasm.tsx b/src/logos/black/Cosmwasm.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCosmwasm = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={50} height={50} fill="none" {...props}>
+    <path
+      fill="#000"
+      fillRule="evenodd"
+      d="M25 50c13.807 0 25-11.193 25-25S38.807 0 25 0 0 11.193 0 25s11.193 25 25 25zM13.14 12.497c.001 4.133 2.649 7.481 5.9 9.586 3.098 2.006 6.773-.072 9.917-2.005 3.975-2.442 9.131-2.69 13.447-.198a13.027 13.027 0 0 1 4.05 3.65c.306.422 1.03.221.99-.3-.569-7.13-4.514-13.87-11.179-17.718-2.283-1.318-2.506-1.044-2.979-.464-.714.876-1.998 2.452-11.823.293-3.037-.667-6.457.067-7.544 2.98-.49 1.314-.779 2.748-.78 4.177zm6.972 29.038c3.58-2.067 5.155-6.034 5.353-9.902.188-3.686-3.45-5.83-6.695-7.586-4.103-2.221-6.896-6.563-6.896-11.547 0-1.898.407-3.702 1.136-5.332.213-.477-.323-1.003-.753-.707C6.365 10.517 2.5 17.306 2.5 25.001c0 2.636.348 2.692 1.087 2.811 1.116.18 3.123.505 6.166 10.093.94 2.964 3.286 5.559 6.353 5.043 1.382-.233 2.768-.699 4.006-1.413zM30.52 21.297c3.448-1.763 7.671-2.382 11.251-.316 1.238.715 2.335 1.683 3.227 2.763 1.98 2.398.906 5.727-1.19 8.024-6.783 7.428-6.06 9.329-5.658 10.386.266.7.391 1.03-1.892 2.347-6.664 3.848-14.475 3.895-20.934.82-.472-.224-.284-.952.236-1.006a13.026 13.026 0 0 0 5.185-1.682c4.316-2.492 6.68-7.082 6.552-11.745-.101-3.69-.064-7.911 3.223-9.591z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgCosmwasm;
diff --git a/src/logos/black/Manta.tsx b/src/logos/black/Manta.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgManta = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 200 200" {...props}>
+    <path d="M46.5 171.7A89.3 89.3 0 0 1 100 10.5c40.8 0 85.3 24.4 96 61.7a100 100 0 1 0 4 27.8v-5.3h-5.5a95.6 95.6 0 0 1-3.5 0l-9.3-.6c-7.5-.7-16-2-21.9-4.3a59.8 59.8 0 0 1-20.7-14.5l-.4-.3a86 86 0 0 0-24.6-18 54.6 54.6 0 0 0-34-2.6A86 86 0 0 0 65 59.1c-4.8 2-9.4 4.4-14 6.6a615.3 615.3 0 0 0 17 5.2 53 53 0 0 1 8.7 4.4c4.8 3.2 8.9 7.1 10.5 12a75 75 0 0 0-27.2 10 112 112 0 0 0-13.7 9.5l-10 8.8s12.2 1.3 18.1 2.5c4 .7 9.3 2 14.9 4s11.3 4.5 16 7.8a26 26 0 0 1 9.8 11.4c5 12.6 0 25-9.7 31.9-9.6 6.9-24.3 8.5-38.9-1.6zm34.1 15.7c4-1.3 7.6-3.2 11-5.5a37 37 0 0 0 13.3-44.3c-2.7-7-7.9-12.3-13.6-16.3-5.8-4-12.4-7-18.5-9-4-1.5-8-2.6-11.4-3.4l4-2.4a58.5 58.5 0 0 1 28-9.1c14.8 0 25.8 4.5 36.2 9.3l3 1.4c9.3 4.4 19.1 9 30.6 9 11 0 19.7-3.1 25.6-6.4a89.5 89.5 0 0 1-108.2 76.7zm96.9-83.1a44 44 0 0 1-14.3 2.3c-9 0-16.7-3.6-26.5-8.2l-2.6-1.2A95.4 95.4 0 0 0 98 87a33.4 33.4 0 0 0-17.8-21.8l2-.5a44.2 44.2 0 0 1 27.3 1.9 76 76 0 0 1 22 16.1l.2.2a70 70 0 0 0 24.1 16.7 86.5 86.5 0 0 0 21.6 4.7z" />
+  </svg>
+);
+export default SvgManta;
diff --git a/src/logos/black/Neutron.tsx b/src/logos/black/Neutron.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgNeutron = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={56}
+    height={56}
+    viewBox="-6 -6 66 66"
+    fill="none"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M56 0H3.96l15.29 18.032A13.213 13.213 0 0 1 28 14.737c7.325 0 13.263 5.938 13.263 13.263a13.21 13.21 0 0 1-3.19 8.629L56 52.132V56 0Zm-6.724 56-14.22-16.768A13.2 13.2 0 0 1 28 41.263c-7.326 0-13.264-5.938-13.264-13.263 0-2.578.736-4.985 2.01-7.022L0 6.54V56h49.276Z"
+      fill="#000"
+    />
+  </svg>
+);
+export default SvgNeutron;
diff --git a/src/logos/black/Polygonzkevm.tsx b/src/logos/black/Polygonzkevm.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgPolygonzkevm = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+    <path d="M116.2 2.6c-7.5 2.6-88.3 49.9-92.9 54.3a45.1 45.1 0 0 0-7 9.9l-2.8 5.7v111l2.7 5.6c1.6 3 4.8 7.5 7.2 9.9 4.8 4.8 83.5 51 92.1 54.1a45.1 45.1 0 0 0 23.9.4 949 949 0 0 0 46.9-26.1c45.2-26 48.6-28.5 53.5-38.4l2.7-5.5v-111l-2.7-5.5c-5-10.1-8.7-12.8-54.5-39.2a791.2 791.2 0 0 0-46.8-25.7 50.7 50.7 0 0 0-22.3.5zm20.3 18.2c1.7.8 20.9 11.8 42.8 24.4 30 17.3 40.4 23.9 42.5 26.6 2.4 3.2 2.7 4.5 3 13.5a60 60 0 0 1-.8 14.1c-1.7 6.3-7 12.7-13.1 16.1l-5.4 3-78.5.5c-86.2.5-82.1.3-92.2 6.6l-3.9 2.5.3-26.5.3-26.4 3-3.7c2.2-2.8 13.7-9.9 44.5-27.7A811.4 811.4 0 0 1 124 19c4.1-1 8.3-.4 12.5 1.8zm88 157.8c-1.1 6.3-5.9 9.7-45.4 32.4-47.1 27.1-45.4 26.2-51.2 26.2-5.6 0-4 .9-54.9-28.5-25.8-14.9-36.3-21.6-38.5-24.2-3-3.6-3-3.8-3-15.8 0-10.1.3-12.9 2-16.2 2.5-5 8-10.5 13-13 3.8-1.9 7-2 82.5-2.5 83.7-.6 80.7-.4 90.5-5.8l5-2.7.3 23.5c.2 12.9 0 24.9-.3 26.6z" />
+    <path d="M77.5 61.4a21 21 0 0 0-9.4 9.9c-.6 1.6-1.1 9.8-1.1 18.3V105h18V78h18v27h18.1l-.3-16.9-.3-16.9-3.1-3.9c-5.1-6.4-8-7.3-23.4-7.3-9 .1-14.5.5-16.5 1.4zM150.5 61.4c-1.6.8-4.1 2.4-5.4 3.6-4.3 4.2-5.1 7.8-5.1 24.5v15.6l8.8-.3 8.7-.3.3-13.3.3-13.2H176v27h18V89.7c0-12.6-.4-15.9-1.9-19.2a17.3 17.3 0 0 0-9.4-9.4c-4.2-1.6-28.5-1.3-32.2.3zM67 166.5c0 17.6.7 20.3 6.3 25.2 4.6 4.1 7.4 4.5 23.5 4.1 12.8-.3 13.1-.3 16.9-3.4 6.6-5.3 7.3-7.8 7.3-25.7V151h-18v27H85v-27H67v15.5zM140 166.5c0 17 .7 20.1 5.6 24.7 4.4 4.1 7.5 4.8 21.5 4.8 10.8 0 13.6-.3 16.7-1.9 8.6-4.4 10.2-8.7 10.2-28.1v-15h-18v27h-17.9l-.3-13.3-.3-13.2-8.7-.3-8.8-.3v15.6z" />
+  </svg>
+);
+export default SvgPolygonzkevm;
diff --git a/src/logos/black/Scroll.tsx b/src/logos/black/Scroll.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgScroll = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 162 160" {...props}>
+    <path d="M11.5 1.4a19.5 19.5 0 0 0-9.1 10.2c-1.1 4.1.2 11 2.5 14.3 3.6 5 7.4 6.4 18.2 6.9l9.7.4.6 32.2c.3 17.6.5 43.1.3 56.6-.2 21.5 0 24.9 1.5 27.6 2.3 4.2 7.1 8.1 11.6 9.4 2.5.8 20.1 1 54.4.8 49.6-.3 50.7-.3 53.5-2.4 1.5-1.1 3.9-3.6 5.1-5.5 2-2.9 2.3-4.3 2-9.8-.4-5.9-.7-6.6-4.5-10.2a16.1 16.1 0 0 0-8.2-4.5l-4.1-.7V70.8c0-45.3-.3-56.5-1.4-59.1a24.3 24.3 0 0 0-10.9-10.6C128.2-.6 15.4-.3 11.5 1.4zm14.8 3.1c2 1.4 3.7 3 3.7 3.5 0 .6-2.9 1-6.5 1-7.6 0-13 1.9-14 5-1.1 3.6 1.1 5 8.1 5 5.6 0 6.4.2 6.4 1.9 0 1.1-1.4 3.1-3.1 4.5-2.4 2-4.1 2.6-7.9 2.6-4.4 0-5-.3-6.8-3.3-2.8-4.6-3.5-7.4-2.8-11.3.8-3.8 4.9-9.2 8-10.4 4.4-1.8 11-1.1 14.9 1.5zm109.2 1.3c6.6 5.2 6.4 2.9 6.5 63.9v55.2l-45.9.3c-44.8.3-46 .4-48.8 2.4-9.3 6.9-9.9 19.9-1.2 26.7 1.9 1.5 2.9 2.7 2.3 2.7-1.8 0-7.6-4.3-9.8-7.3-2.1-2.8-2.1-3.8-2.6-70.6l-.5-67.7-2.8-4.3-2.8-4.2 51.3.3 51.4.3 2.9 2.3zM32.4 12.6c.3.9.6 5.4.6 10V31h-9.7c-9.5-.1-9.7-.1-6-1.4 5.1-1.9 7.5-4.2 8.7-8.4.7-2.7.6-4.3-.5-6.6L24 11.3c0-.1 1.8-.3 3.9-.3 2.6 0 4.1.5 4.5 1.6zM22 14.5c1.1 1.3.5 1.5-4.5 1.5s-5.6-.2-4.5-1.5c.7-.8 2.7-1.5 4.5-1.5 1.8 0 3.8.7 4.5 1.5zm38.9 116c6.2 3.9 6 4.5-1.6 4.5-7.7 0-11.3 1.7-11.3 5.4 0 2.8 1.6 3.6 7.6 3.6 5 0 5.8 1.6 2.4 5-4.3 4.3-9.5 3.9-12.8-1-4.3-6.4-.9-16.9 6.1-18.9 4.8-1.4 5.4-1.3 9.6 1.4zm93.2.8a14.5 14.5 0 0 1 0 24.4l-3.4 2.3h-44.5c-44.4 0-44.5 0-42-2 3.5-2.7 5.8-8 5.8-13 0-4.7-1.1-7.3-4.8-11.3l-2.6-2.7h88.1l3.4 2.3zm-86.5 8.3c1.9 7.4-2.3 15.4-8 15.4-4.8 0-6-1.3-2.7-2.8 3.6-1.6 5.5-6.1 4.8-11.2-.5-3.9-.4-4 2.4-4 2.2 0 3 .6 3.5 2.6zm-9.8.1c.2.9-.8 1.3-3.3 1.3-3.3 0-3.6-.2-2.5-1.5 1.5-1.8 5.1-1.6 5.8.2z" />
+    <path d="M50.4 27.5c-.3.8-.3 1.9.1 2.5.4.7 14.1 1 41.6 1H133v-5H92c-35 0-41.1.2-41.6 1.5zM51.7 41.2c-2.1 1.1-2.2 3.4-.1 4.2.9.3 19.2.6 40.9.6 32.3 0 39.5-.2 40.4-1.4.9-1.1.8-1.7-.3-2.9-1.3-1.3-7.2-1.5-40.4-1.5-22.5 0-39.5.4-40.5 1zM51.1 55.9c-.8.5-1.1 1.6-.8 2.5.6 1.4 5 1.6 41.7 1.6h41.1l-.3-2.3-.3-2.2-40-.2c-22.1-.2-40.6.1-41.4.6zM50.4 71.5c-.3.8-.3 1.9.1 2.5 1 1.6 82.1 1.4 82.7-.3 1.4-3.6.7-3.7-41.3-3.7-34.9 0-41 .2-41.5 1.5zM51.2 85.2c-1.7 1.7-1.5 3.5.4 4.2.9.3 19.2.6 40.9.6 32.3 0 39.5-.2 40.4-1.4.9-1.1.8-1.8-.4-3-1.5-1.4-6.2-1.6-40.9-1.6-29.1 0-39.5.3-40.4 1.2zM50.4 100.4c-.3.8-.3 2 .1 2.6.4.7 14.1 1 41.6 1h41l-.3-2.3-.3-2.2-40.8-.3c-35-.2-40.8 0-41.3 1.2zM50.4 115.5c-.3.8-.3 1.9.1 2.5.9 1.5 80.7 1.4 82.2-.1.6-.6.9-1.8.6-2.5-.8-2.1-82.1-2.1-82.9.1z" />
+  </svg>
+);
+export default SvgScroll;
diff --git a/src/logos/black/index.ts b/src/logos/black/index.ts
@@ -1,13 +1,20 @@
 export { default as Arbitrum } from './Arbitrum';
 export { default as Avalanche } from './Avalanche';
+export { default as Base } from './Base';
 export { default as Bsc } from './Bsc';
 export { default as Celo } from './Celo';
+export { default as Cosmos } from './Cosmos';
+export { default as Cosmwasm } from './Cosmwasm';
 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 Manta } from './Manta';
 export { default as Moonbeam } from './Moonbeam';
 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';
diff --git a/src/logos/color/Base.tsx b/src/logos/color/Base.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgBase = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 1200 1200" {...props}>
+    <g clipPath="url(#base_svg__a)">
+      <circle cx={600} cy={600} r={600} fill="#0052FF" />
+      <circle cx={600} cy={600} r={423} fill="#fff" />
+      <path fill="#0052FF" d="M177 565h637v70H177z" />
+    </g>
+    <defs>
+      <clipPath id="base_svg__a">
+        <path fill="#fff" d="M0 0h1200v1200H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgBase;
diff --git a/src/logos/color/Cosmos.tsx b/src/logos/color/Cosmos.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+
+const SvgCosmos = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" {...props}>
+    <circle
+      cx={1250}
+      cy={1250}
+      r={1250}
+      style={{
+        fill: '#2e3148',
+      }}
+    />
+    <circle
+      cx={1250}
+      cy={1250}
+      r={725.3}
+      style={{
+        fill: '#1b1e36',
+      }}
+    />
+    <path
+      d="M1252.6 159.5c-135 0-244.4 489.4-244.4 1093s109.4 1093.2 244.4 1093.2 244.3-489.4 244.3-1093.1-109.4-1093.1-244.3-1093.1Zm16.8 2124.5c-15.4 20.6-30.8 5.1-30.8 5.1-62.2-72-93.2-205.7-93.2-205.7-108.7-349.8-82.8-1100.8-82.8-1100.8 51-596.3 144-737.1 175.6-768.4a19.3 19.3 0 0 1 24.7-2c45.9 32.5 84.4 168.5 84.4 168.5 113.6 421.8 103.3 817.9 103.3 817.9 10.3 344.6-57 730.4-57 730.4-51.7 293.2-124.2 355-124.2 355Z"
+      style={{
+        fill: '#6f7390',
+      }}
+    />
+    <path
+      d="M2200.7 708.6c-67.2-117-546 31.6-1070 332s-893.5 638.9-826.3 756 546-31.7 1070-332 893.4-639 826.3-756ZM366.4 1780.5c-25.8-3.3-20-24.4-20-24.4 31.6-89.7 132-183.3 132-183.3 249.4-268.3 913.8-619.6 913.8-619.6 542.5-252.4 711-241.8 753.8-230a19.3 19.3 0 0 1 14 20.6c-5.1 56-104.2 157-104.2 157-309 308.6-657.8 496.8-657.8 496.8-293.8 180.5-662 314-662 314-280 101-369.6 68.8-369.6 68.8Z"
+      style={{
+        fill: '#6f7390',
+      }}
+    />
+    <path
+      d="M2198.3 1800.4c67.7-116.8-300.9-456.8-823-759.5S374.4 587.8 306.8 704.7s301 456.8 823.3 759.5 1000.6 453.2 1068.3 336.2ZM351.6 750c-10-23.8 11.2-29.5 11.2-29.5 93.4-17.6 224.7 22.6 224.7 22.6 357.1 81.3 994 480.3 994 480.3 490.3 343 565.5 494.2 576.8 537a19.3 19.3 0 0 1-10.7 22.5c-51.1 23.4-188-11.5-188-11.5-422.1-113.1-759.7-320.5-759.7-320.5-303.3-163.6-603.2-415.3-603.2-415.3-227.9-191.8-245-285.4-245-285.4Z"
+      style={{
+        fill: '#6f7390',
+      }}
+    />
+    <circle
+      cx={1250}
+      cy={1250}
+      r={128.6}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+    <ellipse
+      cx={1777.3}
+      cy={756.2}
+      rx={74.6}
+      ry={77.2}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+    <ellipse
+      cx={553}
+      cy={1018.5}
+      rx={74.6}
+      ry={77.2}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+    <ellipse
+      cx={1098.3}
+      cy={1965}
+      rx={74.6}
+      ry={77.2}
+      style={{
+        fill: '#b7b9c8',
+      }}
+    />
+  </svg>
+);
+export default SvgCosmos;