add timer on tx detail page

shutter-network · Nov 7, 2024 · 86a76a1 · 86a76a1
1 parent a2f1ed8
commit 86a76a1
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 19 deletions.
diff --git a/frontend/src/components/RefreshContainer.tsx b/frontend/src/components/RefreshContainer.tsx
@@ -4,11 +4,12 @@ import { RefreshContainerHolder } from 'styles/refreshCard';
 
 interface RefreshContainerProps {
     time: string;
+    style?: React.CSSProperties;
 }
 
-const RefreshContainer: FC<RefreshContainerProps> = ({ time }) => {
+const RefreshContainer: FC<RefreshContainerProps> = ({ time, style }) => {
     return (
-        <RefreshContainerHolder>
+        <RefreshContainerHolder style={style}>
             <UpdIcon />
             <span style={{ marginLeft: "3px", color: "#0044A4" }}>{time}</span>
         </RefreshContainerHolder>

diff --git a/frontend/src/pages/Slot.tsx b/frontend/src/pages/Slot.tsx
@@ -112,7 +112,6 @@ const Slot = () => {
     useEffect(() => {
         const interval = setInterval(() => {
             setTimeAgo(prevSeconds => prevSeconds + 1);
-            console.log("slot overview called", timeAgo)
         }, 1000);
         return () => clearInterval(interval);
     }, [timeAgo]);
@@ -145,7 +144,7 @@ const Slot = () => {
                             <Alert severity="error">Error fetching sequencer transactions: {errorSequencer.message}</Alert>
                         ) : (
                             <>
-                                <div style={{ display: "flex" }}>
+                                <div style={{ display: "flex", alignItems: "center" }}>
                                     <Typography variant="h5" align='left' sx={{ fontWeight: 'bold' }} color='black' style={{ marginRight: "10px" }} >Sequencer Transactions</Typography>
                                     <RefreshContainer time={getTimeDiff(seqStartTime, timeAgo)} />
                                 </div>
@@ -162,8 +161,8 @@ const Slot = () => {
                             <Alert severity="error">Error fetching user transactions: {errorUser.message}</Alert>
                         ) : (
                             <>
-                                <div style={{ display: "flex" }}>
-                                    <Typography variant="h5" align='left' sx={{ fontWeight: 'bold' }} color='black' >Shielded User Transactions</Typography>
+                                <div style={{ display: "flex", alignItems: "center" }}>
+                                    <Typography variant="h5" align='left' sx={{ fontWeight: 'bold' }} color='black' style={{ marginRight: "10px" }} >Shielded User Transactions</Typography>
                                     <RefreshContainer time={getTimeDiff(userStartTime, timeAgo)} />
                                 </div>
                                 {loadingUser ? (

diff --git a/frontend/src/pages/Transaction.tsx b/frontend/src/pages/Transaction.tsx
@@ -5,10 +5,11 @@ import { FC, useState, useEffect } from "react";
 import useFetchWithPolling from '../hooks/useFetchWithPolling';
 import { StyledTransactionDetails } from '../styles/transactionDetail';
 import TitleSection from "../components/TitleSection";
-import { formatSeconds, formatTimestamp } from '../utils/utils';
+import { formatSeconds, formatTimestamp, getTimeDiff } from '../utils/utils';
 import { ReactComponent as InfoIcon } from '../assets/icons/info.svg';
 import { useParams } from 'react-router-dom';
 import LinkIcon from '@mui/icons-material/Link';
+import RefreshContainer from 'components/RefreshContainer';
 
 interface TransactionDetails {
     TxStatus: string;
@@ -26,7 +27,8 @@ const Transaction: FC = () => {
     let { txHash } = useParams();
     const [transaction, setTransaction] = useState<TransactionDetails | null>(null);
     const { data: updatedData, loading, error, setStopPolling } = useFetchWithPolling(`/api/transaction/${txHash}`, 10000);
-
+    const [timeAgo, setTimeAgo] = useState(Math.floor(Date.now() / 1000));
+    const [startTime, setStartTime] = useState(Math.floor(Date.now() / 1000));
 
     const statusesWithBlockNumber = ['Shielded inclusion', "Unshielded inclusion"];
     const statusesWithEffectiveInclusionTime = ['Shielded inclusion', 'Unshielded inclusion']
@@ -36,15 +38,25 @@ const Transaction: FC = () => {
         const finalisedStatuses = ['Shielded inclusion', 'Unshielded inclusion', 'Invalid', 'Not included', 'Cannot be decrypted']
 
         if (updatedData) {
+            let newData = updatedData.message as TransactionDetails
+            if (newData && newData.TxStatus != transaction?.TxStatus) {
+                setStartTime(Math.floor(Date.now() / 1000));
+            }
             setTransaction(updatedData.message as TransactionDetails);
-            if (transaction? finalisedStatuses.includes(transaction.TxStatus): false){
+            if (transaction ? finalisedStatuses.includes(transaction.TxStatus) : false) {
                 setStopPolling(true)
             }
         } else {
             setTransaction(null)
         }
     }, [updatedData, setStopPolling, transaction]);
 
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTimeAgo(prevSeconds => prevSeconds + 1);
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [timeAgo]);
 
     if (!transaction) {
         return (
@@ -57,7 +69,10 @@ const Transaction: FC = () => {
     return (
         <ResponsiveLayout>
             <StyledTransactionDetails>
-                <TitleSection title="Transaction Details" />
+                <div className='tx-detail-hldr'>
+                    <TitleSection title="Transaction Details" />
+                    <RefreshContainer time={getTimeDiff(startTime, timeAgo)} style={{ marginTop: "100px", marginLeft: "10px" }} />
+                </div>
                 <Grid container spacing={2} sx={{ marginTop: 4 }}>
                     {/* Transaction Hash */}
                     <Grid size={{ xs: 'auto', sm: 4 }}>
@@ -216,7 +231,7 @@ const Transaction: FC = () => {
                     <Grid container spacing={1}>
                         <Grid>
                             <Typography variant="body1" className={`tx-status status-${transaction.TxStatus.replace(/\s+/g, "-")}`}>
-                            {transaction.TxStatus === 'Not included' ? 'INCLUSION TIMEOUT EXPIRED' : transaction.TxStatus.toUpperCase()}
+                                {transaction.TxStatus === 'Not included' ? 'INCLUSION TIMEOUT EXPIRED' : transaction.TxStatus.toUpperCase()}
                             </Typography>
                         </Grid>
                         {transaction.TxStatus === 'Not included' && (
@@ -225,14 +240,14 @@ const Transaction: FC = () => {
                                     (Please check for inclusion directly on the Gnosis Explorer)
                                 </Typography>
                             </Grid>
-                            <Grid>
-                                <Link target="_blank" href={`${explorerUrl}/tx/${transaction.UserTxHash}`}>
-                                    <LinkIcon color='primary'/>
-                                </Link>
-                            </Grid> 
+                                <Grid>
+                                    <Link target="_blank" href={`${explorerUrl}/tx/${transaction.UserTxHash}`}>
+                                        <LinkIcon color='primary' />
+                                    </Link>
+                                </Grid>
                             </>
                         )}
-                        </Grid>
+                    </Grid>
 
                     <Grid size={{ lg: 12 }} sx={{ display: { xs: 'none', sm: 'none', md: 'none', lg: 'block' }, }}>
                         <Divider></Divider>

diff --git a/frontend/src/styles/refreshCard.ts b/frontend/src/styles/refreshCard.ts
@@ -8,5 +8,6 @@ export const RefreshContainerHolder = styled.div.attrs({
     background-color: #E4E9F0;
     border-radius: 100px;
     display:flex;
-    align-items: center
+    align-items: center;
+    height: fit-content;
   `;
diff --git a/frontend/src/styles/transactionDetail.ts b/frontend/src/styles/transactionDetail.ts
@@ -96,6 +96,12 @@ export const StyledTransactionDetails = styled(Box).attrs({
     fill: green;
   }
 
+  .tx-detail-hldr{
+    display:flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+  }
+
   @media (max-width: 991px) {
     .detail-row {
       flex-direction: column;
@@ -106,4 +112,11 @@ export const StyledTransactionDetails = styled(Box).attrs({
       margin-bottom: 4px;
     }
   }
+
+  @media (max-width: 768px) {
+    .tx-detail-hldr {
+      flex-direction: column;
+      align-items: center;
+    }
+  }
 `;
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
@@ -139,7 +139,6 @@ export const formatTime = (seconds: number | undefined): string => {
 export const getTimeDiff = (startTime: number, timestamp: number): string => {
   const diff = timestamp - startTime
 
-  console.log("diff", diff)
   if (diff < 60) {
     return `< 1M AGO`;
   }