Merge pull request #1715 from sushi-labs/feat/new-chains

feat: add support for manta, mode, taiko, & zklink

apps/web/src/config.ts

@@ -65,7 +65,14 @@ export const DISABLED_CHAIN_IDS = [
   // NonStandardChainId.TRON,
 ] as const
 
-export const NEW_CHAIN_IDS = [ChainId.APE] as const
+export const NEW_CHAIN_IDS = [
+  ChainId.APE,
+  ChainId.MANTA,
+  ChainId.MODE,
+  ChainId.TAIKO,
+  ChainId.ZKLINK,
+  NonStandardChainId.TRON,
+] as const
 
 const PREFERRED_CHAINID_ORDER = [
   ...NEW_CHAIN_IDS,
@@ -84,6 +91,7 @@ const PREFERRED_CHAINID_ORDER = [
   ChainId.MANTLE,
   ChainId.CORE,
   ChainId.CRONOS,
+  ChainId.MODE,
   ChainId.GNOSIS,
   ChainId.ROOTSTOCK,
   ChainId.KAVA,
@@ -93,9 +101,12 @@ const PREFERRED_CHAINID_ORDER = [
   ChainId.FILECOIN,
   ChainId.TELOS,
   ChainId.METIS,
+  ChainId.MANTA,
+  ChainId.ZKLINK,
   ChainId.POLYGON_ZKEVM,
   ChainId.MOONBEAM,
   ChainId.ZETACHAIN,
+  ChainId.TAIKO,
   ChainId.BOBA,
   ChainId.HARMONY,
   ChainId.ARBITRUM_NOVA,

packages/ui/src/components/currency/Icon.tsx

@@ -87,6 +87,10 @@ const LOGO: Record<number, string> = {
   [ChainId.BLAST]: EthereumLogo,
   [ChainId.ROOTSTOCK]: BitcoinLogo,
   [ChainId.MANTLE]: MntLogo,
+  [ChainId.MANTA]: EthereumLogo,
+  [ChainId.MODE]: EthereumLogo,
+  [ChainId.TAIKO]: EthereumLogo,
+  [ChainId.ZKLINK]: EthereumLogo,
   [ChainId.APE]: ApeLogo,
 }
 

packages/ui/src/icons/SushiLiteIcon.tsx

@@ -11,14 +11,14 @@ export const SushiLiteIcon: IconComponent = (props) => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M9.244 4.573c.13.282.165.531.034.703-.125.17-.38.22-.693.193-.562-.044-1.3-.343-2.017-.84-.716-.498-1.244-1.084-1.466-1.587-.125-.282-.159-.53-.034-.702s.38-.221.699-.2c.557.05 1.301.344 2.011.841.716.498 1.245 1.09 1.466 1.592"
         fill="#fff"
       />
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M11.846 5.365a4 4 0 0 0-.107-.266c-.466-1.05-1.563-2.295-3.057-3.34C7.182.72 5.625.107 4.449.013 3.597-.054 2.938.15 2.597.615L.25 3.8c-.34.464-.33 1.138.011 1.901.312.694.894 1.473 1.686 2.221q.646.607 1.377 1.113c1.494 1.045 3.057 1.653 4.233 1.753.846.066 1.511-.138 1.852-.603L11.749 7c.301-.41.328-.982.097-1.635m-.42 1.403-.017.028c-.278.348-.807.464-1.477.415-1.12-.089-2.603-.68-4.029-1.676S3.426 3.363 2.977 2.356C2.71 1.76 2.653 1.234 2.91.864l.012-.022c.272-.37.812-.493 1.494-.437 1.12.088 2.602.68 4.028 1.675 1.432.995 2.483 2.173 2.932 3.173.267.609.324 1.15.051 1.515"
         fill="#fff"
       />

packages/ui/src/icons/network/circle/MantaCircle.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react'
+
+import { NakedNetworkIconComponent } from '../../../types'
+import { MantaNaked } from '../naked/MantaNaked'
+
+export const MantaCircle: NakedNetworkIconComponent = (props) => (
+  <MantaNaked {...props} />
+)

packages/ui/src/icons/network/circle/ModeCircle.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import { IconComponent } from '../../../types'
+import { ModeNaked } from '../naked/ModeNaked'
+
+export const ModeCircle: IconComponent = (props) => (
+  <ModeNaked
+    {...props}
+    circle={<circle cx="128" cy="128" r="128" fill="#DFFE00" />}
+  />
+)

packages/ui/src/icons/network/circle/TaikoCircle.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import { IconComponent } from '../../../types'
+import { TaikoNaked } from '../naked/TaikoNaked'
+
+export const TaikoCircle: IconComponent = (props) => (
+  <TaikoNaked
+    {...props}
+    circle={<circle cx="125" cy="125" r="125" fill="#eb1b9b" />}
+  />
+)

packages/ui/src/icons/network/circle/ZKLinkCircle.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react'
+
+import { IconComponent } from '../../../types'
+import { ZKLinkNaked } from '../naked/ZKLinkNaked'
+
+export const ZKLinkCircle: IconComponent = (props) => (
+  <ZKLinkNaked
+    {...props}
+    circle={<rect width="64" height="64" fill="#000" rx="64" />}
+  />
+)

packages/ui/src/icons/network/circle/index.tsx

@@ -26,8 +26,10 @@ import { HarmonyCircle } from './HarmonyCircle'
 import { HecoCircle } from './HecoCircle'
 import { KavaCircle } from './KavaCircle'
 import { LineaCircle } from './LineaCircle'
+import { MantaCircle } from './MantaCircle'
 import { MantleCircle } from './MantleCircle'
 import { MetisCircle } from './MetisCircle'
+import { ModeCircle } from './ModeCircle'
 import { MoonbeamCircle } from './MoonbeamCircle'
 import { MoonriverCircle } from './MoonriverCircle'
 import { OkexCircle } from './OkexCircle'
@@ -38,9 +40,11 @@ import { PolygonZKCircle } from './PolygonZKCircle'
 import { RootstockCircle } from './RootstockCircle'
 import { ScrollCircle } from './ScrollCircle'
 import { SkaleCircle } from './SkaleCircle'
+import { TaikoCircle } from './TaikoCircle'
 import { TelosCircle } from './TelosCircle'
 import { ThunderCoreCircle } from './ThunderCoreCircle'
 import { TronCircle } from './TronCircle'
+import { ZKLinkCircle } from './ZKLinkCircle'
 import { ZKSyncCircle } from './ZKSyncCircle'
 import { ZetaChainCircle } from './ZetaChainCircle'
 
@@ -69,8 +73,10 @@ export * from './HarmonyCircle'
 export * from './HecoCircle'
 export * from './KavaCircle'
 export * from './LineaCircle'
+export * from './MantaCircle'
 export * from './MantleCircle'
 export * from './MetisCircle'
+export * from './ModeCircle'
 export * from './MoonbeamCircle'
 export * from './MoonriverCircle'
 export * from './OkexCircle'
@@ -81,9 +87,11 @@ export * from './PolygonZKCircle'
 export * from './RootstockCircle'
 export * from './ScrollCircle'
 export * from './SkaleCircle'
+export * from './TaikoCircle'
 export * from './TelosCircle'
 export * from './ThunderCoreCircle'
 export * from './TronCircle'
+export * from './ZKLinkCircle'
 export * from './ZKSyncCircle'
 export * from './ZetaChainCircle'
 
@@ -129,6 +137,10 @@ export const NETWORK_CIRCLE_ICON: Partial<
   [ChainId.ROOTSTOCK]: RootstockCircle,
   [ChainId.CRONOS]: CronosCircle,
   [ChainId.MANTLE]: MantleCircle,
+  [ChainId.MANTA]: MantaCircle,
+  [ChainId.MODE]: ModeCircle,
+  [ChainId.TAIKO]: TaikoCircle,
+  [ChainId.ZKLINK]: ZKLinkCircle,
   [ChainId.APE]: ApeCircle,
   aptos: AptosCircle,
   tron: TronCircle,

packages/ui/src/icons/network/naked/MantaNaked.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react'
+
+import { nanoid } from 'nanoid'
+import { NakedNetworkIconComponent } from '../../../types'
+
+export const MantaNaked: NakedNetworkIconComponent = (props) => {
+  const id = React.useMemo(() => `manta-${nanoid()}`, [])
+
+  return (
+    <svg
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 48 48"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.12 41.21A21.47 21.47 0 0 1 2.515 24c0-11.857 9.586-21.476 21.402-21.476 9.755 0 20.407 5.85 22.98 14.81C44.018 7.325 34.822 0 23.917 0 10.71 0 0 10.748 0 24s10.71 24 23.917 24c13.206 0 23.916-10.748 23.916-24v-1.265h-1.488q-.234 0-.663-.02a42 42 0 0 1-2.223-.137c-1.793-.156-3.84-.463-5.231-1.024-2.243-.9-3.51-2.087-4.953-3.482l-.084-.078c-1.45-1.396-3.074-2.968-5.901-4.298-2.782-1.311-5.856-1.102-8.111-.633a20 20 0 0 0-2.827.802c-.351.124-.63.242-.826.32-1.137.482-2.242 1.05-3.353 1.578 0 0 2.19.6 3.269.94l.182.058c.162.052.396.137.676.254.572.235 1.319.58 2.06 1.063 1.17.75 2.138 1.702 2.535 2.863-2.477.326-4.803 1.422-6.545 2.446a28 28 0 0 0-2.548 1.709c-.305.234-.552.43-.721.567a532 532 0 0 0-2.379 2.093s2.886.307 4.31.594c.948.19 2.222.502 3.56.965 1.34.47 2.691 1.083 3.816 1.872s1.95 1.696 2.352 2.74c1.183 3.038.02 5.993-2.313 7.656-2.308 1.643-5.81 2.034-9.314-.379zm8.163 3.757a9.8 9.8 0 0 0 2.612-1.317c3.172-2.263 4.842-6.41 3.198-10.637-.65-1.663-1.885-2.928-3.256-3.893-1.378-.966-2.957-1.67-4.426-2.185-.962-.34-1.898-.6-2.71-.796.292-.189.598-.385.93-.58 1.936-1.142 4.38-2.192 6.72-2.192 3.528 0 6.154 1.09 8.663 2.25.227.105.455.216.689.32 2.242 1.056 4.594 2.165 7.33 2.165 2.737 0 4.719-.75 6.142-1.532-1.267 10.643-10.294 18.9-21.245 18.9a21.7 21.7 0 0 1-4.634-.503zm23.163-19.943c-.943.32-2.087.554-3.419.554-2.145 0-3.99-.86-6.33-1.956q-.31-.147-.63-.294c-2.347-1.089-5.057-2.243-8.586-2.452-.474-2.341-2.242-3.946-3.763-4.924a11 11 0 0 0-.507-.313c.15-.032.306-.072.468-.104 2.04-.424 4.472-.528 6.532.45 2.444 1.154 3.828 2.485 5.264 3.867l.052.046c1.475 1.422 3.042 2.915 5.765 4.01 1.514.607 3.477.933 5.154 1.116"
+        fill={`url(#${id})`}
+      />
+      <defs>
+        <linearGradient
+          id={id}
+          x1="-.429"
+          y1="24.444"
+          x2="48.262"
+          y2="23.556"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#29CCB9" />
+          <stop offset=".49" stopColor="#0091FF" />
+          <stop offset="1" stopColor="#FF66B7" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

packages/ui/src/icons/network/naked/ModeNaked.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import { NakedNetworkIconComponent } from '../../../types'
+
+export const ModeNaked: NakedNetworkIconComponent = ({ circle, ...props }) => {
+  return (
+    <svg
+      viewBox="0 0 256 256"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      {circle ? circle : <rect width="100%" height="100%" fill="#DFFE00" />}
+      <path
+        d="M203.881 195.4H174.232V128.11L186.104 89.7348L177.692 86.7415L139.215 195.4H116.666L78.1884 86.7415L69.7771 89.7348L81.6484 128.11V195.4H52V60.4H96.1444L123.526 137.688V160.378H132.474V137.688L159.856 60.4H204V195.4H203.881Z"
+        fill="black"
+      />
+    </svg>
+  )
+}

packages/ui/src/icons/network/naked/TaikoNaked.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { NakedNetworkIconComponent } from '../../../types'
+
+export const TaikoNaked: NakedNetworkIconComponent = ({ circle, ...props }) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" {...props}>
+      {circle ? circle : <rect width="100%" height="100%" fill="#eb1b9b" />}
+      <path
+        d="M117.999 53.883c-1.926 1.05-4.254 2.744-5.174 3.763-.921 1.02-6.023 11.637-11.339 23.595-9.506 21.384-9.66 21.85-9.326 28.421l.34 6.679-3.38.892c-1.86.49-4.455 1.596-5.768 2.456s-8.983 10.317-17.044 21.015c-13.865 18.401-14.677 19.73-15.044 24.623-.517 6.905 1.929 11.379 8.009 14.649l4.604 2.476 23.811-2.365c13.097-1.301 25.162-2.813 26.812-3.36 1.65-.548 4.371-2.285 6.048-3.861 3.733-3.511 5.424-3.589 8.428-.391 1.279 1.361 4.17 3.139 6.425 3.95 4.924 1.772 45.476 5.989 50.769 5.279 10-1.341 15.909-12.85 11.236-21.886-.877-1.695-7.696-11.162-15.154-21.038-13.611-18.023-15.375-19.687-23.512-22.184-1.53-.47-1.685-1.423-1.189-7.318l.571-6.778-9.862-21.931c-8.202-18.239-10.478-22.43-13.522-24.893-4.737-3.834-11.639-4.574-16.739-1.793m4.256 11.367c-.545.688-4.894 10.025-9.664 20.75-5.893 13.249-8.494 20.221-8.113 21.75.557 2.239.654 2.25 20.522 2.25h19.962l.584-2.328c.358-1.425-.371-4.43-1.879-7.75-1.355-2.982-5.266-11.722-8.691-19.422C128.035 64.895 127.493 64 125 64c-.965 0-2.201.563-2.745 1.25m-12.505 57.83c-.963.561-1.75 1.815-1.75 2.787 0 2.35 13.017 24.144 15.25 25.534 1.262.785 2.238.785 3.5 0 2.241-1.395 15.25-23.188 15.25-25.548 0-.981-.87-2.248-1.934-2.818-2.492-1.333-28.014-1.296-30.316.045m-32.43 23.17c-15.432 20.594-14.602 19.286-13.817 21.759.807 2.544 1.407 2.54 26.368-.172 15.051-1.635 20.911-2.649 22.438-3.886 2.049-1.66 1.984-1.815-7.713-18.312C96.479 131.827 94.429 129 92.532 129c-1.793 0-5.073 3.719-15.212 17.25m68.328-1.086c-7.633 12.929-9.347 16.529-8.566 17.988 1.231 2.302 1.706 2.399 23.486 4.831 23.096 2.578 25.118 2.58 25.929.026.785-2.473 1.615-1.165-13.817-21.759-10.128-13.516-13.42-17.25-15.208-17.25-1.888 0-3.929 2.79-11.824 16.164"
+        fill="#fbf4f8"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

packages/ui/src/icons/network/naked/ZKLinkNaked.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import { NakedNetworkIconComponent } from '../../../types'
+
+export const ZKLinkNaked: NakedNetworkIconComponent = ({
+  circle,
+  ...props
+}) => (
+  <svg
+    viewBox="0 0 64 64"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    {circle ? circle : <path fill="#000" d="M0 0h64v64H0z" />}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="m32.6 7.53-.752-.436-.752.435-11.508 6.662-.748.433V27.95L8.073 34.184l-.749.433V49.67l.749.434 11.508 6.662.751.435.752-.435 10.756-6.227 10.756 6.227.752.435.751-.435 11.508-6.662.748-.434V34.617l-.748-.433-10.752-6.224V14.624l-.748-.433zm-10.76 8.824 10.008-5.793 10.007 5.793v11.594l-7.84 4.538a3.3 3.3 0 0 0-2.144-.788c-.827 0-1.583.303-2.164.805l-7.867-4.555zm6.736 18.97-8.244-4.772-10.008 5.794V47.94l10.008 5.793 10.006-5.792v-9.998a3.31 3.31 0 0 1-1.762-2.618m4.764 2.651v9.965l10.008 5.793 10.007-5.793V36.346l-10.002-5.79-8.184 4.738a3.31 3.31 0 0 1-1.83 2.682"
+      fill="#03D498"
+    />
+    <path
+      clipRule="evenodd"
+      d="m31.848 22.17 11.507 6.661v13.324l-11.507 6.662-11.508-6.662V28.831z"
+      stroke="#fff"
+      strokeWidth="3"
+      strokeLinecap="round"
+    />
+  </svg>
+)

packages/ui/src/icons/network/naked/index.tsx

@@ -26,8 +26,10 @@ import { HarmonyNaked } from './HarmonyNaked'
 import { HecoNaked } from './HecoNaked'
 import { KavaNaked } from './KavaNaked'
 import { LineaNaked } from './LineaNaked'
+import { MantaNaked } from './MantaNaked'
 import { MantleNaked } from './MantleNaked'
 import { MetisNaked } from './MetisNaked'
+import { ModeNaked } from './ModeNaked'
 import { MoonbeamNaked } from './MoonbeamNaked'
 import { MoonriverNaked } from './MoonriverNaked'
 import { OkexNaked } from './OkexNaked'
@@ -38,9 +40,11 @@ import { PolygonZKNaked } from './PolygonZKNaked'
 import { RootstockNaked } from './RootstockNaked'
 import { ScrollNaked } from './ScrollNaked'
 import { SkaleNaked } from './SkaleNaked'
+import { TaikoNaked } from './TaikoNaked'
 import { TelosNaked } from './TelosNaked'
 import { ThunderCoreNaked } from './ThunderCoreNaked'
 import { TronNaked } from './TronNaked'
+import { ZKLinkNaked } from './ZKLinkNaked'
 import { ZKSyncNaked } from './ZKSyncNaked'
 import { ZetaChainNaked } from './ZetaChainNaked'
 
@@ -69,8 +73,10 @@ export * from './HarmonyNaked'
 export * from './HecoNaked'
 export * from './KavaNaked'
 export * from './LineaNaked'
+export * from './MantaNaked'
 export * from './MantleNaked'
 export * from './MetisNaked'
+export * from './ModeNaked'
 export * from './MoonbeamNaked'
 export * from './MoonriverNaked'
 export * from './OkexNaked'
@@ -81,8 +87,10 @@ export * from './PolygonZKNaked'
 export * from './RootstockNaked'
 export * from './ScrollNaked'
 export * from './SkaleNaked'
+export * from './TaikoNaked'
 export * from './TelosNaked'
 export * from './TronNaked'
+export * from './ZKLinkNaked'
 export * from './ZKSyncNaked'
 export * from './ZetaChainNaked'
 
@@ -128,6 +136,10 @@ export const NETWORK_NAKED_ICON: Partial<
   [ChainId.ROOTSTOCK]: RootstockNaked,
   [ChainId.CRONOS]: CronosNaked,
   [ChainId.MANTLE]: MantleNaked,
+  [ChainId.MANTA]: MantaNaked,
+  [ChainId.MODE]: ModeNaked,
+  [ChainId.TAIKO]: TaikoNaked,
+  [ChainId.ZKLINK]: ZKLinkNaked,
   [ChainId.APE]: ApeNaked,
   aptos: AptosNaked,
   tron: TronNaked,