From d60421b285eede7387d2921f58944d10fe671a61 Mon Sep 17 00:00:00 2001
From: Megha-Dev-19 <100185149+Megha-Dev-19@users.noreply.github.com>
Date: Wed, 29 Jan 2025 00:06:06 +0530
Subject: [PATCH] moved transaction history

---
 .../widget/components/Profile.jsx             |   5 +-
 .../pages/dashboard/TransactionHistory.jsx    | 139 ++++--------------
 2 files changed, 32 insertions(+), 112 deletions(-)

diff --git a/instances/widgets.treasury-factory.near/widget/components/Profile.jsx b/instances/widgets.treasury-factory.near/widget/components/Profile.jsx
index 595cf921..ecbaea1d 100644
--- a/instances/widgets.treasury-factory.near/widget/components/Profile.jsx
+++ b/instances/widgets.treasury-factory.near/widget/components/Profile.jsx
@@ -11,6 +11,7 @@ const showKYC = props.showKYC;
 const accountId = props.accountId;
 const displayName = props.displayName ?? true;
 const displayImage = props.displayImage ?? true;
+const width = props.width ?? null;
 const [isVerfied, setIsVerfied] = useState(false);
 const [verificationStatus, setVerificationStatus] = useState(null);
 
@@ -116,7 +117,7 @@ const HoverCard = () => {
 const ReceiverAccountComponent = (
   <div
     className="d-flex gap-1 align-items-center"
-    style={{ width: displayImage ? "180px" : "100px" }}
+    style={{ width: width ? width : displayImage ? "180px" : "100px" }}
   >
     {displayImage && (
       <div style={{ width: "40px", height: 40, position: "relative" }}>
@@ -130,7 +131,7 @@ const ReceiverAccountComponent = (
 
     <div
       className="text-truncate"
-      style={{ width: displayImage ? "150px" : "100px" }}
+      style={{ width: width ? width : displayImage ? "150px" : "100px" }}
     >
       {displayName && <div className="h6 mb-0"> {name}</div>}
       <div>
diff --git a/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx b/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx
index e7a30001..cf998608 100644
--- a/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx
+++ b/instances/widgets.treasury-factory.near/widget/pages/dashboard/TransactionHistory.jsx
@@ -36,20 +36,6 @@ const loading = (
   <Widget src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Spinner"} />
 );
 
-function sortByDate(items) {
-  const groupedItems = items ? [...items] : [];
-
-  // Sort by timestamp in descending order
-  const sortedItems = groupedItems.sort((a, b) => {
-    const timestampA = parseInt(a.timestamp, 10);
-    const timestampB = parseInt(b.timestamp, 10);
-
-    return timestampB - timestampA;
-  });
-
-  return sortedItems;
-}
-
 // use BOS open API for gateway and paid for web4
 const pikespeakKey = isBosGateway()
   ? "${REPL_PIKESPEAK_KEY}"
@@ -66,78 +52,18 @@ function setAPIError() {
 
 useEffect(() => {
   if (!showMoreLoading) {
-    const options = {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        "x-api-key": pikespeakKey,
-      },
-    };
-    const promises = [];
     setShowMoreLoading(true);
-    promises.push(
-      asyncFetch(
-        `https://api.pikespeak.ai/account/near-transfer/${treasuryDaoID}?limit=${totalTxnsPerPage}&offset=${
-          totalTxnsPerPage * (page - 1)
-        }`,
-        options
-      )
-    );
-
-    promises.push(
-      asyncFetch(
-        `https://api.pikespeak.ai/account/ft-transfer/${treasuryDaoID}?limit=${totalTxnsPerPage}&offset=${
-          totalTxnsPerPage * (page - 1)
-        }`,
-        options
-      )
-    );
-
-    if (lockupContract) {
-      promises.push(
-        asyncFetch(
-          `https://api.pikespeak.ai/account/near-transfer/${lockupContract}?limit=${totalTxnsPerPage}&offset=${
-            totalTxnsPerPage * (page - 1)
-          }`,
-          options
-        )
-      );
-
-      promises.push(
-        asyncFetch(
-          `https://api.pikespeak.ai/account/ft-transfer/${lockupContract}?limit=${totalTxnsPerPage}&offset=${
-            totalTxnsPerPage * (page - 1)
-          }`,
-          options
-        )
-      );
-    }
-    Promise.all(promises).then((i) => {
-      if (!i[0].ok || !i[1].ok) {
+    asyncFetch(
+      `${REPL_BACKEND_API}/transactions-transfer-history?treasuryDaoID=${treasuryDaoID}&lockupContract=${lockupContract}&page=${page}`
+    ).then((res) => {
+      if (!res.body.data) {
         setAPIError();
-        return;
-      }
-      if (lockupContract && (!i[2].ok || !i[3].ok)) {
-        setAPIError();
-        return;
-      }
-      const nearResp = lockupContract
-        ? i[0]?.body.concat(i[2]?.body)
-        : i[0]?.body;
-      const ftResp = lockupContract
-        ? i[1]?.body.concat(i[3]?.body)
-        : i[1]?.body;
-      if (Array.isArray(nearResp) && Array.isArray(ftResp)) {
-        if (
-          nearResp.length < totalTxnsPerPage &&
-          ftResp.length < totalTxnsPerPage
-        ) {
+      } else {
+        if (res.body.data.length < page * totalTxnsPerPage) {
           setHideViewMore(true);
         }
         setError(null);
-        setTransactionWithBalance((prev) => {
-          return [...prev, ...sortByDate(nearResp.concat(ftResp))];
-        });
+        setTransactionWithBalance(res.body.data);
         setShowMoreLoading(false);
       }
     });
@@ -229,6 +155,11 @@ const Container = styled.div`
   table {
     overflow-x: auto;
   }
+
+  .account-cell {
+    min-width: 180px;
+    max-width: 180px;
+  }
 `;
 
 function formatAccount(text) {
@@ -252,8 +183,8 @@ return (
               <thead>
                 <tr className="text-secondary px-3 py-3 border-top">
                   <td>Type</td>
-                  <td>From</td>
-                  <td>To</td>
+                  <td className="account-cell">From</td>
+                  <td className="account-cell">To</td>
                   <td className="text-right">Transaction</td>
                   <td className="text-right">Amount</td>
                 </tr>
@@ -300,45 +231,33 @@ return (
                           </div>
                         </div>
                       </td>
-                      <td className="fw-semi-bold" style={{ minWidth: 200 }}>
+                      <td className="fw-semi-bold account-cell">
                         <Widget
-                          src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
+                          src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Profile`}
                           props={{
-                            popup: (
-                              <Widget
-                                src="${REPL_MOB}/widget/Profile.Popover"
-                                props={{ accountId: txn.sender }}
-                              />
-                            ),
-                            children: (
-                              <div className="text-truncate">
-                                {formatAccount(txn.sender)}
-                              </div>
-                            ),
+                            accountId: txn.sender,
+                            showKYC: false,
                             instance,
+                            displayImage: false,
+                            displayName: false,
+                            width: 150,
                           }}
                         />
                       </td>
-                      <td className="fw-semi-bold" style={{ minWidth: 200 }}>
+                      <td className="fw-semi-bold account-cell">
                         <Widget
-                          src="${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.OverlayTrigger"
+                          src={`${REPL_BASE_DEPLOYMENT_ACCOUNT}/widget/components.Profile`}
                           props={{
-                            popup: (
-                              <Widget
-                                src="${REPL_MOB}/widget/Profile.Popover"
-                                props={{ accountId: txn.receiver }}
-                              />
-                            ),
-                            children: (
-                              <div className="text-truncate">
-                                {formatAccount(txn.receiver)}
-                              </div>
-                            ),
+                            accountId: txn.receiver,
+                            showKYC: false,
                             instance,
+                            displayImage: false,
+                            displayName: false,
+                            width: 150,
                           }}
                         />
                       </td>
-                      <td className="text-right" style={{ minWidth: 200 }}>
+                      <td className="text-right" style={{ minWidth: 100 }}>
                         <div className="d-flex gap-2 align-items-center fw-semi-bold justify-content-center">
                           <a
                             target="_blank"