fetch datatoken symbol in transaction history

src/components/pages/History/PoolTransactions.tsx

@@ -16,15 +16,25 @@ function Empty() {
   return <div className={styles.empty}>No results found</div>
 }
 
-const columns = [
-  {
-    name: 'Title',
-    selector: function getTitleRow(row: PoolTransaction) {
-      // TODO: replace hardcoded symbol with symbol fetching based
-      // on row.tonenIn & row.tokenOut
+function Title({ row }: { row: PoolTransaction }) {
+  const { ocean } = useOcean()
+  const [dtSymbol, setDtSymbol] = useState<string>()
+
   const title = row.tokenAmountIn
-        ? `Add ${row.tokenAmountIn} OCEAN`
-        : `Remove ${row.tokenAmountOut} OCEAN`
+    ? `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 (
     <EtherscanLink network="rinkeby" path={`/tx/${row.transactionHash}`}>
@@ -32,6 +42,13 @@ const columns = [
     </EtherscanLink>
   )
 }
+
+const columns = [
+  {
+    name: 'Title',
+    selector: function getTitleRow(row: PoolTransaction) {
+      return <Title row={row} />
+    }
   },
   {
     name: 'Data Set',