diff --git a/src/components/pages/History/PoolTransactions.tsx b/src/components/pages/History/PoolTransactions.tsx index 57dc53ade..1da27c429 100644 --- a/src/components/pages/History/PoolTransactions.tsx +++ b/src/components/pages/History/PoolTransactions.tsx @@ -1,42 +1,50 @@ import { PoolTransaction } from '@oceanprotocol/lib/dist/node/balancer/OceanPool' import { useOcean } from '@oceanprotocol/react' +import { Link } from 'gatsby' import React, { ReactElement, useEffect, useState } from 'react' import DataTable from 'react-data-table-component' - -const data: PoolTransaction[] = [ - { - poolAddress: '0xxxxx', - dtAddress: '0xxxxx', - caller: '0xxxxx', - transactionHash: '0xxxxx', - blockNumber: 2, - timestamp: 1, - tokenIn: 'OCEAN', - tokenAmountIn: '10', - type: 'join' - } -] - -const columns = [ - { - name: 'Title', - selector: (row: PoolTransaction) => - `Add ${row.tokenAmountIn} ${row.tokenIn}` - }, - { - name: 'Pool', - selector: 'poolAddress' - }, - { - name: 'Account', - selector: 'caller' - } -] +import EtherscanLink from '../../atoms/EtherscanLink' +import Time from '../../atoms/Time' export default function PoolTransactions(): ReactElement { const { ocean, accountId } = useOcean() const [logs, setLogs] = useState() + 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 ( + + {title} + + ) + } + }, + { + name: 'Asset', + selector: function getAssetRow(row: PoolTransaction) { + const did = row.dtAddress.replace('0x', 'did:op:') + return {did} + } + }, + + { + name: 'Time', + selector: function getTimeRow(row: PoolTransaction) { + return ( +