Create the OrdersTableWidget structure

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { useParams } from 'react-router'
+import { getOrders } from 'api/operator'
+// import { getOrders } from 'api/operator/operatorMock'
+// import { useNetworkId } from 'state/network'
+import { Network } from 'types'
+
+import OrdersTable from 'components/orders/OrdersUserDetailsTable'
+import { Order } from 'api/operator'
+import { transformOrder } from 'utils'
+
+function useAddressParam(): string {
+  const { address } = useParams<{ address: string }>()
+
+  return address
+}
+
+type Result = {
+  orders: Order[]
+  error: string
+  isLoading: boolean
+}
+
+function useGetOrders(owner: string): Result {
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [orders, setOrders] = useState<Order[]>([])
+  const networkId = Network.Rinkeby // useNetworkId()
+
+  const fetchOrders = useCallback(async (networkId: Network, owner?: string): Promise<void> => {
+    setIsLoading(true)
+    setError('')
+
+    try {
+      const ordersFetched = await getOrders({ networkId, owner })
+
+      // TODO: fetch buy/sellToken objects
+      setOrders(ordersFetched.map((order) => transformOrder(order)))
+    } catch (e) {
+      const msg = `Failed to fetch trades`
+      console.error(msg, e)
+      setError(msg)
+    } finally {
+      setIsLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!networkId) {
+      return
+    }
+
+    fetchOrders(networkId, owner)
+  }, [fetchOrders, networkId, owner])
+
+  return { orders, error, isLoading }
+}
+
+export const OrdersTableWithData: React.FC = () => {
+  const ownerAddress = useAddressParam()
+
+  const { orders, isLoading } = useGetOrders(ownerAddress)
+  // console.log('orders', orders, isLoading, error)
+
+  return isLoading ? <h2>Loading...</h2> : <OrdersTable orders={orders} />
+}

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

@@ -0,0 +1,54 @@
+import React from 'react'
+import styled from 'styled-components'
+import { media } from 'theme/styles/media'
+
+import ExplorerTabs from 'apps/explorer/components/common/ExplorerTabs/ExplorerTab'
+import { OrdersTableWithData } from './OrdersTableWithData'
+
+const Wrapper = styled.div`
+  padding: 1.6rem;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 140rem;
+
+  ${media.mediumDown} {
+    max-width: 94rem;
+  }
+
+  ${media.mobile} {
+    max-width: 100%;
+  }
+
+  > h1 {
+    display: flex;
+    padding: 2.4rem 0 0.75rem;
+    align-items: center;
+    font-weight: ${({ theme }): string => theme.fontBold};
+  }
+`
+const tabItems = [
+  {
+    id: 1,
+    tab: 'Orders',
+    content: <OrdersTableWithData />,
+  },
+  {
+    id: 2,
+    tab: 'Trades',
+    content: (
+      <>
+        <h2>Trades Content</h2>
+      </>
+    ),
+  },
+]
+
+const OrdersTableWidget: React.FC = () => {
+  return (
+    <Wrapper>
+      <ExplorerTabs tabItems={tabItems} />
+    </Wrapper>
+  )
+}
+
+export default OrdersTableWidget

src/apps/explorer/pages/UserDetails.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
-const UserDetails: React.FC = () => <h3>Placeholder Page</h3>
+import OrdersTableWidget from '../components/OrdersTableWidget'
+
+const UserDetails: React.FC = () => <OrdersTableWidget />
 
 export default UserDetails

src/components/orders/OrdersUserDetailsTable/index.tsx

@@ -12,7 +12,7 @@ import { RowWithCopyButton } from 'components/orders/RowWithCopyButton'
 import { formatSmartMaxPrecision, getOrderLimitPrice, formatCalculatedPriceToDisplay } from 'utils'
 import { StatusLabel } from '../StatusLabel'
 import { HelpTooltip } from 'components/Tooltip'
-import StyledUserDetailsTable, { StyledUserDetailsTableProps, EmptyItemWrapper } from './styled'
+import StyledUserDetailsTable, { Props as StyledUserDetailsTableProps, EmptyItemWrapper } from './styled'
 import Icon from 'components/Icon'
 import TradeOrderType from 'components/common/TradeOrderType'
 
@@ -23,7 +23,7 @@ const Wrapper = styled(StyledUserDetailsTable)`
   }
 `
 function isTokenErc20(token: TokenErc20 | null | undefined): token is TokenErc20 {
-  return (token as TokenErc20).address !== undefined
+  return (token as TokenErc20)?.address !== undefined
 }
 
 function formattedAmount(erc20: TokenErc20 | null | undefined, amount: BigNumber): string {
@@ -102,7 +102,14 @@ const OrdersUserDetailsTable: React.FC<Props> = (props) => {
   }
 
   const orderItems = (items: Order[]): JSX.Element => {
-    if (items.length === 0) return <EmptyItemWrapper>No Orders.</EmptyItemWrapper>
+    if (items.length === 0)
+      return (
+        <tr>
+          <td className="row-td-empty">
+            <EmptyItemWrapper>No Orders.</EmptyItemWrapper>
+          </td>
+        </tr>
+      )
 
     return (
       <>

src/components/orders/OrdersUserDetailsTable/styled.tsx

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 
 import { SimpleTable, Props as SimpleTableProps } from 'components/common/SimpleTable'
 
-interface Props {
+export interface Props {
   showBorderTable?: boolean
 }
 
@@ -11,6 +11,7 @@ export type StyledUserDetailsTableProps = SimpleTableProps & Props
 const StyledUserDetailsTable = styled(SimpleTable)<StyledUserDetailsTableProps>`
   border: ${({ theme, showBorderTable }): string => (showBorderTable ? `0.1rem solid ${theme.borderPrimary}` : 'none')};
   border-radius: 0.4rem;
+  margin-top: 0;
 
   tr td {
     &:not(:first-of-type) {
@@ -53,6 +54,10 @@ const StyledUserDetailsTable = styled(SimpleTable)<StyledUserDetailsTableProps>`
   span.wrap-datedisplay > span:last-of-type {
     display: flex;
   }
+
+  tbody tr td.row-td-empty {
+    grid-column: 1 / span all;
+  }
 `
 
 export const EmptyItemWrapper = styled.div`
@@ -62,6 +67,7 @@ export const EmptyItemWrapper = styled.div`
   align-items: center;
   justify-content: center;
   display: flex;
+  width: 100%;
 `
 
 export default StyledUserDetailsTable