From 5bea876bb5470f99511cb52f490c3a201696d86e Mon Sep 17 00:00:00 2001
From: Binarybaron <binarybaron@protonmail.com>
Date: Wed, 13 Nov 2024 15:34:27 +0100
Subject: [PATCH] refactor, add approx symbol to humanized bitcoin duration

---
 .../SwapStatusAlert/TimelockTimeline.tsx      | 265 +++++++++---------
 .../other/HumanizedBitcoinBlockDuration.tsx   |   2 +-
 2 files changed, 138 insertions(+), 129 deletions(-)

diff --git a/src-gui/src/renderer/components/alert/SwapStatusAlert/TimelockTimeline.tsx b/src-gui/src/renderer/components/alert/SwapStatusAlert/TimelockTimeline.tsx
index dd12a32a4..6268c3ccf 100644
--- a/src-gui/src/renderer/components/alert/SwapStatusAlert/TimelockTimeline.tsx
+++ b/src-gui/src/renderer/components/alert/SwapStatusAlert/TimelockTimeline.tsx
@@ -8,160 +8,169 @@ interface TimelineSegment {
     label: string;
     bgcolor: string;
     startBlock: number;
-  }
-  
-  interface TimelineSegmentProps {
+}
+
+interface TimelineSegmentProps {
     segment: TimelineSegment;
     isActive: boolean;
     absoluteBlock: number;
     durationOfSegment: number | null;
     totalBlocks: number;
-  }
-  
-  function TimelineSegment({ 
-    segment, 
-    isActive, 
-    absoluteBlock, 
+}
+
+function TimelineSegment({
+    segment,
+    isActive,
+    absoluteBlock,
     durationOfSegment,
-    totalBlocks 
-  }: TimelineSegmentProps) {
+    totalBlocks
+}: TimelineSegmentProps) {
     const theme = useTheme();
-  
+
     return (
-      <Tooltip title={<Typography variant="caption">{segment.title}</Typography>}>
-        <Box sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          bgcolor: segment.bgcolor,
-          width: `${durationOfSegment ? ((durationOfSegment / totalBlocks) * 85) : 15}%`,
-          position: 'relative',
-        }} style={{
-          opacity: isActive ? 1 : 0.3
-        }}>
-          {isActive && (
+        <Tooltip title={<Typography variant="caption">{segment.title}</Typography>}>
             <Box sx={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              height: '100%',
-              width: `${Math.max(5, ((absoluteBlock - segment.startBlock) / durationOfSegment) * 100)}%`,
-              zIndex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                bgcolor: segment.bgcolor,
+                width: `${durationOfSegment ? ((durationOfSegment / totalBlocks) * 85) : 15}%`,
+                position: 'relative',
+            }} style={{
+                opacity: isActive ? 1 : 0.3
             }}>
-              <LinearProgress
-                variant="indeterminate"
-                color="primary"
-                style={{
-                  height: '100%',
-                  backgroundColor: theme.palette.primary.dark,
-                  opacity: 0.3,
-                }}
-              />
+                {isActive && (
+                    <Box sx={{
+                        position: 'absolute',
+                        top: 0,
+                        left: 0,
+                        height: '100%',
+                        width: `${Math.max(5, ((absoluteBlock - segment.startBlock) / durationOfSegment) * 100)}%`,
+                        zIndex: 1,
+                    }}>
+                        <LinearProgress
+                            variant="indeterminate"
+                            color="primary"
+                            style={{
+                                height: '100%',
+                                backgroundColor: theme.palette.primary.dark,
+                                opacity: 0.3,
+                            }}
+                        />
+                    </Box>
+                )}
+                <Typography variant="subtitle2" color="inherit" align="center" style={{ zIndex: 2 }}>
+                    {segment.label}
+                </Typography>
+                {durationOfSegment && (
+                    <Typography
+                        variant="caption"
+                        color="inherit"
+                        align="center"
+                        style={{
+                            zIndex: 2,
+                            opacity: 0.8
+                        }}
+                    >
+                        {isActive && (
+                            <>
+                                <HumanizedBitcoinBlockDuration
+                                    blocks={durationOfSegment - (absoluteBlock - segment.startBlock)}
+                                />{" "}left
+                            </>
+                        )}
+                        {!isActive && (
+                            <HumanizedBitcoinBlockDuration
+                                blocks={durationOfSegment}
+                            />
+                        )}
+                    </Typography>
+                )}
             </Box>
-          )}
-          <Typography variant="subtitle2" color="inherit" align="center" style={{ zIndex: 2 }}>
-            {segment.label}
-          </Typography>
-          {durationOfSegment && (
-            <Typography 
-              variant="caption" 
-              color="inherit" 
-              align="center" 
-              style={{ 
-                zIndex: 2,
-                opacity: 0.8 
-              }}
-            >
-              <HumanizedBitcoinBlockDuration 
-                blocks={durationOfSegment} 
-              />
-            </Typography>
-          )}
-        </Box>
-      </Tooltip>
+        </Tooltip>
     );
-  }
-  
-  export function TimelockTimeline({ swap }: { 
+}
+
+export function TimelockTimeline({ swap }: {
     // This forces the timelock to not be null
     swap: GetSwapInfoResponseExt & { timelock: ExpiredTimelocks }
-  }) {
+}) {
     const theme = useTheme();
-  
+
     const timelineSegments: TimelineSegment[] = [
-      {
-        title: "Normally a swap is completed during this period",
-        label: "Normal",
-        bgcolor: theme.palette.success.main,
-        startBlock: 0,
-      },
-      {
-        title: "If the swap hasn't been completed before we reach this period, the Bitcoin will be refunded. You need to have the GUI running for it to be refunded",
-        label: "Refund",
-        bgcolor: theme.palette.warning.main,
-        startBlock: swap.cancel_timelock,
-      },
-      {
-        title: "If you were offline during the entire refund window, you will enter this period. At this point, the Bitcoin can no longer be refunded. While it may be possible to redeem the Monero with cooperation from the other party, this cannot be guaranteed.",
-        label: "Danger",
-        bgcolor: theme.palette.error.main,
-        startBlock: swap.cancel_timelock + swap.punish_timelock,
-      }
+        {
+            title: "Normally a swap is completed during this period",
+            label: "Normal",
+            bgcolor: theme.palette.success.main,
+            startBlock: 0,
+        },
+        {
+            title: "If the swap hasn't been completed before we reach this period, the Bitcoin will be refunded. You need to have the GUI running for it to be refunded",
+            label: "Refund",
+            bgcolor: theme.palette.warning.main,
+            startBlock: swap.cancel_timelock,
+        },
+        {
+            title: "If you were offline during the entire refund window, you will enter this period. At this point, the Bitcoin can no longer be refunded. While it may be possible to redeem the Monero with cooperation from the other party, this cannot be guaranteed.",
+            label: "Danger",
+            bgcolor: theme.palette.error.main,
+            startBlock: swap.cancel_timelock + swap.punish_timelock,
+        }
     ];
-  
+
     const totalBlocks = swap.cancel_timelock + swap.punish_timelock;
     const absoluteBlock = getAbsoluteBlock(swap.timelock, swap.cancel_timelock, swap.punish_timelock);
-  
+
     // This calculates the duration of a segment
     // by getting the the difference to the next segment
     function durationOfSegment(index: number): number | null {
-      const nextSegment = timelineSegments[index + 1];
-      if (nextSegment == null) {
-        return null;
-      }
-      return nextSegment.startBlock - timelineSegments[index].startBlock;
+        const nextSegment = timelineSegments[index + 1];
+        if (nextSegment == null) {
+            return null;
+        }
+        return nextSegment.startBlock - timelineSegments[index].startBlock;
     }
-  
+
     // This function returns the index of the active segment based on the current block
     // We iterate in reverse to find the first segment that has a start block less than the current block
     function getActiveSegmentIndex() {
-      return Array.from(timelineSegments
-        .slice()
-        // We use .entries() to keep the indexes despite reversing
-        .entries())
-        .reverse()
-        .find(([_, segment]) => absoluteBlock >= segment.startBlock)?.[0] ?? 0;
+        return Array.from(timelineSegments
+            .slice()
+            // We use .entries() to keep the indexes despite reversing
+            .entries())
+            .reverse()
+            .find(([_, segment]) => absoluteBlock >= segment.startBlock)?.[0] ?? 0;
     }
-  
+
     return (
-      <Box sx={{ 
-        width: '100%', 
-        minWidth: '100%',
-        flexGrow: 1
-      }}>
-        <Paper style={{ 
-          position: 'relative',
-          height: '4rem',
-          overflow: 'hidden',
-        }} elevation={3} variant="outlined">
-          <Box sx={{ 
-            position: 'relative',
-            height: '100%',
-            display: 'flex'
-          }}>
-            {timelineSegments.map((segment, index) => (
-              <TimelineSegment
-                key={index}
-                segment={segment}
-                isActive={getActiveSegmentIndex() === index}
-                absoluteBlock={absoluteBlock}
-                durationOfSegment={durationOfSegment(index)}
-                totalBlocks={totalBlocks}
-              />
-            ))}
-          </Box>
-        </Paper>
-      </Box>
+        <Box sx={{
+            width: '100%',
+            minWidth: '100%',
+            flexGrow: 1
+        }}>
+            <Paper style={{
+                position: 'relative',
+                height: '4rem',
+                overflow: 'hidden',
+            }} elevation={3} variant="outlined">
+                <Box sx={{
+                    position: 'relative',
+                    height: '100%',
+                    display: 'flex'
+                }}>
+                    {timelineSegments.map((segment, index) => (
+                        <TimelineSegment
+                            key={index}
+                            segment={segment}
+                            isActive={getActiveSegmentIndex() === index}
+                            absoluteBlock={absoluteBlock}
+                            durationOfSegment={durationOfSegment(index)}
+                            totalBlocks={totalBlocks}
+                        />
+                    ))}
+                </Box>
+            </Paper>
+        </Box>
     );
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src-gui/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx b/src-gui/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx
index c0d226e9c..70ac88432 100644
--- a/src-gui/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx
+++ b/src-gui/src/renderer/components/other/HumanizedBitcoinBlockDuration.tsx
@@ -9,7 +9,7 @@ export default function HumanizedBitcoinBlockDuration({
 }) {
   return (
     <>
-      {`${humanizeDuration(blocks * AVG_BLOCK_TIME_MS, {
+      {`≈ ${humanizeDuration(blocks * AVG_BLOCK_TIME_MS, {
         conjunction: " and ",
       })} (${blocks} blocks)`}
     </>