Connect Contracts Websocket On App Startup

pages/_app.tsx

@@ -1,17 +1,13 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 import Script from 'next/script';
 import { SensiletProvider } from '../context/SensiletContext'
 
-import { GetServerSideProps } from 'next'
-
 import '../styles/globals.css';
 import { ThemeProvider } from 'next-themes';
 import { Toaster } from 'react-hot-toast';
 import { init } from '@socialgouv/matomo-next';
 import { useEffect } from 'react';
-import { config } from '../template_config';
 import { RelayProvider } from '../context/RelayContext';
 import { HandCashProvider } from '../context/HandCashContext';
 import { TuneProvider } from '../context/TuningContext';
@@ -21,12 +17,34 @@ import { TwetchProvider } from '../context/TwetchContext';
 import { LocalWalletProvider } from '../context/LocalWalletContext';
 import 'react-tooltip/dist/react-tooltip.css';
 
-import { useSubdomain } from '../hooks/subdomain'
-import Meta from '../components/Meta';
+import { useContractsWebSocket } from '../services/contracts/websocket';
 
 export default function App({ Component, pageProps }: AppProps) {
 
-  const { subdomain } = useSubdomain()
+  const { socket, subscribeContract, unsubscribeContract } = useContractsWebSocket();
+
+  /*
+  The following is an example of how to subscribe and unsubscribe to a contract
+  via the contracts websocket connection. This may be done in any page or component
+  that calls useContractsWebSocket(), and each component should call unsubscribe
+  when it is unmounted, as in the example below.
+  */
+  useEffect(() => {
+
+    if (socket?.readyState === WebSocket.OPEN) {
+
+      const exampleOrigin = '41eccb6160786c94fe4ca2c29f933a8014af9dc723a210870c5a69b9172ca90a_0'
+
+      subscribeContract({ origin: exampleOrigin });
+
+      return () => {
+
+        unsubscribeContract({ origin: exampleOrigin });
+
+      };
+
+    }
+  }, [socket?.readyState]);
 
   useEffect(() => {
     const MATOMO_URL = String(process.env.NEXT_PUBLIC_MATOMO_URL);

services/contracts/websocket.ts

@@ -0,0 +1,52 @@
+
+import { useState } from 'react';
+import useWebSocket from 'react-use-websocket';
+
+const CONTRACTS_WEBSOCKET_URL = 'wss://hls.pow.co/websockets/contracts';
+
+export function useContractsWebSocket() {
+    const [socket, setSocket] = useState<WebSocket | null>(null);
+
+    const hook = useWebSocket(CONTRACTS_WEBSOCKET_URL, {
+        onOpen: async () => {
+            console.log('ws.contracts.onOpen');
+        },
+        onMessage: async (message) => {
+            console.log('ws.contracts.onMessage', message);        
+        },
+        onClose: async () => {
+            console.log('ws.contracts.onClose');
+        },
+      });
+
+    if (!socket && hook.getWebSocket()) {
+        setSocket(hook.getWebSocket() as WebSocket);
+    }
+
+    function subscribeContract({ origin }: { origin: string }) {
+        if (socket) {
+            (socket as WebSocket).send(JSON.stringify({
+                method: 'contract.subscribe',
+                params: { origin },
+            }));
+        }
+    }
+
+
+    function unsubscribeContract({ origin }: { origin: string }) {
+        if (socket) {
+            (socket as WebSocket).send(JSON.stringify({
+                method: 'contract.subscribe',
+                params: { origin },
+            }));
+        }
+    }
+
+    return {
+        hook,
+        socket,
+        subscribeContract,
+        unsubscribeContract,
+    };
+
+}