From 0f3aeddeb710ac6336acd357403f69703efe2105 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Wed, 17 Jul 2024 17:26:27 +0400
Subject: [PATCH] Revert "[Tenscan] personal transaction/contract deployment
 details page"

---
 tools/tenscan/frontend/api/transactions.ts    |  55 +----
 tools/tenscan/frontend/pages/tx/[hash].tsx    |  60 ++---
 .../frontend/pages/tx/personal/[hash].tsx     |  83 -------
 .../data-table/data-table-pagination.tsx      |   4 -
 .../components/modules/common/empty-state.tsx |  12 +-
 .../modules/dashboard/analytics-card.tsx      |   6 +-
 .../components/modules/dashboard/index.tsx    |  17 +-
 .../components/modules/personal/columns.tsx   |   2 +-
 .../modules/personal/personal-txn-details.tsx | 233 ------------------
 .../frontend/src/components/ui/key-value.tsx  |   4 +-
 tools/tenscan/frontend/src/lib/constants.ts   |   4 +-
 tools/tenscan/frontend/src/lib/utils.ts       |   4 -
 tools/tenscan/frontend/src/routes/index.ts    |   1 -
 .../src/services/useTransactionsService.ts    |  53 +++-
 .../types/interfaces/TransactionInterfaces.ts |  38 +--
 .../frontend/src/types/interfaces/index.ts    |   1 -
 16 files changed, 85 insertions(+), 492 deletions(-)
 delete mode 100644 tools/tenscan/frontend/pages/tx/personal/[hash].tsx
 delete mode 100644 tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx

diff --git a/tools/tenscan/frontend/api/transactions.ts b/tools/tenscan/frontend/api/transactions.ts
index 051bf757ff..7958581faf 100644
--- a/tools/tenscan/frontend/api/transactions.ts
+++ b/tools/tenscan/frontend/api/transactions.ts
@@ -1,15 +1,13 @@
-import { jsonHexToObj } from "@/src/lib/utils";
 import { httpRequest } from ".";
-import { apiRoutes, ethMethods, tenCustomQueryMethods } from "@/src/routes";
+import { apiRoutes } from "@/src/routes";
 import { pathToUrl } from "@/src/routes/router";
-import { ResponseDataInterface, ToastType } from "@/src/types/interfaces";
+import { ResponseDataInterface } from "@/src/types/interfaces";
 import {
   TransactionCount,
   Price,
   TransactionResponse,
   Transaction,
 } from "@/src/types/interfaces/TransactionInterfaces";
-import { showToast } from "@/src/components/ui/use-toast";
 
 export const fetchTransactions = async (
   payload?: Record<string, any>
@@ -43,52 +41,3 @@ export const fetchTransactionByHash = async (
     url: pathToUrl(apiRoutes.getTransactionByHash, { hash }),
   });
 };
-
-export const personalTransactionsData = async (
-  provider: any,
-  walletAddress: string | null,
-  options: Record<string, any>
-) => {
-  try {
-    if (provider && walletAddress) {
-      const requestPayload = {
-        address: walletAddress,
-        pagination: {
-          ...options,
-        },
-      };
-      const personalTxResp = await provider.send(ethMethods.getStorageAt, [
-        tenCustomQueryMethods.listPersonalTransactions,
-        JSON.stringify(requestPayload),
-        null,
-      ]);
-      const personalTxData = jsonHexToObj(personalTxResp);
-      return personalTxData;
-    }
-
-    return null;
-  } catch (error) {
-    console.error("Error fetching personal transactions:", error);
-    showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions");
-    throw error;
-  }
-};
-
-export const fetchPersonalTxnByHash = async (
-  provider: any,
-  hash: string
-): Promise<any> => {
-  try {
-    if (provider) {
-      const personalTxnResp = await provider.send(
-        ethMethods.getTransactionReceipt,
-        [hash]
-      );
-      return personalTxnResp;
-    }
-  } catch (error) {
-    console.error("Error fetching personal transaction:", error);
-    showToast(ToastType.DESTRUCTIVE, "Error fetching personal transaction");
-    throw error;
-  }
-};
diff --git a/tools/tenscan/frontend/pages/tx/[hash].tsx b/tools/tenscan/frontend/pages/tx/[hash].tsx
index c47d0fb2ff..8c7018e582 100644
--- a/tools/tenscan/frontend/pages/tx/[hash].tsx
+++ b/tools/tenscan/frontend/pages/tx/[hash].tsx
@@ -1,3 +1,4 @@
+import { fetchBatchByHash } from "@/api/batches";
 import { fetchTransactionByHash } from "@/api/transactions";
 import Layout from "@/src/components/layouts/default-layout";
 import { TransactionDetailsComponent } from "@/src/components/modules/transactions/transaction-details";
@@ -8,6 +9,7 @@ import {
   CardHeader,
   CardTitle,
   CardContent,
+  CardDescription,
 } from "@/src/components/ui/card";
 import { Skeleton } from "@/src/components/ui/skeleton";
 import { useQuery } from "@tanstack/react-query";
@@ -26,40 +28,30 @@ export default function TransactionDetails() {
 
   return (
     <Layout>
-      <Card className="col-span-3">
-        {isLoading ? (
-          <>
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-            <Skeleton className="h-10 w-100" />
-          </>
-        ) : transactionDetails ? (
-          <>
-            <CardHeader>
-              <CardTitle>Transaction Details</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <TransactionDetailsComponent
-                transactionDetails={transactionDetails}
-              />
-            </CardContent>
-          </>
-        ) : (
-          <EmptyState
-            title="Transaction not found"
-            description="The transaction you are looking for does not exist."
-            action={
-              <Button onClick={() => router.push("/transactions")}>
-                Go back
-              </Button>
-            }
-            className="p-8"
-          />
-        )}
-      </Card>
+      {isLoading ? (
+        <Skeleton className="h-full w-full" />
+      ) : transactionDetails ? (
+        <Card className="col-span-3">
+          <CardHeader>
+            <CardTitle>Transaction Details</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <TransactionDetailsComponent
+              transactionDetails={transactionDetails}
+            />
+          </CardContent>
+        </Card>
+      ) : (
+        <EmptyState
+          title="Transaction not found"
+          description="The transaction you are looking for does not exist."
+          action={
+            <Button onClick={() => router.push("/transactions")}>
+              Go back
+            </Button>
+          }
+        />
+      )}
     </Layout>
   );
 }
diff --git a/tools/tenscan/frontend/pages/tx/personal/[hash].tsx b/tools/tenscan/frontend/pages/tx/personal/[hash].tsx
deleted file mode 100644
index 65e0c9889c..0000000000
--- a/tools/tenscan/frontend/pages/tx/personal/[hash].tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import Layout from "@/src/components/layouts/default-layout";
-import EmptyState from "@/src/components/modules/common/empty-state";
-import { Button } from "@/src/components/ui/button";
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-} from "@/src/components/ui/card";
-import { Skeleton } from "@/src/components/ui/skeleton";
-import { useQuery } from "@tanstack/react-query";
-import { useRouter } from "next/router";
-import { fetchPersonalTxnByHash } from "@/api/transactions";
-import { useWalletConnection } from "@/src/components/providers/wallet-provider";
-import { PersonalTxnDetailsComponent } from "@/src/components/modules/personal/personal-txn-details";
-import ConnectWalletButton from "@/src/components/modules/common/connect-wallet";
-import { ethereum } from "@/src/lib/utils";
-
-export default function TransactionDetails() {
-  const router = useRouter();
-  const { provider, walletConnected } = useWalletConnection();
-  const { hash } = router.query;
-
-  const { data: transactionDetails, isLoading } = useQuery({
-    queryKey: ["personalTxnData", hash],
-    queryFn: () => fetchPersonalTxnByHash(provider, hash as string),
-    enabled: !!provider && !!hash,
-  });
-
-  return (
-    <Layout>
-      {walletConnected ? (
-        isLoading ? (
-          <Skeleton className="h-full w-full" />
-        ) : transactionDetails ? (
-          <Card className="col-span-3">
-            <CardHeader>
-              <CardTitle>Transaction Details</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <PersonalTxnDetailsComponent
-                transactionDetails={transactionDetails}
-              />
-            </CardContent>
-          </Card>
-        ) : (
-          <EmptyState
-            title="Transaction not found"
-            description="The transaction you are looking for does not exist."
-            action={
-              <Button onClick={() => router.push("/personal")}>Go back</Button>
-            }
-          />
-        )
-      ) : (
-        <EmptyState
-          title="Connect Wallet"
-          description="Connect your wallet to view transaction details."
-          action={
-            <div className="flex flex-col space-y-2">
-              <ConnectWalletButton
-                text={
-                  ethereum
-                    ? "Connect Wallet to continue"
-                    : "Install MetaMask to continue"
-                }
-              />
-              <Button variant={"link"} onClick={() => router.push("/personal")}>
-                Go back
-              </Button>
-            </div>
-          }
-        />
-      )}
-    </Layout>
-  );
-}
-
-export async function getServerSideProps(context: any) {
-  return {
-    props: {},
-  };
-}
diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
index 0a61d0f786..d221bdf261 100644
--- a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
+++ b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
@@ -117,10 +117,6 @@ export function DataTablePagination<TData>({
               setPage(table.getState().pagination.pageIndex + 1);
               table.nextPage();
             }}
-            disabled={
-              table.getState().pagination.pageSize >
-              table?.getFilteredRowModel()?.rows?.length
-            }
             // uncomment the following line when total count feature is implemented
             // disabled={!table.getCanNextPage()}
           >
diff --git a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx b/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx
index 0372c45bd1..1a3a94cf9e 100644
--- a/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx
+++ b/tools/tenscan/frontend/src/components/modules/common/empty-state.tsx
@@ -1,4 +1,3 @@
-import { cn } from "@/src/lib/utils";
 import Image from "next/image";
 import React from "react";
 
@@ -9,7 +8,6 @@ const EmptyState = ({
   imageSrc,
   imageAlt,
   action,
-  className,
 }: {
   title?: string;
   description?: string;
@@ -17,15 +15,9 @@ const EmptyState = ({
   imageSrc?: string;
   imageAlt?: string;
   action?: React.ReactNode;
-  className?: string;
 }) => {
   return (
-    <div
-      className={cn(
-        "flex flex-col items-center justify-center space-y-4",
-        className
-      )}
-    >
+    <div className="flex flex-col items-center justify-center h-full">
       <div className="flex flex-col items-center justify-center space-y-4">
         {icon && <div className="w-24 h-24">{icon}</div>}
         {imageSrc && (
@@ -33,8 +25,6 @@ const EmptyState = ({
             src={imageSrc}
             alt={imageAlt || "Empty state"}
             className="w-24 h-24 rounded-full"
-            width={96}
-            height={96}
           />
         )}
         {title && (
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
index 41c6b6448e..2caec11f59 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/analytics-card.tsx
@@ -21,10 +21,10 @@ export default function AnalyticsCard({
       </CardHeader>
       <CardContent>
         <div className="text-2xl font-bold truncate mb-1">
-          {item.loading ? (
-            <Skeleton className="w-[100px] h-[20px] rounded-full" />
-          ) : (
+          {item.value ? (
             item.value
+          ) : (
+            <Skeleton className="w-[100px] h-[20px] rounded-full" />
           )}
         </div>
         {item?.change && (
diff --git a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
index 18124148f6..f2ec71e079 100644
--- a/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
+++ b/tools/tenscan/frontend/src/components/modules/dashboard/index.tsx
@@ -39,15 +39,9 @@ interface RecentData {
 }
 
 export default function Dashboard() {
-  const {
-    price,
-    isPriceLoading,
-    transactions,
-    transactionCount,
-    isTransactionCountLoading,
-  } = useTransactionsService();
-  const { contractCount, isContractCountLoading } = useContractsService();
-  const { batches, latestBatch, isLatestBatchLoading } = useBatchesService();
+  const { price, transactions, transactionCount } = useTransactionsService();
+  const { contractCount } = useContractsService();
+  const { batches, latestBatch } = useBatchesService();
   const { rollups } = useRollupsService();
 
   const DASHBOARD_DATA = [
@@ -59,7 +53,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: RocketIcon,
-      loading: isPriceLoading,
     },
     {
       title: "Latest L2 Batch",
@@ -69,7 +62,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: LayersIcon,
-      loading: isLatestBatchLoading,
     },
     {
       title: "Latest L1 Rollup",
@@ -85,7 +77,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: CubeIcon,
-      loading: isLatestBatchLoading,
     },
     {
       title: "Transactions",
@@ -95,7 +86,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: ReaderIcon,
-      loading: isTransactionCountLoading,
     },
     {
       title: "Contracts",
@@ -103,7 +93,6 @@ export default function Dashboard() {
       // TODO: add change
       // change: "+20.1%",
       icon: FileTextIcon,
-      loading: isContractCountLoading,
     },
     {
       title: "Nodes",
diff --git a/tools/tenscan/frontend/src/components/modules/personal/columns.tsx b/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
index 03fc288e3d..8bdbaa3fae 100644
--- a/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
+++ b/tools/tenscan/frontend/src/components/modules/personal/columns.tsx
@@ -129,7 +129,7 @@ export const columns: ColumnDef<PersonalTransactions>[] = [
     id: "actions",
     cell: ({ row }) => {
       return (
-        <Link href={`/tx/personal/${row.original.transactionHash}`}>
+        <Link href={`/tx/${row.original.transactionHash}`}>
           <EyeOpenIcon className="h-5 w-5 text-muted-foreground hover:text-primary transition-colors cursor-pointer" />
         </Link>
       );
diff --git a/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx b/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx
deleted file mode 100644
index 00e174f8e6..0000000000
--- a/tools/tenscan/frontend/src/components/modules/personal/personal-txn-details.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-import TruncatedAddress from "../common/truncated-address";
-import KeyValueItem, { KeyValueList } from "@/src/components/ui/key-value";
-import { Badge } from "@/src/components/ui/badge";
-import {
-  PersonalTransactionType,
-  TransactionReceipt,
-  TransactionType,
-} from "@/src/types/interfaces/TransactionInterfaces";
-import { BadgeType } from "@/src/types/interfaces";
-import Link from "next/link";
-
-export function PersonalTxnDetailsComponent({
-  transactionDetails,
-}: {
-  transactionDetails: TransactionReceipt;
-}) {
-  const getTransactionType = (type: TransactionType) => {
-    switch (type) {
-      case PersonalTransactionType.Legacy:
-        return "Legacy";
-      case PersonalTransactionType.AccessList:
-        return "Access List";
-      case PersonalTransactionType.DynamicFee:
-        return "Dynamic Fee";
-      case PersonalTransactionType.Blob:
-        return "Blob";
-      default:
-        return "Unknown";
-    }
-  };
-
-  return (
-    <div className="space-y-8">
-      <KeyValueList>
-        <KeyValueItem
-          label="From"
-          value={
-            <TruncatedAddress
-              address={transactionDetails?.from}
-              link={`/address/${transactionDetails?.from}`}
-            />
-          }
-        />
-        <KeyValueItem
-          label="To"
-          value={
-            <TruncatedAddress
-              address={transactionDetails?.to}
-              link={`/address/${transactionDetails?.to}`}
-            />
-          }
-        />
-        <KeyValueItem
-          label="Transaction Index"
-          value={
-            <Badge variant={"outline"}>
-              {Number(transactionDetails?.transactionIndex)}
-            </Badge>
-          }
-        />
-        <KeyValueItem
-          label="Transaction Type"
-          value={
-            <Badge
-              variant={
-                transactionDetails?.type
-                  ? BadgeType.SUCCESS
-                  : BadgeType.DESTRUCTIVE
-              }
-            >
-              {getTransactionType(transactionDetails?.type)}
-            </Badge>
-          }
-        />
-        <KeyValueItem
-          label="Status"
-          value={
-            <Badge
-              variant={
-                transactionDetails?.status
-                  ? BadgeType.SUCCESS
-                  : BadgeType.DESTRUCTIVE
-              }
-            >
-              {transactionDetails?.status ? "Success" : "Failed"}
-            </Badge>
-          }
-        />
-
-        <KeyValueItem
-          label="Block Number"
-          value={
-            <Link href={`/block/${transactionDetails?.blockNumber}`}>
-              {Number(transactionDetails?.blockNumber)}
-            </Link>
-          }
-        />
-        <KeyValueItem
-          label="Gas Used"
-          value={
-            <Badge variant={"outline"}>
-              {Number(transactionDetails?.gasUsed)}{" "}
-            </Badge>
-          }
-        />
-        <KeyValueItem
-          label="Cumulative Gas Used"
-          value={
-            <Badge variant={"outline"}>
-              {Number(transactionDetails?.cumulativeGasUsed)}
-            </Badge>
-          }
-        />
-        <KeyValueItem
-          label="Effective Gas Price"
-          value={
-            <Badge variant={"outline"}>
-              {Number(transactionDetails?.effectiveGasPrice)}
-            </Badge>
-          }
-        />
-        <KeyValueItem
-          label="Block Hash"
-          value={<TruncatedAddress address={transactionDetails?.blockHash} />}
-        />
-        <KeyValueItem
-          label="Logs Bloom"
-          value={<TruncatedAddress address={transactionDetails?.logsBloom} />}
-        />
-        <KeyValueItem
-          label="Contract Address"
-          value={
-            <TruncatedAddress
-              address={transactionDetails?.contractAddress}
-              link={`/address/${transactionDetails?.contractAddress}`}
-            />
-          }
-        />
-        <KeyValueItem
-          label="Transaction Hash"
-          value={
-            <TruncatedAddress
-              address={transactionDetails?.transactionHash}
-              link={`/tx/${transactionDetails?.transactionHash}`}
-            />
-          }
-        />
-
-        <KeyValueItem
-          label="Logs"
-          value={
-            transactionDetails?.logs.length > 0 ? (
-              <div className="space-y-4">
-                {transactionDetails?.logs.map((log, index) => (
-                  <div key={index}>
-                    <KeyValueList>
-                      <KeyValueItem
-                        label="Address"
-                        value={<TruncatedAddress address={log.address} />}
-                      />
-                      <KeyValueItem
-                        label="Block Hash"
-                        value={<TruncatedAddress address={log.blockHash} />}
-                      />
-                      <KeyValueItem
-                        label="Block Number"
-                        value={Number(log.blockNumber)}
-                      />
-                      <KeyValueItem
-                        label="Data"
-                        value={<TruncatedAddress address={log.data} />}
-                      />
-                      <KeyValueItem label="Log Index" value={log.logIndex} />
-                      <KeyValueItem
-                        label="Removed"
-                        value={
-                          <Badge
-                            variant={
-                              log.removed
-                                ? BadgeType.DESTRUCTIVE
-                                : BadgeType.SUCCESS
-                            }
-                          >
-                            {log.removed ? "Yes" : "No"}
-                          </Badge>
-                        }
-                      />
-                      <KeyValueItem
-                        label="Topics"
-                        value={
-                          <div className="space-y-4">
-                            {log.topics.map((topic, index) => (
-                              <div key={index}>
-                                <KeyValueItem
-                                  value={<TruncatedAddress address={topic} />}
-                                />
-                              </div>
-                            ))}
-                          </div>
-                        }
-                      />
-                      <KeyValueItem
-                        label="Transaction Hash"
-                        value={
-                          <TruncatedAddress
-                            address={log.transactionHash}
-                            link={`/tx/${log.transactionHash}`}
-                          />
-                        }
-                      />
-                      <KeyValueItem
-                        label="Transaction Index"
-                        value={
-                          <Badge variant={"outline"}>
-                            {Number(transactionDetails?.transactionIndex)}
-                          </Badge>
-                        }
-                        isLastItem
-                      />
-                    </KeyValueList>
-                  </div>
-                ))}
-              </div>
-            ) : (
-              "No logs found"
-            )
-          }
-          isLastItem
-        />
-      </KeyValueList>
-    </div>
-  );
-}
diff --git a/tools/tenscan/frontend/src/components/ui/key-value.tsx b/tools/tenscan/frontend/src/components/ui/key-value.tsx
index 540e3a7ce3..d75ca31aea 100644
--- a/tools/tenscan/frontend/src/components/ui/key-value.tsx
+++ b/tools/tenscan/frontend/src/components/ui/key-value.tsx
@@ -10,7 +10,7 @@ export const KeyValueItem = ({
   value,
   isLastItem,
 }: {
-  label?: string;
+  label: string;
   value: string | number | React.ReactNode;
   isLastItem?: boolean;
 }) => (
@@ -19,7 +19,7 @@ export const KeyValueItem = ({
    ${isLastItem ? "" : "mb-2"}`}
   >
     <div className="py-2 grid grid-cols-9">
-      {label && <span className="font-bold col-span-3">{label}</span>}
+      <span className="font-bold col-span-3">{label}</span>
       <span className="ml-2 col-span-6">{value}</span>
     </div>
     {!isLastItem && <Separator />}
diff --git a/tools/tenscan/frontend/src/lib/constants.ts b/tools/tenscan/frontend/src/lib/constants.ts
index 8c0808fdbd..c456eb7bd8 100644
--- a/tools/tenscan/frontend/src/lib/constants.ts
+++ b/tools/tenscan/frontend/src/lib/constants.ts
@@ -18,9 +18,7 @@ const calculateOffset = (page: number, size: number) => {
 
 export const getOptions = (query: { page?: number; size?: number }) => {
   const defaultSize = 20;
-  const size = query.size
-    ? +(query.size > 100 ? 100 : query.size)
-    : defaultSize;
+  const size = query.size ? (query.size > 100 ? 100 : query.size) : defaultSize;
   const page = query.page || 1;
   const offset = calculateOffset(page, size);
   return {
diff --git a/tools/tenscan/frontend/src/lib/utils.ts b/tools/tenscan/frontend/src/lib/utils.ts
index a07a957028..d4cf0b32cc 100644
--- a/tools/tenscan/frontend/src/lib/utils.ts
+++ b/tools/tenscan/frontend/src/lib/utils.ts
@@ -49,7 +49,3 @@ export const getItem = <T>(
 
   return value;
 };
-
-export function jsonHexToObj(hex: string) {
-  return JSON.parse(Buffer.from(hex.slice(2), "hex").toString());
-}
diff --git a/tools/tenscan/frontend/src/routes/index.ts b/tools/tenscan/frontend/src/routes/index.ts
index a85623ce77..61433a5d39 100644
--- a/tools/tenscan/frontend/src/routes/index.ts
+++ b/tools/tenscan/frontend/src/routes/index.ts
@@ -37,7 +37,6 @@ export const apiRoutes = {
 
 export const ethMethods = {
   getStorageAt: "eth_getStorageAt",
-  getTransactionReceipt: "eth_getTransactionReceipt",
 };
 // to send TEN Custom Queries (CQ) through the provider we call eth_getStorageAt and use these addresses to identify the TEN CQ method
 export const tenCustomQueryMethods = {
diff --git a/tools/tenscan/frontend/src/services/useTransactionsService.ts b/tools/tenscan/frontend/src/services/useTransactionsService.ts
index 5284c073f3..5edbc3f345 100644
--- a/tools/tenscan/frontend/src/services/useTransactionsService.ts
+++ b/tools/tenscan/frontend/src/services/useTransactionsService.ts
@@ -2,22 +2,34 @@ import {
   fetchEtherPrice,
   fetchTransactions,
   fetchTransactionCount,
-  personalTransactionsData,
 } from "@/api/transactions";
 import { useWalletConnection } from "@/src/components/providers/wallet-provider";
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   getOptions,
   pollingInterval,
   pricePollingInterval,
 } from "../lib/constants";
+import { PersonalTransactionsResponse } from "../types/interfaces/TransactionInterfaces";
 import { useRouter } from "next/router";
+import { showToast } from "../components/ui/use-toast";
+import { ToastType } from "../types/interfaces";
+import {ethMethods, tenCustomQueryMethods} from "../routes";
 
 export const useTransactionsService = () => {
   const { query } = useRouter();
   const { walletAddress, provider } = useWalletConnection();
 
+  const [personalTxnsLoading, setPersonalTxnsLoading] = useState(false);
+  const [personalTxns, setPersonalTxns] =
+    useState<PersonalTransactionsResponse>();
+
+  useEffect(() => {
+    personalTransactions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [walletAddress]);
+
   const [noPolling, setNoPolling] = useState(false);
 
   const options = getOptions(query);
@@ -39,11 +51,33 @@ export const useTransactionsService = () => {
       refetchInterval: noPolling ? false : pollingInterval,
     });
 
-  const { data: personalTxns, isLoading: personalTxnsLoading } = useQuery({
-    queryKey: ["personalTxns", options],
-    queryFn: () => personalTransactionsData(provider, walletAddress, options),
-    enabled: !!walletAddress && !!provider,
-  });
+  const personalTransactions = async () => {
+    try {
+      setPersonalTxnsLoading(true);
+      if (provider) {
+        const requestPayload = {
+          address: walletAddress,
+          pagination: {
+            ...options,
+          },
+        };
+        const personalTxResp = await provider.send(ethMethods.getStorageAt, [
+          tenCustomQueryMethods.listPersonalTransactions,
+          JSON.stringify(requestPayload),
+          null,
+        ]);
+        const personalTxData = jsonHexToObj(personalTxResp);
+        setPersonalTxns(personalTxData);
+      }
+    } catch (error) {
+      console.error("Error fetching personal transactions:", error);
+      setPersonalTxns(undefined);
+      showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions");
+      throw error;
+    } finally {
+      setPersonalTxnsLoading(false);
+    }
+  };
 
   const { data: price, isLoading: isPriceLoading } = useQuery({
     queryKey: ["price"],
@@ -61,6 +95,9 @@ export const useTransactionsService = () => {
     personalTxns,
     personalTxnsLoading,
     price,
-    isPriceLoading,
   };
 };
+
+function jsonHexToObj(hex: string) {
+  return JSON.parse(Buffer.from(hex.slice(2), "hex").toString());
+}
\ No newline at end of file
diff --git a/tools/tenscan/frontend/src/types/interfaces/TransactionInterfaces.ts b/tools/tenscan/frontend/src/types/interfaces/TransactionInterfaces.ts
index 25b8ef80c4..8d468f3daa 100644
--- a/tools/tenscan/frontend/src/types/interfaces/TransactionInterfaces.ts
+++ b/tools/tenscan/frontend/src/types/interfaces/TransactionInterfaces.ts
@@ -27,14 +27,7 @@ export type PersonalTransactionsResponse = {
   Total: number;
 };
 
-export type TransactionType = "0x0" | "0x1" | "0x2" | "0x3";
-
-export enum PersonalTransactionType {
-  Legacy = "0x0",
-  AccessList = "0x1",
-  DynamicFee = "0x2",
-  Blob = "0x3",
-}
+export type TransactionType = 0x0 | 0x1 | 0x2 | 0x3;
 
 export type PersonalTransactions = {
   id: number;
@@ -52,32 +45,3 @@ export type PersonalTransactions = {
   transactionIndex: string;
   type: TransactionType;
 };
-
-export type TransactionReceipt = {
-  blockHash: string;
-  blockNumber: string;
-  contractAddress: string;
-  cumulativeGasUsed: string;
-  effectiveGasPrice: string;
-  from: string;
-  gasUsed: string;
-  logs: Log[];
-  logsBloom: string;
-  status: string;
-  to: string;
-  transactionHash: string;
-  transactionIndex: string;
-  type: TransactionType;
-};
-
-export type Log = {
-  address: string;
-  blockHash: string;
-  blockNumber: string;
-  data: string;
-  logIndex: string;
-  removed: boolean;
-  topics: string[];
-  transactionHash: string;
-  transactionIndex: string;
-};
diff --git a/tools/tenscan/frontend/src/types/interfaces/index.ts b/tools/tenscan/frontend/src/types/interfaces/index.ts
index 48b87edb9e..9ab1d962e6 100644
--- a/tools/tenscan/frontend/src/types/interfaces/index.ts
+++ b/tools/tenscan/frontend/src/types/interfaces/index.ts
@@ -93,7 +93,6 @@ export interface DashboardAnalyticsData {
   value: string | number | JSX.Element;
   change?: string;
   icon: any;
-  loading?: boolean;
 }
 
 export enum ItemPosition {