diff --git a/src/app/nfts/[id]/page.js b/src/app/nfts/[id]/page.js index dca1b78..a129f25 100644 --- a/src/app/nfts/[id]/page.js +++ b/src/app/nfts/[id]/page.js @@ -12,6 +12,7 @@ import Moralis from 'moralis'; import Header1 from "@/components/header1"; import axios from 'axios'; import Footer from "@/components/footer"; +import { ProvenanceAttestation } from '@/components/provenance-attestation' const NFTPage = ({ params }) => { const id = params?.id.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase()); @@ -19,6 +20,7 @@ const NFTPage = ({ params }) => { const [showPopover, setShowPopover] = useState(false); const [priceUSD, setPriceUSD] = useState(""); const [avatarUrl, setAvatarUrl] = useState(''); + const [avatar, setAvatar] = useState(''); const [logos, setLogos] = useState(""); const [brandDesc, setbrandDesc] = useState(""); const [brandid, setbrandid] = useState(""); @@ -26,6 +28,12 @@ const NFTPage = ({ params }) => { const [sold, setsold] = useState(0); const [ownerAddress, setOwnerAddress] = useState(""); + const [showProvenance, setShowProvenance] = useState(false); + + const togglePopup = () => { + setShowProvenance(!showProvenance); + }; + const chainId = useChainId(); const account = useAccount(); const walletAddress = account.address; @@ -93,6 +101,7 @@ const NFTPage = ({ params }) => { // If found, update the state with the avatar URL if (selectedAvatar) { + setAvatar(selectedAvatar) setAvatarUrl(selectedAvatar.url); } setLoading(false); @@ -326,6 +335,18 @@ const NFTPage = ({ params }) => { className="w-full h-auto max-w-[70vh] max-h-[70vh] object-cover" /> + {showProvenance && ( +
+
+ setShowProvenance(false)}/> +
+
+ )}
{onephygital?.name}
Base Network
@@ -386,14 +407,13 @@ const NFTPage = ({ params }) => { > SHARE - CERTIFICATE - - +
) : ( diff --git a/src/components/provenance-attestation.tsx b/src/components/provenance-attestation.tsx new file mode 100644 index 0000000..cd20126 --- /dev/null +++ b/src/components/provenance-attestation.tsx @@ -0,0 +1,112 @@ +import Image from "next/image"; +import { useAccount } from "wagmi"; +import { Avatar } from "@readyplayerme/visage"; +import React from "react"; +import { PhygitalType } from "../types/types"; + + +const formatDate = () => { + const now = new Date(Date.now()); + const day = String(now.getDate()).padStart(2, '0'); + const month = String(now.getMonth() + 1).padStart(2, '0'); + const year = now.getFullYear(); + + return `${day} /${month}/ ${year}`; +}; + +const formatDateFromISO = (isoString: string) => { + const date = new Date(isoString); + const day = String(date.getDate()).padStart(2, '0'); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const year = date.getFullYear(); + + return `${day} /${month}/ ${year}`; +}; + + +export const ProvenanceAttestation = ({phygital, avatarModel, showAttestation}: {phygital: PhygitalType, avatarModel: string, showAttestation: () => void}) => { + const { address } = useAccount() + + const removePrefix = (uri: string) => { + return uri?.substring(7, uri.length) + } + + return ( +
+
+
+

Provenance Attestation

+

This certificate confirms the authenticity of the product and provides a verifiable record of its provenance on the blockchain.

+
+
+

Date: {formatDate()}

+

Base Network

+
+
+
+ phygital image +
+

{phygital.name}

+

Unique piece

+

Created by: {phygital.brand_name}

+

Owned by: {phygital?.deployer_address?.toString()}

+

Date purchased: 20 / 10 / 2024

+

{phygital?.price?.toString()} ETH

+
+
+
+
+
+

Product Description

+

{phygital.description}

+
+
+

Avatar

+ +
+
+
+
+

NFT Details

+
+
+

Token ID

+

{phygital.id}

+
+
+

Token Standard

+

ERC-721A

+
+
+

Chain

+

Base Network

+
+
+

Date created

+

{formatDateFromISO(phygital.created_at)}

+
+
+

Last sale

+

20/10/2024

+
+
+

Last updated

+

{formatDateFromISO(phygital.updated_at)}

+
+
+

Creator Earnings

+

{phygital?.royality} %

+
+
+

Contract Address +

+

{phygital.contract_address}

+
+
+
+
+ + +
+
); +}; \ No newline at end of file diff --git a/src/types/types.ts b/src/types/types.ts new file mode 100644 index 0000000..1831edf --- /dev/null +++ b/src/types/types.ts @@ -0,0 +1,89 @@ +export type AvatarType = { + id: string + avatar_id: string + url: string + user_id: string + phygital_id: string + avatar_voice: string + chaintype_id: string + created_at: string + updated_at: string +} + +export type FanTokenType = { + id: string + brand_id: string + collection_id: string + phygital_id: string + created_at: string + updated_at: string + fan_token_id: string + chaintype_id: string + phygital_name: string +} + +export type BrandType = { + id: string + name: string + description: string + logo_image: string + cover_image: string + representative: string + contact_email: string + contact_phone: string + shipping_address: string + additional_info: string + industry: string + tags: string + fees: number + payout_address: string + access_master: string + trade_hub: string + blockchain: string + chain_id: string + manager_id: string + chaintype_id: string +} + +export type CollectionType = { + iduuid: string + name: string + description: string + logo_image: string + cover_image: string + category: any // Replace with appropriate type if known + tags: string + status: bigint + brand_id: string + chaintype_id: string +} + +export type PhygitalType = { + id: string + name: string + brand_name: string + category: any // Replace with appropriate type if known + description: string + price: number + quantity: number + royalty: number + image: string + product_info: string + color: string + size: string + weight: number + material: string + usage: string + quality: string + manufacturer: string + origin_country: string + metadata_uri: string + deployer_address: string + contract_address: string + graph_url: string + collection_id: string + chaintype_id: string + created_at: string + updated_at: string + royality : string +}