feat: add banner when theGraph issue

real-token · Feb 7, 2024 · 8bab3d6 · 8bab3d6
1 parent 07c6470
commit 8bab3d6
Show file tree

Hide file tree

Showing 10 changed files with 69 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -21,7 +21,7 @@
     "@ethersproject/providers": "^5.6.8",
     "@gnosis.pm/safe-apps-sdk": "^7.8.0",
     "@mantine/notifications": "^7.3.1",
-    "@realtoken/realt-commons": "^1.4.5",
+    "@realtoken/realt-commons": "^1.4.6",
     "@tabler/icons": "^1.74.0",
     "@tanstack/react-table": "^8.7.9",
     "bignumber.js": "^9.0.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -32,6 +32,7 @@ import { FooterLinks } from '../src/components/footer/FooterLinks';
 
 import '@mantine/core/styles.css';
 import '@mantine/notifications/styles.css';
+import { Banners } from '../src/components/header/Banners';
 
 export const i18n = initLanguage(resources);
 
@@ -90,6 +91,7 @@ const App = ({ Component, pageProps }: AppProps) => {
                     head={<Head title='Realtoken YAM (You And Me)' description='Realtoken YAM (You And Me)'/>}
                     headerNav={<HeaderNav/>}
                     footerCustomLinks={<FooterLinks/>}
+                    headerBanner={<Banners/>}
                   >
                     <ReactQueryDevtools/>
                     <Component {...pageProps} />

diff --git a/src/components/header/Banner.module.css b/src/components/header/Banner.module.css
@@ -0,0 +1,12 @@
+.message {
+    width: 100%;
+    padding: 5px;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--mantine-color-gray-2);
+    background-color: var(--mantine-color-yellow-0);
+    color: var(--mantine-color-brand-4);
+    font-weight: 500;
+}
diff --git a/src/components/header/Banners.tsx b/src/components/header/Banners.tsx
@@ -0,0 +1,23 @@
+import { useRootStore } from "../../zustandStore/store";
+import { Flex, Text } from "@mantine/core";
+import classes from './Banner.module.css';
+import { useTranslation } from "react-i18next";
+import { IconAlertCircle } from "@tabler/icons";
+
+export const Banners = () => {
+
+    const [theGraphHasIssue] = useRootStore(state => [state.theGraphHasIssue]);
+    const { t } = useTranslation('notifications');
+
+    return(
+        <>
+        {theGraphHasIssue ? (
+            <Flex className={classes.message}>
+                <IconAlertCircle size={20} aria-label={'graph issue'} style={{ marginRight: '8px' }} />
+                <Text>{t('graphIssue')}</Text>
+            </Flex>
+        ): undefined}
+        </>
+    )
+
+}
diff --git a/src/i18next/locales/en/notifications.json b/src/i18next/locales/en/notifications.json
@@ -1,4 +1,5 @@
 {
+  "graphIssue": "There are troubles with offer loadings with TheGraph. Please be patient",
   "grantRoleLoading": {
     "title": "Copied 🎉",
     "message": "Your transaction is being validated."

diff --git a/src/i18next/locales/es/notifications.json b/src/i18next/locales/es/notifications.json
@@ -1,4 +1,5 @@
 {
+  "graphIssue": "There are troubles with offer loadings with TheGraph. Please be patient",
   "grantRoleLoading": {
     "title": "Waiting",
     "message": "Your transaction is being validated."

diff --git a/src/i18next/locales/fr/notifications.json b/src/i18next/locales/fr/notifications.json
@@ -1,4 +1,5 @@
 {
+  "graphIssue": "Il y a des soucis sur le chargements des offers avec TheGraph. Nous vous remercions d'être patient",
   "grantRoleLoading": {
     "title": "Veuillez patienter",
     "message": "Votre transaction est en cours de validation."

diff --git a/src/utils/offers/fetchOffers.ts b/src/utils/offers/fetchOffers.ts
@@ -84,12 +84,12 @@ export const getBigDataGraphRealtoken = async (
 };
 
 export const fetchOffersTheGraph = (
-  provider: JsonRpcProvider,
   account: string,
   chainId: number,
   propertiesToken: PropertiesToken[],
   wlProperties: number[],
-  prices: Price
+  prices: Price,
+  setTheGraphIssue: (value: boolean) => void
 ): Promise<Offer[]> => {
   return new Promise<Offer[]>(async (resolve, reject) => {
     try {
@@ -220,6 +220,10 @@ export const fetchOffersTheGraph = (
 
       const parsedOffers = await Promise.all(promises);
 
+      if(parsedOffers.length < offersToFetch) {
+        setTheGraphIssue(true);
+      }
+
       offersData.push(...parsedOffers);
       // // console.log('Offers formated', offersData.length);
 

diff --git a/src/zustandStore/interfaceSlice.ts b/src/zustandStore/interfaceSlice.ts
@@ -22,6 +22,9 @@ export interface InterfaceSlice {
   chainId: number;
   setChainId: (chainId: number) => void;
 
+  theGraphHasIssue: boolean;
+  setTheGraphIssue: (theGraphHasIssue: boolean) => void;
+
   getProvider: () => JsonRpcProvider;
 
   interfaceIsLoading: boolean;
@@ -75,11 +78,20 @@ export const createInterfaceSlice: StateCreator<
     setChainId: (chainId: number) => set({ chainId }),
 
     getProvider: (): JsonRpcProvider => {
-      const { chainId } = get();
-      const rpcUrl = CHAINS[chainId as ChainsID].rpcUrl;
-      return new JsonRpcProvider(rpcUrl);
+      try{
+        const { chainId } = get();
+        const rpcUrl = CHAINS[chainId as ChainsID].rpcUrl;
+        return new JsonRpcProvider(rpcUrl);
+      }catch(err){
+        console.log('Failed to get provider: ', err)
+      }finally{
+        return new JsonRpcProvider(CHAINS[ChainsID.Gnosis].rpcUrl);
+      }
     },
 
+    theGraphHasIssue: false,
+    setTheGraphIssue: (theGraphHasIssue: boolean) => set({ theGraphHasIssue }),
+
     interfaceIsLoading: true,
     setInterfaceIsLoading: (interfaceIsLoading: boolean) => set({ interfaceIsLoading }),
 
@@ -121,12 +133,12 @@ export const createInterfaceSlice: StateCreator<
     fetchOffers: async (provider) => {
       set({ offersAreLoading: true });
 
-      const { prices, properties, wlProperties, account, chainId } = get();
-  
+      const { prices, properties, wlProperties, account, chainId, setTheGraphIssue } = get();
+
       let offersData;
       if ((chainId == 1 || chainId == 100 || chainId == 5) && wlProperties && prices) {
         //offersData = await fetchOfferTheGraph(chainId,properties);
-        offersData = await fetchOffersTheGraph(provider,account,chainId, properties, wlProperties, prices);
+        offersData = await fetchOffersTheGraph(account,chainId, properties, wlProperties, prices, setTheGraphIssue);
       }
 
       set({ offers: offersData, offersAreLoading: false });

diff --git a/yarn.lock b/yarn.lock
@@ -2852,10 +2852,10 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@realtoken/realt-commons@^1.4.5":
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/@realtoken/realt-commons/-/realt-commons-1.4.5.tgz#6cb8a5ba03cf1c15c507d3ab6a959634127ba206"
-  integrity sha512-bPy28KX5IGvrqt6RWM2NWMsoqGt5BSr3xBs9sZQ6LrXp5M0e4OwWFBpjuJvaRQjvLPa3NkO8R1aKG1E76AgUdw==
+"@realtoken/realt-commons@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@realtoken/realt-commons/-/realt-commons-1.4.6.tgz#7c8d07646f862af21e813341dea2c18b6cedf57f"
+  integrity sha512-YWRU1WcoKonJRkQs5pckz9w479l3XtyDc0kl/DDTaRCKxnRMGSGzXppGzh/ZBp29wDqriIwHpkRPxtZpelscKg==
   dependencies:
     "@coinbase/wallet-sdk" "^3.6.5"
     "@emotion/react" "^11.10.6"