[Solvers] Settlements Table

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

@@ -6,6 +6,7 @@ import { useFlexSearch } from 'hooks/useFlexSearch'
 import { Solver, useGetSolvers } from 'hooks/useGetSolvers'
 import { TableState } from 'hooks/useTable'
 import { ActiveSolversTableWithData } from 'apps/explorer/components/ActiveSolversTableWidget/ActiveSolversTableWithData'
+import { TabView } from 'apps/explorer/pages/Solver'
 import { ConnectionStatus } from 'components/ConnectionStatus'
 import { CardRow } from 'components/common/CardRow'
 import TablePagination, { PaginationWrapper } from '../common/TablePagination'
@@ -46,12 +47,16 @@ export const ActiveSolversTableWidget: React.FC<Props> = ({ query, tableState, s
 
   useEffect(() => {
     const response = query ? (filteredSolvers as Solver[]) : solvers
-    setTableValues({
-      data: response.slice(tableState.pageOffset, tableState.pageOffset + tableState.pageSize),
-      length: query ? filteredSolvers.length : solvers.length,
-      isLoading,
-      error,
-    })
+    setTableValues((prevState: unknown[]) => ({
+      ...prevState,
+      [TabView.ACTIVE_SOLVERS]: {
+        data: response.slice(tableState.pageOffset, tableState.pageOffset + tableState.pageSize),
+        rawData: solvers,
+        length: query ? filteredSolvers.length : solvers.length,
+        isLoading,
+        error,
+      },
+    }))
   }, [error, filteredSolvers, isLoading, query, setTableValues, solvers, tableState.pageOffset, tableState.pageSize])
 
   if (isLoading) {

src/apps/explorer/components/SettlementsTableWidget/SettlementsTableWithData.tsx

@@ -0,0 +1,41 @@
+import React, { useContext, useState, useEffect } from 'react'
+
+import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
+import useFirstRender from 'hooks/useFirstRender'
+import { SettlementsTableContext } from 'apps/explorer/components/SettlementsTableWidget/context/SettlementsTableContext'
+import SettlementTable from 'components/solver/SettlementTable'
+import { DEFAULT_TIMEOUT } from 'const'
+import CowLoading from 'components/common/CowLoading'
+
+export const SettlementsTableWithData: React.FC = () => {
+  const { data: settlements, networkId, tableState } = useContext(SettlementsTableContext)
+  const isFirstRender = useFirstRender()
+  const [isFirstLoading, setIsFirstLoading] = useState(true)
+
+  useEffect(() => {
+    setIsFirstLoading(true)
+  }, [networkId])
+
+  useEffect(() => {
+    let timeOutMs = 0
+    if (!settlements) {
+      timeOutMs = DEFAULT_TIMEOUT
+    }
+
+    const timeOutId: NodeJS.Timeout = setTimeout(() => {
+      setIsFirstLoading(false)
+    }, timeOutMs)
+
+    return (): void => {
+      clearTimeout(timeOutId)
+    }
+  }, [settlements, settlements?.length])
+
+  return isFirstRender || isFirstLoading ? (
+    <EmptyItemWrapper>
+      <CowLoading />
+    </EmptyItemWrapper>
+  ) : (
+    <SettlementTable settlements={settlements} tableState={tableState} />
+  )
+}

src/apps/explorer/components/SettlementsTableWidget/context/SettlementsTableContext.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { Network, UiError } from 'types'
+import { Settlement } from 'hooks/useGetSettlements'
+import { TableState, TableStateSetters } from 'hooks/useTable'
+
+export type BlockchainNetwork = Network | undefined
+
+type CommonState = {
+  error?: UiError
+  data: Settlement[] | undefined
+  networkId: BlockchainNetwork
+  isLoading: boolean
+  tableState: TableState
+} & TableStateSetters
+
+export const SettlementsTableContext = React.createContext({} as CommonState)

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

@@ -0,0 +1,88 @@
+import React, { useEffect } from 'react'
+import styled from 'styled-components'
+import { SettlementsTableContext, BlockchainNetwork } from './context/SettlementsTableContext'
+import { useNetworkId } from 'state/network'
+import { useFlexSearch } from 'hooks/useFlexSearch'
+import { Settlement, useGetSettlements } from 'hooks/useGetSettlements'
+import { TableState } from 'hooks/useTable'
+import { SettlementsTableWithData } from 'apps/explorer/components/SettlementsTableWidget/SettlementsTableWithData'
+import { TabView } from 'apps/explorer/pages/Solver'
+import { ConnectionStatus } from 'components/ConnectionStatus'
+import { CardRow } from 'components/common/CardRow'
+import TablePagination, { PaginationWrapper } from '../common/TablePagination'
+import { DropdownDirection } from '../common/Dropdown'
+import { media } from 'theme/styles/media'
+import CowLoading from 'components/common/CowLoading'
+import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
+import { ScrollBarStyle } from 'apps/explorer/styled'
+
+const TableWrapper = styled(CardRow)`
+  width: 100%;
+  ${media.mobile} {
+    width: 100%;
+  }
+  ${PaginationWrapper} {
+    width: 100%;
+    justify-content: flex-end;
+  }
+  div.tab-content {
+    padding: 0 !important;
+    table {
+      ${ScrollBarStyle}
+    }
+  }
+`
+interface Props {
+  networkId: BlockchainNetwork
+  query: string
+  tableState: TableState
+  data: Settlement[]
+  setTableValues: (data: unknown) => void
+}
+
+export const SettlementsTableWidget: React.FC<Props> = ({ query, tableState, setTableValues, data }) => {
+  const networkId = useNetworkId() || undefined
+  const { settlements, isLoading, error } = useGetSettlements(networkId, data)
+  const filteredSettlements = useFlexSearch(query, settlements, ['name', 'txHash', 'address'])
+
+  useEffect(() => {
+    const response = query ? (filteredSettlements as Settlement[]) : settlements
+    setTableValues((prevState: unknown[]) => ({
+      ...prevState,
+      [TabView.SETTLEMENTS]: {
+        data: response.slice(tableState.pageOffset, tableState.pageOffset + tableState.pageSize),
+        rawData: settlements,
+        length: query ? filteredSettlements.length : settlements.length,
+        isLoading,
+        error,
+      },
+    }))
+  }, [
+    error,
+    filteredSettlements,
+    isLoading,
+    query,
+    setTableValues,
+    settlements,
+    tableState.pageOffset,
+    tableState.pageSize,
+  ])
+
+  if (isLoading) {
+    return (
+      <EmptyItemWrapper>
+        <CowLoading />
+      </EmptyItemWrapper>
+    )
+  }
+
+  return (
+    <TableWrapper>
+      <ConnectionStatus />
+      <SettlementsTableWithData />
+      <TablePagination dropdownDirection={DropdownDirection.upwards} context={SettlementsTableContext} />
+    </TableWrapper>
+  )
+}
+
+export default SettlementsTableWidget

src/apps/explorer/pages/Solver/data.ts

@@ -0,0 +1,106 @@
+export const ACTIVE_SOLVERS = {
+  '0x0e8f282ce027f3ac83980e6020a2463f4c841264': {
+    name: 'Legacy',
+    environment: 'prod',
+  },
+  '0x7a0a8890d71a4834285efdc1d18bb3828e765c6a': {
+    name: 'Naive',
+    environment: 'prod',
+  },
+  '0x3cee8c7d9b5c8f225a8c36e7d3514e1860309651': {
+    name: 'Baseline',
+    environment: 'prod',
+  },
+  '0xe8ff24ec26bd46e0140d1824da44efad2a0920b5': {
+    name: 'MIP',
+    environment: 'prod',
+  },
+  '0x731a0a8ab2c6fcad841e82d06668af7f18e34970': {
+    name: 'QuasiModo',
+    environment: 'prod',
+  },
+  '0xb20b86c4e6deeb432a22d773a221898bbbd03036': {
+    name: 'Gnosis_1inch',
+    environment: 'prod',
+  },
+  '0xe9ae2d792f981c53ea7f6493a17abf5b2a45a86b': {
+    name: 'Gnosis_ParaSwap',
+    environment: 'prod',
+  },
+  '0xda869be4adea17ad39e1dfece1bc92c02491504f': {
+    name: 'Gnosis_0x',
+    environment: 'prod',
+  },
+  '0x6d1247b8acf4dfd5ff8cfd6c47077ddc43d4500e': {
+    name: 'DexCowAgg',
+    environment: 'prod',
+  },
+  '0xf7995b6b051166ea52218c37b8d03a2a6bbef3da': {
+    name: 'Gnosis_BalancerSOR',
+    environment: 'prod',
+  },
+  '0xc9ec550bea1c64d779124b23a26292cc223327b6': {
+    name: 'Otex',
+    environment: 'prod',
+  },
+  '0x149d0f9282333681ee41d30589824b2798e9fb47': {
+    name: 'PLM',
+    environment: 'prod',
+  },
+  '0xa21740833858985e4d801533a808786d3647fb83': {
+    name: 'Laertes',
+    environment: 'prod',
+  },
+  '0x0a308697e1d3a91dcb1e915c51f8944aaec9015f': {
+    name: 'Laertes',
+    environment: 'barn',
+  },
+  '0x109bf9e0287cc95cc623fbe7380dd841d4bdeb03': {
+    name: 'Otex',
+    environment: 'barn',
+  },
+  '0xed94b86275447e28ddbdd17bbeb1f62d607b5119': {
+    name: 'Legacy',
+    environment: 'barn',
+  },
+  '0x8ccc61dba297833dbe5d95fd6360f106b9a7576e': {
+    name: 'Naive',
+    environment: 'barn',
+  },
+  '0x0d2584da2f637805071f184bcfa1268ebae8a24a': {
+    name: 'Baseline',
+    environment: 'barn',
+  },
+  '0xa0044c620da7f2876da7004719b8370eb7be5e50': {
+    name: 'MIP',
+    environment: 'barn',
+  },
+  '0xda324c2f06d3544e7965767ce9ca536dcb67a660': {
+    name: 'QuasiModo',
+    environment: 'barn',
+  },
+  '0xe33062a24149f7801a48b2675ed5111d3278f0f5': {
+    name: 'Gnosis_1inch',
+    environment: 'barn',
+  },
+  '0x080a8b1e2f3695e179453c5e617b72a381be44b9': {
+    name: 'Gnosis_ParaSwap',
+    environment: 'barn',
+  },
+  '0xde786877a10dbb7eba25a4da65aecf47654f08ab': {
+    name: 'Gnosis_0x',
+    environment: 'barn',
+  },
+  '0xdae69affe582d36f330ee1145995a53fab670962': {
+    name: 'DexCowAgg',
+    environment: 'barn',
+  },
+  '0x22dee0935c77d32c7241362b14e76fc2d5ef657d': {
+    name: 'Gnosis_BalancerSOR',
+    environment: 'barn',
+  },
+  '0x5b0bfe439ab45a4f002c259b1654ed21c9a42d69': {
+    name: 'PLM',
+    environment: 'barn',
+  },
+}