SDK dogfooding

.babelrc

@@ -4,6 +4,7 @@
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-optional-chaining",
     [
       "babel-plugin-styled-components",
       {

.storybook/main.js

@@ -52,7 +52,17 @@ module.exports = {
         // enable rules override sparingly
         // only if storybook can't transpile something
         // rules: custom.module.rules,
-        rules: rulesWithMarkdownAndImages,
+        rules: [
+          ...rulesWithMarkdownAndImages,
+          {
+            test: /\.m?jsx?$/,
+            loader: 'babel-loader',
+            options: {
+              plugins: ['@babel/plugin-proposal-optional-chaining'],
+            },
+            include: /node_modules\/@cowprotocol/,
+          },
+        ],
       },
       resolve: {
         ...config.resolve,

getWebpackConfig.js

@@ -201,6 +201,14 @@ function getWebpackConfig({ apps = [], config = {}, envVars = {}, defineVars = {
             },
           ],
         },
+        {
+          test: /\.m?jsx?$/,
+          loader: 'babel-loader',
+          options: {
+            plugins: ['@babel/plugin-proposal-optional-chaining'],
+          },
+          include: /node_modules\/@cowprotocol/,
+        },
         {
           test: /\.jsx?$/,
           exclude: /node_modules/,

package.json

@@ -46,9 +46,9 @@
   "author": "",
   "dependencies": {
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/app-data": "0.0.1-RC.5",
+    "@cowprotocol/app-data": "v0.1.0-alpha.0",
     "@cowprotocol/contracts": "1.3.1",
-    "@cowprotocol/cow-sdk": "^1.0.2-RC.7",
+    "@cowprotocol/cow-sdk": "^2.0.0-alpha.4",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
@@ -101,6 +101,7 @@
   "devDependencies": {
     "@babel/core": "^7.9.4",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.9.4",

src/Console.tsx

@@ -13,6 +13,7 @@ const ConsoleWrapper = styled.div`
   overflow: auto;
   z-index: 9999;
 `
+
 const ButtonGroup = styled.div`
   position: fixed;
   bottom: 1.2rem;

src/api/operator/accountOrderUtils.ts

@@ -1,7 +1,8 @@
-import { OrderMetaData, SupportedChainId } from '@cowprotocol/cow-sdk'
-import { COW_SDK } from 'const'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
 import { GetAccountOrdersParams, RawOrder } from './types'
+import { prodOrderBookSDK, stagingOrderBookSDK } from 'cowSdk'
+import { EnrichedOrder } from '@cowprotocol/cow-sdk'
 
 /**
  * Gets a list of orders of one user paginated
@@ -27,11 +28,9 @@ export async function getAccountOrders(params: GetAccountOrdersParams): Promise<
   }
 
   const [prodOrders, barnOrders] = await Promise.all([
-    state.prodHasNext
-      ? COW_SDK.cowApi.getOrders({ owner, offset, limit: limitPlusOne }, { chainId: networkId, env: 'prod' })
-      : [],
+    state.prodHasNext ? prodOrderBookSDK.getOrders({ owner, offset, limit: limitPlusOne }, { chainId: networkId }) : [],
     state.barnHasNext
-      ? COW_SDK.cowApi.getOrders({ owner, offset, limit: limitPlusOne }, { chainId: networkId, env: 'staging' })
+      ? stagingOrderBookSDK.getOrders({ owner, offset, limit: limitPlusOne }, { chainId: networkId })
       : [],
   ])
 
@@ -75,17 +74,17 @@ type CacheKey = {
 }
 
 type CacheState = {
-  merged: Map<number, OrderMetaData[]>
-  unmerged: OrderMetaData[]
+  merged: Map<number, EnrichedOrder[]>
+  unmerged: EnrichedOrder[]
   prodPage: number
   prodHasNext: boolean
   barnPage: number
   barnHasNext: boolean
 }
 
 const emptyState = (): CacheState => ({
-  merged: new Map<number, OrderMetaData[]>(),
-  unmerged: [] as OrderMetaData[],
+  merged: new Map<number, EnrichedOrder[]>(),
+  unmerged: [] as EnrichedOrder[],
   prodPage: 0,
   prodHasNext: true,
   barnPage: 0,

src/api/operator/operatorApi.ts

@@ -1,11 +1,11 @@
-import { GetTradesParams } from '@cowprotocol/cow-sdk'
 import { Network } from 'types'
-import { COW_SDK } from 'const'
 import { buildSearchString } from 'utils/url'
 import { isProd, isStaging } from 'utils/env'
 
 import { GetOrderParams, GetOrdersParams, RawOrder, RawTrade, GetTxOrdersParams, WithNetworkId } from './types'
 import { fetchQuery } from 'api/baseApi'
+import { prodOrderBookSDK, stagingOrderBookSDK } from 'cowSdk'
+import { Address, UID } from '@cowprotocol/cow-sdk'
 
 export { getAccountOrders } from './accountOrderUtils'
 
@@ -64,7 +64,7 @@ function _get(networkId: Network, url: string): Promise<Response> {
 export async function getOrder(params: GetOrderParams): Promise<RawOrder | null> {
   const { networkId, orderId } = params
 
-  return COW_SDK.cowApi.getOrder(orderId, { chainId: networkId })
+  return prodOrderBookSDK.getOrderMultiEnv(orderId, { chainId: networkId })
 }
 
 /**
@@ -108,8 +108,8 @@ export async function getTxOrders(params: GetTxOrdersParams): Promise<RawOrder[]
 
   // sdk not merging array responses yet
   const orders = await Promise.all([
-    COW_SDK.cowApi.getTxOrders(txHash, { chainId: networkId, env: 'prod' }),
-    COW_SDK.cowApi.getTxOrders(txHash, { chainId: networkId, env: 'staging' }),
+    prodOrderBookSDK.getTxOrders(txHash, { chainId: networkId }),
+    stagingOrderBookSDK.getTxOrders(txHash, { chainId: networkId }),
   ])
 
   return [...orders[0], ...orders[1]]
@@ -124,16 +124,19 @@ export async function getTxOrders(params: GetTxOrdersParams): Promise<RawOrder[]
  *
  * Both filters cannot be used at the same time
  */
-export async function getTrades(params: GetTradesParams & WithNetworkId): Promise<RawTrade[]> {
+export async function getTrades(
+  params: {
+    owner?: Address
+    orderId?: UID
+  } & WithNetworkId,
+): Promise<RawTrade[]> {
   const { networkId, owner, orderId } = params
   console.log(`[getTrades] Fetching trades on network ${networkId} with filters`, { owner, orderId })
 
   // sdk not merging array responses yet
   const trades = await Promise.all([
-    // @ts-expect-error to avoid duplication we just pass both parameters
-    COW_SDK.cowApi.getTrades({ owner, orderId }, { chainId: networkId, env: 'prod' }),
-    // @ts-expect-error to avoid duplication we just pass both parameters
-    COW_SDK.cowApi.getTrades({ owner, orderId }, { chainId: networkId, env: 'staging' }),
+    prodOrderBookSDK.getTrades({ owner, orderId }, { chainId: networkId }),
+    stagingOrderBookSDK.getTrades({ owner, orderId }, { chainId: networkId }),
   ])
 
   return [...trades[0], ...trades[1]]

src/api/operator/types.ts

@@ -1,20 +1,16 @@
 import BigNumber from 'bignumber.js'
 
 import { TokenErc20 } from '@gnosis.pm/dex-js'
-
-import { OrderKind } from '@cowprotocol/contracts'
-import { OrderMetaData, TradeMetaData } from '@cowprotocol/cow-sdk'
-
 import { Network } from 'types'
+import { EnrichedOrder, OrderKind, Trade as TradeMetaData } from '@cowprotocol/cow-sdk'
 
-export type OrderID = string
 export type TxHash = string
 
 export type OrderStatus = 'open' | 'filled' | 'cancelled' | 'cancelling' | 'expired' | 'signing'
 export type RawOrderStatusFromAPI = 'presignaturePending' | 'open' | 'fullfilled' | 'cancelled' | 'expired'
 
 // Raw API response
-export type RawOrder = OrderMetaData
+export type RawOrder = EnrichedOrder
 /**
  * Enriched Order type.
  * Applies some transformations on the raw api data.

src/apps/explorer/components/SummaryCardsWidget/VolumeChart/useGetVolumeData.ts

@@ -1,10 +1,10 @@
 import { useEffect, useState } from 'react'
 import { HistogramData, UTCTimestamp } from 'lightweight-charts'
-import { COW_SDK } from 'const'
 import { useNetworkId } from 'state/network'
 import { Network } from 'types'
 import { VolumePeriod } from './VolumeChartWidget'
 import { VolumeDataResponse } from './VolumeChart'
+import { subgraphApiSDK } from 'cowSdk'
 
 type RawVolumeItem = {
   timestamp: number
@@ -38,7 +38,7 @@ export function useGetVolumeData(volumeTimePeriod = VolumePeriod.DAILY): VolumeD
 }
 
 async function getLastHoursData(network: Network): Promise<RawVolumeItem[]> {
-  const data = await COW_SDK.cowSubgraphApi.getLastHoursVolume(48, { chainId: network })
+  const data = await subgraphApiSDK.getLastHoursVolume(48, { chainId: network })
 
   return (data?.hourlyTotals as RawVolumeItem[]) || []
 }
@@ -52,7 +52,7 @@ async function getLastDaysData(
     [VolumePeriod.MONTHLY]: 30 * 2,
     [VolumePeriod.YEARLY]: 365 * 2,
   }
-  const data = await COW_SDK.cowSubgraphApi.getLastDaysVolume(days[period], { chainId: network })
+  const data = await subgraphApiSDK.getLastDaysVolume(days[period], { chainId: network })
 
   return (data?.dailyTotals as RawVolumeItem[]) || []
 }

src/apps/explorer/components/SummaryCardsWidget/useGetSummaryData.ts

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client'
-import { COW_SDK } from 'const'
 import { useCallback, useEffect, useState } from 'react'
 import { useNetworkId } from 'state/network'
 import { Network } from 'types'
+import { subgraphApiSDK } from 'cowSdk'
 
 export interface BatchInfo {
   lastBatchDate: Date
@@ -87,7 +87,7 @@ export function useGetSummaryData(): TotalSummaryResponse | undefined {
 
   const fetchAndBuildSummary = useCallback(async () => {
     setSummary((summary) => ({ ...summary, isLoading: true }))
-    COW_SDK.cowSubgraphApi.runQuery(summaryQuery, undefined, { chainId: network }).then((data: SummaryQuery) => {
+    subgraphApiSDK.runQuery(summaryQuery, undefined, { chainId: network }).then((data: SummaryQuery) => {
       const summary = buildSummary(data)
       setSummary({ ...summary, isLoading: false })
     })

src/apps/explorer/components/TransanctionBatchGraph/index.tsx

@@ -7,7 +7,6 @@ import React, { useState, useEffect, useRef, useCallback } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
 import styled, { useTheme } from 'styled-components'
 import BigNumber from 'bignumber.js'
-import { OrderKind } from '@cowprotocol/contracts'
 import {
   faRedo,
   faDiceOne,
@@ -35,6 +34,7 @@ import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
 import useWindowSizes from 'hooks/useWindowSizes'
 import { layouts, LayoutNames } from './layouts'
 import { DropdownOption, DropdownPosition } from 'apps/explorer/components/common/Dropdown'
+import { OrderKind } from '@cowprotocol/cow-sdk'
 
 Cytoscape.use(popper)
 Cytoscape.use(noOverlap)

src/apps/explorer/pages/AppData/EncodePage.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import Form, { FormValidation } from '@rjsf/core'
 import { JSONSchema7 } from 'json-schema'
-import { IpfsHashInfo } from '@cowprotocol/cow-sdk'
-import { COW_SDK, DEFAULT_IPFS_READ_URI } from 'const'
+import { IpfsHashInfo } from '@cowprotocol/app-data'
+import { DEFAULT_IPFS_READ_URI } from 'const'
 import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import Spinner from 'components/common/Spinner'
 import AppDataWrapper from 'components/common/AppDataWrapper'
@@ -22,6 +22,7 @@ import {
 } from './config'
 import { TabData, TabView } from '.'
 import { IpfsWrapper } from './styled'
+import { metadataApiSDK } from 'cowSdk'
 
 type EncodeProps = {
   tabData: TabData
@@ -134,7 +135,7 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
   const onSubmit = useCallback(async ({ formData }: FormProps): Promise<void> => {
     setIsLoading(true)
     try {
-      const hashInfo = await COW_SDK.metadataApi.calculateAppDataHash(handleFormatData(formData))
+      const hashInfo = await metadataApiSDK.calculateAppDataHash(handleFormatData(formData))
       setIpfsHashInfo(hashInfo)
     } catch (e) {
       setError(e.message)
@@ -156,8 +157,7 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
       if (!ipfsHashInfo) return
       setIsLoading(true)
       try {
-        await COW_SDK.updateContext({ ipfs: formData })
-        await COW_SDK.metadataApi.uploadMetadataDocToIpfs(handleFormatData(appDataForm))
+        await metadataApiSDK.uploadMetadataDocToIpfs(handleFormatData(appDataForm), formData)
         setIsDocUploaded(true)
       } catch (e) {
         if (INVALID_IPFS_CREDENTIALS.includes(e.message)) {

src/apps/explorer/pages/AppData/config.tsx

@@ -24,7 +24,7 @@ export const INVALID_IPFS_CREDENTIALS = [
 export type FormProps = Record<string, any>
 
 export const getSchema = async (): Promise<JSONSchema7> => {
-  const latestSchema = (await getAppDataSchema(LATEST_APP_DATA_VERSION)).default as JSONSchema7
+  const latestSchema = (await getAppDataSchema(LATEST_APP_DATA_VERSION)) as JSONSchema7
   deleteAllPropertiesByName(latestSchema, 'examples')
   deleteAllPropertiesByName(latestSchema, '$id')
   return formatSchema(latestSchema)

src/components/AppData/DecodeAppData.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react'
 import AppDataWrapper from 'components/common/AppDataWrapper'
-import { AnyAppDataDocVersion } from '@cowprotocol/cow-sdk'
+import { AnyAppDataDocVersion } from '@cowprotocol/app-data'
 import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import { Notification } from 'components/Notification'
 import Spinner from 'components/common/Spinner'
@@ -9,7 +9,7 @@ import { getCidHashFromAppData, getDecodedAppData } from 'hooks/useAppData'
 import useSafeState from 'hooks/useSafeState'
 
 type Props = {
-  appData: number
+  appData: string
   showExpanded?: boolean
 }
 

src/components/common/TradeOrderType.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { OrderKind } from '@cowprotocol/contracts'
-
 import { capitalize } from 'utils'
+import { OrderKind } from '@cowprotocol/cow-sdk'
 
 const TradeTypeWrapper = styled.div`
   span {

src/components/orders/FilledProgress/FilledProgress.stories.tsx

@@ -12,7 +12,7 @@ import { ONE_BIG_NUMBER } from 'const'
 import { FilledProgress, Props } from '.'
 
 import { RICH_ORDER } from '../../../../test/data'
-import { OrderKind } from '@cowprotocol/contracts'
+import { OrderKind } from '@cowprotocol/cow-sdk'
 
 export default {
   title: 'Orders/FilledProgress',

src/components/orders/OrderDetails/index.tsx

@@ -36,7 +36,8 @@ export const OrderDetails: React.FC<Props> = (props) => {
 
   // Only set txHash for fillOrKill orders, if any
   // Partially fillable order will have a tab only for the trades
-  const txHash = order && !order.partiallyFillable && trades && trades.length === 1 ? trades[0].txHash : undefined
+  const txHash =
+    (order && !order.partiallyFillable && trades && trades.length === 1 ? trades[0].txHash : undefined) || undefined
 
   // Avoid redirecting until another network is searched again
   useEffect(() => {

src/components/orders/OrderSurplusDisplay/OrderSurplusDisplay.stories.tsx

@@ -11,7 +11,7 @@ import { ONE_BIG_NUMBER, ZERO_BIG_NUMBER } from 'const'
 
 import { RICH_ORDER } from '../../../../test/data'
 import { Order } from 'api/operator'
-import { OrderKind } from '@cowprotocol/contracts'
+import { OrderKind } from '@cowprotocol/cow-sdk'
 
 export default {
   title: 'orders/OrderSurplusDisplay',

src/components/transaction/TransactionTable/index.stories.tsx

@@ -7,7 +7,7 @@ import { GlobalStyles, ThemeToggler, Router, NetworkDecorator } from 'storybook/
 
 import { Order } from 'api/operator'
 import { RICH_ORDER, TUSD, WETH } from '../../../../test/data'
-import { OrderKind } from '@cowprotocol/contracts'
+import { OrderKind } from '@cowprotocol/cow-sdk'
 
 export default {
   title: 'transaction/TransactionTable',