-
-
-
-
{asset.name}
-
- {asset.network}
+
+
+
+
+
+
+ {asset.name}
+
+
+ {asset.network}
+
-
-
- {asset.balance}
-
-
- ${asset.balanceUSD}
+
+
+ {asset.balance}
+
+
+ ${asset.balanceUSD}
+
-
-
{asset.price}
+
{asset.price}
-
- {asset.pnl}
-
+
+ {asset.pnl}
+
-
- {renderChart(asset.chartData, asset.isPositive)}
+
+ {renderChart(asset.chartData, asset.isPositive)}
+
-
))}
@@ -343,55 +362,63 @@ const Assets = () => {
{/* NFTs Table */}
{/* Table Headers */}
-
-
Image
-
Name
-
Collection
-
Token ID
-
Blockchain
-
Action
-
+
+
+
Image
+
Name
+
Collection
+
Token ID
+
Blockchain
+
Action
+
{/* NFT Rows */}
- {nfts.map((nft) => (
-
+ {nfts.map((nft, index) => (
+
handleNftImageClick(nft)}
- className="cursor-pointer"
+ key={index}
+ className="grid grid-cols-6 items-center py-2 border-t border-gray-700"
>
- {/* Using SVG with image tag */}
-
-
{nft.name}
- {nft.collection}
- {nft.tokenId}
- {nft.blockchain}
-
-
+ viewBox="0 0 48 48"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+
+
+
+ {nft.name}
+
+ {nft.collection}
+
+ {nft.tokenId}
+
+ {nft.blockchain}
+
+
+
+
-
+
))}
diff --git a/src/app/user-dashboard/claims/claims.tsx b/src/app/user-dashboard/claims/claims.tsx
index 62b9bbe..6c0fde2 100644
--- a/src/app/user-dashboard/claims/claims.tsx
+++ b/src/app/user-dashboard/claims/claims.tsx
@@ -6,12 +6,14 @@ import clockIcon from "../../../../public/svg/plansIcon.svg";
import peopleIcon from "../../../../public/svg/people.svg";
import ClaimForm from "../component/ClaimForm";
import ClaimList from "../component/ClaimList";
-import { CircleCheck } from "lucide-react";
-import { TriangleAlert } from "lucide-react";
-import { Hourglass } from "lucide-react";
import ClaimModal from "../component/ClaimModal";
import AcceptedModal from "../component/AcceptedModal";
+import WithdrawalModal from "../../../components/WithdrawalModal";
import { ClaimStatCard } from "../component/ClaimStatCard";
+import checkCicle from "../../../../public/modalIcon/checkCircle.svg";
+import warningIcon from "../../../../public/modalIcon/Warning.svg";
+import hourglassIcon from "../../../../public/modalIcon/hourGlassIcon.svg";
+import { DirectionAnimation } from "@/motion/Animation";
interface Claim {
id: number;
@@ -37,7 +39,6 @@ const dummyClaims: Claim[] = [
status: "Accepted",
action: "view",
},
-
{
id: 2,
date: "24-01-2025",
@@ -46,7 +47,6 @@ const dummyClaims: Claim[] = [
status: "Pending",
action: "claim",
},
-
{
id: 3,
date: "24-01-2025",
@@ -59,37 +59,59 @@ const dummyClaims: Claim[] = [
const modalMessages = {
Submitted: {
- title: "Claim Request Recieved",
+ title: "Claim Request Received",
message:
- "Your Sumbmissions have been recieved! We're reviewing them and will update you shortly. Check your email or dashboard for status updates",
- icon:
,
+ "Your submissions have been received! We’re reviewing them and will update you shortly. Check your email or dashboard for status updates.",
+ icon: (
+
+ ),
},
Pending: {
title: "Claim Pending",
message:
"Claim under review, please check your mailbox and dashboard regularly for status updates.",
- icon:
,
+ icon: (
+
+ ),
},
Rejected: {
title: "Invalid Claim Code",
message:
"Claim code is not associated with your account or does not exist. Please check claim code and try again",
- icon:
,
+ icon: (
+
+ ),
},
Accepted: {
- title: "Claim Accepted",
+ title: "Claim Request Received ",
message:
- "Your claim has been accepted. Please check your email or dashboard for further details.",
- icon:
,
+ "Your submissions have been received! We’re reviewing them and will update you shortly. Check your email or dashboard for status updates.",
+ icon: (
+
+ ),
+ },
+ Sucessful: {
+ title: "Withdrawal Successful",
+ message: "25,002.45 STRK has been successfully transferred to your wallet.",
+ icon: (
+
+ ),
},
};
function Claims() {
- const [claims, setClaims] = useState(dummyClaims);
+ // Start with empty claims
+ const [claims, setClaims] = useState
([]);
const [selectedClaim, setSelectedClaim] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [modalData, setModalData] = useState(null);
const [isAcceptedModalOpen, setIsAcceptedModalOpen] = useState(false);
+ const [isWithdrawalModalOpen, setIsWithdrawalModalOpen] = useState(false);
const claimedCount = claims.filter(
(claim) => claim.status === "Accepted"
@@ -100,29 +122,57 @@ function Claims() {
const handleClaimSubmission = (claimCode: string) => {
console.log("Claim submitted with code:", claimCode);
- setModalData(modalMessages.Submitted);
+
+ // Check if code is 666
+ if (claimCode === "666") {
+ setModalData(modalMessages.Pending);
+ setIsModalOpen(true);
+ setClaims(dummyClaims);
+ return;
+ }
+
+ // Check if code is only one letter
+ if (claimCode.length < 2) {
+ setModalData(modalMessages.Rejected);
+ setIsModalOpen(true);
+ return;
+ }
+
+ // Valid code - add the dummy claims and show success modal
+ setClaims(dummyClaims);
+ setModalData(modalMessages.Accepted);
setIsModalOpen(true);
};
- const handleViewClaim = (claims: Claim) => {
- setSelectedClaim(claims);
- if (claims.status === "Accepted") {
+ const handleViewClaim = (claim: Claim) => {
+ setSelectedClaim(claim);
+ if (claim.status === "Accepted") {
setIsAcceptedModalOpen(true);
} else {
- setModalData(modalMessages[claims.status]);
+ setModalData(modalMessages[claim.status]);
setIsModalOpen(true);
}
};
+ const handleWithdrawFunds = () => {
+ setIsWithdrawalModalOpen(true);
+ };
+
+ const handleWithdrawalSubmit = (amount: string) => {
+ setIsWithdrawalModalOpen(false);
+ setModalData(modalMessages.Sucessful);
+ setIsModalOpen(true);
+ };
+
const closeModal = () => {
setIsModalOpen(false);
setSelectedClaim(null);
setModalData(null);
};
- const Stat = [
+ const stats = [
{
- value: "$0.00",
+ value: "$452.35",
icon: ,
label: "Total amount of claimed assets",
},
@@ -140,20 +190,60 @@ function Claims() {
return (
-
- {Stat.map((stat, index) => (
+
0 ? "4" : "3"
+ } gap-6 `}
+ >
+ {stats.map((stat, index) => (
))}
+ {claims.length > 0 && (
+
+ )}
-
-
- {isModalOpen &&
}
+
+
+
+
+
+ {claims.length > 0 ? (
+
+
+
+ ) : (
+
+
+
+ Claims
+
+
+ No Claims Yet, Enter Claim Code to Claim Inheritance
+
+
+ )}
+
+ {isModalOpen && modalData && (
+
+ )}
{isAcceptedModalOpen && selectedClaim && (
setIsAcceptedModalOpen(false)}
/>
)}
+ {isWithdrawalModalOpen && (
+ setIsWithdrawalModalOpen(false)}
+ onSubmit={handleWithdrawalSubmit}
+ />
+ )}
);
}
diff --git a/src/app/user-dashboard/component/AcceptedModal.tsx b/src/app/user-dashboard/component/AcceptedModal.tsx
index 53449b0..86cada5 100644
--- a/src/app/user-dashboard/component/AcceptedModal.tsx
+++ b/src/app/user-dashboard/component/AcceptedModal.tsx
@@ -1,18 +1,19 @@
"use client";
-import React from "react";
-import { FileText } from 'lucide-react';
-
-
+import React, { useState, useRef, useEffect } from "react";
+import { FileText, ChevronUp, ChevronDown } from "lucide-react";
interface PreviewClaimModalProps {
isOpen: boolean;
onClose: () => void;
-
}
-const AcceptedModal: React.FC = ({ isOpen, onClose }) => {
- if (!isOpen) return null;
-
+const PreviewClaimModal: React.FC = ({
+ isOpen,
+ onClose,
+}) => {
+ const [assetsVisible, setAssetsVisible] = useState(true);
+ const [filesVisible, setFilesVisible] = useState(true);
+ const modalRef = useRef(null);
// Hardcoded claim data for testing
const claim = {
@@ -21,92 +22,161 @@ const AcceptedModal: React.FC = ({ isOpen, onClose }) =>
transferDate: "28-05-2030",
assets: {
tokens: [
- { name: "ETH", amount: "0.51", dollas:"≈$2.523.22" },
- { name: "STARK", amount: "23.450", dollas:"≈$2.523.22"},
+ { name: "ETH", amount: "0.51", dollars: "≈$2,523.22" },
+ { name: "STARK", amount: "23,450", dollars: "≈$2,523.22" },
],
nfts: ["JASPe2113", "RocketTeddy222"],
- files: ["tribute_and_instuctions.mp4", "tribute_and_instuctions.mp4"],
+ files: ["tribute_and_instructions.mp4", "tribute_and_instructions.mp4"],
},
};
- return (
-
-
-
Preview Claim
-
-
-
-
-
Asset Owner Name
-
{claim.assetsOwner}
-
-
-
Message
-
For everyone dear to me
-
-
-
Transfer Date
-
{claim.transferDate}
-
-
-
-
Assets
-
-
-
Tokens
-
- {claim.assets.tokens.map((token, index) => (
-
-
{token.name}
-
- {token.amount}
- {token.dollas}
-
+ // Scroll to top when modal opens
+ useEffect(() => {
+ if (isOpen && modalRef.current) {
+ modalRef.current.scrollTop = 0;
+ }
+ }, [isOpen]);
-
- ))}
-
+ if (!isOpen) return null;
-
-
NFTs
-
- {claim.assets.nfts.map((nft, index) => (
-
- {nft}
-
-
- ))}
-
+ return (
+
+
+
+ Preview Claim
+
+
+
+ {/* Asset Owner Name */}
+
+
+
Asset Owner Name
+
{claim.assetsOwner}
+
+
-
+ {/* Message */}
+
+
+
Message
+
{claim.message}
+
+
+ {/* Transfer Date */}
+
+
+
Transfer Date
+
{claim.transferDate}
+
+
+
+ {/* Assets */}
+
+
+
Assets
+
setAssetsVisible(!assetsVisible)}
+ >
+ {assetsVisible ? "Hide Details" : "Show Details"}
+ {assetsVisible ? (
+
+ ) : (
+
+ )}
-
-
Files
- {claim.assets.files.map((file, index) => (
-
-
+
+ {assetsVisible && (
+ <>
+ {/* Tokens */}
+
+
+
+ {claim.assets.tokens.map((token, index) => (
+
+
{token.name}
-
File 1
-
{file}
+
{token.amount}
+
+ {token.dollars}
+
-
+ ))}
+
+
-
-
- ))}
+ {/* NFTs */}
+
+
+
+ {claim.assets.nfts.map((nft, index) => (
+
+ {nft}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Files */}
+
+
+
Files
+
setFilesVisible(!filesVisible)}
+ >
+ {filesVisible ? "Hide Details" : "Show Details"}
+ {filesVisible ? (
+
+ ) : (
+
+ )}
+
-
-
+ {filesVisible && (
+
+ {claim.assets.files.map((file, index) => (
+
+ ))}
+
+ )}
+
+
-
-