430 lines
12 KiB
TypeScript
430 lines
12 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { Modal, ModalContent, Button } from "@heroui/react";
|
||
|
|
import { buttonStyles } from "@/lib/buttonStyles";
|
||
|
|
|
||
|
|
interface ReviewModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
amount: string;
|
||
|
|
productName?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function ReviewModal({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
amount,
|
||
|
|
productName = "High-Yield US Equity",
|
||
|
|
}: ReviewModalProps) {
|
||
|
|
const gyusAmount = amount ? (parseFloat(amount) * 0.9852).toFixed(0) : "0";
|
||
|
|
const usdValue = amount ? (parseFloat(amount) * 1.00045).toFixed(2) : "0.00";
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
isOpen={isOpen}
|
||
|
|
onClose={onClose}
|
||
|
|
size="lg"
|
||
|
|
classNames={{
|
||
|
|
base: "bg-transparent shadow-none",
|
||
|
|
backdrop: "bg-black/50",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<ModalContent>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: "#ffffff",
|
||
|
|
borderRadius: "24px",
|
||
|
|
padding: "24px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "24px",
|
||
|
|
position: "relative",
|
||
|
|
overflow: "hidden",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Header */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
width: "446px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "20px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "140%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Review
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
style={{
|
||
|
|
width: "24px",
|
||
|
|
height: "24px",
|
||
|
|
cursor: "pointer",
|
||
|
|
background: "none",
|
||
|
|
border: "none",
|
||
|
|
padding: 0,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src="/vuesax-linear-close-circle1.svg"
|
||
|
|
alt="Close"
|
||
|
|
width={24}
|
||
|
|
height={24}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Product Info */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: "#f9fafb",
|
||
|
|
borderRadius: "12px",
|
||
|
|
padding: "16px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "12px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: "#fff7ed",
|
||
|
|
borderRadius: "6px",
|
||
|
|
border: "0.75px solid rgba(0, 0, 0, 0.1)",
|
||
|
|
width: "40px",
|
||
|
|
height: "30px",
|
||
|
|
boxShadow: "inset 0px 1.5px 3px 0px rgba(0, 0, 0, 0.05)",
|
||
|
|
overflow: "hidden",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src="/lr0.svg"
|
||
|
|
alt="Product"
|
||
|
|
width={43}
|
||
|
|
height={30}
|
||
|
|
style={{ width: "107.69%", height: "100%", objectFit: "cover" }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "18px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{productName}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Amount Section */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "16px",
|
||
|
|
width: "446px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#4b5563",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Deposit
|
||
|
|
</div>
|
||
|
|
<div style={{ textAlign: "center" }}>
|
||
|
|
<span
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "48px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "120%",
|
||
|
|
letterSpacing: "-0.01em",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{amount || "0"}
|
||
|
|
</span>
|
||
|
|
<span
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "20px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "140%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
marginLeft: "8px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
USDC
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#4b5563",
|
||
|
|
fontSize: "18px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
≈ ${usdValue}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Transaction Details */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "16px",
|
||
|
|
width: "446px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "0px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* Deposit Row */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
borderRadius: "16px",
|
||
|
|
padding: "16px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "12px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image src="/icon0.svg" alt="" width={20} height={20} />
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#4b5563",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Deposit (USDC)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{amount ? parseFloat(amount).toLocaleString() : "0"}
|
||
|
|
</div>
|
||
|
|
<Image src="/icon3.svg" alt="" width={14} height={14} />
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Get GYUS Row */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
borderRadius: "16px",
|
||
|
|
padding: "16px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
height: "54px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "12px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image src="/icon2.svg" alt="" width={20} height={20} />
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#4b5563",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
GET(GYUS)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
0.00
|
||
|
|
</div>
|
||
|
|
<Image src="/icon3.svg" alt="" width={14} height={14} />
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{gyusAmount}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* APY Info */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: "#f2fcf7",
|
||
|
|
borderRadius: "16px",
|
||
|
|
border: "1px solid #cef3e0",
|
||
|
|
padding: "16px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
overflow: "hidden",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image src="/icon4.svg" alt="" width={20} height={20} />
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#10b981",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 600,
|
||
|
|
lineHeight: "20px",
|
||
|
|
letterSpacing: "-0.15px",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
APY
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "4px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#10b981",
|
||
|
|
fontSize: "18px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "28px",
|
||
|
|
letterSpacing: "-0.44px",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
22.0%
|
||
|
|
</div>
|
||
|
|
<Image src="/icon5.svg" alt="" width={16} height={16} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Confirm Button */}
|
||
|
|
<Button
|
||
|
|
color="default"
|
||
|
|
variant="solid"
|
||
|
|
className={buttonStyles({ intent: "theme" })}
|
||
|
|
onPress={() => {
|
||
|
|
console.log("Transaction confirmed");
|
||
|
|
onClose();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Confirm Transaction
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</ModalContent>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|