Skip to content

Commit

Permalink
fix(motions):add motions to modals
Browse files Browse the repository at this point in the history
  • Loading branch information
hamidroohi92 committed Aug 30, 2024
1 parent 6ed8755 commit fbd45a5
Showing 4 changed files with 45 additions and 10 deletions.
6 changes: 3 additions & 3 deletions src/components/appBox.tsx
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 17 additions & 2 deletions src/components/pendingModal.tsx
Original file line number Diff line number Diff line change
@@ -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>
18 changes: 13 additions & 5 deletions src/components/successModal.tsx
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 12 additions & 0 deletions tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -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",
},
},
},

0 comments on commit fbd45a5

Please sign in to comment.