From 82ae58dc1877bed99323d688e19aa82942693654 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Thu, 27 Nov 2025 16:34:31 +0000
Subject: [PATCH 01/10] feat: add stamp TTL

---
 src/app/components/SwapComponent.tsx         |  51 ++++++++
 src/app/components/TTLDisplay.tsx            |  56 +++++++++
 src/app/components/constants.ts              |  39 ++++++
 src/app/components/css/TTLDisplay.module.css | 100 +++++++++++++++
 src/app/components/utils.ts                  | 123 +++++++++++++++++++
 5 files changed, 369 insertions(+)
 create mode 100644 src/app/components/TTLDisplay.tsx
 create mode 100644 src/app/components/css/TTLDisplay.module.css

diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 0e95985..fd9ca18 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -38,6 +38,7 @@ import SearchableChainDropdown from './SearchableChainDropdown';
 import SearchableTokenDropdown from './SearchableTokenDropdown';
 import StorageStampsDropdown from './StorageStampsDropdown';
 import StorageDurationDropdown from './StorageDurationDropdown';
+import TTLDisplay from './TTLDisplay';
 
 import {
   formatErrorMessage,
@@ -50,6 +51,7 @@ import {
   // handleExchangeRateUpdate removed - was only used by LiFi
   fetchCurrentPriceFromOracle,
   fetchStampInfo,
+  fetchBatchInfoFromContract,
   formatExpiryTime,
   isExpiringSoon,
   getStampUsage,
@@ -227,6 +229,15 @@ const SwapComponent: React.FC = () => {
   // Add state for original stamp info (used in top-ups)
   const [originalStampInfo, setOriginalStampInfo] = useState<StampInfo | null>(null);
 
+  // Add state for batch info from contract (TTL and balance)
+  const [contractBatchInfo, setContractBatchInfo] = useState<{
+    ttlSeconds: number;
+    remainingBalance: string;
+  } | null>(null);
+
+  // Add state for TTL display flashing animation
+  const [isTTLFlashing, setIsTTLFlashing] = useState(false);
+
   // Add a ref to track the current wallet client
   const currentWalletClientRef = useRef(walletClient);
 
@@ -1554,6 +1565,7 @@ const SwapComponent: React.FC = () => {
     // Only fetch if we have a topUpBatchId and we're in top-up mode
     if (topUpBatchId && isTopUp) {
       const getStampInfo = async () => {
+        // Fetch from Bee API for depth info
         const stampInfo = await fetchStampInfoForComponent(topUpBatchId);
         if (stampInfo) {
           console.log('Fetched original stamp info:', stampInfo);
@@ -1568,12 +1580,43 @@ const SwapComponent: React.FC = () => {
             swarmBatchDepth: stampInfo.depth.toString(),
           }));
         }
+
+        // Fetch TTL and balance from contract
+        const batchInfo = await fetchBatchInfoFromContract(topUpBatchId);
+        if (batchInfo) {
+          console.log('Fetched contract batch info:', batchInfo);
+          setContractBatchInfo(batchInfo);
+        }
       };
 
       getStampInfo();
     }
   }, [topUpBatchId, isTopUp, fetchStampInfoForComponent]);
 
+  // Add this effect to refresh stamp info periodically (every 60 seconds)
+  useEffect(() => {
+    if (!topUpBatchId || !isTopUp) return;
+
+    const refreshStampInfo = async () => {
+      // Flash before refreshing
+      setIsTTLFlashing(true);
+      setTimeout(() => setIsTTLFlashing(false), 600); // Match flash animation duration
+
+      // Fetch updated TTL and balance from contract
+      const batchInfo = await fetchBatchInfoFromContract(topUpBatchId);
+      if (batchInfo) {
+        console.log('Refreshed contract batch info:', batchInfo);
+        setContractBatchInfo(batchInfo);
+      }
+    };
+
+    // Set up interval to refresh every 60 seconds
+    const intervalId = setInterval(refreshStampInfo, 60000);
+
+    // Clean up interval on unmount
+    return () => clearInterval(intervalId);
+  }, [topUpBatchId, isTopUp]);
+
   // Calculate amount for topping up an existing batch
   const calculateTopUpAmount = (originalDepth: number) => {
     if (currentPrice === null || !selectedDays) return 0n;
@@ -1710,6 +1753,14 @@ const SwapComponent: React.FC = () => {
             </div>
           )}
 
+          {isTopUp && contractBatchInfo && (
+            <TTLDisplay
+              ttlSeconds={contractBatchInfo.ttlSeconds}
+              stampValue={contractBatchInfo.remainingBalance}
+              isFlashing={isTTLFlashing}
+            />
+          )}
+
           <div className={styles.inputGroup}>
             <label
               className={styles.label}
diff --git a/src/app/components/TTLDisplay.tsx b/src/app/components/TTLDisplay.tsx
new file mode 100644
index 0000000..f7cc1d4
--- /dev/null
+++ b/src/app/components/TTLDisplay.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { formatDetailedTTL } from './utils';
+import styles from './css/TTLDisplay.module.css';
+
+interface TTLDisplayProps {
+  ttlSeconds: number;
+  stampValue: string; // The amount/balance of the stamp
+  isFlashing?: boolean;
+}
+
+const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, isFlashing = false }) => {
+  // Format TTL for detailed display
+  const formattedTTL = formatDetailedTTL(ttlSeconds);
+
+  // Format TTL for technical display (seconds or minutes)
+  const formatTechnicalTTL = (seconds: number): string => {
+    if (seconds > 100000) {
+      const minutes = Math.floor(seconds / 60);
+      return `${minutes.toLocaleString()} minutes`;
+    }
+    return `${seconds.toLocaleString()} seconds`;
+  };
+
+  const technicalTTL = formatTechnicalTTL(ttlSeconds);
+
+  // Format stamp value in BZZ (convert from PLUR to BZZ)
+  const formatStampValue = (amount: string): string => {
+    try {
+      const amountBigInt = BigInt(amount);
+      const bzz = Number(amountBigInt) / 1e16; // Convert PLUR to BZZ
+      return bzz.toFixed(4);
+    } catch (error) {
+      return '0.0000';
+    }
+  };
+
+  const bzzValue = formatStampValue(stampValue);
+
+  return (
+    <div className={`${styles.ttlContainer} ${isFlashing ? styles.flashing : ''}`}>
+      {/* Label */}
+      <div className={styles.label}>TTL</div>
+
+      {/* Main TTL Display - prominent in the middle */}
+      <div className={styles.mainTTL}>{formattedTTL}</div>
+
+      {/* Details Row */}
+      <div className={styles.detailsRow}>
+        <div className={styles.leftDetail}>SVL: {bzzValue} BZZ</div>
+        <div className={styles.rightDetail}>TTL: {technicalTTL}</div>
+      </div>
+    </div>
+  );
+};
+
+export default TTLDisplay;
diff --git a/src/app/components/constants.ts b/src/app/components/constants.ts
index 094407d..5c5b697 100644
--- a/src/app/components/constants.ts
+++ b/src/app/components/constants.ts
@@ -205,6 +205,45 @@ export const GNOSIS_PRICE_ORACLE_ABI = [
   },
 ] as const;
 
+// PostageStamp contract ABI for querying batch information
+export const POSTAGE_STAMP_ABI = [
+  {
+    name: 'remainingBalance',
+    type: 'function',
+    stateMutability: 'view',
+    inputs: [{ name: '_batchId', type: 'bytes32' }],
+    outputs: [{ type: 'uint256' }],
+  },
+  {
+    name: 'batchNormalisedBalance',
+    type: 'function',
+    stateMutability: 'view',
+    inputs: [{ name: '_batchId', type: 'bytes32' }],
+    outputs: [{ type: 'uint256' }],
+  },
+  {
+    name: 'currentTotalOutPayment',
+    type: 'function',
+    stateMutability: 'view',
+    inputs: [],
+    outputs: [{ type: 'uint256' }],
+  },
+  {
+    name: 'lastPrice',
+    type: 'function',
+    stateMutability: 'view',
+    inputs: [],
+    outputs: [{ type: 'uint64' }],
+  },
+  {
+    name: 'batchDepth',
+    type: 'function',
+    stateMutability: 'view',
+    inputs: [{ name: '_batchId', type: 'bytes32' }],
+    outputs: [{ type: 'uint8' }],
+  },
+] as const;
+
 // Sushiswap V3 Pool ABI (minimal for price)
 export const V3_POOL_ABI = [
   {
diff --git a/src/app/components/css/TTLDisplay.module.css b/src/app/components/css/TTLDisplay.module.css
new file mode 100644
index 0000000..2c03c65
--- /dev/null
+++ b/src/app/components/css/TTLDisplay.module.css
@@ -0,0 +1,100 @@
+.ttlContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  margin: 20px auto;
+  max-width: 600px;
+  /* No background or outline as requested */
+  transition: opacity 0.3s ease;
+  user-select: none;
+}
+
+.label {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 10px;
+  font-weight: 500;
+}
+
+.mainTTL {
+  font-size: 2.5rem;
+  font-weight: 600;
+  color: #fbba00; /* Swarm/BZZ yellow color - matching PriceTracker */
+  text-align: center;
+  margin-bottom: 15px;
+  line-height: 1.2;
+}
+
+.detailsRow {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 500px;
+  gap: 20px;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.leftDetail {
+  text-align: left;
+  flex: 1;
+  color: #42b883; /* Green shade for stamp value - matching PriceTracker liquidity color */
+  font-weight: 500;
+}
+
+.rightDetail {
+  text-align: right;
+  flex: 1;
+  color: #17a2b8; /* Blue shade for technical TTL - matching PriceTracker depth color */
+  font-weight: 500;
+}
+
+/* Flash animation before refresh */
+.flashing {
+  animation: ttlFlash 0.6s ease-in-out;
+}
+
+@keyframes ttlFlash {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* Responsive design for smaller screens */
+@media (max-width: 768px) {
+  .mainTTL {
+    font-size: 2rem;
+  }
+
+  .detailsRow {
+    font-size: 0.75rem;
+    gap: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .mainTTL {
+    font-size: 1.5rem;
+  }
+
+  .detailsRow {
+    flex-direction: column;
+    gap: 5px;
+    text-align: center;
+  }
+
+  .leftDetail,
+  .rightDetail {
+    text-align: center;
+  }
+}
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index 12935d7..5853c3c 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -475,6 +475,129 @@ export const isExpiryWarning = (ttlSeconds: number): boolean => {
   return ttlSeconds <= 259200 && ttlSeconds > 86400; // 3 days but more than 1 day
 };
 
+/**
+ * Format TTL in detailed human-readable format showing two most significant units
+ * Examples: "1 week 3 days", "2 days 1 hr", "3 hrs 45 mins"
+ */
+export const formatDetailedTTL = (ttlSeconds: number): string => {
+  if (ttlSeconds <= 0) {
+    return 'Expired';
+  }
+
+  const weeks = Math.floor(ttlSeconds / 604800); // 7 days
+  const days = Math.floor((ttlSeconds % 604800) / 86400);
+  const hours = Math.floor((ttlSeconds % 86400) / 3600);
+  const minutes = Math.floor((ttlSeconds % 3600) / 60);
+
+  // Show two most significant units
+  if (weeks > 0) {
+    if (days > 0) {
+      return `${weeks} week${weeks === 1 ? '' : 's'} ${days} day${days === 1 ? '' : 's'}`;
+    }
+    return `${weeks} week${weeks === 1 ? '' : 's'}`;
+  } else if (days > 0) {
+    if (hours > 0) {
+      return `${days} day${days === 1 ? '' : 's'} ${hours} hr${hours === 1 ? '' : 's'}`;
+    }
+    return `${days} day${days === 1 ? '' : 's'}`;
+  } else if (hours > 0) {
+    if (minutes > 0) {
+      return `${hours} hr${hours === 1 ? '' : 's'} ${minutes} min${minutes === 1 ? '' : 's'}`;
+    }
+    return `${hours} hr${hours === 1 ? '' : 's'}`;
+  } else if (minutes > 0) {
+    return `${minutes} min${minutes === 1 ? '' : 's'}`;
+  } else {
+    return 'Less than 1 minute';
+  }
+};
+
+/**
+ * Query batch information from PostageStamp contract on Gnosis Chain
+ * @param batchId The batch ID (with or without 0x prefix)
+ * @returns Object containing TTL in seconds and remaining balance in BZZ
+ */
+export const fetchBatchInfoFromContract = async (
+  batchId: string
+): Promise<{ ttlSeconds: number; remainingBalance: string } | null> => {
+  try {
+    const { GNOSIS_STAMP_ADDRESS, POSTAGE_STAMP_ABI } = await import('./constants');
+
+    // Ensure batchId has 0x prefix
+    const formattedBatchId = batchId.startsWith('0x') ? batchId : `0x${batchId}`;
+
+    const { client } = getGnosisPublicClient(0);
+
+    // Query all necessary data from the contract
+    const [normalizedBalance, totalOutPayment, lastPrice, remainingBalance] = await Promise.all([
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'batchNormalisedBalance',
+        args: [formattedBatchId as `0x${string}`],
+      }),
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'currentTotalOutPayment',
+      }),
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'lastPrice',
+      }),
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'remainingBalance',
+        args: [formattedBatchId as `0x${string}`],
+      }),
+    ]);
+
+    // Calculate TTL in blocks
+    // TTL (blocks) = (normalizedBalance - totalOutPayment) / lastPrice
+    const normalizedBalanceBigInt = BigInt(normalizedBalance as bigint);
+    const totalOutPaymentBigInt = BigInt(totalOutPayment as bigint);
+    const lastPriceBigInt = BigInt(lastPrice as bigint);
+    const remainingBalanceBigInt = BigInt(remainingBalance as bigint);
+
+    if (lastPriceBigInt === 0n) {
+      console.error('lastPrice is 0, cannot calculate TTL');
+      return null;
+    }
+
+    // Calculate remaining blocks
+    const remainingBlocks =
+      normalizedBalanceBigInt > totalOutPaymentBigInt
+        ? (normalizedBalanceBigInt - totalOutPaymentBigInt) / lastPriceBigInt
+        : 0n;
+
+    // Convert to seconds (Gnosis Chain: ~5 second blocks)
+    const ttlSeconds = Number(remainingBlocks) * 5;
+
+    // Convert remaining balance to BZZ (divide by 10^16)
+    const remainingBalanceString = remainingBalanceBigInt.toString();
+
+    console.log('Contract batch info:', {
+      batchId: formattedBatchId,
+      normalizedBalance: normalizedBalanceBigInt.toString(),
+      totalOutPayment: totalOutPaymentBigInt.toString(),
+      lastPrice: lastPriceBigInt.toString(),
+      remainingBalance: remainingBalanceString,
+      remainingBlocks: remainingBlocks.toString(),
+      ttlSeconds,
+    });
+
+    return {
+      ttlSeconds,
+      remainingBalance: remainingBalanceString,
+    };
+  } catch (error) {
+    console.error('Error fetching batch info from contract:', error);
+    return null;
+  }
+};
+
 /**
  * Calculate the real stamp usage percentage
  * @param utilization Raw utilization value from Bee API (decimal, e.g., 0.01 for 1%)

From 015f796131e9545add22f66b472fe155a81c0285 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Fri, 28 Nov 2025 11:02:36 +0000
Subject: [PATCH 02/10] feat: add stamp remaining balance

---
 src/app/components/SwapComponent.tsx         |  3 +-
 src/app/components/TTLDisplay.tsx            | 25 +++---
 src/app/components/css/TTLDisplay.module.css | 73 ++++++++---------
 src/app/components/utils.ts                  | 82 ++++++++++++--------
 4 files changed, 100 insertions(+), 83 deletions(-)

diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index fd9ca18..4a14383 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -229,10 +229,11 @@ const SwapComponent: React.FC = () => {
   // Add state for original stamp info (used in top-ups)
   const [originalStampInfo, setOriginalStampInfo] = useState<StampInfo | null>(null);
 
-  // Add state for batch info from contract (TTL and balance)
+  // Add state for batch info from contract (TTL and remaining balance)
   const [contractBatchInfo, setContractBatchInfo] = useState<{
     ttlSeconds: number;
     remainingBalance: string;
+    depth: number;
   } | null>(null);
 
   // Add state for TTL display flashing animation
diff --git a/src/app/components/TTLDisplay.tsx b/src/app/components/TTLDisplay.tsx
index f7cc1d4..39d7ec1 100644
--- a/src/app/components/TTLDisplay.tsx
+++ b/src/app/components/TTLDisplay.tsx
@@ -23,14 +23,18 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, isFlash
 
   const technicalTTL = formatTechnicalTTL(ttlSeconds);
 
-  // Format stamp value in BZZ (convert from PLUR to BZZ)
+  // Format stamp value in BZZ (BZZ has 16 decimal places: 1 BZZ = 10^16 PLUR)
   const formatStampValue = (amount: string): string => {
     try {
       const amountBigInt = BigInt(amount);
-      const bzz = Number(amountBigInt) / 1e16; // Convert PLUR to BZZ
-      return bzz.toFixed(4);
+      // Convert PLUR to BZZ by dividing by 10^16
+      const bzz = Number(amountBigInt) / 1e16;
+
+      // Format with appropriate decimal places, removing trailing zeros
+      const formatted = bzz.toFixed(6);
+      return formatted.replace(/\.?0+$/, '') || '0';
     } catch (error) {
-      return '0.0000';
+      return '0';
     }
   };
 
@@ -38,16 +42,11 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, isFlash
 
   return (
     <div className={`${styles.ttlContainer} ${isFlashing ? styles.flashing : ''}`}>
-      {/* Label */}
-      <div className={styles.label}>TTL</div>
-
-      {/* Main TTL Display - prominent in the middle */}
-      <div className={styles.mainTTL}>{formattedTTL}</div>
-
-      {/* Details Row */}
+      <div className={styles.mainTTL}>TTL: {formattedTTL}</div>
       <div className={styles.detailsRow}>
-        <div className={styles.leftDetail}>SVL: {bzzValue} BZZ</div>
-        <div className={styles.rightDetail}>TTL: {technicalTTL}</div>
+        <span className={styles.leftDetail}>Remaining Balance: {bzzValue} BZZ</span>
+        <span> • </span>
+        <span className={styles.rightDetail}>TTL: {technicalTTL}</span>
       </div>
     </div>
   );
diff --git a/src/app/components/css/TTLDisplay.module.css b/src/app/components/css/TTLDisplay.module.css
index 2c03c65..991b0ca 100644
--- a/src/app/components/css/TTLDisplay.module.css
+++ b/src/app/components/css/TTLDisplay.module.css
@@ -1,72 +1,75 @@
 .ttlContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 20px;
-  margin: 20px auto;
-  max-width: 600px;
-  /* No background or outline as requested */
-  transition: opacity 0.3s ease;
+  z-index: 1000;
+  background-color: rgba(30, 30, 30, 0.75);
+  backdrop-filter: blur(4px);
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
   user-select: none;
+  cursor: default;
+  opacity: 0.85;
+  transform: translateY(0);
+  margin: 20px auto;
+  max-width: fit-content;
+}
+
+.ttlContainer:hover {
+  opacity: 1;
+  background-color: rgba(40, 40, 40, 0.9);
+  transform: translateY(-3px);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 
 .label {
-  font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.6);
-  text-transform: uppercase;
-  letter-spacing: 2px;
-  margin-bottom: 10px;
-  font-weight: 500;
+  display: none;
 }
 
 .mainTTL {
-  font-size: 2.5rem;
-  font-weight: 600;
+  font-size: 0.85rem;
+  font-weight: 500;
   color: #fbba00; /* Swarm/BZZ yellow color - matching PriceTracker */
   text-align: center;
-  margin-bottom: 15px;
-  line-height: 1.2;
+  margin-bottom: 0;
+  line-height: 1.4;
 }
 
 .detailsRow {
   display: flex;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 500px;
-  gap: 20px;
+  align-items: center;
+  gap: 8px;
   font-size: 0.85rem;
-  color: rgba(255, 255, 255, 0.7);
+  color: rgba(255, 255, 255, 0.8);
+  justify-content: center;
+  flex-wrap: wrap;
 }
 
 .leftDetail {
-  text-align: left;
-  flex: 1;
-  color: #42b883; /* Green shade for stamp value - matching PriceTracker liquidity color */
+  color: #42b883; /* Green shade for remaining balance - matching PriceTracker liquidity color */
   font-weight: 500;
 }
 
 .rightDetail {
-  text-align: right;
-  flex: 1;
   color: #17a2b8; /* Blue shade for technical TTL - matching PriceTracker depth color */
   font-weight: 500;
 }
 
 /* Flash animation before refresh */
 .flashing {
-  animation: ttlFlash 0.6s ease-in-out;
+  animation: flash 2s ease;
 }
 
-@keyframes ttlFlash {
+@keyframes flash {
   0% {
-    opacity: 1;
+    background-color: rgba(30, 30, 30, 0.75);
   }
-  50% {
-    opacity: 0.3;
+  15% {
+    background-color: rgba(60, 60, 60, 0.9);
   }
   100% {
-    opacity: 1;
+    background-color: rgba(30, 30, 30, 0.75);
   }
 }
 
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index 5853c3c..e21efa3 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -515,11 +515,11 @@ export const formatDetailedTTL = (ttlSeconds: number): string => {
 /**
  * Query batch information from PostageStamp contract on Gnosis Chain
  * @param batchId The batch ID (with or without 0x prefix)
- * @returns Object containing TTL in seconds and remaining balance in BZZ
+ * @returns Object containing TTL in seconds, remaining balance (total), and depth
  */
 export const fetchBatchInfoFromContract = async (
   batchId: string
-): Promise<{ ttlSeconds: number; remainingBalance: string } | null> => {
+): Promise<{ ttlSeconds: number; remainingBalance: string; depth: number } | null> => {
   try {
     const { GNOSIS_STAMP_ADDRESS, POSTAGE_STAMP_ABI } = await import('./constants');
 
@@ -529,53 +529,65 @@ export const fetchBatchInfoFromContract = async (
     const { client } = getGnosisPublicClient(0);
 
     // Query all necessary data from the contract
-    const [normalizedBalance, totalOutPayment, lastPrice, remainingBalance] = await Promise.all([
-      client.readContract({
-        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-        abi: POSTAGE_STAMP_ABI,
-        functionName: 'batchNormalisedBalance',
-        args: [formattedBatchId as `0x${string}`],
-      }),
-      client.readContract({
-        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-        abi: POSTAGE_STAMP_ABI,
-        functionName: 'currentTotalOutPayment',
-      }),
-      client.readContract({
-        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-        abi: POSTAGE_STAMP_ABI,
-        functionName: 'lastPrice',
-      }),
-      client.readContract({
-        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-        abi: POSTAGE_STAMP_ABI,
-        functionName: 'remainingBalance',
-        args: [formattedBatchId as `0x${string}`],
-      }),
-    ]);
-
-    // Calculate TTL in blocks
-    // TTL (blocks) = (normalizedBalance - totalOutPayment) / lastPrice
+    const [normalizedBalance, totalOutPayment, lastPrice, remainingBalance, depth] =
+      await Promise.all([
+        client.readContract({
+          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+          abi: POSTAGE_STAMP_ABI,
+          functionName: 'batchNormalisedBalance',
+          args: [formattedBatchId as `0x${string}`],
+        }),
+        client.readContract({
+          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+          abi: POSTAGE_STAMP_ABI,
+          functionName: 'currentTotalOutPayment',
+        }),
+        client.readContract({
+          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+          abi: POSTAGE_STAMP_ABI,
+          functionName: 'lastPrice',
+        }),
+        client.readContract({
+          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+          abi: POSTAGE_STAMP_ABI,
+          functionName: 'remainingBalance',
+          args: [formattedBatchId as `0x${string}`],
+        }),
+        client.readContract({
+          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+          abi: POSTAGE_STAMP_ABI,
+          functionName: 'batchDepth',
+          args: [formattedBatchId as `0x${string}`],
+        }),
+      ]);
+
+    // Calculate TTL and remaining balance following Bee's implementation
+    // From bee/pkg/api/postage.go:
+    // ttl = (normalizedBalance - cumulativePayout) * blockTime / pricePerBlock
     const normalizedBalanceBigInt = BigInt(normalizedBalance as bigint);
     const totalOutPaymentBigInt = BigInt(totalOutPayment as bigint);
     const lastPriceBigInt = BigInt(lastPrice as bigint);
-    const remainingBalanceBigInt = BigInt(remainingBalance as bigint);
+    const depthNumber = Number(depth);
 
     if (lastPriceBigInt === 0n) {
       console.error('lastPrice is 0, cannot calculate TTL');
       return null;
     }
 
-    // Calculate remaining blocks
-    const remainingBlocks =
+    // Calculate remaining balance (same value used for TTL calculation)
+    // This is the normalized balance minus cumulative payout
+    const remainingBalanceBigInt =
       normalizedBalanceBigInt > totalOutPaymentBigInt
-        ? (normalizedBalanceBigInt - totalOutPaymentBigInt) / lastPriceBigInt
+        ? normalizedBalanceBigInt - totalOutPaymentBigInt
         : 0n;
 
+    // Calculate remaining blocks
+    const remainingBlocks = remainingBalanceBigInt / lastPriceBigInt;
+
     // Convert to seconds (Gnosis Chain: ~5 second blocks)
     const ttlSeconds = Number(remainingBlocks) * 5;
 
-    // Convert remaining balance to BZZ (divide by 10^16)
+    // The remaining balance is already the total amount (in PLUR), not per-chunk
     const remainingBalanceString = remainingBalanceBigInt.toString();
 
     console.log('Contract batch info:', {
@@ -583,6 +595,7 @@ export const fetchBatchInfoFromContract = async (
       normalizedBalance: normalizedBalanceBigInt.toString(),
       totalOutPayment: totalOutPaymentBigInt.toString(),
       lastPrice: lastPriceBigInt.toString(),
+      depth: depthNumber,
       remainingBalance: remainingBalanceString,
       remainingBlocks: remainingBlocks.toString(),
       ttlSeconds,
@@ -591,6 +604,7 @@ export const fetchBatchInfoFromContract = async (
     return {
       ttlSeconds,
       remainingBalance: remainingBalanceString,
+      depth: depthNumber,
     };
   } catch (error) {
     console.error('Error fetching batch info from contract:', error);

From 40e8ad1db306ca77321a2bb339b76601712d91ee Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Fri, 28 Nov 2025 19:39:39 +0000
Subject: [PATCH 03/10] feat: add information for stamp retrieved for top up

---
 src/app/components/StampListSection.tsx       | 121 +++++++--
 src/app/components/SwapComponent.tsx          |  68 ++++-
 src/app/components/TTLDisplay.tsx             | 187 +++++++++++++-
 src/app/components/constants.ts               |  22 ++
 .../css/StampListSection.module.css           |  40 ++-
 src/app/components/css/TTLDisplay.module.css  | 128 +++++++++-
 src/app/components/utils.ts                   | 240 ++++++++++++++----
 7 files changed, 689 insertions(+), 117 deletions(-)

diff --git a/src/app/components/StampListSection.tsx b/src/app/components/StampListSection.tsx
index 6e13dfe..137e1da 100644
--- a/src/app/components/StampListSection.tsx
+++ b/src/app/components/StampListSection.tsx
@@ -58,6 +58,8 @@ interface BatchEvent {
   batchTTL?: number;
   bucketDepth?: number;
   isPropagating?: boolean; // Flag to indicate stamp is still propagating on network
+  payer?: string; // The payer address (actual buyer if bought through proxy)
+  owner?: string; // The owner address (from the registry query)
 }
 
 interface StampInfo {
@@ -330,6 +332,7 @@ const StampListSection: React.FC<StampListSectionProps> = ({
             const stampInfo = await fetchStampInfo(batchId, stampTimestamp);
 
             const depth = Number(contractBatch.depth);
+            const payer = contractBatch.payer?.toString();
 
             // If no stamp info, determine if it's propagating or expired
             if (!stampInfo) {
@@ -349,6 +352,8 @@ const StampListSection: React.FC<StampListSectionProps> = ({
                   batchTTL: 30 * 24 * 60 * 60, // Assume 30 days default
                   bucketDepth: 16, // Standard bucket depth
                   isPropagating: true, // Flag to show propagation message
+                  payer,
+                  owner: address,
                 };
               }
 
@@ -366,6 +371,8 @@ const StampListSection: React.FC<StampListSectionProps> = ({
               batchTTL: stampInfo.batchTTL,
               bucketDepth: stampInfo.bucketDepth,
               isPropagating: false, // Not propagating, we have real data
+              payer,
+              owner: address,
             };
           });
 
@@ -465,30 +472,93 @@ const StampListSection: React.FC<StampListSectionProps> = ({
           <div className={styles.stampListEmpty}>No stamps found</div>
         ) : (
           <>
-            {stamps.map((stamp, index) => (
-              <div key={index} className={styles.stampListItem}>
-                <div
-                  className={styles.stampListId}
-                  onClick={() => {
-                    const idToCopy = stamp.batchId.startsWith('0x')
-                      ? stamp.batchId.slice(2)
-                      : stamp.batchId;
-                    navigator.clipboard.writeText(idToCopy);
-                    // Show temporary "Copied!" message
-                    const element = document.querySelector(`[data-stamp-id="${stamp.batchId}"]`);
-                    if (element) {
-                      element.setAttribute('data-copied', 'true');
-                      setTimeout(() => {
-                        element.setAttribute('data-copied', 'false');
-                      }, 2000);
-                    }
-                  }}
-                  data-stamp-id={stamp.batchId}
-                  data-copied="false"
-                  title="Click to copy stamp ID"
-                >
-                  ID: {stamp.batchId.startsWith('0x') ? stamp.batchId.slice(2) : stamp.batchId}
-                </div>
+            {stamps.map((stamp, index) => {
+              // Determine which address to show (payer if bought through proxy, otherwise owner)
+              const getOwnerToDisplay = () => {
+                if (!stamp.owner && !stamp.payer) return null;
+                // If owner and payer are different, it was bought through proxy - show payer
+                if (
+                  stamp.owner &&
+                  stamp.payer &&
+                  stamp.owner.toLowerCase() !== stamp.payer.toLowerCase()
+                ) {
+                  return stamp.payer;
+                }
+                // Otherwise show owner (or payer if owner is not available)
+                return stamp.owner || stamp.payer || null;
+              };
+
+              // Determine the label for the owner field
+              const getOwnerLabel = () => {
+                if (!stamp.owner || !stamp.payer) return 'Owner';
+                // If they're different, it was bought through proxy
+                if (stamp.owner.toLowerCase() !== stamp.payer.toLowerCase()) {
+                  return 'Buyer';
+                }
+                return 'Owner';
+              };
+
+              // Format address with truncation (first6...last4)
+              const formatAddress = (address: string) => {
+                const cleanAddress = address.startsWith('0x') ? address.slice(2) : address;
+                if (cleanAddress.length <= 10) return cleanAddress;
+                return `${cleanAddress.slice(0, 6)}...${cleanAddress.slice(-4)}`;
+              };
+
+              const ownerToDisplay = getOwnerToDisplay();
+
+              return (
+                <div key={index} className={styles.stampListItem}>
+                  <div className={styles.stampIdRow}>
+                    <div
+                      className={styles.stampListId}
+                      onClick={() => {
+                        const idToCopy = stamp.batchId.startsWith('0x')
+                          ? stamp.batchId.slice(2)
+                          : stamp.batchId;
+                        navigator.clipboard.writeText(idToCopy);
+                        // Show temporary "Copied!" message
+                        const element = document.querySelector(`[data-stamp-id="${stamp.batchId}"]`);
+                        if (element) {
+                          element.setAttribute('data-copied', 'true');
+                          setTimeout(() => {
+                            element.setAttribute('data-copied', 'false');
+                          }, 2000);
+                        }
+                      }}
+                      data-stamp-id={stamp.batchId}
+                      data-copied="false"
+                      title="Click to copy stamp ID"
+                    >
+                      ID: {stamp.batchId.startsWith('0x') ? stamp.batchId.slice(2) : stamp.batchId}
+                    </div>
+                    {ownerToDisplay && (
+                      <div
+                        className={styles.stampOwner}
+                        onClick={() => {
+                          const addressToCopy = ownerToDisplay.startsWith('0x')
+                            ? ownerToDisplay
+                            : `0x${ownerToDisplay}`;
+                          navigator.clipboard.writeText(addressToCopy);
+                          // Show temporary "Copied!" message
+                          const element = document.querySelector(
+                            `[data-owner-address="${stamp.batchId}"]`
+                          );
+                          if (element) {
+                            element.setAttribute('data-copied', 'true');
+                            setTimeout(() => {
+                              element.setAttribute('data-copied', 'false');
+                            }, 2000);
+                          }
+                        }}
+                        data-owner-address={stamp.batchId}
+                        data-copied="false"
+                        title="Click to copy owner address"
+                      >
+                        {getOwnerLabel()}: {formatAddress(ownerToDisplay)}
+                      </div>
+                    )}
+                  </div>
                 <div className={styles.stampListDetails}>
                   <span>Paid: {Number(stamp.totalAmount).toFixed(2)} BZZ</span>
                   <span>Size: {stamp.size}</span>
@@ -608,7 +678,8 @@ const StampListSection: React.FC<StampListSectionProps> = ({
                   </button>
                 </div>
               </div>
-            ))}
+              );
+            })}
           </>
         )}
 
diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 4a14383..0576028 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -52,6 +52,7 @@ import {
   fetchCurrentPriceFromOracle,
   fetchStampInfo,
   fetchBatchInfoFromContract,
+  fetchBatchOwnerInfo,
   formatExpiryTime,
   isExpiringSoon,
   getStampUsage,
@@ -234,6 +235,8 @@ const SwapComponent: React.FC = () => {
     ttlSeconds: number;
     remainingBalance: string;
     depth: number;
+    owner?: string;
+    payer?: string;
   } | null>(null);
 
   // Add state for TTL display flashing animation
@@ -1583,10 +1586,26 @@ const SwapComponent: React.FC = () => {
         }
 
         // Fetch TTL and balance from contract
+        console.log('📊 [SwapComponent] Fetching batch info for topUpBatchId:', topUpBatchId);
         const batchInfo = await fetchBatchInfoFromContract(topUpBatchId);
         if (batchInfo) {
-          console.log('Fetched contract batch info:', batchInfo);
-          setContractBatchInfo(batchInfo);
+          console.log('📊 [SwapComponent] Received batch info from PostageStamp contract:', batchInfo);
+
+          // Fetch owner info from registry by querying events
+          console.log('📊 [SwapComponent] Fetching owner info from registry...');
+          const ownerInfo = await fetchBatchOwnerInfo(topUpBatchId);
+          console.log('📊 [SwapComponent] Received owner info from registry:', ownerInfo);
+
+          const combinedInfo = {
+            ...batchInfo,
+            owner: ownerInfo?.owner,
+            payer: ownerInfo?.payer,
+          };
+
+          console.log('📊 [SwapComponent] Setting contractBatchInfo state with combined data:', combinedInfo);
+          setContractBatchInfo(combinedInfo);
+        } else {
+          console.warn('⚠️ [SwapComponent] No batch info received from PostageStamp contract');
         }
       };
 
@@ -1604,10 +1623,24 @@ const SwapComponent: React.FC = () => {
       setTimeout(() => setIsTTLFlashing(false), 600); // Match flash animation duration
 
       // Fetch updated TTL and balance from contract
+      console.log('🔄 [SwapComponent] Refreshing batch info for topUpBatchId:', topUpBatchId);
       const batchInfo = await fetchBatchInfoFromContract(topUpBatchId);
       if (batchInfo) {
-        console.log('Refreshed contract batch info:', batchInfo);
-        setContractBatchInfo(batchInfo);
+        console.log('🔄 [SwapComponent] Refreshed batch info from PostageStamp contract:', batchInfo);
+
+        // Fetch owner info from registry by querying events
+        console.log('🔄 [SwapComponent] Refreshing owner info from registry...');
+        const ownerInfo = await fetchBatchOwnerInfo(topUpBatchId);
+        console.log('🔄 [SwapComponent] Refreshed owner info from registry:', ownerInfo);
+
+        const combinedInfo = {
+          ...batchInfo,
+          owner: ownerInfo?.owner,
+          payer: ownerInfo?.payer,
+        };
+
+        console.log('🔄 [SwapComponent] Updating contractBatchInfo state with refreshed data:', combinedInfo);
+        setContractBatchInfo(combinedInfo);
       }
     };
 
@@ -1754,13 +1787,26 @@ const SwapComponent: React.FC = () => {
             </div>
           )}
 
-          {isTopUp && contractBatchInfo && (
-            <TTLDisplay
-              ttlSeconds={contractBatchInfo.ttlSeconds}
-              stampValue={contractBatchInfo.remainingBalance}
-              isFlashing={isTTLFlashing}
-            />
-          )}
+          {isTopUp && contractBatchInfo && (() => {
+            console.log('🎨 [SwapComponent] Rendering TTLDisplay with props:', {
+              ttlSeconds: contractBatchInfo.ttlSeconds,
+              stampValue: contractBatchInfo.remainingBalance,
+              stampId: topUpBatchId || undefined,
+              owner: contractBatchInfo.owner,
+              payer: contractBatchInfo.payer,
+              isFlashing: isTTLFlashing,
+            });
+            return (
+              <TTLDisplay
+                ttlSeconds={contractBatchInfo.ttlSeconds}
+                stampValue={contractBatchInfo.remainingBalance}
+                stampId={topUpBatchId || undefined}
+                owner={contractBatchInfo.owner}
+                payer={contractBatchInfo.payer}
+                isFlashing={isTTLFlashing}
+              />
+            );
+          })()}
 
           <div className={styles.inputGroup}>
             <label
diff --git a/src/app/components/TTLDisplay.tsx b/src/app/components/TTLDisplay.tsx
index 39d7ec1..e823a9b 100644
--- a/src/app/components/TTLDisplay.tsx
+++ b/src/app/components/TTLDisplay.tsx
@@ -5,23 +5,33 @@ import styles from './css/TTLDisplay.module.css';
 interface TTLDisplayProps {
   ttlSeconds: number;
   stampValue: string; // The amount/balance of the stamp
+  stampId?: string; // The stamp/batch ID
+  owner?: string; // The owner of the stamp
+  payer?: string; // The payer (actual buyer if bought through proxy)
   isFlashing?: boolean;
 }
 
-const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, isFlashing = false }) => {
+const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId, owner, payer, isFlashing = false }) => {
   // Format TTL for detailed display
   const formattedTTL = formatDetailedTTL(ttlSeconds);
 
-  // Format TTL for technical display (seconds or minutes)
-  const formatTechnicalTTL = (seconds: number): string => {
-    if (seconds > 100000) {
-      const minutes = Math.floor(seconds / 60);
-      return `${minutes.toLocaleString()} minutes`;
+  // Calculate estimated expiry time
+  const formatExpiryDateTime = (seconds: number): string => {
+    if (seconds <= 0) {
+      return 'Expired';
     }
-    return `${seconds.toLocaleString()} seconds`;
+    const expiryDate = new Date(Date.now() + seconds * 1000);
+    return expiryDate.toLocaleString('en-GB', {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
   };
 
-  const technicalTTL = formatTechnicalTTL(ttlSeconds);
+  const estimatedExpiry = formatExpiryDateTime(ttlSeconds);
 
   // Format stamp value in BZZ (BZZ has 16 decimal places: 1 BZZ = 10^16 PLUR)
   const formatStampValue = (amount: string): string => {
@@ -40,13 +50,168 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, isFlash
 
   const bzzValue = formatStampValue(stampValue);
 
+  // Handle copy to clipboard for stamp ID
+  const handleCopyStampId = () => {
+    if (!stampId) return;
+    const idToCopy = stampId.startsWith('0x') ? stampId.slice(2) : stampId;
+    navigator.clipboard.writeText(idToCopy);
+
+    // Show temporary "Copied!" message
+    const element = document.querySelector(`[data-stamp-id="${stampId}"]`);
+    if (element) {
+      element.setAttribute('data-copied', 'true');
+      setTimeout(() => {
+        element.setAttribute('data-copied', 'false');
+      }, 2000);
+    }
+  };
+
+  // Handle copy to clipboard for share link
+  const handleCopyShareLink = () => {
+    if (typeof window === 'undefined') return;
+    const currentUrl = window.location.href;
+    navigator.clipboard.writeText(currentUrl);
+
+    // Show temporary "Copied!" message
+    const element = document.querySelector('[data-share-link]');
+    if (element) {
+      element.setAttribute('data-copied', 'true');
+      setTimeout(() => {
+        element.setAttribute('data-copied', 'false');
+      }, 2000);
+    }
+  };
+
+  // Format stamp ID with truncation (first6...last4)
+  const formatStampId = (id: string): string => {
+    const cleanId = id.startsWith('0x') ? id.slice(2) : id;
+    if (cleanId.length <= 10) return cleanId;
+    return `${cleanId.slice(0, 6)}...${cleanId.slice(-4)}`;
+  };
+
+  // Format address with truncation (first6...last4)
+  const formatAddress = (address: string): string => {
+    const cleanAddress = address.startsWith('0x') ? address.slice(2) : address;
+    if (cleanAddress.length <= 10) return cleanAddress;
+    return `${cleanAddress.slice(0, 6)}...${cleanAddress.slice(-4)}`;
+  };
+
+  // Handle copy to clipboard for owner address
+  const handleCopyOwner = () => {
+    const addressToCopy = getOwnerToCopy();
+    if (!addressToCopy) return;
+    const cleanAddress = addressToCopy.startsWith('0x') ? addressToCopy : `0x${addressToCopy}`;
+    navigator.clipboard.writeText(cleanAddress);
+
+    // Show temporary "Copied!" message
+    const element = document.querySelector('[data-owner-address]');
+    if (element) {
+      element.setAttribute('data-copied', 'true');
+      setTimeout(() => {
+        element.setAttribute('data-copied', 'false');
+      }, 2000);
+    }
+  };
+
+  // Determine which address to show (payer if bought through proxy, otherwise owner)
+  const getOwnerToDisplay = (): string | null => {
+    if (!owner && !payer) return null;
+    // If owner and payer are different, it was bought through proxy - show payer
+    if (owner && payer && owner.toLowerCase() !== payer.toLowerCase()) {
+      return payer;
+    }
+    // Otherwise show owner (or payer if owner is not available)
+    return owner || payer || null;
+  };
+
+  // Get the address to copy (with 0x prefix)
+  const getOwnerToCopy = (): string | null => {
+    const displayAddress = getOwnerToDisplay();
+    if (!displayAddress) return null;
+    return displayAddress.startsWith('0x') ? displayAddress : `0x${displayAddress}`;
+  };
+
+  // Determine the label for the owner field
+  const getOwnerLabel = (): string => {
+    if (!owner || !payer) return 'Owner';
+    // If they're different, it was bought through proxy
+    if (owner.toLowerCase() !== payer.toLowerCase()) {
+      return 'Buyer';
+    }
+    return 'Owner';
+  };
+
+  const ownerToDisplay = getOwnerToDisplay();
+
+  // Debug logging
+  console.log('🖼️ [TTLDisplay] Component props:', { ttlSeconds, stampValue, stampId, owner, payer, isFlashing });
+  console.log('🖼️ [TTLDisplay] Computed values:', {
+    ownerToDisplay,
+    ownerLabel: getOwnerLabel(),
+    ownerToCopy: getOwnerToCopy(),
+    willShowOwner: !!ownerToDisplay,
+  });
+
   return (
     <div className={`${styles.ttlContainer} ${isFlashing ? styles.flashing : ''}`}>
-      <div className={styles.mainTTL}>TTL: {formattedTTL}</div>
+      {(stampId || ownerToDisplay) && (
+        <div className={styles.infoRow}>
+          {stampId && (
+            <div
+              className={styles.stampId}
+              onClick={handleCopyStampId}
+              data-stamp-id={stampId}
+              data-copied="false"
+              title="Click to copy stamp ID"
+            >
+              Stamp: {formatStampId(stampId)}
+            </div>
+          )}
+          {stampId && (
+            <div
+              className={styles.shareButton}
+              onClick={handleCopyShareLink}
+              data-share-link
+              data-copied="false"
+              title="Click to copy share link"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <circle cx="18" cy="5" r="3"></circle>
+                <circle cx="6" cy="12" r="3"></circle>
+                <circle cx="18" cy="19" r="3"></circle>
+                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+                <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+              </svg>
+            </div>
+          )}
+          {ownerToDisplay && (
+            <div
+              className={styles.ownerAddress}
+              onClick={handleCopyOwner}
+              data-owner-address
+              data-copied="false"
+              title="Click to copy owner address"
+            >
+              {getOwnerLabel()}: {formatAddress(ownerToDisplay)}
+            </div>
+          )}
+        </div>
+      )}
+      <div className={styles.mainTTL}>{formattedTTL} remaining...</div>
       <div className={styles.detailsRow}>
-        <span className={styles.leftDetail}>Remaining Balance: {bzzValue} BZZ</span>
+        <span className={styles.leftDetail}>Balance: {bzzValue} BZZ</span>
         <span> • </span>
-        <span className={styles.rightDetail}>TTL: {technicalTTL}</span>
+        <span className={styles.rightDetail}>Expires: {estimatedExpiry}</span>
       </div>
     </div>
   );
diff --git a/src/app/components/constants.ts b/src/app/components/constants.ts
index 5c5b697..fa9249e 100644
--- a/src/app/components/constants.ts
+++ b/src/app/components/constants.ts
@@ -242,6 +242,13 @@ export const POSTAGE_STAMP_ABI = [
     inputs: [{ name: '_batchId', type: 'bytes32' }],
     outputs: [{ type: 'uint8' }],
   },
+  {
+    name: 'batchOwner',
+    type: 'function',
+    stateMutability: 'view',
+    inputs: [{ name: '_batchId', type: 'bytes32' }],
+    outputs: [{ type: 'address' }],
+  },
 ] as const;
 
 // Sushiswap V3 Pool ABI (minimal for price)
@@ -328,4 +335,19 @@ export const REGISTRY_ABI = [
     stateMutability: 'view',
     type: 'function',
   },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: 'bytes32', name: 'batchId', type: 'bytes32' },
+      { indexed: true, internalType: 'address', name: 'owner', type: 'address' },
+      { indexed: false, internalType: 'address', name: 'payer', type: 'address' },
+      { indexed: false, internalType: 'uint256', name: 'totalAmount', type: 'uint256' },
+      { indexed: false, internalType: 'uint256', name: 'normalisedBalance', type: 'uint256' },
+      { indexed: false, internalType: 'uint8', name: 'depth', type: 'uint8' },
+      { indexed: false, internalType: 'uint8', name: 'bucketDepth', type: 'uint8' },
+      { indexed: false, internalType: 'bool', name: 'immutableFlag', type: 'bool' },
+    ],
+    name: 'BatchCreated',
+    type: 'event',
+  },
 ] as const;
diff --git a/src/app/components/css/StampListSection.module.css b/src/app/components/css/StampListSection.module.css
index 8b9d2e1..8b3571e 100644
--- a/src/app/components/css/StampListSection.module.css
+++ b/src/app/components/css/StampListSection.module.css
@@ -53,15 +53,35 @@
   border: 1px solid #30363d;
 }
 
+.stampIdRow {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 8px;
+}
+
 .stampListId {
   font-family: monospace;
   font-size: 14px;
-  margin-bottom: 8px;
   cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+  word-break: break-all;
+}
+
+.stampOwner {
+  font-family: monospace;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px 8px;
   border-radius: 4px;
   transition: all 0.2s ease;
   position: relative;
   word-break: break-all;
+  color: #8b949e;
 }
 
 .stampListId:hover {
@@ -81,6 +101,24 @@
   color: #28a745;
 }
 
+.stampOwner:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+.stampOwner[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: #28a745;
+}
+
+.stampOwner[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  right: 8px;
+  font-size: 12px;
+  color: #28a745;
+}
+
 .stampListDetails {
   display: flex;
   flex-direction: column;
diff --git a/src/app/components/css/TTLDisplay.module.css b/src/app/components/css/TTLDisplay.module.css
index 991b0ca..aed44c9 100644
--- a/src/app/components/css/TTLDisplay.module.css
+++ b/src/app/components/css/TTLDisplay.module.css
@@ -7,33 +7,134 @@
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.8);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
   user-select: none;
   cursor: default;
   opacity: 0.85;
-  transform: translateY(0);
   margin: 20px auto;
-  max-width: fit-content;
-}
-
-.ttlContainer:hover {
-  opacity: 1;
-  background-color: rgba(40, 40, 40, 0.9);
-  transform: translateY(-3px);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
 }
 
 .label {
   display: none;
 }
 
+.infoRow {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.stampId {
+  font-family: monospace;
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+}
+
+.stampId:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.stampId[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: transparent;
+}
+
+.stampId[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  color: #28a745;
+  font-weight: 600;
+}
+
+.shareButton {
+  cursor: pointer;
+  padding: 6px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.7);
+  width: 50px;
+}
+
+.shareButton:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.shareButton[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+}
+
+.shareButton[data-copied="true"] svg {
+  opacity: 0;
+}
+
+.shareButton[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  font-size: 10px;
+  color: #28a745;
+  font-weight: 600;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  white-space: nowrap;
+}
+
+.ownerAddress {
+  font-family: monospace;
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+}
+
+.ownerAddress:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.ownerAddress[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: transparent;
+}
+
+.ownerAddress[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  color: #28a745;
+  font-weight: 600;
+}
+
 .mainTTL {
-  font-size: 0.85rem;
+  font-size: 1.2rem;
   font-weight: 500;
   color: #fbba00; /* Swarm/BZZ yellow color - matching PriceTracker */
   text-align: center;
-  margin-bottom: 0;
-  line-height: 1.4;
+  margin-bottom: 5px;
+  line-height: 2.4;
+  letter-spacing: 0.06rem;
 }
 
 .detailsRow {
@@ -44,6 +145,7 @@
   color: rgba(255, 255, 255, 0.8);
   justify-content: center;
   flex-wrap: wrap;
+  margin-bottom: 4px;
 }
 
 .leftDetail {
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index e21efa3..ded34a2 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -529,44 +529,30 @@ export const fetchBatchInfoFromContract = async (
     const { client } = getGnosisPublicClient(0);
 
     // Query all necessary data from the contract
-    const [normalizedBalance, totalOutPayment, lastPrice, remainingBalance, depth] =
-      await Promise.all([
-        client.readContract({
-          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-          abi: POSTAGE_STAMP_ABI,
-          functionName: 'batchNormalisedBalance',
-          args: [formattedBatchId as `0x${string}`],
-        }),
-        client.readContract({
-          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-          abi: POSTAGE_STAMP_ABI,
-          functionName: 'currentTotalOutPayment',
-        }),
-        client.readContract({
-          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-          abi: POSTAGE_STAMP_ABI,
-          functionName: 'lastPrice',
-        }),
-        client.readContract({
-          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-          abi: POSTAGE_STAMP_ABI,
-          functionName: 'remainingBalance',
-          args: [formattedBatchId as `0x${string}`],
-        }),
-        client.readContract({
-          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
-          abi: POSTAGE_STAMP_ABI,
-          functionName: 'batchDepth',
-          args: [formattedBatchId as `0x${string}`],
-        }),
-      ]);
-
-    // Calculate TTL and remaining balance following Bee's implementation
-    // From bee/pkg/api/postage.go:
-    // ttl = (normalizedBalance - cumulativePayout) * blockTime / pricePerBlock
-    const normalizedBalanceBigInt = BigInt(normalizedBalance as bigint);
-    const totalOutPaymentBigInt = BigInt(totalOutPayment as bigint);
+    const [lastPrice, remainingBalancePerChunk, depth] = await Promise.all([
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'lastPrice',
+      }),
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'remainingBalance',
+        args: [formattedBatchId as `0x${string}`],
+      }),
+      client.readContract({
+        address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+        abi: POSTAGE_STAMP_ABI,
+        functionName: 'batchDepth',
+        args: [formattedBatchId as `0x${string}`],
+      }),
+    ]);
+
+    // Use the contract's remainingBalance function result directly
+    // This returns the per-chunk balance (normalizedBalance - currentTotalOutPayment)
     const lastPriceBigInt = BigInt(lastPrice as bigint);
+    const remainingBalancePerChunkBigInt = BigInt(remainingBalancePerChunk as bigint);
     const depthNumber = Number(depth);
 
     if (lastPriceBigInt === 0n) {
@@ -574,40 +560,182 @@ export const fetchBatchInfoFromContract = async (
       return null;
     }
 
-    // Calculate remaining balance (same value used for TTL calculation)
-    // This is the normalized balance minus cumulative payout
-    const remainingBalanceBigInt =
-      normalizedBalanceBigInt > totalOutPaymentBigInt
-        ? normalizedBalanceBigInt - totalOutPaymentBigInt
-        : 0n;
-
-    // Calculate remaining blocks
-    const remainingBlocks = remainingBalanceBigInt / lastPriceBigInt;
+    // Calculate TTL following Bee's implementation
+    // ttl = (remainingBalance) * blockTime / pricePerBlock
+    const remainingBlocks = remainingBalancePerChunkBigInt / lastPriceBigInt;
 
     // Convert to seconds (Gnosis Chain: ~5 second blocks)
     const ttlSeconds = Number(remainingBlocks) * 5;
 
-    // The remaining balance is already the total amount (in PLUR), not per-chunk
-    const remainingBalanceString = remainingBalanceBigInt.toString();
+    // Calculate total remaining balance by multiplying per-chunk balance by number of chunks (2^depth)
+    // Formula from PostageStamp.sol: totalAmount = initialBalancePerChunk * (1 << depth)
+    const totalRemainingBalance = remainingBalancePerChunkBigInt * (1n << BigInt(depthNumber));
+    const remainingBalanceString = totalRemainingBalance.toString();
+
+    const result = {
+      ttlSeconds,
+      remainingBalance: remainingBalanceString,
+      depth: depthNumber,
+    };
 
-    console.log('Contract batch info:', {
+    console.log('✅ [PostageStamp Contract] Batch info fetched successfully:', {
       batchId: formattedBatchId,
-      normalizedBalance: normalizedBalanceBigInt.toString(),
-      totalOutPayment: totalOutPaymentBigInt.toString(),
       lastPrice: lastPriceBigInt.toString(),
       depth: depthNumber,
-      remainingBalance: remainingBalanceString,
+      remainingBalancePerChunk: remainingBalancePerChunkBigInt.toString(),
+      totalRemainingBalance: remainingBalanceString,
       remainingBlocks: remainingBlocks.toString(),
       ttlSeconds,
+      result,
+    });
+
+    return result;
+  } catch (error) {
+    console.error('❌ [PostageStamp Contract] Error fetching batch info from contract:', error);
+    return null;
+  }
+};
+
+/**
+ * Fetch the owner/payer information for a specific batch from the registry by querying events
+ * @param batchId The batch ID to look up
+ * @returns Owner address and payer address, or null if not found
+ */
+export const fetchBatchOwnerInfo = async (
+  batchId: string
+): Promise<{ owner: string; payer: string } | null> => {
+  try {
+    const { GNOSIS_CUSTOM_REGISTRY_ADDRESS } = await import('./constants');
+    const { REGISTRY_ABI } = await import('./constants');
+
+    // Ensure batchId has 0x prefix
+    const formattedBatchId = batchId.startsWith('0x') ? batchId : `0x${batchId}`;
+
+    console.log('🔍 [Beeport Registry] Starting owner lookup for batch:', formattedBatchId);
+    console.log('🔍 [Beeport Registry] Registry address:', GNOSIS_CUSTOM_REGISTRY_ADDRESS);
+
+    const { client } = getGnosisPublicClient(0);
+
+    const batchCreatedEvent = REGISTRY_ABI.find(item => item.type === 'event' && item.name === 'BatchCreated');
+    console.log('🔍 [Beeport Registry] Event definition found:', batchCreatedEvent ? 'Yes' : 'No');
+
+    // Query the BatchCreated event logs for this specific batchId
+    console.log('🔍 [Beeport Registry] Querying events from block 0 to latest...');
+    const logs = await client.getLogs({
+      address: GNOSIS_CUSTOM_REGISTRY_ADDRESS as `0x${string}`,
+      event: batchCreatedEvent!,
+      args: {
+        batchId: formattedBatchId as `0x${string}`,
+      },
+      fromBlock: BigInt(0), // Search from genesis - could optimize with a known start block
+      toBlock: 'latest',
+    });
+
+    console.log(`🔍 [Beeport Registry] Found ${logs.length} BatchCreated event(s) for this batch`);
+
+    if (logs.length === 0) {
+      console.warn(`⚠️ [Beeport Registry] No BatchCreated event found for batchId: ${formattedBatchId}`);
+      console.warn(`⚠️ [Beeport Registry] This stamp was not created through beeport registry`);
+      console.log(`🔍 [PostageStamp Contract] Falling back to PostageStamp contract for owner info...`);
+
+      // Fallback: Try to get owner from PostageStamp contract
+      try {
+        const { GNOSIS_STAMP_ADDRESS, POSTAGE_STAMP_ABI } = await import('./constants');
+
+        const owner = await client.readContract({
+          address: GNOSIS_STAMP_ADDRESS as `0x${string}`,
+          abi: POSTAGE_STAMP_ABI,
+          functionName: 'batchOwner',
+          args: [formattedBatchId as `0x${string}`],
+        }) as string;
+
+        console.log(`✅ [PostageStamp Contract] Found batch owner from PostageStamp contract:`, {
+          batchId: formattedBatchId,
+          owner,
+          payer: owner, // For direct stamps, owner and payer are the same
+        });
+
+        return {
+          owner,
+          payer: owner, // For stamps created directly, owner = payer
+        };
+      } catch (error) {
+        console.error('❌ [PostageStamp Contract] Error fetching owner from PostageStamp contract:', error);
+        return null;
+      }
+    }
+
+    // Get the most recent event (in case there are multiple, though there shouldn't be)
+    const latestLog = logs[logs.length - 1];
+    console.log('🔍 [Beeport Registry] Latest event log:', latestLog);
+
+    const owner = latestLog.args.owner as string;
+    const payer = latestLog.args.payer as string;
+
+    console.log(`✅ [Beeport Registry] Found batch owner info:`, {
+      batchId: formattedBatchId,
+      owner,
+      payer,
+      ownerIsPayer: owner?.toLowerCase() === payer?.toLowerCase(),
     });
 
     return {
-      ttlSeconds,
-      remainingBalance: remainingBalanceString,
-      depth: depthNumber,
+      owner,
+      payer,
+    };
+  } catch (error) {
+    console.error('❌ [Beeport Registry] Error fetching batch owner info from events:', error);
+    console.error('❌ [Beeport Registry] Error details:', {
+      message: error instanceof Error ? error.message : 'Unknown error',
+      stack: error instanceof Error ? error.stack : undefined,
+    });
+    return null;
+  }
+};
+
+/**
+ * Fetch the owner/payer information for a specific batch from the registry
+ * @param batchId The batch ID to look up
+ * @param ownerAddress The address to check if they own this batch
+ * @returns Owner address and payer address, or null if not found in this owner's batches
+ */
+export const fetchBatchOwnerInfoForAddress = async (
+  batchId: string,
+  ownerAddress: string
+): Promise<{ owner: string; payer: string } | null> => {
+  try {
+    // Use static imports from constants
+    const { GNOSIS_CUSTOM_REGISTRY_ADDRESS } = await import('./constants');
+    const { REGISTRY_ABI } = await import('./constants');
+
+    // Ensure batchId has 0x prefix
+    const formattedBatchId = batchId.startsWith('0x') ? batchId : `0x${batchId}`;
+
+    const { client } = getGnosisPublicClient(0);
+
+    // Query the registry for all batches owned by this address
+    const batches = await client.readContract({
+      address: GNOSIS_CUSTOM_REGISTRY_ADDRESS as `0x${string}`,
+      abi: REGISTRY_ABI,
+      functionName: 'getOwnerBatches',
+      args: [ownerAddress as `0x${string}`],
+    });
+
+    // Find the batch with matching ID
+    const batch = (batches as any[]).find(
+      b => b.batchId.toLowerCase() === formattedBatchId.toLowerCase()
+    );
+
+    if (!batch) {
+      return null;
+    }
+
+    return {
+      owner: ownerAddress,
+      payer: batch.payer,
     };
   } catch (error) {
-    console.error('Error fetching batch info from contract:', error);
+    console.error('Error fetching batch owner info for address:', error);
     return null;
   }
 };

From 11632c4f45b1bf3941dcd986ca4b7d05c93b0748 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Fri, 28 Nov 2025 19:59:46 +0000
Subject: [PATCH 04/10] feat: add information for stamp retrieved for top up

---
 src/app/components/TTLDisplay.tsx            |  4 +++-
 src/app/components/css/TTLDisplay.module.css | 12 ++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/components/TTLDisplay.tsx b/src/app/components/TTLDisplay.tsx
index e823a9b..b74635a 100644
--- a/src/app/components/TTLDisplay.tsx
+++ b/src/app/components/TTLDisplay.tsx
@@ -207,7 +207,9 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId
           )}
         </div>
       )}
-      <div className={styles.mainTTL}>{formattedTTL} remaining...</div>
+      <div className={styles.mainTTL}>
+        {formattedTTL} <span className={styles.remainingText}>remaining...</span>
+      </div>
       <div className={styles.detailsRow}>
         <span className={styles.leftDetail}>Balance: {bzzValue} BZZ</span>
         <span> • </span>
diff --git a/src/app/components/css/TTLDisplay.module.css b/src/app/components/css/TTLDisplay.module.css
index aed44c9..d21acfc 100644
--- a/src/app/components/css/TTLDisplay.module.css
+++ b/src/app/components/css/TTLDisplay.module.css
@@ -130,13 +130,21 @@
 .mainTTL {
   font-size: 1.2rem;
   font-weight: 500;
-  color: #fbba00; /* Swarm/BZZ yellow color - matching PriceTracker */
+  color: #fbba00;
   text-align: center;
   margin-bottom: 5px;
-  line-height: 2.4;
+  line-height: 1.8;
   letter-spacing: 0.06rem;
 }
 
+.remainingText {
+  font-size: 0.96rem;
+  opacity: 0.2;
+  font-style: italic;
+  margin-left: 5px;
+  letter-spacing: 0.01rem;
+}
+
 .detailsRow {
   display: flex;
   align-items: center;

From 6aeb09d1edc9baaadc87f6b3fab755897e0fa805 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Mon, 1 Dec 2025 18:14:02 +0000
Subject: [PATCH 05/10] improve expiry

---
 prompt.md                                    |   5 +
 src/app/components/TTLDisplay.tsx            | 184 +++++++++++++++++--
 src/app/components/css/TTLDisplay.module.css | 112 +++++++++++
 src/app/components/utils.ts                  |  88 ++++++---
 uploadHistory.json                           |   1 +
 5 files changed, 355 insertions(+), 35 deletions(-)
 create mode 100644 prompt.md
 create mode 100644 uploadHistory.json

diff --git a/prompt.md b/prompt.md
new file mode 100644
index 0000000..de30a95
--- /dev/null
+++ b/prompt.md
@@ -0,0 +1,5 @@
+instead of "1 week 6 days remaining", print "1 week 6 days 3 hours 4 minutes 5 seconds" and set the javscript up so that it counts down using local computation/clock. every 1 minute or if a transaction to increase the price takes place, automatically check against the blockchain and see if the value has changed, if it has, update the display. figure out the number of characters that can fit inside TTLDisplay_mainTTL__Y9ZLt at the relevant font width and make a conservative estimation of the maximum length the counddown string can be. if it is too long remove the right most unit of time. 
+
+also, make the balance, expiration date time and countdown time all copy to the clipboard when clicked on
+
+when share button is hovered over, fade out the share symbol and print the word "Share" there instead. when it is hovered off, fade the share symbol back
diff --git a/src/app/components/TTLDisplay.tsx b/src/app/components/TTLDisplay.tsx
index b74635a..5922180 100644
--- a/src/app/components/TTLDisplay.tsx
+++ b/src/app/components/TTLDisplay.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { formatDetailedTTL } from './utils';
+import React, { useState, useEffect, useRef } from 'react';
+import { formatDetailedTTL, fetchBatchInfoFromContract } from './utils';
 import styles from './css/TTLDisplay.module.css';
 
 interface TTLDisplayProps {
@@ -9,11 +9,110 @@ interface TTLDisplayProps {
   owner?: string; // The owner of the stamp
   payer?: string; // The payer (actual buyer if bought through proxy)
   isFlashing?: boolean;
+  onTTLUpdate?: (newTTL: number, newBalance: string) => void; // Callback when TTL is updated from blockchain
 }
 
-const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId, owner, payer, isFlashing = false }) => {
-  // Format TTL for detailed display
-  const formattedTTL = formatDetailedTTL(ttlSeconds);
+const TTLDisplay: React.FC<TTLDisplayProps> = ({
+  ttlSeconds: initialTTLSeconds,
+  stampValue: initialStampValue,
+  stampId,
+  owner,
+  payer,
+  isFlashing = false,
+  onTTLUpdate
+}) => {
+  // State for live countdown
+  const [currentTTL, setCurrentTTL] = useState(initialTTLSeconds);
+  const [currentBalance, setCurrentBalance] = useState(initialStampValue);
+  const lastBlockchainSyncRef = useRef<number>(Date.now());
+  const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const syncIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Constants for character width calculation
+  // Using font-size: 1.2rem with letter-spacing: 0.06rem from CSS
+  // For the countdown string, we need to estimate conservatively
+  // Font: 1.2rem with letter-spacing 0.06rem
+  // Average character width including spacing: ~0.65rem (conservative)
+  // Container typically 600-800px wide, minus padding
+  // "remaining..." text adds ~12 characters worth of space
+  const APPROX_CHAR_WIDTH = 0.65; // in rem (conservative for proportional font)
+  const BASE_FONT_SIZE = 16; // Default browser font size in pixels
+  const CONTAINER_PADDING_REM = 1.5; // 12px * 2 = 24px = ~1.5rem in padding
+  const ESTIMATED_WIDTH_REM = 45; // ~720px container width in rem
+  const REMAINING_TEXT_WIDTH_REM = 8; // "remaining..." takes about 8rem
+  const AVAILABLE_WIDTH_REM = ESTIMATED_WIDTH_REM - CONTAINER_PADDING_REM - REMAINING_TEXT_WIDTH_REM;
+  const MAX_CHARS = Math.floor(AVAILABLE_WIDTH_REM / APPROX_CHAR_WIDTH);
+
+  console.log('🔧 [TTLDisplay] Character limit calculation:', {
+    estimatedWidthRem: ESTIMATED_WIDTH_REM,
+    availableWidthRem: AVAILABLE_WIDTH_REM,
+    maxChars: MAX_CHARS,
+  });
+
+  // Update local state when props change
+  useEffect(() => {
+    setCurrentTTL(initialTTLSeconds);
+    setCurrentBalance(initialStampValue);
+  }, [initialTTLSeconds, initialStampValue]);
+
+  // Client-side countdown - updates every second
+  useEffect(() => {
+    if (currentTTL <= 0) return;
+
+    countdownIntervalRef.current = setInterval(() => {
+      setCurrentTTL(prev => {
+        const newTTL = prev - 1;
+        return newTTL > 0 ? newTTL : 0;
+      });
+    }, 1000);
+
+    return () => {
+      if (countdownIntervalRef.current) {
+        clearInterval(countdownIntervalRef.current);
+      }
+    };
+  }, [currentTTL]);
+
+  // Periodic blockchain sync - every 1 minute
+  useEffect(() => {
+    if (!stampId) return;
+
+    const syncWithBlockchain = async () => {
+      try {
+        console.log('🔄 [TTLDisplay] Syncing with blockchain for batch:', stampId);
+        const batchInfo = await fetchBatchInfoFromContract(stampId);
+
+        if (batchInfo) {
+          console.log('✅ [TTLDisplay] Blockchain sync successful:', batchInfo);
+          setCurrentTTL(batchInfo.ttlSeconds);
+          setCurrentBalance(batchInfo.remainingBalance);
+          lastBlockchainSyncRef.current = Date.now();
+
+          // Notify parent component of the update
+          if (onTTLUpdate) {
+            onTTLUpdate(batchInfo.ttlSeconds, batchInfo.remainingBalance);
+          }
+        }
+      } catch (error) {
+        console.error('❌ [TTLDisplay] Error syncing with blockchain:', error);
+      }
+    };
+
+    // Initial sync after component mount
+    syncWithBlockchain();
+
+    // Set up periodic sync every 60 seconds
+    syncIntervalRef.current = setInterval(syncWithBlockchain, 60000);
+
+    return () => {
+      if (syncIntervalRef.current) {
+        clearInterval(syncIntervalRef.current);
+      }
+    };
+  }, [stampId, onTTLUpdate]);
+
+  // Format TTL for detailed display with character limit
+  const formattedTTL = formatDetailedTTL(currentTTL, MAX_CHARS);
 
   // Calculate estimated expiry time
   const formatExpiryDateTime = (seconds: number): string => {
@@ -31,7 +130,7 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId
     });
   };
 
-  const estimatedExpiry = formatExpiryDateTime(ttlSeconds);
+  const estimatedExpiry = formatExpiryDateTime(currentTTL);
 
   // Format stamp value in BZZ (BZZ has 16 decimal places: 1 BZZ = 10^16 PLUR)
   const formatStampValue = (amount: string): string => {
@@ -48,7 +147,46 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId
     }
   };
 
-  const bzzValue = formatStampValue(stampValue);
+  const bzzValue = formatStampValue(currentBalance);
+
+  // Handle copy to clipboard for balance
+  const handleCopyBalance = () => {
+    navigator.clipboard.writeText(`${bzzValue} BZZ`);
+
+    const element = document.querySelector('[data-balance]');
+    if (element) {
+      element.setAttribute('data-copied', 'true');
+      setTimeout(() => {
+        element.setAttribute('data-copied', 'false');
+      }, 2000);
+    }
+  };
+
+  // Handle copy to clipboard for expiration date
+  const handleCopyExpiration = () => {
+    navigator.clipboard.writeText(estimatedExpiry);
+
+    const element = document.querySelector('[data-expiration]');
+    if (element) {
+      element.setAttribute('data-copied', 'true');
+      setTimeout(() => {
+        element.setAttribute('data-copied', 'false');
+      }, 2000);
+    }
+  };
+
+  // Handle copy to clipboard for countdown
+  const handleCopyCountdown = () => {
+    navigator.clipboard.writeText(formattedTTL);
+
+    const element = document.querySelector('[data-countdown]');
+    if (element) {
+      element.setAttribute('data-copied', 'true');
+      setTimeout(() => {
+        element.setAttribute('data-copied', 'false');
+      }, 2000);
+    }
+  };
 
   // Handle copy to clipboard for stamp ID
   const handleCopyStampId = () => {
@@ -144,7 +282,7 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId
   const ownerToDisplay = getOwnerToDisplay();
 
   // Debug logging
-  console.log('🖼️ [TTLDisplay] Component props:', { ttlSeconds, stampValue, stampId, owner, payer, isFlashing });
+  console.log('🖼️ [TTLDisplay] Component props:', { ttlSeconds: initialTTLSeconds, stampValue: initialStampValue, stampId, owner, payer, isFlashing });
   console.log('🖼️ [TTLDisplay] Computed values:', {
     ownerToDisplay,
     ownerLabel: getOwnerLabel(),
@@ -207,13 +345,35 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({ ttlSeconds, stampValue, stampId
           )}
         </div>
       )}
-      <div className={styles.mainTTL}>
-        {formattedTTL} <span className={styles.remainingText}>remaining...</span>
+      <div
+        className={styles.mainTTL}
+        onClick={handleCopyCountdown}
+        data-countdown
+        data-copied="false"
+        title="Click to copy countdown"
+      >
+        {formattedTTL}
       </div>
       <div className={styles.detailsRow}>
-        <span className={styles.leftDetail}>Balance: {bzzValue} BZZ</span>
+        <span
+          className={styles.leftDetail}
+          onClick={handleCopyBalance}
+          data-balance
+          data-copied="false"
+          title="Click to copy balance"
+        >
+          Balance: {bzzValue} BZZ
+        </span>
         <span> • </span>
-        <span className={styles.rightDetail}>Expires: {estimatedExpiry}</span>
+        <span
+          className={styles.rightDetail}
+          onClick={handleCopyExpiration}
+          data-expiration
+          data-copied="false"
+          title="Click to copy expiration"
+        >
+          Expires: {estimatedExpiry}
+        </span>
       </div>
     </div>
   );
diff --git a/src/app/components/css/TTLDisplay.module.css b/src/app/components/css/TTLDisplay.module.css
index d21acfc..3861026 100644
--- a/src/app/components/css/TTLDisplay.module.css
+++ b/src/app/components/css/TTLDisplay.module.css
@@ -71,11 +71,40 @@
   width: 50px;
 }
 
+.shareButton svg {
+  transition: opacity 0.2s ease;
+  opacity: 1;
+}
+
 .shareButton:hover {
   background-color: rgba(255, 255, 255, 0.1);
   color: rgba(255, 255, 255, 0.9);
 }
 
+.shareButton:hover svg {
+  opacity: 0;
+}
+
+.shareButton:hover::before {
+  content: "Share";
+  position: absolute;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  white-space: nowrap;
+  opacity: 1;
+  animation: fadeIn 0.2s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 .shareButton[data-copied="true"] {
   background-color: rgba(40, 167, 69, 0.2);
 }
@@ -84,6 +113,10 @@
   opacity: 0;
 }
 
+.shareButton[data-copied="true"]::before {
+  display: none;
+}
+
 .shareButton[data-copied="true"]::after {
   content: "Copied!";
   position: absolute;
@@ -135,6 +168,35 @@
   margin-bottom: 5px;
   line-height: 1.8;
   letter-spacing: 0.06rem;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.mainTTL:hover {
+  background-color: rgba(251, 186, 0, 0.1);
+  color: #ffd966;
+}
+
+.mainTTL[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: transparent;
+}
+
+.mainTTL[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 14px;
+  color: #28a745;
+  font-weight: 600;
+}
+
+.mainTTL[data-copied="true"] .remainingText {
+  opacity: 0;
 }
 
 .remainingText {
@@ -159,11 +221,61 @@
 .leftDetail {
   color: #42b883; /* Green shade for remaining balance - matching PriceTracker liquidity color */
   font-weight: 500;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.leftDetail:hover {
+  background-color: rgba(66, 184, 131, 0.1);
+  color: #5dd39e;
+}
+
+.leftDetail[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: transparent;
+}
+
+.leftDetail[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  color: #28a745;
+  font-weight: 600;
 }
 
 .rightDetail {
   color: #17a2b8; /* Blue shade for technical TTL - matching PriceTracker depth color */
   font-weight: 500;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.rightDetail:hover {
+  background-color: rgba(23, 162, 184, 0.1);
+  color: #20c1e8;
+}
+
+.rightDetail[data-copied="true"] {
+  background-color: rgba(40, 167, 69, 0.2);
+  color: transparent;
+}
+
+.rightDetail[data-copied="true"]::after {
+  content: "Copied!";
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  color: #28a745;
+  font-weight: 600;
 }
 
 /* Flash animation before refresh */
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index ded34a2..fb8a0d4 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -476,40 +476,82 @@ export const isExpiryWarning = (ttlSeconds: number): boolean => {
 };
 
 /**
- * Format TTL in detailed human-readable format showing two most significant units
- * Examples: "1 week 3 days", "2 days 1 hr", "3 hrs 45 mins"
+ * Format TTL in detailed human-readable format showing smart time units
+ * Shows only the rightmost available units based on magnitude
+ * Examples:
+ *   - 1 year 2 months 3 weeks → shows years, months, weeks (not days, hours, minutes, seconds)
+ *   - 3 months 1 week 3 days → shows months, weeks, days (not hours, minutes, seconds)
+ *   - 3 hours 2 minutes 54 seconds → shows hours, minutes, seconds
+ * @param ttlSeconds The TTL in seconds
+ * @param maxLength Optional maximum character length - will truncate from the right if exceeded
  */
-export const formatDetailedTTL = (ttlSeconds: number): string => {
+export const formatDetailedTTL = (ttlSeconds: number, maxLength?: number): string => {
   if (ttlSeconds <= 0) {
     return 'Expired';
   }
 
-  const weeks = Math.floor(ttlSeconds / 604800); // 7 days
+  // Calculate all time units
+  const years = Math.floor(ttlSeconds / 31536000); // 365 days
+  const months = Math.floor((ttlSeconds % 31536000) / 2592000); // 30 days
+  const weeks = Math.floor((ttlSeconds % 2592000) / 604800); // 7 days
   const days = Math.floor((ttlSeconds % 604800) / 86400);
   const hours = Math.floor((ttlSeconds % 86400) / 3600);
   const minutes = Math.floor((ttlSeconds % 3600) / 60);
+  const seconds = Math.floor(ttlSeconds % 60);
 
-  // Show two most significant units
-  if (weeks > 0) {
-    if (days > 0) {
-      return `${weeks} week${weeks === 1 ? '' : 's'} ${days} day${days === 1 ? '' : 's'}`;
-    }
-    return `${weeks} week${weeks === 1 ? '' : 's'}`;
-  } else if (days > 0) {
-    if (hours > 0) {
-      return `${days} day${days === 1 ? '' : 's'} ${hours} hr${hours === 1 ? '' : 's'}`;
-    }
-    return `${days} day${days === 1 ? '' : 's'}`;
-  } else if (hours > 0) {
-    if (minutes > 0) {
-      return `${hours} hr${hours === 1 ? '' : 's'} ${minutes} min${minutes === 1 ? '' : 's'}`;
+  // Determine which units to show based on the largest unit present
+  const parts: string[] = [];
+
+  // Determine the granularity level based on the largest time unit
+  let showLevel = 0; // 0=seconds, 1=minutes, 2=hours, 3=days, 4=weeks, 5=months, 6=years
+
+  if (years > 0) showLevel = 6;
+  else if (months > 0) showLevel = 5;
+  else if (weeks > 0) showLevel = 4;
+  else if (days > 0) showLevel = 3;
+  else if (hours > 0) showLevel = 2;
+  else if (minutes > 0) showLevel = 1;
+  else showLevel = 0;
+
+  // Add parts based on show level (only show 3 levels of granularity)
+  if (showLevel >= 6 && years > 0) {
+    parts.push(`${years} year${years === 1 ? '' : 's'}`);
+  }
+  if (showLevel >= 5 && showLevel <= 7 && months > 0) {
+    parts.push(`${months} month${months === 1 ? '' : 's'}`);
+  }
+  if (showLevel >= 4 && showLevel <= 6 && weeks > 0) {
+    parts.push(`${weeks} week${weeks === 1 ? '' : 's'}`);
+  }
+  if (showLevel >= 3 && showLevel <= 5 && days > 0) {
+    parts.push(`${days} day${days === 1 ? '' : 's'}`);
+  }
+  if (showLevel >= 2 && showLevel <= 4 && hours > 0) {
+    parts.push(`${hours} hour${hours === 1 ? '' : 's'}`);
+  }
+  if (showLevel >= 1 && showLevel <= 3 && minutes > 0) {
+    parts.push(`${minutes} minute${minutes === 1 ? '' : 's'}`);
+  }
+  if (showLevel <= 2) {
+    parts.push(`${seconds} second${seconds === 1 ? '' : 's'}`);
+  }
+
+  if (parts.length === 0) {
+    return 'Less than 1 second';
+  }
+
+  // If maxLength is specified and we exceed it, truncate from the right
+  if (maxLength) {
+    let result = parts.join(' ');
+    if (result.length > maxLength) {
+      // Remove parts from the end until we fit
+      while (parts.length > 1 && parts.join(' ').length > maxLength) {
+        parts.pop();
+      }
     }
-    return `${hours} hr${hours === 1 ? '' : 's'}`;
-  } else if (minutes > 0) {
-    return `${minutes} min${minutes === 1 ? '' : 's'}`;
-  } else {
-    return 'Less than 1 minute';
   }
+
+  return parts.join(' ');
 };
 
 /**
diff --git a/uploadHistory.json b/uploadHistory.json
new file mode 100644
index 0000000..c145b3a
--- /dev/null
+++ b/uploadHistory.json
@@ -0,0 +1 @@
+{"0x30B763B278484909d4E3a118624E0b7519322595":[{"reference":"9f1e6b3f178f57ed2dbd7219249d161c8ca6dd3990d9a270d3b05daa38efbdd0","timestamp":1759219905909,"filename":"c5bftogyq7691.jpg","stampId":"b06b22f2d16ba4e72d8da1f020610edbb4ecb5c6880ba258fae66a53cf4376e8","expiryDate":1761941105909,"isWebpageUpload":false,"fileSize":43601,"isFolderUpload":false},{"reference":"f5d952dd97c88dc61bd941d347fa73c7979bd27f7b88fd2098c8ca85eae6862c","timestamp":1759162568308,"filename":"prodigy.tar","stampId":"b06b22f2d16ba4e72d8da1f020610edbb4ecb5c6880ba258fae66a53cf4376e8","expiryDate":1759335043308,"isWebpageUpload":true,"fileSize":221327360,"isFolderUpload":true,"associatedDomains":["breakandenter.eth"]}],"0x3FF22130C2EF603Bb97828f509e2953c34207618":[{"reference":"6ed8557c1be693f3bb786bc6d273618f76ffd6b6e7b178202bdf7dfb2caf1a06","timestamp":1764330120593,"filename":"prodigy.tar","stampId":"f0da4e3ebbc5fcaa015a099ec77d4d52553647be1daba2dfc24e3a0e5f7ebe62","expiryDate":1765667453592,"isWebpageUpload":true,"fileSize":221327360,"isFolderUpload":true},{"reference":"b6a3f66d8d8658f8e62ff9bbf25bd1d9e4a5c8cd85247b5247c7a4c62074f26a","timestamp":1764255455542,"filename":"dist.tar","stampId":"f0da4e3ebbc5fcaa015a099ec77d4d52553647be1daba2dfc24e3a0e5f7ebe62","expiryDate":1765645442541,"isWebpageUpload":true,"fileSize":563200,"isFolderUpload":true,"associatedDomains":["swarmpostoffice.eth"]}]}

From c0e8c00d9dc3c67fcfb5612e892896dd29b60406 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Mon, 1 Dec 2025 20:33:26 +0000
Subject: [PATCH 06/10] improve expiry, move modal

---
 src/app/components/SwapComponent.tsx         | 49 +++++++++++---------
 src/app/components/css/TTLDisplay.module.css |  9 +++-
 src/app/components/utils.ts                  |  8 ++--
 3 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 0576028..24244be 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -1731,6 +1731,34 @@ const SwapComponent: React.FC = () => {
 
       {!showHelp && !showStampList && !showUploadHistory ? (
         <>
+          {isTopUp && contractBatchInfo && (
+            <div className={styles.inputGroup}>
+              <label className={styles.label}>
+                Stamp expiry:
+              </label>
+              {(() => {
+                console.log('🎨 [SwapComponent] Rendering TTLDisplay with props:', {
+                  ttlSeconds: contractBatchInfo.ttlSeconds,
+                  stampValue: contractBatchInfo.remainingBalance,
+                  stampId: topUpBatchId || undefined,
+                  owner: contractBatchInfo.owner,
+                  payer: contractBatchInfo.payer,
+                  isFlashing: isTTLFlashing,
+                });
+                return (
+                  <TTLDisplay
+                    ttlSeconds={contractBatchInfo.ttlSeconds}
+                    stampValue={contractBatchInfo.remainingBalance}
+                    stampId={topUpBatchId || undefined}
+                    owner={contractBatchInfo.owner}
+                    payer={contractBatchInfo.payer}
+                    isFlashing={isTTLFlashing}
+                  />
+                );
+              })()}
+            </div>
+          )}
+
           <div className={styles.inputGroup}>
             <label className={styles.label} data-tooltip="Select chain with funds">
               From chain
@@ -1787,27 +1815,6 @@ const SwapComponent: React.FC = () => {
             </div>
           )}
 
-          {isTopUp && contractBatchInfo && (() => {
-            console.log('🎨 [SwapComponent] Rendering TTLDisplay with props:', {
-              ttlSeconds: contractBatchInfo.ttlSeconds,
-              stampValue: contractBatchInfo.remainingBalance,
-              stampId: topUpBatchId || undefined,
-              owner: contractBatchInfo.owner,
-              payer: contractBatchInfo.payer,
-              isFlashing: isTTLFlashing,
-            });
-            return (
-              <TTLDisplay
-                ttlSeconds={contractBatchInfo.ttlSeconds}
-                stampValue={contractBatchInfo.remainingBalance}
-                stampId={topUpBatchId || undefined}
-                owner={contractBatchInfo.owner}
-                payer={contractBatchInfo.payer}
-                isFlashing={isTTLFlashing}
-              />
-            );
-          })()}
-
           <div className={styles.inputGroup}>
             <label
               className={styles.label}
diff --git a/src/app/components/css/TTLDisplay.module.css b/src/app/components/css/TTLDisplay.module.css
index 3861026..3228a20 100644
--- a/src/app/components/css/TTLDisplay.module.css
+++ b/src/app/components/css/TTLDisplay.module.css
@@ -1,16 +1,20 @@
 .ttlContainer {
   z-index: 1000;
   background-color: rgba(30, 30, 30, 0.75);
+  -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
-  padding: 8px 12px;
+  padding: 8px 0px;
   border-radius: 8px;
   font-size: 0.85rem;
   color: rgba(255, 255, 255, 0.8);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  -webkit-user-select: none;
+  -moz-user-select: none;
   user-select: none;
   cursor: default;
   opacity: 0.85;
-  margin: 20px auto;
+  margin: 0px auto;
+  border: 1px solid #30363d;
 }
 
 .label {
@@ -188,6 +192,7 @@
 .mainTTL[data-copied="true"]::after {
   content: "Copied!";
   position: absolute;
+  top: 8px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 14px;
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index fb8a0d4..ae1d97f 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -513,7 +513,7 @@ export const formatDetailedTTL = (ttlSeconds: number, maxLength?: number): strin
   else if (minutes > 0) showLevel = 1;
   else showLevel = 0;
 
-  // Add parts based on show level (only show 3 levels of granularity)
+  // Add parts based on show level (show 4 levels of granularity to include hours/minutes)
   if (showLevel >= 6 && years > 0) {
     parts.push(`${years} year${years === 1 ? '' : 's'}`);
   }
@@ -526,13 +526,13 @@ export const formatDetailedTTL = (ttlSeconds: number, maxLength?: number): strin
   if (showLevel >= 3 && showLevel <= 5 && days > 0) {
     parts.push(`${days} day${days === 1 ? '' : 's'}`);
   }
-  if (showLevel >= 2 && showLevel <= 4 && hours > 0) {
+  if (showLevel >= 2 && showLevel <= 5 && hours > 0) {
     parts.push(`${hours} hour${hours === 1 ? '' : 's'}`);
   }
-  if (showLevel >= 1 && showLevel <= 3 && minutes > 0) {
+  if (showLevel >= 1 && showLevel <= 4 && minutes > 0) {
     parts.push(`${minutes} minute${minutes === 1 ? '' : 's'}`);
   }
-  if (showLevel <= 2) {
+  if (showLevel <= 3 && seconds > 0) {
     parts.push(`${seconds} second${seconds === 1 ? '' : 's'}`);
   }
 

From e5b6b7d98d3a111df36ac70eceacfee3a6fa4eeb Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Mon, 1 Dec 2025 20:55:00 +0000
Subject: [PATCH 07/10] fix: retain query variable on reload

---
 src/app/components/SwapComponent.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 24244be..427af08 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -2668,8 +2668,10 @@ const SwapComponent: React.FC = () => {
                         if (typeof window !== 'undefined') {
                           const url = new URL(window.location.href);
                           if (url.searchParams.has('topup')) {
-                            // Remove the topup parameter and navigate to clean URL
-                            window.location.href = window.location.origin;
+                            // Get the topup batch ID to preserve in URL
+                            const topupParam = url.searchParams.get('topup');
+                            // Navigate with topup parameter preserved
+                            window.location.href = `${window.location.origin}/?topup=${topupParam}`;
                           }
                         }
                       }}

From 4e09722ea2d8d229fa66cf1f5740b437764543d5 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Tue, 2 Dec 2025 17:41:14 +0000
Subject: [PATCH 08/10] chore: fix lint, remove extra files

---
 prompt.md                                   |  5 -----
 src/app/components/StampListSection.tsx     |  8 ++++----
 src/app/components/SwapComponent.tsx        |  5 +++--
 src/app/components/UploadHistorySection.tsx | 14 +++++++-------
 src/app/components/utils.ts                 |  2 +-
 uploadHistory.json                          |  1 -
 6 files changed, 15 insertions(+), 20 deletions(-)
 delete mode 100644 prompt.md
 delete mode 100644 uploadHistory.json

diff --git a/prompt.md b/prompt.md
deleted file mode 100644
index de30a95..0000000
--- a/prompt.md
+++ /dev/null
@@ -1,5 +0,0 @@
-instead of "1 week 6 days remaining", print "1 week 6 days 3 hours 4 minutes 5 seconds" and set the javscript up so that it counts down using local computation/clock. every 1 minute or if a transaction to increase the price takes place, automatically check against the blockchain and see if the value has changed, if it has, update the display. figure out the number of characters that can fit inside TTLDisplay_mainTTL__Y9ZLt at the relevant font width and make a conservative estimation of the maximum length the counddown string can be. if it is too long remove the right most unit of time. 
-
-also, make the balance, expiration date time and countdown time all copy to the clipboard when clicked on
-
-when share button is hovered over, fade out the share symbol and print the word "Share" there instead. when it is hovered off, fade the share symbol back
diff --git a/src/app/components/StampListSection.tsx b/src/app/components/StampListSection.tsx
index 137e1da..38ee1b2 100644
--- a/src/app/components/StampListSection.tsx
+++ b/src/app/components/StampListSection.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import styles from './css/StampListSection.module.css';
 import { formatUnits } from 'viem';
 import { UploadStep } from './types';
@@ -182,7 +182,7 @@ const StampListSection: React.FC<StampListSectionProps> = ({
     }
   };
 
-  const markStampAsExpired = (batchId: string, stampTimestamp?: number) => {
+  const markStampAsExpired = useCallback((batchId: string, stampTimestamp?: number) => {
     try {
       const cache = getExpiredStampsCache();
       const now = Date.now();
@@ -222,7 +222,7 @@ const StampListSection: React.FC<StampListSectionProps> = ({
     } catch (error) {
       console.warn('Error updating expired stamps cache:', error);
     }
-  };
+  }, []);
 
   useEffect(() => {
     const isStampKnownExpired = (batchId: string): boolean => {
@@ -399,7 +399,7 @@ const StampListSection: React.FC<StampListSectionProps> = ({
     };
 
     fetchStamps();
-  }, [address, beeApiUrl]); // Only dependencies that actually need to trigger re-fetching
+  }, [address, beeApiUrl, markStampAsExpired]); // Only dependencies that actually need to trigger re-fetching
 
   // Function to refresh a specific stamp
   const refreshSingleStamp = async (stampToRefresh: BatchEvent) => {
diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 427af08..5d27372 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -688,6 +688,7 @@ const SwapComponent: React.FC = () => {
     originalStampInfo,
     selectedDepth,
     checkBzzApproval,
+    calculateTopUpAmount,
   ]);
 
   useEffect(() => {
@@ -1652,7 +1653,7 @@ const SwapComponent: React.FC = () => {
   }, [topUpBatchId, isTopUp]);
 
   // Calculate amount for topping up an existing batch
-  const calculateTopUpAmount = (originalDepth: number) => {
+  const calculateTopUpAmount = useCallback((originalDepth: number) => {
     if (currentPrice === null || !selectedDays) return 0n;
 
     // We use the original depth from the stamp, not the currently selected depth
@@ -1661,7 +1662,7 @@ const SwapComponent: React.FC = () => {
 
     // Calculate for the original batch depth
     return totalPricePerDuration * BigInt(2 ** originalDepth);
-  };
+  }, [currentPrice, selectedDays]);
 
   // Add useEffect to set hasMounted after component mounts
   useEffect(() => {
diff --git a/src/app/components/UploadHistorySection.tsx b/src/app/components/UploadHistorySection.tsx
index 19b65a6..8efe3bf 100644
--- a/src/app/components/UploadHistorySection.tsx
+++ b/src/app/components/UploadHistorySection.tsx
@@ -72,12 +72,12 @@ const UploadHistorySection: React.FC<UploadHistoryProps> = ({ address, setShowUp
   const [isMigrating, setIsMigrating] = React.useState(false);
   const [migrationProgress, setMigrationProgress] = React.useState<string>('');
 
-  const formatStampId = (stampId: string) => {
+  const formatStampId = React.useCallback((stampId: string) => {
     if (!stampId || typeof stampId !== 'string' || stampId.length < 10) {
       return stampId || 'Invalid Stamp ID';
     }
     return `${stampId.slice(0, 6)}...${stampId.slice(-4)}`;
-  };
+  }, []);
 
   const formatReference = (reference: string) => {
     if (!reference || typeof reference !== 'string' || reference.length < 10) {
@@ -90,20 +90,20 @@ const UploadHistorySection: React.FC<UploadHistoryProps> = ({ address, setShowUp
    * Checks if an expiry date needs migration
    * Returns true if the expiry date is in an old/invalid format
    */
-  const needsExpiryMigration = (expiryDate: number): boolean => {
+  const needsExpiryMigration = React.useCallback((expiryDate: number): boolean => {
     // Valid timestamp format: Unix timestamp in milliseconds
     // Should be > 1000000000000 (after Sep 9, 2001) and < 32503680000000 (before year 3000)
     if (!isNaN(expiryDate) && expiryDate > 1000000000000 && expiryDate < 32503680000000) {
       return false; // Already in correct format
     }
     return true; // Needs migration
-  };
+  }, []);
 
   /**
    * Auto-migrates old expiry dates by querying the Bee API
    * This runs on every load and updates localStorage when complete
    */
-  const migrateOldExpiryDates = async (records: UploadRecord[], userAddress: string) => {
+  const migrateOldExpiryDates = React.useCallback(async (records: UploadRecord[], userAddress: string) => {
     // Find records that need migration
     const recordsToMigrate = records.filter(record => needsExpiryMigration(record.expiryDate));
 
@@ -221,7 +221,7 @@ const UploadHistorySection: React.FC<UploadHistoryProps> = ({ address, setShowUp
       setIsMigrating(false);
       setMigrationProgress('');
     }
-  };
+  }, [needsExpiryMigration, formatStampId]);
 
   React.useEffect(() => {
     if (address) {
@@ -262,7 +262,7 @@ const UploadHistorySection: React.FC<UploadHistoryProps> = ({ address, setShowUp
         migrateOldExpiryDates(uniqueHistory, address);
       }
     }
-  }, [address]);
+  }, [address, migrateOldExpiryDates]);
 
   const formatDate = (timestamp: number) => {
     if (timestamp === undefined) return 'Unknown';
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index ae1d97f..a35576e 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -542,7 +542,7 @@ export const formatDetailedTTL = (ttlSeconds: number, maxLength?: number): strin
 
   // If maxLength is specified and we exceed it, truncate from the right
   if (maxLength) {
-    let result = parts.join(' ');
+    const result = parts.join(' ');
     if (result.length > maxLength) {
       // Remove parts from the end until we fit
       while (parts.length > 1 && parts.join(' ').length > maxLength) {
diff --git a/uploadHistory.json b/uploadHistory.json
deleted file mode 100644
index c145b3a..0000000
--- a/uploadHistory.json
+++ /dev/null
@@ -1 +0,0 @@
-{"0x30B763B278484909d4E3a118624E0b7519322595":[{"reference":"9f1e6b3f178f57ed2dbd7219249d161c8ca6dd3990d9a270d3b05daa38efbdd0","timestamp":1759219905909,"filename":"c5bftogyq7691.jpg","stampId":"b06b22f2d16ba4e72d8da1f020610edbb4ecb5c6880ba258fae66a53cf4376e8","expiryDate":1761941105909,"isWebpageUpload":false,"fileSize":43601,"isFolderUpload":false},{"reference":"f5d952dd97c88dc61bd941d347fa73c7979bd27f7b88fd2098c8ca85eae6862c","timestamp":1759162568308,"filename":"prodigy.tar","stampId":"b06b22f2d16ba4e72d8da1f020610edbb4ecb5c6880ba258fae66a53cf4376e8","expiryDate":1759335043308,"isWebpageUpload":true,"fileSize":221327360,"isFolderUpload":true,"associatedDomains":["breakandenter.eth"]}],"0x3FF22130C2EF603Bb97828f509e2953c34207618":[{"reference":"6ed8557c1be693f3bb786bc6d273618f76ffd6b6e7b178202bdf7dfb2caf1a06","timestamp":1764330120593,"filename":"prodigy.tar","stampId":"f0da4e3ebbc5fcaa015a099ec77d4d52553647be1daba2dfc24e3a0e5f7ebe62","expiryDate":1765667453592,"isWebpageUpload":true,"fileSize":221327360,"isFolderUpload":true},{"reference":"b6a3f66d8d8658f8e62ff9bbf25bd1d9e4a5c8cd85247b5247c7a4c62074f26a","timestamp":1764255455542,"filename":"dist.tar","stampId":"f0da4e3ebbc5fcaa015a099ec77d4d52553647be1daba2dfc24e3a0e5f7ebe62","expiryDate":1765645442541,"isWebpageUpload":true,"fileSize":563200,"isFolderUpload":true,"associatedDomains":["swarmpostoffice.eth"]}]}

From 9ffbbabbd864caf939c7468bc8cc124c90973ab5 Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Tue, 2 Dec 2025 18:27:06 +0000
Subject: [PATCH 09/10] chore: remove logs

---
 src/app/components/SwapComponent.tsx | 42 +++++------------------
 src/app/components/TTLDisplay.tsx    | 19 +----------
 src/app/components/utils.ts          | 50 +++-------------------------
 3 files changed, 13 insertions(+), 98 deletions(-)

diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 5d27372..035e159 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -1587,15 +1587,10 @@ const SwapComponent: React.FC = () => {
         }
 
         // Fetch TTL and balance from contract
-        console.log('📊 [SwapComponent] Fetching batch info for topUpBatchId:', topUpBatchId);
         const batchInfo = await fetchBatchInfoFromContract(topUpBatchId);
         if (batchInfo) {
-          console.log('📊 [SwapComponent] Received batch info from PostageStamp contract:', batchInfo);
-
           // Fetch owner info from registry by querying events
-          console.log('📊 [SwapComponent] Fetching owner info from registry...');
           const ownerInfo = await fetchBatchOwnerInfo(topUpBatchId);
-          console.log('📊 [SwapComponent] Received owner info from registry:', ownerInfo);
 
           const combinedInfo = {
             ...batchInfo,
@@ -1603,10 +1598,7 @@ const SwapComponent: React.FC = () => {
             payer: ownerInfo?.payer,
           };
 
-          console.log('📊 [SwapComponent] Setting contractBatchInfo state with combined data:', combinedInfo);
           setContractBatchInfo(combinedInfo);
-        } else {
-          console.warn('⚠️ [SwapComponent] No batch info received from PostageStamp contract');
         }
       };
 
@@ -1624,15 +1616,10 @@ const SwapComponent: React.FC = () => {
       setTimeout(() => setIsTTLFlashing(false), 600); // Match flash animation duration
 
       // Fetch updated TTL and balance from contract
-      console.log('🔄 [SwapComponent] Refreshing batch info for topUpBatchId:', topUpBatchId);
       const batchInfo = await fetchBatchInfoFromContract(topUpBatchId);
       if (batchInfo) {
-        console.log('🔄 [SwapComponent] Refreshed batch info from PostageStamp contract:', batchInfo);
-
         // Fetch owner info from registry by querying events
-        console.log('🔄 [SwapComponent] Refreshing owner info from registry...');
         const ownerInfo = await fetchBatchOwnerInfo(topUpBatchId);
-        console.log('🔄 [SwapComponent] Refreshed owner info from registry:', ownerInfo);
 
         const combinedInfo = {
           ...batchInfo,
@@ -1640,7 +1627,6 @@ const SwapComponent: React.FC = () => {
           payer: ownerInfo?.payer,
         };
 
-        console.log('🔄 [SwapComponent] Updating contractBatchInfo state with refreshed data:', combinedInfo);
         setContractBatchInfo(combinedInfo);
       }
     };
@@ -1737,26 +1723,14 @@ const SwapComponent: React.FC = () => {
               <label className={styles.label}>
                 Stamp expiry:
               </label>
-              {(() => {
-                console.log('🎨 [SwapComponent] Rendering TTLDisplay with props:', {
-                  ttlSeconds: contractBatchInfo.ttlSeconds,
-                  stampValue: contractBatchInfo.remainingBalance,
-                  stampId: topUpBatchId || undefined,
-                  owner: contractBatchInfo.owner,
-                  payer: contractBatchInfo.payer,
-                  isFlashing: isTTLFlashing,
-                });
-                return (
-                  <TTLDisplay
-                    ttlSeconds={contractBatchInfo.ttlSeconds}
-                    stampValue={contractBatchInfo.remainingBalance}
-                    stampId={topUpBatchId || undefined}
-                    owner={contractBatchInfo.owner}
-                    payer={contractBatchInfo.payer}
-                    isFlashing={isTTLFlashing}
-                  />
-                );
-              })()}
+              <TTLDisplay
+                ttlSeconds={contractBatchInfo.ttlSeconds}
+                stampValue={contractBatchInfo.remainingBalance}
+                stampId={topUpBatchId || undefined}
+                owner={contractBatchInfo.owner}
+                payer={contractBatchInfo.payer}
+                isFlashing={isTTLFlashing}
+              />
             </div>
           )}
 
diff --git a/src/app/components/TTLDisplay.tsx b/src/app/components/TTLDisplay.tsx
index 5922180..2ca90b5 100644
--- a/src/app/components/TTLDisplay.tsx
+++ b/src/app/components/TTLDisplay.tsx
@@ -43,12 +43,6 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({
   const AVAILABLE_WIDTH_REM = ESTIMATED_WIDTH_REM - CONTAINER_PADDING_REM - REMAINING_TEXT_WIDTH_REM;
   const MAX_CHARS = Math.floor(AVAILABLE_WIDTH_REM / APPROX_CHAR_WIDTH);
 
-  console.log('🔧 [TTLDisplay] Character limit calculation:', {
-    estimatedWidthRem: ESTIMATED_WIDTH_REM,
-    availableWidthRem: AVAILABLE_WIDTH_REM,
-    maxChars: MAX_CHARS,
-  });
-
   // Update local state when props change
   useEffect(() => {
     setCurrentTTL(initialTTLSeconds);
@@ -79,11 +73,9 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({
 
     const syncWithBlockchain = async () => {
       try {
-        console.log('🔄 [TTLDisplay] Syncing with blockchain for batch:', stampId);
         const batchInfo = await fetchBatchInfoFromContract(stampId);
 
         if (batchInfo) {
-          console.log('✅ [TTLDisplay] Blockchain sync successful:', batchInfo);
           setCurrentTTL(batchInfo.ttlSeconds);
           setCurrentBalance(batchInfo.remainingBalance);
           lastBlockchainSyncRef.current = Date.now();
@@ -94,7 +86,7 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({
           }
         }
       } catch (error) {
-        console.error('❌ [TTLDisplay] Error syncing with blockchain:', error);
+        console.error('Error syncing TTL with blockchain:', error);
       }
     };
 
@@ -281,15 +273,6 @@ const TTLDisplay: React.FC<TTLDisplayProps> = ({
 
   const ownerToDisplay = getOwnerToDisplay();
 
-  // Debug logging
-  console.log('🖼️ [TTLDisplay] Component props:', { ttlSeconds: initialTTLSeconds, stampValue: initialStampValue, stampId, owner, payer, isFlashing });
-  console.log('🖼️ [TTLDisplay] Computed values:', {
-    ownerToDisplay,
-    ownerLabel: getOwnerLabel(),
-    ownerToCopy: getOwnerToCopy(),
-    willShowOwner: !!ownerToDisplay,
-  });
-
   return (
     <div className={`${styles.ttlContainer} ${isFlashing ? styles.flashing : ''}`}>
       {(stampId || ownerToDisplay) && (
diff --git a/src/app/components/utils.ts b/src/app/components/utils.ts
index a35576e..817e7ea 100644
--- a/src/app/components/utils.ts
+++ b/src/app/components/utils.ts
@@ -614,26 +614,13 @@ export const fetchBatchInfoFromContract = async (
     const totalRemainingBalance = remainingBalancePerChunkBigInt * (1n << BigInt(depthNumber));
     const remainingBalanceString = totalRemainingBalance.toString();
 
-    const result = {
+    return {
       ttlSeconds,
       remainingBalance: remainingBalanceString,
       depth: depthNumber,
     };
-
-    console.log('✅ [PostageStamp Contract] Batch info fetched successfully:', {
-      batchId: formattedBatchId,
-      lastPrice: lastPriceBigInt.toString(),
-      depth: depthNumber,
-      remainingBalancePerChunk: remainingBalancePerChunkBigInt.toString(),
-      totalRemainingBalance: remainingBalanceString,
-      remainingBlocks: remainingBlocks.toString(),
-      ttlSeconds,
-      result,
-    });
-
-    return result;
   } catch (error) {
-    console.error('❌ [PostageStamp Contract] Error fetching batch info from contract:', error);
+    console.error('Error fetching batch info from contract:', error);
     return null;
   }
 };
@@ -653,16 +640,11 @@ export const fetchBatchOwnerInfo = async (
     // Ensure batchId has 0x prefix
     const formattedBatchId = batchId.startsWith('0x') ? batchId : `0x${batchId}`;
 
-    console.log('🔍 [Beeport Registry] Starting owner lookup for batch:', formattedBatchId);
-    console.log('🔍 [Beeport Registry] Registry address:', GNOSIS_CUSTOM_REGISTRY_ADDRESS);
-
     const { client } = getGnosisPublicClient(0);
 
     const batchCreatedEvent = REGISTRY_ABI.find(item => item.type === 'event' && item.name === 'BatchCreated');
-    console.log('🔍 [Beeport Registry] Event definition found:', batchCreatedEvent ? 'Yes' : 'No');
 
     // Query the BatchCreated event logs for this specific batchId
-    console.log('🔍 [Beeport Registry] Querying events from block 0 to latest...');
     const logs = await client.getLogs({
       address: GNOSIS_CUSTOM_REGISTRY_ADDRESS as `0x${string}`,
       event: batchCreatedEvent!,
@@ -673,13 +655,7 @@ export const fetchBatchOwnerInfo = async (
       toBlock: 'latest',
     });
 
-    console.log(`🔍 [Beeport Registry] Found ${logs.length} BatchCreated event(s) for this batch`);
-
     if (logs.length === 0) {
-      console.warn(`⚠️ [Beeport Registry] No BatchCreated event found for batchId: ${formattedBatchId}`);
-      console.warn(`⚠️ [Beeport Registry] This stamp was not created through beeport registry`);
-      console.log(`🔍 [PostageStamp Contract] Falling back to PostageStamp contract for owner info...`);
-
       // Fallback: Try to get owner from PostageStamp contract
       try {
         const { GNOSIS_STAMP_ADDRESS, POSTAGE_STAMP_ABI } = await import('./constants');
@@ -691,46 +667,28 @@ export const fetchBatchOwnerInfo = async (
           args: [formattedBatchId as `0x${string}`],
         }) as string;
 
-        console.log(`✅ [PostageStamp Contract] Found batch owner from PostageStamp contract:`, {
-          batchId: formattedBatchId,
-          owner,
-          payer: owner, // For direct stamps, owner and payer are the same
-        });
-
         return {
           owner,
           payer: owner, // For stamps created directly, owner = payer
         };
       } catch (error) {
-        console.error('❌ [PostageStamp Contract] Error fetching owner from PostageStamp contract:', error);
+        console.error('Error fetching owner from PostageStamp contract:', error);
         return null;
       }
     }
 
     // Get the most recent event (in case there are multiple, though there shouldn't be)
     const latestLog = logs[logs.length - 1];
-    console.log('🔍 [Beeport Registry] Latest event log:', latestLog);
 
     const owner = latestLog.args.owner as string;
     const payer = latestLog.args.payer as string;
 
-    console.log(`✅ [Beeport Registry] Found batch owner info:`, {
-      batchId: formattedBatchId,
-      owner,
-      payer,
-      ownerIsPayer: owner?.toLowerCase() === payer?.toLowerCase(),
-    });
-
     return {
       owner,
       payer,
     };
   } catch (error) {
-    console.error('❌ [Beeport Registry] Error fetching batch owner info from events:', error);
-    console.error('❌ [Beeport Registry] Error details:', {
-      message: error instanceof Error ? error.message : 'Unknown error',
-      stack: error instanceof Error ? error.stack : undefined,
-    });
+    console.error('Error fetching batch owner info from events:', error);
     return null;
   }
 };

From e4f7814b8d6cf03ab39d2f456f135a2299b806dd Mon Sep 17 00:00:00 2001
From: sig <dan@1up.digital>
Date: Tue, 2 Dec 2025 20:11:32 +0000
Subject: [PATCH 10/10] fix: build error

---
 src/app/components/SwapComponent.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/components/SwapComponent.tsx b/src/app/components/SwapComponent.tsx
index 035e159..ee58dbc 100644
--- a/src/app/components/SwapComponent.tsx
+++ b/src/app/components/SwapComponent.tsx
@@ -643,6 +643,18 @@ const SwapComponent: React.FC = () => {
     }
   };
 
+  // Calculate amount for topping up an existing batch
+  const calculateTopUpAmount = useCallback((originalDepth: number) => {
+    if (currentPrice === null || !selectedDays) return 0n;
+
+    // We use the original depth from the stamp, not the currently selected depth
+    const initialPaymentPerChunkPerDay = BigInt(currentPrice) * BigInt(17280);
+    const totalPricePerDuration = initialPaymentPerChunkPerDay * BigInt(selectedDays);
+
+    // Calculate for the original batch depth
+    return totalPricePerDuration * BigInt(2 ** originalDepth);
+  }, [currentPrice, selectedDays]);
+
   // Check approval status when relevant parameters change
   useEffect(() => {
     const checkApprovalStatus = async () => {
@@ -1638,18 +1650,6 @@ const SwapComponent: React.FC = () => {
     return () => clearInterval(intervalId);
   }, [topUpBatchId, isTopUp]);
 
-  // Calculate amount for topping up an existing batch
-  const calculateTopUpAmount = useCallback((originalDepth: number) => {
-    if (currentPrice === null || !selectedDays) return 0n;
-
-    // We use the original depth from the stamp, not the currently selected depth
-    const initialPaymentPerChunkPerDay = BigInt(currentPrice) * BigInt(17280);
-    const totalPricePerDuration = initialPaymentPerChunkPerDay * BigInt(selectedDays);
-
-    // Calculate for the original batch depth
-    return totalPricePerDuration * BigInt(2 ** originalDepth);
-  }, [currentPrice, selectedDays]);
-
   // Add useEffect to set hasMounted after component mounts
   useEffect(() => {
     setHasMounted(true);