feat: update user balance in every bet

pedroferreira1 · pedroferreira1 · commit 67cb023eba60 · 2025-12-17T13:27:39.000-03:00
diff --git a/app/page.tsx b/app/page.tsx
@@ -173,9 +173,14 @@ export default function Home() {
     try {
       const result = await claimBalance(amount, selectedToken, contractId, tokenUid);
       toast.success(`Balance withdrawn successfully! TX: ${result.response.hash?.slice(0, 10)}...`);
-      // Refresh claimable balance
-      const claimable = await coreAPI.getClaimableBalance(contractId, address!);
-      setContractBalance(claimable);
+
+      // Update balances locally after successful withdraw
+      const withdrawAmountCents = Math.round(amount * 100);
+      // Increase wallet balance
+      setBalance(balance + BigInt(withdrawAmountCents));
+      // Decrease contract balance
+      setContractBalance(contractBalance - BigInt(withdrawAmountCents));
+
       setShowWithdrawModal(false);
       setWithdrawAmount('');
     } catch (error: any) {
diff --git a/components/AddLiquidityCard.tsx b/components/AddLiquidityCard.tsx
@@ -14,7 +14,7 @@ interface AddLiquidityCardProps {
 }
 
 export default function AddLiquidityCard({ selectedToken, isExpanded, onToggle }: AddLiquidityCardProps) {
-  const { walletBalance, contractBalance, addLiquidity } = useWallet();
+  const { walletBalance, contractBalance, addLiquidity, balance, setBalance } = useWallet();
   const { isConnected, getContractStateForToken, getContractIdForToken } = useHathor();
   const contractBalanceInTokens = Number(contractBalance) / 100;
   const totalBalance = walletBalance + contractBalanceInTokens;
@@ -55,6 +55,11 @@ export default function AddLiquidityCard({ selectedToken, isExpanded, onToggle }
     try {
       const result = await addLiquidity(amount, selectedToken, contractId, tokenUid);
       toast.success(`Liquidity added successfully! TX: ${result.response.hash?.slice(0, 10)}...`);
+
+      // Update wallet balance locally after successful add liquidity
+      const amountCents = Math.round(amount * 100);
+      setBalance(balance - BigInt(amountCents));
+
       setAmount(0);
     } catch (error: any) {
       toast.error(error.message || 'Failed to add liquidity');
diff --git a/components/BetResultNotification.tsx b/components/BetResultNotification.tsx
@@ -105,7 +105,7 @@ export default function BetResultNotification({ bet, onComplete }: BetResultNoti
                 CHICKEN DINNER! 🍗
               </h3>
               <div className="text-5xl font-bold text-slate-900 mb-2">
-                +{bet.payout.toFixed(2)} {bet.token}
+                +{(bet.payout / 100).toFixed(2)} {bet.token}
               </div>
               <div className="text-sm text-slate-800 mt-4">
                 You won with lucky number {bet.luckyNumber} ≤ {bet.threshold}!
@@ -121,7 +121,7 @@ export default function BetResultNotification({ bet, onComplete }: BetResultNoti
                 Lucky number {bet.luckyNumber} {'>'} {bet.threshold}
               </div>
               <div className="text-lg text-slate-400 mb-4">
-                Lost {bet.amount.toFixed(2)} {bet.token}
+                Lost {(bet.amount / 100).toFixed(2)} {bet.token}
               </div>
               <div className="bg-slate-700 rounded-lg p-4 mt-4">
                 <p className="text-yellow-400 font-semibold mb-2">
diff --git a/components/FortuneTigerBetCard.tsx b/components/FortuneTigerBetCard.tsx
@@ -7,6 +7,7 @@ import { useHathor } from '@/contexts/HathorContext';
 import {
   calculatePayout,
   formatTokenAmount,
+  formatBalanceWithCommas,
   multiplierToThreshold,
   thresholdToWinChance,
   calculateMaxMultiplier,
@@ -60,12 +61,22 @@ export default function FortuneTigerBetCard({
   onLoadBalance,
   walletType,
 }: FortuneTigerBetCardProps) {
-  const { walletBalance, contractBalance, placeBet, connectWallet, balance, refreshBalance, isLoadingBalance, balanceVerified } = useWallet();
+  const { walletBalance, contractBalance, placeBet, connectWallet, balance, refreshBalance, isLoadingBalance, balanceVerified, setBalance, setContractBalance } = useWallet();
   const { isConnected, getContractStateForToken, getContractIdForToken, allBets, address } = useHathor();
   const [showMobileDisconnect, setShowMobileDisconnect] = useState(false);
   const contractBalanceInTokens = Number(contractBalance) / 100;
   const totalBalance = walletBalance + contractBalanceInTokens;
 
+  // Compute displayed balance locally from context values (instead of prop)
+  // This ensures immediate updates when we modify balance/contractBalance
+  const computedTotalBalance = balance + contractBalance;
+  const localFormattedBalance = isConnected && balanceVerified && computedTotalBalance > 0n
+    ? `${formatBalanceWithCommas(computedTotalBalance)} ${selectedToken}`
+    : formattedBalance; // Fallback to prop if conditions not met
+
+  // Track pending bet info for local balance updates
+  const pendingBetInfoRef = useRef<{ betAmountCents: number; depositAmountCents: number } | null>(null);
+
   const [betAmount, setBetAmount] = useState(1);
   const [selectedMultiplier, setSelectedMultiplier] = useState(1.5);
   const [showBetInput, setShowBetInput] = useState(false);
@@ -109,6 +120,12 @@ export default function FortuneTigerBetCard({
     setPotentialPayout(payout);
   }, [betAmount, selectedMultiplier, randomBitLength, houseEdgeBasisPoints, contractMaxMultiplierTenths]);
 
+  // Keep a ref to the latest contract balance for use in the bet result effect
+  const contractBalanceRef = useRef(contractBalance);
+  useEffect(() => {
+    contractBalanceRef.current = contractBalance;
+  }, [contractBalance]);
+
   // Watch for bet results
   useEffect(() => {
     if (!pendingBetTxId) return;
@@ -121,6 +138,14 @@ export default function FortuneTigerBetCard({
       setBetResult(bet.result as 'win' | 'lose');
       setPendingBetTxId(null);
 
+      // Update contract balance based on result
+      if (bet.result === 'win' && bet.payout > 0) {
+        // Add payout to contract balance (payout is in cents)
+        setContractBalance(contractBalanceRef.current + BigInt(Math.round(bet.payout)));
+      }
+      // Clear pending bet info
+      pendingBetInfoRef.current = null;
+
       // Randomly select an animation based on result
       const winAnimations: AnimationType[] = [
         'winner-chicken-dinner',
@@ -144,6 +169,7 @@ export default function FortuneTigerBetCard({
       // Show animation immediately - no delay
       setActiveAnimation(selectedAnimation);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allBets, pendingBetTxId]);
 
   // Trigger balance request when auth popup shows, and close popup when balance is loaded
@@ -280,9 +306,27 @@ export default function FortuneTigerBetCard({
     setIsPlacingBet(true);
 
     try {
+      // Calculate deposit and bet amounts in cents for local balance tracking
+      const betAmountCents = Math.round(betAmount * 100);
+      const contractBalanceCents = Number(contractBalance);
+      const depositAmountCents = Math.max(0, betAmountCents - contractBalanceCents);
+
       const result = await placeBet(betAmount, threshold, selectedToken, contractId, tokenUid, contractBalance);
       setPendingBetTxId(result.response.hash);
 
+      // Store pending bet info for balance update on result
+      pendingBetInfoRef.current = { betAmountCents, depositAmountCents };
+
+      // Update balances locally after successful bet submission
+      // Wallet balance decreases by deposit amount
+      if (depositAmountCents > 0) {
+        setBalance(balance - BigInt(depositAmountCents));
+      }
+      // Contract balance: receives deposit, then bet is deducted
+      // New contract balance = old + deposit - bet
+      const newContractBalance = BigInt(contractBalanceCents) + BigInt(depositAmountCents) - BigInt(betAmountCents);
+      setContractBalance(newContractBalance >= 0n ? newContractBalance : 0n);
+
       // Start spinning AFTER wallet confirmation
       setIsSpinning(true);
       toast.success('🎰 Transaction confirmed! Spinning...');
@@ -604,7 +648,7 @@ export default function FortuneTigerBetCard({
                 {/* Content */}
                 <div className="relative z-10">
                   {isPlacingBet ? (
-                    <div className="flex items-center justify-center gap-2">
+                    <div className="flex items-center justify-center gap-4">
                       <GoddessSpinner size={48} interval={500} />
                       <span className="text-xl md:text-2xl">SENDING...</span>
                     </div>
@@ -619,12 +663,12 @@ export default function FortuneTigerBetCard({
 
             {/* Mobile Balance & Statistics - Below SPIN button on mobile only */}
             <div className="flex md:hidden items-stretch justify-center gap-3 mt-2 w-full">
-              {formattedBalance ? (
+              {localFormattedBalance ? (
                 <div className="flex-1 px-4 py-2 rounded-full border-2 border-yellow-500/60 bg-gradient-to-br from-yellow-900/30 via-black/50 to-yellow-900/30 backdrop-blur-sm flex items-center justify-center">
                   <div className="flex items-center justify-center gap-2">
                     <div className="text-base">💰</div>
                     <span className="text-xs font-bold text-transparent bg-clip-text bg-gradient-to-r from-yellow-200 via-yellow-400 to-yellow-200 font-mono">
-                      {formattedBalance}
+                      {localFormattedBalance}
                     </span>
                   </div>
                 </div>
diff --git a/components/RemoveLiquidityCard.tsx b/components/RemoveLiquidityCard.tsx
@@ -14,7 +14,7 @@ interface RemoveLiquidityCardProps {
 }
 
 export default function RemoveLiquidityCard({ selectedToken, isExpanded, onToggle }: RemoveLiquidityCardProps) {
-  const { address, removeLiquidity } = useWallet();
+  const { address, removeLiquidity, balance, setBalance } = useWallet();
   const { isConnected, getContractStateForToken, getContractIdForToken, coreAPI } = useHathor();
   const [amount, setAmount] = useState(0);
   const [maxLiquidity, setMaxLiquidity] = useState<bigint>(0n);
@@ -85,10 +85,15 @@ export default function RemoveLiquidityCard({ selectedToken, isExpanded, onToggl
     try {
       const result = await removeLiquidity(amount, selectedToken, contractId, tokenUid);
       toast.success(`Liquidity removed successfully! TX: ${result.response.hash?.slice(0, 10)}...`);
+
+      // Update balances locally after successful remove liquidity
+      const amountCents = Math.round(amount * 100);
+      // Increase wallet balance
+      setBalance(balance + BigInt(amountCents));
+      // Decrease max liquidity locally
+      setMaxLiquidity(maxLiquidity - BigInt(amountCents));
+
       setAmount(0);
-      // Refresh max liquidity after successful removal
-      const max = await coreAPI.getMaximumLiquidityRemoval(contractId, address!);
-      setMaxLiquidity(max);
     } catch (error: any) {
       toast.error(error.message || 'Failed to remove liquidity');
     } finally {
diff --git a/components/WithdrawCard.tsx b/components/WithdrawCard.tsx
@@ -13,7 +13,7 @@ interface WithdrawCardProps {
 }
 
 export default function WithdrawCard({ selectedToken, isExpanded, onToggle }: WithdrawCardProps) {
-  const { address, claimBalance } = useWallet();
+  const { address, claimBalance, balance, setBalance } = useWallet();
   const { isConnected, getContractStateForToken, getContractIdForToken, coreAPI } = useHathor();
   const [claimableBalance, setClaimableBalance] = useState<bigint>(0n);
   const [isLoadingClaimable, setIsLoadingClaimable] = useState(false);
@@ -76,9 +76,13 @@ export default function WithdrawCard({ selectedToken, isExpanded, onToggle }: Wi
     try {
       const result = await claimBalance(amountToWithdraw, selectedToken, contractId, tokenUid);
       toast.success(`Balance withdrawn successfully! TX: ${result.response.hash?.slice(0, 10)}...`);
-      // Refresh claimable balance
-      const claimable = await coreAPI.getClaimableBalance(contractId, address!);
-      setClaimableBalance(claimable);
+
+      // Update balances locally after successful withdraw
+      const withdrawAmountCents = Math.round(amountToWithdraw * 100);
+      // Increase wallet balance
+      setBalance(balance + BigInt(withdrawAmountCents));
+      // Decrease claimable balance locally
+      setClaimableBalance(claimableBalance - BigInt(withdrawAmountCents));
     } catch (error: any) {
       toast.error(error.message || 'Failed to withdraw balance');
     } finally {
diff --git a/contexts/HathorContext.tsx b/contexts/HathorContext.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
 import { HathorCoreAPI } from '@/lib/hathorCoreAPI';
 import { ContractState, ContractTransaction } from '@/types/hathor';
 import { config, Network } from '@/lib/config';
@@ -142,22 +142,22 @@ export function HathorProvider({ children }: { children: ReactNode }) {
     }
   };
 
-  const getContractStateForToken = (token: string): ContractState | null => {
+  const getContractStateForToken = useCallback((token: string): ContractState | null => {
     return contractStates[token] || null;
-  };
+  }, [contractStates]);
 
-  const getContractIdForToken = (token: string): string | null => {
+  const getContractIdForToken = useCallback((token: string): string | null => {
     return tokenContractMap[token] || null;
-  };
+  }, [tokenContractMap]);
 
-  const getTokenForContractId = (contractId: string): string => {
+  const getTokenForContractId = useCallback((contractId: string): string => {
     for (const [token, id] of Object.entries(tokenContractMap)) {
       if (id === contractId) {
         return token;
       }
     }
     return 'HTR'; // fallback
-  };
+  }, [tokenContractMap]);
 
   const refreshContractStates = async () => {
     if (config.useMockWallet) {
