XcavateBlockchain · izaakwalz · Jul 6, 2024 · Jul 2, 2024 · Jul 3, 2024 · Jul 3, 2024
diff --git a/.gitignore b/.gitignore
@@ -27,10 +27,13 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+account.json
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    eslint: {
+        ignoreDuringBuilds: true
+      }
+};
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@polkadot/api": "^11.3.1",
     "@polkadot/extension-dapp": "^0.47.6",
     "@polkadot/extension-inject": "^0.47.6",
+    "@polkadot/keyring": "^12.6.2",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(dashboard)/home/_components/live-game-container.tsx b/src/app/(dashboard)/home/_components/live-game-container.tsx
@@ -27,19 +27,30 @@ type GameType = 0 | 1;
 
 export default function LiveGamePlay({ type }: { type: GameType }) {
   const [openGameSheet, setOpenGameSheet] = useState<boolean>(false);
+
+  const [propertyDisplay, setPropertyDisplay] = useState(null);
   const [display, setDisplay] = useState<'start' | 'play' | 'success' | 'fail'>('start');
 
   function closeGameSheet() {
     setOpenGameSheet(false);
   }
 
   const game: IGamePlaySection = {
-    start: <StartGame type={type} setDisplay={setDisplay} close={closeGameSheet} />,
+    start: (
+      <StartGame
+        type={type}
+        setDisplay={setDisplay}
+        close={closeGameSheet}
+        setPropertyDisplay={setPropertyDisplay}
+      />
+    ),
     play: <GameMode setDisplay={setDisplay} close={closeGameSheet} />,
     success: <GuessPass close={closeGameSheet} />,
     fail: <GuessFail close={closeGameSheet} />
   };
 
+  console.log(propertyDisplay);
+
   return (
     <Sheet open={openGameSheet} onOpenChange={setOpenGameSheet}>
       <SheetTrigger asChild>
@@ -67,24 +78,34 @@ export default function LiveGamePlay({ type }: { type: GameType }) {
 interface GameProps {
   type: GameType;
   setDisplay: Dispatch<SetStateAction<'start' | 'play' | 'success' | 'fail'>>;
+  setPropertyDisplay: Dispatch<SetStateAction<any>>;
   close: () => void;
 }
 
-function StartGame({ type, close, setDisplay }: GameProps) {
+function StartGame({ type, close, setDisplay, setPropertyDisplay }: GameProps) {
   const { address } = useSubstrateContext();
-  const [isPending, startTransition] = useTransition();
-
-  function onPlay() {
-    startTransition(async () => {
-      await playGame(type, address);
-      setDisplay('play');
-    });
+  const [isLoading, setIsLoading] = useState(false);
+
+  // const [isPending, startTransition] = useTransition();
+
+  async function onPlay() {
+    try {
+      setIsLoading(true);
+      await playGame(type, address, data => {
+        setPropertyDisplay(data);
+        setDisplay('play');
+      });
+      setIsLoading(false);
+    } catch (error) {
+      console.log(error);
+      setIsLoading(false);
+    }
   }
 
   return (
     <div className="space-y-[44px]">
       <div className="flex items-center justify-between">
-        <Button variant={'text'} onClick={close} className="p-0" disabled={isPending}>
+        <Button variant={'text'} onClick={close} className="p-0" disabled={isLoading}>
           <Icons.CaretLeft className="size-6" />
           Return
         </Button>
@@ -97,7 +118,7 @@ function StartGame({ type, close, setDisplay }: GameProps) {
         <Button
           className="size-[250px] rounded-full p-10 font-heading text-[2.84569rem] font-bold shadow-game"
           onClick={onPlay}
-          disabled={isPending}
+          disabled={isLoading}
         >
           Start <br /> Game
         </Button>

diff --git a/src/app/(dashboard)/profile/page.tsx b/src/app/(dashboard)/profile/page.tsx
@@ -124,7 +124,7 @@ export default function Page({
         <div className="flex justify-between">
           <div className="flex gap-2">
             <img
-              className="h-24 w-24 rounded-full"
+              className="size-24 rounded-full"
               src="/images/profile.jpeg"
               alt="Rounded avatar"
               style={{ boxShadow: '0px 0px 24px 0px #ECB278', border: '4px solid #DAB436' }}
@@ -145,7 +145,7 @@ export default function Page({
             </span>
           </div>
         </div>
-        <Card className="mt-10  w-[100%] gap-2" title="Gallery">
+        <Card className="mt-10  w-full gap-2" title="Gallery">
           <div className="mt-3 flex gap-3">
             <CircleCard color="#ECB278" />
             <CircleCard color="#57A0C5" />
@@ -160,30 +160,30 @@ export default function Page({
               <Link href="/" className=" inline-block  p-2 py-3 font-normal text-[#FFFFFF] ">
                 Nfts
               </Link>
-              <span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
+              <span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
                 23
               </span>
             </li>
             <li>
               <Link href="/" className="inline-block p-2 py-3 font-normal text-[#FFFFFF]">
                 Listed
               </Link>
-              <span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
+              <span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
                 0
               </span>
             </li>
             <li>
               <Link href="/" className="inline-block p-2 py-3 font-normal text-[#FFFFFF]">
                 Offers
               </Link>
-              <span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
+              <span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
                 4
               </span>
             </li>
             <li className="">
               <Link href="/" className="inline-block p-2 py-3 font-normal text-[#FFFFFF]">
                 Challenges{' '}
-                <span className=" mx-0 inline-flex h-5 w-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
+                <span className=" mx-0 inline-flex size-5 items-center justify-center rounded-md bg-[#DC7DA6] text-[10px] font-normal text-[#FFFFFF]">
                   20
                 </span>
               </Link>
@@ -198,18 +198,18 @@ export default function Page({
                 key={collection}
                 variant={'outline'}
                 size={'sm'}
-                href={`${BASE_URL}?collection=${collection}`}
                 className={
                   active ? 'border-primary-300 bg-primary-300/15 text-primary-300' : ''
                 }
+                asChild
               >
-                {collection}
+                <Link href={`${BASE_URL}?collection=${collection}`}>{collection}</Link>
               </Button>
             );
           })}
         </div>
         <section className="flex w-full flex-col gap-8">
-          <div className="grid h-full w-full grid-cols-4 gap-[23px]">
+          <div className="grid size-full grid-cols-4 gap-[23px]">
             {siteConfig.nfts.map((nft: any) => (
               <ProfileNFTCard
                 key={nft.nftId}

diff --git a/src/app/(dashboard)/test/page.tsx b/src/app/(dashboard)/test/page.tsx
@@ -1,38 +1,63 @@
 'use client';
 
 import { useState } from 'react';
-import { processImages } from '../../actions';
+// import { processImages } from '../../actions';
+import { checkResult } from '../../actions';
+import { playGame } from '@/lib/extrinsic';
 
 export default function HomePage() {
   const [imageSrcs, setImageSrcs] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
+  const [propertyDisplay, setPropertyDisplay] = useState(null);
 
-  const handleGetImages = async () => {
-    setLoading(true);
-    setError('');
+  // const handleGetImages = async () => {
+  //   setLoading(true);
+  //   setError('');
+  //   try {
+  //     // const images = await processImages();
+  //     await checkResult();
+  //     // setImageSrcs(images);
+  //   } catch (error) {
+  //     console.log(error);
+  //     setError('Failed to fetch images');
+  //   } finally {
+  //     setLoading(false);
+  //   }
+  // };
+
+  const handlePlayGame = async () => {
+    console.log('Button clicked');
     try {
-      const images = await processImages();
-      setImageSrcs(images);
+      await playGame(0, '5FEda1GYvjMYcBiuRE7rb85QbD5bQNHuZajhRvHYTxm4PPz5', data => {
+        setPropertyDisplay(data);
+      });
     } catch (error) {
-      setError('Failed to fetch images');
-    } finally {
-      setLoading(false);
+      console.log('error: ', error);
     }
   };
 
   return (
     <div>
       <h1>Home Page</h1>
-      <button onClick={handleGetImages} disabled={loading}>
+      {/* <button onClick={handleGetImages} disabled={loading}>
         {loading ? 'Processing...' : 'Get Processed Images'}
-      </button>
+      </button> */}
       {error && <p>{error}</p>}
       <div>
         {imageSrcs.map((src, index) => (
           <img key={index} src={src} alt={`Processed Image ${index + 1}`} />
         ))}
       </div>
+
+      <button onClick={handlePlayGame}>TEST BUTTON</button>
+      {propertyDisplay && (
+        <div>
+          <h3>Game Details:</h3>
+          <p>{propertyDisplay}</p>{' '}
+          {/* Adjust this to display actual data from propertyDisplay */}
+        </div>
+      )}
     </div>
   );
 }