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
}
},
{