Skip to content

Commit

Permalink
feat : added provenance mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@surajhub255
surajhub255 committed Nov 5, 2024
1 parent 3ca8fae commit 006cc05
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 80 deletions.
6 changes: 3 additions & 3 deletions src/app/nfts/[id]/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ const NFTPage = ({ params }) => {

const filteredMatched = matched.filter(phygital => phygital.amount_bought > 0);
const nftMatched = filteredMatched.filter(nft => nft.id === onephygital.id);
if(nftMatched.length > 0){
if (nftMatched.length > 0) {
setOwner(true);
}
console.log("Matched NFTs:", filteredMatched);
Expand All @@ -378,7 +378,7 @@ const NFTPage = ({ params }) => {
if (mintedNFTs.length > 0) {
fetchPhygitals();
}
}, [mintedNFTs, baseUri , onephygital.id]);
}, [mintedNFTs, baseUri, onephygital.id]);

return (
<>{owner ? (
Expand Down Expand Up @@ -413,7 +413,7 @@ const NFTPage = ({ params }) => {
WebkitBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
MozBoxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
}}>
<div className='z-10 md:w-[60%] top-1/2 left-1/2 absolute transform -translate-x-1/2 -translate-y-1/2 h-[85%] overflow-y-scroll'>
<div className='z-10 md:w-[60%] w-[100%] top-1/2 left-1/2 absolute transform -translate-x-1/2 -translate-y-1/2 h-[85%] overflow-y-scroll'>
<ProvenanceAttestation phygital={onephygital} avatarModel={avatar && avatarUrl} showAttestation={() => setShowProvenance(false)} />
</div>
</div>
Expand Down
164 changes: 87 additions & 77 deletions src/components/provenance-attestation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import Image from "next/image";
import { useAccount } from "wagmi";
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}`;
};

Expand All @@ -19,94 +18,105 @@ const formatDateFromISO = (isoString: string) => {
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}) => {
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 uri?.substring(7, uri.length)
}

return (
<div className="py-8 px-12 bg-white shadow-md">
<div className="flex justify-between mb-4">
<div className="pr-4">
<h1 className="text-2xl font-bold">Provenance Attestation</h1>
<p className="text-sm">This certificate confirms the authenticity of the product and provides a verifiable record of its provenance on the blockchain.</p>
</div>
<div className="basis-2/6">
<p className="text-sm">Date: {formatDate()}</p>
<p className="text-xs">Base Network</p>
</div>
</div>
<div className="flex items-center gap-4">
<img src={`https://nftstorage.link/ipfs/${removePrefix(phygital.image)}`} alt="phygital image" width={200} height={200} />
<div className="text-sm grid gap-2">
<h2 className="text-lg font-bold">{phygital.name}</h2>
<p>Unique piece</p>
<p>Created by: {phygital.brand_name}</p>
<p>Owned by: {phygital?.deployer_address?.toString()}</p>
<p>Date purchased: 20 / 10 / 2024</p>
<p>{phygital?.price?.toString()} ETH</p>
</div>
</div>
<hr className="my-8" />
<div className="flex gap-4">
<div className="basis-5/6 pr-4">
<h3 className="text-lg font-bold mb-4">Product Description</h3>
<p className="text-base">{phygital.description}</p>
</div>
<div className="h-[12rem] w-[6rem]">
<h4 className="text-center font-bold ">Avatar</h4>
<Avatar modelSrc={avatarModel} cameraInitialDistance={3} className="bg-neutral-950" />
</div>
</div>
<hr className="my-8" />
<div className="my-4">
<h3 className="text-lg font-bold">NFT Details</h3>
<div className="mt-4">
<div className="grid grid-cols-[1fr_3fr]">
<p>Token ID</p>
<p className="text-right">{phygital.id}</p>
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Token Standard</p>
<p className="text-right">ERC-721A</p>
<div className="py-8 px-4 md:px-12 bg-white shadow-md">
<div className="flex flex-col md:flex-row justify-between mb-4">
<div className="md:pr-4 mb-4 md:mb-0">
<h1 className="text-xl md:text-2xl font-bold">Provenance Attestation</h1>
<p className="text-xs md:text-sm">This certificate confirms the authenticity of the product and provides a verifiable record of its provenance on the blockchain.</p>
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Chain</p>
<p className="text-right">Base Network</p>
<div className="basis-2/6 text-sm md:text-base">
<p>Date: {formatDate()}</p>
<p className="text-xs">Base Network</p>
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Date created</p>
<p className="text-right">{formatDateFromISO(phygital.created_at)}</p>
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Last sale</p>
<p className="text-right">20/10/2024</p>
</div>

<div className="flex flex-col md:flex-row items-center gap-4">
<img
src={`https://nftstorage.link/ipfs/${removePrefix(phygital.image)}`}
alt="phygital image"
width={150}
height={150}
className="md:w-48 md:h-48"
/>
<div className="text-xs md:text-sm grid gap-2 text-center md:text-left">
<h2 className="text-lg md:text-xl font-bold">{phygital.name}</h2>
<p>Unique piece</p>
<p>Created by: {phygital.brand_name}</p>
<p>Owned by: {phygital?.deployer_address?.toString()}</p>
<p>Date purchased: 20 / 10 / 2024</p>
<p>{phygital?.price?.toString()} ETH</p>
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Last updated</p>
<p className="text-right">{formatDateFromISO(phygital.updated_at)}</p>
</div>

<hr className="my-6 md:my-8" />

<div className="flex flex-col md:flex-row gap-4">
<div className="basis-5/6 pr-4">
<h3 className="text-lg md:text-xl font-bold mb-4">Product Description</h3>
<p className="text-xs md:text-base">{phygital.description}</p>
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Creator Earnings </p>
<p className="text-right">{phygital?.royality} %</p>
<div className="h-40 w-20 md:h-[12rem] md:w-[6rem] mx-auto text-center">
<h4 className="font-bold mb-2">Avatar</h4>
<Avatar modelSrc={avatarModel} cameraInitialDistance={3} className="bg-neutral-950 mx-auto" />
</div>
<div className="grid grid-cols-[1fr_3fr]">
<p>Contract Address
</p>
<p className="text-right">{phygital.contract_address}</p>
</div>

<hr className="my-6 md:my-8" />

<div className="my-4">
<h3 className="text-lg md:text-xl font-bold">NFT Details</h3>
<div className="mt-4 text-xs md:text-sm">
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Token ID</p>
<p className="text-right">{phygital.id}</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Token Standard</p>
<p className="text-right">ERC-721A</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Chain</p>
<p className="text-right">Base Network</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Date created</p>
<p className="text-right">{formatDateFromISO(phygital.created_at)}</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Last sale</p>
<p className="text-right">20/10/2024</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Last updated</p>
<p className="text-right">{formatDateFromISO(phygital.updated_at)}</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Creator Earnings</p>
<p className="text-right">{phygital?.royality} %</p>
</div>
<div className="grid grid-cols-2 md:grid-cols-[1fr_3fr]">
<p>Contract Address</p>
<p className="text-right truncate md:whitespace-normal">{phygital.contract_address}</p>
</div>
</div>
</div>

<div className="flex flex-col md:flex-row justify-center gap-4 mt-8">
<button className="bg-[#30D8FF] text-black px-4 py-2 text-xs md:text-base rounded-md">Print</button>
<button className="bg-[#30D8FF] text-black px-4 py-2 text-xs md:text-base rounded-md cursor-pointer" onClick={showAttestation}>Close</button>
</div>
</div>
<div className="flex justify-center gap-4 mt-8">
<button className="bg-[#30D8FF] text-black px-4 py-2 rounded-md">Print</button>
<button className="bg-[#30D8FF] text-black px-4 py-2 rounded-md cursor-pointer" onClick={showAttestation}>Close</button>
</div>
</div>);
);
};

0 comments on commit 006cc05

Please sign in to comment.