fix: avoid animations when rendering a historic receipt (#1128)

Author: agualis

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>

lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx

@@ -254,6 +254,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) {
     previewModalDisclosure,
     handler,
     wethIsEth,
+    urlTxHash,
     removeLiquidityTxHash,
     hasQuoteContext,
     amountsOut,

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>

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>

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}>