minor changes

notrustverify · Dec 15, 2024 · 31d0d0d · 31d0d0d
1 parent e20cb41
commit 31d0d0d
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 17 deletions.
diff --git a/app/src/components/BurnSummary.tsx b/app/src/components/BurnSummary.tsx
@@ -2,6 +2,19 @@ import React from 'react';
 import Image from 'next/image';
 import styles from "../styles/BurnSummary.module.css";
 
+const humanizeNumber = (num: number): string => {
+  if (num >= 1000000000) {
+    return (num / 1000000000).toFixed(2) + 'B';
+  }
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(2) + 'M';
+  }
+  if (num >= 1000) {
+    return (num / 1000).toFixed(2) + 'K';
+  }
+  return num.toFixed(2);
+};
+
 interface BurnSummaryProps {
   amount: string;
   tokenSymbol?: string;
@@ -12,6 +25,8 @@ interface BurnSummaryProps {
 export const BurnSummary: React.FC<BurnSummaryProps> = ({ amount, tokenSymbol, txId, logoURI }) => {
   if (!txId) return null;
 
+  const humanizedAmount = humanizeNumber(Number(amount));
+
   return (
     <div className={styles.summaryContainer}>
       <h3>Burn Summary</h3>
@@ -25,7 +40,7 @@ export const BurnSummary: React.FC<BurnSummaryProps> = ({ amount, tokenSymbol, t
             className={styles.tokenLogo}
           />
         )}
-       {' '} You burned {Number(amount).toFixed(2)} {tokenSymbol}</p>
+       {' '} You burned {humanizedAmount} {tokenSymbol}</p>
       </div>
       <a 
         href={`https://explorer.alephium.org/transactions/${txId}`}

diff --git a/app/src/components/FurnacePage.tsx b/app/src/components/FurnacePage.tsx
@@ -42,6 +42,7 @@ export const FurnacePage: FC = () => {
   const [computedBalance, setComputedBalance] = useState<string>('0');
   const [isCustomToken, setIsCustomToken] = useState(false);
   const [txId, setTxId] = useState<string | undefined>(undefined);
+  const [showSummary, setShowSummary] = useState(false);
   const nodeRef = useRef(null);
 
   useEffect(() => {
@@ -96,6 +97,17 @@ export const FurnacePage: FC = () => {
     }
   }, [balance, selectedToken]);
 
+  useEffect(() => {
+    setShowSummary(false);
+    setTxId(undefined);
+  }, [amount, selectedToken]);
+
+  useEffect(() => {
+    if (txId) {
+      setShowSummary(true);
+    }
+  }, [txId]);
+
   const handleConvert = async () => {
     if (!amount) {
       alert("Please enter an amount");
@@ -109,21 +121,24 @@ export const FurnacePage: FC = () => {
     }
 
     if (signer) {
-      const floatToDecimals = convertToInt(amount)
-      console.log(floatToDecimals)
-      const tx = await burn(
-        signer,
-        floatToDecimals[0],
-        floatToDecimals[1],
-        selectedToken?.id ?? '',
-        selectedToken?.decimals ?? 0,
-        withNft,
-        account?.group
-      );
-      setTxId(tx.txId)
-      updateBalanceForTx(tx.txId, 1)
+      try {
+        const floatToDecimals = convertToInt(amount)
+        console.log(floatToDecimals)
+        const tx = await burn(
+          signer,
+          floatToDecimals[0],
+          floatToDecimals[1],
+          selectedToken?.id ?? '',
+          selectedToken?.decimals ?? 0,
+          withNft,
+          account?.group
+        );
+        setTxId(tx.txId)
+        updateBalanceForTx(tx.txId, 1)
+      } catch (error) {
+        console.error("Error during burn:", error);
+      }
     }
-    console.log("Convert button clicked with amount:", amount);
   };
 
   return (
@@ -137,7 +152,7 @@ export const FurnacePage: FC = () => {
           <div className={styles.imageContainer}>
             <SwitchTransition>
               <CSSTransition
-                key={txId ? 'summary' : 'image'}
+                key={showSummary ? 'summary' : 'image'}
                 timeout={300}
                 classNames={{
                   enter: styles.fadeEnter,
@@ -148,7 +163,7 @@ export const FurnacePage: FC = () => {
                 nodeRef={nodeRef}
               >
                 <div ref={nodeRef}>
-                  {txId ? (
+                  {showSummary ? (
                     <BurnSummary 
                       amount={amount}
                       tokenSymbol={selectedToken?.symbol}