Merge pull request #475 from WatchItDev/app/next/fixes

feat: added new events to transactions table ('locked', 'claimed', 'reserved', 'collected', 'released')

src/App.tsx

@@ -45,8 +45,17 @@ import { AuthProvider } from '@src/auth/context/web3Auth';
 import { ResponsiveOverlay } from '@src/components/responsive-overlay';
 
 import { Buffer } from 'buffer';
-import { Provider } from 'react-redux';
+import {Provider, useDispatch, useSelector} from 'react-redux';
 import { MetaMaskProvider } from '@metamask/sdk-react';
+import {useNotifications} from "@src/hooks/use-notifications.ts";
+import {useSnackbar} from "notistack";
+import {useEffect} from "react";
+import {setGlobalNotifier} from "@notifications/internal-notifications.ts";
+import {publicClientWebSocket} from "@src/clients/viem/publicClient.ts";
+import {GLOBAL_CONSTANTS} from "@src/config-global.ts";
+import LedgerVaultAbi from "@src/config/abi/LedgerVault.json";
+import {setBlockchainEvents} from "@redux/blockchain-events";
+import {subscribeToNotifications} from "@src/utils/subscribe-notifications-supabase.ts";
 
 window.Buffer = Buffer;
 
@@ -103,10 +112,7 @@ export default function App() {
                 <ThemeProvider>
                   <MotionLazy>
                     <SnackbarProvider>
-                      <SettingsDrawer />
-                      <ProgressBar />
-                      <Router />
-                      <ResponsiveOverlay />
+                     <AppContent />
                     </SnackbarProvider>
                   </MotionLazy>
                 </ThemeProvider>
@@ -117,3 +123,80 @@ export default function App() {
     </MetaMaskProvider>
   );
 }
+
+
+interface EventArgs {
+  recipient?: string;
+  origin?: string;
+}
+const AppContent = () => {
+  const dispatch = useDispatch();
+  const sessionData = useSelector((state: any) => state.auth.session);
+  const { getNotifications } = useNotifications();
+  const { enqueueSnackbar } = useSnackbar();
+
+  useEffect(() => {
+    // Set the global reference so we can call notify(...) anywhere.
+    setGlobalNotifier(enqueueSnackbar);
+  }, [enqueueSnackbar]);
+
+  const watchEvent = (eventName: string, args: EventArgs, logText: string) => {
+    const results = publicClientWebSocket.watchContractEvent({
+      address: GLOBAL_CONSTANTS.LEDGER_VAULT_ADDRESS,
+      abi: LedgerVaultAbi.abi,
+      eventName,
+      args,
+      onLogs: (logs) => {
+        console.log(logText, logs);
+        dispatch(setBlockchainEvents(logs));
+      },
+    });
+
+    console.log('Watching', eventName, 'events');
+    console.log('Results', results);
+
+    return results;
+  };
+
+  useEffect(() => {
+    if (!sessionData?.address) return;
+
+    const events = [
+      { name: 'FundsDeposited', args: { recipient: sessionData?.address }, logText: 'New deposit (user as recipient):' },
+      { name: 'FundsWithdrawn', args: { origin: sessionData?.address }, logText: 'New withdraw (user as origin):' },
+      { name: 'FundsTransferred', args: { origin: sessionData?.address }, logText: 'New transfer from me:' },
+      { name: 'FundsTransferred', args: { recipient: sessionData?.address }, logText: 'New transfer to me:' },
+      { name: 'FundsLocked', args: { account: sessionData?.address }, logText: 'New funds locked:' },
+      { name: 'FundsClaimed', args: { claimer: sessionData?.address }, logText: 'New funds claimed:' },
+      { name: 'FundsReserved', args: { from: sessionData?.address }, logText: 'New funds reserved:' },
+      { name: 'FundsCollected', args: { from: sessionData?.address }, logText: 'New funds collected:' },
+      { name: 'FundsReleased', args: { to: sessionData?.address }, logText: 'New funds released:' },
+    ];
+
+    const unwatchers = events.map(event => watchEvent(event.name, event.args, event.logText));
+
+    return () => {
+      unwatchers.forEach(unwatch => unwatch());
+    };
+  }, [sessionData?.address]);
+
+
+  useEffect(() => {
+    if (sessionData?.profile?.id) {
+      // Subscribe to notifications channel
+      subscribeToNotifications(sessionData?.profile?.id, dispatch, ['notifications']);
+
+      // Set the notifications in first render
+      getNotifications(sessionData?.profile?.id).then(() => {});
+    }
+  }, [sessionData?.profile?.id, dispatch]);
+
+  return (
+    <>
+      <SettingsDrawer />
+      <ProgressBar />
+      <Router />
+      <ResponsiveOverlay />
+    </>
+  )
+}