Merge pull request #3 from The-JW-Corp/staging

Hotfix on buttons

client/src/app/api/nftsSelected/route.ts

@@ -0,0 +1,12 @@
+import { NextResponse } from "next/server";
+export async function GET() {
+  return NextResponse.json({
+    hello: "world",
+  });
+}
+export async function POST(request: Request) {
+    const data = await request.json;
+  return NextResponse.json({
+    data,
+  });
+}

client/src/app/api/route.ts

@@ -0,0 +1,6 @@
+import { NextResponse } from "next/server";
+export async function GET() {
+  return NextResponse.json({
+    hello: "world",
+  });
+}

client/src/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "../components/Navbar.jsx";
-import ButtonSocials from "../components/buttons/ButtonSocials.jsx";
+import ButtonSocials from "../components/buttons/ButtonSocials.tsx";
 // import { PathnameProvider } from "../../contexts/PathnameContext";
 const inter = Inter({ subsets: ["latin"] });
 

client/src/app/stake/page.tsx

@@ -2,9 +2,13 @@ import React from "react";
 import Image from "next/image";
 import degenKongWatermark from "../../../public/Assets/image/degenkong-watermark.svg";
 import styles from "../../styles/pages/page-stake.module.css";
-import degenPfp from "../../../public/Assets/image/degenKong-pfp.png";
-import ButtonMedium from "../../components/buttons/ButtonMedium";
+import nftImage from "../../../public/Assets/image/degenKong-pfp.png";
+import ButtonMedium from "../../components/buttons/ButtonMedium.tsx";
+import Nft from "../../components/Nft";
 function page() {
+  // Fake data but need to fetch nft Meta data and ID from blockchain
+  const nftsFromWallet = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+  const nftsStaked = [0, 1, 2, 3, 4];
   return (
     <>
       <div className={styles.stake_page_container}>
@@ -21,27 +25,7 @@ function page() {
           </div>
           <div className={styles.stake_page_first_bloc}>
             <div className={styles.stake_page_first_bloc_wrap}>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
+              <Nft nfts={nftsFromWallet} nftImage={nftImage} />
             </div>
           </div>
           <div
@@ -60,114 +44,12 @@ function page() {
           </div>
           <div className={styles.stake_page_second_bloc}>
             <div className={styles.stake_page_second_bloc_wrap}>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
-              <div className={styles.stake_page_image_container}>
-                <Image
-                  src={degenPfp}
-                  quality={100}
-                  alt="degen kong long background"
-                />
-              </div>
+              <Nft nfts={nftsStaked} nftImage={nftImage} />
             </div>
           </div>
-          <div className={styles.stake_page_second_bloc_bottom_buttons_container}>
+          <div
+            className={styles.stake_page_second_bloc_bottom_buttons_container}
+          >
             <ButtonMedium text="SELECT ALL (0)" />
             <ButtonMedium text="UNSTAKE(0)" />
           </div>

client/src/components/Nft.jsx

@@ -0,0 +1,44 @@
+"use client";
+import React, { useState } from "react";
+import styles from "../styles/nft.module.css";
+import Image from "next/image";
+function Nft({ nfts, nftImage }) {
+  const [selectedNfts, setSelectedNfts] = useState(new Set());
+
+  function handleNftClick(index) {
+    setSelectedNfts((prevSelectedNfts) => {
+      const newSelectedNfts = new Set(prevSelectedNfts);
+      if (newSelectedNfts.has(index)) {
+        newSelectedNfts.delete(index);
+      } else {
+        newSelectedNfts.add(index);
+      }
+      return newSelectedNfts;
+    });
+    console.log(selectedNfts.size)
+  }
+
+  return (
+    <>
+      {nfts.map((index) => (
+        <div
+          key={index}
+          className={
+            selectedNfts.has(index)
+              ? styles.nft_image_container_selected
+              : styles.nft_image_container
+          }
+          onClick={() => handleNftClick(index)}
+        >
+          <Image
+            src={nftImage}
+            quality={100}
+            alt="degen kong long background"
+          />
+        </div>
+      ))}
+    </>
+  );
+}
+
+export default Nft;

client/src/components/buttons/Button.jsx

@@ -2,7 +2,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import styles from "../../styles/button.module.css";
 import Link from "next/link";
-import KongHand from "../lottie/KongHand";
+import KongHand from "../lottie/KongHand.tsx";
 import KongMouth from "../lottie/KongMouth";
 import ButtonAnimation from "../../components/lottie/ButtonAnimation";
 import {handleAnimationComplete as handleAnimationCompleteUtil } from "../../utils/lottieAnimationComplete"