refactor

src/components/pages/History/PoolTransactions.tsx

@@ -7,67 +7,63 @@ import EtherscanLink from '../../atoms/EtherscanLink'
 import Time from '../../atoms/Time'
 import styles from './PoolTransactions.module.css'
 
+const columns = [
+  {
+    name: 'Title',
+    selector: function getTitleRow(row: PoolTransaction) {
+      // TODO: replace hardcoded symbol with symbol fetching based
+      // on row.tonenIn & row.tokenOut
+      const title = row.tokenAmountIn
+        ? `Add ${row.tokenAmountIn} OCEAN`
+        : `Remove ${row.tokenAmountOut} OCEAN`
+
+      return (
+        <EtherscanLink network="rinkeby" path={`/tx/${row.transactionHash}`}>
+          {title}
+        </EtherscanLink>
+      )
+    }
+  },
+  {
+    name: 'Asset',
+    selector: function getAssetRow(row: PoolTransaction) {
+      const did = row.dtAddress.replace('0x', 'did:op:')
+      return <Link to={`/asset/${did}`}>{did}</Link>
+    }
+  },
+
+  {
+    name: 'Time',
+    selector: function getTimeRow(row: PoolTransaction) {
+      return (
+        <Time date={new Date(row.timestamp * 1000).toUTCString()} relative />
+      )
+    }
+  }
+]
+
 export default function PoolTransactions(): ReactElement {
   const { ocean, accountId } = useOcean()
   const [logs, setLogs] = useState<PoolTransaction[]>()
 
-  const columns = [
-    {
-      name: 'Title',
-      selector: function getTitleRow(row: PoolTransaction) {
-        // TODO: replace hardcoded symbol with symbol fetching based
-        // on row.tonenIn & row.tokenOut
-        const title = row.tokenAmountIn
-          ? `Add ${row.tokenAmountIn} OCEAN`
-          : `Remove ${row.tokenAmountOut} OCEAN`
-
-        return (
-          <EtherscanLink network="rinkeby" path={`/tx/${row.transactionHash}`}>
-            {title}
-          </EtherscanLink>
-        )
-      }
-    },
-    {
-      name: 'Asset',
-      selector: function getAssetRow(row: PoolTransaction) {
-        const did = row.dtAddress.replace('0x', 'did:op:')
-        return <Link to={`/asset/${did}`}>{did}</Link>
-      }
-    },
-
-    {
-      name: 'Time',
-      selector: function getTimeRow(row: PoolTransaction) {
-        return (
-          <Time date={new Date(row.timestamp * 1000).toUTCString()} relative />
-        )
-      }
-    }
-  ]
-
   useEffect(() => {
     async function getLogs() {
       if (!ocean || !accountId) return
 
-      const logs = await ocean.pool.getAllPoolLogs(
+      const logs = await ocean.pool.getAllPoolLogs(accountId)
-        '0xe08A1dAe983BC701D05E492DB80e0144f8f4b909'
+      // limit to 100 latest transactions for now
-      )
+      setLogs(logs.slice(0, 99))
-      // limit to 20 latest transactions for now
-      setLogs(logs.slice(0, 19))
     }
     getLogs()
   }, [ocean, accountId])
 
   return (
-    <div>
+    <DataTable
-      <DataTable
+      columns={columns}
-        columns={columns}
+      data={logs}
-        data={logs}
+      className={styles.table}
-        className={styles.table}
+      noHeader
-        noHeader
+      pagination
-        pagination
+    />
-      />
-    </div>
   )
 }