Merge pull request #1608 from sushiswap/feat/rp5-cronos

feat: prepare cronos for rp5 integration

apps/web/src/app/(evm)/pool/add/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import React, { FC, useMemo, useState } from 'react'
-import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { useTokenAmountDollarValues } from 'src/lib/hooks'
 import { useConcentratedPositionInfo } from 'src/lib/wagmi/hooks/positions/hooks/useConcentratedPositionInfo'
 import { ConcentratedLiquidityProvider } from 'src/ui/pool/ConcentratedLiquidityProvider'
@@ -14,8 +13,12 @@ import { SelectFeeConcentratedWidget } from 'src/ui/pool/SelectFeeConcentratedWi
 import { SelectNetworkWidget } from 'src/ui/pool/SelectNetworkWidget'
 import { SelectPricesWidget } from 'src/ui/pool/SelectPricesWidget'
 import { SelectTokensWidget } from 'src/ui/pool/SelectTokensWidget'
-import { computeSushiSwapV3PoolAddress } from 'sushi'
-import { SUSHISWAP_V3_FACTORY_ADDRESS, isWNativeSupported } from 'sushi/config'
+import { ChainId, computeSushiSwapV3PoolAddress } from 'sushi'
+import {
+  SUSHISWAP_V3_FACTORY_ADDRESS,
+  SUSHISWAP_V3_SUPPORTED_CHAIN_IDS,
+  isWNativeSupported,
+} from 'sushi/config'
 import { tryParseAmount } from 'sushi/currency'
 import { SWRConfig } from 'swr'
 import { useAccount } from 'wagmi'
@@ -167,7 +170,7 @@ const _Add: FC = () => {
       <SelectNetworkWidget
         selectedNetwork={chainId}
         onSelect={setNetwork}
-        networks={SUPPORTED_CHAIN_IDS}
+        networks={SUSHISWAP_V3_SUPPORTED_CHAIN_IDS as unknown as ChainId[]}
       />
       <SelectTokensWidget
         chainId={chainId}

apps/web/src/app/(evm)/pool/hero.tsx

@@ -57,7 +57,7 @@ export const Hero: FC = () => {
                     ? `/pool/add?chainId=${chainId}`
                     : isSushiSwapV2ChainId(chainId as SushiSwapV3ChainId)
                       ? `/pool/add/v2/${chainId}`
-                      : ''
+                      : '/pool/add'
                 }
               >
                 I want to create a position

apps/web/src/config.ts

@@ -48,10 +48,18 @@ const SUSHI_CHAIN_IDS = Array.from(
 
 export const SWAP_ONLY_CHAIN_IDS = [ChainId.CRONOS] as const
 
-export const CHAIN_IDS = [
-  ...SUSHI_CHAIN_IDS,
-  // ChainId.CRONOS
-] as const
+export const CHAIN_IDS = [...SUSHI_CHAIN_IDS, ChainId.CRONOS] as const
+
+export const AMM_SUPPORTED_CHAIN_IDS = SUSHI_CHAIN_IDS.filter(
+  (
+    c,
+  ): c is Exclude<
+    (typeof SUSHI_CHAIN_IDS)[number],
+    (typeof TESTNET_CHAIN_IDS)[number] | (typeof DISABLED_CHAIN_IDS)[number]
+  > =>
+    !TESTNET_CHAIN_IDS.includes(c as (typeof TESTNET_CHAIN_IDS)[number]) &&
+    !DISABLED_CHAIN_IDS.includes(c as (typeof DISABLED_CHAIN_IDS)[number]),
+)
 
 export const SUPPORTED_CHAIN_IDS = Array.from(
   new Set([

apps/web/src/lib/constants.ts

@@ -1,7 +1,7 @@
 import type { GetPoolsArgs } from '@sushiswap/client'
 import { Protocol } from '@sushiswap/database'
 
-import { SUPPORTED_CHAIN_IDS } from '../config'
+import { AMM_SUPPORTED_CHAIN_IDS } from '../config'
 
 export const L2_DEADLINE_FROM_NOW = BigInt(60) * BigInt(5)
 
@@ -46,7 +46,7 @@ export const AVAILABLE_PROTOCOL_MAP: Partial<typeof PROTOCOL_MAP> = {
 // ! Has to be kept up to date with default filters
 // Else prefetching won't work
 export const defaultPoolsArgs: GetPoolsArgs = {
-  chainIds: SUPPORTED_CHAIN_IDS,
+  chainIds: AMM_SUPPORTED_CHAIN_IDS,
   orderBy: 'liquidityUSD',
   orderDir: 'desc',
   protocols: Object.values(Protocol),

apps/web/src/lib/graph.ts

@@ -9,7 +9,7 @@ import {
   getSushiV2Pools,
 } from '@sushiswap/graph-client/sushi-v2'
 import { getSushiV3PoolsByTokenPair } from '@sushiswap/graph-client/sushi-v3'
-import { SUPPORTED_CHAIN_IDS } from 'src/config'
+import { AMM_SUPPORTED_CHAIN_IDS } from 'src/config'
 import {
   SUSHISWAP_V2_SUPPORTED_CHAIN_IDS,
   SushiSwapV2ChainId,
@@ -172,7 +172,7 @@ export const getBentoBoxTokens = async (
 export const getCharts = async (query?: { networks: string }) => {
   const chainIds = query?.networks
     ? JSON.parse(query.networks)
-    : SUPPORTED_CHAIN_IDS
+    : AMM_SUPPORTED_CHAIN_IDS
 
   const { data: daySnapshots } = await getSushiDayDatas({
     chainIds,

apps/web/src/ui/pool/ConcentratedLiquidityURLStateProvider.tsx

@@ -2,10 +2,10 @@
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import React, { FC, ReactNode, createContext, useContext, useMemo } from 'react'
-import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { useTokenWithCache } from 'src/lib/wagmi/hooks/tokens/useTokenWithCache'
 import { ChainId } from 'sushi/chain'
 import {
+  SUSHISWAP_V3_SUPPORTED_CHAIN_IDS,
   SushiSwapV3ChainId,
   SushiSwapV3FeeAmount,
   currencyFromShortCurrencyName,
@@ -98,7 +98,7 @@ const getChainIdFromUrl = (
 
 export const ConcentratedLiquidityURLStateProvider: FC<
   ConcentratedLiquidityURLStateProvider
-> = ({ children, supportedNetworks = SUPPORTED_CHAIN_IDS }) => {
+> = ({ children, supportedNetworks = SUSHISWAP_V3_SUPPORTED_CHAIN_IDS }) => {
   const { push } = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()!

apps/web/src/ui/pool/PoolsFiltersProvider.tsx

@@ -11,7 +11,7 @@ import {
   useContext,
   useMemo,
 } from 'react'
-import { SUPPORTED_CHAIN_IDS, isSupportedChainId } from 'src/config'
+import { AMM_SUPPORTED_CHAIN_IDS, isSupportedChainId } from 'src/config'
 import { z } from 'zod'
 
 import { useTypedSearchParams } from '../../lib/hooks'
@@ -34,11 +34,11 @@ export const poolFiltersSchema = z.object({
   }),
   chainIds: z.coerce
     .string()
-    .default(SUPPORTED_CHAIN_IDS.join(','))
+    .default(AMM_SUPPORTED_CHAIN_IDS.join(','))
     .transform((chainIds) =>
       chainIds !== null && chainIds !== ','
         ? chainIds.split(',').map((chainId) => Number(chainId))
-        : SUPPORTED_CHAIN_IDS,
+        : AMM_SUPPORTED_CHAIN_IDS,
     )
     .transform((chainIds) => chainIds.filter(isSupportedChainId)),
   protocols: z
@@ -68,7 +68,7 @@ export const PoolsFiltersProvider: FC<PoolsFiltersProvider> = ({
       value={useMemo(
         () => ({
           tokenSymbols: tokenSymbols ? tokenSymbols : [],
-          chainIds: chainIds ? chainIds : SUPPORTED_CHAIN_IDS,
+          chainIds: chainIds ? chainIds : AMM_SUPPORTED_CHAIN_IDS,
           protocols: protocols ? protocols : POOL_TYPES,
           farmsOnly: farmsOnly ? farmsOnly : false,
           smartPoolsOnly: smartPoolsOnly ? smartPoolsOnly : false,

apps/web/src/ui/pool/PositionCardList.tsx

@@ -1,7 +1,7 @@
 import React, { FC, ReactNode } from 'react'
 import type { UserWithPool } from 'src/app/(evm)/pool/api/user-with-pools/route'
-import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { useSushiV2UserPositions } from 'src/lib/hooks'
+import { SUSHISWAP_V2_SUPPORTED_CHAIN_IDS } from 'sushi/config'
 import { useAccount } from 'wagmi'
 
 interface PositionCardList {
@@ -23,7 +23,7 @@ export const PositionCardList: FC<PositionCardList> = ({ children }) => {
   const { address } = useAccount()
   const { data: userPositions, isLoading } = useSushiV2UserPositions({
     id: address!,
-    chainIds: SUPPORTED_CHAIN_IDS,
+    chainIds: SUSHISWAP_V2_SUPPORTED_CHAIN_IDS,
   })
 
   return (

apps/web/src/ui/pool/PositionsTable.tsx

@@ -2,8 +2,8 @@ import { Card, CardHeader, CardTitle, DataTable } from '@sushiswap/ui'
 import { Slot } from '@sushiswap/ui'
 import { DisplayColumnDef, PaginationState, Row } from '@tanstack/react-table'
 import React, { FC, ReactNode, useCallback, useMemo, useState } from 'react'
-import { SUPPORTED_CHAIN_IDS } from 'src/config'
 import { useSushiV2UserPositions } from 'src/lib/hooks'
+import { SUSHISWAP_V2_SUPPORTED_CHAIN_IDS } from 'sushi/config'
 
 import type { UserWithPool } from 'src/app/(evm)/pool/api/user-with-pools/route'
 import { useAccount } from 'wagmi'
@@ -38,7 +38,7 @@ export const PositionsTable: FC<PositionsTableProps> = ({
   const { data: positions, isLoading } = useSushiV2UserPositions(
     {
       id: address!,
-      chainIds: SUPPORTED_CHAIN_IDS,
+      chainIds: SUSHISWAP_V2_SUPPORTED_CHAIN_IDS,
     },
     !!address,
   )

apps/web/src/ui/pool/TableFiltersNetwork.tsx

@@ -19,13 +19,13 @@ import {
 import { CheckIcon } from '@sushiswap/ui/icons/CheckIcon'
 import { NetworkIcon } from '@sushiswap/ui/icons/NetworkIcon'
 import React, { FC, useCallback, useState, useTransition } from 'react'
-import { SUPPORTED_CHAIN_IDS } from 'src/config'
+import { AMM_SUPPORTED_CHAIN_IDS } from 'src/config'
 import { Chain } from 'sushi/chain'
 
 import { usePoolFilters, useSetPoolFilters } from './PoolsFiltersProvider'
 
 const isAllThenNone = (chainIds: number[]) =>
-  SUPPORTED_CHAIN_IDS.length === chainIds.length ? [] : chainIds
+  AMM_SUPPORTED_CHAIN_IDS.length === chainIds.length ? [] : chainIds
 
 export const TableFiltersNetwork: FC = () => {
   const [pending, startTransition] = useTransition()
@@ -82,7 +82,7 @@ export const TableFiltersNetwork: FC = () => {
                 {values.length > 2 ? (
                   <Chip variant="secondary">{values.length} selected</Chip>
                 ) : (
-                  SUPPORTED_CHAIN_IDS.filter((option) =>
+                  AMM_SUPPORTED_CHAIN_IDS.filter((option) =>
                     values.includes(option),
                   ).map((option) => (
                     <Chip variant="secondary" key={option}>
@@ -106,7 +106,7 @@ export const TableFiltersNetwork: FC = () => {
           />
           <CommandEmpty>No network found.</CommandEmpty>
           <CommandGroup>
-            {SUPPORTED_CHAIN_IDS.map((chainId) => (
+            {AMM_SUPPORTED_CHAIN_IDS.map((chainId) => (
               <CommandItem
                 key={chainId}
                 value={`${Chain.from(chainId)?.name}__${chainId}`}

apps/web/src/ui/pool/TableFiltersResetButton.tsx

@@ -4,7 +4,7 @@ import { XMarkIcon } from '@heroicons/react/24/solid'
 import { Button } from '@sushiswap/ui'
 import React, { FC, useCallback, useMemo, useState, useTransition } from 'react'
 
-import { SUPPORTED_CHAIN_IDS } from '../../config'
+import { AMM_SUPPORTED_CHAIN_IDS } from '../../config'
 import { usePoolFilters, useSetPoolFilters } from './PoolsFiltersProvider'
 import { POOL_TYPES } from './TableFiltersPoolType'
 
@@ -15,7 +15,7 @@ export const TableFiltersResetButton: FC = () => {
   const setFilters = useSetPoolFilters()
 
   const networks = useMemo(
-    () => (SUPPORTED_CHAIN_IDS.length === chainIds.length ? [] : chainIds),
+    () => (AMM_SUPPORTED_CHAIN_IDS.length === chainIds.length ? [] : chainIds),
     [chainIds],
   )
   const types = useMemo(

packages/sushi/src/config/wallet.ts

@@ -11,6 +11,7 @@ export const MULTISIG_CHAIN_IDS = [
   ChainId.BTTC,
   ChainId.CELO,
   ChainId.CORE,
+  ChainId.CRONOS,
   ChainId.ETHEREUM,
   ChainId.FANTOM,
   ChainId.FUSE,
@@ -44,6 +45,7 @@ export const MULTISIG_ADDRESS: Record<MultisigChainId, `0x${string}`> = {
   [ChainId.BSC]: '0xc6fD91aD4919Fd91e2c84077ba648092cB499638',
   [ChainId.BTTC]: '0x488398D8EfeF84Bd3271f13ae8Eb44Cd2C1eE687',
   [ChainId.CELO]: '0x751b01Fa14fD9640a1DF9014e2D0f3a03A198b81',
+  [ChainId.CRONOS]: '0xb8f2faca5b2EBcd6Be7B5D9E164962dE9CCc3B76',
   [ChainId.CORE]: '0x9ffC84bc9Cf7c85E4E6e2B0aB67BB6c643cA72A2',
   [ChainId.ETHEREUM]: '0x19B3Eb3Af5D93b77a5619b047De0EED7115A19e7',
   [ChainId.FANTOM]: '0xF9E7d4c6d36ca311566f46c81E572102A2DC9F52',

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

@@ -30,7 +30,7 @@ const CoreLogo = 'core.svg'
 const IslmLogo = 'islm.svg'
 const FilecoinLogo = 'filecoin.svg'
 const ZetaLogo = 'zeta.svg'
-const CroLogo = 'cro.svg'
+const CroLogo = 'cronos.svg'
 const BitcoinLogo = 'bitcoin.svg'
 
 const LOGO: Record<number, string> = {

packages/ui/src/components/network-selector.tsx

@@ -52,6 +52,7 @@ export interface NetworkSelectorProps<T extends number = ChainId> {
 }
 
 const NEW_CHAINS: number[] = [
+  ChainId.CRONOS,
   ChainId.SKALE_EUROPA,
   ChainId.ROOTSTOCK,
 ] satisfies ChainId[]

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

@@ -0,0 +1,7 @@
+import * as React from 'react'
+
+import { CronosNaked } from '../naked/CronosNaked'
+
+import { IconComponent } from '../../../types'
+
+export const CronosCircle: IconComponent = CronosNaked

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

@@ -13,6 +13,7 @@ import { BobaCircle } from './BobaCircle'
 import { BttcCircle } from './BttcCircle'
 import { CeloCircle } from './CeloCircle'
 import { CoreCircle } from './CoreCircle'
+import { CronosCircle } from './CronosCircle'
 import { EthereumCircle } from './EthereumCircle'
 import { FantomCircle } from './FantomCircle'
 import { FilecoinCircle } from './FilecoinCircle'
@@ -51,6 +52,7 @@ export * from './BobaCircle'
 export * from './BttcCircle'
 export * from './CeloCircle'
 export * from './CoreCircle'
+export * from './CronosCircle'
 export * from './EthereumCircle'
 export * from './FantomCircle'
 export * from './FilecoinCircle'
@@ -114,4 +116,5 @@ export const NETWORK_CIRCLE_ICON: Partial<Record<ChainId, IconComponent>> = {
   [ChainId.BLAST]: BlastCircle,
   [ChainId.SKALE_EUROPA]: SkaleCircle,
   [ChainId.ROOTSTOCK]: RootstockCircle,
+  [ChainId.CRONOS]: CronosCircle,
 }

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

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import { NakedNetworkIconComponent } from '../../../types'
+
+export const CronosNaked: NakedNetworkIconComponent = (props) => {
+  return (
+    <svg
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M117.341 94.496 64 125.312 10.66 94.496V33.504L64 2.688l53.341 30.816z"
+        fill="#fff"
+      />
+      <path
+        d="M64.02 8.8 16 36.41v55.2l48.02 27.59L112 91.61v-55.2zm33.762 74.63L64.02 102.842 30.234 83.43V44.57l33.785-19.412L97.782 44.57z"
+        fill="#002D74"
+      />
+      <path
+        style={{ mixBlendMode: 'multiply' }}
+        d="m64.02 119.201 47.981-27.59V36.41L64.021 8.799v16.379l33.764 19.41v38.86L64.02 102.844z"
+        fill="url(#a)"
+      />
+      <path
+        style={{ mixBlendMode: 'multiply' }}
+        d="m63.989 8.799-47.981 27.59V91.59l47.98 27.611v-16.379l-33.765-19.41v-38.86L63.99 25.156z"
+        fill="url(#b)"
+      />
+      <path
+        d="M86.41 76.896 64 89.782l-22.432-12.88V51.123L64 38.227l22.41 12.896-9.328 5.367L64 48.96l-13.085 7.53v15.027L64 79.047l13.082-7.533z"
+        fill="#002D74"
+      />
+      <defs>
+        <linearGradient
+          id="a"
+          x1="88.01"
+          y1="119.201"
+          x2="88.01"
+          y2="64"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#002D74" />
+          <stop offset="1" stop-color="#002D74" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="b"
+          x1="39.998"
+          y1="8.799"
+          x2="39.998"
+          y2="64"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#002D74" />
+          <stop offset="1" stop-color="#002D74" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}

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

@@ -13,6 +13,7 @@ import { BobaNaked } from './BobaNaked'
 import { BttcNaked } from './BttcNaked'
 import { CeloNaked } from './CeloNaked'
 import { CoreNaked } from './CoreNaked'
+import { CronosNaked } from './CronosNaked'
 import { EthereumNaked } from './EthereumNaked'
 import { FantomNaked } from './FantomNaked'
 import { FilecoinNaked } from './FilecoinNaked'
@@ -50,6 +51,7 @@ export * from './BobaNaked'
 export * from './BttcNaked'
 export * from './CeloNaked'
 export * from './CoreNaked'
+export * from './CronosNaked'
 export * from './EthereumNaked'
 export * from './FantomNaked'
 export * from './FilecoinNaked'
@@ -112,4 +114,5 @@ export const NETWORK_NAKED_ICON: Partial<Record<ChainId, IconComponent>> = {
   [ChainId.BLAST]: BlastNaked,
   [ChainId.SKALE_EUROPA]: SkaleNaked,
   [ChainId.ROOTSTOCK]: RootstockNaked,
+  [ChainId.CRONOS]: CronosNaked,
 }