Merge pull request #70 from Cardinal-Cryptography/sd-69-show-pending-transaction-toast

SD-69: Show pending transaction toast

Author: rAskVAL

public/chains/84532.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/CIcon/icons/spinner.svg

@@ -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/Toast.tsx

@@ -5,7 +5,9 @@ import { useAccount, usePublicClient, useSendTransaction, useWalletClient } from
 
 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 { getWalletErrorName, handleWalletError } from 'src/domains/shielder/utils/walletErrors';
 
 import useShielderClient from './useShielderClient';
 
@@ -17,6 +19,31 @@ export const useShield = () => {
   const { sendTransactionAsync } = useSendTransaction();
   const queryClient = useQueryClient();
   const chainConfig = useChain();
+  const { showToast } = useToast();
+
+  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.',
+      });
+    }, 10_000);
+
+    try {
+      return await sendTransactionAsync(params);
+    } catch (error) {
+      return handleWalletError(error);
+    } finally {
+      clearTimeout(timeoutId);
+      toast.dismissToast();
+    }
+  };
 
   const { mutateAsync: shield, isPending: isShielding, ...meta } = useMutation({
     mutationFn: async ({ token, amount }: { token: Token, amount: bigint, onSuccess?: () => void }) => {
@@ -50,7 +77,7 @@ export const useShield = () => {
       await shielderClient.shield(
         sdkToken,
         amount,
-        async params => await sendTransactionAsync(params),
+        sendTransactionWithToast,
         walletAddress
       );
     },
@@ -75,6 +102,32 @@ export const useShield = () => {
       void queryClient.invalidateQueries({
         queryKey: getQueryKey.tokenPublicBalance('native', chainId.toString(), walletAddress),
       });
+
+      const knowErrorName = getWalletErrorName(error);
+
+      switch (knowErrorName) {
+        case 'USER_REJECTED_REQUEST':
+          showToast({
+            status: 'error',
+            title: 'Transaction rejected',
+            subtitle: 'Transaction has been rejected in the wallet',
+          });
+          break;
+
+        case 'LOCKED_OR_UNAUTHORIZED':
+          showToast({
+            status: 'error',
+            title: 'Transaction not initiated',
+            subtitle: 'Make sure your wallet is unlocked and your account is authorized.',
+          });
+          break;
+
+        default:
+          showToast({
+            status: 'error',
+            title: 'Shielding failed',
+          });
+      }
     },
   });
 

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

@@ -0,0 +1,32 @@
+import { DefaultError } from '@tanstack/react-query';
+import { TransactionExecutionError } from 'viem';
+
+const ERROR_NAME_BY_CODE = {
+  4001: 'USER_REJECTED_REQUEST',
+  4100: 'LOCKED_OR_UNAUTHORIZED',
+} as const;
+
+type KnownErrorCode = keyof typeof ERROR_NAME_BY_CODE;
+type KnownErrorName = (typeof ERROR_NAME_BY_CODE)[keyof typeof ERROR_NAME_BY_CODE];
+
+export const handleWalletError = (error: unknown): never => {
+  if (error instanceof TransactionExecutionError) {
+    const cause = error.cause as { code?: number };
+    const code = cause.code?.toString() as KnownErrorCode | undefined;
+    const knownErrorName = code ? ERROR_NAME_BY_CODE[code] : undefined;
+
+    if (knownErrorName) {
+      throw new Error(knownErrorName);
+    }
+    throw error;
+  }
+  throw error;
+};
+
+export const getWalletErrorName = (error: DefaultError): KnownErrorName | null => {
+  const matches = Object.values(ERROR_NAME_BY_CODE).find(name =>
+    error.message.includes(name)
+  );
+
+  return matches ?? null;
+};