From e098d12a7ef42201b330f53d22b55f262b26060a Mon Sep 17 00:00:00 2001
From: Alberto Gualis <alberto@balancer.finance>
Date: Wed, 25 Sep 2024 14:59:02 +0200
Subject: [PATCH] fix: avoid animations when rendering a historic receipt
 (#1128)

---
 .../add-liquidity/modal/AddLiquidityModal.tsx   | 10 ++++++++--
 .../RemoveLiquidityProvider.tsx                 |  1 +
 .../modal/RemoveLiquidityModal.tsx              |  4 +++-
 lib/modules/swap/modal/SwapModal.tsx            | 12 ++++++++++--
 .../components/modals/ActionModalFooter.tsx     | 17 ++++++++++++++++-
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx b/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx
index a3ea863d8..c22aee8eb 100644
--- a/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx
+++ b/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx
@@ -35,8 +35,13 @@ export function AddLiquidityModal({
 }: Props & Omit<ModalProps, 'children'>) {
   const { isDesktop } = useBreakpoints()
   const initialFocusRef = useRef(null)
-  const { transactionSteps, addLiquidityTxHash, hasQuoteContext, setInitialHumanAmountsIn } =
-    useAddLiquidity()
+  const {
+    transactionSteps,
+    addLiquidityTxHash,
+    hasQuoteContext,
+    urlTxHash,
+    setInitialHumanAmountsIn,
+  } = useAddLiquidity()
   const { pool, chain } = usePool()
   const { redirectToPoolPage } = usePoolRedirect(pool)
   const { userAddress } = useUserAccount()
@@ -101,6 +106,7 @@ export function AddLiquidityModal({
           currentStep={transactionSteps.currentStep}
           returnLabel="Return to pool"
           returnAction={redirectToPoolPage}
+          urlTxHash={urlTxHash}
         />
       </ModalContent>
     </Modal>
diff --git a/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx b/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx
index dc1ab349c..bc0abcbc1 100644
--- a/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx
+++ b/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx
@@ -254,6 +254,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) {
     previewModalDisclosure,
     handler,
     wethIsEth,
+    urlTxHash,
     removeLiquidityTxHash,
     hasQuoteContext,
     amountsOut,
diff --git a/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx b/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx
index 452b9b1cf..a748cb5cf 100644
--- a/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx
+++ b/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx
@@ -35,7 +35,8 @@ export function RemoveLiquidityModal({
 }: Props & Omit<ModalProps, 'children'>) {
   const { isDesktop } = useBreakpoints()
   const initialFocusRef = useRef(null)
-  const { transactionSteps, removeLiquidityTxHash, hasQuoteContext } = useRemoveLiquidity()
+  const { transactionSteps, removeLiquidityTxHash, urlTxHash, hasQuoteContext } =
+    useRemoveLiquidity()
   const { pool, chain } = usePool()
   const { redirectToPoolPage } = usePoolRedirect(pool)
   const { userAddress } = useUserAccount()
@@ -99,6 +100,7 @@ export function RemoveLiquidityModal({
           currentStep={transactionSteps.currentStep}
           returnLabel="Return to pool"
           returnAction={redirectToPoolPage}
+          urlTxHash={urlTxHash}
         />
       </ModalContent>
     </Modal>
diff --git a/lib/modules/swap/modal/SwapModal.tsx b/lib/modules/swap/modal/SwapModal.tsx
index 2ece65953..4f71d8a30 100644
--- a/lib/modules/swap/modal/SwapModal.tsx
+++ b/lib/modules/swap/modal/SwapModal.tsx
@@ -39,8 +39,15 @@ export function SwapPreviewModal({
   const { userAddress } = useUserAccount()
   const { stopTokenPricePolling } = useTokens()
 
-  const { transactionSteps, swapAction, isWrap, selectedChain, swapTxHash, hasQuoteContext } =
-    useSwap()
+  const {
+    transactionSteps,
+    swapAction,
+    isWrap,
+    selectedChain,
+    swapTxHash,
+    urlTxHash,
+    hasQuoteContext,
+  } = useSwap()
 
   const swapReceipt = useSwapReceipt({
     txHash: swapTxHash,
@@ -97,6 +104,7 @@ export function SwapPreviewModal({
           currentStep={transactionSteps.currentStep}
           returnLabel="Swap again"
           returnAction={onClose}
+          urlTxHash={urlTxHash}
         />
       </ModalContent>
     </Modal>
diff --git a/lib/shared/components/modals/ActionModalFooter.tsx b/lib/shared/components/modals/ActionModalFooter.tsx
index b3b307349..27a37b95f 100644
--- a/lib/shared/components/modals/ActionModalFooter.tsx
+++ b/lib/shared/components/modals/ActionModalFooter.tsx
@@ -49,9 +49,24 @@ type Props = {
   currentStep: TransactionStep
   returnLabel: string
   returnAction: () => void
+  urlTxHash?: string
 }
 
-export function ActionModalFooter({ isSuccess, currentStep, returnLabel, returnAction }: Props) {
+export function ActionModalFooter({
+  isSuccess,
+  currentStep,
+  returnLabel,
+  returnAction,
+  urlTxHash,
+}: Props) {
+  // Avoid animations when displaying a historic receipt
+  if (urlTxHash) {
+    return (
+      <ModalFooter>
+        <SuccessActions returnLabel={returnLabel} returnAction={returnAction} />
+      </ModalFooter>
+    )
+  }
   return (
     <ModalFooter>
       <AnimatePresence mode="wait" initial={false}>