hotfix(app): api error screen (#1340)

src/components/ErrorBoundary/APIError/APIError.module.scss

@@ -0,0 +1,3 @@
+.title {
+  margin-top: 20%;
+}

src/components/ErrorBoundary/APIError/APIError.tsx

@@ -0,0 +1,26 @@
+import MainContainer from 'src/components/MainContainer';
+import Socials from 'src/pages/Social/Socials';
+import styles from './APIError.module.scss';
+
+function APIError() {
+  return (
+    <MainContainer>
+      {/* <Display title={<DisplayTitle title="App connection error" />}> */}
+
+      <h3 className={styles.title}>API connection error 😢</h3>
+      <br />
+
+      <p
+        style={{
+          marginBottom: 30,
+        }}
+      >
+        check socials for details
+      </p>
+      <Socials />
+      {/* </Display> */}
+    </MainContainer>
+  );
+}
+
+export default APIError;

src/contexts/queryClient.tsx

@@ -3,6 +3,7 @@ import { CyberClient } from '@cybercongress/cyber-js';
 import { Option } from 'src/types';
 import { useQuery } from '@tanstack/react-query';
 import { RPC_URL } from 'src/constants/config';
+import APIError from 'src/components/ErrorBoundary/APIError/APIError';
 
 const QueryClientContext = React.createContext<Option<CyberClient>>(undefined);
 
@@ -31,6 +32,8 @@ function QueryClientProvider({ children }: { children: React.ReactNode }) {
 
   if (error) {
     console.error('Error queryClient connect: ', error.message);
+
+    return <APIError />;
   }
 
   return (

src/pages/Social/Social.tsx

@@ -1,12 +1,9 @@
-import { LinkWindow, MainContainer } from 'src/components';
-import Discord from 'src/pages/Social/Discord/Discord';
-import { GitHub } from 'src/pages/Social/GitHub/GitHub';
-import Telegram from 'src/pages/Social/Telegram/Telegram';
+import { MainContainer } from 'src/components';
 import Display from 'src/components/containerGradient/Display/Display';
 import DisplayTitle from 'src/components/containerGradient/DisplayTitle/DisplayTitle';
 import useAdviserTexts from 'src/features/adviser/useAdviserTexts';
-import Twitter from './Twitter/Twitter';
-import styles from './Social.module.scss';
+import { Social } from 'src/pages/Social/Social';
+import Socials from './Socials';
 
 export const HUB_LINK = 'https://docs.cyb.ai/#/page/aicosystem';
 
@@ -19,36 +16,7 @@ function Social() {
   return (
     <MainContainer>
       <Display title={<DisplayTitle title="Socials" />} noPaddingX>
-        <div className={styles.wrapper}>
-          <div className={styles.main}>
-            <Discord />
-            <Twitter />
-            <Telegram />
-          </div>
-
-          <DisplayTitle inDisplay title="code" />
-
-          <div className={styles.code}>
-            <GitHub />
-          </div>
-          <br />
-          <DisplayTitle inDisplay title="More links" />
-
-          <LinkWindow className={styles.hubLinks} to={HUB_LINK}>
-            <div>👾</div>
-            <span>Hub links</span>
-          </LinkWindow>
-          <br />
-          <DisplayTitle inDisplay title="other" />
-          <a
-            href="mailto:[email protected]"
-            target="_blank"
-            rel="noreferrer noopener"
-            className={styles.email}
-          >
-            [email protected]
-          </a>
-        </div>
+        <Socials />
       </Display>
     </MainContainer>
   );

src/pages/Social/Socials.tsx

@@ -0,0 +1,42 @@
+import { DisplayTitle, LinkWindow } from 'src/components';
+import Discord from './Discord/Discord';
+import { GitHub } from './GitHub/GitHub';
+import { HUB_LINK } from './Social';
+import styles from './Social.module.scss';
+import Telegram from './Telegram/Telegram';
+import Twitter from './Twitter/Twitter';
+
+export default function Socials() {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.main}>
+        <Discord />
+        <Twitter />
+        <Telegram />
+      </div>
+
+      <DisplayTitle inDisplay title="code" />
+
+      <div className={styles.code}>
+        <GitHub />
+      </div>
+      <br />
+      <DisplayTitle inDisplay title="More links" />
+
+      <LinkWindow className={styles.hubLinks} to={HUB_LINK}>
+        <div>👾</div>
+        <span>Hub links</span>
+      </LinkWindow>
+      <br />
+      <DisplayTitle inDisplay title="other" />
+      <a
+        href="mailto:[email protected]"
+        target="_blank"
+        rel="noreferrer noopener"
+        className={styles.email}
+      >
+        [email protected]
+      </a>
+    </div>
+  );
+}