大更新
This commit is contained in:
YoRHa
429
components/common/ReviewModal.tsx
Normal file
429
components/common/ReviewModal.tsx
Normal file
@@ -0,0 +1,429 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user