577 lines
18 KiB
TypeScript
577 lines
18 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import Image from "next/image";
|
||
|
|
import { Modal, ModalContent, Button } from "@heroui/react";
|
||
|
|
import { buttonStyles } from "@/lib/buttonStyles";
|
||
|
|
|
||
|
|
interface WithdrawModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
amount: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function WithdrawModal({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
amount,
|
||
|
|
}: WithdrawModalProps) {
|
||
|
|
const [showDetails, setShowDetails] = useState(true);
|
||
|
|
|
||
|
|
const alpAmount = amount ? (parseFloat(amount) * 0.098).toFixed(0) : "0";
|
||
|
|
const usdValue = amount ? (parseFloat(amount) * 1.00045).toFixed(2) : "0.00";
|
||
|
|
const fee = amount ? (parseFloat(amount) * 0.005).toFixed(2) : "0.00";
|
||
|
|
const minReceive = amount ? (parseFloat(amount) * 0.098 * 0.995).toFixed(0) : "0";
|
||
|
|
|
||
|
|
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",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 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>
|
||
|
|
|
||
|
|
{/* Exchange Section */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "12px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: "#f9fafb",
|
||
|
|
borderRadius: "16px",
|
||
|
|
padding: "24px 16px",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "0px",
|
||
|
|
alignItems: "center",
|
||
|
|
width: "446px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* From USDC */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
width: "100%",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "4px",
|
||
|
|
alignItems: "flex-start",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "24px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "130%",
|
||
|
|
letterSpacing: "-0.005em",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{amount || "0"} USDC
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#4b5563",
|
||
|
|
fontSize: "16px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
≈ ${usdValue}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<Image
|
||
|
|
src="/usd-coin-usdc-logo-10.svg"
|
||
|
|
alt="USDC"
|
||
|
|
width={36}
|
||
|
|
height={36}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Exchange Icon */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
background: "#ffffff",
|
||
|
|
borderRadius: "999px",
|
||
|
|
width: "40px",
|
||
|
|
height: "40px",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
boxShadow:
|
||
|
|
"0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)",
|
||
|
|
overflow: "visible",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ width: "16px", height: "16px", position: "relative" }}>
|
||
|
|
<Image
|
||
|
|
src="/group-9280.svg"
|
||
|
|
alt="Exchange"
|
||
|
|
width={16}
|
||
|
|
height={16}
|
||
|
|
style={{ width: "100%", height: "100%", objectFit: "contain" }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* To ALP */}
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
width: "100%",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "4px",
|
||
|
|
alignItems: "flex-start",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "24px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "130%",
|
||
|
|
letterSpacing: "-0.005em",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{alpAmount} ALP
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: "36px",
|
||
|
|
height: "36px",
|
||
|
|
position: "relative",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Image
|
||
|
|
src="/vector0.svg"
|
||
|
|
alt=""
|
||
|
|
width={36}
|
||
|
|
height={36}
|
||
|
|
style={{ position: "absolute" }}
|
||
|
|
/>
|
||
|
|
<Image
|
||
|
|
src="/vector1.svg"
|
||
|
|
alt=""
|
||
|
|
width={36}
|
||
|
|
height={36}
|
||
|
|
style={{ position: "absolute" }}
|
||
|
|
/>
|
||
|
|
<Image
|
||
|
|
src="/vector2.svg"
|
||
|
|
alt=""
|
||
|
|
width={36}
|
||
|
|
height={36}
|
||
|
|
style={{ position: "absolute" }}
|
||
|
|
/>
|
||
|
|
<Image
|
||
|
|
src="/component-10.svg"
|
||
|
|
alt=""
|
||
|
|
width={36}
|
||
|
|
height={36}
|
||
|
|
style={{ position: "absolute" }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#4b5563",
|
||
|
|
fontSize: "16px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
≈ ${usdValue}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Show More/Less Button */}
|
||
|
|
<button
|
||
|
|
onClick={() => setShowDetails(!showDetails)}
|
||
|
|
style={{
|
||
|
|
background: "transparent",
|
||
|
|
border: "none",
|
||
|
|
cursor: "pointer",
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
gap: "8px",
|
||
|
|
alignItems: "center",
|
||
|
|
padding: "8px",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 500,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{showDetails ? "Show less" : "Show more"}
|
||
|
|
</div>
|
||
|
|
<Image
|
||
|
|
src="/icon1.svg"
|
||
|
|
alt=""
|
||
|
|
width={20}
|
||
|
|
height={20}
|
||
|
|
style={{
|
||
|
|
transform: showDetails ? "rotate(180deg)" : "rotate(0deg)",
|
||
|
|
transition: "transform 0.2s ease-in-out",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* Transaction Details */}
|
||
|
|
{showDetails && (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "column",
|
||
|
|
gap: "12px",
|
||
|
|
width: "446px",
|
||
|
|
animation: "fadeIn 0.3s ease-in-out",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Fee(0.5%)
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#ef4444",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
-${fee}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Network cost
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#ef4444",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
-$0.09
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Rate
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
1USDC=0.98ALP ($1.02)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Spread
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
0
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Price Impact
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#10b981",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
+$0.60 (+0.065%)
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Max slippage
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
0.5%
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: "flex",
|
||
|
|
flexDirection: "row",
|
||
|
|
alignItems: "center",
|
||
|
|
justifyContent: "space-between",
|
||
|
|
padding: "12px 0",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#9ca1af",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 400,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Min Receive
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
color: "#111827",
|
||
|
|
fontSize: "14px",
|
||
|
|
fontWeight: 700,
|
||
|
|
lineHeight: "150%",
|
||
|
|
fontFamily: "var(--font-inter)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{minReceive} ALP
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Confirm Button */}
|
||
|
|
<Button
|
||
|
|
color="default"
|
||
|
|
variant="solid"
|
||
|
|
className={buttonStyles({ intent: "theme" })}
|
||
|
|
onPress={() => {
|
||
|
|
console.log("Withdraw confirmed");
|
||
|
|
onClose();
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Confirm
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</ModalContent>
|
||
|
|
</Modal>
|
||
|
|
);
|
||
|
|
}
|