From d0558594108b60c1ac738795e2117e594f86c425 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Thu, 15 Aug 2024 14:05:05 +0100 Subject: [PATCH 01/16] kanji alignment --- packages/nextjs/pages/mint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/pages/mint.tsx b/packages/nextjs/pages/mint.tsx index 4a440b8..177f793 100644 --- a/packages/nextjs/pages/mint.tsx +++ b/packages/nextjs/pages/mint.tsx @@ -19,7 +19,7 @@ const MintPage: NextPage = () => {
-
+
From fa1ee79e27aa319fc7a72c7b8c5fc39162166b13 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Sat, 17 Aug 2024 19:49:55 +0100 Subject: [PATCH 02/16] card details changes --- .../nextjs/components/mecha/gallery/CardDetails.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/nextjs/components/mecha/gallery/CardDetails.tsx b/packages/nextjs/components/mecha/gallery/CardDetails.tsx index a3f30f4..aeb31b4 100644 --- a/packages/nextjs/components/mecha/gallery/CardDetails.tsx +++ b/packages/nextjs/components/mecha/gallery/CardDetails.tsx @@ -36,12 +36,12 @@ const CardDetails: FC = props => { window.open(url, "_blank"); }; return ( -
-
+
+

{props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}

-
+
{`NFT = props => { />
-
+

{props.tokenMetadata.name}

-

{props.tokenMetadata.description}

+

{props.tokenMetadata.description}

{props.tokenMetadata.attributes[0].value} card

Owner
From e25deacf6a0c57cd41d1228cdff2af9dcc8ce478 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Sat, 17 Aug 2024 22:22:02 +0100 Subject: [PATCH 03/16] card details changes --- packages/nextjs/components/mecha/gallery/CardDetails.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/nextjs/components/mecha/gallery/CardDetails.tsx b/packages/nextjs/components/mecha/gallery/CardDetails.tsx index aeb31b4..36a2696 100644 --- a/packages/nextjs/components/mecha/gallery/CardDetails.tsx +++ b/packages/nextjs/components/mecha/gallery/CardDetails.tsx @@ -38,10 +38,7 @@ const CardDetails: FC = props => { return (
-

- {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)} -

-
+
{`NFT = props => { />
-
-

{props.tokenMetadata.name}

+
+

{props.tokenMetadata.name} | {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}

{props.tokenMetadata.description}

{props.tokenMetadata.attributes[0].value} card

From 9a798191a228ed97bd9e5330cd656d9e6f9161c8 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Sat, 17 Aug 2024 22:44:01 +0100 Subject: [PATCH 04/16] new cards --- packages/nextjs/pages/latest.tsx | 94 ++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 packages/nextjs/pages/latest.tsx diff --git a/packages/nextjs/pages/latest.tsx b/packages/nextjs/pages/latest.tsx new file mode 100644 index 0000000..9263fa5 --- /dev/null +++ b/packages/nextjs/pages/latest.tsx @@ -0,0 +1,94 @@ +import { JsonRpcProvider } from 'ethers'; +import Image from 'next/image'; +import React, { useEffect, useState } from 'react'; +import { useAccount } from 'wagmi'; +import GalleryLayout from '~~/components/mecha/gallery/GalleryLayout'; +import { getContractInstance } from '~~/helpers/getContract'; +import { getTargetNetwork } from '~~/utils/scaffold-eth'; + +const chain = getTargetNetwork(); +const provider = new JsonRpcProvider(chain.rpcUrls.public.http[0]); +const contract = getContractInstance(provider); + +const Latest = () => { + const { address } = useAccount(); + const [lastThreeTokens, setLastThreeTokens] = useState([]); + const [svgData, setSvgData] = useState>(new Map()); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const fetchLastThreeTokens = async () => { + try { + if (!address) throw new Error("No address found"); + + const balance = Number(await contract.balanceOf(address)); + + const indices = [ + balance - 3 >= 0 ? balance - 3 : 0, + balance - 2 >= 0 ? balance - 2 : 0, + balance - 1 >= 0 ? balance - 1 : 0 + ]; + + const tokenIdsPromises = indices.map(index => contract.tokenOfOwnerByIndex(address, index)); + const tokenIds = await Promise.all(tokenIdsPromises); + + setLastThreeTokens(tokenIds.map(id => Number(id))); + + // Fetch SVG data for each token + const svgPromises = tokenIds.map(async (tokenId) => { + const svg = await contract.generateSVGofTokenById(tokenId.toString()); + return { tokenId: Number(tokenId), svgData: `data:image/svg+xml;base64,${btoa(svg)}` }; + }); + + const svgResults = await Promise.all(svgPromises); + const svgMap = new Map(svgResults.map(({ tokenId, svgData }) => [tokenId, svgData])); + setSvgData(svgMap); + + setLoading(false); + } catch (error) { + console.error("Error fetching token IDs or SVGs:", error); + setLoading(false); + } + }; + + fetchLastThreeTokens(); + }, [address]); + + return ( + +
+ {loading ? ( + + ) : ( +
+

Awesome! Check out the latest additions to your collection!

+
+ {lastThreeTokens.length > 0 ? ( + lastThreeTokens.map((tokenId) => ( +
+ {/*

Token ID

*/} + {svgData.has(tokenId) ? ( + {`Token + ) : ( + + )} +
+ )) + ) : ( +

No tokens available

+ )} +
+
+ )} +
+ + ); +}; + +export default Latest; From f6c8b4aa323f80bba851c808c8f4f55da4744639 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Sun, 18 Aug 2024 20:17:01 +0100 Subject: [PATCH 05/16] re-place element --- packages/nextjs/pages/mint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/pages/mint.tsx b/packages/nextjs/pages/mint.tsx index 177f793..8abadfc 100644 --- a/packages/nextjs/pages/mint.tsx +++ b/packages/nextjs/pages/mint.tsx @@ -19,7 +19,7 @@ const MintPage: NextPage = () => {
-
+
From 7db5aa7bf70700f5069379b42171f819d2ac920f Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Sun, 18 Aug 2024 22:12:29 +0100 Subject: [PATCH 06/16] card tweaks --- .../components/mecha/gallery/CardDetails.tsx | 60 +++++++++++++++---- 1 file changed, 48 insertions(+), 12 deletions(-) diff --git a/packages/nextjs/components/mecha/gallery/CardDetails.tsx b/packages/nextjs/components/mecha/gallery/CardDetails.tsx index 36a2696..16ace99 100644 --- a/packages/nextjs/components/mecha/gallery/CardDetails.tsx +++ b/packages/nextjs/components/mecha/gallery/CardDetails.tsx @@ -1,6 +1,7 @@ -import { FC } from "react"; +import { FC, useEffect, useState } from "react"; import Image from "next/image"; import { Address } from "../../scaffold-eth"; +import { motion } from "framer-motion"; import WarpcastIcon from "../buttons/WarpcastIcon"; import { SocialIcon } from "react-social-icons"; import { useDeployedContractInfo } from "~~/hooks/scaffold-eth"; @@ -16,6 +17,33 @@ interface CardDetailsProps { const CardDetails: FC = props => { const { data: onchainMechaData } = useDeployedContractInfo("OnchainMecha"); + + + + + const [rotateX, setRotateX] = useState(0); + const [rotateY, setRotateY] = useState(0); + + const handleMouseMove = (event: MouseEvent) => { + const { clientX, clientY } = event; + const { innerWidth, innerHeight } = window; + const x = clientX / innerWidth - 0.5; + const y = clientY / innerHeight - 0.5; + + setRotateY(x * 50); + setRotateX(-y * 50); + }; + + useEffect(() => { + window.addEventListener("mousemove", handleMouseMove); + return () => window.removeEventListener("mousemove", handleMouseMove); + }, []); + + + + + + const shareUrl = window.location.href; const platforms = [ { name: "X", url: getShareUrl("x", props.tokenMetadata.name, shareUrl) }, @@ -38,17 +66,25 @@ const CardDetails: FC = props => { return (
-
- {`NFT -
+ + {`NFT +

{props.tokenMetadata.name} | {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}

From 4f5af669f5335036f753f08432960bbe49a7faa6 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Mon, 19 Aug 2024 22:24:55 +0100 Subject: [PATCH 07/16] card info --- packages/nextjs/helpers/getTokenDetails.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/nextjs/helpers/getTokenDetails.ts b/packages/nextjs/helpers/getTokenDetails.ts index 2c7555c..85673bf 100644 --- a/packages/nextjs/helpers/getTokenDetails.ts +++ b/packages/nextjs/helpers/getTokenDetails.ts @@ -14,10 +14,7 @@ export const getTokenDetails = async (tokenId: string, provider: ContractRunner) const json = atob(tokenURI.split(",")[1]); const tokenMetadata = JSON.parse(json); - // Fetch mecha type - // const mechaType = (await contract.getMechaType(tokenId)).toString(); - // console.log(`Mecha Type: ${mechaType}`); - + // console.log(tokenMetadata) return { tokenMetadata, // mechaType, From 4b46cab5301638c404d979bff8fe378360e6b3d3 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Thu, 22 Aug 2024 22:56:40 +0100 Subject: [PATCH 08/16] fix:load more --- packages/nextjs/pages/api/token-ids/[address].ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/nextjs/pages/api/token-ids/[address].ts b/packages/nextjs/pages/api/token-ids/[address].ts index 0d3f7df..edc5b39 100644 --- a/packages/nextjs/pages/api/token-ids/[address].ts +++ b/packages/nextjs/pages/api/token-ids/[address].ts @@ -10,6 +10,7 @@ export default async function handler(req: any, res: any) { const contract = getContractInstance(provider); const { address, batchIndex } = req.query; + if (!address) { return res.status(400).json({ error: "User address is required" }); } @@ -20,6 +21,7 @@ export default async function handler(req: any, res: any) { const end = totalTokens - batchIndex * BATCH_SIZE; const start = Math.max(end - BATCH_SIZE, 0); + if (start < 0) { return res.status(200).json([]); } From b369ce4028431456a87f37172268fba9006ae35d Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Thu, 22 Aug 2024 23:01:50 +0100 Subject: [PATCH 09/16] update gallery --- .../components/mecha/gallery/GalleryComponent.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/nextjs/components/mecha/gallery/GalleryComponent.tsx b/packages/nextjs/components/mecha/gallery/GalleryComponent.tsx index 22881a1..e50e559 100644 --- a/packages/nextjs/components/mecha/gallery/GalleryComponent.tsx +++ b/packages/nextjs/components/mecha/gallery/GalleryComponent.tsx @@ -1,8 +1,7 @@ -import { FC, useEffect } from "react"; +import { FC } from "react"; import dynamic from "next/dynamic"; import Image from "next/image"; import Link from "next/link"; -import { useRouter } from "next/router"; import { useAccount } from "wagmi"; import { useTokenContext } from "~~/context/TokenContext"; import { placeholder } from "~~/public/assets/placeholder"; @@ -14,14 +13,6 @@ const GalleryComponent: FC = () => { const { tokenIds, userBalance, svgData, fetchMoreTokenIds, isFetchingNextPage, hasNextPage, status } = useTokenContext(); - const router = useRouter(); - - useEffect(() => { - if (router.pathname === "/gallery") { - fetchMoreTokenIds(); - } - }, [router.pathname]); - if (!isConnected || !address) { return (
From 229f24651128903e6a9399cfa474b2f960ac2750 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Fri, 23 Aug 2024 08:30:44 +0100 Subject: [PATCH 10/16] card updates --- .../components/mecha/gallery/CardDetails.tsx | 64 +++++++++---------- 1 file changed, 29 insertions(+), 35 deletions(-) diff --git a/packages/nextjs/components/mecha/gallery/CardDetails.tsx b/packages/nextjs/components/mecha/gallery/CardDetails.tsx index 16ace99..61d5112 100644 --- a/packages/nextjs/components/mecha/gallery/CardDetails.tsx +++ b/packages/nextjs/components/mecha/gallery/CardDetails.tsx @@ -17,32 +17,23 @@ interface CardDetailsProps { const CardDetails: FC = props => { const { data: onchainMechaData } = useDeployedContractInfo("OnchainMecha"); - - - - const [rotateX, setRotateX] = useState(0); const [rotateY, setRotateY] = useState(0); - const handleMouseMove = (event: MouseEvent) => { - const { clientX, clientY } = event; - const { innerWidth, innerHeight } = window; - const x = clientX / innerWidth - 0.5; - const y = clientY / innerHeight - 0.5; + const handleMouseMove = (event: React.MouseEvent) => { + const { clientX, clientY, currentTarget } = event; + const { left, top, width, height } = currentTarget.getBoundingClientRect(); + const x = (clientX - left) / width - 0.5; + const y = (clientY - top) / height - 0.5; setRotateY(x * 50); setRotateX(-y * 50); }; - useEffect(() => { - window.addEventListener("mousemove", handleMouseMove); - return () => window.removeEventListener("mousemove", handleMouseMove); - }, []); - - - - - + const handleMouseLeave = () => { + setRotateX(0); + setRotateY(0); + }; const shareUrl = window.location.href; const platforms = [ @@ -67,24 +58,27 @@ const CardDetails: FC = props => {
- {`NFT + className="flex w-full mt-10 h-full lg:w-[60%]" + style={{ + transformStyle: "preserve-3d", + rotateX: rotateX, + rotateY: rotateY, + transition: "transform 0.2s", + }} + onMouseMove={handleMouseMove} + onMouseLeave={handleMouseLeave} + > + {`NFT +

{props.tokenMetadata.name} | {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}

From 2d627708cbcc78d1f3e80e20408fd2c554c9c403 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Fri, 23 Aug 2024 20:33:26 +0100 Subject: [PATCH 11/16] card changes --- packages/nextjs/components/mecha/gallery/CardDetails.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/nextjs/components/mecha/gallery/CardDetails.tsx b/packages/nextjs/components/mecha/gallery/CardDetails.tsx index 61d5112..bcc046a 100644 --- a/packages/nextjs/components/mecha/gallery/CardDetails.tsx +++ b/packages/nextjs/components/mecha/gallery/CardDetails.tsx @@ -56,7 +56,7 @@ const CardDetails: FC = props => { }; return (
-
+
= props => {
-
+

{props.tokenMetadata.name} | {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}

{props.tokenMetadata.description}

{props.tokenMetadata.attributes[0].value} card

@@ -88,7 +88,6 @@ const CardDetails: FC = props => { Owner
-

Share

{platforms.map(platform => ( handleIconClick(event, platform.url)}> From 472ddb50bba5da42919c43537fc1316e57611c23 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Fri, 23 Aug 2024 20:39:56 +0100 Subject: [PATCH 12/16] mint updates --- packages/nextjs/components/mecha/MintComponent.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/nextjs/components/mecha/MintComponent.tsx b/packages/nextjs/components/mecha/MintComponent.tsx index c4e4e81..a2e1369 100644 --- a/packages/nextjs/components/mecha/MintComponent.tsx +++ b/packages/nextjs/components/mecha/MintComponent.tsx @@ -25,7 +25,8 @@ const MintComponent: FC = () => {
- {minting &&

Minting in progress...

} + {minting &&

Minting in progress...

} + {isSuccess &&

Pack minted! Redirecting...

} {isError &&

An error occurred. Please try again.

}
+
); From 2d4d1a5d65119176abbf888ae0a5e34d9204fa8c Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Fri, 23 Aug 2024 21:28:39 +0100 Subject: [PATCH 14/16] Aku card found --- packages/nextjs/components/Footer.tsx | 17 +++++++++++++++++ packages/nextjs/hooks/usePack.ts | 6 ------ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx index 15cc32a..4001fb2 100644 --- a/packages/nextjs/components/Footer.tsx +++ b/packages/nextjs/components/Footer.tsx @@ -1,6 +1,7 @@ import dynamic from "next/dynamic"; import { useRouter } from "next/router"; import { footerImage } from "./mecha/base64Elements"; +import { useScaffoldContractRead } from "~~/hooks/scaffold-eth"; // import Fifi from "./mecha/home/Fifi"; @@ -14,6 +15,15 @@ export const Footer = () => { const isHome = router.pathname === "/"; const isStory = router.pathname === "/story"; + + + + const { data: akuShardsFound } = useScaffoldContractRead({ + contractName: "OnchainMecha", + functionName: "akuShardsFound" + }); + + return (
{
)} +
+ {akuShardsFound !== undefined ? ( +

{Number(akuShardsFound)} / 7 Aku cards found!

+ ) : ( +

+ )} +
); }; diff --git a/packages/nextjs/hooks/usePack.ts b/packages/nextjs/hooks/usePack.ts index 124f6fe..65f3ece 100644 --- a/packages/nextjs/hooks/usePack.ts +++ b/packages/nextjs/hooks/usePack.ts @@ -7,12 +7,6 @@ export const usePack = (tokenId: string | string[] | undefined) => { const [ownerAddr, setOwnerAddr] = useState(""); const [error, setError] = useState(null); - // const { data: tokenBalance } = useScaffoldContractRead({ - // contractName: "OnchainMechaPacks", - // functionName: "balanceOf", - // args: [address], - // }); - // Fetch pack data const { data: packData, error: packError } = useScaffoldContractRead({ contractName: "OnchainMechaPacks", From 360a41c6ab670d5c372bf19dfea46aa8a6994fc8 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Tue, 27 Aug 2024 11:26:20 +0100 Subject: [PATCH 15/16] mint update --- packages/nextjs/components/mecha/MintComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nextjs/components/mecha/MintComponent.tsx b/packages/nextjs/components/mecha/MintComponent.tsx index a2e1369..80e4b3e 100644 --- a/packages/nextjs/components/mecha/MintComponent.tsx +++ b/packages/nextjs/components/mecha/MintComponent.tsx @@ -18,7 +18,7 @@ const MintComponent: FC = () => { if (isSuccess && tokenId) { router.push(`/gallery/pack/${tokenId}`); } - }, [isSuccess, tokenId, router]); + }, [tokenId]); return ( <> From adb6fe5d6b3327cca1ed4a4294c89faa471d1869 Mon Sep 17 00:00:00 2001 From: 0xChijioke Date: Tue, 27 Aug 2024 11:27:17 +0100 Subject: [PATCH 16/16] fix: get the latest pack --- packages/nextjs/hooks/useMintPack.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/nextjs/hooks/useMintPack.ts b/packages/nextjs/hooks/useMintPack.ts index fb9f9e3..1ba230d 100644 --- a/packages/nextjs/hooks/useMintPack.ts +++ b/packages/nextjs/hooks/useMintPack.ts @@ -13,12 +13,18 @@ export const useMintPack = () => { }, }); + const { data: balance } = useScaffoldContractRead({ + contractName: "OnchainMechaPacks", + functionName: "balanceOf", + args: [address], + }); + const { data: tokenId } = useScaffoldContractRead({ contractName: "OnchainMechaPacks", functionName: "tokenOfOwnerByIndex", - args: [address, 0n], + args: [address, balance && balance - 1n], }); - + return { minting: isLoading || isMining, isError,