refactor PoolTransactions title component

src/components/@shared/PoolTransactions/Title.tsx

@@ -5,65 +5,62 @@ import ExplorerLink from '@shared/ExplorerLink'
 import { formatPrice } from '@shared/Price/PriceUnit'
 import styles from './Title.module.css'
 
-// TODO: it seems we are missing a way in PoolTransaction to figure out
-// if e.g. in a swap token got in or out of the pool.
+function getTitle(row: PoolTransaction, locale: string) {
+  let title = ''
 
-// async function getTitle(row: PoolTransaction, locale: string) {
-//   let title = ''
-//   switch (row.type) {
-//     case 'SWAP': {
-//       const inToken = row.tokens.filter((x) => x.type === 'in')[0]
-//       const inTokenSymbol = inToken?.poolToken.symbol
-//       const outToken = row.tokens.filter((x) => x.type === 'out')[0]
-//       const outTokenSymbol = outToken?.poolToken.symbol
-//       title += `Swap ${formatPrice(
-//         Math.abs(inToken?.value).toString(),
-//         locale
-//       )}${inTokenSymbol} for ${formatPrice(
-//         Math.abs(outToken?.value).toString(),
-//         locale
-//       )}${outTokenSymbol}`
+  switch (row.type) {
+    case 'SWAP': {
+      const { datatoken, baseToken } = row
+      const outToken =
+        (datatoken.value < 0 && datatoken.value) ||
+        (baseToken.value < 0 && baseToken.value)
+      const outTokenSymbol = outToken?.token.symbol
 
-//       break
-//     }
-//     case 'SETUP': {
-//       const firstToken = row.tokens.filter(
-//         (x) =>
-//           x.tokenAddress.toLowerCase() !==
-//           row.pool.id.datatoken.address.toLowerCase()
-//       )[0]
-//       const firstTokenSymbol = firstToken?.poolToken.symbol
-//       const secondToken = row.tokens.filter(
-//         (x) =>
-//           x.tokenAddress.toLowerCase() ===
-//           row.pool.id.datatokenAddress.toLowerCase()
-//       )[0]
-//       const secondTokenSymbol = secondToken?.poolToken.symbol
-//       title += `Create pool with ${formatPrice(
-//         Math.abs(firstToken?.value).toString(),
-//         locale
-//       )}${firstTokenSymbol} and ${formatPrice(
-//         Math.abs(secondToken?.value).toString(),
-//         locale
-//       )}${secondTokenSymbol}`
-//       break
-//     }
-//     case 'JOIN':
-//     case 'EXIT': {
-//       for (let i = 0; i < row.tokens.length; i++) {
-//         const tokenSymbol = row.tokens[i].poolToken.symbol
-//         if (i > 0) title += '\n'
-//         title += `${row.type === 'JOIN' ? 'Add' : 'Remove'} ${formatPrice(
-//           Math.abs(row.tokens[i].value).toString(),
-//           locale
-//         )}${tokenSymbol}`
-//       }
-//       break
-//     }
-//   }
+      const inToken =
+        (datatoken.value > 0 && datatoken.value) ||
+        (baseToken.value > 0 && baseToken.value)
+      const inTokenSymbol = inToken?.token.symbol
 
-//   return title
-// }
+      title += `Swap ${formatPrice(
+        Math.abs(inToken?.value).toString(),
+        locale
+      )}${inTokenSymbol} for ${formatPrice(
+        Math.abs(outToken?.value).toString(),
+        locale
+      )}${outTokenSymbol}`
+
+      break
+    }
+    case 'SETUP': {
+      const firstToken = row.baseToken
+      const firstTokenSymbol = firstToken?.token.symbol
+      const secondToken = row.datatoken
+      const secondTokenSymbol = secondToken?.token.symbol
+      title += `Create pool with ${formatPrice(
+        Math.abs(firstToken?.value).toString(),
+        locale
+      )}${firstTokenSymbol} and ${formatPrice(
+        Math.abs(secondToken?.value).toString(),
+        locale
+      )}${secondTokenSymbol}`
+      break
+    }
+    case 'JOIN':
+    case 'EXIT': {
+      const tokenMoved = row.baseToken.value > 0 ? row.baseToken : row.datatoken
+      const tokenSymbol = tokenMoved.token.symbol
+
+      title += `${row.type === 'JOIN' ? 'Add' : 'Remove'} ${formatPrice(
+        Math.abs(tokenMoved.value).toString(),
+        locale
+      )}${tokenSymbol}`
+
+      break
+    }
+  }
+
+  return title
+}
 
 export default function Title({ row }: { row: PoolTransaction }): ReactElement {
   const [title, setTitle] = useState<string>()
@@ -72,11 +69,8 @@ export default function Title({ row }: { row: PoolTransaction }): ReactElement {
   useEffect(() => {
     if (!locale || !row) return
 
-    async function init() {
-      // const title = await getTitle(row, locale)
-      // setTitle(title)
-    }
-    init()
+    const title = getTitle(row, locale)
+    setTitle(title)
   }, [row, locale])
 
   return title ? (

src/components/@shared/PoolTransactions/index.tsx

@@ -25,7 +25,6 @@ const txHistoryQueryByPool = gql`
       orderDirection: desc
       where: { user: $user, pool: $pool }
       first: 1000
-      subgraphError: deny
     ) {
       baseToken {
         id
@@ -87,10 +86,6 @@ const txHistoryQuery = gql`
   }
 `
 
-export interface Datatoken {
-  symbol: string
-}
-
 export interface PoolTransaction extends TransactionHistoryPoolTransactions {
   networkId: number
   ddo: Asset