feat(COW-163): Add Ink network (#6877)

Add Ink network.

Author: Danziger

.github/workflows/vercel.yml

@@ -61,8 +61,11 @@ jobs:
           REACT_APP_NETWORK_URL_137: ${{ secrets.REACT_APP_NETWORK_URL_137 }}
           REACT_APP_NETWORK_URL_232: ${{ secrets.REACT_APP_NETWORK_URL_232 }}
           REACT_APP_NETWORK_URL_8453: ${{ secrets.REACT_APP_NETWORK_URL_8453 }}
+          REACT_APP_NETWORK_URL_9745: ${{ secrets.REACT_APP_NETWORK_URL_9745 }}
           REACT_APP_NETWORK_URL_42161: ${{ secrets.REACT_APP_NETWORK_URL_42161 }}
           REACT_APP_NETWORK_URL_43114: ${{ secrets.REACT_APP_NETWORK_URL_43114 }}
+          REACT_APP_NETWORK_URL_57073: ${{ secrets.REACT_APP_NETWORK_URL_57073 }}
+          REACT_APP_NETWORK_URL_59144: ${{ secrets.REACT_APP_NETWORK_URL_59144 }}
           REACT_APP_NETWORK_URL_11155111: ${{ secrets.REACT_APP_NETWORK_URL_11155111 }}
           REACT_APP_WC_PROJECT_ID: ${{ secrets.REACT_APP_WC_PROJECT_ID }}
           REACT_APP_IPFS_READ_URI: ${{ secrets.REACT_APP_IPFS_READ_URI }}

README.md

@@ -161,12 +161,17 @@ environment variables:
 
 ```ini
 REACT_APP_NETWORK_URL_1: https://...
-REACT_APP_NETWORK_URL_11155111: https://...
-REACT_APP_NETWORK_URL_100: https://...
+REACT_APP_NETWORK_URL_56: https://...
+REACT_APP_NETWORK_URL_100: https://rpc.gnosis.gateway.fm
 REACT_APP_NETWORK_URL_137: https://...
+REACT_APP_NETWORK_URL_232: https://rpc.lens.xyz
 REACT_APP_NETWORK_URL_8453: https://...
+REACT_APP_NETWORK_URL_9745: https://rpc.plasma.to
 REACT_APP_NETWORK_URL_42161: https://...
 REACT_APP_NETWORK_URL_43114: https://...
+REACT_APP_NETWORK_URL_57073: https://rpc-ten.inkonchain.com
+REACT_APP_NETWORK_URL_59144: https://rpc.linea.build
+REACT_APP_NETWORK_URL_11155111: https://...
 ```
 
 Additionally, if you plan to run the integration tests locally you must define:

apps/cowswap-frontend/package.json

@@ -39,21 +39,21 @@
     "@cowprotocol/common-utils": "workspace:*",
     "@cowprotocol/core": "workspace:*",
     "@cowprotocol/cow-runner-game": "^0.2.9",
-    "@cowprotocol/cow-sdk": "7.2.13",
+    "@cowprotocol/cow-sdk": "~7.3.1",
     "@cowprotocol/cowswap-abis": "workspace:*",
     "@cowprotocol/ens": "workspace:*",
     "@cowprotocol/events": "workspace:*",
     "@cowprotocol/hook-dapp-lib": "workspace:*",
     "@cowprotocol/iframe-transport": "workspace:*",
     "@cowprotocol/multicall": "workspace:*",
     "@cowprotocol/permit-utils": "workspace:*",
-    "@cowprotocol/sdk-bridging": "1.5.0",
-    "@cowprotocol/sdk-contracts-ts": "^1.1.0",
-    "@cowprotocol/sdk-cow-shed": "0.2.12",
-    "@cowprotocol/sdk-ethers-v5-adapter": "0.3.1",
-    "@cowprotocol/sdk-order-book": "^0.5.1",
-    "@cowprotocol/sdk-trading": "^0.8.1",
-    "@cowprotocol/sdk-viem-adapter": "^0.3.1",
+    "@cowprotocol/sdk-bridging": "1.7.0",
+    "@cowprotocol/sdk-contracts-ts": "^1.4.0",
+    "@cowprotocol/sdk-cow-shed": "0.2.14",
+    "@cowprotocol/sdk-ethers-v5-adapter": "0.3.3",
+    "@cowprotocol/sdk-order-book": "^0.6.1",
+    "@cowprotocol/sdk-trading": "^0.9.2",
+    "@cowprotocol/sdk-viem-adapter": "^0.3.3",
     "@cowprotocol/snackbars": "workspace:*",
     "@cowprotocol/tokens": "workspace:*",
     "@cowprotocol/types": "workspace:*",

apps/cowswap-frontend/src/common/pure/NetworksList/index.tsx

@@ -9,7 +9,7 @@ import { Trans } from '@lingui/react/macro'
 
 import * as styledEl from './styled'
 
-const NEW_NETWORK_IDS = [SupportedChainId.LINEA, SupportedChainId.PLASMA]
+const NEW_NETWORK_IDS = new Set([SupportedChainId.PLASMA, SupportedChainId.INK])
 
 export interface NetworksListProps {
   currentChainId: SupportedChainId | null
@@ -32,7 +32,7 @@ export function NetworksList(props: NetworksListProps): ReactNode {
 
         const isActive = targetChainId === currentChainId
         const logoUrl = getLogo(isDarkMode, isActive, logo.dark, logo.light)
-        const isNewNetwork = NEW_NETWORK_IDS.includes(targetChainId)
+        const isNewNetwork = NEW_NETWORK_IDS.has(targetChainId)
 
         const rowContent = (
           <styledEl.FlyoutRow key={targetChainId} onClick={() => onSelectChain(targetChainId)} active={isActive}>

apps/cowswap-frontend/src/modules/account/containers/AccountDetails/SurplusCard.tsx

@@ -30,6 +30,7 @@ const LENS_START_DATE = 'September 2025'
 const BNB_START_DATE = 'September 2025'
 const LINEA_START_DATE = 'November 2025'
 const PLASMA_START_DATE = 'January 2026'
+const INK_START_DATE = 'February 2026'
 
 const START_DATE: Record<SupportedChainId, string> = {
   [SupportedChainId.MAINNET]: DEFAULT_START_DATE,
@@ -43,6 +44,7 @@ const START_DATE: Record<SupportedChainId, string> = {
   [SupportedChainId.BNB]: BNB_START_DATE,
   [SupportedChainId.LINEA]: LINEA_START_DATE,
   [SupportedChainId.PLASMA]: PLASMA_START_DATE,
+  [SupportedChainId.INK]: INK_START_DATE,
 }
 
 const Wrapper = styled.div`

apps/cowswap-frontend/src/modules/appData/utils/buildAppData.ts

@@ -58,8 +58,7 @@ export async function buildAppData({
   replacedOrderUid,
   userConsent,
 }: BuildAppDataParams): Promise<AppDataInfo> {
-  const referrerParams =
-    referrerAccount && chainId === SupportedChainId.MAINNET ? { address: referrerAccount } : undefined
+  const referrerParams = referrerAccount && chainId === SupportedChainId.MAINNET ? { code: referrerAccount } : undefined
 
   const quoteParams = {
     slippageBips,

apps/cowswap-frontend/src/modules/orderProgressBar/constants.ts

@@ -107,6 +107,7 @@ export const CHAIN_SPECIFIC_BENEFITS: Record<SupportedChainId, MessageDescriptor
   [SupportedChainId.BNB]: COW_SWAP_BENEFITS,
   [SupportedChainId.LINEA]: COW_SWAP_BENEFITS,
   [SupportedChainId.PLASMA]: COW_SWAP_BENEFITS,
+  [SupportedChainId.INK]: COW_SWAP_BENEFITS,
 }
 
 export const SURPLUS_IMAGES = [

apps/cowswap-frontend/src/modules/orders/state/ordersLimitAtom.ts

@@ -28,12 +28,18 @@ export const ordersLimitAtom = atom<OrdersLimitState>(DEFAULT_ORDERS_LIMIT_STATE
 
 const walletKeyAtom = atom((get) => {
   const { chainId, account } = get(walletInfoAtom)
-  return `${chainId}::${account ?? ''}`
+  return account ? `${chainId}::${account.toLowerCase()}` : ''
 })
 
 ordersLimitAtom.onMount = () => {
+  let prevWalletKey = ''
+
   return observe((get, set) => {
-    get(walletKeyAtom)
-    set(ordersLimitAtom, DEFAULT_ORDERS_LIMIT_STATE)
+    const walletKey = get(walletKeyAtom)
+
+    if (prevWalletKey !== walletKey) {
+      prevWalletKey = walletKey
+      set(ordersLimitAtom, DEFAULT_ORDERS_LIMIT_STATE)
+    }
   }, jotaiStore)
 }

apps/cowswap-frontend/src/modules/swap/containers/NetworkBridgeBanner/NetworkBridgeBanner.tsx

@@ -15,6 +15,8 @@ import { useDarkModeManager } from 'legacy/state/user/hooks'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
 
 const HideSmall = styled.span`
+  width: 100%;
+
   ${Media.upToSmall()} {
     display: none;
   }
@@ -56,6 +58,7 @@ const SHOULD_SHOW_ALERT = {
   [SupportedChainId.LENS]: true,
   [SupportedChainId.LINEA]: true,
   [SupportedChainId.PLASMA]: true,
+  [SupportedChainId.INK]: true,
 }
 
 type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
@@ -119,6 +122,7 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole
   }
 `
 const Header = styled.h2`
+  width: 100%;
   font-weight: 600;
   font-size: 16px;
   margin: 0;

apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/ChainsLoadingList.tsx

@@ -1,8 +1,11 @@
 import { ReactNode } from 'react'
 
+import { ALL_SUPPORTED_CHAIN_IDS } from '@cowprotocol/cow-sdk'
+
 import * as styledEl from './styled'
 
-const LOADING_ITEMS_COUNT = 10
+const LOADING_ITEMS_COUNT = ALL_SUPPORTED_CHAIN_IDS.length
+
 const LOADING_SKELETON_INDICES = Array.from({ length: LOADING_ITEMS_COUNT }, (_, index) => index)
 
 export function ChainsLoadingList(): ReactNode {