chore(STK-123): Update CoW SDK (#1933)

* chore: update CoW API, improve contract types
* chore: update tsconfig to specify where to check React types
* chore: update yarn.lock file
* chore: update start command

package.json

@@ -5,7 +5,7 @@
   "description": "DXswap Decentralized Application",
   "license": "GPL-3.0-or-later",
   "scripts": {
-    "start": "yarn codegen:socket && yarn codegen:graphql && react-app-rewired start",
+    "start": "yarn codegen:graphql && react-app-rewired start",
     "build": "git config --global --add safe.directory /workspace && yarn codegen:wallet-connect-domain-verification && cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
     "build:simple": "git config --global --add safe.directory /workspace && cross-env GENERATE_SOURCEMAP=false react-app-rewired build",
     "build:serve": "yarn build && serve -s ./build -l 5001",

src/pages/Swap/LimitOrderBox/api/cow.ts

@@ -1,5 +1,5 @@
 import type { Signer } from '@ethersproject/abstract-signer'
-import { ChainId, CoWTrade, GPv2SupportedChainId, JSBI } from '@swapr/sdk'
+import { CoWTrade, JSBI } from '@swapr/sdk'
 
 import contractNetworks from '@cowprotocol/contracts/networks.json'
 import { OrderKind as CoWOrderKind } from '@cowprotocol/cow-sdk'
@@ -171,9 +171,14 @@ export async function createCoWLimitOrder({ order, signer, chainId }: GetLimitOr
  * @param chainId The chain Id
  * @returns The vault relayer address
  */
-export function getVaultRelayerAddress(chainId: ChainId) {
+export type GPV2ContractChainId = keyof typeof contractNetworks.GPv2VaultRelayer
+export function getVaultRelayerAddress(chainId: GPV2ContractChainId) {
+  const gpv2RelayerChainIds = Object.keys(JSON.parse(JSON.stringify(contractNetworks.GPv2VaultRelayer)))
+
+  if (!chainId || !gpv2RelayerChainIds.includes(chainId.toString())) return undefined
+
   const GPv2VaultRelayer = contractNetworks.GPv2VaultRelayer as Record<
-    GPv2SupportedChainId,
+    GPV2ContractChainId,
     Record<'transactionHash' | 'address', string>
   >
 

src/pages/Swap/LimitOrderBox/components/LimitOrderForm/LimitOrderForm.tsx

@@ -22,7 +22,7 @@ import { Field } from '../../../../../state/swap/types'
 import { useCurrencyBalances } from '../../../../../state/wallet/hooks'
 import { maxAmountSpend } from '../../../../../utils/maxAmountSpend'
 import AppBody from '../../../../AppBody'
-import { createCoWLimitOrder, getQuote, getVaultRelayerAddress } from '../../api/cow'
+import { createCoWLimitOrder, getQuote, getVaultRelayerAddress, GPV2ContractChainId } from '../../api/cow'
 import { BUY_LIMIT_PRICE_PERCENTAGE, GET_QUOTE_EXPIRY_MINUTES, SELL_LIMIT_PRICE_PERCENTAGE } from '../../constants'
 import { LimitOrderFormContext } from '../../contexts/LimitOrderFormContext'
 import { InputFocus, LimitOrderKind, MarketPrices, OrderExpiresInUnit } from '../../interfaces'
@@ -96,7 +96,7 @@ export function LimitOrderForm({ account, provider, chainId }: LimitOrderFormPro
 
   const [tokenInApproval, tokenInApprovalCallback] = useApproveCallback(
     sellTokenAmount,
-    getVaultRelayerAddress(chainId)
+    getVaultRelayerAddress(chainId as unknown as GPV2ContractChainId)
   )
 
   const onModalDismiss = () => {

src/state/transactions/updater.tsx

@@ -1,10 +1,11 @@
-import { ChainId, CoWTrade, GPv2SupportedChainId } from '@swapr/sdk'
+import { ChainId, CoWTrade } from '@swapr/sdk'
 
 import contractNetworks from '@cowprotocol/contracts/networks.json'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { useActiveWeb3React } from '../../hooks'
+import { GPV2ContractChainId } from '../../pages/Swap/LimitOrderBox/api/cow'
 import { retry, RetryableError, RetryOptions } from '../../utils/retry'
 import { updateBlockNumber } from '../application/actions'
 import { useAddPopup, useBlockNumber } from '../application/hooks'
@@ -115,10 +116,10 @@ export default function Updater(): null {
 
               // The settlement contract from COW
               const GPv2Settlement = contractNetworks.GPv2Settlement as Record<
-                GPv2SupportedChainId,
+                GPV2ContractChainId,
                 Record<'transactionHash' | 'address', string>
               >
-              const contractAddress = GPv2Settlement[chainId]?.address
+              const contractAddress = GPv2Settlement[chainId as unknown as GPV2ContractChainId]?.address
 
               dispatch(
                 finalizeTransaction({

tsconfig.json

@@ -14,7 +14,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "react": ["./node_modules/@types/react"]
+    }
   },
   "exclude": ["./src/services/EcoBridge/Socket/api/generated"],
   "include": ["src"]