diff --git a/src/main.tsx b/src/main.tsx
index 3f36e15..34b0710 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -50,11 +50,7 @@ const router = createHashRouter([
}
return null;
},
- element: (
-
- {(account, provider) => }
-
- ),
+ element: {(account, provider) => },
},
{
path: 'about',
diff --git a/src/modules/common-ui/components/Connect/Connect.tsx b/src/modules/common-ui/components/Connect/Connect.tsx
index 5a67357..f761b99 100644
--- 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('');
const [error, setError] = useState(null);
- const [provider, setProvider] = useState(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(() => {
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
index 6a06a4b..e296f65 100644
--- 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(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,15 +32,36 @@ 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 };
@@ -47,53 +69,24 @@ export const Game = ({ account, provider }: GameProps) => {
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 ;