Connect Contracts Websocket On App Startup

components/BitcoinBrowser.tsx

@@ -12,7 +12,7 @@ const BitcoinBrowser = () => {
 
     const navigate = (txid: string) => {
         router.prefetch(`/${txid}`);
-        window.location.replace(`/${txid}`)
+        router.push(`/${txid}`)
       };
 
     const handleKeyUp = (e: any) => {

components/BoostpowButton/BoostPopup.tsx

@@ -80,14 +80,14 @@ const BoostPopup = ({ content, onClose, tagList, defaultTag }: BoostPopupProps)
   };
 
   const handleChangeDifficulty = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    setDifficulty(parseFloat(e.target.value))
-    setPosition(0.5)
+    e.preventDefault();
+    setDifficulty(parseFloat((e.target as any).value));
+    setPosition(0.5);
   }
 
   const handleChangePosition = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault()
-    setPosition(parseFloat(e.target.value))
+    e.preventDefault();
+    setPosition(parseFloat((e.target as any).value));
   }
 
   const wallet = useWallet()

components/ChatComposer.tsx

@@ -212,7 +212,7 @@ const ChatComposer = ({
 
   const handleChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
     event.preventDefault();
-    setInputValue((event.target as HTMLTextAreaElement).value);
+    setInputValue((event.target as any).value);
   };
 
   return (

components/IssueCard.tsx

@@ -265,7 +265,7 @@ useEffect(() => {
 
         {addingBounty ? (
           <div className="flex space-x-2">
-            <input type="number" onChange={(e) => setSatoshis(Number(e.target.value))} className="border p-2 rounded" placeholder="Enter Satoshis" />
+            <input type="number" onChange={(e) => setSatoshis(Number((e.target as any).value))} className="border p-2 rounded" placeholder="Enter Satoshis" />
             <button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={handleConfirmClick}>Confirm</button>
           </div>
         ) : (
@@ -284,7 +284,7 @@ useEffect(() => {
             <div className="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center">
               <div className="bg-white p-4 rounded shadow-lg">
                 <label htmlFor="publicKey" className="block text-sm font-medium text-gray-600">Enter BSV Public Key:</label>
-                <input type="text" id="publicKey" value={publicKeyInput} onChange={(e) => setPublicKeyInput(e.target.value)} className="mt-1 p-2 w-full border rounded-md"/>
+                <input type="text" id="publicKey" value={publicKeyInput} onChange={(e) => setPublicKeyInput((e.target as any).value)} className="mt-1 p-2 w-full border rounded-md"/>
                 <button onClick={handleAssignSubmit} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-2">
                   Submit
                 </button>

components/NewIssueForm.tsx

@@ -38,11 +38,11 @@ const NewIssueForm: React.FC<NewIssueFormProps> = ({ onSubmit }) => {
 
   return (
     <div className="border p-4 rounded-md space-y-2">
-      <input type="text" onChange={(e) => setOrganization(e.target.value)} className="border p-2 w-full rounded" placeholder="Organization" />
-      <input type="text" onChange={(e) => setRepo(e.target.value)} className="border p-2 w-full rounded" placeholder="Repository" />
-      <input type="text" onChange={(e) => setTitle(e.target.value)} className="border p-2 w-full rounded" placeholder="Title" />
-      <textarea onChange={(e) => setDescription(e.target.value)} className="border p-2 w-full rounded" placeholder="Description"></textarea>
-      <input type="number" onChange={(e) => setBounty(e.target.value)} className="border p-2 w-full rounded" placeholder="Bounty in Satoshis" />
+      <input type="text" onChange={(e: any) => setOrganization(e.target.value)} className="border p-2 w-full rounded" placeholder="Organization" />
+      <input type="text" onChange={(e: any) => setRepo(e.target.value)} className="border p-2 w-full rounded" placeholder="Repository" />
+      <input type="text" onChange={(e: any) => setTitle(e.target.value)} className="border p-2 w-full rounded" placeholder="Title" />
+      <textarea onChange={(e: any) => setDescription(e.target.value)} className="border p-2 w-full rounded" placeholder="Description"></textarea>
+      <input type="number" onChange={(e: any) => setBounty(e.target.value)} className="border p-2 w-full rounded" placeholder="Bounty in Satoshis" />
       <button  className="bg-blue-500 text-white px-4 py-2 rounded" onClick={handleSubmit}>Submit</button>
     </div>
   );

components/SocialEditor.tsx

@@ -123,13 +123,15 @@ export const SocialEditor: FC<PropsWithChildren<SocialEditorProps>> = ({
 
     // Limit the number of files to 4
     if (files.length > 4) {
+      // @ts-ignore
       alert('Please select up to 4 images.');
       return;
     }
 
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
       if (!file.type.startsWith('image/')) {
+        // @ts-ignore
         alert('Please select only image files.');
         return;
       }

pages/_app.tsx

@@ -1,31 +1,54 @@
 /* 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 'react-tooltip/dist/react-tooltip.css';
+
+import Head from 'next/head';
+
 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';
 import Locales from '../context/LocalContext';
 import { BitcoinProvider } from '../context/BitcoinContext';
 import { TwetchProvider } from '../context/TwetchContext';
 import { LocalWalletProvider } from '../context/LocalWalletContext';
-import 'react-tooltip/dist/react-tooltip.css';
 
-import { useSubdomain } from '../hooks/subdomain'
+import { SensiletProvider } from '../context/SensiletContext';
+
+import { useContractsWebSocket } from '../services/contracts/websocket';
 
 export default function App({ Component, pageProps }: AppProps) {
-  //const { openGraphData = [] } = pageProps;
-  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]);
 
   const openGraphData = [
     {
@@ -70,7 +93,7 @@ export default function App({ Component, pageProps }: AppProps) {
       content: "website",
       key: "website",
     },
-  ]
+  ];
 
   useEffect(() => {
     const MATOMO_URL = String(process.env.NEXT_PUBLIC_MATOMO_URL);

pages/interests/[txid].tsx

@@ -184,13 +184,13 @@ function PersonalInterestsPage() {
 
       console.log('interest.remove', interest)
 
-      const result = await interest.methods.remove((sigResponses: any) => {
-        return findSig(sigResponses, new bsv.PublicKey(sensiletPublicKey))
-      })
+      const publicKey = new bsv.PublicKey(sensiletPublicKey as string);
+
+      const result = await interest.methods.remove((sigResponses: any) => findSig(sigResponses, publicKey));
 
-      console.log('interest.remove.result', result)
+      console.log('interest.remove.result', result);
 
-      setInterestRemoved(true)
+      setInterestRemoved(true);
 
       try {
 

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,
+    };
+
+}

wallets/local.ts

@@ -24,7 +24,7 @@ export default class LocalWallet extends Wallet {
 
     this.seed = seed
 
-    const hdPrivateKey = bsv.HDPrivateKey.fromSeed(this.seed.toString('hex'))
+    const hdPrivateKey = bsv.HDPrivateKey.fromSeed(this.seed.toString('hex'), bsv.Networks.mainnet);
 
     const derivationPaths = {
       sensiletDefault:        `m/44'/0'/0'/0/0`,