Improve and unify modals animations (#364)

Resolves #297
tahowallet · Oct 23, 2023 · 06464dd · 06464dd
2 parents ce9a80e + 193a7de
commit 06464dd
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 41 deletions.
diff --git a/src/shared/components/RealmModal/RealmModalContent.tsx b/src/shared/components/RealmModal/RealmModalContent.tsx
@@ -37,7 +37,7 @@ export default function RealmModalContent({
   }
 
   return (
-    <Modal.Content>
+    <Modal.AnimatedContent>
       <div className="modal">
         <div
           className={classNames("modal_header", {
@@ -88,6 +88,6 @@ export default function RealmModalContent({
           }
         `}
       </style>
-    </Modal.Content>
+    </Modal.AnimatedContent>
   )
 }
diff --git a/src/shared/components/RealmModal/index.tsx b/src/shared/components/RealmModal/index.tsx
@@ -1,14 +1,8 @@
 import React from "react"
-import {
-  useSpring,
-  animated,
-  easings,
-  useTransition as useSpringTransition,
-} from "@react-spring/web"
+import { useSpring, animated, easings } from "@react-spring/web"
 import Modal from "shared/components/Modal"
 // import { REALMS_MAP_DATA } from "shared/constants"
 // import { useIslandContext } from "shared/hooks"
-import { selectDisplayedRealmId, useDappSelector } from "redux-state"
 import RealmModalContent from "./RealmModalContent"
 
 export default function RealmModal({
@@ -18,8 +12,6 @@ export default function RealmModal({
   onClose: () => void
   children: React.ReactNode
 }) {
-  const initialRealmId = useDappSelector(selectDisplayedRealmId)
-
   // const islandContext = useIslandContext()
 
   // const [prevRealm, nextRealm] = useMemo(() => {
@@ -54,15 +46,6 @@ export default function RealmModal({
     []
   )
 
-  const transitions = useSpringTransition(initialRealmId, {
-    initial: { backdropFilter: "blur(26px)" },
-    from: { opacity: 0, backdropFilter: "blur(0)" },
-    enter: { opacity: 1, backdropFilter: "blur(26px)" },
-    leave: { opacity: 0, backdropFilter: "blur(0)" },
-    exitBeforeEnter: true,
-    config: { duration: 200, easing: easings.easeOutQuad },
-  })
-
   return (
     <Modal.Container type="fullscreen" onClickOutside={onClose}>
       <animated.div style={{ position: "relative" }}>
@@ -96,13 +79,7 @@ export default function RealmModal({
               paddingBottom: 90,
             }}
           >
-            {transitions((style) => (
-              <animated.div style={{ ...style }}>
-                <RealmModalContent onClose={onClose}>
-                  {children}
-                </RealmModalContent>
-              </animated.div>
-            ))}
+            <RealmModalContent onClose={onClose}>{children}</RealmModalContent>
           </div>
         </animated.div>
       </animated.div>

diff --git a/src/shared/components/Transactions/TransactionsModal.tsx b/src/shared/components/Transactions/TransactionsModal.tsx
@@ -44,7 +44,7 @@ export default function TransactionsModal({
 
   return (
     <Modal.Container type="fullscreen" onClickOutside={close}>
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="transactions_container column">
           <h1>{title}</h1>
           {transactions.map(
@@ -68,7 +68,7 @@ export default function TransactionsModal({
             font-weight: 500;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Claim/ClaimAlreadyClaimed.tsx b/src/ui/Claim/ClaimAlreadyClaimed.tsx
@@ -13,7 +13,7 @@ export default function ClaimAlreadyClaimed() {
 
   return (
     <Modal.Container type="island-without-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="claimed_container column_center">
           <ClaimHeader header="Already claimed" />
           <TahoAmount amount={eligibility?.amount} hasBackground size="large" />
@@ -37,7 +37,7 @@ export default function ClaimAlreadyClaimed() {
             gap: 16px;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Claim/ClaimCheckFail.tsx b/src/ui/Claim/ClaimCheckFail.tsx
@@ -26,7 +26,7 @@ export default function ClaimCheckFail() {
 
   return (
     <Modal.Container type="island-with-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="fail_container column_center">
           <ClaimHeader
             season="Season 1"
@@ -49,7 +49,7 @@ export default function ClaimCheckFail() {
             gap: 40px;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Claim/ClaimCheckSuccess.tsx b/src/ui/Claim/ClaimCheckSuccess.tsx
@@ -45,7 +45,7 @@ export default function ClaimCheckSuccess() {
 
   return (
     <Modal.Container type="island-with-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="success_container column_center">
           <ClaimHeader
             season="Season 1"
@@ -98,7 +98,7 @@ export default function ClaimCheckSuccess() {
             }
           `}
         </style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Claim/ClaimFinish.tsx b/src/ui/Claim/ClaimFinish.tsx
@@ -13,7 +13,7 @@ export default function ClaimFinish() {
 
   return (
     <Modal.Container type="island-without-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="finish_container column_center">
           <ClaimHeader header="You have landed" subheader="You just claimed:" />
           <TahoAmount amount={eligibility?.amount} hasBackground size="large" />
@@ -38,7 +38,7 @@ export default function ClaimFinish() {
             gap: 16px;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Claim/subpages/ClaimingFlow.tsx b/src/ui/Claim/subpages/ClaimingFlow.tsx
@@ -7,7 +7,7 @@ import ClaimingSignTx from "./ClaimingSignTx"
 
 export default function ClaimingFlow() {
   return (
-    <Modal.Content>
+    <Modal.AnimatedContent>
       <div className="flow column">
         <Switch>
           <Route path={ROUTES.CLAIM.DETAILS_PLEDGE}>
@@ -46,6 +46,6 @@ export default function ClaimingFlow() {
           line-height: 32px;
         }
       `}</style>
-    </Modal.Content>
+    </Modal.AnimatedContent>
   )
 }
diff --git a/src/ui/Claim/subpages/ClaimingStats.tsx b/src/ui/Claim/subpages/ClaimingStats.tsx
@@ -18,7 +18,7 @@ export default function ClaimingStats() {
   const eligibility = useDappSelector(selectEligibility)
 
   return (
-    <Modal.Content>
+    <Modal.AnimatedContent>
       <div className="stats column">
         <div className="stats_header">You can claim</div>
         <TahoAmount amount={eligibility?.amount ?? 0n} />
@@ -101,6 +101,6 @@ export default function ClaimingStats() {
           left: 50%;
         }
       `}</style>
-    </Modal.Content>
+    </Modal.AnimatedContent>
   )
 }