feat: add websocket

apps/web-namada/src/chain.json

@@ -42,7 +42,7 @@
           "highlight": "#6AA6FF"
         },
         "primaryData": {
-          "one": "#FFC780",
+          "one": "#8a8820",
           "two": "#ECA54C",
           "three": "#D17A0C",
           "four": "#D1530C"
@@ -226,7 +226,7 @@
       },
       "endpoints": {
         "graphql": "/namada/gql",
-        "graphqlWebsocket": "",
+        "graphqlWebsocket": "ws://154.91.1.75:8080/v1/graphql",
         "publicRpcWebsocket": "wss://rpc.crescent.forbole.com/websocket"
       },
       "marketing": {

apps/web-namada/src/graphql/general/block_height.graphql

@@ -0,0 +1,5 @@
+subscription LatestBlockHeightListener($offset: Int = 0) {
+  height: block(order_by: {height: desc}, limit: 1, offset: $offset) {
+    height
+  }
+}

apps/web-namada/src/graphql/types/general_types.ts

@@ -2433,6 +2433,13 @@ export type BlockDetailsQueryVariables = Exact<{
 
 export type BlockDetailsQuery = { transaction: Array<{ __typename?: 'transaction', height: any, hash: string, success: boolean, tx_type: string }>, block: Array<{ __typename?: 'block', height: any, hash: string, timestamp: any, txs?: number | null, proposerAddress?: string | null }> };
 
+export type LatestBlockHeightListenerSubscriptionVariables = Exact<{
+  offset?: InputMaybe<Scalars['Int']>;
+}>;
+
+
+export type LatestBlockHeightListenerSubscription = { height: Array<{ __typename?: 'block', height: any }> };
+
 export type BlocksQueryVariables = Exact<{
   limit?: InputMaybe<Scalars['Int']>;
   offset?: InputMaybe<Scalars['Int']>;
@@ -2515,6 +2522,36 @@ export function useBlockDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
 export type BlockDetailsQueryHookResult = ReturnType<typeof useBlockDetailsQuery>;
 export type BlockDetailsLazyQueryHookResult = ReturnType<typeof useBlockDetailsLazyQuery>;
 export type BlockDetailsQueryResult = Apollo.QueryResult<BlockDetailsQuery, BlockDetailsQueryVariables>;
+export const LatestBlockHeightListenerDocument = gql`
+    subscription LatestBlockHeightListener($offset: Int = 0) {
+  height: block(order_by: {height: desc}, limit: 1, offset: $offset) {
+    height
+  }
+}
+    `;
+
+/**
+ * __useLatestBlockHeightListenerSubscription__
+ *
+ * To run a query within a React component, call `useLatestBlockHeightListenerSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useLatestBlockHeightListenerSubscription` 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 subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useLatestBlockHeightListenerSubscription({
+ *   variables: {
+ *      offset: // value for 'offset'
+ *   },
+ * });
+ */
+export function useLatestBlockHeightListenerSubscription(baseOptions?: Apollo.SubscriptionHookOptions<LatestBlockHeightListenerSubscription, LatestBlockHeightListenerSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<LatestBlockHeightListenerSubscription, LatestBlockHeightListenerSubscriptionVariables>(LatestBlockHeightListenerDocument, options);
+      }
+export type LatestBlockHeightListenerSubscriptionHookResult = ReturnType<typeof useLatestBlockHeightListenerSubscription>;
+export type LatestBlockHeightListenerSubscriptionResult = Apollo.SubscriptionResult<LatestBlockHeightListenerSubscription>;
 export const BlocksDocument = gql`
     query Blocks($limit: Int = 7, $offset: Int = 0) {
   blocks: block(limit: $limit, offset: $offset, order_by: {height: desc}) {

packages/ui/src/graphql/useApollo/index.ts

@@ -4,7 +4,7 @@ import {
   DefaultOptions,
   InMemoryCache,
   NormalizedCacheObject,
-  split
+  split,
 } from '@apollo/client';
 import { BatchHttpLink } from '@apollo/client/link/batch-http';
 import { HttpLink } from '@apollo/client/link/http';
@@ -21,7 +21,6 @@ const { chainType, endpoints, extra } = chainConfig();
 /* Checking if the code is running on the server or the client. */
 const ssrMode = typeof window === 'undefined';
 
-
 /* A global variable that stores the Apollo Client. */
 let globalApolloClient: ApolloClient<NormalizedCacheObject>;
 
@@ -31,9 +30,19 @@ const urlEndpoints = [
   'http://localhost:3000/v1/graphql',
 ];
 
+const websocket = (() => {
+  if (!endpoints.graphqlWebsocket) return endpoints.graphqlWebsocket;
+
+  if (endpoints.graphqlWebsocket.startsWith('/') && typeof window !== 'undefined') {
+    return (window.location.origin + endpoints.graphqlWebsocket).replace('http://', 'ws://').replace('https://', 'wss://');
+  }
+
+  return endpoints.graphqlWebsocket;
+})();
+
 const wsEndpoints = [
   process.env.NEXT_PUBLIC_GRAPHQL_WS,
-  endpoints.graphqlWebsocket,
+  websocket,
   'ws://localhost:3000/websocket',
 ];
 
@@ -102,7 +111,8 @@ export function profileApi() {
   return 'https://gql.mainnet.desmos.network/v1/graphql';
 }
 
-export const BIG_DIPPER_NETWORKS = 'https://raw.githubusercontent.com/forbole/big-dipper-networks/main/';
+export const BIG_DIPPER_NETWORKS =
+  'https://raw.githubusercontent.com/forbole/big-dipper-networks/main/';
 
 /**
  * It creates a new Apollo Client, and sets the default options for it
@@ -147,11 +157,7 @@ function createApolloClient(initialState = {}) {
     httpOrWsLink
   );
 
-  const link = split(
-    ({ operationName }) => operationName === 'Rest',
-    restLink,
-    graphlqllink,
-  );
+  const link = split(({ operationName }) => operationName === 'Rest', restLink, graphlqllink);
 
   /* Creating a new Apollo Client. */
   const client = new ApolloClient({