Merge pull request #5 from OverGamesDev/main

decimal correction + confirmation modal
notrustverify · Jan 6, 2025 · 6656eaa · 6656eaa
2 parents 320ded8 + a732fe6
commit 6656eaa
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 49 deletions.
diff --git a/appv2/src/app/components/ConfirmBurnModal.js b/appv2/src/app/components/ConfirmBurnModal.js
@@ -0,0 +1,55 @@
+import { useLanguage } from '../context/LanguageContext';
+import { useTheme } from '../context/ThemeContext';
+
+export default function ConfirmBurnModal({ isOpen, onClose, onConfirm, amount, symbol, isMax }) {
+  const { t } = useLanguage();
+  const { isDark } = useTheme();
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div 
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      />
+
+      <div className={`relative z-10 p-6 rounded-2xl shadow-xl max-w-md w-full m-4 ${
+        isDark 
+          ? 'bg-gray-800 text-white' 
+          : 'bg-white text-gray-900'
+      }`}>
+        <h2 className="text-xl font-semibold mb-4">
+          {t('confirmBurnTitle')}
+        </h2>
+
+        <p className="mb-6">
+          {isMax 
+            ? `${t('confirmBurnAll')} ${symbol} ${t('tokens')}?`
+            : `${t('confirmBurnMessage')} ${amount} ${symbol}?`
+          }
+        </p>
+
+        <div className="flex justify-end gap-4">
+          <button
+            onClick={onClose}
+            className={`px-4 py-2 rounded-lg transition-colors ${
+              isDark
+                ? 'bg-gray-700 hover:bg-gray-600 text-gray-300'
+                : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
+            }`}
+          >
+            {t('cancel')}
+          </button>
+
+          <button
+            onClick={onConfirm}
+            className="px-4 py-2 rounded-lg bg-orange-500 hover:bg-orange-600 text-white transition-colors"
+          >
+            {t('confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+} 
diff --git a/appv2/src/app/context/LanguageContext.js b/appv2/src/app/context/LanguageContext.js
@@ -53,6 +53,11 @@ export const translations = {
     burnError: "Error burning tokens",
     connectWalletToBurn: "Connect wallet to burn tokens",
     receiveNFT: "Receive NFT for this burn",
+    confirmBurnTitle: "Confirm Burn",
+    confirmBurnMessage: "Are you sure you want to burn",
+    confirmBurnAll: "Are you sure you want to burn all your",
+    cancel: "Cancel",
+    confirm: "Confirm",
   },
   fr: {
     // Navbar
@@ -103,6 +108,11 @@ export const translations = {
     burnError: "Erreur lors de la destruction",
     connectWalletToBurn: "Connectez votre wallet pour brûler des tokens",
     receiveNFT: "Recevoir un NFT pour ce burn",
+    confirmBurnTitle: "Confirmer le Burn",
+    confirmBurnMessage: "Êtes-vous sûr de vouloir brûler",
+    confirmBurnAll: "Êtes-vous sûr de vouloir brûler tous vos",
+    cancel: "Annuler",
+    confirm: "Confirmer",
   }
 };
 

diff --git a/appv2/src/app/page.js b/appv2/src/app/page.js
@@ -10,6 +10,7 @@ import { burn } from "./services/token.service";
 import { useBalance } from "@alephium/web3-react";
 import Image from 'next/image';
 import { web3 } from '@alephium/web3';
+import ConfirmBurnModal from './components/ConfirmBurnModal';
 
 function BurnInterface() {
   const { theme, isDark } = useTheme();
@@ -25,6 +26,7 @@ function BurnInterface() {
   const [isCustomToken, setIsCustomToken] = useState(false);
   const [wantNFT, setWantNFT] = useState(false);
   const [burnSummary, setBurnSummary] = useState(null);
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
 
   useEffect(() => {
     document.body.className = '';
@@ -69,44 +71,60 @@ function BurnInterface() {
       if (percentage === 100) {
         const tokenBalance = balance.tokenBalances.find(token => token.id === selectedToken.id);
         if (tokenBalance) {
+          const balanceWithDecimals = (Number(tokenBalance.amount) / Math.pow(10, selectedToken.decimals));
+          setBurnAmount(balanceWithDecimals.toString());
           setRawAmount(tokenBalance.amount);
-          setBurnAmount(computedBalance);
         }
       } else {
-        const amount = (parseFloat(computedBalance) * percentage / 100).toFixed(selectedToken.decimals);
+        const amount = (Number(computedBalance) * (percentage/100)).toString();
         setBurnAmount(amount);
         setRawAmount(undefined);
       }
     }
   };
 
   const handleBurn = async () => {
-    if (!selectedToken || !burnAmount) return;
-
-    try {
-      const floatToDecimals = rawAmount ? [rawAmount, 0] : convertToInt(burnAmount);
-      console.log(floatToDecimals);
-      const tx = await burn(
-        signer,
-        BigInt(floatToDecimals[0]),
-        Number(floatToDecimals[1]),
-        selectedToken?.id ?? '',
-        selectedToken?.decimals ?? 0,
-        wantNFT,
-        account?.group,
-        rawAmount != undefined? true : false
-      );
-
-      setRawAmount(undefined);
-      updateBalanceForTx(tx.txId, 1);
-      setBurnSummary({
-        amount: burnAmount,
-        symbol: selectedToken.symbol,
-        txId: tx.txId
-      });
-    } catch (error) {
-      console.error("Error during burn:", error);
+    if (!burnAmount) {
+      alert(t('enterAmount'));
+      return;
     }
+
+    if (burnAmount === computedBalance) {
+      setShowConfirmModal(true);
+    } else {
+      await handleConfirmBurn();
+    }
+  };
+
+  const handleConfirmBurn = async () => {
+    if (signer) {
+      try {
+        const cleanAmount = burnAmount.toString().replace(',', '.');
+        const floatToDecimals = rawAmount ? [rawAmount, 0] : convertToInt(cleanAmount);
+
+        const tx = await burn(
+          signer,
+          BigInt(floatToDecimals[0]),
+          Number(floatToDecimals[1]),
+          selectedToken?.id ?? '',
+          selectedToken?.decimals ?? 0,
+          wantNFT,
+          account?.group,
+          rawAmount != undefined ? true : false
+        );
+
+        setRawAmount(undefined);
+        updateBalanceForTx(tx.txId, 1);
+        setBurnSummary({
+          amount: burnAmount,
+          symbol: selectedToken.symbol,
+          txId: tx.txId
+        });
+      } catch (error) {
+        console.error("Error during burn:", error);
+      }
+    }
+    setShowConfirmModal(false);
   };
 
   const Skeleton = () => (
@@ -223,19 +241,21 @@ function BurnInterface() {
                     </div>
                   )}
 
-                  <div className="relative">
-                    <input
-                      type="number"
-                      value={burnAmount}
-                      onChange={(e) => setBurnAmount(e.target.value)}
-                      placeholder="0.00"
-                      className={`w-full p-3 rounded-lg transition-colors duration-200 ${
-                        isDark
-                          ? 'bg-gray-700 text-white border-gray-600'
-                          : 'bg-gray-50 text-gray-900 border-gray-200'
-                      } border focus:ring-2 focus:ring-orange-400 focus:border-transparent text-center`}
-                    />
-                    <div className="absolute right-2 top-1/2 -translate-y-1/2 flex gap-2">
+                  <div className="space-y-2">
+                    <div className="relative">
+                      <input
+                        type="number"
+                        value={burnAmount}
+                        onChange={(e) => {setBurnAmount(e.target.value); setRawAmount(undefined)}}
+                        placeholder="0.00"
+                        className={`w-full p-3 rounded-lg transition-colors duration-200 ${
+                          isDark
+                            ? 'bg-gray-700 text-white border-gray-600'
+                            : 'bg-gray-50 text-gray-900 border-gray-200'
+                        } border focus:ring-2 focus:ring-orange-400 focus:border-transparent text-center`}
+                      />
+                    </div>
+                    <div className="flex justify-end gap-2">
                       {[10, 50, 100].map((percentage) => (
                         <button
                           key={percentage}
@@ -342,6 +362,14 @@ function BurnInterface() {
           )}
         </AnimatePresence>
       </main>
+      <ConfirmBurnModal
+        isOpen={showConfirmModal}
+        onClose={() => setShowConfirmModal(false)}
+        onConfirm={handleConfirmBurn}
+        amount={burnAmount}
+        symbol={selectedToken?.symbol}
+        isMax={burnAmount === computedBalance}
+      />
     </div>
   );
 }

diff --git a/appv2/src/app/services/token.service.ts b/appv2/src/app/services/token.service.ts
@@ -20,8 +20,11 @@ export const burn = async (
   let decimalsPower = 0n
 
   if(!isMax) {
-    decimalsPower = BigInt(tokenDecimals-decimalsAmount)
- }
+
+     decimalsPower = BigInt(tokenDecimals-decimalsAmount)
+    console.log("test "+amount * 10n ** decimalsPower)
+  }
+
 
   const contract = getContractFactory(groupIndex)
   return await contract.transact.burn({

diff --git a/appv2/src/app/services/utils.tsx b/appv2/src/app/services/utils.tsx
@@ -27,16 +27,12 @@ export interface TokenFaucetConfig {
 
 
 export const convertToInt = (withdrawAmount: string): [bigint, number] => {
-  // Convert scientific notation to regular decimal
-  const normalizedNumber = Number(withdrawAmount).toLocaleString('fullwide', {
-    useGrouping: false,
-    maximumFractionDigits: 20
-  })
+  const normalizedNumber = withdrawAmount.toString()
+    .replace(',', '.')
+    .trim();
 
-  // Split the number into integer and decimal parts
   const [integerPart, decimalPart = ''] = normalizedNumber.split('.')
 
-  // Combine integer and decimal parts without the decimal point
   const fullNumber = integerPart + decimalPart
 
   return [