Enhance transaction notification

Author: JayJay1024

src/components/transfer-v2.tsx

@@ -176,7 +176,7 @@ function Component() {
       const receipt = await approve(
         fee?.token.type === "native" ? deferredAmount.value : deferredAmount.value + (fee?.value ?? 0n),
       );
-      notifyTransaction(receipt, sourceChain);
+      notifyTransaction(receipt, sourceChain, "Approval");
     } else if (actionText === "Transfer") {
       setIsOpen(true);
     }
@@ -203,7 +203,7 @@ function Component() {
           withdrawNonce: BigInt(relayInfo?.withdrawNonce ?? 0),
           depositedMargin: BigInt(relayInfo?.margin ?? 0),
         });
-        notifyTransaction(receipt, sourceChain);
+        notifyTransaction(receipt, sourceChain, "Transfer");
         setTxHash(receipt?.transactionHash);
         if (receipt?.status === "success") {
           setIsTransfering(false);

src/providers/relayer-provider-v3.tsx

@@ -124,7 +124,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
       if (address) {
         try {
           const receipt = await bridgeInstance.sourceApprove(amount, address);
-          notifyTransaction(receipt, bridgeInstance.getSourceChain());
+          notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Approval");
           setSourceAllowance(await bridgeInstance.getSourceAllowance(address));
           return receipt;
         } catch (err) {
@@ -141,7 +141,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
       if (address) {
         try {
           const receipt = await bridgeInstance.targetApprove(amount, address);
-          notifyTransaction(receipt, bridgeInstance.getTargetChain());
+          notifyTransaction(receipt, bridgeInstance.getTargetChain(), "Approval");
           setTargetAllowance(await bridgeInstance.getTargetAllowance(address));
           return receipt;
         } catch (err) {
@@ -169,7 +169,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
     async (amount: bigint) => {
       try {
         const receipt = await bridgeInstance.depositPenaltyReserve(amount);
-        notifyTransaction(receipt, bridgeInstance.getSourceChain());
+        notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Deposite");
         if (receipt?.status === "success") {
           await _updatePenaltyReserves();
           if (address) {
@@ -190,7 +190,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
     async (baseFee: bigint, feeRate: number, transferLimit: bigint) => {
       try {
         const receipt = await bridgeInstance.registerLnProvider(baseFee, feeRate, transferLimit);
-        notifyTransaction(receipt, bridgeInstance.getSourceChain());
+        notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Register");
         return receipt;
       } catch (err) {
         console.error(err);
@@ -204,7 +204,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
     async (amount: bigint) => {
       try {
         const receipt = await bridgeInstance.withdrawPenaltyReserve(amount);
-        notifyTransaction(receipt, bridgeInstance.getSourceChain());
+        notifyTransaction(receipt, bridgeInstance.getSourceChain(), "Withdraw");
 
         if (receipt?.status === "success") {
           await _updatePenaltyReserves();
@@ -231,7 +231,7 @@ export default function RelayerProviderV3({ children }: PropsWithChildren<unknow
             messageFee,
             params ?? address,
           );
-          notifyTransaction(receipt, bridgeInstance.getTargetChain());
+          notifyTransaction(receipt, bridgeInstance.getTargetChain(), "Withdraw");
           return receipt;
         } catch (err) {
           console.error(err);

src/providers/relayer-provider.tsx

@@ -226,7 +226,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
   const sourceApprove = useCallback(async (owner: Address, amount: bigint, bridge: BaseBridge, chain: ChainConfig) => {
     try {
       const receipt = await bridge.sourceApprove(amount, owner);
-      notifyTransaction(receipt, chain);
+      notifyTransaction(receipt, chain, "Approval");
       setSourceAllowance(await bridge.getSourceAllowance(owner));
       return receipt;
     } catch (err) {
@@ -238,7 +238,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
   const targetApprove = useCallback(async (owner: Address, amount: bigint, bridge: BaseBridge, chain: ChainConfig) => {
     try {
       const receipt = await bridge.targetApprove(amount, owner);
-      notifyTransaction(receipt, chain);
+      notifyTransaction(receipt, chain, "Approval");
       setTargetAllowance(await bridge.getTargetAllowance(owner));
       return receipt;
     } catch (err) {
@@ -254,7 +254,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
     async (relayer: Address, margin: bigint, bridge: LnBridgeV2Default, chain: ChainConfig) => {
       try {
         const receipt = await bridge.depositMargin(margin);
-        notifyTransaction(receipt, chain);
+        notifyTransaction(receipt, chain, "Deposite");
 
         const a = await bridge.getTargetAllowance(relayer);
         const b = await bridge.getTargetBalance(relayer);
@@ -327,7 +327,7 @@ export default function RelayerProvider({ children }: PropsWithChildren<unknown>
     ) => {
       try {
         const receipt = await bridge.withdrawMargin(recipientOrParams, amount, fee);
-        notifyTransaction(receipt, chain);
+        notifyTransaction(receipt, chain, "Withdraw");
         return receipt;
       } catch (err) {
         console.error(err);

src/providers/transfer-provider.tsx

@@ -136,7 +136,7 @@ export default function TransferProvider({ children }: PropsWithChildren<unknown
     ) => {
       try {
         const receipt = await bridge.transfer(sender, recipient, amount, options);
-        notifyTransaction(receipt, chain);
+        notifyTransaction(receipt, chain, "Transfer");
 
         const a = await bridge.getSourceAllowance(sender);
         const b = await bridge.getSourceBalance(sender);
@@ -155,7 +155,7 @@ export default function TransferProvider({ children }: PropsWithChildren<unknown
   const sourceApprove = useCallback(async (owner: Address, amount: bigint, bridge: BaseBridge, chain: ChainConfig) => {
     try {
       const receipt = await bridge.sourceApprove(amount, owner);
-      notifyTransaction(receipt, chain);
+      notifyTransaction(receipt, chain, "Approval");
       setSourceAllowance(await bridge.getSourceAllowance(owner));
       return receipt;
     } catch (err) {

src/utils/notification.tsx

@@ -11,24 +11,24 @@ function Link({ href, children }: PropsWithChildren<{ href: string }>) {
   );
 }
 
-export function notifyTransaction(receipt?: TransactionReceipt, chain?: ChainConfig) {
+export function notifyTransaction(receipt?: TransactionReceipt, chain?: ChainConfig, title?: string) {
   const explorer = chain?.blockExplorers?.default.url;
   const txHash = receipt?.transactionHash;
   const href = new URL(`tx/${txHash}`, explorer).href;
 
   if (receipt?.status === "success" && txHash) {
     notification.success({
-      title: "Transaction successful",
+      title: `${title ?? "Transaction"} successful`,
       description: <Link href={href}>{txHash}</Link>,
     });
   } else if (receipt?.status === "reverted" && explorer) {
     notification.error({
-      title: "Transaction failed",
+      title: `${title ?? "Transaction"} failed`,
       description: <Link href={href}>{txHash}</Link>,
     });
   }
 }
 
 export function notifyError(err: unknown) {
-  return notification.error({ title: "An error occurred", description: (err as Error).message });
+  return notification.error({ title: "Oops an error occurred", description: (err as Error).message });
 }