From 5215482f8ec6b30e030e1f9ae4feadeef3149880 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Mon, 26 Aug 2024 16:32:08 +0400
Subject: [PATCH] add status to bridge txn columns

---
 .../modules/transactions/columns.tsx          | 30 +++++++++----------
 .../modules/transactions/constants.tsx        | 11 +++++--
 .../src/services/useContractService.ts        | 16 ++++++++--
 tools/bridge-frontend/src/types/index.ts      |  3 +-
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/tools/bridge-frontend/src/components/modules/transactions/columns.tsx b/tools/bridge-frontend/src/components/modules/transactions/columns.tsx
index e4f50194eb..825c1d6d41 100644
--- a/tools/bridge-frontend/src/components/modules/transactions/columns.tsx
+++ b/tools/bridge-frontend/src/components/modules/transactions/columns.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Badge } from "@/src/components/ui/badge";
+import { Badge, badgeVariants } from "@/src/components/ui/badge";
 
 import { statuses } from "@/src/components/modules/transactions/constants";
 import { DataTableColumnHeader } from "@/src/components/modules/common/data-table/data-table-column-header";
@@ -18,11 +18,10 @@ export const columns: ColumnDef<Transactions>[] = [
       <DataTableColumnHeader column={column} title="Status" />
     ),
     cell: ({ row }) => {
-      const status = statuses.find((s) => s.value === "0x1");
-      const variant = "success";
+      const status = statuses.find((s) => s.value === row.original.status);
       return (
-        <Badge variant={variant}>
-          {status?.icon && <status.icon className="h-5 w-5 mr\2" />}
+        <Badge variant={status?.variant as keyof typeof badgeVariants}>
+          {status?.icon && <status.icon className="h-5 w-5 mr-2" />}
           {status?.label}
         </Badge>
       );
@@ -30,6 +29,7 @@ export const columns: ColumnDef<Transactions>[] = [
     enableSorting: false,
     enableHiding: false,
   },
+
   {
     accessorKey: "blockNumber",
     header: ({ column }) => (
@@ -80,14 +80,14 @@ export const columns: ColumnDef<Transactions>[] = [
     enableSorting: false,
     enableHiding: false,
   },
-  {
-    id: "actions",
-    cell: ({ row }) => {
-      return (
-        <Link href={`/tx/personal/${row.original.transactionHash}`}>
-          <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
-        </Link>
-      );
-    },
-  },
+  // {
+  //   id: "actions",
+  //   cell: ({ row }) => {
+  //     return (
+  //       <Link href={`/tx/personal/${row.original.transactionHash}`}>
+  //         <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
+  //       </Link>
+  //     );
+  //   },
+  // },
 ];
diff --git a/tools/bridge-frontend/src/components/modules/transactions/constants.tsx b/tools/bridge-frontend/src/components/modules/transactions/constants.tsx
index a1797c82a9..a87d90f89d 100644
--- a/tools/bridge-frontend/src/components/modules/transactions/constants.tsx
+++ b/tools/bridge-frontend/src/components/modules/transactions/constants.tsx
@@ -1,18 +1,25 @@
 import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons";
+import { HourglassIcon } from "lucide-react";
 
 export const statuses = [
   {
-    value: "0x1",
+    value: "Success",
     label: "Success",
     icon: CheckIcon,
     variant: "success",
   },
   {
-    value: "0x0",
+    value: "Failure",
     label: "Failure",
     icon: Cross2Icon,
     variant: "destructive",
   },
+  {
+    value: "Pending",
+    label: "Pending",
+    icon: HourglassIcon,
+    variant: "primary",
+  },
 ];
 
 export const types = [
diff --git a/tools/bridge-frontend/src/services/useContractService.ts b/tools/bridge-frontend/src/services/useContractService.ts
index f666502a1c..f26e101c3d 100644
--- a/tools/bridge-frontend/src/services/useContractService.ts
+++ b/tools/bridge-frontend/src/services/useContractService.ts
@@ -248,12 +248,24 @@ export const useContractService = () => {
       const filter = {
         address: messageBusAddress,
         topics,
-        fromBlock: 72548,
       };
 
       let prov = new ethers.providers.Web3Provider(provider);
       const logs = await prov.getLogs(filter);
-      return logs;
+      const transactions = await Promise.all(
+        logs.map(async (log) => {
+          const receipt = await prov.getTransactionReceipt(log.transactionHash);
+          return {
+            ...log,
+            status: receipt
+              ? receipt.status
+                ? "Success"
+                : "Failed"
+              : "Pending",
+          };
+        })
+      );
+      return transactions;
     } catch (error) {
       return handleError(error, "Error fetching transactions");
     }
diff --git a/tools/bridge-frontend/src/types/index.ts b/tools/bridge-frontend/src/types/index.ts
index b087efb4c7..3a4fc6c0bd 100644
--- a/tools/bridge-frontend/src/types/index.ts
+++ b/tools/bridge-frontend/src/types/index.ts
@@ -222,8 +222,6 @@ export enum ItemPosition {
   LAST = "last",
 }
 
-export type TransactionType = "0x0" | "0x1" | "0x2" | "0x3";
-
 export type Transactions = {
   blockNumber: number;
   blockHash: string;
@@ -234,4 +232,5 @@ export type Transactions = {
   topics: string[];
   transactionHash: string;
   logIndex: number;
+  status: "Success" | "Failed" | "Pending";
 };