fix pool transactions symbols for swap tx, kinda

src/components/molecules/PoolTransactions/Title.tsx

@@ -1,28 +1,23 @@
 import React, { useState, useEffect, ReactElement } from 'react'
-import { Datatoken, PoolTransaction } from '.'
+import { PoolTransaction } from '.'
 import { useUserPreferences } from '../../../providers/UserPreferences'
 import ExplorerLink from '../../atoms/ExplorerLink'
 import { formatPrice } from '../../atoms/Price/PriceUnit'
 import styles from './Title.module.css'
 
-function getSymbol(tokenId: Datatoken) {
-  const symbol = tokenId === null ? 'OCEAN' : tokenId.symbol
-  return symbol
-}
-
 async function getTitle(row: PoolTransaction, locale: string) {
   let title = ''
   switch (row.event) {
     case 'swap': {
       const inToken = row.tokens.filter((x) => x.type === 'in')[0]
-      const inTokenSymbol = getSymbol(inToken.poolToken.tokenId)
+      const inTokenSymbol = inToken?.poolToken.symbol
       const outToken = row.tokens.filter((x) => x.type === 'out')[0]
-      const outTokenSymbol = getSymbol(outToken.poolToken.tokenId)
+      const outTokenSymbol = outToken?.poolToken.symbol
       title += `Swap ${formatPrice(
-        Math.abs(inToken.value).toString(),
+        Math.abs(inToken?.value).toString(),
         locale
       )}${inTokenSymbol} for ${formatPrice(
-        Math.abs(outToken.value).toString(),
+        Math.abs(outToken?.value).toString(),
         locale
       )}${outTokenSymbol}`
 
@@ -34,13 +29,13 @@ async function getTitle(row: PoolTransaction, locale: string) {
           x.tokenAddress.toLowerCase() !==
           row.poolAddress.datatokenAddress.toLowerCase()
       )[0]
-      const firstTokenSymbol = await getSymbol(firstToken.poolToken.tokenId)
+      const firstTokenSymbol = firstToken?.poolToken.symbol
       const secondToken = row.tokens.filter(
         (x) =>
           x.tokenAddress.toLowerCase() ===
           row.poolAddress.datatokenAddress.toLowerCase()
       )[0]
-      const secondTokenSymbol = await getSymbol(secondToken.poolToken.tokenId)
+      const secondTokenSymbol = secondToken?.poolToken.symbol
       title += `Create pool with ${formatPrice(
         Math.abs(firstToken.value).toString(),
         locale
@@ -53,7 +48,7 @@ async function getTitle(row: PoolTransaction, locale: string) {
     case 'join':
     case 'exit': {
       for (let i = 0; i < row.tokens.length; i++) {
-        const tokenSymbol = await getSymbol(row.tokens[i].poolToken.tokenId)
+        const tokenSymbol = row.tokens[i].poolToken.symbol
         if (i > 0) title += '\n'
         title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
           Math.abs(row.tokens[i].value).toString(),

src/components/molecules/PoolTransactions/index.tsx

@@ -6,7 +6,6 @@ import { useUserPreferences } from '../../../providers/UserPreferences'
 import { gql } from 'urql'
 import { TransactionHistory_poolTransactions as TransactionHistoryPoolTransactions } from '../../../@types/apollo/TransactionHistory'
 import web3 from 'web3'
-import { useWeb3 } from '../../../providers/Web3'
 import { fetchDataForMultipleChains } from '../../../utils/subgraph'
 import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 import NetworkName from '../../atoms/NetworkName'
@@ -56,10 +55,12 @@ const txHistoryQuery = gql`
     ) {
       tokens {
         poolToken {
-          tokenId {
+          id
-            symbol
+          symbol
-          }
         }
+        value
+        type
+        tokenAddress
       }
       tx
       event
@@ -67,11 +68,6 @@ const txHistoryQuery = gql`
       poolAddress {
         datatokenAddress
       }
-      tokens {
-        value
-        type
-        tokenAddress
-      }
     }
   }
 `