1046 load from api orderstable

src/api/operator/operatorApi.ts

@@ -193,16 +193,24 @@ export async function getOrder(params: GetOrderParams): Promise<RawOrder | null>
  *  - owner: address
  *  - sellToken: address
  *  - buyToken: address
+ *  - minValidTo: number
  */
 export async function getOrders(params: GetOrdersParams): Promise<RawOrder[]> {
   const { networkId, ...searchParams } = params
-  const { owner, sellToken, buyToken } = searchParams
+  const { owner, sellToken, buyToken, minValidTo } = searchParams
+  const defaultValues = {
+    includeFullyExecuted: 'true',
+    includeInvalidated: 'true',
+    includeInsufficientBalance: 'true',
+    includePresignaturePending: 'true',
+    includeUnsupportedTokens: 'true',
+  }
 
   console.log(
     `[getOrders] Fetching orders on network ${networkId} with filters: owner=${owner} sellToken=${sellToken} buyToken=${buyToken}`,
   )
 
-  const searchString = buildSearchString({ ...searchParams })
+  const searchString = buildSearchString({ ...searchParams, ...defaultValues, minValidTo: String(minValidTo) })
 
   const queryString = '/orders/' + searchString
 

src/api/operator/types.ts

@@ -119,7 +119,8 @@ export type GetOrderParams = WithNetworkId & {
 }
 
 export type GetOrdersParams = WithNetworkId & {
-  owner?: string
+  owner: string
+  minValidTo: number
   sellToken?: string
   buyToken?: string
 }

src/apps/explorer/ExplorerApp.tsx

@@ -118,7 +118,7 @@ const AppContent = (): JSX.Element => {
 }
 
 const Wrapper = styled.div`
-  max-width: 140rem;
+  max-width: 118rem;
   margin: 0 auto;
 
   ${media.mediumDown} {

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

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import OrdersTable from 'components/orders/OrdersUserDetailsTable'
+import { EmptyItemWrapper } from 'components/common/StyledUserDetailsTable'
+import { OrdersTableContext } from './context/OrdersTableContext'
+
+export const OrdersTableWithData: React.FC = () => {
+  const { orders, isFirstLoading } = useContext(OrdersTableContext)
+
+  return isFirstLoading ? (
+    <EmptyItemWrapper>
+      <FontAwesomeIcon icon={faSpinner} spin size="3x" />
+    </EmptyItemWrapper>
+  ) : (
+    <OrdersTable orders={orders} />
+  )
+}

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { Order } from 'api/operator'
+
+interface CommonState {
+  orders: Order[]
+  error: string
+  isFirstLoading: boolean
+}
+
+export const OrdersTableContext = React.createContext({} as CommonState)

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

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react'
+import styled from 'styled-components'
+import { faSpinner } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+import ExplorerTabs from 'apps/explorer/components/common/ExplorerTabs/ExplorerTab'
+import { OrdersTableWithData } from './OrdersTableWithData'
+import { OrdersTableContext } from './context/OrdersTableContext'
+import { useGetOrders } from './useGetOrders'
+import { TabItemInterface } from 'components/common/Tabs/Tabs'
+
+const StyledTabLoader = styled.span`
+  padding-left: 4px;
+`
+
+const tabItems = (isLoadingOrders: boolean): TabItemInterface[] => {
+  return [
+    {
+      id: 1,
+      tab: (
+        <>
+          Orders
+          <StyledTabLoader>{isLoadingOrders && <FontAwesomeIcon icon={faSpinner} spin size="1x" />}</StyledTabLoader>
+        </>
+      ),
+      content: <OrdersTableWithData />,
+    },
+  ]
+}
+
+interface Props {
+  ownerAddress: string
+}
+
+const OrdersTableWidget: React.FC<Props> = ({ ownerAddress }) => {
+  const { orders, isLoading, error } = useGetOrders(ownerAddress)
+
+  const isFirstLoading = useMemo(() => {
+    if (isLoading && orders.length === 0) return true
+
+    return false
+  }, [isLoading, orders.length])
+
+  return (
+    <OrdersTableContext.Provider value={{ orders, error, isFirstLoading }}>
+      <ExplorerTabs tabItems={tabItems(isLoading)} />
+    </OrdersTableContext.Provider>
+  )
+}
+
+export default OrdersTableWidget

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

@@ -0,0 +1,128 @@
+import { useState, useCallback, useEffect } from 'react'
+import { subMinutes, getTime } from 'date-fns'
+
+import { Network } from 'types'
+import { useMultipleErc20 } from 'hooks/useErc20'
+import { getOrders, Order, RawOrder } from 'api/operator'
+import { useNetworkId } from 'state/network'
+import { transformOrder } from 'utils'
+import { ORDERS_HISTORY_MINUTES_AGO, ORDERS_QUERY_INTERVAL } from 'apps/explorer/const'
+
+/**
+ *
+ * Merge new RawOrders consulted, that may have changed status
+ *
+ * @param previousOrders List of orders
+ * @param newOrdersFetched List of fetched block order that could have changed
+ */
+export function mergeNewOrders(previousOrders: Order[], newOrdersFetched: RawOrder[]): Order[] {
+  if (newOrdersFetched.length === 0) return previousOrders
+
+  // find the order up to which it is to be replaced
+  const lastOrder = newOrdersFetched[newOrdersFetched.length - 1]
+  const positionLastOrder = previousOrders.findIndex((o) => o.uid === lastOrder.uid)
+  if (positionLastOrder === -1) {
+    return newOrdersFetched.map((order) => transformOrder(order)).concat(previousOrders)
+  }
+
+  const slicedOrders: Order[] = previousOrders.slice(positionLastOrder + 1)
+  return newOrdersFetched.map((order) => transformOrder(order)).concat(slicedOrders)
+}
+
+function isObjectEmpty(object: Record<string, unknown>): boolean {
+  // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+  for (const key in object) {
+    if (key) return false
+  }
+
+  return true
+}
+
+type Result = {
+  orders: Order[]
+  error: string
+  isLoading: boolean
+}
+
+export function useGetOrders(ownerAddress: string): Result {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [orders, setOrders] = useState<Order[]>([])
+  const networkId = useNetworkId() || undefined
+  const [erc20Addresses, setErc20Addresses] = useState<string[]>([])
+  const { value: valueErc20s, isLoading: areErc20Loading } = useMultipleErc20({ networkId, addresses: erc20Addresses })
+  const [mountNewOrders, setMountNewOrders] = useState(false)
+
+  const fetchOrders = useCallback(
+    async (network: Network, owner: string, minTimeHistoryTimeStamp = 0): Promise<void> => {
+      setIsLoading(true)
+      setError('')
+
+      try {
+        const ordersFetched = await getOrders({ networkId: network, owner, minValidTo: minTimeHistoryTimeStamp })
+        const newErc20Addresses = ordersFetched.reduce((accumulator: string[], element) => {
+          const updateAccumulator = (tokenAddress: string): void => {
+            if (accumulator.indexOf(tokenAddress) === -1) {
+              accumulator.push(tokenAddress)
+            }
+          }
+          updateAccumulator(element.buyToken)
+          updateAccumulator(element.sellToken)
+
+          return accumulator
+        }, [])
+
+        setErc20Addresses(newErc20Addresses)
+        // TODO -> For the moment it is neccesary to sort by date
+        ordersFetched.sort((a, b) => +new Date(b.creationDate) - +new Date(a.creationDate))
+
+        setOrders((previousOrders) => mergeNewOrders(previousOrders, ordersFetched))
+        setMountNewOrders(true)
+      } catch (e) {
+        const msg = `Failed to fetch orders`
+        console.error(msg, e)
+        setError(msg)
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [],
+  )
+
+  useEffect(() => {
+    if (!networkId) {
+      return
+    }
+    const getOrUpdateOrders = (minHistoryTime?: number): Promise<void> =>
+      fetchOrders(networkId, ownerAddress, minHistoryTime)
+
+    getOrUpdateOrders()
+
+    const intervalId: NodeJS.Timeout = setInterval(() => {
+      const minutesAgoTimestamp = getTime(subMinutes(new Date(), ORDERS_HISTORY_MINUTES_AGO))
+      getOrUpdateOrders(Math.floor(minutesAgoTimestamp / 1000))
+    }, ORDERS_QUERY_INTERVAL)
+
+    return (): void => {
+      clearInterval(intervalId)
+    }
+  }, [fetchOrders, networkId, ownerAddress])
+
+  useEffect(() => {
+    if (areErc20Loading || isObjectEmpty(valueErc20s) || !mountNewOrders) {
+      return
+    }
+
+    const newOrders = orders.map((order) => {
+      order.buyToken = valueErc20s[order.buyTokenAddress] || order.buyToken
+      order.sellToken = valueErc20s[order.sellTokenAddress] || order.sellToken
+
+      return order
+    })
+
+    setOrders(newOrders)
+    setMountNewOrders(false)
+  }, [valueErc20s, networkId, areErc20Loading, mountNewOrders, orders])
+
+  return { orders, error, isLoading }
+}

src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx

@@ -11,6 +11,7 @@ const StyledTabs = styled.div`
   padding: 0;
   border: ${({ theme }): string => `1px solid ${theme.borderPrimary}`};
   border-radius: 4px;
+  min-height: 33rem;
 
   > div > div.tablist {
     justify-content: flex-start;

src/apps/explorer/const.ts

@@ -2,6 +2,8 @@ import { AnalyticsDimension } from 'types'
 
 /** Explorer app constants */
 export const ORDER_QUERY_INTERVAL = 10000 // in ms
+export const ORDERS_QUERY_INTERVAL = 30000 // in ms
+export const ORDERS_HISTORY_MINUTES_AGO = 10 // in minutes
 
 export const DISPLAY_TEXT_COPIED_CHECK = 1000 // in ms
 

src/apps/explorer/pages/UserDetails.tsx

@@ -1,5 +1,62 @@
 import React from 'react'
+import { useParams } from 'react-router'
+import styled from 'styled-components'
 
-const UserDetails: React.FC = () => <h3>Placeholder Page</h3>
+import { isAddress } from 'web3-utils'
+
+import { media } from 'theme/styles/media'
+import NotFound from './NotFound'
+import OrdersTableWidget from '../components/OrdersTableWidget'
+import { useNetworkId } from 'state/network'
+import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
+import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
+
+const Wrapper = styled.div`
+  padding: 1.6rem;
+  margin: 0 auto;
+  width: 100%;
+
+  ${media.mediumDown} {
+    max-width: 94rem;
+  }
+
+  ${media.mobile} {
+    max-width: 100%;
+  }
+  > h1 {
+    display: flex;
+    padding: 2.4rem 0 2.35rem;
+    align-items: center;
+    font-weight: ${({ theme }): string => theme.fontBold};
+  }
+`
+const TitleAddress = styled(RowWithCopyButton)`
+  font-size: ${({ theme }): string => theme.fontSizeDefault};
+  font-weight: ${({ theme }): string => theme.fontNormal};
+  margin: 0 0 0 1.5rem;
+  display: flex;
+  align-items: center;
+`
+const UserDetails: React.FC = () => {
+  const { address } = useParams<{ address: string }>()
+  const networkId = useNetworkId() || undefined
+
+  if (!isAddress(address)) {
+    return <NotFound />
+  } else {
+    return (
+      <Wrapper>
+        <h1>
+          User details
+          <TitleAddress
+            textToCopy={address}
+            contentsToDisplay={<BlockExplorerLink type="address" networkId={networkId} identifier={address} />}
+          />
+        </h1>
+        <OrdersTableWidget ownerAddress={address} />
+      </Wrapper>
+    )
+  }
+}
 
 export default UserDetails