better error handling

cartridge-gg · Mar 29, 2024 · 5516eb5 · 5516eb5
1 parent 4e13166
commit 5516eb5
Show file tree

Hide file tree

Showing 19 changed files with 421 additions and 261 deletions.
diff --git a/web/public/sounds/Door.mp3 b/web/public/sounds/Door.mp3
diff --git a/web/src/components/RegisterEntities.tsx b/web/src/components/RegisterEntities.tsx
@@ -1,5 +1,5 @@
 import { DojoEvent } from "@/dojo/class/Events";
-import { HighVolatilityData, MeetOGData } from "@/dojo/events";
+import { HighVolatilityData } from "@/dojo/events";
 import { WorldEvents } from "@/dojo/generated/contractEvents";
 import { useConfigStore, useDojoContext, useGameStore, useRouterContext } from "@/dojo/hooks";
 import { ConfigStoreClass } from "@/dojo/stores/config";
@@ -28,20 +28,15 @@ const RegisterEntities = observer(() => {
   const toaster = useToast();
 
   useEffect(() => {
-    // const init = async () => {
-    //   // if (!gameId) {
-    //   //   gameStore.reset();
-    //   // }
-    // };
-
+
     console.log("RegisterEntities", gameId);
 
     if (gameStore && gameId) {
       gameStore.init(gameId);
     } else {
       gameStore.reset();
     }
-  }, [gameId, account?.address, playerId, selectedChain, gameStore]);
+  }, [gameId, gameStore]);
 
   //
   useEffect(() => {
@@ -70,11 +65,11 @@ const RegisterEntities = observer(() => {
       //   break;
 
       case WorldEvents.MeetOG:
-        const meetOgEvent = last.parsed as MeetOGData;
-        setOgId(meetOgEvent.ogId);
-        setTimeout(() => {
-          setOgId(undefined);
-        }, 10_000);
+        // const meetOgEvent = last.parsed as MeetOGData;
+        // setOgId(meetOgEvent.ogId);
+        // setTimeout(() => {
+        //   setOgId(undefined);
+        // }, 10_000);
         break;
 
       case WorldEvents.HighVolatility:

diff --git a/web/src/components/layout/ConnectionError.tsx b/web/src/components/layout/ConnectionError.tsx
@@ -0,0 +1,45 @@
+import { Button, Flex, Text, VStack } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+import { ChainSelector } from "../wallet";
+
+const ConnectionError = ({ errors }: { errors: string[] }) => {
+  const router = useRouter();
+
+  return (
+    <Flex minH="100vh" alignItems="center" justifyContent="center">
+      <VStack>
+        <VStack fontSize="16px">
+          <VStack fontSize="16px">
+            <Text>Unable to connect</Text>
+            {errors.map((e) => {
+              if (e) {
+                return <Text>{e}</Text>;
+              }
+            })}
+          </VStack>
+
+          <VStack fontSize="16px" gap={6}>
+            <Text>Try to refresh</Text>
+            <Button
+              variant="pixelated"
+              onClick={() => {
+                router.reload();
+              }}
+            >
+              REFRESH
+            </Button>
+            <Text>or switch chain</Text>
+            <ChainSelector
+              canChange={true}
+              onChange={() => {
+                router.reload();
+              }}
+            />
+          </VStack>
+        </VStack>
+      </VStack>
+    </Flex>
+  );
+};
+
+export default ConnectionError;
diff --git a/web/src/components/layout/Loader.tsx b/web/src/components/layout/Loader.tsx
@@ -1,5 +1,10 @@
-import { Image } from "@chakra-ui/react";
+import { Image, Text, VStack } from "@chakra-ui/react";
 
 export const Loader = () => {
-  return <Image src="images/loading.gif" alt="loading" width="60px" height="60px" margin="auto" />;
+  return (
+    <VStack gap={3}>
+      <Image src="/images/loading.gif" alt="loading" width="60px" height="60px" margin="auto" />
+      <Text fontFamily="broken-console" fontSize="12px" color="neon.500">LOADING ...</Text>
+    </VStack>
+  );
 };
diff --git a/web/src/components/player/Inventory.tsx b/web/src/components/player/Inventory.tsx
@@ -7,6 +7,7 @@ import { observer } from "mobx-react-lite";
 import { Tooltip } from "../common";
 import { Bag, Cigarette, PawnshopIcon } from "../icons";
 
+import { Sounds, playSound } from "@/hooks/sound";
 import colors from "@/theme/colors";
 import { useAccount } from "@starknet-react/core";
 import { PowerMeter } from "./PowerMeter";
@@ -98,6 +99,7 @@ export const Inventory = observer(({ hidePawnshop = false, ...props }: StyleProp
             animation={game.isShopOpen ? `${blinkAnim} 6s linear infinite` : "none"}
             onClick={() => {
               if (game.isShopOpen) {
+                playSound(Sounds.Door, 0.5)
                 router.push(`/${gameId}/pawnshop`);
               }
             }}

diff --git a/web/src/components/wallet/ChainSelector.tsx b/web/src/components/wallet/ChainSelector.tsx
@@ -3,7 +3,12 @@ import { DojoChainConfig, SupportedChainIds } from "@/dojo/setup/config";
 import { Button, Menu, MenuButton, MenuItem, MenuList, Text } from "@chakra-ui/react";
 import { useDisconnect } from "@starknet-react/core";
 
-export const ChainSelector = ({ canChange = false }: { canChange: boolean }) => {
+type ChainSelectorProps = {
+  canChange: boolean;
+  onChange: VoidFunction;
+};
+
+export const ChainSelector = ({ canChange = false, onChange = () => {} }: ChainSelectorProps) => {
   const {
     chains: { dojoContextConfig, selectedChain, setSelectedChain },
   } = useDojoContext();
@@ -13,10 +18,11 @@ export const ChainSelector = ({ canChange = false }: { canChange: boolean }) =>
   const onSelectChain = async (chain: DojoChainConfig) => {
     await disconnectAsync();
     setSelectedChain(chain);
+    onChange();
   };
 
   const getInfos = (chain: DojoChainConfig) => {
-   return `RPC: ${chain.rpcUrl}\nTORII: ${chain.toriiUrl}\nTORII WS: ${chain.toriiWsUrl}`
+    return `RPC: ${chain.rpcUrl}\nTORII: ${chain.toriiUrl}\nTORII WS: ${chain.toriiWsUrl}`;
   };
 
   return (
@@ -28,27 +34,32 @@ export const ChainSelector = ({ canChange = false }: { canChange: boolean }) =>
       )}
 
       {canChange && (
-          <Menu>
-            <MenuButton title={getInfos(selectedChain)} as={Button} variant="pixelated" h="48px" /*rightIcon={<Arrow direction='down' />}*/>
-              {selectedChain.name}
-            </MenuButton>
-
-            <MenuList>
-              {Object.keys(dojoContextConfig).map((key: string) => {
-                const dojoChainConfig: DojoChainConfig = dojoContextConfig[key as SupportedChainIds];
-
-                if (dojoChainConfig === selectedChain) return;
-                const isMainnet = dojoChainConfig.chainConfig.network === "mainnet";
-                return (
-                  <MenuItem key={key} onClick={() => onSelectChain(dojoChainConfig)}>
-                    <Text>
-                      {dojoChainConfig.name} ({isMainnet ? "RANKED" : "FREE"})
-                    </Text>
-                  </MenuItem>
-                );
-              })}
-            </MenuList>
-          </Menu>
+        <Menu>
+          <MenuButton
+            title={getInfos(selectedChain)}
+            as={Button}
+            variant="pixelated"
+            h="48px" /*rightIcon={<Arrow direction='down' />}*/
+          >
+            {selectedChain.name}
+          </MenuButton>
+
+          <MenuList>
+            {Object.keys(dojoContextConfig).map((key: string) => {
+              const dojoChainConfig: DojoChainConfig = dojoContextConfig[key as SupportedChainIds];
+
+              if (dojoChainConfig === selectedChain) return;
+              const isMainnet = dojoChainConfig.chainConfig.network === "mainnet";
+              return (
+                <MenuItem key={key} onClick={() => onSelectChain(dojoChainConfig)}>
+                  <Text>
+                    {dojoChainConfig.name} ({isMainnet ? "RANKED" : "FREE"})
+                  </Text>
+                </MenuItem>
+              );
+            })}
+          </MenuList>
+        </Menu>
       )}
     </>
   );

diff --git a/web/src/components/wallet/Connect.tsx b/web/src/components/wallet/Connect.tsx
@@ -196,13 +196,13 @@ const ConnectModal = ({
             {connectors.map((connector) => {
               const isBurner = connector.id === "dojoburner";
               const isPredeployed = connector.id === "dojopredeployed";
-            
+
               if (!isKatana && (isBurner || isPredeployed)) {
                 // burner or predeployed not on katana
                 return null;
               }
 
-              if (isKatana && !(isBurner || isPredeployed )) {
+              if (isKatana && !(isBurner || isPredeployed)) {
                 // not burner or predeployed on katana
                 return null;
               }
@@ -249,6 +249,8 @@ const ConnectModal = ({
 };
 
 export const ChildrenOrConnect = ({ children }: { children: ReactNode }) => {
-  const { account } = useAccount();
-  return <>{account ? children : <Connect />}</>;
+  const { /*account,*/ isConnecting, isReconnecting, isConnected } = useAccount();
+  if (isConnecting || isReconnecting) return null;
+  return <>{isConnected ? children : <Connect />}</>;
+
 };