clean a little bit

immortal-tofu · Dec 6, 2023 · 0ab55e3 · 0ab55e3
1 parent deca6d8
commit 0ab55e3
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 67 deletions.
diff --git a/src/main.tsx b/src/main.tsx
@@ -50,11 +50,7 @@ const router = createHashRouter([
       }
       return null;
     },
-    element: (
-      <React.StrictMode>
-        <App>{(account, provider) => <Game account={account} provider={provider} />}</App>
-      </React.StrictMode>
-    ),
+    element: <App>{(account, provider) => <Game account={account} provider={provider} />}</App>,
   },
   {
     path: 'about',

diff --git a/src/modules/common-ui/components/Connect/Connect.tsx b/src/modules/common-ui/components/Connect/Connect.tsx
@@ -17,7 +17,8 @@ export const Connect: React.FC<{
   const [validNetwork, setValidNetwork] = useState(false);
   const [account, setAccount] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
-  const [provider, setProvider] = useState<BrowserProvider | null>(null);
+
+  const provider = new BrowserProvider(window.ethereum);
 
   const refreshAccounts = (accounts: string[]) => {
     setAccount(getAddress(accounts[0]) || '');
@@ -29,19 +30,13 @@ export const Connect: React.FC<{
     return AUTHORIZED_CHAIN_ID.includes(currentChainId.toLowerCase());
   };
 
-  const refreshNetwork = useCallback(async () => {
+  const refreshNetwork = async () => {
     if (await hasValidNetwork()) {
       setValidNetwork(true);
       await createFhevmInstance(account);
     } else {
       setValidNetwork(false);
     }
-  }, [account]);
-
-  const refreshProvider = (eth: Eip1193Provider) => {
-    const p = new BrowserProvider(eth);
-    setProvider(p);
-    return p;
   };
 
   useEffect(() => {
@@ -51,9 +46,8 @@ export const Connect: React.FC<{
       return;
     }
 
-    const p = refreshProvider(eth);
-
-    p.send('eth_accounts', [])
+    provider
+      .send('eth_accounts', [])
       .then(async (accounts: string[]) => {
         refreshAccounts(accounts);
         await refreshNetwork();
@@ -63,12 +57,9 @@ export const Connect: React.FC<{
       });
     eth.on('accountsChanged', refreshAccounts);
     eth.on('chainChanged', refreshNetwork);
-  }, [refreshNetwork]);
+  }, []);
 
   const connect = async () => {
-    if (!provider) {
-      return;
-    }
     const accounts: string[] = await provider.send('eth_requestAccounts', []);
 
     if (accounts.length > 0) {
@@ -105,7 +96,7 @@ export const Connect: React.FC<{
       });
     }
     await refreshNetwork();
-  }, [refreshNetwork]);
+  }, []);
 
   const child = useMemo<React.ReactNode>(() => {
     if (!account || !provider) {
@@ -127,7 +118,7 @@ export const Connect: React.FC<{
     }
 
     return children(account, provider);
-  }, [account, provider, validNetwork, children, switchNetwork]);
+  }, [account, validNetwork, children, switchNetwork]);
 
   if (error) {
     return (

diff --git a/src/modules/game/components/Game/Game.tsx b/src/modules/game/components/Game/Game.tsx
@@ -23,6 +23,7 @@ export const Game = ({ account, provider }: GameProps) => {
   const [gameIsRunning, setGameIsRunning] = useState<boolean>(false);
   const [players, setPlayers] = useState<{ name: string; address: string }[]>([]);
   const [endGame, setEndGame] = useState<'bad' | 'good' | 'bomb' | null>(null);
+  const [contractLoading, setContractLoading] = useState(false);
 
   const { contractAddress } = useParams();
 
@@ -31,69 +32,61 @@ export const Game = ({ account, provider }: GameProps) => {
       await provider.getSigner();
       const c = new Contract(address, abi, await provider.getSigner());
       setContract(c);
+      setContractLoading(false);
     };
 
-    if (provider && account && contractAddress) {
-      void getContract(contractAddress);
+    if (!contractLoading && !contract) {
+      setContractLoading(true);
+      void getContract(contractAddress!);
     }
-  }, [provider, account, contractAddress]);
+  }, [contractAddress]);
 
-  const onPlayerNameChanged = useCallback(
-    (player: string, name: string) => {
+  useEffect(() => {
+    const refreshPlayers = async () => {
+      if (contract) {
+        const playerWithNames: { name: string; address: string }[] = [];
+        const nop: bigint = await getReadContract(contract).numberOfPlayers();
+        for (let i = 0; i < nop; i += 1) {
+          const address = getAddress(await getReadContract(contract).players(i));
+          const name = await getReadContract(contract).name(address);
+          playerWithNames.push({ name, address });
+        }
+        setPlayers(playerWithNames);
+      }
+    };
+
+    const refreshInformations = async () => {
+      if (!contract) return;
+      const isRunning = await getReadContract(contract).gameRunning();
+      setGameIsRunning(isRunning);
+    };
+
+    const onPlayerNameChanged = (player: string, name: string) => {
       const newPlayers = players.map((p) => {
         if (p.address === getAddress(player)) {
           return { ...p, name };
         }
         return p;
       });
       setPlayers(newPlayers);
-    },
-    [players],
-  );
+    };
 
-  const onPlayerJoined = useCallback(
-    async (address: string) => {
+    const onPlayerJoined = async (address: string) => {
       if (contract) {
         const name = await getReadContract(contract).name(address);
         const newPlayers = [...players, { address, name }];
         console.log(newPlayers);
         setPlayers(newPlayers);
       }
-    },
-    [players, contract],
-  );
+    };
 
-  const onPlayerLeave = useCallback(
-    (player: string) => {
+    const onPlayerLeave = (player: string) => {
       const newPlayers = players.filter(({ address }) => address != player);
 
       console.log(newPlayers);
       setPlayers(newPlayers);
-    },
-    [players],
-  );
-
-  const refreshPlayers = useCallback(async () => {
-    if (contract) {
-      const playerWithNames: { name: string; address: string }[] = [];
-      const nop: bigint = await getReadContract(contract).numberOfPlayers();
-      for (let i = 0; i < nop; i += 1) {
-        const address = getAddress(await getReadContract(contract).players(i));
-        const name = await getReadContract(contract).name(address);
-        playerWithNames.push({ name, address });
-      }
-      setPlayers(playerWithNames);
-    }
-  }, [contract]);
-
-  const refreshInformations = useCallback(async () => {
-    if (contract) {
-      const isRunning = await getReadContract(contract).gameRunning();
-      setGameIsRunning(isRunning);
-    }
-  }, [contract]);
+    };
 
-  useEffect(() => {
     const gameHasStarted = () => {
       onNextBlock(() => {
         void new Audio(begin).play();
@@ -119,6 +112,9 @@ export const Game = ({ account, provider }: GameProps) => {
     };
 
     if (contract) {
+      console.log('on');
+      void refreshInformations();
+      void refreshPlayers();
       const gameContract = getEventContract(contract);
       void gameContract.on(gameContract.filters.GameOpen, gameHasBeenOpen);
       void gameContract.on(gameContract.filters.GameStart, gameHasStarted);
@@ -128,6 +124,7 @@ export const Game = ({ account, provider }: GameProps) => {
       void gameContract.on(gameContract.filters.GoodGuysWin, onGoodGuysWin);
       void gameContract.on(gameContract.filters.BadGuysWin, onBadGuysWin);
       return () => {
+        console.log('off');
         void gameContract.off(gameContract.filters.GameOpen, gameHasBeenOpen);
         void gameContract.off(gameContract.filters.GameStart, gameHasStarted);
         void gameContract.off(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
@@ -137,12 +134,7 @@ export const Game = ({ account, provider }: GameProps) => {
         void gameContract.off(gameContract.filters.BadGuysWin, onBadGuysWin);
       };
     }
-  }, [contract, refreshPlayers, refreshInformations, onPlayerNameChanged, onPlayerJoined, onPlayerLeave]);
-
-  useEffect(() => {
-    void refreshInformations();
-    void refreshPlayers();
-  }, [refreshInformations, refreshPlayers]);
+  }, [contract]);
 
   if (!contract) {
     return <div></div>;