Feature/ik/smart wallet integration (#191)

* update deps for smartwallet * add base sepolia config * add smart wallet connect button raw * update deps for smartwallet * fix smartwallet button visibility & text color, fix curryncy symbol at user profile * show blockExplorer links depending on chosen network * add base sepolia faucets & update faucets show depending on chain id * add logic to use smartwallet batch transactions on deposit and join, update web3provider to export wagmiconfig * add logic for deposit&join as batch transactions with 0 ingame balance before start game
t0lia · Jun 29, 2024 · 88089d7 · 88089d7
1 parent 2555f9d
commit 88089d7
Show file tree

Hide file tree

Showing 2 changed files with 93 additions and 27 deletions.
diff --git a/frontend/src/app/components/start-deposit-button/startDepositButton.tsx b/frontend/src/app/components/start-deposit-button/startDepositButton.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { useModal, useSIWE } from "connectkit";
 import {
@@ -8,7 +8,7 @@ import {
 } from "wagmi";
 import { Address, keccak256, parseEther, toBytes } from "viem";
 
-import { RaceStatistic } from "@/app/api/ws-api-service";
+import WsApiService, { RaceStatistic } from "@/app/api/ws-api-service";
 import {
   CHAIN_ID_AMOY_DECIMAL,
   CHAIN_ID_BLAST_SEPOLIA_DECIMAL,
@@ -22,7 +22,11 @@ import { Button } from "@/app/components/ui/button";
 import { useConfigStore } from "@/app/store/configStore";
 import Spinner from "@/app/components/ui/spinner";
 import { useQueryClient } from "@tanstack/react-query";
-import { writeContracts } from "@wagmi/core/experimental";
+import {
+  writeContracts,
+  showCallsStatus,
+  getCallsStatus,
+} from "@wagmi/core/experimental";
 import { wagmiConfig } from "@/app/helpers/web3-provider";
 
 interface IStartDepositButton {
@@ -32,6 +36,7 @@ interface IStartDepositButton {
   handleStartGame: () => void;
   startBtnText: string;
   isConfirmingJoin: boolean;
+  handleBatchStartGame: () => void;
 }
 
 function StartDepositButton({
@@ -41,7 +46,9 @@ function StartDepositButton({
   handleStartGame,
   startBtnText,
   isConfirmingJoin,
+  handleBatchStartGame,
 }: IStartDepositButton) {
+  const [batchStatusConfirmed, setBatchStatusConfirmed] = useState(false);
   const { contractConfig } = useConfigStore();
   const { isSignedIn, signIn } = useSIWE();
   const { isConnected, chainId, address, chain, connector } = useAccount();
@@ -51,6 +58,7 @@ function StartDepositButton({
   const contractAddress =
     contractConfig.contractAddressesMap[chain?.name as string];
   const queryClient = useQueryClient();
+  const wsApiServiceRef = useRef<WsApiService | null>(null);
 
   async function signInWithEthereum(): Promise<void> {
     await signIn();
@@ -66,25 +74,34 @@ function StartDepositButton({
       return;
     }
     if (connector?.id === "coinbaseWalletSDK") {
-      const sessionId = sessionStorage.getItem("sessionId");
-      const hashSessionId = keccak256(toBytes(sessionId as string));
-      writeContracts(wagmiConfig, {
-        contracts: [
-          {
-            address: contractAddress as Address,
-            abi: contractConfig.abi,
-            functionName: "deposit",
-            args: [],
-            value: parseEther("0.001"),
-          },
-          {
-            address: contractAddress as Address,
-            abi: contractConfig.abi,
-            functionName: "joinGame",
-            args: [hashSessionId],
-          },
-        ],
-      });
+      handleBatchStartGame();
+      // const sessionId = sessionStorage.getItem("sessionId");
+      // const hashSessionId = keccak256(toBytes(sessionId as string));
+      // const id = await writeContracts(wagmiConfig, {
+      //   // account: address,
+      //   contracts: [
+      //     {
+      //       address: contractAddress as Address,
+      //       abi: contractConfig.abi,
+      //       functionName: "deposit",
+      //       args: [],
+      //       value: parseEther("0.001"),
+      //     },
+      //     {
+      //       address: contractAddress as Address,
+      //       abi: contractConfig.abi,
+      //       functionName: "joinGame",
+      //       args: [hashSessionId],
+      //     },
+      //   ],
+      // });
+      // console.log("ID", id);
+      // await showCallsStatus(wagmiConfig, { id: id });
+      // const status = await getCallsStatus(wagmiConfig, { id: id });
+      // console.log("STATus", status);
+      // if (status.status === "CONFIRMED") {
+      //   setBatchStatusConfirmed(true);
+      // }
     } else {
       writeContract({
         address: contractAddress as Address,
@@ -106,7 +123,18 @@ function StartDepositButton({
     if (isConfirmed) {
       queryClient.invalidateQueries({ queryKey });
     }
-  }, [isConfirmed]);
+    if (batchStatusConfirmed) {
+      // setTxSuccessful(true);
+
+      wsApiServiceRef.current?.register(
+        localStorage.getItem("userId") ?? "",
+        address as Address
+      );
+      queryClient.invalidateQueries({ queryKey });
+      // setIsButtonDisabled(true);
+      // setUserStats([]);
+    }
+  }, [isConfirmed, batchStatusConfirmed]);
 
   const showDepositButton =
     isSignedIn &&
@@ -121,7 +149,10 @@ function StartDepositButton({
 
   return (
     <>
-      {showDepositButton && !isConfirmed && userStatus !== "registered" ? (
+      {showDepositButton &&
+      !isConfirmed &&
+      userStatus !== "registered" &&
+      !batchStatusConfirmed ? (
         <Button onClick={handleUserDeposit}>
           {isConfirming && <Spinner />}
           {`Deposit 0.001 ${

diff --git a/frontend/src/app/game/[id]/page.tsx b/frontend/src/app/game/[id]/page.tsx
@@ -25,12 +25,18 @@ import ClaimWinningsButton from "@/app/components/claim-winnings-button/claimWin
 import StartDepositButton from "@/app/components/start-deposit-button/startDepositButton";
 
 import { useWriteContract } from "wagmi";
-import { Address, keccak256, toBytes } from "viem";
+import { Address, keccak256, parseEther, toBytes } from "viem";
 
 import "./page.css";
 import getUserGameBalance from "@/app/contract-utils/get-user-game-balance";
 import { useConfigStore } from "@/app/store/configStore";
 import { useQueryClient } from "@tanstack/react-query";
+import { wagmiConfig } from "@/app/helpers/web3-provider";
+import {
+  writeContracts,
+  showCallsStatus,
+  getCallsStatus,
+} from "@wagmi/core/experimental";
 
 const GamePage = () => {
   const { contractConfig } = useConfigStore();
@@ -53,6 +59,7 @@ const GamePage = () => {
     errors: [],
     users: [],
   });
+  const [batchStatusConfirmed, setBatchStatusConfirmed] = useState(false);
 
   const { openSwitchNetworks, setOpen } = useModal();
   const { isSignedIn } = useSIWE();
@@ -236,9 +243,36 @@ const GamePage = () => {
     });
   }, [address, startBtnText, router]);
 
+  const handleBatchStartGame = async () => {
+    const sessionId = sessionStorage.getItem("sessionId");
+    const hashSessionId = keccak256(toBytes(sessionId as string));
+    const id = await writeContracts(wagmiConfig, {
+      contracts: [
+        {
+          address: contractAddress as Address,
+          abi: contractConfig.abi,
+          functionName: "deposit",
+          args: [],
+          value: parseEther("0.001"),
+        },
+        {
+          address: contractAddress as Address,
+          abi: contractConfig.abi,
+          functionName: "joinGame",
+          args: [hashSessionId],
+        },
+      ],
+    });
+    await showCallsStatus(wagmiConfig, { id: id });
+    const status = await getCallsStatus(wagmiConfig, { id: id });
+    if (status.status === "CONFIRMED") {
+      setBatchStatusConfirmed(true);
+    }
+  };
+
   const { queryKey } = getUserGameBalance();
   useEffect(() => {
-    if (isConfirmed) {
+    if (isConfirmed || batchStatusConfirmed) {
       setTxSuccessful(true);
 
       wsApiServiceRef.current?.register(
@@ -249,7 +283,7 @@ const GamePage = () => {
       setIsButtonDisabled(true);
       setUserStats([]);
     }
-  }, [isConfirmed]);
+  }, [isConfirmed, batchStatusConfirmed]);
 
   function checkEqualHandler(e: React.ChangeEvent<HTMLInputElement>) {
     const enteredText = e.target.value;
@@ -383,6 +417,7 @@ const GamePage = () => {
           handleStartGame={handleStartGame}
           startBtnText={startBtnText}
           isConfirmingJoin={isConfirming}
+          handleBatchStartGame={handleBatchStartGame}
         />
         {textVisible && (
           <div className="relative" onClick={handleClickFormattedText}>