From ea50bb7c37edb14806ca0d4ff8d00e65ae929454 Mon Sep 17 00:00:00 2001
From: Rayan fernandes <37145078+Rayanfer32@users.noreply.github.com>
Date: Thu, 21 Apr 2022 15:55:31 +0530
Subject: [PATCH 1/4] refactor files

---
 .../TransactionDetails/TransactionDetails.jsx | 119 ++++++++++++--
 .../TransactionDetails.module.scss            |  10 ++
 src/components/UserAccount/UserAccount.jsx    | 148 ++++++------------
 3 files changed, 164 insertions(+), 113 deletions(-)

diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
index 0b63ea46..c85e5edf 100644
--- a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
+++ b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
@@ -1,24 +1,111 @@
 import Table from 'components/Table/Table';
 import styles from './TransactionDetails.module.scss';
 import Loader from 'components/atoms/NE_Loader';
+import { useNetwork } from 'hooks/useNetwork/useNetwork';
+import CopyText from 'components/atoms/NE_CopyText/CopyText';
+import { useQuery } from 'react-query';
+import TYPES from 'types';
+import { useEffect, useState } from 'react';
 
-export const TransactionDetails = ({
-  isLoading = false,
-  columns,
-  data = [],
-}) => {
-  const LoaderDiv = () => (
-    <div
-      style={{
-        display: 'grid',
-        placeItems: 'center',
-        minHeight: '200px',
-        margin: 'auto',
-      }}>
-      <Loader type="circle" size="5rem" />
-    </div>
+export const TransactionDetails = ({ type, data }) => {
+
+  const [tableData, setTableData] = useState([]);
+  const { network, getAccountTransactions, getTrustTransactions } =
+    useNetwork();
+
+    const LoaderDiv = () => (
+      <div
+        style={{
+          display: 'grid',
+          placeItems: 'center',
+          minHeight: '200px',
+          margin: 'auto',
+        }}>
+        <Loader type="circle" size="5rem" />
+      </div>
+    );
+  
+
+  const accountTransactionsRQ = useQuery(
+    ['accountTransactions', network.name, type],
+    () =>
+      type == 'user'
+        ? getAccountTransactions(data)
+        : getTrustTransactions(data),
+    {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      enable: false,
+    }
   );
+
+  // * columns for the txns table
+  const columns = [
+    {
+      Header: 'Time',
+      accessor: 'timestamp',
+      Cell: (props) => {
+        return <div>{new Date(props.value * 1000).toLocaleString()}</div>;
+      },
+    },
+    {
+      Header: 'TXID',
+      accessor: 'txid',
+      Cell: (props) => {
+        return <CopyText value={props.value} />;
+      },
+    },
+    {
+      Header: 'Operation',
+      accessor: 'operation',
+    },
+    {
+      Header: 'Amount',
+      accessor: 'amount',
+      Cell: (props) => {
+        let fontColor = 'var(--theme-page-text)';
+        let sign = '+';
+        if (
+          ['CREDIT', 'CREATE', 'TRUST'].includes(props.row.values.operation)
+        ) {
+          fontColor = TYPES.COLORS.MARKET_GREEN;
+          sign = '+';
+        } else if (['DEBIT', 'FEE'].includes(props.row.values.operation)) {
+          fontColor = TYPES.COLORS.MARKET_RED;
+          sign = '-';
+        }
+        return (
+          <div className={styles.amount} style={{ background: fontColor }}>
+            {sign} {props.value}
+          </div>
+        );
+      },
+    },
+  ];
+
+useEffect(() => {
+    if (accountTransactionsRQ.data) {
+      let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
+        return {
+          txid: txn.txid,
+          timestamp: txn.timestamp,
+          operation: txn.contracts[0].OP,
+          amount: `${txn.contracts[0].amount || 0} ${txn.contracts[0].ticker}`,
+        };
+      });
+
+      setTableData(_tableData);
+    }
+  }, [accountTransactionsRQ.data]);
+
+
   return (
-    <>{isLoading ? <LoaderDiv /> : <Table columns={columns} data={data} />}</>
+    <>
+      {accountTransactionsRQ.isFetching ? (
+        <LoaderDiv />
+      ) : (
+        <Table columns={columns} data={tableData || []} />
+      )}
+    </>
   );
 };
diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.module.scss b/src/components/UserAccount/TransactionDetails/TransactionDetails.module.scss
index e69de29b..e7a8f052 100644
--- a/src/components/UserAccount/TransactionDetails/TransactionDetails.module.scss
+++ b/src/components/UserAccount/TransactionDetails/TransactionDetails.module.scss
@@ -0,0 +1,10 @@
+.page {
+  color: var(--theme-page-text);
+}
+
+.amount {
+  color: var(--white);
+  font-weight: 'bold';
+  border-radius: var(--space-xxxs);
+  padding: var(--space-xxxs) var(--space-xxs);
+}
diff --git a/src/components/UserAccount/UserAccount.jsx b/src/components/UserAccount/UserAccount.jsx
index 23c74200..0b95c003 100644
--- a/src/components/UserAccount/UserAccount.jsx
+++ b/src/components/UserAccount/UserAccount.jsx
@@ -12,104 +12,62 @@ import { toTitleCase } from 'utils/converter';
 import { isDev } from 'utils/middleware';
 
 export default function UserAccount({ type, data }) {
-  const [showRawTxns, setShowRawTxns] = useState(false);
-  const [tableData, setTableData] = useState([]);
+  // const [showRawTxns, setShowRawTxns] = useState(false);
+  // const [tableData, setTableData] = useState([]);
 
-  const { network, getAccountTransactions, getTrustTransactions } =
-    useNetwork();
-  const accountTransactionsRQ = useQuery(
-    ['accountTransactions', network.name, type],
-    () =>
-      type == 'user'
-        ? getAccountTransactions(data)
-        : getTrustTransactions(data),
-    {
-      refetchOnMount: false,
-      refetchOnWindowFocus: false,
-      enable: false,
-    }
-  );
-
-  useEffect(() => {
-    // temp fix for the issue where the query is not re-run when the component is re-rendered
-    setTimeout(() => accountTransactionsRQ.refetch(), 2000);
-  }, []);
+  // const { network, getAccountTransactions, getTrustTransactions } =
+  //   useNetwork();
+  // const accountTransactionsRQ = useQuery(
+  //   ['accountTransactions', network.name, type],
+  //   () =>
+  //     type == 'user'
+  //       ? getAccountTransactions(data)
+  //       : getTrustTransactions(data),
+  //   {
+  //     refetchOnMount: false,
+  //     refetchOnWindowFocus: false,
+  //     enable: false,
+  //   }
+  // );
 
-  useEffect(() => {
-    // temp fix for the issue where the query is not re-run when the component is re-rendered
-    accountTransactionsRQ.refetch();
-  }, [data.address]);
+  // useEffect(() => {
+  //   // ! temp fix for the issue where the query is not re-run when the component is re-rendered
+  //   setTimeout(() => accountTransactionsRQ.refetch(), 2000);
+  // }, []);
 
-  // columns for the txns table
-  const columns = [
-    {
-      Header: 'Time',
-      accessor: 'timestamp',
-      Cell: (props) => {
-        return <div>{new Date(props.value * 1000).toLocaleString()}</div>;
-      },
-    },
-    {
-      Header: 'TXID',
-      accessor: 'txid',
-      Cell: (props) => {
-        return <CopyText value={props.value} />;
-      },
-    },
-    {
-      Header: 'Operation',
-      accessor: 'operation',
-    },
-    {
-      Header: 'Amount',
-      accessor: 'amount',
-      Cell: (props) => {
-        let fontColor = 'var(--theme-page-text)';
-        let sign = '+';
-        if (['CREDIT', 'CREATE', 'TRUST'].includes(props.row.values.operation)) {
-          fontColor = TYPES.COLORS.MARKET_GREEN;
-          sign = '+';
-        } else if (['DEBIT', 'FEE'].includes(props.row.values.operation)) {
-          fontColor = 'red';
-          sign = '-';
-        }
-        return (
-          <div className={styles.amount} style={{ background: fontColor }}>
-            {sign} {props.value}
-          </div>
-        );
-      },
-    },
-  ];
+  // useEffect(() => {
+  //   // ! temp fix for the issue where the query is not re-run when the component is re-rendered
+  //   accountTransactionsRQ.refetch();
+  // }, [data.address]);
 
-  useEffect(() => {
-    if (accountTransactionsRQ.data) {
-      let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
-        return {
-          txid: txn.txid,
-          timestamp: txn.timestamp,
-          operation: txn.contracts[0].OP,
-          amount: `${txn.contracts[0].amount || 0} NXS`,
-        };
-      });
+  // useEffect(() => {
+  //   if (accountTransactionsRQ.data) {
+  //     let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
+  //       return {
+  //         txid: txn.txid,
+  //         timestamp: txn.timestamp,
+  //         operation: txn.contracts[0].OP,
+  //         amount: `${txn.contracts[0].amount || 0} NXS`,
+  //       };
+  //     });
 
-      setTableData(_tableData);
-    }
-  }, [accountTransactionsRQ.data]);
+  //     setTableData(_tableData);
+  //   }
+  // }, [accountTransactionsRQ.data]);
 
-  const rawInfo = () => (
-    <>
-      <Button type="tertiary" onClick={() => setShowRawTxns((prev) => !prev)}>
-        Show RAW Transactions
-      </Button>
+  // const rawInfo = () => (
+  //   <>
+  //     <Button type="tertiary" onClick={() => setShowRawTxns((prev) => !prev)}>
+  //       Show RAW Transactions
+  //     </Button>
 
-      {showRawTxns && (
-        <pre style={{ height: '10rem', overflow: 'scroll' }}>
-          {JSON.stringify(accountTransactionsRQ.data, null, 2)}
-        </pre>
-      )}
-    </>
-  );
+  //     {showRawTxns && (
+  //       <pre style={{ height: '10rem', overflow: 'scroll' }}>
+  //         {JSON.stringify(accountTransactionsRQ.data, null, 2)}
+  //       </pre>
+  //     )}
+  //   </>
+  // );
 
   return (
     <div className={styles.page}>
@@ -123,13 +81,9 @@ export default function UserAccount({ type, data }) {
 
       {/* Transection detail table */}
       <h3>Transaction Details</h3>
-      <TransactionDetails
-        isLoading={accountTransactionsRQ.isLoading}
-        columns={columns}
-        data={tableData || []}
-      />
+      <TransactionDetails type={type} data={data} />
 
-      {isDev && rawInfo}
+      {/* {isDev && rawInfo} */}
     </div>
   );
 }

From aae6a58f822a0c5ecac80edde49b6f9ba931ad0b Mon Sep 17 00:00:00 2001
From: Rayan fernandes <37145078+Rayanfer32@users.noreply.github.com>
Date: Thu, 21 Apr 2022 16:39:19 +0530
Subject: [PATCH 2/4] added dynamic pagiantion

---
 src/components/Table/DynamicPagination.jsx    | 26 ++++---
 .../TransactionDetails/TransactionDetails.jsx | 73 ++++++++++++++-----
 src/hooks/useNetwork/useNetwork.jsx           | 11 +--
 3 files changed, 77 insertions(+), 33 deletions(-)

diff --git a/src/components/Table/DynamicPagination.jsx b/src/components/Table/DynamicPagination.jsx
index 98d6562f..450a8835 100644
--- a/src/components/Table/DynamicPagination.jsx
+++ b/src/components/Table/DynamicPagination.jsx
@@ -72,8 +72,9 @@ export default function DynamicPagination({ controls }) {
             <BiChevronLeft color="inherit" />
           </button>
           <span className={styles.pagination__btn__page}>
-            Page <strong>
-              {pageIndex + 1} of {pageCount}
+            Page{' '}
+            <strong>
+              {pageIndex + 1} {pageCount != Infinity && `of ${pageCount}`}
             </strong>
           </span>
           <button
@@ -83,17 +84,20 @@ export default function DynamicPagination({ controls }) {
             disabled={!canNextPage}>
             <BiChevronRight color="inherit" />
           </button>
-          <button
-            className={styles.pagination__btn__icon}
-            type="secondary"
-            onClick={handleEndOfPageClick}
-            disabled={!canNextPage}>
-            <BiLastPage color="inherit" />
-          </button>
+          {pageCount != Infinity && (
+            <button
+              className={styles.pagination__btn__icon}
+              type="secondary"
+              onClick={handleEndOfPageClick}
+              disabled={!canNextPage}>
+              <BiLastPage color="inherit" />
+            </button>
+          )}
         </span>
         <div className={styles.pagination__goToPage}>
           <span className={styles.pagination__goToPage__pageSelect}>
-            Go to page: <input
+            Go to page:{' '}
+            <input
               type="number"
               defaultValue={pageIndex + 1}
               onChange={handleGotoPageInputChange}
@@ -116,4 +120,4 @@ export default function DynamicPagination({ controls }) {
       </div>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
index c85e5edf..1b412056 100644
--- a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
+++ b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
@@ -6,31 +6,42 @@ import CopyText from 'components/atoms/NE_CopyText/CopyText';
 import { useQuery } from 'react-query';
 import TYPES from 'types';
 import { useEffect, useState } from 'react';
+import DynamicPagination from 'components/Table/DynamicPagination';
+import ErrorMessage from 'components/atoms/ErrorMessage';
 
 export const TransactionDetails = ({ type, data }) => {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [pageCount, setPageCount] = useState(Infinity);
 
   const [tableData, setTableData] = useState([]);
   const { network, getAccountTransactions, getTrustTransactions } =
     useNetwork();
 
-    const LoaderDiv = () => (
-      <div
-        style={{
-          display: 'grid',
-          placeItems: 'center',
-          minHeight: '200px',
-          margin: 'auto',
-        }}>
-        <Loader type="circle" size="5rem" />
-      </div>
-    );
-  
+  const LoaderDiv = () => (
+    <div
+      style={{
+        display: 'grid',
+        placeItems: 'center',
+        minHeight: '200px',
+        margin: 'auto',
+      }}>
+      <Loader type="circle" size="5rem" />
+    </div>
+  );
 
   const accountTransactionsRQ = useQuery(
-    ['accountTransactions', network.name, type],
+    [
+      'accountTransactions',
+      type,
+      data.address,
+      pageIndex,
+      pageSize,
+      network.name,
+    ],
     () =>
       type == 'user'
-        ? getAccountTransactions(data)
+        ? getAccountTransactions(data.address, pageIndex, pageSize)
         : getTrustTransactions(data),
     {
       refetchOnMount: false,
@@ -83,7 +94,7 @@ export const TransactionDetails = ({ type, data }) => {
     },
   ];
 
-useEffect(() => {
+  useEffect(() => {
     if (accountTransactionsRQ.data) {
       let _tableData = accountTransactionsRQ.data?.result?.map((txn) => {
         return {
@@ -98,13 +109,41 @@ useEffect(() => {
     }
   }, [accountTransactionsRQ.data]);
 
+  const dynamicPageControls = {
+    canPreviousPage: pageIndex > 0,
+    canNextPage: pageIndex < pageCount - 1,
+    pageCount: pageCount,
+    pageIndex: pageIndex,
+    pageSize: pageSize,
+    gotoPage: (pageIndex) => {
+      setPageIndex(pageIndex);
+    },
+    setPageSize: (pageSize) => {
+      setPageIndex(0);
+      setPageSize(pageSize);
+    },
+  };
 
   return (
     <>
-      {accountTransactionsRQ.isFetching ? (
+      {accountTransactionsRQ.isLoading ? (
         <LoaderDiv />
       ) : (
-        <Table columns={columns} data={tableData || []} />
+        <>
+          <div className={styles.page} style={{ marginBottom: '1rem' }}>
+            <Table
+              columns={columns}
+              data={accountTransactionsRQ.data?.error ? [] : tableData}
+              paginate={false}
+            />
+            <div style={{ marginBottom: '1rem' }}>
+              <DynamicPagination controls={dynamicPageControls} />
+            </div>
+            {accountTransactionsRQ.data?.error && (
+              <ErrorMessage error={accountTransactionsRQ.data.error} />
+            )}
+          </div>
+        </>
       )}
     </>
   );
diff --git a/src/hooks/useNetwork/useNetwork.jsx b/src/hooks/useNetwork/useNetwork.jsx
index c58d604d..95741921 100644
--- a/src/hooks/useNetwork/useNetwork.jsx
+++ b/src/hooks/useNetwork/useNetwork.jsx
@@ -114,21 +114,22 @@ export function useNetwork() {
     return res.data;
   };
 
-  const getTrustTransactions = async (data) => {
+  const getTrustTransactions = async (address) => {
     const res = await axios.get(`${url}/finance/transactions/trust`, {
       params: {
-        address: data?.address,
+        address: address,
         limit: 20,
       },
     });
     return res.data;
   };
 
-  const getAccountTransactions = async (data) => {
+  const getAccountTransactions = async (address, page, limit) => {
     const res = await axios.get(`${url}/finance/transactions/account`, {
       params: {
-        address: data?.address,
-        limit: 20,
+        address: address,
+        page: page,
+        limit: limit,
       },
     });
     return res.data;

From 395582397c234034da6cad9b9e296af53a28659f Mon Sep 17 00:00:00 2001
From: Rayan fernandes <37145078+Rayanfer32@users.noreply.github.com>
Date: Thu, 21 Apr 2022 16:46:09 +0530
Subject: [PATCH 3/4] fix trust transaction

---
 .../TransactionDetails/TransactionDetails.jsx        | 12 ++++++------
 src/hooks/useNetwork/useNetwork.jsx                  |  5 +++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
index 1b412056..79f3b1d7 100644
--- a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
+++ b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
@@ -42,7 +42,7 @@ export const TransactionDetails = ({ type, data }) => {
     () =>
       type == 'user'
         ? getAccountTransactions(data.address, pageIndex, pageSize)
-        : getTrustTransactions(data),
+        : getTrustTransactions(data.address, pageIndex, pageSize),
     {
       refetchOnMount: false,
       refetchOnWindowFocus: false,
@@ -74,19 +74,19 @@ export const TransactionDetails = ({ type, data }) => {
       Header: 'Amount',
       accessor: 'amount',
       Cell: (props) => {
-        let fontColor = 'var(--theme-page-text)';
+        let cellColor = 'var(--theme-page-text)';
         let sign = '+';
         if (
           ['CREDIT', 'CREATE', 'TRUST'].includes(props.row.values.operation)
         ) {
-          fontColor = TYPES.COLORS.MARKET_GREEN;
+          cellColor = TYPES.COLORS.MARKET_GREEN;
           sign = '+';
         } else if (['DEBIT', 'FEE'].includes(props.row.values.operation)) {
-          fontColor = TYPES.COLORS.MARKET_RED;
+          cellColor = TYPES.COLORS.MARKET_RED;
           sign = '-';
         }
         return (
-          <div className={styles.amount} style={{ background: fontColor }}>
+          <div className={styles.amount} style={{ background: cellColor }}>
             {sign} {props.value}
           </div>
         );
@@ -101,7 +101,7 @@ export const TransactionDetails = ({ type, data }) => {
           txid: txn.txid,
           timestamp: txn.timestamp,
           operation: txn.contracts[0].OP,
-          amount: `${txn.contracts[0].amount || 0} ${txn.contracts[0].ticker}`,
+          amount: `${txn.contracts[0].amount || 0} ${txn.contracts[0].ticker || ''}`,
         };
       });
 
diff --git a/src/hooks/useNetwork/useNetwork.jsx b/src/hooks/useNetwork/useNetwork.jsx
index 95741921..ae383856 100644
--- a/src/hooks/useNetwork/useNetwork.jsx
+++ b/src/hooks/useNetwork/useNetwork.jsx
@@ -114,11 +114,12 @@ export function useNetwork() {
     return res.data;
   };
 
-  const getTrustTransactions = async (address) => {
+  const getTrustTransactions = async (address, page, limit) => {
     const res = await axios.get(`${url}/finance/transactions/trust`, {
       params: {
         address: address,
-        limit: 20,
+        page: page,
+        limit: limit,
       },
     });
     return res.data;

From 421c7abc6e07bc24dfd98e930a073ec30e2fa8d3 Mon Sep 17 00:00:00 2001
From: Rayan fernandes <37145078+Rayanfer32@users.noreply.github.com>
Date: Thu, 21 Apr 2022 16:50:25 +0530
Subject: [PATCH 4/4] clean file

---
 .../TransactionDetails/TransactionDetails.jsx | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
index 79f3b1d7..d5ed9bca 100644
--- a/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
+++ b/src/components/UserAccount/TransactionDetails/TransactionDetails.jsx
@@ -101,7 +101,9 @@ export const TransactionDetails = ({ type, data }) => {
           txid: txn.txid,
           timestamp: txn.timestamp,
           operation: txn.contracts[0].OP,
-          amount: `${txn.contracts[0].amount || 0} ${txn.contracts[0].ticker || ''}`,
+          amount: `${txn.contracts[0].amount || 0} ${
+            txn.contracts[0].ticker || ''
+          }`,
         };
       });
 
@@ -124,27 +126,23 @@ export const TransactionDetails = ({ type, data }) => {
     },
   };
 
+  if (accountTransactionsRQ.isLoading) {
+    return <LoaderDiv />;
+  }
+
   return (
-    <>
-      {accountTransactionsRQ.isLoading ? (
-        <LoaderDiv />
-      ) : (
-        <>
-          <div className={styles.page} style={{ marginBottom: '1rem' }}>
-            <Table
-              columns={columns}
-              data={accountTransactionsRQ.data?.error ? [] : tableData}
-              paginate={false}
-            />
-            <div style={{ marginBottom: '1rem' }}>
-              <DynamicPagination controls={dynamicPageControls} />
-            </div>
-            {accountTransactionsRQ.data?.error && (
-              <ErrorMessage error={accountTransactionsRQ.data.error} />
-            )}
-          </div>
-        </>
+    <div className={styles.page} style={{ marginBottom: '1rem' }}>
+      <Table
+        columns={columns}
+        data={accountTransactionsRQ.data?.error ? [] : tableData}
+        paginate={false}
+      />
+      <div style={{ marginBottom: '1rem' }}>
+        <DynamicPagination controls={dynamicPageControls} />
+      </div>
+      {accountTransactionsRQ.data?.error && (
+        <ErrorMessage error={accountTransactionsRQ.data.error} />
       )}
-    </>
+    </div>
   );
 };