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.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}
+
+
+
+
+
+
NFT Details
+
+
+
Token ID
+
{phygital.id}
+
+
+
Token Standard
+
ERC-721A
+
+
+
+
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
+}