From d3f4f1ac45e752a5fb667ecd355c6a6e93342ffc Mon Sep 17 00:00:00 2001 From: refined-x Date: Thu, 1 Feb 2024 15:45:54 +0800 Subject: [PATCH 1/5] chore: pre --- package.json | 4 +- src/pages/game/_components/GameOver.tsx | 87 +++++++++++++- src/pages/game/_components/Header.tsx | 143 +----------------------- 3 files changed, 88 insertions(+), 146 deletions(-) diff --git a/package.json b/package.json index 894eda8..2fc3851 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite --open", + "dev": "vite --port 3000 --open", "build:dev": "tsc && vite build --mode development && cp dist/index.html dist/404.html", "build": "tsc && vite build && cp dist/index.html dist/404.html", "lint": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0", @@ -53,4 +53,4 @@ "vite": "^5.0.7", "vite-plugin-svgr": "^4.2.0" } -} +} \ No newline at end of file diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx index 729ec2e..cf18a97 100644 --- a/src/pages/game/_components/GameOver.tsx +++ b/src/pages/game/_components/GameOver.tsx @@ -1,7 +1,12 @@ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ /* eslint-disable @typescript-eslint/no-unsafe-argument */ import { BaseError, ContractFunctionRevertedError } from "viem"; -import { useWaitForTransactionReceipt } from "wagmi"; +import { + useWaitForTransactionReceipt, + useBalance, + useBlockNumber, + useAccount, +} from "wagmi"; import { useState, useEffect } from "react"; import FileSaver from "file-saver"; import { generatePublicInput, gameState } from "../_utils"; @@ -18,6 +23,7 @@ import { useWriteContract } from "wagmi"; import { useStateStore } from "@/store"; import fetch from "isomorphic-fetch"; import { Actor, HttpAgent } from "@dfinity/agent"; +import { useQueryClient } from "@tanstack/react-query"; const agent = new HttpAgent({ fetch, host: "https://ic0.app" }); @@ -25,7 +31,52 @@ const canisterId = import.meta.env.VITE_APP_CANISTERID; const actor = Actor.createActor(idlFactory, { agent, canisterId }); const ContractAddress = import.meta.env.VITE_APP_CONTRACT_ADDRESS; +{ + /* 2000000000000000n */ +} +/** + * + + * **/ export const GameOver = ({ onRefresh, onExit, @@ -33,6 +84,16 @@ export const GameOver = ({ onRefresh: () => void; onExit: () => void; }) => { + const { address } = useAccount(); + const { data: blockNumber } = useBlockNumber({ watch: true }); + const { data: balanceData, queryKey } = useBalance({ + address, + }); + const queryClient = useQueryClient(); + useEffect(() => { + void queryClient.invalidateQueries({ queryKey }); + }, [blockNumber, queryClient, queryKey]); + const { path } = gameState; const [step, setStep] = useState(0); const [zkpResult, setZkpResult] = useState(); @@ -86,7 +147,7 @@ export const GameOver = ({ }, { prefix: ">", - content: "1/4 Generate Zero Knowledge Proof locally", + content: "Generate Zero Knowledge Proof locally", class: "text-success", run: () => { return new Promise((resolve, reject) => { @@ -126,9 +187,25 @@ export const GameOver = ({ }); }, }, + { + prefix: "$", + content: ( + <> + Go next? + + + ), + class: "text-warning", + run: () => {}, + }, { prefix: ">", - content: "2/4 Verify proof on decentralized network", + content: "Verify proof on decentralized network", class: "text-success", run: () => { return new Promise((resolve, reject) => { @@ -155,7 +232,7 @@ export const GameOver = ({ }, { prefix: ">", - content: "3/4 Write verification on Arbitrum blockchain", + content: "Write verification on Arbitrum blockchain", class: "text-success", run: () => { return new Promise((resolve, reject) => { @@ -212,7 +289,7 @@ export const GameOver = ({ }, { prefix: ">", - content: "4/4 Determination of achievement on chain", + content: "Determination of achievement on chain", class: "text-success", run: () => { return new Promise((resolve) => { diff --git a/src/pages/game/_components/Header.tsx b/src/pages/game/_components/Header.tsx index abfad06..92910e0 100644 --- a/src/pages/game/_components/Header.tsx +++ b/src/pages/game/_components/Header.tsx @@ -1,12 +1,5 @@ - import { useImperativeHandle, forwardRef, useEffect } from "react"; -import { - useSwitchChain, - useReadContract, - useAccount, - useBalance, - useBlockNumber, -} from "wagmi"; +import { useSwitchChain, useReadContract, useAccount } from "wagmi"; import { useWeb3ModalState } from "@web3modal/wagmi/react"; import { useDispatchStore } from "@/store"; import { @@ -16,41 +9,20 @@ import { RESULT_DESCRIPTION, } from "@/constants"; import { dispatch as dispatchGameState, Chain } from "../_utils"; -// import { getETH } from "@/api/zkp"; -// import { toast } from "react-toastify"; -import { useQueryClient } from "@tanstack/react-query"; const ContractAddress = import.meta.env.VITE_APP_CONTRACT_ADDRESS; // eslint-disable-next-line react/display-name const Header = forwardRef((_props, ref) => { - const queryClient = useQueryClient(); - const { data: blockNumber } = useBlockNumber({ watch: true }); - const dispatch = useDispatchStore(); const { selectedNetworkId } = useWeb3ModalState(); const { error, isPending, switchChain } = useSwitchChain(); const { address } = useAccount(); - const { - data: balanceData, - isLoading: isBalanceLoading, - queryKey, - } = useBalance({ - address, - }); - - useEffect(() => { - void queryClient.invalidateQueries({ queryKey }); - }, [blockNumber, queryClient, queryKey]); useEffect(() => { - if ( - String(selectedNetworkId) === String(Chain.id) && - !isBalanceLoading && - !(Number(balanceData?.value || 0) < 2000000000000000n) - ) { - console.log("game is ready", balanceData); + if (String(selectedNetworkId) === String(Chain.id)) { + console.log("game is ready"); dispatchGameState && dispatchGameState({ type: "ready", @@ -71,7 +43,7 @@ const Header = forwardRef((_props, ref) => { }, }); } - }, [selectedNetworkId, isBalanceLoading, balanceData, switchChain]); + }, [selectedNetworkId, switchChain]); const { data, @@ -106,33 +78,6 @@ const Header = forwardRef((_props, ref) => { [refetch] ); - // const [sendETHLoading, setSendETHLoading] = useState(false); - // const sendETH = () => { - // if (address && !sendETHLoading) { - // setSendETHLoading(true); - // void getETH({ - // ethAddress: address, - // }) - // .then((res) => { - // if (res.data.txHash) { - // toast.success("Send ETH Success!"); - // // window.open( - // // `${Chain.blockExplorers.default.url}/tx/${res.data.txHash}` - // // ); - // } else { - // toast.error("api error!"); - // } - // }) - // .catch((err) => { - // // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - // toast.error(err?.message || "fetch fail!"); - // }) - // .finally(() => { - // setSendETHLoading(false); - // }); - // } - // }; - return ( <>
@@ -239,86 +184,6 @@ const Header = forwardRef((_props, ref) => { )} )} - {String(selectedNetworkId) === String(Chain.id) && - Number(balanceData?.value || 0) < 2000000000000000n && ( -
-
- - - - - Minimum 0.002 ETH required. Your balance: - {balanceData?.formatted || 0} - {balanceData?.symbol}. - -
- {/* */} - - {/* https://faucet.quicknode.com/arbitrum/sepolia/ */} - -
-
-
- )} ); }); From 04239fa9402c31c42070187709a42aa14c124464 Mon Sep 17 00:00:00 2001 From: refined-x Date: Thu, 1 Feb 2024 15:54:10 +0800 Subject: [PATCH 2/5] chore: pre --- src/pages/game/_components/GameOver.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx index cf18a97..296f4d2 100644 --- a/src/pages/game/_components/GameOver.tsx +++ b/src/pages/game/_components/GameOver.tsx @@ -198,10 +198,18 @@ export const GameOver = ({ > [Yes] + ), class: "text-warning", - run: () => {}, + run: () => { + return new Promise((resolve) => resolve(true)); + }, }, { prefix: ">", From 1f4cb6d27b172353a777b18bc0301cb6f5c6ebd2 Mon Sep 17 00:00:00 2001 From: tower1229 Date: Thu, 1 Feb 2024 19:44:13 +0800 Subject: [PATCH 3/5] feat: user select --- src/pages/game/_components/GameOver.tsx | 161 ++++++++++++++---------- 1 file changed, 93 insertions(+), 68 deletions(-) diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx index 296f4d2..5738df3 100644 --- a/src/pages/game/_components/GameOver.tsx +++ b/src/pages/game/_components/GameOver.tsx @@ -7,7 +7,7 @@ import { useBlockNumber, useAccount, } from "wagmi"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useRef } from "react"; import FileSaver from "file-saver"; import { generatePublicInput, gameState } from "../_utils"; import { @@ -31,52 +31,7 @@ const canisterId = import.meta.env.VITE_APP_CANISTERID; const actor = Actor.createActor(idlFactory, { agent, canisterId }); const ContractAddress = import.meta.env.VITE_APP_CONTRACT_ADDRESS; -{ - /* 2000000000000000n */ -} -/** - * - - * **/ export const GameOver = ({ onRefresh, onExit, @@ -84,15 +39,21 @@ export const GameOver = ({ onRefresh: () => void; onExit: () => void; }) => { + const balanceData = useRef(0n); const { address } = useAccount(); const { data: blockNumber } = useBlockNumber({ watch: true }); - const { data: balanceData, queryKey } = useBalance({ + const { data: balance, queryKey } = useBalance({ address, }); const queryClient = useQueryClient(); useEffect(() => { void queryClient.invalidateQueries({ queryKey }); }, [blockNumber, queryClient, queryKey]); + useEffect(() => { + if (balance?.value) { + balanceData.current = balance.value; + } + }, [balance]); const { path } = gameState; const [step, setStep] = useState(0); @@ -121,6 +82,10 @@ export const GameOver = ({ } }, [contractResult, onRefresh]); + const userSelect = useRef(); + + const hiddenStepIndex = useRef([]); + const SettlementProgress = [ { prefix: "$", @@ -191,24 +156,82 @@ export const GameOver = ({ prefix: "$", content: ( <> - Go next? + Verify result to Arbitrum Sepolia blockchain? + {userSelect.current !== false && ( + + )} + {userSelect.current !== true && ( + + )} + + ), + class: "", + run: () => { + return new Promise((resolve, reject) => { + const timer = setInterval(() => { + if (userSelect.current === true) { + clearInterval(timer); + resolve(true); + } else if (userSelect.current === false) { + clearInterval(timer); + reject(`User Cancel!`); + } + }, 200); + }); + }, + }, + { + prefix: "$", + content: ( + <> + Minimum 0.002 ETH required. ), - class: "text-warning", + class: "text-error", run: () => { - return new Promise((resolve) => resolve(true)); + return new Promise((resolve) => { + const timer = setInterval(() => { + console.log("balance=", balanceData.current); + if (balanceData.current > 2000000000000000n) { + hiddenStepIndex.current = [4]; + clearInterval(timer); + resolve(true); + } + }, 1000); + }); }, }, { @@ -331,18 +354,20 @@ export const GameOver = ({ return (
- {SettlementProgress.slice(0, step + 1).map((log, index) => ( - 
-            {step === index && !errorMsg && (
-              
-            )}
-            {log.content}
-
- ))} + {SettlementProgress.slice(0, step + 1).map((log, index) => { + return hiddenStepIndex.current.includes(index) ? null : ( + 
+              {step === index && !errorMsg && (
+                
+              )}
+              {log.content}
+
+ ); + })} {SettlementOver && ( 
Date: Thu, 1 Feb 2024 19:56:36 +0800
Subject: [PATCH 4/5] fix: ui fix

---
 src/pages/game/_components/GameOver.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx
index 5738df3..61b8fb4 100644
--- a/src/pages/game/_components/GameOver.tsx
+++ b/src/pages/game/_components/GameOver.tsx
@@ -154,6 +154,7 @@ export const GameOver = ({
     },
     {
       prefix: "$",
+      hideLoading: true,
       content: (
         <>
           Verify result to Arbitrum Sepolia blockchain?
@@ -361,7 +362,7 @@ export const GameOver = ({
               className={errorMsg && step === index ? " text-error" : log.class}
               key={index}
             >
-              {step === index && !errorMsg && (
+              {step === index && !errorMsg && !log.hideLoading && (
                 
               )}
               {log.content}

From ec1a7b78323253d55514e135d307706dd94be297 Mon Sep 17 00:00:00 2001
From: refined-x 
Date: Fri, 2 Feb 2024 10:27:36 +0800
Subject: [PATCH 5/5] chore: update world

---
 src/pages/game/_components/GameOver.tsx | 43 ++++++++++++++++---------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/pages/game/_components/GameOver.tsx b/src/pages/game/_components/GameOver.tsx
index 61b8fb4..0d0083a 100644
--- a/src/pages/game/_components/GameOver.tsx
+++ b/src/pages/game/_components/GameOver.tsx
@@ -89,7 +89,7 @@ export const GameOver = ({
   const SettlementProgress = [
     {
       prefix: "$",
-      content: "Game completed!",
+      content: ["Game completed!"],
       run: () => {
         return new Promise((resolve) => {
           setTimeout(() => {
@@ -100,7 +100,7 @@ export const GameOver = ({
     },
     {
       prefix: ">",
-      content: "Settlement in progress...",
+      content: ["Settlement in progress..."],
       class: "text-warning",
       run: () => {
         return new Promise((resolve) => {
@@ -112,7 +112,7 @@ export const GameOver = ({
     },
     {
       prefix: ">",
-      content: "Generate Zero Knowledge Proof locally",
+      content: ["Generate Zero Knowledge Proof locally"],
       class: "text-success",
       run: () => {
         return new Promise((resolve, reject) => {
@@ -155,9 +155,9 @@ export const GameOver = ({
     {
       prefix: "$",
       hideLoading: true,
-      content: (
+      content: [
+        "Post game result to Arbitrum Sepolia?",
         <>
-          Verify result to Arbitrum Sepolia blockchain?
           {userSelect.current !== false && (
             
-        
-      ),
+        ,
+      ],
       class: "text-error",
       run: () => {
         return new Promise((resolve) => {
@@ -237,7 +237,7 @@ export const GameOver = ({
     },
     {
       prefix: ">",
-      content: "Verify proof on decentralized network",
+      content: ["Verify proof on a decentralized network"],
       class: "text-success",
       run: () => {
         return new Promise((resolve, reject) => {
@@ -264,7 +264,7 @@ export const GameOver = ({
     },
     {
       prefix: ">",
-      content: "Write verification on Arbitrum blockchain",
+      content: ["Post verification to Arbitrum Sepolia"],
       class: "text-success",
       run: () => {
         return new Promise((resolve, reject) => {
@@ -321,7 +321,7 @@ export const GameOver = ({
     },
     {
       prefix: ">",
-      content: "Determination of achievement on chain",
+      content: ["Determine achievement on-chain"],
       class: "text-success",
       run: () => {
         return new Promise((resolve) => {
@@ -365,7 +365,20 @@ export const GameOver = ({
               {step === index && !errorMsg && !log.hideLoading && (
                 
               )}
-              {log.content}
+              {log.content.map((cont, index) => (
+                 0
+                      ? {
+                          display: "block",
+                          paddingLeft: "40px",
+                        }
+                      : {}
+                  }
+                >
+                  {cont}
+                
+              ))}
); })}