feat: add error reporting toasts to registration steps

oxen-io · Jul 17, 2024 · 6394204 · 6394204
1 parent 6bb0df5
commit 6394204
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 17 deletions.
diff --git a/apps/staking/app/stake/[nodeId]/register/NodeRegistration.tsx b/apps/staking/app/stake/[nodeId]/register/NodeRegistration.tsx
@@ -156,6 +156,7 @@ function QueryStatusInformation({
   );
 }
 
+// TODO - Add ability to set the stake amount when we build multi-contributor support
 function RegisterButton({
   blsPubKey,
   blsSignature,
@@ -192,7 +193,7 @@ function RegisterButton({
       >
         {dictionary('button.submit', { amount: stakeAmountString })}
       </Button>
-      {!(stage === REGISTER_STAGE.APPROVE && subStage === 'idle') ? (
+      {stage !== REGISTER_STAGE.APPROVE || subStage !== 'idle' ? (
         <QueryStatusInformation stage={stage} subStage={subStage} />
       ) : null}
     </>

diff --git a/apps/staking/hooks/registerNode.tsx b/apps/staking/hooks/registerNode.tsx
@@ -5,6 +5,7 @@ import { useProxyApproval } from '@session/contracts/hooks/SENT';
 import { SESSION_NODE } from '@/lib/constants';
 import { useAddBLSPubKey } from '@session/contracts/hooks/ServiceNodeRewards';
 import { useEffect, useMemo } from 'react';
+import { toast } from '@session/ui/lib/sonner';
 
 export type ContractWriteStatus = 'idle' | 'pending' | 'error' | 'success';
 export type ContractWriteUtilStatus = 'pending' | 'error' | 'success';
@@ -105,7 +106,12 @@ export default function useRegisterNode({
   nodePubKey: string;
   userSignature: string;
 }) {
-  const { approve, writeStatus: approveWriteStatus } = useProxyApproval({
+  const {
+    approve,
+    writeStatus: approveWriteStatus,
+    error: approveWriteError,
+  } = useProxyApproval({
+    // TODO: Create network provider to handle network specific logic
     contractAddress: addresses.ServiceNodeRewards.testnet,
     tokenAmount: BigInt(SESSION_NODE.FULL_STAKE_AMOUNT),
   });
@@ -115,6 +121,8 @@ export default function useRegisterNode({
     writeStatus: addBLSWriteStatus,
     transactionStatus: addBLSTransactionStatus,
     simulateStatus: addBLSSimulateStatus,
+    simulateError,
+    writeError,
   } = useAddBLSPubKey({
     blsPubKey,
     blsSignature,
@@ -133,12 +141,34 @@ export default function useRegisterNode({
     approve();
   };
 
+  // NOTE: Automatically triggers the write stage once the approval has succeeded
   useEffect(() => {
     if (approveWriteStatus === 'success') {
       addBLSPubKey();
     }
   }, [approveWriteStatus]);
 
+  /**
+   * NOTE: All of these useEffects are required to inform the user of errors via the toaster
+   */
+  useEffect(() => {
+    if (simulateError) {
+      toast.error(simulateError.message);
+    }
+  }, [simulateError]);
+
+  useEffect(() => {
+    if (approveWriteError) {
+      toast.error(approveWriteError.message);
+    }
+  }, [approveWriteError]);
+
+  useEffect(() => {
+    if (writeError) {
+      toast.error(writeError.message);
+    }
+  }, [writeError]);
+
   return {
     registerAndStake,
     stage,

diff --git a/apps/staking/lib/queries/getNode.tsx → apps/staking/lib/queries/getNode.ts b/apps/staking/lib/queries/getNode.tsx → apps/staking/lib/queries/getNode.ts
@@ -3,7 +3,6 @@ import { NODE_STATE } from '@session/sent-staking-js/client';
 
 // TODO: refactor this to use a generic explorer client
 export async function getNode({ address }: { address: string }) {
-  const url = '/api/explorer';
   const data = {
     jsonrpc: '2.0',
     id: '0',
@@ -15,7 +14,7 @@ export async function getNode({ address }: { address: string }) {
   };
 
   try {
-    const response = await fetch(url, {
+    const response = await fetch('/api/explorer', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

diff --git a/packages/contracts/hooks/SENT.tsx b/packages/contracts/hooks/SENT.tsx
@@ -10,6 +10,8 @@ import {
   useContractReadQuery,
   useContractWriteQuery,
 } from './contract-hooks';
+import type { WriteContractErrorType } from 'wagmi/actions';
+import type { ContractWriteStatus } from './ServiceNodeRewards';
 
 export type SENTBalanceQuery = ReadContractQuery & {
   /** Get the session token balance */
@@ -51,14 +53,20 @@ export function useSENTBalanceQuery(
   };
 }
 
+export type UseProxyApprovalReturn = {
+  approve: () => void;
+  writeStatus: ContractWriteStatus;
+  error: WriteContractErrorType | Error | null;
+};
+
 export function useProxyApproval({
   contractAddress,
   tokenAmount,
 }: {
   contractAddress: Address;
   tokenAmount: bigint;
-}) {
-  const { writeContract, writeStatus } = useContractWriteQuery({
+}): UseProxyApprovalReturn {
+  const { writeContract, error, writeStatus } = useContractWriteQuery({
     contract: 'SENT',
     functionName: 'approve',
   });
@@ -69,5 +77,5 @@ export function useProxyApproval({
     });
   };
 
-  return { approve, writeStatus };
+  return { approve, writeStatus, error };
 }
diff --git a/packages/contracts/hooks/ServiceNodeRewards.tsx b/packages/contracts/hooks/ServiceNodeRewards.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { type Address, type ContractFunctionArgs } from 'viem';
+import { type Address, type ContractFunctionArgs, type SimulateContractErrorType } from 'viem';
 import type { ReadContractData } from 'wagmi/query';
 import { ServiceNodeRewardsAbi } from '../abis';
 import {
@@ -13,6 +13,7 @@ import {
 import { useSimulateContract } from 'wagmi';
 import { useEffect, useMemo, useState } from 'react';
 import { addresses } from '../constants';
+import type { WriteContractErrorType } from 'wagmi/actions';
 
 export type ClaimRewardsQuery = WriteContractQuery & {
   /** Claim rewards */
@@ -184,6 +185,18 @@ const encodeED25519Signature = (hex: string) => {
   return { sigs0, sigs1 };
 };
 
+export type ContractWriteStatus = 'idle' | 'pending' | 'error' | 'success';
+export type ContractWriteUtilStatus = 'pending' | 'error' | 'success';
+
+export type UseAddBLSPubKeyReturn = {
+  addBLSPubKey: () => void;
+  simulateStatus: ContractWriteUtilStatus;
+  writeStatus: ContractWriteStatus;
+  simulateError: SimulateContractErrorType | Error | null;
+  writeError: WriteContractErrorType | Error | null;
+  transactionStatus: ContractWriteUtilStatus;
+};
+
 export function useAddBLSPubKey({
   blsPubKey,
   blsSignature,
@@ -194,9 +207,14 @@ export function useAddBLSPubKey({
   blsSignature: string;
   nodePubKey: string;
   userSignature: string;
-}) {
+}): UseAddBLSPubKeyReturn {
   const [simulateEnabled, setSimulateEnabled] = useState<boolean>(false);
-  const { writeContract, writeStatus, transactionStatus } = useContractWriteQuery({
+  const {
+    writeContract,
+    writeStatus,
+    transactionStatus,
+    error: writeError,
+  } = useContractWriteQuery({
     contract: 'ServiceNodeRewards',
     functionName: 'addBLSPublicKey',
   });
@@ -221,7 +239,7 @@ export function useAddBLSPubKey({
     data,
     status: simulateStatus,
     refetch,
-    error,
+    error: simulateError,
   } = useSimulateContract({
     abi: ServiceNodeRewardsAbi,
     address: addresses.ServiceNodeRewards.testnet,
@@ -230,10 +248,6 @@ export function useAddBLSPubKey({
     args: contractArgs,
   });
 
-  if (simulateStatus === 'error') {
-    console.error(error);
-  }
-
   const addBLSPubKey = () => {
     setSimulateEnabled(true);
     void refetch();
@@ -242,10 +256,16 @@ export function useAddBLSPubKey({
   useEffect(() => {
     if (simulateStatus === 'success' && data?.request) {
       writeContract(data.request);
-      console.log('approve success');
       addBLSPubKey();
     }
   }, [simulateStatus, data?.request]);
 
-  return { addBLSPubKey, simulateStatus, writeStatus, transactionStatus };
+  return {
+    addBLSPubKey,
+    simulateStatus,
+    writeStatus,
+    simulateError,
+    writeError,
+    transactionStatus,
+  };
 }