feat(rwa): check a check banner if the graphql backend is online (#2773)

.changeset/good-bulldogs-train.md

@@ -0,0 +1,2 @@
+---
+---

packages/apps/rwa-demo/src/app/(app)/layout.tsx

@@ -11,6 +11,7 @@ import {
 import { ActiveTransactionsList } from '@/components/ActiveTransactionsList/ActiveTransactionsList';
 import { AssetInfo } from '@/components/AssetInfo/AssetInfo';
 import { DemoBanner } from '@/components/DemoBanner/DemoBanner';
+import { GraphOnlineBanner } from '@/components/GraphOnlineBanner/GraphOnlineBanner';
 import { TransactionPendingIcon } from '@/components/TransactionPendingIcon/TransactionPendingIcon';
 import { useAccount } from '@/hooks/account';
 import { useTransactions } from '@/hooks/transactions';
@@ -90,6 +91,7 @@ const RootLayout = ({
         topBanner={
           <Stack width="100%" gap="xs" flexDirection="column">
             <DemoBanner />
+            <GraphOnlineBanner />
           </Stack>
         }
         logo={

packages/apps/rwa-demo/src/components/GraphOnlineBanner/GraphOnlineBanner.tsx

@@ -0,0 +1,26 @@
+import { useNetworkInfoQuery } from '@/__generated__/sdk';
+import { NETWORK_POLLING_RATE } from '@/constants';
+import { Notification } from '@kadena/kode-ui';
+import type { FC } from 'react';
+import { useEffect } from 'react';
+
+export const GraphOnlineBanner: FC = () => {
+  const variables = {
+    pollInterval: NETWORK_POLLING_RATE,
+  };
+
+  const { error, stopPolling } = useNetworkInfoQuery(variables);
+
+  useEffect(() => {
+    return () => {
+      stopPolling();
+    };
+  }, []);
+
+  if (!error) return;
+  return (
+    <Notification role="status" intent="warning">
+      The Graphql backend is down
+    </Notification>
+  );
+};

packages/apps/rwa-demo/src/constants.ts

@@ -2,6 +2,7 @@ export const ACCOUNT_COOKIE_NAME = 'rwa';
 export const LOCALSTORAGE_ASSETS_KEY = 'assets';
 export const LOCALSTORAGE_ASSETS_SELECTED_KEY = 'selected_asset';
 export const INFINITE_COMPLIANCE = -1;
+export const NETWORK_POLLING_RATE = 1000 * 30; /* 30 sec */
 
 // todo: this is temporary for devnet
 export const ADMIN = {

packages/apps/rwa-demo/src/services/graph/network-info.graph.ts

@@ -0,0 +1,10 @@
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+export const networkInfo: DocumentNode = gql`
+  query networkInfo {
+    networkInfo {
+      apiVersion
+    }
+  }
+`;