From f0ea125bd272bb19d8508271e7d013b53161b575 Mon Sep 17 00:00:00 2001
From: peiman3 <peiman@cc.snxdao.io>
Date: Fri, 3 Jan 2025 14:23:58 +0330
Subject: [PATCH] Warning not showing properly.

---
 .../components/ContractError/ContractError.tsx |  2 +-
 liquidity/ui/src/components/Claim/Claim.tsx    |  6 ++++--
 .../components/ClosePosition/ClosePosition.tsx |  1 +
 .../ui/src/components/Deposit/Deposit.tsx      |  8 +++++---
 .../InitialDeposit/InitialDeposit.tsx          |  6 ++++--
 .../ui/src/components/MigrateUSD/StepIntro.tsx |  2 +-
 .../src/components/Migration/StepSummary.tsx   |  2 +-
 .../src/components/Undelegate/Undelegate.tsx   | 15 ++++++++++-----
 .../ui/src/components/Withdraw/Withdraw.tsx    | 18 +++++++++++++++---
 9 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/liquidity/components/ContractError/ContractError.tsx b/liquidity/components/ContractError/ContractError.tsx
index d575df21..1ef208a9 100644
--- a/liquidity/components/ContractError/ContractError.tsx
+++ b/liquidity/components/ContractError/ContractError.tsx
@@ -21,7 +21,7 @@ export function ContractError({ contractError }: { contractError: ContractErrorT
           details...
         </Button>
       ) : null}
-      <Collapse in={isOpen} animateOpacity>
+      <Collapse in={isOpen} animateOpacity unmountOnExit>
         <Text fontStyle="italic" fontSize="0.8em">
           {contractError.name}
         </Text>
diff --git a/liquidity/ui/src/components/Claim/Claim.tsx b/liquidity/ui/src/components/Claim/Claim.tsx
index b2e6daf7..53fd058b 100644
--- a/liquidity/ui/src/components/Claim/Claim.tsx
+++ b/liquidity/ui/src/components/Claim/Claim.tsx
@@ -105,7 +105,7 @@ export function Claim() {
           </Flex>
         </Flex>
       </BorderBox>
-      <Collapse in={debtChange.lte(0) && maxClaimble.gt(0)} animateOpacity>
+      <Collapse in={debtChange.lte(0) && maxClaimble.gt(0)} animateOpacity unmountOnExit>
         <Alert colorScheme="green" mb="6" borderRadius="6px">
           <AlertIcon />
           <Text>
@@ -127,7 +127,7 @@ export function Claim() {
           </Text>
         </Alert>
       </Collapse>
-      <Collapse in={debtChange.gt(0)} animateOpacity>
+      <Collapse in={debtChange.gt(0)} animateOpacity unmountOnExit>
         <Alert status="warning" mb="6" borderRadius="6px">
           <AlertIcon />
           <Text>
@@ -139,6 +139,7 @@ export function Claim() {
       <Collapse
         in={debtChange.lte(0) && network?.preset !== 'andromeda' && maxBorrowingCapacity.gt(0)}
         animateOpacity
+        unmountOnExit
       >
         <Alert colorScheme="blue" mb="6" borderRadius="6px">
           <AlertIcon />
@@ -168,6 +169,7 @@ export function Claim() {
           network?.preset !== 'andromeda'
         }
         animateOpacity
+        unmountOnExit
       >
         <Alert colorScheme="info" mb="6" borderRadius="6px">
           <AlertIcon />
diff --git a/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx b/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx
index a927b06c..a541044c 100644
--- a/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx
+++ b/liquidity/ui/src/components/ClosePosition/ClosePosition.tsx
@@ -177,6 +177,7 @@ function ClosePositionUi({ onSubmit, onClose }: { onClose: () => void; onSubmit:
             .gte(liquidityPosition.debt)
         }
         animateOpacity
+        unmountOnExit
       >
         <Alert mb={6} status="error" borderRadius="6px">
           <AlertIcon />
diff --git a/liquidity/ui/src/components/Deposit/Deposit.tsx b/liquidity/ui/src/components/Deposit/Deposit.tsx
index bf0efeaf..193b88c1 100644
--- a/liquidity/ui/src/components/Deposit/Deposit.tsx
+++ b/liquidity/ui/src/components/Deposit/Deposit.tsx
@@ -255,11 +255,11 @@ export function Deposit() {
         <CollateralAlert mb="6" tokenBalance={transferrableSnx.collateral} />
       ) : null}
 
-      <Collapse in={collateralChange.gt(0) && !overAvailableBalance} animateOpacity>
+      <Collapse in={collateralChange.gt(0) && !overAvailableBalance} animateOpacity unmountOnExit>
         <WithdrawIncrease />
       </Collapse>
 
-      <Collapse in={isStataUSDC} animateOpacity>
+      <Collapse in={isStataUSDC} animateOpacity unmountOnExit>
         <Alert mb={6} status="info" borderRadius="6px">
           <AlertIcon />
           <AlertDescription>
@@ -277,6 +277,7 @@ export function Deposit() {
               .lt(collateralType.minDelegationD18)
           }
           animateOpacity
+          unmountOnExit
         >
           <Alert mb={6} status="error" borderRadius="6px">
             <AlertIcon />
@@ -289,7 +290,7 @@ export function Deposit() {
         </Collapse>
       ) : null}
 
-      <Collapse in={overAvailableBalance} animateOpacity>
+      <Collapse in={overAvailableBalance} animateOpacity unmountOnExit>
         <Alert mb={6} status="error" borderRadius="6px">
           <AlertIcon />
           <AlertDescription>
@@ -308,6 +309,7 @@ export function Deposit() {
               .gte(collateralType.minDelegationD18)
           }
           animateOpacity
+          unmountOnExit
         >
           <TransactionSummary
             mb={6}
diff --git a/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx b/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx
index 1a533513..a48dcc60 100644
--- a/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx
+++ b/liquidity/ui/src/components/InitialDeposit/InitialDeposit.tsx
@@ -238,10 +238,11 @@ export function InitialDeposit({
               collateralChange.gte(collateralType.minDelegationD18)
             }
             animateOpacity
+            unmountOnExit
           >
             <WithdrawIncrease />
           </Collapse>
-          <Collapse in={isStataUSDC} animateOpacity>
+          <Collapse in={isStataUSDC} animateOpacity unmountOnExit>
             <Alert mb={6} status="info" borderRadius="6px">
               <AlertIcon />
               <AlertDescription>
@@ -256,6 +257,7 @@ export function InitialDeposit({
               !overAvailableBalance
             }
             animateOpacity
+            unmountOnExit
           >
             <Alert mb={6} status="error" borderRadius="6px">
               <AlertIcon />
@@ -268,7 +270,7 @@ export function InitialDeposit({
               </AlertDescription>
             </Alert>
           </Collapse>
-          <Collapse in={overAvailableBalance} animateOpacity>
+          <Collapse in={overAvailableBalance} animateOpacity unmountOnExit>
             <Alert mb={6} status="error" borderRadius="6px">
               <AlertIcon />
               <AlertDescription>
diff --git a/liquidity/ui/src/components/MigrateUSD/StepIntro.tsx b/liquidity/ui/src/components/MigrateUSD/StepIntro.tsx
index b7147753..db91bfc2 100644
--- a/liquidity/ui/src/components/MigrateUSD/StepIntro.tsx
+++ b/liquidity/ui/src/components/MigrateUSD/StepIntro.tsx
@@ -131,7 +131,7 @@ export const StepIntro = ({
         </Flex>
       </BorderBox>
 
-      <Collapse in={v2_balance?.lt(amount)} animateOpacity>
+      <Collapse in={v2_balance?.lt(amount)} animateOpacity unmountOnExit>
         <Alert borderRadius="6px" status="error">
           <AlertIcon />
           <AlertDescription>You cannot convert more than your v2 sUSD balance</AlertDescription>
diff --git a/liquidity/ui/src/components/Migration/StepSummary.tsx b/liquidity/ui/src/components/Migration/StepSummary.tsx
index 438ab2c1..e1236564 100644
--- a/liquidity/ui/src/components/Migration/StepSummary.tsx
+++ b/liquidity/ui/src/components/Migration/StepSummary.tsx
@@ -220,7 +220,7 @@ export const StepSummary = ({
       </Box>
 
       {data && snxCollateral ? (
-        <Collapse in={data.balance.lt(snxCollateral.minDelegationD18)} animateOpacity>
+        <Collapse in={data.balance.lt(snxCollateral.minDelegationD18)} animateOpacity unmountOnExit>
           <Alert mb={3.5} status="error" borderRadius="6px">
             <AlertIcon />
             <AlertDescription fontSize="16px">
diff --git a/liquidity/ui/src/components/Undelegate/Undelegate.tsx b/liquidity/ui/src/components/Undelegate/Undelegate.tsx
index 55fa77b9..5be5948a 100644
--- a/liquidity/ui/src/components/Undelegate/Undelegate.tsx
+++ b/liquidity/ui/src/components/Undelegate/Undelegate.tsx
@@ -166,7 +166,7 @@ export function Undelegate() {
         </Flex>
       </BorderBox>
 
-      <Collapse in={isInputDisabled} animateOpacity>
+      <Collapse in={isInputDisabled} animateOpacity unmountOnExit>
         <Alert mb={6} status="warning" borderRadius="6px">
           <AlertIcon />
           <Flex direction="column">
@@ -180,7 +180,7 @@ export function Undelegate() {
       </Collapse>
 
       {collateralType ? (
-        <Collapse in={!isValidLeftover && !collateralChange.eq(0)} animateOpacity>
+        <Collapse in={!isValidLeftover && !collateralChange.eq(0)} animateOpacity unmountOnExit>
           <Alert mb={6} status="info" borderRadius="6px">
             <AlertIcon />
             <Flex direction="column">
@@ -199,7 +199,11 @@ export function Undelegate() {
         </Collapse>
       ) : null}
 
-      <Collapse in={collateralChange.abs().gt(0) && isValidLeftover && isRunning} animateOpacity>
+      <Collapse
+        in={collateralChange.abs().gt(0) && isValidLeftover && isRunning}
+        animateOpacity
+        unmountOnExit
+      >
         <Alert status="warning" mb="6">
           <AlertIcon />
           <Text>
@@ -215,6 +219,7 @@ export function Undelegate() {
             collateralChange.abs().gt(0) && isValidLeftover && !isRunning && maxWithdrawable?.gt(0)
           }
           animateOpacity
+          unmountOnExit
         >
           <Alert status="info" mb="6" borderRadius="6px">
             <AlertIcon />
@@ -252,7 +257,7 @@ export function Undelegate() {
       ) : null}
 
       {network?.preset === 'andromeda' && liquidityPosition ? (
-        <Collapse in={liquidityPosition.debt.gt(0)} animateOpacity>
+        <Collapse in={liquidityPosition.debt.gt(0)} animateOpacity unmountOnExit>
           <Alert status="error" mb="6" borderRadius="6px">
             <AlertIcon />
             <Text>
@@ -288,7 +293,7 @@ export function Undelegate() {
       ) : null}
 
       {liquidityPosition ? (
-        <Collapse in={collateralChange.abs().gt(0)} animateOpacity>
+        <Collapse in={collateralChange.abs().gt(0)} animateOpacity unmountOnExit>
           <TransactionSummary
             mb={6}
             items={[
diff --git a/liquidity/ui/src/components/Withdraw/Withdraw.tsx b/liquidity/ui/src/components/Withdraw/Withdraw.tsx
index 891f3243..7db5d017 100644
--- a/liquidity/ui/src/components/Withdraw/Withdraw.tsx
+++ b/liquidity/ui/src/components/Withdraw/Withdraw.tsx
@@ -113,7 +113,11 @@ export function Withdraw({ isDebtWithdrawal = false }: { isDebtWithdrawal?: bool
         </Flex>
       </BorderBox>
 
-      <Collapse in={maxWithdrawable && maxWithdrawable.gt(0) && isRunning} animateOpacity>
+      <Collapse
+        in={maxWithdrawable && maxWithdrawable.gt(0) && isRunning}
+        animateOpacity
+        unmountOnExit
+      >
         <Alert status="warning" mb="6" borderRadius="6px">
           <AlertIcon />
           <Text>
@@ -123,14 +127,22 @@ export function Withdraw({ isDebtWithdrawal = false }: { isDebtWithdrawal?: bool
         </Alert>
       </Collapse>
 
-      <Collapse in={maxWithdrawable && maxWithdrawable.gt(0) && !isRunning} animateOpacity>
+      <Collapse
+        in={maxWithdrawable && maxWithdrawable.gt(0) && !isRunning}
+        animateOpacity
+        unmountOnExit
+      >
         <Alert status="success" mb="6" borderRadius="6px">
           <AlertIcon />
           <Amount prefix="You can now withdraw " value={maxWithdrawable} suffix={` ${symbol}`} />
         </Alert>
       </Collapse>
 
-      <Collapse in={maxWithdrawable && withdrawAmount.gt(maxWithdrawable)} animateOpacity>
+      <Collapse
+        in={maxWithdrawable && withdrawAmount.gt(maxWithdrawable)}
+        animateOpacity
+        unmountOnExit
+      >
         <Alert colorScheme="red" mb="6" borderRadius="6px">
           <AlertIcon />
           <Text>