From 2c9828fda7dd0e9caf71d880efa81738761f1e04 Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 7 Jan 2025 16:38:42 +0100 Subject: [PATCH] feat(rwa): check a check banner if the graphql backend is online (#2773) --- .changeset/good-bulldogs-train.md | 2 + .../apps/rwa-demo/src/__generated__/sdk.ts | 44 +++++++++++++++++++ .../apps/rwa-demo/src/app/(app)/layout.tsx | 2 + .../GraphOnlineBanner/GraphOnlineBanner.tsx | 26 +++++++++++ packages/apps/rwa-demo/src/constants.ts | 1 + .../src/services/graph/network-info.graph.ts | 10 +++++ 6 files changed, 85 insertions(+) create mode 100644 .changeset/good-bulldogs-train.md create mode 100644 packages/apps/rwa-demo/src/components/GraphOnlineBanner/GraphOnlineBanner.tsx create mode 100644 packages/apps/rwa-demo/src/services/graph/network-info.graph.ts diff --git a/.changeset/good-bulldogs-train.md b/.changeset/good-bulldogs-train.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/good-bulldogs-train.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/apps/rwa-demo/src/__generated__/sdk.ts b/packages/apps/rwa-demo/src/__generated__/sdk.ts index a446c7d8d4..ed81ecd1ca 100644 --- a/packages/apps/rwa-demo/src/__generated__/sdk.ts +++ b/packages/apps/rwa-demo/src/__generated__/sdk.ts @@ -972,6 +972,11 @@ export type EventSubscriptionSubscription = { __typename?: 'Subscription', event export type CoreEventsFieldsFragment = { __typename?: 'Event', chainId: any, requestKey: string, parameters?: string | null, block: { __typename?: 'Block', height: any, creationTime: any } }; +export type NetworkInfoQueryVariables = Exact<{ [key: string]: never; }>; + + +export type NetworkInfoQuery = { __typename?: 'Query', networkInfo?: { __typename?: 'NetworkInfo', apiVersion: string } | null }; + export type TransactionSubscriptionVariables = Exact<{ requestKey: Scalars['String']['input']; }>; @@ -1064,6 +1069,45 @@ export function useEventSubscriptionSubscription(baseOptions: Apollo.Subscriptio } export type EventSubscriptionSubscriptionHookResult = ReturnType; export type EventSubscriptionSubscriptionResult = Apollo.SubscriptionResult; +export const NetworkInfoDocument = gql` + query networkInfo { + networkInfo { + apiVersion + } +} + `; + +/** + * __useNetworkInfoQuery__ + * + * To run a query within a React component, call `useNetworkInfoQuery` and pass it any options that fit your needs. + * When your component renders, `useNetworkInfoQuery` returns an object from Apollo Client that contains loading, error, and data properties + * you can use to render your UI. + * + * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options; + * + * @example + * const { data, loading, error } = useNetworkInfoQuery({ + * variables: { + * }, + * }); + */ +export function useNetworkInfoQuery(baseOptions?: Apollo.QueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useQuery(NetworkInfoDocument, options); + } +export function useNetworkInfoLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useLazyQuery(NetworkInfoDocument, options); + } +export function useNetworkInfoSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions) { + const options = {...defaultOptions, ...baseOptions} + return Apollo.useSuspenseQuery(NetworkInfoDocument, options); + } +export type NetworkInfoQueryHookResult = ReturnType; +export type NetworkInfoLazyQueryHookResult = ReturnType; +export type NetworkInfoSuspenseQueryHookResult = ReturnType; +export type NetworkInfoQueryResult = Apollo.QueryResult; export const TransactionDocument = gql` subscription transaction($requestKey: String!) { transaction(requestKey: $requestKey) { diff --git a/packages/apps/rwa-demo/src/app/(app)/layout.tsx b/packages/apps/rwa-demo/src/app/(app)/layout.tsx index 2c25271503..3ab1e7a11a 100644 --- a/packages/apps/rwa-demo/src/app/(app)/layout.tsx +++ b/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={ + } logo={ diff --git a/packages/apps/rwa-demo/src/components/GraphOnlineBanner/GraphOnlineBanner.tsx b/packages/apps/rwa-demo/src/components/GraphOnlineBanner/GraphOnlineBanner.tsx new file mode 100644 index 0000000000..53b39f839b --- /dev/null +++ b/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 ( + + The Graphql backend is down + + ); +}; diff --git a/packages/apps/rwa-demo/src/constants.ts b/packages/apps/rwa-demo/src/constants.ts index 5ee91bcf31..275952ce3c 100644 --- a/packages/apps/rwa-demo/src/constants.ts +++ b/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 = { diff --git a/packages/apps/rwa-demo/src/services/graph/network-info.graph.ts b/packages/apps/rwa-demo/src/services/graph/network-info.graph.ts new file mode 100644 index 0000000000..1d0499be0a --- /dev/null +++ b/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 + } + } +`;