[Claim-Reject-Modals] Fixes empty modal (#2204)

* modal is NOT open without a message * pass proper closing functions * better constant naming in hook
gnosis · Jan 18, 2022 · 7751865 · 7751865
1 parent 7099b6f
commit 7751865
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/src/custom/hooks/useErrorMessageAndModal.tsx b/src/custom/hooks/useErrorMessageAndModal.tsx
@@ -29,17 +29,16 @@ export function useErrorMessage() {
 }
 
 export function useErrorModal() {
-  // Any async bc errors
-  const [internalError, setError] = useState<string | undefined>()
+  const [internalError, setInternalError] = useState<string | undefined>()
   const { openModal, closeModal, TransactionErrorModal } = useTransactionErrorModal()
 
   return useMemo(() => {
     const handleCloseError = () => {
       closeModal()
-      setError(undefined)
+      setInternalError(undefined)
     }
     const handleSetError = (error: string | undefined) => {
-      setError(error)
+      setInternalError(error)
 
       // IF error, open modal
       error && openModal()
@@ -53,5 +52,5 @@ export function useErrorModal() {
         <TransactionErrorModal onDismiss={handleCloseError} message={message} />
       ),
     }
-  }, [TransactionErrorModal, closeModal, internalError, openModal])
+  }, [internalError, closeModal, openModal, TransactionErrorModal])
 }
diff --git a/src/custom/hooks/useTransactionErrorModal.tsx b/src/custom/hooks/useTransactionErrorModal.tsx
@@ -14,7 +14,7 @@ export default function useTransactionErrorModal() {
     closeModal,
     TransactionErrorModal: useCallback(
       ({ message, onDismiss }: { message?: string; onDismiss: () => void }) => (
-        <GpModal isOpen={showTransactionErrorModal} onDismiss={closeModal}>
+        <GpModal isOpen={!!message && showTransactionErrorModal} onDismiss={closeModal}>
           <TransactionErrorContent onDismiss={onDismiss} message={message} />
         </GpModal>
       ),

diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx
@@ -50,7 +50,7 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
   const { updateInvestAmount } = useClaimDispatchers()
   const { investFlowData } = useClaimState()
 
-  const { handleSetError, ErrorModal } = useErrorModal()
+  const { handleSetError, handleCloseError, ErrorModal } = useErrorModal()
 
   const investedAmount = useMemo(() => investFlowData[optionIndex].investedAmount, [investFlowData, optionIndex])
 
@@ -93,7 +93,9 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
   // Save "local" approving state (pre-BC) for rendering spinners etc
   const [approving, setApproving] = useState(false)
   const handleApprove = useCallback(async () => {
-    handleSetError(undefined)
+    // reset errors and close any modals
+    handleCloseError()
+
     if (!approveCallback) return
 
     try {
@@ -106,7 +108,7 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
     } finally {
       setApproving(false)
     }
-  }, [approveCallback, handleSetError, token?.symbol])
+  }, [approveCallback, handleCloseError, handleSetError, token?.symbol])
 
   const vCowAmount = useMemo(() => {
     if (!token || !price || !investedAmount) {

diff --git a/src/custom/pages/Claim/index.tsx b/src/custom/pages/Claim/index.tsx
@@ -81,7 +81,7 @@ export default function Claim() {
   // toggle wallet when disconnected
   const toggleWalletModal = useWalletModalToggle()
   // error handling modals
-  const { handleSetError, ErrorModal } = useErrorModal()
+  const { handleCloseError, handleSetError, ErrorModal } = useErrorModal()
 
   // get user claim data
   const userClaimData = useUserEnhancedClaimData(activeClaimAccount)
@@ -132,7 +132,7 @@ export default function Claim() {
   // handle submit claim
   const handleSubmitClaim = () => {
     // Reset error handling
-    handleSetError(undefined)
+    handleCloseError()
 
     // just to be sure
     if (!activeClaimAccount) return
@@ -149,7 +149,7 @@ export default function Claim() {
         })
         .catch((error) => {
           setClaimStatus(ClaimStatus.DEFAULT)
-          console.log(error)
+          console.error('[Claim::index::handleSubmitClaim]::error', error)
           handleSetError(error?.message)
         })
     }