optimistic UI update after betting; UI improvements for mobile; remove animal number from the interface; remove duplicated scroll on GameDetailsModal; fix bet card image;

Author: melanke

packages/nextjs/app/jodobix/_components/AnimalSelector.tsx

@@ -16,7 +16,7 @@ export const AnimalSelector: React.FC<AnimalSelectorProps> = ({
   drawnNumber,
 }) => {
   return (
-    <div className="grid grid-cols-5 gap-1 md:gap-2 flex-1">
+    <div className="flex flex-wrap gap-1 md:gap-2 flex-1">
       {[...Array(25)].map((_, index) => {
         const number = index + 1;
         const betAmount = betsPerNumber[index] || 0n;
@@ -40,9 +40,8 @@ export const AnimalSelector: React.FC<AnimalSelectorProps> = ({
                 />
               </svg>
             )}
-            <div className="flex items-center justify-between w-[86px] -mt-12 h-12 flex-col md:flex-row">
-              <span className="text-sm text-accent">#{number}</span>
-              <span className="text-xs text-black">{formatEther(betAmount)} ETH</span>
+            <div className="w-[86px] -mt-10 h-10 text-sm leading-8 text-end font-bold text-black">
+              {formatEther(betAmount)} ETH
             </div>
           </button>
         );

packages/nextjs/app/jodobix/_components/BetCard.tsx

@@ -41,8 +41,15 @@ export const BetCard: React.FC<BetCardProps> = ({ betId, drawnNumber }) => {
 
   return (
     <div className="flex items-center gap-4">
-      <div className="relative w-16 h-16">
-        <Image src={`/animals/${bet?.number}.webp`} alt={`Animal ${bet?.number}`} width={228} height={325} />
+      <div className="relative w-16 h-[68px] overflow-hidden">
+        <Image
+          src={`/animals/${bet?.number}.webp`}
+          alt={`Animal ${bet?.number}`}
+          width={228}
+          height={325}
+          className="object-contain object-top"
+          style={{ width: "100%", height: "auto" }}
+        />
 
         {won && (
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86 66" className="h-14 -ml-1 mt-1">
@@ -58,7 +65,6 @@ export const BetCard: React.FC<BetCardProps> = ({ betId, drawnNumber }) => {
 
       <div className="flex flex-col">
         <span className="text-sm font-semibold">Bet #{betId.toString()}</span>
-        <span className="text-sm">Number: #{bet?.number}</span>
         <span className="text-sm">{formatEther(bet?.value || 0n)} ETH</span>
       </div>
 

packages/nextjs/app/jodobix/_components/BetForm.tsx

@@ -6,7 +6,7 @@ import { useDeployedContractInfo, useScaffoldWriteContract } from "~~/hooks/scaf
 interface BetFormProps {
   gameId?: bigint;
   selectedNumber: number | null;
-  onBetPlaced?: (betId: bigint) => void;
+  onBetPlaced?: (betId: bigint, gameId: bigint, number: number) => void;
   betAmount: string;
   setBetAmount: (value: string) => void;
 }
@@ -35,7 +35,7 @@ export const BetForm: React.FC<BetFormProps> = ({ gameId, selectedNumber, onBetP
 
             if (betPlacedEvent && "betId" in betPlacedEvent.args) {
               const betId = betPlacedEvent.args.betId as bigint;
-              onBetPlaced?.(betId);
+              onBetPlaced?.(betId, gameId!, Number(selectedNumber));
             }
           },
         },

packages/nextjs/app/jodobix/_components/GameDetailsModal.tsx

@@ -5,9 +5,10 @@ import { useCloseGame } from "../_hooks/useCloseGame";
 import { AnimalSelector } from "./AnimalSelector";
 import { BetCard } from "./BetCard";
 import { BetForm } from "./BetForm";
+import { useQueryClient } from "@tanstack/react-query";
 import { toast } from "react-hot-toast";
 import { formatEther, parseEther } from "viem";
-import { useAccount } from "wagmi";
+import { useAccount, useChainId } from "wagmi";
 import { ArrowPathIcon, InformationCircleIcon, ShareIcon } from "@heroicons/react/24/outline";
 import { Address } from "~~/components/scaffold-eth";
 import { HoverCard, HoverCardContent, HoverCardTrigger } from "~~/components/ui/hover-card";
@@ -24,9 +25,11 @@ export const GameDetailsModal: React.FC<GameDetailsModalProps> = ({ gameId, onCl
   const [selectedNumber, setSelectedNumber] = useState<number | null>(null);
   const [betAmount, setBetAmount] = useState("");
   const { address, connector, chainId } = useAccount();
+  const queryClient = useQueryClient();
   const { data: balance } = useWatchBalance({
     address,
   });
+  const defaultChainId = useChainId();
 
   const { data: game, refetch: refetchGame } = useScaffoldReadContract({
     contractName: "Jodobix",
@@ -43,7 +46,6 @@ export const GameDetailsModal: React.FC<GameDetailsModalProps> = ({ gameId, onCl
 
   const {
     data: myBets,
-    refetch: refetchMyBets,
     isLoading: isLoadingMyBets,
     error: errorMyBets,
   } = useBetsPlaced({
@@ -100,9 +102,27 @@ export const GameDetailsModal: React.FC<GameDetailsModalProps> = ({ gameId, onCl
     setSelectedNumber(number);
   };
 
-  const handleBetPlaced = (betId: bigint) => {
+  const handleBetPlaced = (betId: bigint, gameId: bigint, number: number) => {
+    // Optimistic UI update
+    queryClient.setQueryData(
+      ["betPlaceds", defaultChainId, gameId?.toString(), undefined, address],
+      [
+        ...(myBets ?? []),
+        {
+          betId: betId.toString(),
+          gameId: gameId.toString(),
+          number,
+          bettor: address,
+          value: parseEther(betAmount).toString(),
+          timestamp: Date.now().toString(),
+          blockNumber: "0",
+          blockTimestamp: "0",
+          transactionHash: "0x",
+        },
+      ],
+    );
+
     resetBetForm();
-    refetchMyBets();
     onBetPlaced?.(betId);
   };
 
@@ -151,7 +171,7 @@ export const GameDetailsModal: React.FC<GameDetailsModalProps> = ({ gameId, onCl
 
   return (
     <div className="modal modal-open">
-      <div className="modal-box w-11/12 max-w-5xl h-full flex flex-col dark:bg-">
+      <div className="modal-box w-11/12 max-w-5xl h-full flex flex-col">
         <div className="flex justify-between items-center mb-4">
           <h3 className="font-bold text-lg">
             Game #{gameId.toString()}
@@ -179,15 +199,15 @@ export const GameDetailsModal: React.FC<GameDetailsModalProps> = ({ gameId, onCl
           </button>
         </div>
 
-        <div className="flex gap-8 md:h-[calc(100%-3.3rem)] items-start flex-col md:flex-row">
+        <div className="flex gap-8 items-start flex-col md:flex-row pb-8">
           <AnimalSelector
             selectedNumber={selectedNumber}
             onSelectNumber={handleSelectNumber}
             betsPerNumber={Array.from(game?.betsPerNumber || [])}
             drawnNumber={game?.bettingPeriodEnded ? game?.drawnNumber : undefined}
           />
 
-          <div className="flex flex-col gap-2 h-full overflow-y-auto overflow-x-hidden self-center">
+          <div className="flex flex-col gap-2 h-full self-center">
             <div>
               Total Value: {formatEther(game?.totalValue || 0n)} ETH ({game?.numberOfBets.toString()} bets)
             </div>