better errors handling and improvements

CHANGELOG.md

@@ -1,3 +1,8 @@
+### [3.1.1](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v3.1.1) (2022-08-13)
+- better errors catching when API is down
+- fixes in displaying the numeric values
+- fixes in memo usage
+
 ### [3.1.0](https://github.com/ElvenTools/elven-tools-dapp/releases/tag/v3.1.0) (2022-08-06)
 - dependencies updates (erdjs libs, nextjs and others)
 - small adjustments in the code

components/Hero.tsx

@@ -26,6 +26,9 @@ export const Hero = () => {
       type: SCQueryType.STRING,
     });
 
+  const minted =
+    collectionSize && totalTokensLeft ? collectionSize - totalTokensLeft : 0;
+
   return (
     <Box width="100%">
       <Text
@@ -85,7 +88,7 @@ export const Hero = () => {
         }}
       >
         <CollectionInfoBox
-          content={collectionTicker || ''}
+          content={collectionTicker || '-'}
           label="Collection ticker. Click for details."
           isLoading={collectionTickerLoading}
           href={`${networkConfig[chainType].explorerAddress}/collections/${collectionTicker}`}
@@ -104,7 +107,7 @@ export const Hero = () => {
           }
         />
         <CollectionInfoBox
-          content={`${collectionSize - totalTokensLeft} / ${collectionSize}`}
+          content={`${minted} / ${collectionSize || 0}`}
           isLoading={collectionSizeLoading || totalTokensLeftIsLoading}
           label="Minted per collection supply"
         />

components/MainLayout.tsx

@@ -1,32 +1,29 @@
 import { Container, Box } from '@chakra-ui/react';
-import { FC, memo, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { MetaHead, MetaHeadProps } from './MetaHead';
 import { Footer } from './Footer';
 
-export const MainLayout: FC<PropsWithChildren<MetaHeadProps>> = memo(
-  ({ children, metaTitle, metaDescription, metaImage, metaUrl }) => {
-    return (
-      <>
-        <MetaHead
-          metaTitle={metaTitle}
-          metaDescription={metaDescription}
-          metaImage={metaImage}
-          metaUrl={metaUrl}
-        />
-        <Box minHeight="calc(100vh - 120px)" pb="48">
-          <Container maxW="container.xl">
-            <Box>{children}</Box>
-          </Container>
-        </Box>
-        <Footer />
-      </>
-    );
-  },
-  (prev, next) =>
-    prev.metaTitle === next.metaTitle &&
-    prev.metaDescription === next.metaDescription &&
-    prev.metaImage === next.metaImage &&
-    prev.metaUrl === next.metaUrl
-);
-
-MainLayout.displayName = 'MainLayout';
+export const MainLayout: FC<PropsWithChildren<MetaHeadProps>> = ({
+  children,
+  metaTitle,
+  metaDescription,
+  metaImage,
+  metaUrl,
+}) => {
+  return (
+    <>
+      <MetaHead
+        metaTitle={metaTitle}
+        metaDescription={metaDescription}
+        metaImage={metaImage}
+        metaUrl={metaUrl}
+      />
+      <Box minHeight="calc(100vh - 120px)" pb="48">
+        <Container maxW="container.xl">
+          <Box>{children}</Box>
+        </Container>
+      </Box>
+      <Footer />
+    </>
+  );
+};

components/MintHero.tsx

@@ -216,8 +216,8 @@ export const MintHero = () => {
       {!mintingPaused ? (
         <Box mt={6}>
           <NFTLeftToMint
-            data={totalTokensLeft}
-            dropData={dropData}
+            data={totalTokensLeft || 0}
+            dropData={dropData || 0}
             dataLoading={dropActive ? dropIsLoading : totalIsLoading}
           />
           <Box>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "elven-tools-dapp",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "author": "Julian Ćwirko <julian.io>",
   "license": "MIT",
   "homepage": "https://www.elven.tools",

pages/_app.tsx

@@ -12,13 +12,37 @@ import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
 import { useElrondNetworkSync } from '../hooks/auth/useElrondNetworkSync';
 import { theme } from '../config/chakraTheme';
+import { SWRConfig } from 'swr';
+import { useToast } from '@chakra-ui/react';
+import { useCallback } from 'react';
+
+const toastId = 'elven-tools-error-toast';
 
 const ElvenToolsDapp = ({ Component, pageProps }: AppProps) => {
   useElrondNetworkSync();
+  const toast = useToast();
+
+  const handleErrorToast = useCallback(() => {
+    if (!toast.isActive(toastId)) {
+      toast({
+        id: toastId,
+        variant: 'subtle',
+        title: 'API error!',
+        description:
+          'The API is not responding at the moment. Please try later.',
+        status: 'error',
+        duration: 10000,
+        isClosable: true,
+      });
+    }
+  }, [toast]);
+
   return (
-    <ChakraProvider theme={theme}>
-      <Component {...pageProps} />
-    </ChakraProvider>
+    <SWRConfig value={{ onError: handleErrorToast }}>
+      <ChakraProvider theme={theme}>
+        <Component {...pageProps} />
+      </ChakraProvider>
+    </SWRConfig>
   );
 };