Merge pull request #6 from 0xChijioke/main

Responsive web app

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-# yarn lint-staged --verbose
+yarn lint-staged --verbose

packages/nextjs/components/Footer.tsx

@@ -16,7 +16,7 @@ export const Footer = () => {
 
   return (
     <div
-      className="fixed bottom-0 z-10 w-full h-24 bg-center bg-cover"
+      className="fixed bottom-0 z-10 w-full h-[5%] lg:h-24 bg-center bg-cover"
       style={{
         backgroundImage: isStory ? "none" : footerImage,
         backgroundColor: isStory ? "transparent" : "initial",
@@ -25,7 +25,7 @@ export const Footer = () => {
     >
       {isHome && <div className="fixed bottom-0 md:hidden left-4 w-[40%]">{/* <Fifi /> */}</div>}
       {router.pathname.startsWith("/gallery") && (
-        <div className="fixed bottom-4 lg:bottom-0 md:w-[20%] w-[30%] lg:w-[10%] right-2">
+        <div className="fixed bottom-4 lg:bottom-0 md:w-[20%] w-[30%] lg:w-[8%] right-2">
           <Panda />
         </div>
       )}

packages/nextjs/components/Header.tsx

@@ -20,28 +20,27 @@ export const Header = () => {
     useCallback(() => setIsDrawerOpen(false), []),
   );
   const isStory = router.pathname === "/story";
+  const isHome = router.pathname === "/";
 
   return (
     <div
-      className={`fixed flex z-20 justify-end w-full h-44 bg-right bg-cover ${
+      className={`fixed flex z-20 justify-end w-full h-[13%] lg:h-44 bg-right bg-cover ${
         isStory ? "bg-transparent justify-end" : " md:justify-between"
       }`}
       style={{ backgroundImage: isStory ? "none" : headerImage, backgroundRepeat: "no-repeat" }}
     >
       {!isStory && (
-        <div className="md:flex pl-2 hidden md:pl-8 xl:space-x-24 w-[42%] xl:w-[60%]">
+        <div className={`md:flex pl-2 hidden md:pl-8 xl:space-x-24 w-[42%] ${!isHome ? "xl:w-[48%]" : "xl:w-[60%]"} `}>
           <MechaLogo />
-          <div className="hidden xl:flex">
-            <Fifi />
-          </div>
+          <div className="hidden xl:flex">{isHome && <Fifi />}</div>
         </div>
       )}
       <div className="relative" ref={burgerMenuRef}>
-        <div className="flex pt-20 md:pt-14">
+        <div className="flex pt-10 md:pt-14">
           {!isStory && <RainbowKitCustomConnectButton />}
           <motion.div
             onClick={() => setIsDrawerOpen(prevState => !prevState)}
-            className="cursor-pointer w-16 mr-6 md:w-24"
+            className="cursor-pointer w-16 mr-2 lg:mr-6 md:w-24"
             initial={false}
             animate={isDrawerOpen ? { rotate: 180, color: "#FF5722" } : { rotate: 0, color: "#000" }}
             transition={{ duration: 0.5, ease: "easeInOut" }}

packages/nextjs/components/mecha/About.tsx

@@ -12,10 +12,10 @@ const Squido = dynamic(() => import("./about/Squido"), { ssr: false });
 
 const About = () => (
   <div className="bg-cover relative z-10 w-full h-full bg-center" style={{ backgroundImage: aboutAku }}>
-    <div className="lg:w-[30%] md:w-[40%] w-[50%] h-[50%] absolute left-0 top-[20%]">
+    <div className="lg:w-[30%] md:w-[40%] w-[40%] h-[50%] absolute left-0 top-[12%]">
       <Fewal />
     </div>
-    <div className="lg:w-[30%] md:w-[40%] w-[50%] h-[50%] absolute -bottom-[20%] lg:left-[10%]">
+    <div className="lg:w-[30%] md:w-[40%] w-[40%] h-[50%] absolute -bottom-[20%] lg:left-[10%]">
       <Birdy />
     </div>
     <div className="lg:w-[20%] w-[50%] md:w-[40%] h-[50%] absolute bottom-4 left-0">
@@ -30,10 +30,10 @@ const About = () => (
     <div className="lg:w-[40%] w-[70%] md:w-[40%] h-[50%] absolute top-[20%] md:top-[30%] lg:top-[20%] -right-8">
       <Samurai />
     </div>
-    <div className="md:w-[10%] w-[30%] items-center content-center h-[50%] absolute -bottom-[10%] right-2 md:right-[30%] lg:right-[40%]">
+    <div className="md:w-[10%] w-[30%] items-center content-center h-[50%] absolute -bottom-[18%] right-2 md:right-[30%] lg:right-[40%]">
       <Loogie />
     </div>
-    <div className="lg:w-[34%] w-[90%] md:w-[40%] items-center content-center h-[50%] absolute -bottom-10 md:-bottom-[10%] lg:bottom-0 left-[10%] md:left-[28%]">
+    <div className="lg:w-[34%] w-[80%] md:w-[40%] items-center content-center h-[50%] absolute -bottom-[15%] md:-bottom-[10%] lg:bottom-0 left-[10%] md:left-[28%]">
       <Squido />
     </div>
   </div>

packages/nextjs/components/mecha/Team.tsx

@@ -11,7 +11,7 @@ const Team = () => {
       style={{ backgroundImage: teamImage }}
     >
       {/* <StarBurst className="flex justify-center items-center" /> */}
-      <div className="absolute space-y-20 lg:space-y-auto top-[28%] md:top-[30%] justify-center lg:gap-x-[20%] w-[50%] md:w-[34%] lg:w-[70%] lg:flex h-[90%] lg:h-full lg:top-[10%]">
+      <div className="absolute top-[28%] space-y-2 lg:space-y-auto md:top-[30%] justify-center lg:gap-x-[20%] w-[50%] md:w-[34%] lg:w-[70%] lg:flex h-[90%] lg:h-full lg:top-[10%]">
         <TopKanji />
         <BottomKanji />
       </div>
@@ -21,7 +21,7 @@ const Team = () => {
       </div>
       <div className="absolute lg:right-0 -right-8 top-[14%] lg:top-auto w-[65%] lg:my-[3%] h-full lg:w-[30%]">
         <Image alt="Elliot" fill src={Elliot} />
-      </div>
+      </div> 
       <div className="absolute md:-bottom-[30%] -left-[10%] -bottom-60 lg:bottom-auto lg:left-0 h-full lg:my-[3%] w-[70%] md:w-[56%] lg:w-[35%]">
         <Image alt="Chijioke" fill src={Chijioke} />
       </div>

packages/nextjs/components/mecha/CardDetails.tsx → packages/nextjs/components/mecha/gallery/CardDetails.tsx

@@ -1,8 +1,9 @@
 import { FC } from "react";
 import Image from "next/image";
-import { Address } from "../scaffold-eth";
-import WarpcastIcon from "./buttons/WarpcastIcon";
+import { Address } from "../../scaffold-eth";
+import WarpcastIcon from "../buttons/WarpcastIcon";
 import { SocialIcon } from "react-social-icons";
+import { useDeployedContractInfo } from "~~/hooks/scaffold-eth";
 import { placeholder } from "~~/public/assets/placeholder";
 import { getShareUrl } from "~~/utils/scaffold-eth/share";
 
@@ -13,8 +14,9 @@ interface CardDetailsProps {
 }
 
 const CardDetails: FC<CardDetailsProps> = props => {
-  const shareUrl = window.location.href;
+  const { data: onchainMechaData } = useDeployedContractInfo("OnchainMecha");
 
+  const shareUrl = window.location.href;
   const platforms = [
     { name: "X", url: getShareUrl("x", props.tokenMetadata.name, shareUrl) },
     { name: "Telegram", url: getShareUrl("telegram", props.tokenMetadata.name, shareUrl) },
@@ -25,10 +27,11 @@ const CardDetails: FC<CardDetailsProps> = props => {
   const viewPlatforms = [
     {
       name: "OpenSea",
-      url: `https://opensea.io/assets/base/0xd130edbc5dafb8fe72a65a083f7b9c10c2cea96e/${props.tokenId}`,
+      url: `https://opensea.io/assets/base/${onchainMechaData?.address}/${props.tokenId}`,
     },
   ];
 
+  // console.log(props.tokenMetadata)
   const handleIconClick = (event: React.MouseEvent, url: string) => {
     event.preventDefault();
     window.open(url, "_blank");
@@ -52,12 +55,8 @@ const CardDetails: FC<CardDetailsProps> = props => {
         </div>
       </div>
       <div className="flex flex-col gap-y-4 mb-8 p-8 text-xl space-y-2">
-        <p className="mb-2">
-          {props.tokenMetadata.name.slice(0, 24)}...{props.tokenId.slice(-4)}
-        </p>
-        <p className="mb-2">
-          {props.tokenMetadata.description.slice(0, 32)}...{props.tokenId.slice(-4)}
-        </p>
+        <p className="mb-2">{props.tokenMetadata.name}</p>
+        <p className="mb-2">{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} />

packages/nextjs/components/mecha/gallery/Frame.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+const Frame = (props: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>) => (
+  <svg height="auto" viewBox="0 0 2040 2584" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M1942.51 110.143H100.078V2481.37H1942.51z"
+      stroke="#00CCC0"
+      strokeWidth={49.479}
+      strokeMiterlimit={1.5}
+      strokeLinecap="square"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M2015.14 210.08H24.86v2188.71h1990.28z"
+      stroke="#00CCC0"
+      strokeWidth={49.663}
+      strokeMiterlimit={1.5}
+      strokeLinecap="square"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M1865.17 25.213H177.414V2558.8H1865.17z"
+      stroke="#00CCC0"
+      strokeWidth={48.697}
+      strokeMiterlimit={1.5}
+      strokeLinecap="square"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+export default Frame;

packages/nextjs/components/mecha/gallery/GalleryComponent.tsx

@@ -1,7 +1,9 @@
-import { FC } from "react";
+import { FC, useEffect } from "react";
 import dynamic from "next/dynamic";
 import Image from "next/image";
 import Link from "next/link";
+import { useRouter } from "next/router";
+import Frame from "./Frame";
 import { useAccount } from "wagmi";
 import { useTokenContext } from "~~/context/TokenContext";
 import { placeholder } from "~~/public/assets/placeholder";
@@ -13,6 +15,14 @@ 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">
@@ -21,9 +31,10 @@ const GalleryComponent: FC = () => {
     );
   }
 
-  if (status === "pending") {
+  console.log(status);
+  if (status === "loading") {
     return (
-      <div className="fixed inset-0 flex justify-center items-center bg-opacity-80 text-white">
+      <div className="fixed inset-0 flex justify-center z-10 items-center bg-opacity-80 text-white">
         <span className="loading loading-spinner loading-lg"></span>
       </div>
     );
@@ -45,21 +56,24 @@ const GalleryComponent: FC = () => {
       <div className="fixed top-[24%] opacity-60 md:opacity-auto z-10 lg:top-[20%] font-bold text-xl left-4">
         {userBalance} Cards
       </div>
-      <div className="grid lg:grid-cols-3 lg:w-[80%] mx-auto items-center pb-4 min-h-full grid-cols-1 gap-x-0 lg:gap-1 gap-4">
+      <div className="grid lg:grid-cols-3 lg:w-[80%] mx-auto items-center pb-4 min-h-full grid-cols-1 gap-x-0 lg:gap-y-20 gap-4">
         {tokenIds &&
           tokenIds.map((tokenId: any) => (
             <Link href={{ pathname: `/gallery/card/${tokenId}` }} key={tokenId}>
               <div className="flex justify-center rounded-xl w-full lg:w-[88%] shadow-lg p-2 m-auto h-auto transform transition-transform duration-300 hover:scale-105">
                 {svgData[tokenId] ? (
-                  <Image
-                    alt={`NFT ${tokenId}`}
-                    src={svgData[tokenId]}
-                    blurDataURL={placeholder}
-                    className="rounded-xl"
-                    width={400}
-                    height={600}
-                    placeholder="blur"
-                  />
+                  <>
+                    <Frame className="absolute inset-0" />
+                    <Image
+                      alt={`NFT ${tokenId}`}
+                      src={svgData[tokenId]}
+                      blurDataURL={placeholder}
+                      className="lg:mt-14 "
+                      width={350}
+                      height={400}
+                      placeholder="blur"
+                    />
+                  </>
                 ) : (
                   <div className="w-96 h-96 bg-slate-100 opacity-25 animate-pulse rounded-xl"></div>
                 )}

packages/nextjs/components/mecha/Home.tsx → packages/nextjs/components/mecha/home/Home.tsx

@@ -1,13 +1,13 @@
 import dynamic from "next/dynamic";
 import Image from "next/image";
-import { aku } from "./base64Elements";
+import { aku } from "../base64Elements";
 import { motion } from "framer-motion";
 
-const Gunner = dynamic(() => import("./home/Gunner"), { ssr: false });
-const MechaKanji = dynamic(() => import("./home/MechaKanji"), { ssr: false });
-const OnchainKanji = dynamic(() => import("./home/OnchainKanji"), { ssr: false });
-const Samurai = dynamic(() => import("./home/Samurai"), { ssr: false });
-const Squido = dynamic(() => import("./home/Squido"), { ssr: false });
+const Gunner = dynamic(() => import("./Gunner"), { ssr: false });
+const MechaKanji = dynamic(() => import("./MechaKanji"), { ssr: false });
+const OnchainKanji = dynamic(() => import("./OnchainKanji"), { ssr: false });
+const Samurai = dynamic(() => import("./Samurai"), { ssr: false });
+const Squido = dynamic(() => import("./Squido"), { ssr: false });
 
 const Home = () => (
   <div className="relative w-screen" style={{ height: "100vh" }}>
@@ -17,7 +17,7 @@ const Home = () => (
 
     <div className="relative flex h-full w-full items-center justify-center">
       <motion.div
-        className="absolute lg:left-[16%] md:left-[8%] lg:top-[30%] md:top-[40%] top-[22%] flex items-center justify-center w-[40%] md:w-[20%]"
+        className="absolute lg:left-[16%] md:left-[8%] lg:top-[30%] md:top-[40%] top-[15%] flex items-center justify-center w-[42%] md:w-[20%]"
         initial={{ y: -100, opacity: 0 }}
         whileInView={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, type: "spring", stiffness: 100 }}
@@ -33,23 +33,23 @@ const Home = () => (
         <MechaKanji />
       </motion.div>
       <motion.div
-        className="absolute lg:left-[14%] md:-left-[30%] md:-top-[2%] lg:w-[42%] w-[90%] lg:bottom-[2%] lg:top-auto -left-24 top-[12%]"
+        className="absolute lg:left-[14%] md:-left-[30%] md:-top-[2%] lg:w-[42%] w-full lg:bottom-[2%] lg:top-auto -left-[30%] top-[6%]"
         initial={{ y: -100, opacity: 0, scale: 0.7 }}
         whileInView={{ y: 0, opacity: 1, scale: 1 }}
         transition={{ duration: 0.5, ease: "easeIn" }}
       >
         <Samurai />
       </motion.div>
       <motion.div
-        className="left-0 w-auto lg:w-[34%] md:w-[50%] md:bottom-[1%] lg:top-40 absolute bottom-[10%]"
+        className="left-0 w-auto lg:w-[34%] md:w-[50%] lg:top-40 absolute bottom-[1%]"
         initial={{ x: -100, opacity: 0, scale: 0.7 }}
         whileInView={{ x: 0, opacity: 1, scale: 1 }}
         transition={{ duration: 0.5, ease: "easeIn" }}
       >
         <Squido />
       </motion.div>
       <motion.div
-        className="bottom-20 sm:bottom-0 lg:bottom-0 w-[90%] md:w-[70%] right-0 absolute lg:w-[40%]"
+        className="bottom-0 lg:bottom-0 w-[90%] md:w-[70%] right-0 absolute lg:w-[40%]"
         initial={{ x: 100, opacity: 0, scale: 0.7 }}
         whileInView={{ x: 0, opacity: 1, scale: 1 }}
         transition={{ duration: 0.5, ease: "easeIn" }}

packages/nextjs/components/mecha/story/Slideshow.tsx

@@ -1,12 +1,18 @@
 import { useState } from "react";
+import router from "next/router";
 import { slides } from "./slides";
 import { motion } from "framer-motion";
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
 
 const Slideshow = () => {
   const [currentSlide, setCurrentSlide] = useState(0);
 
   const nextSlide = () => {
-    setCurrentSlide(prev => (prev + 1) % slides.length);
+    if (currentSlide === slides.length - 1) {
+      router.push("/mint");
+    } else {
+      setCurrentSlide(prev => (prev + 1) % slides.length);
+    }
   };
 
   const prevSlide = () => {
@@ -31,29 +37,11 @@ const Slideshow = () => {
       >
         {slides[currentSlide]}
       </motion.div>
-      <button onClick={prevSlide} className="absolute z-10 left-0 lg:left-5 transform w-20 lg:-translate-y-1/2 p-3">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="size-6"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
-        </svg>
+      <button onClick={prevSlide} className="absolute z-10 left-0 lg:left-5 transform translate-y-3/4 w-20 lg:-translate-y-1/2 lg:p-3">
+        <ChevronLeftIcon />
       </button>
-      <button onClick={nextSlide} className="absolute z-10 right-0 lg:right-5 w-20 transform lg:-translate-y-1/2 p-3">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          strokeWidth={1.5}
-          stroke="currentColor"
-          className="size-6"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-        </svg>
+      <button onClick={nextSlide} className="absolute z-10 right-0 lg:right-5 w-20 transform translate-y-3/4 lg:-translate-y-1/2 lg:p-3">
+        <ChevronRightIcon />
       </button>
     </div>
   );

packages/nextjs/components/mecha/story/slides/Slide10.tsx

@@ -8,7 +8,7 @@ const Slide10 = () => (
       <div className="w-full h-full bg-cover bg-center bg-no-repeat" style={{ backgroundImage: mechaScatter }} />
     </div>
 
-    <div className="absolute object-contain w-[80%] lg:w-auto top-[26%] lg:top-[38%] right-[14%] md:left-[10%] transform -translate-y-1/2">
+    <div className="absolute object-contain w-[92%] lg:w-auto top-[26%] lg:top-[38%] right-[5%] md:left-[10%] transform -translate-y-1/2">
       <Image src={text10} alt="Text 4" width={600} height={200} />
     </div>
   </div>

packages/nextjs/components/mecha/story/slides/Slide11.tsx

@@ -8,7 +8,7 @@ const Slide11 = () => (
       style={{ backgroundImage: slide11 }}
     ></div>
 
-    <div className="absolute object-contain w-[80%] lg:w-auto top-[26%] lg:top-[38%] right-[14%] md:right-[10%] transform -translate-y-1/2">
+    <div className="absolute object-contain w-[92%] lg:w-auto top-[26%] lg:top-[38%] right-[5%] md:right-[10%] transform -translate-y-1/2">
       <Image src={text11} alt="Text 4" width={600} height={200} />
     </div>
   </div>