Preparatory changes

src/app.tsx

@@ -45,7 +45,7 @@ const AppContent = () => {
     // Sentry.ErrorBoundary requires 'fallback' to be React component so we can't pass a string there
     <Router>
       <Sentry.ErrorBoundary fallback={(props) => <ErrorBoundary {...props} />}>
-        <ToastContainer />
+        <ToastContainer limit={3} pauseOnFocusLoss={false} autoClose={5000} closeOnClick />
 
         <Switch>
           <Route path="/governance/:typeAndVoteId" exact>

src/chain-data/helpers.ts

@@ -54,7 +54,7 @@ export const displayPendingTransaction = async (
     // The user "cancelled" the transaction. i.e. it was resent with the same
     // nonce, but higher gas price, value as 0 and data as 0x
     if (ethersError.cancelled) {
-      return notifications.success({ message: 'Transaction cancelled successfully' });
+      return notifications.success({ message: 'Success! Transaction cancelled' });
     }
 
     // The user "sped up" their transaction by resending it with a higher gas price

src/components/icons/exclamation-triangle-fill.tsx

@@ -0,0 +1,14 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+export const ExclamationTriangleFillIcon = (props: ComponentPropsWithoutRef<'svg'>) => {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.6148 20.3544H3.38805C2.30506 20.3544 1.64293 19.1653 2.21328 18.2447L10.8526 4.29965C11.3938 3.42608 12.6653 3.42779 13.2041 4.30282L21.7915 18.2479C22.3585 19.1686 21.6961 20.3544 20.6148 20.3544ZM13.0011 10.5C13.0011 9.94771 12.5534 9.49999 12.0011 9.49999C11.4488 9.49999 11.0011 9.94771 11.0011 10.5V14.5001C11.0011 15.0524 11.4488 15.5001 12.0011 15.5001C12.5534 15.5001 13.0011 15.0524 13.0011 14.5001V10.5ZM12.0011 16.2502C11.4488 16.2502 11.0011 16.6979 11.0011 17.2502C11.0011 17.8025 11.4488 18.2502 12.0011 18.2502H12.0111C12.5634 18.2502 13.0111 17.8025 13.0111 17.2502C13.0111 16.6979 12.5634 16.2502 12.0111 16.2502H12.0011Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

src/components/icons/external-link.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+
+export const ExternalLinkIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M12 12H4V4" stroke="currentColor" />
+      <path d="M6.27734 9.72515L11.6202 4.38086" stroke="currentColor" />
+      <path d="M8.08984 4.38086H11.6182V7.91076" stroke="currentColor" />
+    </svg>
+  );
+};

src/components/icons/index.ts

@@ -6,10 +6,14 @@ import { CloseIcon } from './close';
 import { CrossIcon } from './cross';
 import { ErrorCircleIcon } from './error-circle';
 import { ErrorCircleFillIcon } from './error-circle-fill';
+import { ExclamationTriangleFillIcon } from './exclamation-triangle-fill';
+import { ExternalLinkIcon } from './external-link';
 import { HelpOutlineIcon } from './help-outline';
 import { InfoCircleIcon } from './info-circle';
+import { InfoCircleFillIcon } from './info-circle-fill';
 import { RadioButtonIcon } from './radio-button';
 import { RadioButtonFillIcon } from './radio-button-fill';
+import { WarningCircleFillIcon } from './warning-circle-fill';
 
 export {
   CheckCircleIcon,
@@ -20,8 +24,12 @@ export {
   CrossIcon,
   ErrorCircleIcon,
   ErrorCircleFillIcon,
+  ExclamationTriangleFillIcon,
+  ExternalLinkIcon,
   HelpOutlineIcon,
   InfoCircleIcon,
+  InfoCircleFillIcon,
   RadioButtonIcon,
   RadioButtonFillIcon,
+  WarningCircleFillIcon,
 };

src/components/icons/info-circle-fill.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export const InfoCircleFillIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.68634 4.80005C9.13406 4.80005 8.68634 5.24776 8.68634 5.80005C8.68634 6.35233 9.13406 6.80005 9.68634 6.80005H9.74908C10.3014 6.80005 10.7491 6.35233 10.7491 5.80005C10.7491 5.24776 10.3014 4.80005 9.74908 4.80005H9.68634ZM8.50003 7.50005C7.94775 7.50005 7.50003 7.94776 7.50003 8.50005C7.50003 9.05233 7.94775 9.50005 8.50003 9.50005H9.00574L9.00574 14.5C9.00574 14.7653 9.1111 15.0196 9.29863 15.2072C9.48617 15.3947 9.74052 15.5 10.0057 15.5H11.5C12.0523 15.5 12.5 15.0523 12.5 14.5C12.5 13.9478 12.0523 13.5 11.5 13.5H11.0057L11.0057 8.50005C11.0057 8.23483 10.9004 7.98048 10.7128 7.79294C10.5253 7.60541 10.271 7.50005 10.0057 7.50005H8.50003Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

src/components/icons/warning-circle-fill.tsx

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+
+export const WarningCircleFillIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM10.9925 6.62503C10.9925 6.07275 10.5448 5.62503 9.99252 5.62503C9.44024 5.62503 8.99252 6.07275 8.99252 6.62503V11.125C8.99252 11.6773 9.44024 12.125 9.99252 12.125C10.5448 12.125 10.9925 11.6773 10.9925 11.125V6.62503ZM9.99252 12.375C9.44024 12.375 8.99252 12.8227 8.99252 13.375C8.99252 13.9273 9.44024 14.375 9.99252 14.375H10.0038C10.5561 14.375 11.0038 13.9273 11.0038 13.375C11.0038 12.8227 10.5561 12.375 10.0038 12.375H9.99252Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

src/pages/dashboard/forms/token-deposit-form.tsx

@@ -42,7 +42,7 @@ const TokenDepositForm = (props: Props) => {
       setChainData('Save deposit approval', { transactions: [...transactions, { type: 'approve-deposit', tx }] });
     } else {
       if (isUserRejection(goResponse.error)) {
-        return notifications.info({ message: messages.TX_APPROVAL_REJECTED });
+        return notifications.error({ message: messages.TX_APPROVAL_REJECTED });
       }
       return setError(messages.TX_APPROVAL_ERROR);
     }
@@ -72,7 +72,7 @@ const TokenDepositForm = (props: Props) => {
       setChainData(`Save "${type}" transaction`, { transactions: [...transactions, { type, tx }] });
     } else {
       if (isUserRejection(goResponse.error)) {
-        return notifications.info({ message: messages.TX_DEPOSIT_REJECTED });
+        return notifications.error({ message: messages.TX_DEPOSIT_REJECTED });
       }
       return setError(messages.TX_DEPOSIT_ERROR);
     }

src/utils/error-handling.ts

@@ -13,7 +13,7 @@ export const handleTransactionError = async <T>(transaction: Promise<T>) => {
 
   if (!goTransaction.success) {
     if (isUserRejection(goTransaction.error)) {
-      notifications.info({ message: messages.TX_GENERIC_REJECTED });
+      notifications.error({ message: messages.TX_GENERIC_REJECTED });
       return;
     }
     notifications.error({ message: messages.TX_GENERIC_ERROR, errorOrMessage: goTransaction.error });

src/utils/messages.ts

@@ -2,11 +2,11 @@ import { PendingTransactionMessages, TransactionType } from '../chain-data';
 
 export const messages = {
   // Transaction messages
-  TX_APPROVAL_REJECTED: 'API3 token approval transaction rejected.',
+  TX_APPROVAL_REJECTED: 'Rejected transaction to approve API3 tokens',
   TX_APPROVAL_ERROR: 'Failed to approve API3 token allowance. Please try again.',
-  TX_DEPOSIT_REJECTED: 'API3 token deposit transaction rejected.',
+  TX_DEPOSIT_REJECTED: 'Rejected transaction to deposit API3 tokens',
   TX_DEPOSIT_ERROR: 'Failed to deposit API3 tokens. Please try again.',
-  TX_GENERIC_REJECTED: 'Transaction rejected.',
+  TX_GENERIC_REJECTED: 'Rejected transaction',
   TX_GENERIC_ERROR: 'An error has occurred. Please try again.',
 
   // Validation messages
@@ -42,7 +42,7 @@ export const transactionMessages: { [key in TransactionType]: PendingTransaction
   'approve-deposit': {
     start: 'Approving API3 token allowance...',
     success: 'Success! API3 token allowance approved.',
-    error: 'API3 token allowance failed.',
+    error: 'Failed to approve API3 tokens for deposit. Please try again later.',
   },
   'deposit-only': {
     start: 'Depositing API3 tokens...',