chore: transaction history iterations

frontend/src/app/(routes)/transactions/history/SearchTransaction.tsx

@@ -33,6 +33,9 @@ const SearchTransaction = () => {
   const txnResult = useAppSelector(
     (state) => state.recentTransactions.txn?.data?.[0]
   );
+  const txnStatus = useAppSelector(
+    (state) => state.recentTransactions.txn.status
+  );
   const { txHash = '' } = txnResult ? parseTxnData(txnResult) : {};
 
   const [chainID, setChainID] = useState('');
@@ -76,7 +79,7 @@ const SearchTransaction = () => {
           ) : null}
         </>
       )}
-      <TransactionNotFound />
+      {txnStatus === TxStatus.REJECTED ? <TransactionNotFound /> : null}
     </div>
   );
 };

frontend/src/app/(routes)/transactions/history/[network]/[hash]/loading.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import PageLoading from '@/components/common/PageLoading';
 import React from 'react';
+import TransactionLoading from '../../loaders/TransactionLoading';
 
 const loading = () => {
-  return <PageLoading />;
+  return <TransactionLoading />;
 };
 
 export default loading;

frontend/src/app/(routes)/transactions/history/[network]/[hash]/page.tsx

@@ -6,6 +6,8 @@ import Transaction from '../components/Transaction';
 import useGetTransactions from '@/custom-hooks/useGetTransactions';
 import { useAppSelector } from '@/custom-hooks/StateHooks';
 import { RootState } from '@/store/store';
+import { TxStatus } from '@/types/enums';
+import TransactionLoading from '../../loaders/TransactionLoading';
 
 const Page = () => {
   const params = useParams();
@@ -25,22 +27,51 @@ const Page = () => {
   const chainID = nameToChainsIDs[arrChainNames[0]];
 
   const txnHistory = useGetTransactions({ chainID });
+  const txnStatus = useAppSelector(
+    (state) => state.recentTransactions.txn.status
+  );
+  const txnResult = useAppSelector(
+    (state) => state.recentTransactions.txn?.data?.[0]
+  );
 
   useEffect(() => {
     txnHistory.fetchTransaction(paramTxHash[0]);
   }, []);
 
   return (
     <div>
-      {chainID && (
-        <Transaction
-          hash={paramTxHash[0]}
-          chainName={arrChainNames[0]}
-          chainID={chainID}
-        />
+      {txnStatus === TxStatus.PENDING ? (
+        <TransactionLoading />
+      ) : (
+        <>
+          {txnResult && chainID && (
+            <Transaction
+              hash={paramTxHash[0]}
+              chainName={arrChainNames[0]}
+              chainID={chainID}
+            />
+          )}
+        </>
       )}
+      {txnStatus === TxStatus.REJECTED ? <TransactionNotFound /> : null}
     </div>
   );
 };
 
 export default Page;
+
+const TransactionNotFound = () => {
+  const txSearchError = useAppSelector(
+    (state) => state.recentTransactions.txn.error
+  );
+
+  if (txSearchError)
+    return (
+      <div className="w-full my-[25%]">
+        <p className="text-h2 font-bold w-fit mx-auto">
+          Sorry, the transaction you&apos;re looking for is not found.
+        </p>
+      </div>
+    );
+  return <></>;
+};

frontend/src/app/(routes)/transactions/history/[network]/components/Transaction.tsx

@@ -13,6 +13,7 @@ import { buildMessages } from '@/utils/transaction';
 import { txRepeatTransaction } from '@/store/features/recent-transactions/recentTransactionsSlice';
 import DialogLoader from '@/components/common/DialogLoader';
 import { TxStatus } from '@/types/enums';
+import CustomDialog from '@/components/common/CustomDialog';
 
 const Transaction = ({
   chainName,
@@ -44,6 +45,8 @@ const Transaction = ({
   const formattedMessages = messages ? buildMessages(messages) : [];
   const disableAction = formattedMessages.length === 0 || !success;
 
+  const [viewRawOpen, setViewRawOpen] = useState(false);
+
   const onRepeatTxn = () => {
     dispatch(
       txRepeatTransaction({
@@ -63,7 +66,7 @@ const Transaction = ({
     };
   };
 
-  const [expandedIndex, setExpandedIndex] = useState<number | null>(null);
+  const [expandedIndex, setExpandedIndex] = useState<number | null>(0);
 
   const toggleExpand = (index: number) => {
     setExpandedIndex(expandedIndex === index ? null : index);
@@ -117,6 +120,17 @@ const Transaction = ({
                 </div>
               </div>
             </div>
+            <div className="w-full flex justify-between">
+              <div className="text-b1-light">Messages: {msgs?.length}</div>
+              <div>
+                <button
+                  onClick={() => setViewRawOpen(true)}
+                  className="secondary-btn"
+                >
+                  View JSON
+                </button>
+              </div>
+            </div>
             {msgs?.map((msg, mIndex) => (
               <TxMsg
                 key={mIndex}
@@ -168,6 +182,19 @@ const Transaction = ({
         </div>
       </div>
       <DialogLoader open={loading} loadingText="Pending" />
+      <CustomDialog
+        open={viewRawOpen}
+        onClose={() => setViewRawOpen(false)}
+        title="Raw Transaction"
+      >
+        <div className="w-[800px] bg-black h-[400px] max-h-[400px] overflow-y-scroll p-2">
+          {txnResult ? (
+            <pre>{JSON.stringify(txnResult, undefined, 2)}</pre>
+          ) : (
+            <div className="text-center">- No Data -</div>
+          )}
+        </div>
+      </CustomDialog>
     </div>
   );
 };

frontend/src/app/(routes)/transactions/history/[network]/components/TransactionHistoryDashboard.tsx

@@ -10,10 +10,12 @@ import { TxStatus } from '@/types/enums';
 import { Pagination } from '@mui/material';
 import { paginationComponentStyles } from '@/utils/commonStyles';
 import TxnsLoading from '../../loaders/TxnsLoading';
+import useInitTransactions from '@/custom-hooks/useInitTransactions';
 
 const ITEMS_PER_PAGE = 5;
 
 const TransactionHistoryDashboard = ({ chainID }: { chainID: string }) => {
+  useInitTransactions({chainID})
   const { getChainInfo, getDenomInfo } = useGetChainInfo();
   const { displayDenom, decimals, minimalDenom } = getDenomInfo(chainID);
   const basicChainInfo = getChainInfo(chainID);

frontend/src/app/(routes)/transactions/history/loaders/TransactionLoading.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+const TransactionLoading = () => {
+  return (
+    <div className="space-y-6 mt-10">
+      <TransactionHeader />
+      <div className="flex gap-10 w-full">
+        <div className="flex-1 flex w-full">
+          <div className="flex flex-col gap-6 w-full">
+            <div className="grid grid-cols-2 gap-6">
+              <div className="h-[90px] w-[352px] shimmer rounded-lg">
+                <div className="flex flex-col items-center gap-4 w-full shimmer rounded-lg">
+                  <p className="shimmer-line"></p>
+                  <div className="shimmer-line"></div>
+                </div>
+              </div>
+              <div className="h-[90px] w-[352px] shimmer rounded-lg">
+                <div className="flex flex-col items-center gap-4 w-full shimmer rounded-lg">
+                  <p className="shimmer-line"></p>
+                  <div className="shimmer-line"></div>
+                </div>
+              </div>
+            </div>
+            {Array(4)
+              .fill(null)
+              .map((index) => (
+                <div
+                  key={index}
+                  className="flex justify-between px-6 w-full pb-4 shimmer rounded-lg"
+                >
+                  <div className="flex flex-col gap-2 shimmer rounded">
+                    <p className="shimmer-line"></p>
+                    <span className="shimmer-line"></span>
+                  </div>
+                  <div className="flex flex-col gap-2 shimmer rounded">
+                    <p className="shimmer-line"></p>
+                    <div className="shimmer-line"></div>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-10">
+          {Array(3)
+            .fill(null)
+            .map((index) => (
+              <div
+                key={index}
+                className="h-[90px] w-[352px] shimmer rounded-lg"
+              >
+                <div className="flex flex-col items-center gap-4 w-full shimmer rounded-lg">
+                  <p className="shimmer-line"></p>
+                  <div className="shimmer-line"></div>
+                </div>
+              </div>
+            ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TransactionLoading;
+
+const TransactionHeader = () => {
+  return (
+    <div className="space-y-4">
+      <div className="shimmer rounded w-12 h-5 mb-8"></div>
+      <div className="flex items-center gap-2">
+        <div className="shimmer rounded-full w-6 h-6"></div>
+        <div className="shimmer rounded w-[200px] h-6"></div>
+      </div>
+      <div className="divider-line"></div>
+    </div>
+  );
+};

frontend/src/app/globals.css

@@ -213,7 +213,8 @@ input[type='checkbox'] {
   @apply flex flex-col items-start gap-4 w-full p-10;
   background: rgba(255, 255, 255, 0.02);
 }
-.profile-grid, .txn-data {
+.profile-grid,
+.txn-data {
   @apply flex flex-col justify-center items-center gap-2 p-4 rounded-2xl;
   background: rgba(255, 255, 255, 0.02);
 }
@@ -242,6 +243,13 @@ input[type='checkbox'] {
   @apply flex justify-center items-center gap-4 px-4 py-2 rounded-lg border-[0.25px] hover:bg-[#ffffff14] hover:border-transparent;
 }
 
+.shimmer {
+  @apply bg-[#252525] animate-pulse;
+}
+
+.shimmer-line {
+  @apply bg-[#252525] animate-pulse rounded h-5;
+}
 
 /* TransactionHistory */
 .search-Txn-input {

frontend/src/custom-hooks/useGetTransactions.ts

@@ -1,23 +1,15 @@
-import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from './StateHooks';
-import { getAllTransactions, getTransaction } from '@/store/features/recent-transactions/recentTransactionsSlice';
+import {
+  getAllTransactions,
+  getTransaction,
+} from '@/store/features/recent-transactions/recentTransactionsSlice';
 import useGetChainInfo from './useGetChainInfo';
 
 const useGetTransactions = ({ chainID }: { chainID: string }) => {
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
   const { address } = getChainInfo(chainID);
   const txns = useAppSelector((state) => state.recentTransactions.txns.data);
-  useEffect(() => {
-    dispatch(
-      getAllTransactions({
-        address,
-        chainID,
-        limit: 5,
-        offset: 0,
-      })
-    );
-  }, []);
   const getTransactions = () => {
     return {
       txns,
@@ -36,13 +28,15 @@ const useGetTransactions = ({ chainID }: { chainID: string }) => {
   };
 
   const fetchTransaction = (txhash: string) => {
-    dispatch(
-      getTransaction({
-        address,
-        chainID,
-        txhash,
-      })
-    );
+    if (chainID) {
+      dispatch(
+        getTransaction({
+          address,
+          chainID,
+          txhash,
+        })
+      );
+    }
   };
 
   return { getTransactions, fetchTransactions, fetchTransaction };

frontend/src/custom-hooks/useInitTransactions.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useAppDispatch } from './StateHooks';
+import { getAllTransactions } from '@/store/features/recent-transactions/recentTransactionsSlice';
+import useGetChainInfo from './useGetChainInfo';
+
+const useInitTransactions = ({ chainID }: { chainID: string }) => {
+  const dispatch = useAppDispatch();
+  const { getChainInfo } = useGetChainInfo();
+  const { address } = getChainInfo(chainID);
+  useEffect(() => {
+    if (chainID) {
+      dispatch(
+        getAllTransactions({
+          address,
+          chainID,
+          limit: 5,
+          offset: 0,
+        })
+      );
+    }
+  }, [chainID]);
+};
+
+export default useInitTransactions;