handle cancel tx in wallet and correctly z-sort notifications

components/ConnectWalletButton.tsx

@@ -89,7 +89,7 @@ const ConnectWalletButton = (props) => {
                       <span className="text-sm">{name}</span>
 
                       {provider?.url === url ? (
-                        <CheckIcon className="h-4 w-4 text-green-400 stroke-3" />
+                        <CheckIcon className="h-4 w-4 stroke-3" />
                       ) : null}
                     </button>
                   </Menu.Item>

components/ContributionModal.tsx

@@ -17,6 +17,7 @@ import useVaults from '../hooks/useVaults'
 import usePool from '../hooks/usePool'
 import styled from '@emotion/styled'
 import 'twin.macro'
+import { notify } from '../utils/notifications'
 
 const SmallButton = styled.button``
 
@@ -126,9 +127,15 @@ const ContributionModal = () => {
   useEffect(() => {
     if (submitting) {
       const handleSubmit = async () => {
-        await actions.submitContribution(contributionAmount)
-        setSubmitted(true)
-        setSubmitting(false)
+        try {
+          await actions.submitContribution(contributionAmount)
+        } catch (e) {
+          notify({ type: 'error', message: e.message })
+          console.error(e.message)
+        } finally {
+          setSubmitted(false)
+          setSubmitting(false)
+        }
       }
       handleSubmit()
     }

components/Notification.tsx

@@ -29,7 +29,7 @@ const NotificationList = () => {
 
   return (
     <div
-      className={`fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6`}
+      className={`z-20 fixed inset-0 flex items-end px-4 py-6 pointer-events-none sm:p-6`}
     >
       <div className={`flex flex-col w-full`}>
         {reversedNotifications.map((n, idx) => (
@@ -59,13 +59,11 @@ const Notification = ({ type, message, description, txid }) => {
         <div className={`flex items-center`}>
           <div className={`flex-shrink-0`}>
             {type === 'success' ? (
-              <CheckCircleIcon className={`text-green h-9 w-9 mr-1`} />
+              <CheckCircleIcon className={`h-9 w-9 mr-1`} />
             ) : null}
-            {type === 'info' && (
-              <XCircleIcon className={`text-primary h-9 w-9 mr-1`} />
-            )}
+            {type === 'info' && <XCircleIcon className={`h-9 w-9 mr-1`} />}
             {type === 'error' && (
-              <InformationCircleIcon className={`text-red h-9 w-9 mr-1`} />
+              <InformationCircleIcon className={`h-9 w-9 mr-1`} />
             )}
           </div>
           <div className={`ml-2 w-0 flex-1`}>