Change the structure and logic for table cells

dapp/src/components/TransactionHistory/Table/Cell/Custom.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import { TransactionInfo } from "#/types"
+import Cell from "."
+import { ContentType, getCustomContent } from "./utils/content"
+
+function CustomCell({
+  type,
+  transaction1,
+  transaction2,
+}: {
+  type: ContentType
+  transaction1: TransactionInfo
+  transaction2: TransactionInfo
+}) {
+  if (type === "date") {
+    return <Cell children1={getCustomContent(type, transaction1)} />
+  }
+
+  return (
+    <Cell
+      children1={getCustomContent(type, transaction1)}
+      children2={getCustomContent(type, transaction2)}
+    />
+  )
+}
+
+export default CustomCell

dapp/src/components/TransactionHistory/Table/Cell/components/BlockExplorer.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { Chain, ExplorerDataType } from "#/types"
+import { BLOCK_EXPLORER } from "#/constants"
+import ViewInBlockExplorer from "#/components/shared/ViewInBlockExplorer"
+import SimpleText from "./SimpleText"
+
+function BlockExplorer({ txHash, chain }: { txHash?: string; chain: Chain }) {
+  if (txHash) {
+    return (
+      <ViewInBlockExplorer
+        id={txHash}
+        type={ExplorerDataType.TRANSACTION}
+        chain={chain}
+        size="sm"
+      />
+    )
+  }
+  return <SimpleText color="grey.400">{BLOCK_EXPLORER[chain].title}</SimpleText>
+}
+
+export default BlockExplorer

dapp/src/components/TransactionHistory/Table/Cell/components/SimpleText.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+import { TextSm } from "#/components/shared/Typography"
+import { TextProps } from "@chakra-ui/react"
+
+function SimpleText({ ...textProps }: TextProps) {
+  return <TextSm fontWeight="semibold" {...textProps} />
+}
+
+export default SimpleText

dapp/src/components/TransactionHistory/Table/Cells/CellWrapper.tsx → dapp/src/components/TransactionHistory/Table/Cell/index.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { Box, Divider, useMultiStyleConfig } from "@chakra-ui/react"
 
-function CellWrapper({
+function Cell({
   children1,
   children2,
 }: {
@@ -24,4 +24,4 @@ function CellWrapper({
   )
 }
 
-export default CellWrapper
+export default Cell

dapp/src/components/TransactionHistory/Table/Cell/utils/content.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { TransactionInfo } from "#/types"
+import { CurrencyBalance } from "#/components/shared/CurrencyBalance"
+import CurrencyIcon from "#/components/shared/CurrencyIcon"
+import { displayBlockTimestamp } from "#/utils"
+import BlockExplorer from "../components/BlockExplorer"
+import SimpleText from "../components/SimpleText"
+import Status from "../components/Status"
+
+export type ContentType =
+  | "currency-balance"
+  | "block-explorer"
+  | "currency-icon"
+  | "date"
+  | "status"
+
+export const getCustomContent = (
+  type: ContentType,
+  transaction: TransactionInfo,
+) => {
+  switch (type) {
+    case "currency-balance":
+      return (
+        <CurrencyBalance
+          currency={transaction.asset.currency}
+          amount={transaction.asset.amount}
+          size="sm"
+        />
+      )
+    case "block-explorer": {
+      return (
+        <BlockExplorer txHash={transaction.txHash} chain={transaction.chain} />
+      )
+    }
+    case "currency-icon": {
+      return <CurrencyIcon currency={transaction.asset.currency} withSymbol />
+    }
+    case "date": {
+      return (
+        <SimpleText whiteSpace="pre-line">
+          {displayBlockTimestamp(transaction.timestamp)}
+        </SimpleText>
+      )
+    }
+    case "status": {
+      return <Status status={transaction.status} />
+    }
+    default:
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      return <></>
+  }
+}

dapp/src/components/TransactionHistory/Table/utils/columns.tsx

@@ -2,8 +2,9 @@ import React from "react"
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StakeHistory } from "#/types"
 import { capitalize, truncateAddress } from "#/utils"
-import TextCell from "../Cells/TextCell"
-import CustomCell from "../Cells/CustomCell"
+import CustomCell from "../Cell/Custom"
+import Cell from "../Cell"
+import SimpleText from "../Cell/components/SimpleText"
 
 const columnHelper = createColumnHelper<StakeHistory>()
 // When defining the columns for the table, columnHelper.accessor  ts returns a type issue.
@@ -29,9 +30,13 @@ export const COLUMNS: ColumnDef<StakeHistory, any>[] = [
   columnHelper.display({
     header: "Action",
     cell: ({ row: { original } }) => (
-      <TextCell
-        value1={capitalize(original.callTx.action)}
-        value2={capitalize(original.receiptTx.action)}
+      <Cell
+        children1={
+          <SimpleText>{capitalize(original.callTx.action)}</SimpleText>
+        }
+        children2={
+          <SimpleText>{capitalize(original.receiptTx.action)}</SimpleText>
+        }
       />
     ),
   }),
@@ -58,9 +63,13 @@ export const COLUMNS: ColumnDef<StakeHistory, any>[] = [
   columnHelper.display({
     header: "Account",
     cell: ({ row: { original } }) => (
-      <TextCell
-        value1={truncateAddress(original.callTx.account)}
-        value2={truncateAddress(original.receiptTx.account)}
+      <Cell
+        children1={
+          <SimpleText>{truncateAddress(original.callTx.account)}</SimpleText>
+        }
+        children2={
+          <SimpleText>{truncateAddress(original.receiptTx.account)}</SimpleText>
+        }
       />
     ),
   }),

dapp/src/types/transaction.ts

@@ -16,7 +16,7 @@ export type TransactionInfo = {
   action: TransactionInfoAction
   asset: Asset
   account: string
-  txHash: string
+  txHash?: string
   status: TransactionInfoStatus
 }