Merge pull request #3 from XcavateBlockchain/feat/game-mode

feat: fetch user data

src/app/(dashboard)/home/_components/profile-header.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useSubstrateContext } from '@/context/polkadot-contex';
+import { formatAddress, formatNumber } from '@/lib/utils';
+import Image from 'next/image';
+
+export default function ProfileHeader({ points }: { points: number }) {
+  const { address } = useSubstrateContext();
+
+  return (
+    <div className="flex w-full items-center justify-between pb-10">
+      <div className="flex items-center gap-[17px]">
+        <Image
+          src={'/images/profile.jpeg'}
+          alt="profile"
+          width={53}
+          height={53}
+          className=" rounded-full border-4 border-primary-400 shadow-profile"
+          priority
+        />
+        <div>
+          <span className="rounded-3xl bg-[#DC7DA6]/[0.25] px-2 py-[2px] text-[0.875rem]/[0.025rem] font-extralight">
+            {formatAddress(address)}
+          </span>
+        </div>
+      </div>
+      <div className="space-x-2 text-[1.0625rem]/[1.5rem] font-light">
+        <span>Points:</span>
+        <span className="text-primary-400">{formatNumber(points)}X</span>
+      </div>
+    </div>
+  );
+}

src/app/(dashboard)/home/page.tsx

@@ -1,59 +1,54 @@
-// 'use client';
+'use client';
 import { Card, CardWithoutHeading } from '@/components/cards/card';
 import { Shell } from '@/components/shell';
 import { TaskCard } from '../tasks/page';
 import Image from 'next/image';
-import { Button } from '@/components/ui/button';
+// import { Button } from '@/components/ui/button';
 import { PlayerStats } from '@/components/cards/player-stats-card';
 import { LeadBoardCard } from '@/components/cards/leadboard-card';
-import Link from 'next/link';
-import { getApi } from '@/lib/polkadot';
-import { web3Enable, web3FromAddress } from '@polkadot/extension-dapp';
+// import Link from 'next/link';
+// import { getApi } from '@/lib/polkadot';
+// import { web3Enable, web3FromAddress } from '@polkadot/extension-dapp';
 import LiveGamePlay from './_components/live-game-container';
-import { getAvailableNFTs } from '@/lib/queries';
+import { getAvailableNFTs, getUserData } from '@/lib/queries';
+import ProfileHeader from './_components/profile-header';
+import { useSubstrateContext } from '@/context/polkadot-contex';
+import { useEffect, useState } from 'react';
 
-type Player = {
-  Player: 1;
-};
+// type Player = {
+//   Player: 1;
+// };
 
-type Practice = {
-  Practice: 0;
-};
+// type Practice = {
+//   Practice: 0;
+// };
 
-type GameType = Player | Practice;
+// type GameType = Player | Practice;
 
-export default async function App() {
-  // getAvailableNFTs(1);
+export default function App() {
+  const { address } = useSubstrateContext();
+  const [user, setUser] = useState<any>();
 
-  // console.log(process.env.NEXT_PUBLIC_RPC);
+  async function fetchUserDetails() {
+    const userData = await getUserData(address);
+    console.log(userData);
+    if (userData !== null) {
+      setUser(userData);
+    }
+  }
+
+  useEffect(() => {
+    fetchUserDetails();
+  }, []); // Add address as a dependency
 
   return (
     <Shell>
-      <div className="flex w-full items-center justify-between">
-        <div className="space-x-[17px]">
-          {/* <Image
-            src={'/images/profile/profile.png'}
-            alt="profile"
-            width={53}
-            height={53}
-            priority
-          /> */}
-          <div>
-            <span className="rounded-3xl bg-[#DC7DA6]/[0.25] px-2 py-[2px] text-[0.875rem]/[0.025rem] font-extralight">
-              1Ay00011DY...
-            </span>
-          </div>
-        </div>
-        <div className="space-x-[15px]">
-          <span>Points</span>
-          <span className="text-primary-400">1500</span>
-        </div>
-      </div>
+      <ProfileHeader points={user?.points} />
       <section className=" flex w-full gap-[54px]">
         <CardWithoutHeading className="w-[40%]">
           <PlayerStats title="Guesses" value={10} />
-          <PlayerStats title="Correct " value={6} />
-          <PlayerStats title="Failed " value={0} />
+          <PlayerStats title="Correct " value={user?.wins} />
+          <PlayerStats title="Failed " value={user?.losses} />
         </CardWithoutHeading>
 
         <div className="flex w-[60%] items-start gap-[29px]">
@@ -85,14 +80,14 @@ export default async function App() {
         </Card>
         <Card className="w-[60%]" title="NFTs Collected">
           <div className="grid h-full w-full grid-cols-4 gap-6">
-            <NFTCard />
-            <NFTCard />
-            <NFTCard />
-            <NFTCard />
-            <NFTCard />
-            <NFTCard />
-            <NFTCard />
-            <NFTCard />
+            <NFTCard image="/images/nfts/x_orange.png" noOfNfts={user?.nfts?.xorange} />
+            <NFTCard image="/images/nfts/x_pink.png" noOfNfts={user?.nfts?.xpink} />
+            <NFTCard image="/images/nfts/x_blue.png" noOfNfts={user?.nfts?.xblue} />
+            <NFTCard image="/images/nfts/x_cyan.png" noOfNfts={user?.nfts?.xorange} />
+            <NFTCard image="/images/nfts/x_coral.png" noOfNfts={user?.nfts?.xcoral} />
+            <NFTCard image="/images/nfts/x_purple.png" noOfNfts={user?.nfts?.xpurple} />
+            <NFTCard image="/images/nfts/x_leaf_green.png" noOfNfts={user?.nfts?.xleafgreen} />
+            <NFTCard image="/images/nfts/x_green.png" noOfNfts={user?.nfts?.xgreen} />
           </div>
         </Card>
       </section>
@@ -119,18 +114,19 @@ export default async function App() {
   );
 }
 
-const NFTCard = () => {
+const NFTCard = ({ image, noOfNfts }: { image: string; noOfNfts: number }) => {
   return (
     <div className="relative w-full border border-primary-200 p-[6px]">
       <Image
-        src={'/images/Xpurple_property_NFT9_apartment.webp'}
+        src={image}
         alt="nft"
         width={132}
         height={152}
         priority
+        className="h-[152px] w-full"
       />{' '}
       <div className=" absolute bottom-0 left-[53px] flex items-center justify-center rounded-t bg-primary-200 px-2">
-        <span className="text-[1rem]/[1.2rem] font-light">10</span>
+        <span className="text-[1rem]/[1.2rem] font-light">{noOfNfts}</span>
       </div>
     </div>
   );

src/app/(dashboard)/layout.tsx

@@ -1,4 +1,9 @@
 import SidebarNav from '@/components/layouts/sidebar-nav';
+import dynamic from 'next/dynamic';
+
+// const SubstrateContextProvider = dynamic(() => import('@/context/polkadot-contex'), {
+//   ssr: false
+// });
 
 export default async function DashboardLayout({
   children,
@@ -8,6 +13,7 @@ export default async function DashboardLayout({
   modal: React.ReactNode;
 }>) {
   return (
+    // <SubstrateContextProvider>
     <section className="min-h-screen w-full overflow-hidden">
       <div className="flex min-h-screen">
         <SidebarNav />
@@ -22,5 +28,6 @@ export default async function DashboardLayout({
         </section>
       </div>
     </section>
+    // </SubstrateContextProvider>
   );
 }

src/app/(page)/layout.tsx

@@ -1,25 +1,29 @@
 import SiteFooter from '@/components/layouts/site-footer';
 import { SiteHeader } from '@/components/layouts/site-header';
-import SubstrateContextProvider from '@/context/polkadot-contex';
+// import SubstrateContextProvider from '@/context/polkadot-contex';
 import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app'
 };
 
+// const SubstrateContextProvider = dynamic(() => import('@/context/polkadot-contex'), {
+//   ssr: false
+// });
+
 export default function PageLayout({
   children
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <SubstrateContextProvider>
-      <div className='w-full bg-[url("/images/bg-blur.svg")] bg-cover bg-center bg-no-repeat'>
-        <SiteHeader />
-        <main className="w-full">{children}</main>
-        <SiteFooter />
-      </div>
-    </SubstrateContextProvider>
+    // <SubstrateContextProvider>
+    <div className='w-full bg-[url("/images/bg-blur.svg")] bg-cover bg-center bg-no-repeat'>
+      <SiteHeader />
+      <main className="w-full">{children}</main>
+      <SiteFooter />
+    </div>
+    // </SubstrateContextProvider>
   );
 }

src/app/layout.tsx

@@ -4,6 +4,7 @@ import { fontHeading } from '@/lib/fonts';
 import './globals.css';
 import { cn } from '@/lib/utils';
 import { Toaster } from '@/components/ui/toaster';
+import dynamic from 'next/dynamic';
 
 const unbounded = Unbounded({
   style: 'normal',
@@ -12,6 +13,10 @@ const unbounded = Unbounded({
   variable: '--font-unbounded'
 });
 
+const SubstrateContextProvider = dynamic(() => import('@/context/polkadot-contex'), {
+  ssr: false
+});
+
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app'
@@ -31,7 +36,7 @@ export default function RootLayout({
           fontHeading.variable
         )}
       >
-        {children}
+        <SubstrateContextProvider>{children}</SubstrateContextProvider>
         <Toaster />
       </body>
     </html>

src/lib/queries.ts

@@ -14,15 +14,37 @@ export async function getLeadBoards() {
   return output;
 }
 
+export async function getNextGameID() {
+  const api = await getApi();
+  const result = await api.query.gameModule.gameId();
+  const output = result.toHuman();
+  return output;
+}
+
 export async function getCurrentRoundID() {
   const api = await getApi();
   const result = await api.query.gameModule.currentRound();
   const output = result.toHuman();
   return output;
 }
+
 export async function getGameInfo(gameId: number) {
   const api = await getApi();
   const result = await api.query.gameModule.gameInfo(gameId);
   const output = result.toHuman();
   return output;
 }
+
+export async function getUserData(address: string) {
+  const api = await getApi();
+  const result = await api.query.gameModule.users(address);
+  const output = result.toHuman();
+  return output;
+}
+
+export async function getListings() {
+  const api = await getApi();
+  const result = await api.query.gameModule.listings();
+  const output = result.toHuman();
+  return output;
+}

tailwind.config.ts

@@ -63,6 +63,7 @@ const config = {
       boxShadow: {
         header: '0px 0px 30px 0px rgba(0, 0, 0, 0.32)',
         card: '0px 0px 30px 0px rgba(0, 0, 0, 0.32)',
+        profile: '0px 0px 24px 0px #ECB278',
         time: '-4.41px -8.82px 13.671px 0px rgba(87, 160, 197, 0.25) inset, 7.35px 14.7px 11.466px 0px rgba(55, 114, 144, 0.25) inset'
       },
       keyframes: {