Release v2.9.0

.github/workflows/ci.yml

@@ -28,7 +28,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Set output of cache
         id: yarn-cache
@@ -67,7 +67,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules
@@ -98,7 +98,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules
@@ -132,7 +132,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
 
       - name: Load dependencies
         id: cache-node-modules

package.json

@@ -1,11 +1,11 @@
 {
   "name": "@gnosis.pm/gp-v1",
-  "version": "2.8.2",
+  "version": "2.9.0",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,
   "engines": {
-    "node": "12"
+    "node": "16"
   },
   "scripts": {
     "start": "npm run start:explorer",
@@ -52,7 +52,7 @@
   "dependencies": {
     "@amcharts/amcharts4": "^4.9.12",
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/cow-sdk": "^0.0.9",
+    "@cowprotocol/cow-sdk": "^0.0.14",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
@@ -77,16 +77,20 @@
     "bn.js": "^4.11.9",
     "combine-reducers": "^1.0.0",
     "cytoscape": "^3.21.0",
+    "cytoscape-fcose": "^2.1.0",
+    "cytoscape-klay": "^3.1.4",
+    "cytoscape-no-overlap": "^1.0.1",
     "cytoscape-popper": "^2.0.0",
     "date-fns": "^2.9.0",
     "detect-browser": "^5.1.0",
     "eth-json-rpc-middleware": "^4.4.1",
     "ethers": "^5.0.26",
-    "graphql": "^15.3.0",
+    "flexsearch": "^0.7.21",
+    "graphql": "^16.5.0",
     "inter-ui": "^3.15.0",
     "joi": "^17.2.0",
     "json-rpc-engine": "5.3.0",
-    "lightweight-charts": "^3.2.0",
+    "lightweight-charts": "^3.8.0",
     "modali": "^1.2.0",
     "node-cache": "^5.1.0",
     "npm-run-all": "^4.1.5",
@@ -129,8 +133,10 @@
     "@types/bn.js": "^4.11.6",
     "@types/combine-reducers": "^1.0.0",
     "@types/cytoscape": "^3.19.4",
+    "@types/cytoscape-popper": "^2.0.0",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@types/flexsearch": "^0.7.3",
     "@types/hapi__joi": "^16.0.12",
     "@types/jest": "^26.0.8",
     "@types/node": "^14.0.14",
@@ -142,7 +148,6 @@
     "@types/react-router-dom": "^5.1.3",
     "@types/styled-components": "^5.0.1",
     "@types/webpack-env": "^1.15.2",
-    "@types/cytoscape-popper": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
     "babel-jest": "^26.1.0",
@@ -166,7 +171,7 @@
     "eslint-plugin-react": "^7.21.2",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-utils": ">=2.1.0",
-    "favicons-webpack-plugin": "^3.0.1",
+    "favicons-webpack-plugin": "^4.0.0",
     "file-loader": "^6.0.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "frontmatter-markdown-loader": "^3.2.1",

src/api/operator/operatorApi.ts

@@ -1,5 +1,5 @@
 import { Network } from 'types'
-import { COW_SDK } from 'const'
+import { COW_SDK, COW_SDK_DEV } from 'const'
 import { buildSearchString } from 'utils/url'
 import { isProd, isStaging } from 'utils/env'
 
@@ -30,6 +30,8 @@ function getOperatorUrl(): Partial<Record<Network, string>> {
   }
 }
 
+const COW_SDK_ENV = isProd || isStaging ? COW_SDK : COW_SDK_DEV
+
 const API_BASE_URL = getOperatorUrl()
 
 const DEFAULT_HEADERS: Headers = new Headers({
@@ -65,10 +67,19 @@ function _get(networkId: Network, url: string): Promise<Response> {
 export async function getOrder(params: GetOrderParams): Promise<RawOrder | null> {
   const { networkId, orderId } = params
   const cowInstance = COW_SDK[networkId]
+  const cowInstanceDev = COW_SDK_DEV[networkId]
+
+  if (!cowInstance || !cowInstanceDev) return null
 
-  if (!cowInstance) return null
+  let order = null
+
+  try {
+    order = await cowInstance.cowApi.getOrder(orderId)
+  } catch (error) {
+    order = await cowInstanceDev.cowApi.getOrder(orderId)
+  }
 
-  return cowInstance.cowApi.getOrder(orderId)
+  return order
 }
 
 /**
@@ -112,7 +123,7 @@ export async function getOrders(params: GetOrdersParams): Promise<RawOrder[]> {
  */
 export async function getAccountOrders(params: GetAccountOrdersParams): Promise<RawOrder[]> {
   const { networkId, owner, offset, limit } = params
-  const cowInstance = COW_SDK[networkId]
+  const cowInstance = COW_SDK_ENV[networkId]
 
   if (!cowInstance) return []
 
@@ -128,10 +139,13 @@ export async function getTxOrders(params: GetTxOrdersParams): Promise<RawOrder[]
   console.log(`[getTxOrders] Fetching tx orders on network ${networkId}`)
 
   const cowInstance = COW_SDK[networkId]
+  const cowInstanceDev = COW_SDK_DEV[networkId]
 
-  if (!cowInstance) return []
+  if (!cowInstance || !cowInstanceDev) return []
+
+  const orders = await Promise.all([cowInstance.cowApi.getTxOrders(txHash), cowInstanceDev.cowApi.getTxOrders(txHash)])
 
-  return cowInstance.cowApi.getTxOrders(txHash)
+  return [...orders[0], ...orders[1]]
 }
 
 /**
@@ -146,22 +160,18 @@ export async function getTxOrders(params: GetTxOrdersParams): Promise<RawOrder[]
 export async function getTrades(params: GetTradesParams): Promise<RawTrade[]> {
   const { networkId, owner = '', orderId = '' } = params
   const cowInstance = COW_SDK[networkId]
+  const cowInstanceDev = COW_SDK_DEV[networkId]
 
-  if (orderId) return getOrderTrades(params)
+  if (!cowInstance || !cowInstanceDev) return []
 
-  if (!cowInstance) return []
-
-  return cowInstance.cowApi.getTrades({ owner })
-}
+  console.log(`[getTrades] Fetching trades on network ${networkId} with filters`, { owner, orderId })
 
-async function getOrderTrades(params: GetTradesParams): Promise<RawTrade[]> {
-  const { networkId, orderId = '' } = params
+  const trades = await Promise.all([
+    cowInstance.cowApi.getTrades({ owner, orderId }),
+    cowInstanceDev.cowApi.getTrades({ owner, orderId }),
+  ])
 
-  console.log(`[getTrades] Fetching trades on network ${networkId} with filter: orderId=${orderId}`)
-
-  const queryString = `/trades/` + buildSearchString({ orderUid: orderId })
-
-  return _fetchQuery(networkId, queryString)
+  return [...trades[0], ...trades[1]]
 }
 
 function _fetchQuery<T>(networkId: Network, queryString: string): Promise<T>

src/apps/explorer/components/OrdersTableWidget/OrdersTableWithData.tsx

@@ -10,7 +10,7 @@ import CowLoading from 'components/common/CowLoading'
 
 export const OrdersTableWithData: React.FC = () => {
   const {
-    orders,
+    data: orders,
     addressAccountParams: { ownerAddress, networkId },
   } = useContext(OrdersTableContext)
   const isFirstRender = useFirstRender()

src/apps/explorer/components/OrdersTableWidget/context/OrdersTableContext.tsx

@@ -8,9 +8,9 @@ export type BlockchainNetwork = Network | undefined
 
 type CommonState = {
   addressAccountParams: { networkId: BlockchainNetwork; ownerAddress: string }
-  orders: Order[] | undefined
+  data: Order[] | undefined
   error?: UiError
-  isOrdersLoading: boolean
+  isLoading: boolean
   tableState: TableState
 } & TableStateSetters
 

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

@@ -2,11 +2,11 @@ import React from 'react'
 import styled from 'styled-components'
 
 import ExplorerTabs from 'apps/explorer/components/common/ExplorerTabs/ExplorerTabs'
+import TablePagination from 'apps/explorer/components/common/TablePagination'
 import { TabItemInterface } from 'components/common/Tabs/Tabs'
 import { useTable } from './useTable'
 import { OrdersTableWithData } from './OrdersTableWithData'
 import { OrdersTableContext, BlockchainNetwork } from './context/OrdersTableContext'
-import PaginationOrdersTable from './PaginationOrdersTable'
 import { useGetAccountOrders } from 'hooks/useGetOrders'
 import Spinner from 'components/common/Spinner'
 import { ConnectionStatus } from 'components/ConnectionStatus'
@@ -44,7 +44,7 @@ const WrapperExtraComponents = styled.div`
 
 const ExtraComponentNode: React.ReactNode = (
   <WrapperExtraComponents>
-    <PaginationOrdersTable />
+    <TablePagination context={OrdersTableContext} />
   </WrapperExtraComponents>
 )
 interface Props {
@@ -61,7 +61,7 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
   } = useTable({ initialState: { pageOffset: 0, pageSize: 20 } })
   const {
     orders,
-    isLoading: isOrdersLoading,
+    isLoading,
     error,
     isThereNext: isThereNextOrder,
   } = useGetAccountOrders(ownerAddress, tableState.pageSize, tableState.pageOffset, tableState.pageIndex)
@@ -72,9 +72,9 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
     <OrdersTableContext.Provider
       value={{
         addressAccountParams,
-        orders,
+        data: orders,
         error,
-        isOrdersLoading,
+        isLoading,
         tableState,
         setPageSize,
         handleNextPage,
@@ -83,7 +83,7 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
     >
       <ConnectionStatus />
       {error && <Notification type={error.type} message={error.message} />}
-      <StyledExplorerTabs tabItems={tabItems(isOrdersLoading)} extra={ExtraComponentNode} />
+      <StyledExplorerTabs tabItems={tabItems(isLoading)} extra={ExtraComponentNode} />
     </OrdersTableContext.Provider>
   )
 }