diff --git a/src/components/pages/History/PoolTransactions.tsx b/src/components/pages/History/PoolTransactions.tsx index cb0f33fbe..608dd7193 100644 --- a/src/components/pages/History/PoolTransactions.tsx +++ b/src/components/pages/History/PoolTransactions.tsx @@ -16,21 +16,38 @@ function Empty() { return
No results found
} +function Title({ row }: { row: PoolTransaction }) { + const { ocean } = useOcean() + const [dtSymbol, setDtSymbol] = useState() + + const title = row.tokenAmountIn + ? `Add ${row.tokenAmountIn} ${dtSymbol || 'OCEAN'}` + : `Remove ${row.tokenAmountOut} ${dtSymbol || 'OCEAN'}` + + useEffect(() => { + if (!ocean) return + + async function getSymbol() { + const symbol = await ocean.datatokens.getSymbol( + row.tokenIn || row.tokenOut + ) + setDtSymbol(symbol) + } + getSymbol() + }, [ocean, row]) + + return ( + + {title} + + ) +} + 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} - - ) + return } }, {