feat: modify observer (#73)

.env template

@@ -25,6 +25,7 @@
 # VITE_ETHEREUM_DEPLOYMENT_BRANCH=dev
 # VITE_ETHEREUM_DEPLOYMENT_VERSION=1
 # VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+; VITE_ETHEREUM_ARB_SEPOLIA_OBSERVER_NODE=
 # VITE_ATTESTOR_API_URLS=
 # VITE_BITCOIN_NETWORK=regtest
 # VITE_BITCOIN_EXPLORER_API_URL=https://devnet.dlc.link/electrs
@@ -37,6 +38,7 @@
 # VITE_ETHEREUM_DEPLOYMENT_BRANCH=dev
 # VITE_ETHEREUM_DEPLOYMENT_VERSION=1
 # VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+; VITE_ETHEREUM_ARB_SEPOLIA_OBSERVER_NODE=
 # VITE_ATTESTOR_API_URLS=
 # VITE_BITCOIN_NETWORK=regtest
 # VITE_BITCOIN_EXPLORER_API_URL=https://devnet.dlc.link/electrs
@@ -49,6 +51,7 @@
 # VITE_ETHEREUM_DEPLOYMENT_BRANCH=testnet
 # VITE_ETHEREUM_DEPLOYMENT_VERSION=1
 # VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+; VITE_ETHEREUM_ARB_SEPOLIA_OBSERVER_NODE=
 # VITE_ATTESTOR_API_URLS=
 # VITE_BITCOIN_NETWORK=testnet
 # VITE_BITCOIN_EXPLORER_API_URL=https://mempool.space/testnet
@@ -61,6 +64,7 @@
 # VITE_ETHEREUM_DEPLOYMENT_BRANCH=mainnet
 # VITE_ETHEREUM_DEPLOYMENT_VERSION=1
 # VITE_ENABLED_ETHEREUM_NETWORKS='11155111'
+; VITE_ETHEREUM_ARB_SEPOLIA_OBSERVER_NODE=
 # VITE_ATTESTOR_API_URLS=
 # VITE_BITCOIN_NETWORK=mainnet
 # VITE_BITCOIN_EXPLORER_API_URL=https://mempool.space

src/app/hooks/use-ethereum-contracts.ts

@@ -11,13 +11,15 @@ interface UseEthereumContractsReturnType {
     ethereumNetwork: EthereumNetwork
   ) => Promise<void>;
   protocolContract: Contract | undefined;
+  observerProtocolContract: Contract | undefined;
   dlcManagerContract: Contract | undefined;
   dlcBTCContract: Contract | undefined;
   contractsLoaded: boolean;
 }
 
 export function useEthereumContracts(): UseEthereumContractsReturnType {
   const protocolContract = useRef<Contract | undefined>(undefined);
+  const observerProtocolContract = useRef<Contract | undefined>(undefined);
   const dlcManagerContract = useRef<Contract | undefined>(undefined);
   const dlcBTCContract = useRef<Contract | undefined>(undefined);
 
@@ -42,6 +44,21 @@ export function useEthereumContracts(): UseEthereumContractsReturnType {
       protocolContract.current = contract;
     }
 
+    if (!observerProtocolContract.current) {
+      const observerProtocolContractData = await fetchEthereumDeploymentPlan(
+        'TokenManager',
+        ethereumNetwork
+      );
+      const contract = new ethers.Contract(
+        observerProtocolContractData.contract.address,
+        observerProtocolContractData.contract.abi,
+        new ethers.providers.WebSocketProvider(
+          import.meta.env.VITE_ETHEREUM_ARB_SEPOLIA_OBSERVER_NODE
+        )
+      );
+      observerProtocolContract.current = contract;
+    }
+
     if (!dlcManagerContract.current) {
       const dlcManagerContractData = await fetchEthereumDeploymentPlan(
         'DLCManager',
@@ -95,6 +112,7 @@ export function useEthereumContracts(): UseEthereumContractsReturnType {
   return {
     getEthereumContracts,
     protocolContract: protocolContract.current,
+    observerProtocolContract: observerProtocolContract.current,
     dlcManagerContract: dlcManagerContract.current,
     dlcBTCContract: dlcBTCContract.current,
     contractsLoaded,

src/app/hooks/use-ethereum-observer.ts

@@ -13,19 +13,18 @@ import { useEthereumContext } from './use-ethereum-context';
 export function useEthereumObserver(): void {
   const dispatch = useDispatch();
 
-  const { protocolContract, dlcBTCContract } = useEthereumContext();
+  const { observerProtocolContract } = useEthereumContext();
   const { getVault } = useEthereum();
 
   const { address, network } = useSelector((state: RootState) => state.account);
 
   useEffect(() => {
-    if (!protocolContract || !dlcBTCContract) return;
+    if (!observerProtocolContract) return;
 
     console.log(`Listening to [${network?.name}]`);
-    console.log(`Listening to [${protocolContract.address}]`);
-    console.log(`Listening to [${dlcBTCContract.address}]`);
+    console.log(`Listening to [${observerProtocolContract.address}]`);
 
-    protocolContract.on('SetupVault', async (...args: any[]) => {
+    observerProtocolContract.on('SetupVault', async (...args: any[]) => {
       const vaultOwner: string = args[2];
 
       if (vaultOwner.toLowerCase() !== address) return;
@@ -39,7 +38,7 @@ export function useEthereumObserver(): void {
       });
     });
 
-    protocolContract.on('CloseVault', async (...args: any[]) => {
+    observerProtocolContract.on('CloseVault', async (...args: any[]) => {
       const vaultOwner: string = args[1];
 
       if (vaultOwner.toLowerCase() !== address) return;
@@ -53,8 +52,7 @@ export function useEthereumObserver(): void {
       });
     });
 
-    protocolContract.on('SetStatusFunded', async (...args: any[]) => {
-      console.log('SetStatusFunded', args);
+    observerProtocolContract.on('SetStatusFunded', async (...args: any[]) => {
       const vaultOwner = args[2];
 
       if (vaultOwner.toLowerCase() !== address) return;
@@ -74,7 +72,7 @@ export function useEthereumObserver(): void {
       });
     });
 
-    protocolContract.on('PostCloseDLCHandler', async (...args: any[]) => {
+    observerProtocolContract.on('PostCloseDLCHandler', async (...args: any[]) => {
       const vaultOwner = args[2];
 
       if (vaultOwner.toLowerCase() !== address) return;
@@ -94,5 +92,5 @@ export function useEthereumObserver(): void {
       });
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [protocolContract, dlcBTCContract, network]);
+  }, [observerProtocolContract, network]);
 }

src/app/hooks/use-ethereum.ts

@@ -191,7 +191,7 @@ export function useEthereum(): UseEthereumReturnType {
         return;
       } catch (error) {
         // eslint-disable-next-line no-console
-        console.log(`Error fetching vault ${vaultUUID}. Retrying...`);
+        console.log(`Vault with uuid: ${vaultUUID} is not yet updated. Retrying...`);
       }
       await new Promise(resolve => setTimeout(resolve, retryInterval));
     }

src/app/providers/ethereum-context-provider.tsx

@@ -7,6 +7,7 @@ import { ethers } from 'ethers';
 
 export interface EthereumContextProviderType {
   protocolContract: any;
+  observerProtocolContract: any;
   dlcManagerContract: any;
   dlcBTCContract: any;
   getEthereumContracts: (
@@ -18,6 +19,7 @@ export interface EthereumContextProviderType {
 
 export const EthereumContext = createContext<any>({
   protocolContract: undefined,
+  observerProtocolContract: undefined,
   dlcManagerContract: undefined,
   dlcBTCContract: undefined,
   getEthereumContracts: async (
@@ -32,6 +34,7 @@ export const EthereumContext = createContext<any>({
 export function EthereumContextProvider({ children }: HasChildren): React.JSX.Element {
   const {
     protocolContract,
+    observerProtocolContract,
     dlcManagerContract,
     dlcBTCContract,
     getEthereumContracts,
@@ -42,6 +45,7 @@ export function EthereumContextProvider({ children }: HasChildren): React.JSX.El
     <EthereumContext.Provider
       value={{
         protocolContract,
+        observerProtocolContract,
         dlcManagerContract,
         dlcBTCContract,
         getEthereumContracts,