Feature/ik/two main chains (#149)

* only blast visible faucet links * fix getusergamebalance fn * add loading spinner in user balances * add spinner to deposit button while making deposit to game balance * add spinner to deposit/withdraw popover * add spinner to start game button when joining the game * add invalidate query to update gamebalance after deposit/update in header * fix images sizes and other props
t0lia · May 19, 2024 · ee6c53d · ee6c53d
1 parent 41727f4
commit ee6c53d
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 42 deletions.
diff --git a/frontend/src/app/components/dropdown/dropdownFaucetMenu.tsx b/frontend/src/app/components/dropdown/dropdownFaucetMenu.tsx
@@ -24,7 +24,7 @@ function DropdownFaucetMenu() {
 
       <DropdownMenuPortal>
         <DropdownMenuContent sideOffset={5}>
-          <DropdownMenuGroup>
+          {/* <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">
               ETH Scroll Sepolia
             </DropdownMenuLabel>
@@ -50,9 +50,9 @@ function DropdownFaucetMenu() {
             </Link>
           </DropdownMenuGroup>
 
-          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" />
+          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
 
-          <DropdownMenuGroup>
+          {/* <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">
               BNB Faucet & Bridge
             </DropdownMenuLabel>
@@ -74,9 +74,9 @@ function DropdownFaucetMenu() {
             </Link>
           </DropdownMenuGroup>
 
-          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" />
+          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
 
-          <DropdownMenuGroup>
+          {/* <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">
               Matic Polygon Amoy
             </DropdownMenuLabel>
@@ -103,7 +103,7 @@ function DropdownFaucetMenu() {
             </Link>
           </DropdownMenuGroup>
 
-          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" />
+          <DropdownMenuSeparator className="h-[1px] bg-gray-300 m-[4px]" /> */}
 
           <DropdownMenuGroup>
             <DropdownMenuLabel className="text-sm px-3 py-1">

diff --git a/frontend/src/app/components/logo/logo.tsx b/frontend/src/app/components/logo/logo.tsx
@@ -12,9 +12,9 @@ export default function Logo(): ReactNode {
           We're on Testnet
         </div>
         <Image
-          className="scale-[0.8] group-active:translate-y-1"
-          width={50}
-          height={50}
+          className="scale-[0.8] group-active:translate-y-1 w-[50px] h-auto"
+          width="0"
+          height="0"
           alt="retypeme logo"
           src={logo}
         />

diff --git a/frontend/src/app/components/start-deposit-button/startDepositButton.tsx b/frontend/src/app/components/start-deposit-button/startDepositButton.tsx
@@ -19,14 +19,16 @@ import RestApiService from "@/app/api/rest-api-service";
 import getUserGameBalance from "@/app/contract-utils/get-user-game-balance";
 
 import { Button } from "@/app/components/ui/button";
-import {useConfigStore} from "@/app/store/configStore";
+import { useConfigStore } from "@/app/store/configStore";
+import Spinner from "../ui/spinner";
 
 interface IStartDepositButton {
   txSuccessful: boolean;
   sessionStat: RaceStatistic;
   isButtonDisabled: boolean;
   handleStartGame: () => void;
   startBtnText: string;
+  isConfirmingJoin: boolean;
 }
 
 function StartDepositButton({
@@ -35,14 +37,16 @@ function StartDepositButton({
   isButtonDisabled,
   handleStartGame,
   startBtnText,
+  isConfirmingJoin,
 }: IStartDepositButton) {
-  const {contractConfig} = useConfigStore();
+  const { contractConfig } = useConfigStore();
   const { isSignedIn, signIn } = useSIWE();
   const { isConnected, chainId, address, chain } = useAccount();
   const isEnough = isEnoughBalance();
   const { openSwitchNetworks } = useModal();
   const { writeContract, data: hash } = useWriteContract();
-  const contractAddress = contractConfig.contractAddressesMap[chain?.name as string];
+  const contractAddress =
+    contractConfig.contractAddressesMap[chain?.name as string];
 
   async function signInWithEthereum(): Promise<void> {
     await signIn();
@@ -93,6 +97,7 @@ function StartDepositButton({
     <>
       {showDepositButton && !isConfirmed && userStatus !== "registered" ? (
         <Button onClick={handleUserDeposit}>
+          {isConfirming && <Spinner />}
           {`Deposit 0.001 ${
             chainId === CHAIN_ID_SCROLL_SEPOLIA_DECIMAL ||
             chainId === CHAIN_ID_BLAST_SEPOLIA_DECIMAL
@@ -117,6 +122,7 @@ function StartDepositButton({
           }}
           disabled={isButtonDisabled}
         >
+          {isConfirmingJoin && <Spinner />}
           {!isSignedIn && isConnected ? "Please Sign In" : `${startBtnText}`}
         </Button>
       )}

diff --git a/frontend/src/app/components/ui/spinner.tsx b/frontend/src/app/components/ui/spinner.tsx
@@ -0,0 +1,5 @@
+import { Loader2 } from "lucide-react";
+
+export default function Spinner() {
+  return <Loader2 className="mx-1 h-4 w-4 animate-spin" />;
+}
diff --git a/frontend/src/app/components/user-and-game-balance-popover.tsx b/frontend/src/app/components/user-and-game-balance-popover.tsx
@@ -1,5 +1,10 @@
-import React, { useRef } from "react";
-import { useAccount, useBalance, useWriteContract } from "wagmi";
+import React, { useEffect, useRef } from "react";
+import {
+  useAccount,
+  useBalance,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from "wagmi";
 import { Address, formatUnits, parseEther } from "viem";
 import { Button } from "@/app/components/ui/button";
 import {
@@ -15,25 +20,35 @@ import {
 } from "@/app/components/ui/tabs";
 import { Input } from "@/app/components/ui/input";
 import getUserGameBalance from "../contract-utils/get-user-game-balance";
-import {useConfigStore} from "@/app/store/configStore";
+import { useConfigStore } from "@/app/store/configStore";
+import Spinner from "./ui/spinner";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function UserAndGameBalancePopover() {
-
-  const {contractConfig} = useConfigStore();
+  const { contractConfig } = useConfigStore();
   const { address, chainId, chain } = useAccount();
   const { data, isError, isLoading } = useBalance({
     address: address,
     chainId: chainId,
   });
-
-  const contractAddress = contractConfig.contractAddressesMap[chain?.name as string];
-  const { writeContract, data: hash, isSuccess } = useWriteContract();
+  const queryClient = useQueryClient();
+  const contractAddress =
+    contractConfig.contractAddressesMap[chain?.name as string];
+  const {
+    writeContract,
+    data: hash,
+    isPending: isPendingTx,
+  } = useWriteContract();
 
   const withdrawInputRef = useRef(null);
   const depositInputRef = useRef(null);
 
-  const { humanReadableBalance: userGameBalanceValue, refetch } =
-    getUserGameBalance();
+  const {
+    isPending,
+    error,
+    humanReadableBalance: userGameBalanceValue,
+    queryKey,
+  } = getUserGameBalance();
 
   let shortUserBalanceValue;
   let userBalanceValue;
@@ -44,9 +59,11 @@ export default function UserAndGameBalancePopover() {
 
   const userBalances = (
     <div className="inline-flex items-center justify-center whitespace-nowrap bg-primary text-primary-foreground text-sm font-medium py-2 px-4 -mr-2 h-10">
-      {isLoading && "Fetching balance…"}
-      {isError && "Error fetching balance"}
-      {data && `${shortUserBalanceValue} | ${userGameBalanceValue}`}
+      {isLoading && <Spinner />}
+      {isError && "Error"}
+      {data && `${shortUserBalanceValue}`} | {isPending && <Spinner />}
+      {error && error}
+      {userGameBalanceValue && userGameBalanceValue}
     </div>
   );
 
@@ -73,6 +90,15 @@ export default function UserAndGameBalancePopover() {
     }
   }
 
+  const { isLoading: isConfirming, isSuccess: isConfirmed } =
+    useWaitForTransactionReceipt({
+      hash,
+    });
+
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey });
+  }, [isConfirmed]);
+
   return (
     <Popover>
       <PopoverTrigger>{userBalances}</PopoverTrigger>
@@ -111,6 +137,7 @@ export default function UserAndGameBalancePopover() {
                 handleUserDeposit(depositInputRef.current?.value);
               }}
             >
+              {(isConfirming || isPendingTx) && <Spinner />}
               Deposit
             </Button>
           </TabsContent>
@@ -140,6 +167,7 @@ export default function UserAndGameBalancePopover() {
               }}
               className="mt-2 self-stretch"
             >
+              {(isConfirming || isPendingTx) && <Spinner />}
               Withdraw
             </Button>
           </TabsContent>

diff --git a/frontend/src/app/contract-utils/get-user-game-balance.ts b/frontend/src/app/contract-utils/get-user-game-balance.ts
@@ -1,17 +1,18 @@
 import { useReadContract, useAccount } from "wagmi";
 import { formatEther, Address, BaseError } from "viem";
-import {useConfigStore} from "@/app/store/configStore";
+import { useConfigStore } from "@/app/store/configStore";
 
 export default function getUserGameBalance() {
   const { address, chain } = useAccount();
-  const {contractConfig} = useConfigStore();
-  const contractAddress = contractConfig.contractAddressesMap[chain?.name as string];
+  const { contractConfig } = useConfigStore();
+  const contractAddress =
+    contractConfig.contractAddressesMap[chain?.name as string];
 
   const {
     data: balance,
     error,
     isPending,
-    refetch,
+    queryKey,
   } = useReadContract({
     abi: contractConfig.abi,
     address: contractAddress as Address,
@@ -20,16 +21,16 @@ export default function getUserGameBalance() {
   });
 
   if (isPending) {
-    return { balance: "Loading...", refetch };
+    return { isPending: "Loading...", queryKey };
   }
 
-  if (error)
+  if (error) {
     return {
-      balance: `Error: ${(error as BaseError).shortMessage || error.message}`,
-      refetch,
+      error: `Error: ${(error as BaseError).shortMessage || error.message}`,
+      queryKey,
     };
+  }
 
   const humanReadableBalance = formatEther(balance as bigint);
-
-  return { balance, humanReadableBalance, refetch };
+  return { humanReadableBalance, queryKey };
 }
diff --git a/frontend/src/app/game/[id]/page.tsx b/frontend/src/app/game/[id]/page.tsx
@@ -29,11 +29,10 @@ import { Address, keccak256, toBytes } from "viem";
 
 import "./page.css";
 import getUserGameBalance from "@/app/contract-utils/get-user-game-balance";
-import {useConfigStore} from "@/app/store/configStore";
+import { useConfigStore } from "@/app/store/configStore";
 
 const GamePage = () => {
-
-  const {contractConfig} = useConfigStore();
+  const { contractConfig } = useConfigStore();
   const [textVisible, setTextVisible] = useState(false);
   const [startBtnText, setStartBtnText] = useState("Start game");
   const [isButtonDisabled, setIsButtonDisabled] = useState(false);
@@ -70,7 +69,8 @@ const GamePage = () => {
       hash,
     });
 
-  const contractAddress = contractConfig.contractAddressesMap[chain?.name as string];
+  const contractAddress =
+    contractConfig.contractAddressesMap[chain?.name as string];
 
   useAccountEffect({
     onConnect(data) {
@@ -391,6 +391,7 @@ const GamePage = () => {
           isButtonDisabled={isButtonDisabled}
           handleStartGame={handleStartGame}
           startBtnText={startBtnText}
+          isConfirmingJoin={isConfirming}
         />
         {textVisible && (
           <div className="relative" onClick={handleClickFormattedText}>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -145,11 +145,12 @@ export default function Home() {
           <div className="self-start pl-40 h-8">{streamingText}</div>
         </div>
         <Image
-          width={888}
-          height={600}
+          width={0}
+          height={0}
           alt="keyboard"
           src={keyboard}
-          className="absolute -bottom-48 -right-48 -z-10 "
+          className="absolute -bottom-48 -right-48 -z-10 h-[600px] w-auto"
+          priority
         />
       </main>
       <Footer />