merged tables into big one with type column

src/models/lending/lending.ts

@@ -11,9 +11,9 @@ export enum LendingInstruction {
 }
 
 export const TransactionListLookup: { [key: number]: string } = {
-  3: "DepositReserveLiquidity",
-  4: "WithdrawReserveLiquidity",
-  5: "BorrowLiquidity",
-  6: "RepayObligationLiquidity",
-  7: "LiquidateObligation",
+  3: "Deposit",
+  4: "Withdraw",
+  5: "Borrow",
+  6: "Repay",
+  7: "Liquidate",
 };

src/views/transactionList/index.tsx

@@ -3,10 +3,11 @@ import { useWallet } from "../../contexts/wallet";
 import { useConnection } from "../../contexts/connection";
 import { cache, ParsedLocalTransaction } from "../../contexts/accounts";
 import { LENDING_PROGRAM_ID } from "../../utils/ids";
-import { LendingInstruction, TransactionListLookup } from "../../models";
-import { Col, Row } from "antd";
+import { TransactionListLookup } from "../../models";
+import { Card } from "antd";
 import { LABELS } from "../../constants";
-import { SingleTypeTransactionList } from "./transaction";
+import { LoadingOutlined } from "@ant-design/icons";
+import { SingleTypeTransactionItem } from "./item";
 
 export const TransactionListView = () => {
   const { connected, wallet } = useWallet();
@@ -77,69 +78,34 @@ export const TransactionListView = () => {
   }, [connected, connection, wallet.publicKey]);
 
   return connected ? (
-    <div className="flexColumn">
-      <Row>
-        <Col md={24} xl={24} span={24}>
-          <SingleTypeTransactionList
-            list={confirmedTxs.filter(
-              (tx) =>
-                tx.transactionType ===
-                LendingInstruction.DepositReserveLiquidity
+    <div className={"flexColumn"}>
+      <Card
+        style={{ marginBottom: "10px" }}
+        title={
+          <div>
+            Transactions{" "}
+            {loading && (
+              <span>
+                (Loading <LoadingOutlined />)
+              </span>
             )}
-            title={LABELS.TABLE_TITLE_DEPOSITS}
-            loading={loading}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col md={24} xl={24} span={24}>
-          <SingleTypeTransactionList
-            list={confirmedTxs.filter(
-              (tx) =>
-                tx.transactionType ===
-                LendingInstruction.WithdrawReserveLiquidity
-            )}
-            title={LABELS.TABLE_TITLE_WITHDRAWS}
-            loading={loading}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col md={24} xl={24} span={24}>
-          <SingleTypeTransactionList
-            list={confirmedTxs.filter(
-              (tx) => tx.transactionType === LendingInstruction.BorrowLiquidity
-            )}
-            title={LABELS.TABLE_TITLE_BORROWS}
-            loading={loading}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col md={24} xl={24} span={24}>
-          <SingleTypeTransactionList
-            list={confirmedTxs.filter(
-              (tx) =>
-                tx.transactionType ===
-                LendingInstruction.RepayObligationLiquidity
-            )}
-            title={LABELS.TABLE_TITLE_REPAY_OBLIGATIONS}
-            loading={loading}
-          />
-        </Col>
-      </Row>
-      <Row>
-        <Col md={24} xl={24} span={24}>
-          <SingleTypeTransactionList
-            list={confirmedTxs.filter(
-              (tx) =>
-                tx.transactionType === LendingInstruction.LiquidateObligation
-            )}
-            title={LABELS.TABLE_TITLE_LIQUIDATE_OBLIGATIONS}
-            loading={loading}
+          </div>
+        }
+      >
+        <div className="dashboard-item dashboard-header">
+          <div>Type</div>
+          <div>Explorer Link</div>
+          <div>Log Details</div>
+          <div>Fee (SOL)</div>
+          <div>Status</div>
+        </div>
+        {confirmedTxs.map((tx) => (
+          <SingleTypeTransactionItem
+            key={tx.signature.signature}
+            transaction={tx}
           />
-        </Col>
-      </Row>
+        ))}
+      </Card>
     </div>
   ) : (
     <div className="dashboard-info">

src/views/transactionList/transaction/item.tsx → src/views/transactionList/item.tsx

@@ -1,11 +1,8 @@
-import { ExplorerLink } from "../../../components/ExplorerLink";
+import { ExplorerLink } from "../../components/ExplorerLink";
 import { Button, Popover, Tag } from "antd";
-import {
-  feeFormatter,
-  lamportsToSol,
-  shortenAddress,
-} from "../../../utils/utils";
+import { feeFormatter, lamportsToSol, shortenAddress } from "../../utils/utils";
 import React from "react";
+import { TransactionListLookup } from "../../models";
 
 export const SingleTypeTransactionItem = (props: { transaction: any }) => {
   const tx = props.transaction;
@@ -15,6 +12,9 @@ export const SingleTypeTransactionItem = (props: { transaction: any }) => {
   return (
     <div className="dashboard-item">
       <div style={{ textAlign: "left" }}>
+        {TransactionListLookup[tx.transactionType]}
+      </div>
+      <div>
         <ExplorerLink address={tx.signature.signature} type="transaction" />
       </div>
       <div>
@@ -24,7 +24,7 @@ export const SingleTypeTransactionItem = (props: { transaction: any }) => {
           content={
             <ul>
               {tx.confirmedTx.meta.logMessages.map((msg: string) => (
-                <li>{msg}</li>
+                <li key={msg}>{msg}</li>
               ))}
             </ul>
           }