Merge pull request #8 from 0xChijioke/main

Update

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 (
     <div
       className="fixed bottom-0 z-10 w-full h-[5%] lg:h-24 bg-center bg-cover"
@@ -29,6 +39,13 @@ export const Footer = () => {
           <Panda />
         </div>
       )}
+      <div className="text-white text-center font-semibold text-lg">
+        {akuShardsFound !== undefined ? (
+          <p>{Number(akuShardsFound)} / 7 Aku cards found!</p>
+        ) : (
+          <p></p>
+        )}
+      </div>
     </div>
   );
 };

packages/nextjs/components/mecha/MintComponent.tsx

@@ -18,14 +18,15 @@ const MintComponent: FC = () => {
     if (isSuccess && tokenId) {
       router.push(`/gallery/pack/${tokenId}`);
     }
-  }, [isSuccess, tokenId, router]);
+  }, [tokenId]);
 
   return (
     <>
       <div className="absolute top-[42%]">
         <div className="flex flex-col w-full h-full justify-center items-center">
           <div className="w-full h-4 text-center">
-            {minting && <p>Minting in progress...</p>}
+            {minting && <p className="animate-pulse">Minting in progress...</p>}
+            {isSuccess && <p className="animate-pulse">Pack minted! Redirecting... </p>}
             {isError && <p>An error occurred. Please try again.</p>}
           </div>
           <button

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,24 @@ interface CardDetailsProps {
 const CardDetails: FC<CardDetailsProps> = props => {
   const { data: onchainMechaData } = useDeployedContractInfo("OnchainMecha");
 
+  const [rotateX, setRotateX] = useState(0);
+  const [rotateY, setRotateY] = useState(0);
+
+  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);
+  };
+
+  const handleMouseLeave = () => {
+    setRotateX(0);
+    setRotateY(0);
+  };
+
   const shareUrl = window.location.href;
   const platforms = [
     { name: "X", url: getShareUrl("x", props.tokenMetadata.name, shareUrl) },
@@ -36,12 +55,19 @@ const CardDetails: FC<CardDetailsProps> = props => {
     window.open(url, "_blank");
   };
   return (
-    <div className="flex justify-center flex-col lg:pt-[4%] h-fit my-[15%] lg:my-0 lg:flex-row items-center w-full lg:max-h-screen">
-      <div className="pt-10 lg:pt-20 px-10 items-center">
-        <h1 className="text-2xl font-bold mb-4">
-          {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}
-        </h1>
-        <div className="flex w-full h-full lg:w-[60%] lg:h-[50%]">
+    <div className="flex justify-center w-full flex-col lg:pt-[4%] h-fit my-[15%] lg:my-0 lg:flex-row items-center lg:max-h-screen">
+      <div className="pt-10 lg:pt-8 px-4 items-center">
+        <motion.div
+          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}
+        >
           <Image
             alt={`NFT ${props.tokenId}`}
             src={props.tokenMetadata.image}
@@ -51,17 +77,17 @@ const CardDetails: FC<CardDetailsProps> = props => {
             height={800}
             placeholder={"blur"}
           />
-        </div>
+        </motion.div>
+
       </div>
-      <div className="flex flex-col gap-y-4 mb-8 lg:mt-20 p-4 lg:p-8 text-xl space-y-2">
-        <p className="mb-2">{props.tokenMetadata.name}</p>
-        <p className="mb-2 lg:max-w-[40%]">{props.tokenMetadata.description}</p>
+      <div className="flex flex-col gap-y-4 text-left mb-8 lg:w-1/2 lg:mt-10 p-4 lg:p-8 text-xl space-y-2">
+        <p className="mb-2">{props.tokenMetadata.name} | {props.tokenId.slice(0, 4)}...{props.tokenId.slice(-4)}</p>
+        <p className="mb-2 lg:m">{props.tokenMetadata.description}</p>
         <p className="mb-2">{props.tokenMetadata.attributes[0].value} card</p>
         <div className="mb-2 flex gap-x-2 whitespace-nowrap">
           Owner <Address address={props.tokenMetadata.owner} />
         </div>
         <div className="flex flex-col">
-          <p className="">Share</p>
           <div className="gap-x-4 flex">
             {platforms.map(platform => (
               <a key={platform.name} href={platform.url} onClick={event => handleIconClick(event, platform.url)}>

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 (
       <div className="fixed inset-0 flex justify-center items-center bg-opacity-80 text-white">

packages/nextjs/context/TokenContext.tsx

@@ -36,9 +36,9 @@ export const TokenProvider: React.FC<{ children: ReactNode }> = ({ children }) =
 
   useEffect(() => {
     if (address && tokenBalance) {
-      // console.log(tokenBalance);
       setUserBalance(tokenBalance.toString());
     }
+
     if (Number(tokenBalance) === 0) setUserBalance("0");
   }, [address, tokenBalance]);
 
@@ -67,12 +67,14 @@ export const TokenProvider: React.FC<{ children: ReactNode }> = ({ children }) =
     queryFn: fetchTokenIds,
     enabled: !!address,
     initialPageParam: 0,
-    getNextPageParam: pages => {
-      const totalFetchedTokens = pages.flat().length;
-      return totalFetchedTokens < parseInt(userBalance) ? pages.length : undefined;
-    },
-  });
-  // console.log(hasNextPage, status)
+    getNextPageParam: (lastPage, allPages) => {
+    const totalFetchedTokens = allPages.flat().length;
+    const totalTokens = parseInt(userBalance);
+
+    const nextPageIndex = allPages.length;
+    return totalFetchedTokens < totalTokens ? nextPageIndex : undefined;
+  },
+});
 
   const fetchSVGs = async (newTokenIds: string[]) => {
     const newSvgData: { [key: string]: string } = {};

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,

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,

packages/nextjs/hooks/usePack.ts

@@ -7,12 +7,6 @@ export const usePack = (tokenId: string | string[] | undefined) => {
   const [ownerAddr, setOwnerAddr] = useState<string>("");
   const [error, setError] = useState<string | null>(null);
 
-  //   const { data: tokenBalance } = useScaffoldContractRead({
-  //     contractName: "OnchainMechaPacks",
-  //     functionName: "balanceOf",
-  //     args: [address],
-  //   });
-
   // Fetch pack data
   const { data: packData, error: packError } = useScaffoldContractRead({
     contractName: "OnchainMechaPacks",

packages/nextjs/pages/_app.tsx

@@ -16,7 +16,12 @@ import { TokenProvider } from "~~/context/TokenContext";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 import "~~/styles/globals.css";
+import { Inter, Roboto } from 'next/font/google'
 
+const inter = Roboto({
+  subsets: ['latin'],
+  weight: "400"
+})
 const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
   const queryClient = new QueryClient({
@@ -26,7 +31,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
       },
     },
   });
-
+ 
   const { isDarkMode } = useDarkMode();
 
   useEffect(() => {
@@ -64,7 +69,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
         <QueryClientProvider client={queryClient}>
           <div className="flex flex-col bg-black min-h-screen">
             <Header />
-            <main className="relative flex flex-col flex-1">{wrapWithProviders(<Component {...pageProps} />)}</main>
+            <main className={`relative ${inter.className} flex flex-col flex-1`}>{wrapWithProviders(<Component {...pageProps} />)}</main>
             <Footer />
           </div>
           <Toaster />

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([]);
     }

packages/nextjs/pages/gallery/pack/[tokenId].tsx

@@ -57,8 +57,6 @@ const Pack: NextPage = () => {
     walletClient,
   });
 
-  console.log(packsContract);
-
   useScaffoldEventSubscriber({
     contractName: "OnchainMecha",
     eventName: "Transfer",
@@ -88,19 +86,17 @@ const Pack: NextPage = () => {
       setOpening,
     );
 
-    console.log(tx, opened, opening);
   };
 
   useEffect(() => {
-    console.log("Opened state changed", opened);
     if (opened) {
-      router.push("/gallery");
+      router.push("/latest");
     }
   }, [opened, router]);
 
   if (error) {
     return (
-      <GalleryLayout title={`Pack | Onchain Mecha`} description={`Pack details for token ${tokenId}`}>
+      <GalleryLayout title={` 🃏 Pack | Onchain Mecha`} description={`Pack details for token ${tokenId}`}>
         <div className="flex flex-col items-center justify-center min-h-screen py-8">
           <p className="text-red-500">Error: {error}</p>
         </div>