feat:

frontend/casino/src/app/components/Loading/Loading.tsx

@@ -1,4 +1,4 @@
-import LoadingImg from '../../../assets/Capibebra.gif'
+import LoadingImg from '../../../assets/LoadingScreen.gif'
 import { styled } from '../../../styles'
 
 const LoadingStyle = styled('div', {
@@ -12,7 +12,7 @@ const LoadingStyle = styled('div', {
 const Loading = () => {
     return (
         <LoadingStyle>
-            <img src={LoadingImg} />
+            <img style={{ width: '100vw' }} src={LoadingImg} />
         </LoadingStyle>
     )
 }

frontend/casino/src/app/components/web3/RPSPlayButton.tsx

@@ -1,6 +1,13 @@
+import {usePlayRPS} from "../../web3/functions/RPS/usePlayRPS.ts";
+
 export const RPSPlayButton = () => {
+
+    const { playRPS } = usePlayRPS()
+
     return (
-        <button className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600 inline-block max-w-[200px]">
+        <button
+            onClick={() => { playRPS('rock') }}
+            className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600 inline-block max-w-[200px]">
             Играть
         </button >
     )

frontend/casino/src/app/components/web3/SlotPlayButton.tsx

@@ -1,6 +1,13 @@
+import {useSlotMachine} from "../../web3/functions/SlotMachine/useSlotMachine.ts";
+
 export const SlotPlayButton = () => {
+
+    const { playSlot } = useSlotMachine()
+
     return (
-        <button className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600">
+        <button
+            onClick={() => { playSlot() }}
+            className="bg-rose-700 rounded-[100px] shadow text-white text-2xl font-bold py-5 px-10 hover:bg-rose-600">
             Крутить
         </button>
     )

frontend/casino/src/app/pages/MainPage/MainPage.tsx

@@ -67,7 +67,7 @@ export const MainPage = () => {
                         <div className="flex flex-col h-full justify-between">
                             <div className="flex flex-row justify-between min-w-[200px] my-auto">
                                 <span className="text-xl font-bold uppercase">Rock paper scissors</span>
-                                <a href="/rock-paper-scissors" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</a>
+                                <Link to="/rock-paper-scissors" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</Link>
                             </div>
                         </div>
                     </div>
@@ -83,7 +83,7 @@ export const MainPage = () => {
                         <div className="flex flex-col h-full justify-between">
                             <div className="flex flex-row justify-between min-w-[200px] my-auto">
                                 <span className="text-xl font-bold uppercase">Slot machine</span>
-                                <a href="/slot" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</a>
+                                <Link to="/slot" className="min-w-[100px]max-h-[45px] bg-blue-500 rounded-[10px] border border-blue-400 font-bold px-3 items-center flex justify-center py-2">Play now</Link>
                             </div>
                         </div>
                     </div>

frontend/casino/src/app/pages/SlotGamePage/SlotGamePage.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Reel from '../../components/App/Slot/Reel';
 import { useEffect, useState } from 'react';
 import { RPSPlayButton } from '../../components/web3/RPSPlayButton';
+import {SlotPlayButton} from "../../components/web3/SlotPlayButton.tsx";
 
 export const SlotGamePage = () => {
     const [isHorizontal, setIsHorizontal] = useState(false)
@@ -55,7 +56,7 @@ export const SlotGamePage = () => {
                 </div>
 
                 <div className="max-w-[100px]">
-                    <RPSPlayButton />
+                    <SlotPlayButton />
                 </div>
             </div>
         </ContainerLayout>

frontend/casino/src/app/web3/functions/RPS/usePlayRPS.ts

@@ -0,0 +1,33 @@
+import {useWalletConnect} from "@cityofzion/wallet-connect-sdk-react";
+import {useCallback} from "react";
+import {useGetResult} from "../utils/useGetResult.ts";
+import {config} from "../config/config.ts";
+
+export const usePlayRPS = () => {
+    const wcSdk = useWalletConnect()
+    const { getResult, ...statuses } = useGetResult()
+
+    const playRPS = useCallback(async (value: string) => {
+        console.log(config.rps.contractAddress)
+        const resp = await wcSdk.invokeFunction({
+            invocations: [{
+                scriptHash: config.rps.contractAddress,
+                operation: 'playRPS',
+                args: [
+                    { type: 'String', value: value },
+                    { type: 'Integer', value: '40' },
+                ]
+            }],
+            signers: [{
+                scopes: 'Global',
+            }]
+        })
+        console.log(resp)
+        await getResult(resp, 'rouletteNumber')
+    }, [wcSdk, getResult])
+
+    return {
+        playRPS,
+        ...statuses
+    }
+}

frontend/casino/src/app/web3/functions/SlotMachine/useSlotMachine.ts

@@ -1,34 +1,20 @@
 import {useWalletConnect} from "@cityofzion/wallet-connect-sdk-react";
 import {useCallback} from "react";
 import {useGetResult} from "../utils/useGetResult.ts";
-import {useStatusState} from "../../../hooks/useStatusState.ts";
 import {config} from "../config/config.ts";
 
 export const useSlotMachine = () => {
     const wcSdk = useWalletConnect()
-    const { getResult } = useGetResult()
+    const { getResult, ...statuses } = useGetResult()
-    const { statuses, wrapPromise } = useStatusState()
 
-    const playSlotMachine = useCallback(wrapPromise(async () => {
+    const playSlot = useCallback(async () => {
-        // const resp = await wcSdk.invokeFunction({
+        console.log(config.slotMachine.contractAddress)
-        //     invocations: [{
-        //         scriptHash: '270c825a5ac041e18be45074bbb942255164a214',
-        //         operation: 'balanceOf',
-        //         args: [
-        //             { type: 'Hash160', value: 'NQCLAHuu4umnR99KB5m7U8ppJFtWqhw6DS' },
-        //         ]
-        //     }],
-        //     signers: [{
-        //         scopes: 'Global',
-        //     }]
-        // })
         const resp = await wcSdk.invokeFunction({
             invocations: [{
                 scriptHash: config.slotMachine.contractAddress,
-                operation: 'playRoulette',
+                operation: 'rollSlot',
                 args: [
                     { type: 'Integer', value: '40' },
-                    { type: 'Integer', value: '3' },
                 ]
             }],
             signers: [{
@@ -36,12 +22,11 @@ export const useSlotMachine = () => {
             }]
         })
         console.log(resp)
-        const result = await getResult(resp)
+        await getResult(resp, 'rouletteNumber')
-        console.log(result)
+    }, [wcSdk, getResult])
-    }), [wcSdk, getResult, wrapPromise])
 
     return {
-        playSlotMachine,
+        playSlot,
         ...statuses
     }
 }

frontend/casino/src/app/web3/functions/config/config.ts

@@ -1,14 +1,17 @@
 export const config = {
     craps: {
-        contractAddress: 'b068a57e65eb0cb13ab5409b70c1d43ccee7d1f5'
+        contractAddress: '490e3778e5247eccea7ff960e7253047b4c72545'
     },
     roulette: {
         contractAddress: '9a8e8297364f134f29bafe1322323af73e5ab434'
     },
     slotMachine: {
-        contractAddress: '13f7312810758d0e2271e2c620ba93f3568e0e8c'
+        contractAddress: '21ab5b0e8979723de78dbdb4177aeb10a8ebef16'
     },
     zaCoin: {
         contractAddress: 'fdfb5c2974779e9cb9347e083a80054feae55a2d'
+    },
+    rps: {
+        contractAddress: 'ae71ad7c8174530cddecf483e8094539f84fcd7f'
     }
 }

frontend/casino/vite.config.ts.timestamp-1704788548210-35cc11f804848.mjs

@@ -0,0 +1,10 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/lewinup/Documents/Frontend/web3-casino/frontend/casino/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/lewinup/Documents/Frontend/web3-casino/frontend/casino/node_modules/@vitejs/plugin-react/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [react()]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbGV3aW51cC9Eb2N1bWVudHMvRnJvbnRlbmQvd2ViMy1jYXNpbm8vZnJvbnRlbmQvY2FzaW5vXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvbGV3aW51cC9Eb2N1bWVudHMvRnJvbnRlbmQvd2ViMy1jYXNpbm8vZnJvbnRlbmQvY2FzaW5vL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9sZXdpbnVwL0RvY3VtZW50cy9Gcm9udGVuZC93ZWIzLWNhc2luby9mcm9udGVuZC9jYXNpbm8vdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJ1xuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xuXG4vLyBodHRwczovL3ZpdGVqcy5kZXYvY29uZmlnL1xuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3JlYWN0KCldLFxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBeVcsU0FBUyxvQkFBb0I7QUFDdFksT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K