fix(motions):add motions to modals

ringecosystem · Aug 30, 2024 · fbd45a5 · fbd45a5
1 parent 6ed8755
commit fbd45a5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/src/components/appBox.tsx b/src/components/appBox.tsx
@@ -377,7 +377,7 @@ export default function AppBox() {
         </animated.div>
         <animated.div
           style={trails[1]}
-          className="flex h-[84px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
+          className="z-20 flex h-[84px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
         >
           <div className="flex h-[30px] items-center justify-between">
             <p className="text-[12px] leading-[15.22px] text-[#12161980]">Sender</p>
@@ -405,7 +405,7 @@ export default function AppBox() {
         </animated.div>
         <animated.div
           style={trails[2]}
-          className="z-[-1] flex h-[84px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
+          className="z-10 flex h-[84px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
         >
           <div className="flex h-[30px] items-center justify-between">
             <p className="text-[12px] leading-[15.22px] text-[#12161980]">Recipient</p>
@@ -420,7 +420,7 @@ export default function AppBox() {
           />
         </animated.div>
         <animated.div style={trails[3]}>
-          <div className="flex h-[71px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]">
+          <div className="z-0 flex h-[71px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]">
             <div>
               <p className="text-[12px] leading-[15.22px] text-[#12161980]">Amount</p>
             </div>

diff --git a/src/components/pendingModal.tsx b/src/components/pendingModal.tsx
@@ -1,14 +1,29 @@
+import { useTrail, animated } from "@react-spring/web";
 import Image from "next/image";
 
 export default function PendingModal({ visible }: { visible: boolean }) {
+  const trails = useTrail(2, {
+    from: { transform: "translateX(-100%)", opacity: 0 },
+    to: { opacity: visible ? 1 : 0, transform: visible ? "translateX(0)" : "translateX(-100%)" },
+  });
   return (
     <>
       {visible && (
         <div className="fixed bottom-0 left-0 right-0 top-0 h-[100vh] w-[100vw]">
           <div className="relative flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]">
             <div className="flex h-[400px] w-[80vw] flex-col items-center justify-center gap-[20px] rounded-[20px] bg-white p-[21px] lg:w-[400px]">
-              <Image src={"/images/icons/pending-icon.svg"} width={64} height={80} alt="Darwinia Paralink" />
-              <p className="text-[18px] font-bold leading-[23px] text-[#121619]">Transaction is being Processed</p>
+              <animated.div style={trails[0]}>
+                <Image
+                  src={"/images/icons/pending-icon.svg"}
+                  width={64}
+                  height={80}
+                  alt="Darwinia Paralink"
+                  className="animate-pending-bounce"
+                />
+              </animated.div>
+              <animated.p style={trails[1]} className="text-[18px] font-bold leading-[23px] text-[#121619]">
+                Transaction is being Processed
+              </animated.p>
             </div>
           </div>
         </div>

diff --git a/src/components/successModal.tsx b/src/components/successModal.tsx
@@ -1,23 +1,31 @@
 import { useTransfer } from "@/hooks";
 import { formatBalance } from "@/utils";
 import Image from "next/image";
+import { useTrail, animated } from "@react-spring/web";
 
 export default function SuccessModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
   const { sourceAsset, transferAmount } = useTransfer();
+
+  const trails = useTrail(3, {
+    from: { transform: "translateX(-100%)", opacity: 0 },
+    to: { opacity: visible ? 1 : 0, transform: visible ? "translateX(0)" : "translateX(-100%)" },
+  });
   return (
     <>
       {visible && (
         <div className="fixed bottom-0 left-0 right-0 top-0 h-[100vh] w-[100vw]">
           <div className="relative flex h-full w-full items-center justify-center bg-[rgba(0,0,0,0.3)]">
             <div className="flex h-[400px] w-[80vw] flex-col items-center justify-center gap-[20px] rounded-[20px] bg-white p-[21px] lg:w-[400px]">
-              <Image src={"/images/icons/success-icon.svg"} width={80} height={80} alt="Darwinia Paralink" />
-              <div className="flex flex-col items-center gap-[10px]">
+              <animated.div style={trails[0]}>
+                <Image src={"/images/icons/success-icon.svg"} width={80} height={80} alt="Darwinia Paralink" />
+              </animated.div>
+              <animated.div style={trails[1]} className="flex flex-col items-center gap-[10px]">
                 <p className="text-[18px] font-bold leading-[23px] text-[#121619]">Success !</p>
                 <p className="text-[14px] leading-[24px] text-[#121619]">
                   You send {formatBalance(transferAmount.amount, sourceAsset.decimals)} {sourceAsset.name}
                 </p>
-              </div>
-              <div className="flex w-full flex-col items-center gap-[10px]">
+              </animated.div>
+              <animated.div style={trails[2]} className="flex w-full flex-col items-center gap-[10px]">
                 <button
                   onClick={onClose}
                   className="h-[34px] w-full rounded-[10px] bg-[#FF0083] text-[14px] font-bold text-white"
@@ -27,7 +35,7 @@ export default function SuccessModal({ visible, onClose }: { visible: boolean; o
                 <button className="h-[34px] w-full rounded-[10px] bg-[#FF00831A] text-[14px] font-bold text-[#FF0083]">
                   Detail
                 </button>
-              </div>
+              </animated.div>
             </div>
           </div>
         </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -58,13 +58,25 @@ const config: Config = {
             height: "16px",
           },
         },
+        bouncing: {
+          "0%": {
+            transform: "scale(1)",
+          },
+          "50%": {
+            transform: "scale(1.2)",
+          },
+          "100%": {
+            transform: "scale(1)",
+          },
+        },
       },
       animation: {
         "notification-enter": "rightenter 400ms ease-out",
         "notification-leave": "rightleave 400ms ease-out forwards",
         "notification-fadeout": "notificationfadeout 200ms ease-out forwards",
         "count-loading-small": "countloadingsmall 1200ms cubic-bezier(0, 0.5, 0.5, 1) infinite",
         "count-loading-large": "countloadinglarge 1200ms cubic-bezier(0, 0.5, 0.5, 1) infinite",
+        "pending-bounce": "bouncing 1.5s ease-in-out infinite",
       },
     },
   },