diff --git a/package.json b/package.json index 42b7cb0..d647ec0 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "react": "^18", "react-dom": "^18", "react-hook-form": "^7.53.1", + "react-icons": "^5.3.0", "react-moralis": "^1.4.2", "react-toastify": "^10.0.5", "tailwind-merge": "^2.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1ff6c3..346484b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: react-hook-form: specifier: ^7.53.1 version: 7.53.1(react@18.3.1) + react-icons: + specifier: ^5.3.0 + version: 5.3.0(react@18.3.1) react-moralis: specifier: ^1.4.2 version: 1.4.2(moralis-v1@1.13.0(bufferutil@4.0.8)(utf-8-validate@5.0.10))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -4857,6 +4860,11 @@ packages: peerDependencies: react: ^16.8.0 || ^17 || ^18 || ^19 + react-icons@5.3.0: + resolution: {integrity: sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==} + peerDependencies: + react: '*' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -12814,6 +12822,10 @@ snapshots: dependencies: react: 18.3.1 + react-icons@5.3.0(react@18.3.1): + dependencies: + react: 18.3.1 + react-is@16.13.1: {} react-is@17.0.2: {} diff --git a/src/app/[username]/page.js b/src/app/[username]/page.js index 9112786..f9c28f5 100644 --- a/src/app/[username]/page.js +++ b/src/app/[username]/page.js @@ -799,7 +799,7 @@ function HomePage({ params }) {

{"0 Following"}

-

Address -

-

*/} + {/*

{address} -

+ */} -
+
diff --git a/src/app/nfts/[id]/layout.js b/src/app/nfts/[id]/layout.js new file mode 100644 index 0000000..12c576f --- /dev/null +++ b/src/app/nfts/[id]/layout.js @@ -0,0 +1,69 @@ +export async function generateMetadata({ params }) { + const baseUri = process.env.NEXT_PUBLIC_URI || "https://app.myriadflow.com"; + + // Fetch phygitals + const nftsRes = await fetch( + `${baseUri}/phygitals/all/554b4903-9a06-4031-98f4-48276c427f78` + ); + const phygitals = await nftsRes.json(); + + // Format the NFT name from params + const nftName = params?.id + .replace(/-/g, " ") + .replace(/\b\w/g, (char) => char.toUpperCase()); + + // Find the matching NFT + const nft = phygitals.find((p) => p.name === nftName); + + if (!nft) { + return { + title: "NFT Not Found", + }; + } + + // Get detailed NFT info + const nftDetailRes = await fetch(`${baseUri}/phygitals/${nft.id}`); + const nftDetail = await nftDetailRes.json(); + + const imageUrl = `https://nftstorage.link/ipfs/${nftDetail.image?.slice(7)}`; + const title = `${nftDetail.name} | MyriadFlow Discover`; + const description = + nftDetail.description || + "Own the future of collecting! MyriadFlow Discover lets you buy, sell, and showcase unique phygital NFTs. Explore immersive VR experiences that bring your digital collectibles to life."; + + return { + title, + description, + openGraph: { + title, + description, + images: [ + { + url: imageUrl, + width: 1200, + height: 630, + alt: nftDetail.name, + }, + ], + type: "website", + url: `https://discover.myriadflow.com/nfts/${params.id}`, + }, + twitter: { + card: "summary_large_image", + site: "@MyriadFlow", + title, + description, + images: [imageUrl], + }, + other: { + "og:site_name": "MyriadFlow Discover", + "og:type": "website", + "twitter:domain": "discover.myriadflow.com", + "twitter:url": `https://discover.myriadflow.com/nfts/${params.id}`, + }, + }; +} + +export default function NFTLayout({ children }) { + return children; +} diff --git a/src/app/nfts/[id]/page.js b/src/app/nfts/[id]/page.js index bfe7c88..02a6694 100644 --- a/src/app/nfts/[id]/page.js +++ b/src/app/nfts/[id]/page.js @@ -1,26 +1,29 @@ -"use client" +"use client"; import React, { useState, useEffect } from "react"; import Link from "next/link"; import Head from "next/head"; -import { Avatar } from '@readyplayerme/visage'; -import { toast, ToastContainer } from 'react-toastify'; -import 'react-toastify/dist/ReactToastify.css'; -import { ethers } from 'ethers'; +import { Avatar } from "@readyplayerme/visage"; +import { toast, ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { ethers } from "ethers"; import { abi } from "../../../components/abi/abi"; -import { useAccount, useChainId } from 'wagmi'; -import Moralis from 'moralis'; +import { useAccount, useChainId } from "wagmi"; +import Moralis from "moralis"; import Header1 from "@/components/header1"; -import axios from 'axios'; +import axios from "axios"; import Footer from "@/components/footer"; -import { ProvenanceAttestation } from '@/components/provenance-attestation' +import { FaTwitter, FaInstagram, FaCopy } from "react-icons/fa"; +import { ProvenanceAttestation } from "@/components/provenance-attestation"; const NFTPage = ({ params }) => { - const id = params?.id.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase()); + const id = params?.id + .replace(/-/g, " ") + .replace(/\b\w/g, (char) => char.toUpperCase()); const [isHovered, setIsHovered] = useState(false); const [showPopover, setShowPopover] = useState(false); const [priceUSD, setPriceUSD] = useState(""); - const [avatarUrl, setAvatarUrl] = useState(''); - const [avatar, setAvatar] = useState(''); + const [avatarUrl, setAvatarUrl] = useState(""); + const [avatar, setAvatar] = useState(""); const [logos, setLogos] = useState(""); const [brandDesc, setbrandDesc] = useState(""); const [brandid, setbrandid] = useState(""); @@ -30,7 +33,6 @@ const NFTPage = ({ params }) => { const [owner, setOwner] = useState(false); const [mintedNFTs, setMintedNFTs] = useState([]); - const [showProvenance, setShowProvenance] = useState(false); const togglePopup = () => { @@ -41,11 +43,20 @@ const NFTPage = ({ params }) => { const account = useAccount(); const walletAddress = account.address; const apikey = process.env.NEXT_PUBLIC_MORALIS_API_KEY; - const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'; + const baseUri = process.env.NEXT_PUBLIC_URI || "https://app.myriadflow.com"; - const [activeTab, setActiveTab] = useState('Color'); // Default tab + const [activeTab, setActiveTab] = useState("Color"); // Default tab - const tabs = ['Color', 'Size', 'Weight', 'Material', 'Usage', 'Unique Qualities', 'Manufacturer', 'Made In']; + const tabs = [ + "Color", + "Size", + "Weight", + "Material", + "Usage", + "Unique Qualities", + "Manufacturer", + "Made In", + ]; const handleClaimClick = () => { setShowPopover(true); @@ -54,82 +65,95 @@ const NFTPage = ({ params }) => { }, 6000); // Pop-over will disappear after 3 seconds }; - - const isDevelopment = process.env.NEXT_PUBLIC_NODE_ENV === 'development' + const isDevelopment = process.env.NEXT_PUBLIC_NODE_ENV === "development"; const apiUrl = isDevelopment - ? 'http://localhost:3000' // Local development URL - : 'https://discover.myriadflow.com' // Production URL + ? "http://localhost:3000" // Local development URL + : "https://discover.myriadflow.com"; // Production URL const [onephygital, setonePhygital] = useState([]); - const getBrands = async () => { + const [selectedImage, setSelectedImage] = useState( + `https://nftstorage.link/ipfs/${onephygital?.image?.slice(7)}` + ); + const [showLightbox, setShowLightbox] = useState(false); + const [showShareOptions, setShowShareOptions] = useState(false); + const getBrands = async () => { setLoading(true); - const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'; + const baseUri = process.env.NEXT_PUBLIC_URI || "https://app.myriadflow.com"; - const nfts = await fetch(`${baseUri}/phygitals/all/554b4903-9a06-4031-98f4-48276c427f78`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' + const nfts = await fetch( + `${baseUri}/phygitals/all/554b4903-9a06-4031-98f4-48276c427f78`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, } - }); + ); const phynfts = await nfts.json(); - const matchedNft = phynfts.find(nft => nft.name === id); + const matchedNft = phynfts.find((nft) => nft.name === id); if (matchedNft) { const NftId = matchedNft.id; const phyres = await fetch(`${baseUri}/phygitals/${NftId}`, { - method: 'GET', + method: "GET", headers: { - 'Content-Type': 'application/json' - } + "Content-Type": "application/json", + }, }); - const phyresult = await phyres.json() + const phyresult = await phyres.json(); // setOwner(phyresult.deployer_address) setonePhygital(phyresult); - const avatar = await fetch(`${baseUri}/avatars/all/554b4903-9a06-4031-98f4-48276c427f78`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' + const avatar = await fetch( + `${baseUri}/avatars/all/554b4903-9a06-4031-98f4-48276c427f78`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, } - }); + ); const avatardata = await avatar.json(); - const selectedAvatar = avatardata.find(avatar => avatar.phygital_id === NftId); + const selectedAvatar = avatardata.find( + (avatar) => avatar.phygital_id === NftId + ); // If found, update the state with the avatar URL if (selectedAvatar) { - setAvatar(selectedAvatar) + setAvatar(selectedAvatar); setAvatarUrl(selectedAvatar.url); } setLoading(false); } - } + }; useEffect(() => { - getBrands() - }, []) + getBrands(); + }, []); const formatDate = (isoDate) => { const date = new Date(isoDate); return date.toLocaleString(); // You can customize the format further if needed }; - useEffect(() => { const pricetoUSD = async () => { // Fetch the current ETH to USD conversion rate - const conversionRateRes = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd'); + const conversionRateRes = await fetch( + "https://api.coingecko.com/api/v3/simple/price?ids=ethereum&vs_currencies=usd" + ); if (!conversionRateRes.ok) { - throw new Error('Failed to fetch ETH to USD conversion rate'); + throw new Error("Failed to fetch ETH to USD conversion rate"); } const conversionRateResult = await conversionRateRes.json(); @@ -137,62 +161,80 @@ const NFTPage = ({ params }) => { const lowestPriceInUSD = onephygital?.price * ethToUsdRate; setPriceUSD(lowestPriceInUSD.toFixed(2)); - } + }; pricetoUSD(); - }, [onephygital]) + }, [onephygital]); + + const handleShare = () => { + setShowShareOptions(!showShareOptions); + }; + + const copyInstagramContent = () => { + const url = window.location.href; + const instagramText = `✨ Check out this amazing Phygital NFT!\n\n${onephygital?.name}\n\nDiscover more at: ${url}\n\n#Myriadflow #PhygitalNFT #NFTCommunity #Web3 #DigitalCollectibles`; + + navigator.clipboard.writeText(instagramText); + toast.success("Instagram caption copied to clipboard!"); + setShowShareOptions(false); + }; - const shareOnTwitter = (url, text, imageUrl = '') => { - const twitterBaseUrl = 'https://twitter.com/intent/tweet'; + const shareOnTwitter = (url, text, imageUrl = "") => { + const twitterBaseUrl = "https://twitter.com/intent/tweet"; + const twitterText = `Check this out🤩\nCoolest Phygital on Discover | Myriadflow✨\n\n${url}\n\n#Myriadflow #Discover #Phygitals #NFTs #Collections\n`; const params = new URLSearchParams({ - url: `${imageUrl}`, - text: `${text}`, + text: twitterText, }); - window.open(`${twitterBaseUrl}?${params.toString()}`, '_blank'); + window.open(`${twitterBaseUrl}?${params.toString()}`, "_blank"); }; - const handleShare = () => { - const url = window.location.href; // The URL you want to share - const imageUrl = `https://nftstorage.link/ipfs/bafkreihbqwvmszwvvrwah3lzankgraxmrwo7kasrl3xx64huij5zy6gmmm`; - - const text = `Check this out🤩\nCoolest Phygital on Discover | Myriadflow✨\n\n${url}\n\n#Myriadflow #Discover #Phygitals #NFTs #Collections\n`; + const copyToClipboard = () => { + const url = window.location.href; + const copyText = `🌟 Discovered something amazing on MyriadFlow!\n\n${onephygital?.name}\n${onephygital?.description}\n\nCheck it out here: ${url}\n\n#MyriadFlow #PhygitalNFT #DigitalCollectibles`; - shareOnTwitter(url, text, imageUrl); + navigator.clipboard.writeText(copyText); + toast.success("Content copied to clipboard!"); + setShowShareOptions(false); }; useEffect(() => { const brandmatch = async () => { - const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'; + const baseUri = + process.env.NEXT_PUBLIC_URI || "https://app.myriadflow.com"; try { - const res = await fetch(`${baseUri}/brands/all/554b4903-9a06-4031-98f4-48276c427f78`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' + const res = await fetch( + `${baseUri}/brands/all/554b4903-9a06-4031-98f4-48276c427f78`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, } - }); + ); if (!res.ok) { - throw new Error('Failed to fetch data'); + throw new Error("Failed to fetch data"); } const result = await res.json(); - const matchedBrand = result.find(brand => brand.name === onephygital.brand_name); + const matchedBrand = result.find( + (brand) => brand.name === onephygital.brand_name + ); if (matchedBrand) { setLogos(matchedBrand.logo_image); setbrandDesc(matchedBrand.description); setbrandid(matchedBrand.id); setbrandName(matchedBrand.name); } - } catch (error) { - console.error('Error fetching data:', error); + console.error("Error fetching data:", error); } - } + }; brandmatch(); - }, [onephygital]) + }, [onephygital]); useEffect(() => { const fetch = async () => { @@ -202,35 +244,36 @@ const NFTPage = ({ params }) => { // }); const response = await Moralis.EvmApi.events.getContractEvents({ - "chain": chainId, - "order": "DESC", - "topic": "0x328ff68d0e66694e405c9f8fc906a346b345aa1f87ec216eaa82f2c654d0d34a", - "address": `${onephygital?.contract_address}`, - "abi": { - "anonymous": false, - "inputs": [ + chain: chainId, + order: "DESC", + topic: + "0x328ff68d0e66694e405c9f8fc906a346b345aa1f87ec216eaa82f2c654d0d34a", + address: `${onephygital?.contract_address}`, + abi: { + anonymous: false, + inputs: [ { - "indexed": false, - "name": "currentIndex", - "type": "uint256", - "internal_type": "uint256" + indexed: false, + name: "currentIndex", + type: "uint256", + internal_type: "uint256", }, { - "indexed": false, - "name": "quantity", - "type": "uint256", - "internal_type": "uint256" + indexed: false, + name: "quantity", + type: "uint256", + internal_type: "uint256", }, { - "indexed": true, - "name": "creator", - "type": "address", - "internal_type": "address" - } + indexed: true, + name: "creator", + type: "address", + internal_type: "address", + }, ], - "name": "PhygitalAAssetCreated", - "type": "event" - } + name: "PhygitalAAssetCreated", + type: "event", + }, }); if (response.raw.result[0]) { @@ -239,35 +282,34 @@ const NFTPage = ({ params }) => { } catch (e) { console.error(e); } - } + }; fetch(); - }, [onephygital]) + }, [onephygital]); const buyasset = async () => { setLoading(true); try { - if (typeof window !== "undefined" && window.ethereum && walletAddress) { - const provider = new ethers.providers.Web3Provider(window.ethereum) + const provider = new ethers.providers.Web3Provider(window.ethereum); const contract = new ethers.Contract( `${onephygital?.contract_address}`, abi, provider.getSigner() - ) + ); - const tx = await contract.mint(1, { value: ethers.utils.parseEther(onephygital?.price.toString()) }); + const tx = await contract.mint(1, { + value: ethers.utils.parseEther(onephygital?.price.toString()), + }); const result = await tx.wait(); setLoading(false); window.location.href = `/confirm/${id}`; - } - else { - toast.warning('Connect your wallet'); + } else { + toast.warning("Connect your wallet"); setLoading(false); } - } catch (error) { console.error("Error handling buy asset:", error); setLoading(false); // Set loading state to false in case of error @@ -284,31 +326,33 @@ const NFTPage = ({ params }) => { image: onephygital.image, logo: logos, }; - const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com'; + const baseUri = process.env.NEXT_PUBLIC_URI || "https://app.myriadflow.com"; if (walletAddress) { try { const response = await axios.get(`${baseUri}/cart/${walletAddress}`); const cartItems = response.data; - const existingItem = cartItems.find(item => item.phygital_id === onephygital.id); + const existingItem = cartItems.find( + (item) => item.phygital_id === onephygital.id + ); if (existingItem) { await axios.post(`${baseUri}/cart`, { phygital_id: onephygital.id, wallet_address: walletAddress, - quantity: existingItem.quantity + 1 + quantity: existingItem.quantity + 1, }); } else { await axios.post(`${baseUri}/cart`, cartItem); } - toast.success('Added to Cart!'); + toast.success("Added to Cart!"); } catch (error) { - toast.error('Failed to add to cart. Please try again.'); - console.error('Error adding to cart:', error); + toast.error("Failed to add to cart. Please try again."); + console.error("Error adding to cart:", error); } } else { - toast.warning('Connect your wallet'); + toast.warning("Connect your wallet"); } }; @@ -319,9 +363,9 @@ const NFTPage = ({ params }) => { const assets = await Moralis.EvmApi.nft.getWalletNFTs({ chain: chainId, - format: 'decimal', + format: "decimal", mediaItems: false, - address: walletAddress + address: walletAddress, }); setMintedNFTs(assets.raw.result); @@ -339,40 +383,55 @@ const NFTPage = ({ params }) => { useEffect(() => { const fetchPhygitals = async () => { try { - const phyres = await fetch(`${baseUri}/phygitals/all/554b4903-9a06-4031-98f4-48276c427f78`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' + const phyres = await fetch( + `${baseUri}/phygitals/all/554b4903-9a06-4031-98f4-48276c427f78`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, } - }); + ); if (!phyres.ok) { - throw new Error('Failed to fetch data'); + throw new Error("Failed to fetch data"); } const phyresult = await phyres.json(); console.log("Phygitals:", phyresult); - const matched = await Promise.all(phyresult.map(async (phygital) => { - const amountBought = await mintedNFTs.reduce(async (countPromise, nft) => { - const count = await countPromise; - return count + (nft?.token_address === phygital.contract_address ? 1 : 0); - }, Promise.resolve(0)); - return { - ...phygital, - amount_bought: amountBought - }; - })); - - const filteredMatched = matched.filter(phygital => phygital.amount_bought > 0); - const nftMatched = filteredMatched.filter(nft => nft.id === onephygital.id); + const matched = await Promise.all( + phyresult.map(async (phygital) => { + const amountBought = await mintedNFTs.reduce( + async (countPromise, nft) => { + const count = await countPromise; + return ( + count + + (nft?.token_address === phygital.contract_address ? 1 : 0) + ); + }, + Promise.resolve(0) + ); + return { + ...phygital, + amount_bought: amountBought, + }; + }) + ); + + const filteredMatched = matched.filter( + (phygital) => phygital.amount_bought > 0 + ); + const nftMatched = filteredMatched.filter( + (nft) => nft.id === onephygital.id + ); if (nftMatched.length > 0) { setOwner(true); } console.log("Matched NFTs:", filteredMatched); console.log("Matched NFTs 2:", nftMatched); } catch (error) { - console.error('Error fetching data:', error); + console.error("Error fetching data:", error); } }; @@ -382,609 +441,958 @@ const NFTPage = ({ params }) => { }, [mintedNFTs, baseUri, onephygital.id]); return ( - <>{owner ? ( -
- - Discover | MyriadFlow - - - - - - - - - - - - - - -
-
- + {owner ? ( +
+ + Discover | MyriadFlow + -
- {showProvenance && ( -
-
- setShowProvenance(false)} /> + + + + + + + + + + + + + +
+
+
+ setShowLightbox(true)} + />
-
- )} -
-
{onephygital?.name}
-
Base Network
-
Owned by {onephygital?.deployer_address?.toString()}
-
-
- Created by{" "} - setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + + {/* Thumbnails */} +
+
+ + setSelectedImage( + `https://nftstorage.link/ipfs/${onephygital?.image?.slice( + 7 + )}` + ) + } + /> +
+
+ + {/* Lightbox */} + {showLightbox && ( +
setShowLightbox(false)} > - {onephygital?.brand_name?.toString()} - {isHovered && ( -
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - className="absolute top-12 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-cyan-400 to-fuchsia-500 text-white p-4 rounded-lg shadow-lg z-20 w-[200px] lg:w-[300px]" +
+ + e.stopPropagation()} + /> +
+
+ )} +
+ {showProvenance && ( +
+
+ setShowProvenance(false)} + /> +
+
+ )} +
+
+ {onephygital?.name} +
+
+ Base Network +
+
+ Owned by {onephygital?.deployer_address?.toString()} +
+
+
+ Created by{" "} + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + {onephygital?.brand_name?.toString()} + {isHovered && ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + className="absolute top-12 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-cyan-400 to-fuchsia-500 text-white p-4 rounded-lg shadow-lg z-20 w-[200px] lg:w-[300px]" + > +
+ +
+ {onephygital?.brand_name?.toString()} +
+
+
+ {brandDesc?.toString()} +
+ + View brand page +
-
{brandDesc?.toString()}
- View brand page -
- )} - + )} + +
+ + {/* Conditional Rendering */} + {!onephygital?.product_url ? ( + <> +
+ Price Amount +
+
+
+ {onephygital?.price?.toString()} ETH +
+
{priceUSD} USD
+
Phygital & Unique avatar
+
+ +
+ {sold}/{onephygital?.quantity?.toString()} Sold +
+ +
+ + + +
+ + ) : ( + <> +
+
+ +
+ +
+ + + VIEW ON SHOPIFY + + +
+ + )}
+
- {/* Conditional Rendering */} - {!onephygital?.product_url ? ( - <> -
Price Amount
-
-
{onephygital?.price?.toString()} ETH
-
{priceUSD} USD
-
Phygital & Unique avatar
+
+
+
+
+ Description
- -
- {sold}/{onephygital?.quantity?.toString()} Sold +
+ {onephygital?.description?.toString()}
- -
- - - -
- - ) : ( - <> -
-
- +
+
+
NFT Details
+
+
+
Contract Address
+
+ {onephygital?.contract_address?.toString()} +
+
+
+
Token ID
+
Token ID
+
+
+
Token Standard
+
ERC-721A
+
+
+
Chain
+
Base Network
+
+
+
Date Created
+
{formatDate(onephygital?.created_at)}
+
+
+
Last Sale
+
sale date
+
+
+
Last Updated
+
{formatDate(onephygital?.updated_at)}
+
+
+
Creator Earnings
+
{onephygital?.royality} %
+
+
+
-
- - +
WebXR
+
+
+ - VIEW ON SHOPIFY - + Experience +
+ Access the WebXR experience to ask questions about the + brand, the product, and more! +
- - )} -
-
+
+
Avatar
+ {avatarUrl && ( +
+ +
+ )} +
+
-
-
-
-
Description
-
- {onephygital?.description?.toString()} +
+ Additional Product details
-
-
-
NFT Details
-
-
-
Contract Address
-
{onephygital?.contract_address?.toString()}
+
+
+
Material
+
{onephygital?.material?.toString()}
-
-
Token ID
-
Token ID
+
+
Usage
+
+ {onephygital?.usage?.toString()} +
-
-
Token Standard
-
ERC-721A
+ +
+
Unique Qualities
+
{onephygital?.quality?.toString()}
-
-
Chain
-
Base Network
+
+
Weight
+
{onephygital?.weight?.toString()}
-
-
Date Created
-
{formatDate(onephygital?.created_at)}
+
+
Manufacturer
+
{onephygital?.manufacturer?.toString()}
-
-
Last Sale
-
sale date
+
+
Made In
+
{onephygital?.origin_country?.toString()}
-
-
Last Updated
-
{formatDate(onephygital?.updated_at)}
+
+
Size
+
{onephygital?.size?.toString()}
-
-
Creator Earnings
-
{onephygital?.royality} %
+
+
Color
+
{onephygital?.color?.toString()}
-
-
WebXR
-
-
- +
+
- Experience - -
- Access the WebXR experience to ask questions about the brand, the product, and more! -
-
-
-
Avatar
- {avatarUrl && ( -
- +
+ Loading icon
- )} -
-
- -
Additional Product details
-
-
-
Material
-
{onephygital?.material?.toString()}
-
-
-
Usage
-
{onephygital?.usage?.toString()}
-
- -
-
Unique Qualities
-
{onephygital?.quality?.toString()}
-
-
-
Weight
-
{onephygital?.weight?.toString()}
-
-
-
Manufacturer
-
{onephygital?.manufacturer?.toString()}
-
-
-
Made In
-
{onephygital?.origin_country?.toString()}
-
-
-
Size
-
{onephygital?.size?.toString()}
-
-
-
Color
-
{onephygital?.color?.toString()}
+
-
+ )} +
+ ) : ( +
+ + Discover | MyriadFlow + + + + + + + + + + + + + + +
+
+
+ setShowLightbox(true)} + /> +
- {loading && ( -
-
-
-
+ {/* Thumbnails */} +
+
Loading icon + setSelectedImage( + `https://nftstorage.link/ipfs/${onephygital?.image?.slice( + 7 + )}` + ) + } />
-
-
- )} -
-
- ) : ( -
- - Discover | MyriadFlow - - - - - - - - - - - - - - -
-
- -
-
-
{onephygital?.name}
-
Base Network
-
Owned by {onephygital?.deployer_address?.toString()}
-
-
- Created by{" "} - setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + + {/* Lightbox */} + {showLightbox && ( +
setShowLightbox(false)} > - {onephygital?.brand_name?.toString()} - {isHovered && ( -
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} - className="absolute top-12 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-cyan-400 to-fuchsia-500 text-white p-4 rounded-lg shadow-lg z-20 w-[200px] lg:w-[300px]" +
+ + e.stopPropagation()} + /> +
+
+ )} +
+
+
+ {onephygital?.name} +
+
+ Base Network +
+
+ Owned by {onephygital?.deployer_address?.toString()} +
+
+
+ Created by{" "} + setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > + {onephygital?.brand_name?.toString()} + {isHovered && ( +
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + className="absolute top-12 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-cyan-400 to-fuchsia-500 text-white p-4 rounded-lg shadow-lg z-20 w-[200px] lg:w-[300px]" + > +
+ +
+ {onephygital?.brand_name?.toString()} +
+
+
+ {brandDesc?.toString()} +
+ + View brand page +
-
{brandDesc?.toString()}
- View brand page -
- )} - + )} + +
+ + {/* Conditional Rendering */} + {!onephygital?.product_url ? ( + <> +
+ Price Amount +
+
+
+ {onephygital?.price?.toString()} ETH +
+
{priceUSD} USD
+
Phygital & Unique avatar
+
+ +
+ {sold}/{onephygital?.quantity?.toString()} Sold +
+ +
+ + + +
+ + ) : ( + <> +
+
+ +
+ +
+ + + VIEW ON SHOPIFY + + +
+ + )}
+
- {/* Conditional Rendering */} - {!onephygital?.product_url ? ( - <> -
Price Amount
-
-
{onephygital?.price?.toString()} ETH
-
{priceUSD} USD
-
Phygital & Unique avatar
+
+
+
+
+ Description
- -
- {sold}/{onephygital?.quantity?.toString()} Sold +
+ {onephygital?.description?.toString()}
- -
- - - -
- - ) : ( - <> -
-
- +
+
+
NFT Details
+
+
+
Contract Address
+
+ {onephygital?.contract_address?.toString()} +
+
+
+
Token ID
+
Token ID
+
+
+
Token Standard
+
ERC-721A
+
+
+
Chain
+
Base Network
+
+
+
Date Created
+
{formatDate(onephygital?.created_at)}
+
+
+
Last Sale
+
sale date
+
+
+
Last Updated
+
{formatDate(onephygital?.updated_at)}
+
+
+
Creator Earnings
+
{onephygital?.royality} %
+
+
+
-
- - +
WebXR
+
+
+ - VIEW ON SHOPIFY - + Experience +
+ Access the WebXR experience to ask questions about the + brand, the product, and more! +
- - )} -
-
+
+
Avatar
+ {avatarUrl && ( +
+ +
+ )} +
+
-
-
-
-
Description
-
- {onephygital?.description?.toString()} +
+ Additional Product details
-
-
-
NFT Details
-
-
-
Contract Address
-
{onephygital?.contract_address?.toString()}
+
+
+
Material
+
{onephygital?.material?.toString()}
-
-
Token ID
-
Token ID
+
+
Usage
+
+ {onephygital?.usage?.toString()} +
-
-
Token Standard
-
ERC-721A
+ +
+
Unique Qualities
+
{onephygital?.quality?.toString()}
-
-
Chain
-
Base Network
+
+
Weight
+
{onephygital?.weight?.toString()}
-
-
Date Created
-
{formatDate(onephygital?.created_at)}
+
+
Manufacturer
+
{onephygital?.manufacturer?.toString()}
-
-
Last Sale
-
sale date
+
+
Made In
+
{onephygital?.origin_country?.toString()}
-
-
Last Updated
-
{formatDate(onephygital?.updated_at)}
+
+
Size
+
{onephygital?.size?.toString()}
-
-
Creator Earnings
-
{onephygital?.royality} %
+
+
Color
+
{onephygital?.color?.toString()}
-
-
WebXR
-
-
- +
+
- Experience - -
- Access the WebXR experience to ask questions about the brand, the product, and more! -
-
-
-
Avatar
- {avatarUrl && ( -
- +
+ Loading icon
- )} -
-
- -
Additional Product details
-
-
-
Material
-
{onephygital?.material?.toString()}
-
-
-
Usage
-
{onephygital?.usage?.toString()}
-
- -
-
Unique Qualities
-
{onephygital?.quality?.toString()}
-
-
-
Weight
-
{onephygital?.weight?.toString()}
-
-
-
Manufacturer
-
{onephygital?.manufacturer?.toString()}
-
-
-
Made In
-
{onephygital?.origin_country?.toString()}
-
-
-
Size
-
{onephygital?.size?.toString()}
-
-
-
Color
-
{onephygital?.color?.toString()}
-
-
-
-
- - {loading && ( -
-
-
-
- Loading icon
-
- )} -
-
- )} - + )} +
+ )} - ); };