From 27af23b37a489a41c1f15472ea30030a344a5d90 Mon Sep 17 00:00:00 2001
From: Piotr Kacprzyk <ayioerthi@gmail.com>
Date: Thu, 12 Oct 2023 15:25:27 +0200
Subject: [PATCH 1/4] Improve and unify modals animations

---
 .env.defaults                                         | 2 +-
 src/shared/components/Modals/CongratulationsModal.tsx | 4 ++--
 src/shared/components/RealmModal/index.tsx            | 4 ++--
 src/ui/Claim/ClaimCheck.tsx                           | 4 ++--
 src/ui/Island/Modals/ModalLeavingRealm.tsx            | 4 ++--
 src/ui/LiquidityPool/index.tsx                        | 4 ++--
 src/ui/Referrals/index.tsx                            | 4 ++--
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.env.defaults b/.env.defaults
index 55a6f3141..19e6936b5 100644
--- a/.env.defaults
+++ b/.env.defaults
@@ -9,7 +9,7 @@ TENDERLY_RPC_URL="https://rpc.tenderly.co/fork/2fc2cf12-5c58-439f-9b5e-967bfd021
 LOCALHOST_RPC_URL="http://localhost:8545"
 ETHEREUM_RPC_URL="https://1rpc.io/eth"
 # Which RPC URL to use
-USE_LOCALHOST_FORK="false"
+USE_LOCALHOST_FORK="true"
 USE_TENDERLY_FORK="false"
 USE_ARBITRUM_SEPOLIA="false"
 # Tenderly setup
diff --git a/src/shared/components/Modals/CongratulationsModal.tsx b/src/shared/components/Modals/CongratulationsModal.tsx
index 2a61b4070..5dd447800 100644
--- a/src/shared/components/Modals/CongratulationsModal.tsx
+++ b/src/shared/components/Modals/CongratulationsModal.tsx
@@ -20,7 +20,7 @@ export default function CongratulationsModal({
   return (
     <>
       <Modal.Container type="fullscreen" onClickOutside={close}>
-        <Modal.AnimatedContent>
+        <Modal.Content>
           <div className="modal">
             <div className="modal_header">
               <h1>{header}</h1>
@@ -29,7 +29,7 @@ export default function CongratulationsModal({
             <div className="modal_content column_center">{children}</div>
             <div className="modal_controls column_center">{buttons}</div>
           </div>
-        </Modal.AnimatedContent>
+        </Modal.Content>
       </Modal.Container>
       <style jsx>{`
         .modal {
diff --git a/src/shared/components/RealmModal/index.tsx b/src/shared/components/RealmModal/index.tsx
index d6c27b847..fdd24dadc 100644
--- a/src/shared/components/RealmModal/index.tsx
+++ b/src/shared/components/RealmModal/index.tsx
@@ -97,11 +97,11 @@ export default function RealmModal({
             }}
           >
             {transitions((style) => (
-              <animated.div style={{ ...style }}>
+              // <animated.div style={{ ...style }}>
                 <RealmModalContent onClose={onClose}>
                   {children}
                 </RealmModalContent>
-              </animated.div>
+              // </animated.div>
             ))}
           </div>
         </animated.div>
diff --git a/src/ui/Claim/ClaimCheck.tsx b/src/ui/Claim/ClaimCheck.tsx
index 3c567c63b..6bd0e658c 100644
--- a/src/ui/Claim/ClaimCheck.tsx
+++ b/src/ui/Claim/ClaimCheck.tsx
@@ -110,7 +110,7 @@ export default function ClaimCheck() {
 
   return (
     <Modal.ScrollableContainer topSpacing={217} type="island-without-overlay">
-      <Modal.AnimatedContent>
+      <Modal.Content>
         <div className="check_container">
           <ClaimHeader
             season="Season 1"
@@ -198,7 +198,7 @@ export default function ClaimCheck() {
             margin: 0 12px;
           }
         `}</style>
-      </Modal.AnimatedContent>
+      </Modal.Content>
     </Modal.ScrollableContainer>
   )
 }
diff --git a/src/ui/Island/Modals/ModalLeavingRealm.tsx b/src/ui/Island/Modals/ModalLeavingRealm.tsx
index a745e3c67..79847f56a 100644
--- a/src/ui/Island/Modals/ModalLeavingRealm.tsx
+++ b/src/ui/Island/Modals/ModalLeavingRealm.tsx
@@ -28,7 +28,7 @@ export default function ModalLeavingRealm({
   return (
     <>
       <Modal.Container type="fullscreen" onClickOutside={close}>
-        <Modal.AnimatedContent>
+        <Modal.Content>
           <div className="modal">
             <h1 className="modal_header">Leaving {realm?.name}</h1>
             <div className="modal_infobox">
@@ -58,7 +58,7 @@ export default function ModalLeavingRealm({
               />
             </div>
           </div>
-        </Modal.AnimatedContent>
+        </Modal.Content>
       </Modal.Container>
       <style jsx>{`
         .modal {
diff --git a/src/ui/LiquidityPool/index.tsx b/src/ui/LiquidityPool/index.tsx
index 1b4a319df..1e99d559e 100644
--- a/src/ui/LiquidityPool/index.tsx
+++ b/src/ui/LiquidityPool/index.tsx
@@ -64,7 +64,7 @@ export default function LiquidityPool() {
 
   return (
     <Modal.Container type="island-without-overlay">
-      <Modal.AnimatedContent>
+      <Modal.Content>
         <div className="content column_center">
           <div className="lp_container row">
             <div className="token column">
@@ -113,7 +113,7 @@ export default function LiquidityPool() {
             align-items: center;
           }
         `}</style>
-      </Modal.AnimatedContent>
+      </Modal.Content>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Referrals/index.tsx b/src/ui/Referrals/index.tsx
index 901d8b27b..d553c9430 100644
--- a/src/ui/Referrals/index.tsx
+++ b/src/ui/Referrals/index.tsx
@@ -29,7 +29,7 @@ export default function Referrals() {
 
   return (
     <Modal.ScrollableContainer topSpacing={176} type="island-without-overlay">
-      <Modal.AnimatedContent>
+      <Modal.Content>
         <div className="referrals_container column_center">
           <div className="referrals_header">
             <h1>Refer & get 5% Bonus</h1>
@@ -152,7 +152,7 @@ export default function Referrals() {
             z-index: -1;
           }
         `}</style>
-      </Modal.AnimatedContent>
+      </Modal.Content>
     </Modal.ScrollableContainer>
   )
 }

From 353ba51bf9694f34b8ea645b73d70313edecfd33 Mon Sep 17 00:00:00 2001
From: Piotr Kacprzyk <ayioerthi@gmail.com>
Date: Fri, 13 Oct 2023 15:14:34 +0200
Subject: [PATCH 2/4] Reverted flag in env.defaults

---
 .env.defaults | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.defaults b/.env.defaults
index 19e6936b5..55a6f3141 100644
--- a/.env.defaults
+++ b/.env.defaults
@@ -9,7 +9,7 @@ TENDERLY_RPC_URL="https://rpc.tenderly.co/fork/2fc2cf12-5c58-439f-9b5e-967bfd021
 LOCALHOST_RPC_URL="http://localhost:8545"
 ETHEREUM_RPC_URL="https://1rpc.io/eth"
 # Which RPC URL to use
-USE_LOCALHOST_FORK="true"
+USE_LOCALHOST_FORK="false"
 USE_TENDERLY_FORK="false"
 USE_ARBITRUM_SEPOLIA="false"
 # Tenderly setup

From 6deff258ca7d4a3bbc2af8cab1618ec8a25af64f Mon Sep 17 00:00:00 2001
From: Piotr Kacprzyk <ayioerthi@gmail.com>
Date: Mon, 16 Oct 2023 14:48:40 +0200
Subject: [PATCH 3/4] Removed commented block of code

---
 src/shared/components/RealmModal/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/shared/components/RealmModal/index.tsx b/src/shared/components/RealmModal/index.tsx
index fdd24dadc..10f215b78 100644
--- a/src/shared/components/RealmModal/index.tsx
+++ b/src/shared/components/RealmModal/index.tsx
@@ -97,11 +97,9 @@ export default function RealmModal({
             }}
           >
             {transitions((style) => (
-              // <animated.div style={{ ...style }}>
-                <RealmModalContent onClose={onClose}>
-                  {children}
-                </RealmModalContent>
-              // </animated.div>
+              <RealmModalContent onClose={onClose}>
+                {children}
+              </RealmModalContent>
             ))}
           </div>
         </animated.div>

From a5104e6dd56ab97006cf419b8c86ea40d9a35bc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Paczy=C5=84ski?= <michal.paczynski@thesis.co>
Date: Fri, 20 Oct 2023 12:50:52 +0200
Subject: [PATCH 4/4] Set all modals to `AnimatedContent`

---
 .../Modals/CongratulationsModal.tsx           |  4 +--
 .../RealmModal/RealmModalContent.tsx          |  4 +--
 src/shared/components/RealmModal/index.tsx    | 25 ++-----------------
 .../Transactions/TransactionsModal.tsx        |  4 +--
 src/ui/Claim/ClaimAlreadyClaimed.tsx          |  4 +--
 src/ui/Claim/ClaimCheck.tsx                   |  4 +--
 src/ui/Claim/ClaimCheckFail.tsx               |  4 +--
 src/ui/Claim/ClaimCheckSuccess.tsx            |  4 +--
 src/ui/Claim/ClaimFinish.tsx                  |  4 +--
 src/ui/Claim/subpages/ClaimingFlow.tsx        |  4 +--
 src/ui/Claim/subpages/ClaimingStats.tsx       |  4 +--
 src/ui/Island/Modals/ModalLeavingRealm.tsx    |  4 +--
 src/ui/LiquidityPool/index.tsx                |  4 +--
 src/ui/Referrals/index.tsx                    |  4 +--
 14 files changed, 28 insertions(+), 49 deletions(-)

diff --git a/src/shared/components/Modals/CongratulationsModal.tsx b/src/shared/components/Modals/CongratulationsModal.tsx
index 5dd447800..2a61b4070 100644
--- a/src/shared/components/Modals/CongratulationsModal.tsx
+++ b/src/shared/components/Modals/CongratulationsModal.tsx
@@ -20,7 +20,7 @@ export default function CongratulationsModal({
   return (
     <>
       <Modal.Container type="fullscreen" onClickOutside={close}>
-        <Modal.Content>
+        <Modal.AnimatedContent>
           <div className="modal">
             <div className="modal_header">
               <h1>{header}</h1>
@@ -29,7 +29,7 @@ export default function CongratulationsModal({
             <div className="modal_content column_center">{children}</div>
             <div className="modal_controls column_center">{buttons}</div>
           </div>
-        </Modal.Content>
+        </Modal.AnimatedContent>
       </Modal.Container>
       <style jsx>{`
         .modal {
diff --git a/src/shared/components/RealmModal/RealmModalContent.tsx b/src/shared/components/RealmModal/RealmModalContent.tsx
index ce702680f..700e1e400 100644
--- 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
index 10f215b78..41d508ad2 100644
--- 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,11 +79,7 @@ export default function RealmModal({
               paddingBottom: 90,
             }}
           >
-            {transitions((style) => (
-              <RealmModalContent onClose={onClose}>
-                {children}
-              </RealmModalContent>
-            ))}
+            <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
index 3a7597486..253bb7eca 100644
--- 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
index 213e2dd7a..b14b10eed 100644
--- 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/ClaimCheck.tsx b/src/ui/Claim/ClaimCheck.tsx
index 6bd0e658c..3c567c63b 100644
--- a/src/ui/Claim/ClaimCheck.tsx
+++ b/src/ui/Claim/ClaimCheck.tsx
@@ -110,7 +110,7 @@ export default function ClaimCheck() {
 
   return (
     <Modal.ScrollableContainer topSpacing={217} type="island-without-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="check_container">
           <ClaimHeader
             season="Season 1"
@@ -198,7 +198,7 @@ export default function ClaimCheck() {
             margin: 0 12px;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.ScrollableContainer>
   )
 }
diff --git a/src/ui/Claim/ClaimCheckFail.tsx b/src/ui/Claim/ClaimCheckFail.tsx
index 40c78d073..23ed443d6 100644
--- 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
index 33e973636..b53b31432 100644
--- 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
index 459cb7d14..a2d3a6b77 100644
--- 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
index 1c516a07b..da2bb57b2 100644
--- 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
index 437838765..20a048376 100644
--- 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>
   )
 }
diff --git a/src/ui/Island/Modals/ModalLeavingRealm.tsx b/src/ui/Island/Modals/ModalLeavingRealm.tsx
index 79847f56a..a745e3c67 100644
--- a/src/ui/Island/Modals/ModalLeavingRealm.tsx
+++ b/src/ui/Island/Modals/ModalLeavingRealm.tsx
@@ -28,7 +28,7 @@ export default function ModalLeavingRealm({
   return (
     <>
       <Modal.Container type="fullscreen" onClickOutside={close}>
-        <Modal.Content>
+        <Modal.AnimatedContent>
           <div className="modal">
             <h1 className="modal_header">Leaving {realm?.name}</h1>
             <div className="modal_infobox">
@@ -58,7 +58,7 @@ export default function ModalLeavingRealm({
               />
             </div>
           </div>
-        </Modal.Content>
+        </Modal.AnimatedContent>
       </Modal.Container>
       <style jsx>{`
         .modal {
diff --git a/src/ui/LiquidityPool/index.tsx b/src/ui/LiquidityPool/index.tsx
index 1e99d559e..1b4a319df 100644
--- a/src/ui/LiquidityPool/index.tsx
+++ b/src/ui/LiquidityPool/index.tsx
@@ -64,7 +64,7 @@ export default function LiquidityPool() {
 
   return (
     <Modal.Container type="island-without-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="content column_center">
           <div className="lp_container row">
             <div className="token column">
@@ -113,7 +113,7 @@ export default function LiquidityPool() {
             align-items: center;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.Container>
   )
 }
diff --git a/src/ui/Referrals/index.tsx b/src/ui/Referrals/index.tsx
index d553c9430..901d8b27b 100644
--- a/src/ui/Referrals/index.tsx
+++ b/src/ui/Referrals/index.tsx
@@ -29,7 +29,7 @@ export default function Referrals() {
 
   return (
     <Modal.ScrollableContainer topSpacing={176} type="island-without-overlay">
-      <Modal.Content>
+      <Modal.AnimatedContent>
         <div className="referrals_container column_center">
           <div className="referrals_header">
             <h1>Refer & get 5% Bonus</h1>
@@ -152,7 +152,7 @@ export default function Referrals() {
             z-index: -1;
           }
         `}</style>
-      </Modal.Content>
+      </Modal.AnimatedContent>
     </Modal.ScrollableContainer>
   )
 }