[Claim] Reject tx modals

src/custom/hooks/useErrorMessage.tsx → src/custom/hooks/useErrorMessageAndModal.tsx

@@ -1,20 +1,20 @@
 import { useState } from 'react'
 import { ErrorMessageProps, SwapCallbackError } from 'components/swap/styleds'
+import useTransactionErrorModal from './useTransactionErrorModal'
 
 /**
  * @description hook for getting CowSwap error and handling them visually
  * @description ErrorMessage component accepts an error message to override exported error state, and a close option
  * @returns returns object: { error, setError, ErrorMessage } => error message, error message setter, and our ErrorMessage component
  */
-export default function useErrorMessage() {
+export function useErrorMessage() {
   // Any async bc errors
   const [internalError, setError] = useState<string | undefined>()
-
   const handleCloseError = () => setError(undefined)
 
   return {
     error: internalError,
-    setError,
+    handleSetError: setError,
     ErrorMessage: ({
       error = internalError,
       showClose = false,
@@ -23,3 +23,30 @@ export default function useErrorMessage() {
       error ? <SwapCallbackError showClose={showClose} handleClose={handleCloseError} error={error} {...rest} /> : null,
   }
 }
+
+export function useErrorModal() {
+  // Any async bc errors
+  const [internalError, setError] = useState<string | undefined>()
+  const { openModal, closeModal, TransactionErrorModal } = useTransactionErrorModal()
+
+  const handleCloseError = () => {
+    closeModal()
+    setError(undefined)
+  }
+  const handleSetError = (error: string | undefined) => {
+    // close any open modals
+    // closeModal()
+    // set the error and IF error, open modal
+    setError(error)
+    error && openModal()
+  }
+
+  return {
+    error: internalError,
+    handleCloseError,
+    handleSetError,
+    ErrorModal: ({ message = internalError }: { message?: string }) => (
+      <TransactionErrorModal onDismiss={handleCloseError} message={message} />
+    ),
+  }
+}

src/custom/hooks/useTransactionErrorModal.tsx

@@ -0,0 +1,24 @@
+import { useCallback } from 'react'
+import { ApplicationModal } from 'state/application/reducer'
+import { TransactionErrorContent } from 'components/TransactionConfirmationModal'
+import { useOpenModal, useCloseModals, useModalOpen } from 'state/application/hooks'
+import { GpModal } from '../components/Modal'
+
+export default function useTransactionErrorModal() {
+  const openModal = useOpenModal(ApplicationModal.TRANSACTION_ERROR)
+  const closeModal = useCloseModals()
+  const showTransactionErrorModal = useModalOpen(ApplicationModal.TRANSACTION_ERROR)
+
+  return {
+    openModal,
+    closeModal,
+    TransactionErrorModal: useCallback(
+      ({ message, onDismiss }: { message?: string; onDismiss: () => void }) => (
+        <GpModal isOpen={showTransactionErrorModal} onDismiss={closeModal}>
+          <TransactionErrorContent onDismiss={onDismiss} message={message} />
+        </GpModal>
+      ),
+      [closeModal, showTransactionErrorModal]
+    ),
+  }
+}

src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx

@@ -16,7 +16,7 @@ import { useActiveWeb3React } from 'hooks/web3'
 import { ButtonConfirmed } from 'components/Button'
 import { ButtonSize } from 'theme'
 import Loader from 'components/Loader'
-import useErrorMessage from 'hooks/useErrorMessage'
+import { useErrorModal } from 'hooks/useErrorMessageAndModal'
 
 const RangeSteps = styled.div`
   display: flex;
@@ -45,7 +45,7 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
 
   const balance = useCurrencyBalance(account || undefined, token)
 
-  const { setError, ErrorMessage } = useErrorMessage()
+  const { handleSetError, ErrorModal } = useErrorModal()
 
   const handlePercentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     console.log(event.target.value)
@@ -57,7 +57,7 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
 
   const onMaxClick = useCallback(() => {
     // TODO: remove
-    setError('Transaction rejected. User denied signature.')
+    handleSetError('Transaction rejected. User denied signature.')
     if (!maxCost || !balance) {
       return
     }
@@ -67,15 +67,15 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
     const investAmount = formatUnits(amount.quotient.toString(), balance.currency.decimals)
 
     updateInvestAmount(claim.index, investAmount)
-  }, [balance, claim.index, maxCost, setError, updateInvestAmount])
+  }, [balance, claim.index, maxCost, handleSetError, updateInvestAmount])
 
   // Cache approveData methods
   const approveCallback = approveData?.approveCallback
   const approveState = approveData?.approveState
   // Save "local" approving state (pre-BC) for rendering spinners etc
   const [approving, setApproving] = useState(false)
   const handleApprove = useCallback(async () => {
-    setError(undefined)
+    handleSetError(undefined)
     if (!approveCallback) return
 
     try {
@@ -84,11 +84,11 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
       await approveCallback({ transactionSummary: `Approve ${token?.symbol || 'token'} for investing in vCOW` })
     } catch (error) {
       console.error('[InvestOption]: Issue approving.', error)
-      setError(error?.message)
+      handleSetError(error?.message)
     } finally {
       setApproving(false)
     }
-  }, [approveCallback, setError, token?.symbol])
+  }, [approveCallback, handleSetError, token?.symbol])
 
   const vCowAmount = useMemo(() => {
     if (!token || !price) {
@@ -187,15 +187,9 @@ export default function InvestOption({ approveData, updateInvestAmount, claim }:
             </div>
           </span>
         </InvestSummary>
-        {/* Error messages */}
-        <ErrorMessage
-          $css="
-            margin: 0 auto;
-            padding: 0 1.25rem;
-            z-index: 0;
-          "
-          showClose
-        />
+        {/* Error modal */}
+        <ErrorModal />
+        {/* Investment inputs */}
         <InvestInput>
           <div>
             <span>

src/custom/pages/Claim/index.tsx

@@ -29,7 +29,7 @@ import useTransactionConfirmationModal from 'hooks/useTransactionConfirmationMod
 
 import { GNO, USDC_BY_CHAIN } from 'constants/tokens'
 import { isSupportedChain } from 'utils/supportedChainId'
-import useErrorMessage from 'hooks/useErrorMessage'
+import { useErrorModal } from 'hooks/useErrorMessageAndModal'
 
 const GNO_CLAIM_APPROVE_MESSAGE = 'Approving GNO for investing in vCOW'
 const USDC_CLAIM_APPROVE_MESSAGE = 'Approving USDC for investing in vCOW'
@@ -123,12 +123,12 @@ export default function Claim() {
     setInputAddress('')
   }
 
-  const { setError, ErrorMessage } = useErrorMessage()
+  const { handleSetError, ErrorModal } = useErrorModal()
 
   // handle submit claim
   const handleSubmitClaim = () => {
     // Reset error handling
-    setError(undefined)
+    handleSetError(undefined)
 
     // just to be sure
     if (!activeClaimAccount) return
@@ -152,7 +152,7 @@ export default function Claim() {
         .catch((error) => {
           setClaimStatus(ClaimStatus.DEFAULT)
           console.log(error)
-          setError(error?.message)
+          handleSetError(error?.message)
         })
     } else {
       const inputData = [...getIndexes(freeClaims), ...selected].map((idx: number) => {
@@ -218,6 +218,8 @@ export default function Claim() {
     <PageWrapper>
       {/* Approve confirmation modal */}
       <TransactionConfirmationModal />
+      {/* Error modal */}
+      <ErrorModal />
       {/* If claim is confirmed > trigger confetti effect */}
       <Confetti start={claimStatus === ClaimStatus.CONFIRMED} />
 
@@ -308,15 +310,6 @@ export default function Claim() {
             </>
           )}
       </FooterNavButtons>
-      {/* Error messages */}
-      <ErrorMessage
-        $css="
-          margin: -2rem auto 0 auto;
-          padding: 2rem 1.25rem 0rem 1rem;
-          width: 95%;
-          z-index: 0;
-        "
-      />
     </PageWrapper>
   )
 }

src/custom/pages/Swap/SwapMod.tsx

@@ -89,7 +89,7 @@ import { ApplicationModal } from 'state/application/reducer'
 import TransactionConfirmationModal, { OperationType } from 'components/TransactionConfirmationModal'
 import AffiliateStatusCheck from 'components/AffiliateStatusCheck'
 import usePriceImpact from 'hooks/usePriceImpact'
-import useErrorMessage from 'hooks/useErrorMessage'
+import { useErrorMessage } from 'hooks/useErrorMessageAndModal'
 
 // MOD - exported in ./styleds to avoid circ dep
 // export const StyledInfo = styled(Info)`

src/state/application/reducer.ts

@@ -40,6 +40,7 @@ export enum ApplicationModal {
   PRIVACY_POLICY,
   // -----------------      MOD: CowSwap specific modals      --------------------
   TRANSACTION_CONFIRMATION,
+  TRANSACTION_ERROR,
   ARBITRUM_OPTIONS,
   // ------------------------------------------------------------------------------
 }