This commit is contained in:
Aleksey_Levin 2024-01-17 12:27:59 +03:00
parent 7ce025914d
commit 98bfb9ef28
10 changed files with 77 additions and 31 deletions

View file

@ -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>
)
}

View file

@ -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 >
)

View file

@ -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>
)

View file

@ -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>

View file

@ -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>

View file

@ -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
}
}

View file

@ -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 { statuses, wrapPromise } = useStatusState()
const { getResult, ...statuses } = useGetResult()
const playSlotMachine = useCallback(wrapPromise(async () => {
// const resp = await wcSdk.invokeFunction({
// invocations: [{
// scriptHash: '270c825a5ac041e18be45074bbb942255164a214',
// operation: 'balanceOf',
// args: [
// { type: 'Hash160', value: 'NQCLAHuu4umnR99KB5m7U8ppJFtWqhw6DS' },
// ]
// }],
// signers: [{
// scopes: 'Global',
// }]
// })
const playSlot = useCallback(async () => {
console.log(config.slotMachine.contractAddress)
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)
console.log(result)
}), [wcSdk, getResult, wrapPromise])
await getResult(resp, 'rouletteNumber')
}, [wcSdk, getResult])
return {
playSlotMachine,
playSlot,
...statuses
}
}

View file

@ -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'
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 MiB

View file

@ -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