pool transactions component splitup

src/components/molecules/PoolTransactions/Title.module.css

@@ -0,0 +1,3 @@
+.titleText {
+  white-space: pre;
+}

src/components/molecules/PoolTransactions/Title.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect, ReactElement } from 'react'
+import { Datatoken, 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 outToken = row.tokens.filter((x) => x.type === 'out')[0]
+      const outTokenSymbol = getSymbol(outToken.poolToken.tokenId)
+      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.tokens.filter(
+        (x) =>
+          x.tokenAddress.toLowerCase() !==
+          row.poolAddress.datatokenAddress.toLowerCase()
+      )[0]
+      const firstTokenSymbol = await getSymbol(firstToken.poolToken.tokenId)
+      const secondToken = row.tokens.filter(
+        (x) =>
+          x.tokenAddress.toLowerCase() ===
+          row.poolAddress.datatokenAddress.toLowerCase()
+      )[0]
+      const secondTokenSymbol = await getSymbol(secondToken.poolToken.tokenId)
+      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 = await getSymbol(row.tokens[i].poolToken.tokenId)
+        if (i > 0) title += '\n'
+        title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
+          Math.abs(row.tokens[i].value).toString(),
+          locale
+        )}${tokenSymbol}`
+      }
+      break
+    }
+  }
+
+  return title
+}
+
+export default function Title({ row }: { row: PoolTransaction }): ReactElement {
+  const [title, setTitle] = useState<string>()
+  const { locale } = useUserPreferences()
+
+  useEffect(() => {
+    if (!locale || !row) return
+    async function init() {
+      const title = await getTitle(row, locale)
+      setTitle(title)
+    }
+    init()
+  }, [row, locale])
+
+  return title ? (
+    <ExplorerLink networkId={row.networkId} path={`/tx/${row.tx}`}>
+      <span className={styles.titleText}>{title}</span>
+    </ExplorerLink>
+  ) : null
+}

src/components/molecules/PoolTransactions/index.module.css

@@ -1,7 +1,3 @@
 .time {
   color: var(--color-secondary);
 }
-
-.titleText {
-  white-space: pre;
-}

src/components/molecules/PoolTransactions/index.tsx

@@ -1,20 +1,19 @@
 import React, { ReactElement, useEffect, useState } from 'react'
-import ExplorerLink from '../atoms/ExplorerLink'
-import Time from '../atoms/Time'
-import Table from '../atoms/Table'
-import AssetTitle from './AssetListTitle'
-import styles from './PoolTransactions.module.css'
-import { useUserPreferences } from '../../providers/UserPreferences'
-import { formatPrice } from '../atoms/Price/PriceUnit'
+import Time from '../../atoms/Time'
+import Table from '../../atoms/Table'
+import AssetTitle from '../AssetListTitle'
+import { useUserPreferences } from '../../../providers/UserPreferences'
 import { gql } from 'urql'
-import { TransactionHistory_poolTransactions as TransactionHistoryPoolTransactions } from '../../@types/apollo/TransactionHistory'
+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'
-import { retrieveDDO } from '../../utils/aquarius'
+import { useWeb3 } from '../../../providers/Web3'
+import { fetchDataForMultipleChains } from '../../../utils/subgraph'
+import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
+import NetworkName from '../../atoms/NetworkName'
+import { retrieveDDO } from '../../../utils/aquarius'
 import axios from 'axios'
+import Title from './Title'
+import styles from './index.module.css'
 
 const REFETCH_INTERVAL = 20000
 
@@ -77,96 +76,14 @@ const txHistoryQuery = gql`
   }
 `
 
-interface Datatoken {
+export interface Datatoken {
   symbol: string
 }
 
-interface PoolTransaction extends TransactionHistoryPoolTransactions {
+export interface PoolTransaction extends TransactionHistoryPoolTransactions {
   networkId: number
 }
 
-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 outToken = row.tokens.filter((x) => x.type === 'out')[0]
-      const outTokenSymbol = getSymbol(outToken.poolToken.tokenId)
-      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.tokens.filter(
-        (x) =>
-          x.tokenAddress.toLowerCase() !==
-          row.poolAddress.datatokenAddress.toLowerCase()
-      )[0]
-      const firstTokenSymbol = await getSymbol(firstToken.poolToken.tokenId)
-      const secondToken = row.tokens.filter(
-        (x) =>
-          x.tokenAddress.toLowerCase() ===
-          row.poolAddress.datatokenAddress.toLowerCase()
-      )[0]
-      const secondTokenSymbol = await getSymbol(secondToken.poolToken.tokenId)
-      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 = await getSymbol(row.tokens[i].poolToken.tokenId)
-        if (i > 0) title += '\n'
-        title += `${row.event === 'join' ? 'Add' : 'Remove'} ${formatPrice(
-          Math.abs(row.tokens[i].value).toString(),
-          locale
-        )}${tokenSymbol}`
-      }
-      break
-    }
-  }
-
-  return title
-}
-
-function Title({ row }: { row: PoolTransaction }) {
-  const [title, setTitle] = useState<string>()
-  const { locale } = useUserPreferences()
-
-  useEffect(() => {
-    if (!locale || !row) return
-    async function init() {
-      const title = await getTitle(row, locale)
-      setTitle(title)
-    }
-    init()
-  }, [row, locale])
-
-  return title ? (
-    <ExplorerLink networkId={row.networkId} path={`/tx/${row.tx}`}>
-      <span className={styles.titleText}>{title}</span>
-    </ExplorerLink>
-  ) : null
-}
-
 const columns = [
   {
     name: 'Title',
@@ -262,6 +179,7 @@ export default function PoolTransactions({
 
   useEffect(() => {
     if (!appConfig.metadataCacheUri) return
+
     async function getTransactions() {
       const poolTransactions: PoolTransaction[] = []
       const source = axios.CancelToken.source()