SD-69: Show pending transaction toast

Author: rAskVAL

src/domains/misc/components/CIcon/icons/spinner.svg

@@ -1,7 +1,7 @@
 import { useDocumentVisibility } from '@react-hookz/web';
 import dayjs from 'dayjs';
 import { ComponentProps, MouseEvent, MouseEventHandler, PointerEvent, ReactNode } from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 
 import Button from 'src/domains/misc/components/Button';
 import CIcon from 'src/domains/misc/components/CIcon';
@@ -52,8 +52,8 @@ const Toast = ({
 
   return (
     <Container title="Toast">
-      <IconContainer $fillColorToken={color}>
-        <CIcon size={16} icon={icon} />
+      <IconContainer>
+        {status === 'inProgress' ? <Spinner icon="Spinner" size={16} /> : <CIcon size={16} icon={icon} color={color} />}
       </IconContainer>
       <RightSection>
         <Header>
@@ -111,16 +111,10 @@ const Container = styled.article`
   ${boxShadows.shadow16}
 `;
 
-const IconContainer = styled.div<{ $fillColorToken: string | undefined }>`
+const IconContainer = styled.div`
   display: grid;
   place-items: center;
   line-height: 0;
-  
-  & * {
-    ${({ $fillColorToken }) => $fillColorToken && css`
-      fill: ${$fillColorToken};
-    `}
-  }
 `;
 
 const RightSection = styled.section`
@@ -218,3 +212,25 @@ const ProgressBar = styled.div`
 
   transform-origin: center left;
 `;
+
+const Spinner = styled(CIcon)`
+  animation: spin 2s infinite linear;
+
+  path:first-of-type {
+    fill: ${vars('--color-brand-stroke-2-contrast-rest')};
+  }
+
+  path:last-of-type {
+    fill: ${vars('--color-neutral-stroke-1-rest')};
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;

src/domains/misc/components/Toast/Toast.tsx

@@ -15,7 +15,7 @@ export const STATUS_ICONS_DATA: Record<string, { icon: IconName, color: string |
     color: vars('--color-neutral-foreground-2-rest'),
   },
   error: {
-    icon: 'Dismiss',
+    icon: 'DismissCircle',
     color: vars('--color-status-danger-foreground-1-rest'),
   },
   inProgress: {

src/domains/misc/components/Toast/consts.ts

@@ -1,10 +1,12 @@
 import { erc20Token, nativeToken } from '@cardinal-cryptography/shielder-sdk';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { erc20Abi } from 'viem';
+import { useRef } from 'react';
+import { erc20Abi, TransactionExecutionError, UserRejectedRequestError } from 'viem';
 import { useAccount, usePublicClient, useSendTransaction, useWalletClient } from 'wagmi';
 
 import { Token } from 'src/domains/chains/types/misc';
 import useChain from 'src/domains/chains/utils/useChain';
+import { useToast } from 'src/domains/misc/components/Toast';
 import getQueryKey from 'src/domains/misc/utils/getQueryKey';
 
 import useShielderClient from './useShielderClient';
@@ -17,9 +19,51 @@ export const useShield = () => {
   const { sendTransactionAsync } = useSendTransaction();
   const queryClient = useQueryClient();
   const chainConfig = useChain();
+  const { showToast } = useToast();
+  const rejectedTxRef = useRef(false);
+
+  const sendTransactionWithToast = async (params: Parameters<typeof sendTransactionAsync>[0]) => {
+    const toast = showToast({
+      status: 'inProgress',
+      title: 'Transaction pending',
+      subtitle: 'Waiting to be signed by user.',
+      ttlMs: Infinity,
+    });
+
+    const timeoutId = setTimeout(() => {
+      toast.updateToast({
+        subtitle: 'Still waiting? Make sure you signed the transaction from your wallet.',
+      });
+    }, 30_000);
+
+    try {
+      const tx = await sendTransactionAsync(params);
+      clearTimeout(timeoutId);
+      toast.dismissToast();
+      return tx;
+    } catch (error) {
+      clearTimeout(timeoutId);
+      toast.dismissToast();
+
+      const isRejected = error instanceof TransactionExecutionError && error.cause instanceof UserRejectedRequestError;
+
+      if(isRejected) {
+        rejectedTxRef.current = true;
+        showToast({
+          status: 'error',
+          title: 'Transaction rejected',
+          subtitle: 'Transaction has been rejected in the wallet',
+        });
+      }
+
+      throw error;
+    }
+  };
 
   const { mutateAsync: shield, isPending: isShielding, ...meta } = useMutation({
     mutationFn: async ({ token, amount }: { token: Token, amount: bigint, onSuccess?: () => void }) => {
+      rejectedTxRef.current = false;
+
       if (!shielderClient) throw new Error('Shielder is not ready');
       if (!walletAddress) throw new Error('Address is not available');
 
@@ -50,7 +94,7 @@ export const useShield = () => {
       await shielderClient.shield(
         sdkToken,
         amount,
-        async params => await sendTransactionAsync(params),
+        sendTransactionWithToast,
         walletAddress
       );
     },
@@ -75,6 +119,13 @@ export const useShield = () => {
       void queryClient.invalidateQueries({
         queryKey: getQueryKey.tokenPublicBalance('native', chainId.toString(), walletAddress),
       });
+
+      if (!rejectedTxRef.current) {
+        showToast({
+          status: 'error',
+          title: 'Shielding failed',
+        });
+      }
     },
   });