[WIP]Add plinko as separated game

.env.example

@@ -1 +1,4 @@
-NEXT_PUBLIC_NETWORK="[mainnet | testnet | local]"
+NEXT_PUBLIC_NETWORK="[mainnet | testnet | local]"
+NEXT_PUBLIC_IS_TEST_WIN="[undefined | true]"
+NEXT_PUBLIC_IS_TEST_PLINKO="[undefined | true]"
+NEXT_PUBLIC_IS_TEST_CARTEL="[undefined | true]"

.github/workflows/nextjs.yml

@@ -7,13 +7,16 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
 env:
   NEXT_PUBLIC_NETWORK: mainnet
+  NEXT_PUBLIC_IS_TEST_WIN: false
+  NEXT_PUBLIC_IS_TEST_PLINKO: false
+  NEXT_PUBLIC_IS_TEST_CARTEL: false
 
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
@@ -24,7 +27,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -54,7 +57,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: '20'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v5
@@ -70,16 +73,23 @@ jobs:
           path: |
             .next/cache
           # Generate a new cache whenever packages or source files change.
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          key:
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json',
+            '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+        run:
+          ${{ steps.detect-package-manager.outputs.manager }} ${{
+          steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
         env:
           NEXT_PUBLIC_NETWORK: ${{ env.NEXT_PUBLIC_NETWORK }}
+          NEXT_PUBLIC_IS_TEST_WIN: ${{ env.IS_TEST_WIN }}
+          NEXT_PUBLIC_IS_TEST_PLINKO: ${{ env.IS_TEST_PLINKO }}
+          NEXT_PUBLIC_IS_TEST_CARTEL: ${{ env.IS_TEST_CARTEL }}
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

package.json

@@ -35,6 +35,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-matter-js": "^1.0.5",
+    "use-debounce": "^10.0.3",
     "zustand": "^4.5.4"
   },
   "devDependencies": {

src/app/plinko/page.tsx

@@ -0,0 +1,17 @@
+'use client';
+import { PlinkoBoard } from '@/components/plinko/PlinkoGameboard';
+import React from 'react';
+import styles from '@/styles/plinko-page.module.css';
+import { PlinkoContextProvider } from '@/contexts/plinko/PlinkoContextProvider';
+import { PlinkoGame } from '@/components/plinko/PlinkoGame';
+
+export default function Plinko() {
+  return (
+    <PlinkoContextProvider>
+
+    <div className={styles.gameContainer}>
+      <PlinkoGame isMinigame={false} />
+    </div>
+    </PlinkoContextProvider>
+  );
+}

src/components/Navbar/components/DrawerMenu.tsx

@@ -88,6 +88,11 @@ export function DrawerMenu({
                   Checkers
                 </Text>
               </Link>
+              <Link href={'/plinko'} style={{ textDecorationColor: 'purple' }}>
+                <Text fontSize={'16px'} fontWeight="600" color="purple">
+                  Plinko
+                </Text>
+              </Link>
             </VStack>
           </DrawerBody>
 

src/components/Navbar/containers/Navbar.tsx

@@ -87,6 +87,14 @@ export default function Navbar() {
                       Checkers
                     </Text>
                   </Link>
+                  <Link
+                    href={'/plinko'}
+                    style={{ textDecorationColor: 'white' }}
+                  >
+                    <Text fontSize={'16px'} fontWeight="600" color="white">
+                      Plinko
+                    </Text>
+                  </Link>
                 </HStack>
               </Flex>
             </Flex>

src/components/maze/GameboardContainer.tsx

@@ -1,5 +1,4 @@
 import { Gameboard } from './Gameboard';
-import { PlinkoBoard } from '../plinko/PlinkoGameboard';
 import styles from '@/styles/GameboardContainer.module.css';
 import {
   Button,
@@ -43,7 +42,8 @@ import { Scoreboard } from './Scoreboard';
 import { callMintCheddar } from '@/queries/maze/api';
 import { getConfig } from '@/configs/config';
 import ModalHolonym from '../ModalHolonymSBT';
-
+import Plinko from '@/app/plinko/page';
+import { PlinkoGame } from '../plinko/PlinkoGame';
 interface Props {
   remainingMinutes: number;
   remainingSeconds: number;
@@ -321,29 +321,29 @@ export function GameboardContainer({
 
     if (!isUserNadabotVerfied && !isUserHolonymVerified && !hasEnoughBalance) {
       message = (
-        <>
+        <span>
           Verify on {nadabotLink} or {holonymLink} and buy/hold 555{' '}
           {cheddarIcon} from {refLink}.
-        </>
+        </span>
       );
     } else if (
       (isUserNadabotVerfied || isUserHolonymVerified) &&
       !hasEnoughBalance
     ) {
       message = (
-        <>
+        <span>
           Buy/hold 555 {cheddarIcon} from {refLink}.
-        </>
+        </span>
       );
     } else if (
       !isUserNadabotVerfied &&
       !isUserHolonymVerified &&
       hasEnoughBalance
     ) {
       message = (
-        <>
+        <span>
           Verify on {nadabotLink} or {holonymLink}.
-        </>
+        </span>
       );
     }
 
@@ -560,7 +560,7 @@ export function GameboardContainer({
         hideButtons={true}
         showCloseBtn={false}
       >
-        <PlinkoBoard />
+        <PlinkoGame />
       </ModalContainer>
       <ModalContainer
         title={'Maze scoreboard'}

src/components/plinko/ModalBuyChips.tsx

@@ -0,0 +1,163 @@
+import {
+  FormControl,
+  FormLabel,
+  Button,
+  useToast,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  Flex,
+} from '@chakra-ui/react';
+import { useWalletSelector } from '@/contexts/WalletSelectorContext';
+import { useContext, useState } from 'react';
+
+import styles from '@/styles/BuyNFTSection.module.css';
+import { RenderCheddarIcon } from '../maze/RenderCheddarIcon';
+import { ModalContainer } from '../ModalContainer';
+import { buyBalls } from '@/contracts/plinko/plinkoCalls';
+import { useGetBallCost } from '@/hooks/plinko';
+import { yton } from '@/contracts/contractUtils';
+import { GameContext } from '@/contexts/maze/GameContextProvider';
+import { PlinkoContext } from '@/contexts/plinko/PlinkoContextProvider';
+
+interface Props {
+  onClose: () => void;
+  isOpen: boolean;
+}
+
+export const ModalBuyChips = ({ isOpen, onClose }: Props) => {
+  const { /*setResetQuery,*/ setThrownBallsQuantity } =
+    useContext(PlinkoContext);
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectAmountOfChips, setSelectAmountOfChips] = useState(3);
+  const { selector } = useWalletSelector();
+  const { data: chipPriceInCheddar, isLoading: isChipPriceInCheddarLoading } =
+    useGetBallCost();
+  const toast = useToast();
+
+  const cheddarInfo = {
+    name: 'Cheddar',
+    price: isChipPriceInCheddarLoading ? 'Loading' : yton(chipPriceInCheddar!),
+    icon: <RenderCheddarIcon className={styles.tokenIcon} />,
+    color: 'yellow',
+  };
+
+  function getAmountOfChipsToBuy() {
+    return (
+      BigInt(selectAmountOfChips) * BigInt(chipPriceInCheddar!)
+    ).toString();
+  }
+
+  async function handleBuy() {
+    try {
+      setIsLoading(true);
+      const wallet = await selector.wallet();
+      const amount = getAmountOfChipsToBuy();
+
+      if (amount) {
+        // const resp =
+        await buyBalls(wallet, amount.toString()!);
+        // const genericLastResult = await getTransactionLastResult(resp);
+        // const lastResult: MintNFTLastResult = genericLastResult[1];
+
+        // setResetQuery(true);
+        setThrownBallsQuantity(0);
+
+        toast({
+          title: "Let's play!",
+          status: 'success',
+          duration: 9000,
+          position: 'bottom-right',
+          isClosable: true,
+        });
+      } else {
+        toast({
+          title:
+            'There was an error getting the chips price. Please, try again',
+          status: 'error',
+          duration: 9000,
+          position: 'bottom-right',
+          isClosable: true,
+        });
+      }
+    } catch (err: any) {
+      toast({
+        title: err.message,
+        status: 'error',
+        duration: 9000,
+        position: 'bottom-right',
+        isClosable: true,
+      });
+    }
+    setIsLoading(false);
+  }
+
+  function changeSelectedAmountOfChips(e: string) {
+    setSelectAmountOfChips(Number(e));
+  }
+
+  function openToast() {
+    toast({
+      title: 'You have to buy at least 1 chip',
+      status: 'error',
+      duration: 9000,
+      position: 'bottom-right',
+      isClosable: true,
+    });
+  }
+
+  return (
+    <ModalContainer title="Buy More Chips" onClose={onClose} isOpen={isOpen}>
+      <form className={styles.form}>
+        <FormControl isRequired>
+          <FormLabel>Amount of chips</FormLabel>
+          <NumberInput
+            onChange={changeSelectedAmountOfChips}
+            size="md"
+            maxW={24}
+            defaultValue={3}
+            min={1}
+          >
+            <NumberInputField />
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          </NumberInput>
+        </FormControl>
+
+        <FormLabel>
+          <Flex>
+            <p>
+              {`Chip cost: ${cheddarInfo.price}`} {cheddarInfo.icon}
+            </p>
+            <p>
+              {`Total cost: ${Number(cheddarInfo.price) * selectAmountOfChips}`}{' '}
+              {cheddarInfo.icon}
+            </p>
+          </Flex>
+        </FormLabel>
+        {selectAmountOfChips === 0 ? (
+          <Button
+            colorScheme="yellow"
+            onClick={openToast}
+            isLoading={isLoading}
+          >
+            Purchase
+          </Button>
+        ) : (
+          <Button
+            colorScheme="yellow"
+            onClick={handleBuy}
+            isLoading={isLoading}
+          >
+            Purchase
+          </Button>
+        )}
+      </form>
+    </ModalContainer>
+  );
+};

src/components/plinko/PlinkoGame.tsx

@@ -0,0 +1,14 @@
+import { PlinkoContextProvider } from '@/contexts/plinko/PlinkoContextProvider';
+import { PlinkoBoard } from './PlinkoGameboard';
+
+interface Props {
+  isMinigame?: boolean;
+}
+
+export const PlinkoGame = ({ isMinigame = true }: Props) => {
+  return (
+    <PlinkoContextProvider>
+      <PlinkoBoard isMinigame={isMinigame} />
+    </PlinkoContextProvider>
+  );
+};