Elgato_dark/Sigillum
1
0
Fork 0
mirror of https://github.com/ChanX21/Sigillum synced 2026-04-21 15:47:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Ui Update

Browse source
This commit is contained in:
Apurvborhade 2025-05-11 15:55:13 +05:30
parent 413160dc96
commit 2c2dab5e49
4 changed files with 47 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Frontend/MainApp/components/nft/NFTDetailView.tsx
View file

@ -411,7 +411,7 @@ export const NFTDetailView = ({
</div>
</div> */}
<div className="flex justify-between items-center py-2 border-t border-stone-300">
<span className="text-gray-600">Contract</span>
<span className="text-gray-600">Token Contract</span>
<Link
href={`${process.env.NEXT_PUBLIC_SUI_EXPLORER_URL}${nft.blockchain.tokenId}`}
target="_blank"

14
Frontend/MainApp/components/nft/NFTDetails.tsx
View file

@ -4,17 +4,13 @@ import { FaRegCopy } from "react-icons/fa";
import { Button } from "../ui/button";
import { toast } from "sonner";
import { useEffect, useState } from "react";
import { useGetImageById } from "@/hooks/useGetImageById";
import { IoMdCloudUpload } from "react-icons/io";
import { CheckCircle2, CircleAlert, Clock, ImageIcon, Shield, UploadCloud } from "lucide-react";
import { CheckCircle2, Shield, UploadCloud } from "lucide-react";
import { initSocket } from "@/lib/socket";
import { GoDownload } from "react-icons/go";
import { Card } from "../ui/card";
import { AnimatePresence, motion } from "framer-motion";
import { GiWalrusHead } from "react-icons/gi";
import Image from "next/image";
import { useAuthenticateImage } from "@/hooks/useAuthenticateImage";
import Link from "next/link";
import OptimizedImage from "../shared/OptimizedImage";
interface NFTDetailsProps {
@ -24,8 +20,8 @@ interface NFTDetailsProps {
const statusSteps = [
{
key: "authenticate",
label: "Authenticating Image",
description: "Verifying the originality and integrity of the uploaded image.",
label: "AI-Powered Authentication",
description: "Sigillum AI is verifying the originality and integrity of the uploaded image using advanced image analysis.",
icon: <Shield className="w-8 h-8" />,
},
{
@ -37,7 +33,7 @@ const statusSteps = [
{
key: "uploaded",
label: "Uploading Image",
description: "Uploading the image to the server or storage system.",
description: "Storing the image on Decentralized Pinata & Walrus servers..",
icon: <UploadCloud className="w-8 h-8" />,
},
{
@ -45,7 +41,7 @@ const statusSteps = [
label: "Tokenizing Image",
description: "Tokenizing the image as an NFT on the blockchain.",
icon: <Shield className="w-8 h-8" />,
},
},
{
key: "softListed",
label: "Soft Listing on Marketplace",

2
Frontend/MainApp/components/nft/nftAuctionCard.tsx
View file

@ -125,7 +125,7 @@ export default function NftAuctionCard({ nft }: NFTCardFeaturedProps) {
/>
{/* Timer overlay */}
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-[160px] h-[40px] rounded-[16px] border border-white/30 bg-white/30 shadow-[0_4px_30px_rgba(0,0,0,0.1)] backdrop-blur-[5px] flex items-center justify-center">
<span className="text-white font-semibold">
<span className="text-white text-xs font-semibold">
{timeRemaining === "No deadline"
? "loading..."
: timeRemaining}

60
Frontend/MainApp/components/shared/Header.tsx
View file

@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
import { IoCloseSharp, IoSearchSharp } from "react-icons/io5";
import { Shield, User } from "lucide-react";
import Link from "next/link";
import { AnimatePresence, motion } from 'framer-motion'
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import { useAccountBalance, useWallet } from "@suiet/wallet-kit";
@ -188,7 +188,8 @@ export const Header = () => {
<div className="flex items-center justify-between md:hidden gap-3 h-full">
{/* Search Toggle */}
<button
onClick={() => {setShowSearch((prev) => !prev)
onClick={() => {
setShowSearch((prev) => !prev)
setShowSearchOverlay(false)
}}
className="p-2 rounded-full hover:bg-muted transition"
@ -294,29 +295,48 @@ export const Header = () => {
autoFocus
/>
<div className="w-full flex justify-center">
<div className="absolute w-full r-50 md:mt-[55px] bg-white md:min-w-[550px] h-[450px] z-50 md:rounded-2xl p-5 overflow-scroll">
<h2 className="text-md font-medium text-[#8e8e8e]">Nft's</h2>
<div className="flex flex-col h-full gap-3">
<NftSearch query={query} />
<div className="absolute w-full r-50 md:mt-[55px] bg-white md:min-w-[550px] h-[450px] z-50 md:rounded-2xl p-5 overflow-scroll">
<h2 className="text-md font-medium text-[#8e8e8e]">Nft's</h2>
<div className="flex flex-col h-full gap-3">
<NftSearch query={query} />
</div>
</div>
</div>
</div>
</div>
)}
</header>
{showSearchOverlay && (
<>
<div className="w-full md:flex hidden justify-center">
<div className="fixed w-full mt-36 r-50 md:mt-[55px] bg-white md:w-[550px] h-[450px] z-50 md:rounded-2xl p-5 overflow-scroll">
<h2 className="text-md font-medium text-[#8e8e8e]">Nft's</h2>
<div className="flex flex-col h-full gap-3">
<NftSearch query={query} />
</div>
</div>
</div>
<div className="fixed flex justify-center inset-0 bg-black/60 z-10 " onClick={() => setShowSearchOverlay(false)}></div>
</>
)}
<AnimatePresence>
{showSearchOverlay && (
<>
{/* Backdrop (clickable outside) */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-40 flex items-start justify-center bg-black/60"
onClick={() => {
setShowSearchOverlay(false);
}}
>
{/* White popup (click inside = do nothing) */}
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
onClick={(e) => e.stopPropagation()} // Prevent outside click
className="bg-white md:w-[550px] h-[450px] md:mt-[50px] md:rounded-2xl p-5 overflow-scroll"
>
<h2 className="text-md font-medium text-[#8e8e8e]">Nft's</h2>
<div className="flex flex-col h-full gap-3">
<NftSearch query={query} />
</div>
</motion.div>
</motion.div>
</>
)}
</AnimatePresence>
</>
);
};