From 187edaecb5a54627159656a07834790248ead325 Mon Sep 17 00:00:00 2001 From: Joshua Ogbonna <58758038+Joshua-Ogbonna@users.noreply.github.com> Date: Thu, 28 Nov 2024 08:07:52 +0000 Subject: [PATCH 1/2] chore: remove identity until after meeting with Sharlene --- src/app/[username]/page.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/[username]/page.js b/src/app/[username]/page.js index 08024f2..457020f 100644 --- a/src/app/[username]/page.js +++ b/src/app/[username]/page.js @@ -475,10 +475,10 @@ function HomePage({ params }) {
- + {/* - + */}
From c6d1487c0c6e9f07957735f78f7e0f51e1416e9c Mon Sep 17 00:00:00 2001 From: Joshua Ogbonna <58758038+Joshua-Ogbonna@users.noreply.github.com> Date: Thu, 28 Nov 2024 08:08:09 +0000 Subject: [PATCH 2/2] chore: replace identity address with basename --- src/app/[username]/page.js | 1420 +++++++++++++++++++++++++----------- 1 file changed, 974 insertions(+), 446 deletions(-) diff --git a/src/app/[username]/page.js b/src/app/[username]/page.js index 457020f..79fa6c7 100644 --- a/src/app/[username]/page.js +++ b/src/app/[username]/page.js @@ -1,14 +1,20 @@ -"use client" -import { useEffect, useState } from 'react'; -import { useAccount, useChainId } from 'wagmi'; -import Moralis from 'moralis'; -import ProfileNftCard from '../../components/profileNftCard'; -import TokenNftCard from '../../components/tokenNftCard'; -import Header1 from '../../components/header1'; -import Footer from '../../components/footer'; -import Link from 'next/link'; -import { useRouter } from 'next/navigation'; -import { Avatar, Identity, Name, Badge, Address } from '@coinbase/onchainkit/identity'; +"use client"; +import { useEffect, useState } from "react"; +import { useAccount, useChainId } from "wagmi"; +import Moralis from "moralis"; +import ProfileNftCard from "../../components/profileNftCard"; +import TokenNftCard from "../../components/tokenNftCard"; +import Header1 from "../../components/header1"; +import Footer from "../../components/footer"; +import Link from "next/link"; +import { useRouter } from "next/navigation"; +import { + Avatar, + Identity, + Name, + Badge, + Address, +} from "@coinbase/onchainkit/identity"; function HomePage({ params }) { const { username } = params; @@ -20,50 +26,50 @@ function HomePage({ params }) { const [mintedNFTs, setMintedNFTs] = useState([]); const [matchedNFTs, setMatchedNFTs] = useState([]); const [matchedWebxrs, setMatchedWebxr] = useState([]); - const [name, setName] = useState(''); - const [basename, setBaseName] = useState(''); - const [coverImage, setCoverImage] = useState(''); - const [profileImage, setProfileImage] = useState(''); - const [bio, setBio] = useState(''); - const [website, setWebsite] = useState(''); - const [x, setX] = useState(''); - const [instagram, setInstagram] = useState(''); - const [guestname, setGuestName] = useState(''); - const [guestbasename, setGuestBaseName] = useState(''); - const [guestcoverImage, setGuestCoverImage] = useState(''); - const [guestprofileImage, setGuestProfileImage] = useState(''); - const [guestbio, setGuestBio] = useState(''); - const [guestwebsite, setGuestWebsite] = useState(''); - const [guestx, setGuestX] = useState(''); - const [guestinstagram, setGuestInstagram] = useState(''); - const [walletAddress, setGuestWalletAddress] = useState(''); - const [activeSection, setActiveSection] = useState('assets'); + const [name, setName] = useState(""); + const [basename, setBaseName] = useState(""); + const [coverImage, setCoverImage] = useState(""); + const [profileImage, setProfileImage] = useState(""); + const [bio, setBio] = useState(""); + const [website, setWebsite] = useState(""); + const [x, setX] = useState(""); + const [instagram, setInstagram] = useState(""); + const [guestname, setGuestName] = useState(""); + const [guestbasename, setGuestBaseName] = useState(""); + const [guestcoverImage, setGuestCoverImage] = useState(""); + const [guestprofileImage, setGuestProfileImage] = useState(""); + const [guestbio, setGuestBio] = useState(""); + const [guestwebsite, setGuestWebsite] = useState(""); + const [guestx, setGuestX] = useState(""); + const [guestinstagram, setGuestInstagram] = useState(""); + const [walletAddress, setGuestWalletAddress] = useState(""); + const [activeSection, setActiveSection] = useState("assets"); const [showForm, setShowForm] = useState(false); const [owner, setOwner] = useState(false); const [showCreatorOptions, setShowCreatorOptions] = useState(false); const [hoveredOption, setHoveredOption] = useState(null); - const [status, setStatus] = useState(''); - const [discord, setDiscord] = useState(''); - const [selectedSocialLink, setSelectedSocialLink] = useState(''); - const [link, setLink] = useState(''); - const [guestdiscord, setGuestDiscord] = useState(''); - const [guestselectedSocialLink, setGuestSelectedSocialLink] = useState(''); - const [guestlink, setGuestLink] = useState(''); + const [status, setStatus] = useState(""); + const [discord, setDiscord] = useState(""); + const [selectedSocialLink, setSelectedSocialLink] = useState(""); + const [link, setLink] = useState(""); + const [guestdiscord, setGuestDiscord] = useState(""); + const [guestselectedSocialLink, setGuestSelectedSocialLink] = useState(""); + const [guestlink, setGuestLink] = useState(""); 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 handleVerify = () => { - setShowForm(true) + setShowForm(true); }; useEffect(() => { // Check if the URL has a hash and set the active section if (window.location.hash) { - const section = window.location.hash.substring(1); - setActiveSection(section); + const section = window.location.hash.substring(1); + setActiveSection(section); } -}, []); + }, []); useEffect(() => { const fetchNFTs = async () => { @@ -72,9 +78,9 @@ function HomePage({ params }) { const assets = await Moralis.EvmApi.nft.getWalletNFTs({ chain: chainId, - format: 'decimal', + format: "decimal", mediaItems: false, - address: walletAddress + address: walletAddress, }); setMintedNFTs(assets.raw.result); @@ -93,12 +99,15 @@ function HomePage({ params }) { const getUserData = async () => { if (address) { try { - const response = await fetch(`${baseUri}/profiles/username/${username}`, { - method: 'GET', - headers: { - 'content-Type': 'application/json', - }, - }); + const response = await fetch( + `${baseUri}/profiles/username/${username}`, + { + method: "GET", + headers: { + "content-Type": "application/json", + }, + } + ); if (response.ok) { const data = await response.json(); @@ -116,10 +125,10 @@ function HomePage({ params }) { setGuestSelectedSocialLink(data.selected_social_link); setGuestLink(data.link); } else { - console.log('No user found'); + console.log("No user found"); } } catch (error) { - console.error('Error fetching user data', error); + console.error("Error fetching user data", error); } } }; @@ -130,12 +139,15 @@ function HomePage({ params }) { const getUserData = async () => { if (address) { try { - const response = await fetch(`${baseUri}/profiles/wallet/${address}`, { - method: 'GET', - headers: { - 'content-Type': 'application/json', - }, - }); + const response = await fetch( + `${baseUri}/profiles/wallet/${address}`, + { + method: "GET", + headers: { + "content-Type": "application/json", + }, + } + ); if (response.ok) { const data = await response.json(); @@ -152,10 +164,10 @@ function HomePage({ params }) { setSelectedSocialLink(data.selected_social_link); setLink(data.link); } else { - console.log('No user found'); + console.log("No user found"); } } catch (error) { - console.error('Error fetching user data', error); + console.error("Error fetching user data", error); } } }; @@ -165,36 +177,49 @@ function HomePage({ 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 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 + ); setMatchedNFTs(filteredMatched); console.log("Matched NFTs:", filteredMatched); } catch (error) { - console.error('Error fetching data:', error); + console.error("Error fetching data:", error); } }; @@ -206,76 +231,97 @@ function HomePage({ 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 matchedfantoken = await Promise.all(phyresult.map(async (phygital) => { - const amountBought = await mintedNFTs.reduce(async (countPromise, nft) => { - const count = await countPromise; - if (nft?.contract_type === 'ERC1155') { - try { - const response = await fetch(`${baseUri}/get-mint-fantoken/${walletAddress}`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' + const matchedfantoken = await Promise.all( + phyresult.map(async (phygital) => { + const amountBought = await mintedNFTs.reduce( + async (countPromise, nft) => { + const count = await countPromise; + if (nft?.contract_type === "ERC1155") { + try { + const response = await fetch( + `${baseUri}/get-mint-fantoken/${walletAddress}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); + + if (!response.ok) { + throw new Error("Failed to fetch minted tokens"); + } + + const mintedFanTokens = await response.json(); + + const matchingFanToken = mintedFanTokens.find((token) => { + return ( + token.nftContractAddress === + phygital.contract_address && + token.token_id === nft.token_id + ); + }); + return count + (matchingFanToken ? 1 : 0); + } catch (error) { + console.error("Error fetching minted tokens:", error); + return count; } - }); - - if (!response.ok) { - throw new Error('Failed to fetch minted tokens'); } - - const mintedFanTokens = await response.json(); - - const matchingFanToken = mintedFanTokens.find(token => { - return token.nftContractAddress === phygital.contract_address && - token.token_id === nft.token_id; - }); - return count + (matchingFanToken ? 1 : 0); - } catch (error) { - console.error('Error fetching minted tokens:', error); return count; - } - } - return count; - }, Promise.resolve(0)); - return { - ...phygital, - amount_bought: amountBought - }; - })); - const filteredMatchedFanToken = matchedfantoken.filter(phygital => phygital.amount_bought > 0); - const response = await fetch(`${baseUri}/webxr/all/554b4903-9a06-4031-98f4-48276c427f78`, { - method: 'GET', - headers: { - 'Content-Type': 'application/json' + }, + Promise.resolve(0) + ); + return { + ...phygital, + amount_bought: amountBought, + }; + }) + ); + const filteredMatchedFanToken = matchedfantoken.filter( + (phygital) => phygital.amount_bought > 0 + ); + const response = await fetch( + `${baseUri}/webxr/all/554b4903-9a06-4031-98f4-48276c427f78`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, } - }); + ); if (!response.ok) { - throw new Error('Failed to fetch minted tokens'); + throw new Error("Failed to fetch minted tokens"); } const webxr = await response.json(); - const matchingWebxr = webxr.filter(web => - filteredMatchedFanToken.some(phygital => phygital.id === web.phygital_id) + const matchingWebxr = webxr.filter((web) => + filteredMatchedFanToken.some( + (phygital) => phygital.id === web.phygital_id + ) ); setMatchedWebxr(matchingWebxr); console.log("Matched Fantoken:", filteredMatchedFanToken); console.log("Matched webxr:", matchingWebxr); } catch (error) { - console.error('Error fetching data:', error); + console.error("Error fetching data:", error); } }; @@ -288,22 +334,25 @@ function HomePage({ params }) { const getPhygitalData = async () => { if (walletAddress) { try { - const response = await fetch(`${baseUri}/phygitals/deployer_address/${walletAddress}`, { - method: 'GET', - headers: { - 'content-Type': 'application/json', - }, - }); + const response = await fetch( + `${baseUri}/phygitals/deployer_address/${walletAddress}`, + { + method: "GET", + headers: { + "content-Type": "application/json", + }, + } + ); if (response.ok) { const data = await response.json(); setOwner(true); console.log("Phygital data based on address", data); } else { - console.log('No Phygital found'); + console.log("No Phygital found"); } } catch (error) { - console.error('Error fetching user data', error); + console.error("Error fetching user data", error); } } }; @@ -314,23 +363,26 @@ function HomePage({ params }) { const getElevateData = async () => { if (walletAddress) { try { - const response = await fetch(`${baseUri}/elevate/walletaddress/${walletAddress}`, { - method: "GET", - headers: { - 'Content-Type': 'application/json', - }, - }); + const response = await fetch( + `${baseUri}/elevate/walletaddress/${walletAddress}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + } + ); if (response.ok) { const data = await response.json(); setStatus(data.status); } else { - console.log('No user found'); + console.log("No user found"); } } catch (error) { - console.error('Error fetching user data', error); + console.error("Error fetching user data", error); } } else { - console.log('No wallet address provided'); + console.log("No wallet address provided"); } }; @@ -344,98 +396,129 @@ function HomePage({ params }) {
-
Profile
-
+
-

{name || 'Your Name'}

+

{name || "Your Name"}

{owner ? ( -

Creator

+

+ Creator +

) : matchedNFTs.length > 0 ? ( -

Owner

+

+ Owner +

) : matchedWebxrs.length > 0 ? ( -

Supporter

+

+ Supporter +

) : ( -

Visitor

+

+ Visitor +

)} {instagram || x ? ( <> - + ) : ( <> - - + + {showForm && (

Hold on!

- To begin your verification process, you must link your X or Instagram account. + To begin your verification process, you must link your X + or Instagram account.

-
-

+
+

Wallet Address: {address}

-
+
{/* */} + {basename ?? ""}
-

{bio || "Short bio of the person here"}

+

+ {bio || "Short bio of the person here"} +

Edit Profile -
-
-
+
+
{website && ( - Website + Website )} {x && ( - X + X )} {instagram && ( - Instagram + Instagram )} {discord && ( - Instagram + Instagram )} {selectedSocialLink === "youtube" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "telegram" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "linkedin" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "whatsapp" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "google" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "tiktok" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "snapchat" && link && ( - Instagram - + Instagram + )} {selectedSocialLink === "pinterest" && link && ( - Instagram - + Instagram + )}
-
-
-

{'0 Followers'}

-

{'0 Following'}

-

Address

-

{address}

+
+
+

+ {"0 Followers"} +

+

+ {"0 Following"} +

+

+ Address +

+

+ {address} +

@@ -643,95 +886,158 @@ function HomePage({ params }) { target="_blank" rel="noopener noreferrer" className={`text-lg hover:text-black hover:underline`} - style={{ marginRight: '2.5rem', fontSize: '1.25rem' }} + style={{ marginRight: "2.5rem", fontSize: "1.25rem" }} > Create ) : ( )}
-
- {activeSection === 'assets' && ( +
+ {activeSection === "assets" && ( <> -
+
{matchedNFTs?.map((nft, index) => ( ))}
-
- {Array.isArray(matchedWebxrs) && matchedWebxrs.map((nft, index) => ( - - ))} +
+ {Array.isArray(matchedWebxrs) && + matchedWebxrs.map((nft, index) => ( + + ))}
)} - {activeSection === 'create' && ( + {activeSection === "create" && ( <>
{instagram || x ? ( <> - {!showCreatorOptions && status !== 'pending' && status !== 'done' && ( - <> -
- Verified -

You have completed the verification process. Your profile is now visible on
the Users page. You can also now become a creator!

-
-
- - - - -
- - )} - - {showCreatorOptions && status !== 'pending' && status !== 'done' && ( -
-

You have not yet created any brands. Go to studio to get started.

-
- - - + {!showCreatorOptions && + status !== "pending" && + status !== "done" && ( + <> +
+ Verified +

+ You have completed the verification process. + Your profile is now visible on
the Users + page. You can also now become a creator! +

+
+
+ + + + +
+ + )} + + {showCreatorOptions && + status !== "pending" && + status !== "done" && ( +
+

+ You have not yet created any brands. Go to studio + to get started. +

+
+ + + +
-
- )} - {status === 'pending' && ( + )} + {status === "pending" && (

- Thank you for your interest in the MyriadFlow Elevate Program! We look forward to reviewing your application. Please keep checking your provided email address, and this page for further communication. Best of luck! + Thank you for your interest in the MyriadFlow + Elevate Program! We look forward to reviewing your + application. Please keep checking your provided + email address, and this page for further + communication. Best of luck!

)} - {status === 'done' && ( + {status === "done" && ( <> -
- Verified -

Congratulations! You have been approved to join our Elevate Program! -
We have credited your wallet with funds to claim your Basename (5+ characters for 1 year) and to launch your first collection.

-
- +
+ Verified +

+ Congratulations! You have been approved to join + our Elevate Program! +
+ We have credited your wallet with funds to claim + your Basename (5+ characters for 1 year) and to + launch your first collection.{" "} +

+
+
+ - - @@ -739,42 +1045,64 @@ function HomePage({ params }) { )} - {hoveredOption === 'premium' && ( + {hoveredOption === "premium" && (

Premium Brand

-

Select this option if you meet the criteria to be featured as a premium brand or creator on MyriadFlow's main Discover marketplace. Premium brands enjoy enhanced visibility and access to exclusive tools designed for established creators and brands.

+

+ Select this option if you meet the criteria to be + featured as a premium brand or creator on + MyriadFlow's main Discover marketplace. Premium + brands enjoy enhanced visibility and access to + exclusive tools designed for established creators + and brands. +

)} - {hoveredOption === 'elevate' && ( + {hoveredOption === "elevate" && (

Elevate Program

-

Choose this option if you are an emerging creator or grassroots brand seeking to leverage our platform's unique features.

-

You will benefit from sponsored Basenames and incur no upfront costs to launch your phygital NFTs and virtual brand ambassadors.

-

As your brand develops and gains traction, you'll have the opportunity to transition into the premium category and be showcased on our main page.

+

+ Choose this option if you are an emerging creator or + grassroots brand seeking to leverage our + platform's unique features. +

+

+ You will benefit from sponsored Basenames and incur + no upfront costs to launch your phygital NFTs and + virtual brand ambassadors. +

+

+ As your brand develops and gains traction, + you'll have the opportunity to transition into + the premium category and be showcased on our main + page. +

)} ) : (

Verification Required

-

Please link your Instagram or X account to create content.

+

+ Please link your Instagram or X account to create + content. +

)}
)} - - {activeSection !== 'assets' && activeSection !== 'create' && ( -
+ {activeSection !== "assets" && activeSection !== "create" && ( +
Coming Soon
)}
-
+
@@ -786,265 +1114,465 @@ function HomePage({ params }) {
-
Profile
-
+
-

{guestname || 'Your Name'}

+

{guestname || "Your Name"}

{owner ? ( -

Creator

+

+ Creator +

) : matchedNFTs.length > 0 ? ( -

Owner

+

+ Owner +

) : matchedWebxrs.length > 0 ? ( -

Supporter

+

+ Supporter +

) : ( -

Visitor

+

+ Visitor +

)} {guestinstagram || guestx ? ( <> - + ) : ( <> - + )}
-
-

+
+

Wallet Address: {walletAddress}

-
- - - +
+ +
-

{guestbio || "Short bio of the person here"}

+

+ {guestbio || "Short bio of the person here"} +

-
-
-
+
+
{guestwebsite && ( - - Website + + Website )} {guestx && ( - X + X )} {guestinstagram && ( - - Instagram + + Instagram )} {guestdiscord && ( - - Instagram + + Instagram )} {guestselectedSocialLink === "youtube" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "telegram" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "linkedin" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "whatsapp" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "google" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "tiktok" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "snapchat" && guestlink && ( - Instagram - + Instagram + )} {guestselectedSocialLink === "pinterest" && guestlink && ( - Instagram - + Instagram + )}
-
-
-

{'0 Followers'}

-

{'0 Following'}

-

Address

-

{walletAddress}

+
+
+

+ {"0 Followers"} +

+

+ {"0 Following"} +

+

+ Address +

+

+ {walletAddress} +

-
- {activeSection === 'assets' && ( +
+ {activeSection === "assets" && ( <> -
+
{matchedNFTs?.map((nft, index) => ( ))}
-
- {Array.isArray(matchedWebxrs) && matchedWebxrs.map((nft, index) => ( - - ))} +
+ {Array.isArray(matchedWebxrs) && + matchedWebxrs.map((nft, index) => ( + + ))}
)} - {activeSection !== 'assets' && activeSection !== 'create' && ( -
+ {activeSection !== "assets" && activeSection !== "create" && ( +
Coming Soon
)}
-
+
@@ -1053,13 +1581,13 @@ function HomePage({ params }) { } const popupStyle = { - backgroundColor: 'white', - border: '1px solid #ccc', - borderRadius: '5px', - padding: '10px', + backgroundColor: "white", + border: "1px solid #ccc", + borderRadius: "5px", + padding: "10px", zIndex: 1000, - width: '300px', - boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', + width: "300px", + boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", }; export default HomePage;