diff --git a/frontend/casino/src/app/components/App/AppLayout/AppLayout.tsx b/frontend/casino/src/app/components/App/AppLayout/AppLayout.tsx
index 1300de0..d7be121 100644
--- a/frontend/casino/src/app/components/App/AppLayout/AppLayout.tsx
+++ b/frontend/casino/src/app/components/App/AppLayout/AppLayout.tsx
@@ -1,5 +1,5 @@
import { observer } from 'mobx-react-lite'
-import { type FC } from 'react'
+import {type FC} from 'react'
import { Outlet } from 'react-router-dom'
import { useScrollTop } from '../../../hooks/useScrollTop.ts'
diff --git a/frontend/casino/src/app/components/App/AppNav/AppNav.tsx b/frontend/casino/src/app/components/App/AppNav/AppNav.tsx
index d56de3f..6c199b3 100644
--- a/frontend/casino/src/app/components/App/AppNav/AppNav.tsx
+++ b/frontend/casino/src/app/components/App/AppNav/AppNav.tsx
@@ -2,8 +2,12 @@ import CoinIcon from "../../icons/CoinIcon";
import ProfileIcon from "../../icons/ProfileIcon";
import {ConnectStateButton} from "../../../web3/connect";
import chipImg from '../../../../assets/icons/chip.png'
+import {useStores} from "../../../hooks/useStores.tsx";
+import {observer} from "mobx-react-lite";
+import {CheckBalanceButton} from "../../../web3/balance/CheckBalanceButton.tsx";
-export const AppNav = () => {
+export const AppNav = observer(() => {
+ const { userStore } = useStores()
return (
@@ -20,7 +24,7 @@ export const AppNav = () => {
{/* placeholder for balance */}
- 0.000000
+ {userStore.balance ? {userStore.balance} : }
@@ -33,4 +37,4 @@ export const AppNav = () => {
)
-};
\ No newline at end of file
+})
\ No newline at end of file
diff --git a/frontend/casino/src/app/components/web3/DicePlayButton.tsx b/frontend/casino/src/app/components/web3/DicePlayButton.tsx
index bf7dfe4..ebaa673 100644
--- a/frontend/casino/src/app/components/web3/DicePlayButton.tsx
+++ b/frontend/casino/src/app/components/web3/DicePlayButton.tsx
@@ -1,7 +1,31 @@
-export const DicePlayButton = () => {
+import {usePlayRoulette} from "../../web3/functions/Roulette/usePlayRoulette.ts";
+import {FC, useEffect} from "react";
+
+interface DicePlayButtonProps {
+ value: number
+ onSuccess: (result: unknown) => void
+ onLoading: () => void
+}
+
+export const DicePlayButton: FC = ({ value, onSuccess, onLoading }) => {
+ const { playRoulette, result, isLoading } = usePlayRoulette()
+
+ useEffect(() => {
+ if (result) onSuccess(result)
+ }, [result])
+
+ useEffect(() => {
+ if (isLoading) onLoading()
+ }, [isLoading])
+
return (
-