Skip to content

Commit

Permalink
feat: complete play flow
Browse files Browse the repository at this point in the history
  • Loading branch information
RasenGUY committed Sep 13, 2023
1 parent 69aa9bb commit 5a2dbeb
Show file tree
Hide file tree
Showing 30 changed files with 636 additions and 364 deletions.
22 changes: 22 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"@rainbow-me/rainbowkit": "^1.0.8",
"@reduxjs/toolkit": "^1.9.5",
"@types/lodash": "^4.14.197",
"@types/react-copy-to-clipboard": "^5.0.4",
"@uidotdev/usehooks": "^2.1.0",
"axios": "^1.4.0",
"ethers": "^5.7.2",
Expand All @@ -35,6 +36,7 @@
"joi": "^17.9.2",
"react": "^18.2.0",
"react-blockies": "^1.4.1",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-hook-form": "^7.45.4",
Expand Down
3 changes: 1 addition & 2 deletions src/api/blockchain/blokchainApi.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export class BlockchainAPI implements IBlockchainAPI {

async createWagerAndDeposit({ tokenAddress, gameType, wager }: {
tokenAddress: HexishString
accountsCount: number,
wager: number,
gameType: AllPossibleWegaTypes,
}){
Expand Down Expand Up @@ -102,7 +101,7 @@ export class BlockchainAPI implements IBlockchainAPI {
return Number(utils.formatEther(deposit));
}

async deposit(escrowHash: HexishString, playerChoices?: number[]){
async deposit(escrowHash: HexishString, playerChoices?: number[]){
const depositConfig = await prepareWriteContract({
address: this.gameControllerConfig.address,
abi: this.gameControllerConfig.abi,
Expand Down
21 changes: 14 additions & 7 deletions src/api/blockchain/thunks.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { createAsyncThunk } from '@reduxjs/toolkit';
import { BlockchainAPI } from './blokchainApi';
import { AllPossibleWegaTypes, HexishString, WegaTypesEnum } from '../../models';
import { AllPossibleWegaTypes, HexishString } from '../../models';
import toast from 'react-hot-toast';
import { toastSettings } from '../../utils';
import { waitForTransaction } from '@wagmi/core';
Expand Down Expand Up @@ -58,8 +58,13 @@ export const hashWagerQuery = createAsyncThunk<HexishString, { tokenAddress: Hex
}
)


export const createWagerMutation = createAsyncThunk<any, { tokenAddress: HexishString, gameType: WegaTypesEnum, playerAddress: HexishString, accountsCount: number, wager: number }>('escrow/createWager',
export const createWagerMutation = createAsyncThunk<any, {
tokenAddress: HexishString,
gameType: AllPossibleWegaTypes,
playerAddress: HexishString,
accountsCount: number,
wager: number
}>('escrow/createWager',
async (inpts, { rejectWithValue }) => {
const api = new BlockchainAPI();
try {
Expand All @@ -69,7 +74,7 @@ export const createWagerMutation = createAsyncThunk<any, { tokenAddress: HexishS
if(receipt) {
toast.success('Create wager success', { ...{ ...toastSettings('success', 'top-center') } as any });
}
return { wagerId, nonce }; // return wager id and nonce since it is required for creating a game
return { wagerId, nonce };
} catch (error: any) {
const message = api.handleError(error, 'Create wager error');
toast.error(message, { ...{ ...toastSettings('error', 'bottom-center') } as any })
Expand All @@ -84,6 +89,7 @@ async (inpts, { rejectWithValue }) => {
try {
return await api.depositOf(inpts.escrowHash, inpts.account);
} catch (error: any) {
console.log(error);
const message = api.handleError(error, 'Query user deposit error');
toast.error(message, { ...{ ...toastSettings('error', 'bottom-center') } as any })
return rejectWithValue(message);
Expand All @@ -96,7 +102,7 @@ export const getWinnersQuery = createAsyncThunk<HexishString[], {escrowHash: Hex
return await api.getWinners(inpts.gameType, inpts.escrowHash);
} catch (error: any) {
const message = api.handleError(error, 'Query get game winners error');
toast.error(message, { ...{ ...toastSettings('error', 'bottom-center') } as any })
// toast.error(message, { ...{ ...toastSettings('error', 'bottom-center') } as any })
return rejectWithValue(message);
}
})
Expand All @@ -105,11 +111,12 @@ export const getGameResultsQuery = createAsyncThunk<number[][], { escrowHash: He
const api = new BlockchainAPI();
try {
return await Promise.all(inpts.players.map(async (playerAddress: string) => {
const res = await api.getGameResults(inpts.gameType, inpts.escrowHash, playerAddress as HexishString);
const res = await api.getGameResults(inpts.gameType, inpts.escrowHash, playerAddress.toLowerCase() as HexishString);
return res;
}
));
} catch (error: any) {
console.log(error);
const message = api.handleError(error, 'Query get game results error');
toast.error(message, { ...{ ...toastSettings('error', 'bottom-center') } as any })
return rejectWithValue(message);
Expand Down Expand Up @@ -138,7 +145,7 @@ export const claimMutation = createAsyncThunk<any, { escrowHash: HexishString }>
async (inpts, { rejectWithValue }) => {
const api = new BlockchainAPI();
try {
const hash = await api.deposit(inpts.escrowHash);
const hash = await api.claim(inpts.escrowHash);
const receipt = await waitForTransaction({ hash });
if(receipt) {
toast.success('Claim success', { ...{ ...toastSettings('success', 'top-center') } as any });
Expand Down
20 changes: 20 additions & 0 deletions src/assets/icons/ArrowDownIconV2.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from "react"
import { SVGProps } from "react"
const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={20}
height={21}
fill="none"
{...props}
>
<path
stroke="#FDFDFD"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={3}
d="M10 2v16.666m0 0-8-8m8 8 8-8"
/>
</svg>
)
export default SvgComponent
1 change: 1 addition & 0 deletions src/assets/icons/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,4 @@ export { default as CopyPasteIcon } from './CopyPasteIcon';
export { default as CrownIcon } from './CrownIcon';
export { default as RestartIcon } from './RestartIcon';
export { default as DownloadIcon } from './DownloadIcon';
export { default as ArrowDownIconV2 } from './ArrowDownIconV2';
60 changes: 23 additions & 37 deletions src/common/ButtonForClaiming/index.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,41 @@
import { useEffect } from 'react';
import {
useConnectModal,
} from '@rainbow-me/rainbowkit';
import { useConnectModal } from '@rainbow-me/rainbowkit';
import Button from '../Button';
import{ DownloadIcon } from '../../assets/icons';
import { useWegaStore, useBlockchainApiHooks } from '../../hooks';
import { useSelector } from 'react-redux';
import { useGetSet } from 'react-use';
import { selectGameById } from '../../containers/App/api';
import { HexishString } from '../../models';
import { useWegaStore } from '../../hooks';
import { useGlobalModalContext, MODAL_TYPES } from "../../common/modals";
import { Wega } from '../../models';
import 'twin.macro'

interface ButtonForClaimingProps {
gameId: number;
game: Wega;
}
export const ButtonForClaiming = ({ gameId }: ButtonForClaimingProps) => {
const game = useSelector(state => selectGameById(state, gameId));

export const ButtonForClaiming = ({ game }: ButtonForClaimingProps) => {
const { wallet } = useWegaStore()
const { openConnectModal } = useConnectModal();
const [isPlayerWinner, setIsPlayerWinner] = useGetSet<boolean>(false);
const { useGetWinnersQuery, useClaimMutation } = useBlockchainApiHooks;
const { getWinners, data: winners } = useGetWinnersQuery();
const { claim, isLoading: isClaimingLoading } = useClaimMutation();

const handleClaim = async (escrowHash: HexishString) => {
claim(escrowHash);
}

useEffect(() => {
if(game && game?.wager) {
getWinners(game.wager.wagerHash as HexishString);
}
if(winners && winners.length > 0 && wallet && wallet?.address) {
setIsPlayerWinner(winners.some((winner: any) => winner.toLowerCase() === wallet?.address))
}
console.log(winners);
}, [winners?.length, game, wallet, wallet?.address, winners]);
const { showModal, hideModal } = useGlobalModalContext();

const handleClaim = async (wallet: any) => {
showModal(MODAL_TYPES.CLAIM_MODAL, {
game,
wallet,
hide: hideModal,
}, true);
}

return wallet && game && winners && isPlayerWinner() ? (!wallet && openConnectModal ?
return (!wallet && openConnectModal ?
<Button
buttonType="secondary"
buttonType="primary"
className="flex items-center"
onClick={openConnectModal}
>
Claim
<DownloadIcon tw="h-[16px] w-[16px] ms-[5px]" />
</Button> :
<Button buttonType="secondary" className="flex items-center" onClick={() => handleClaim(game.wager.wagerHash as HexishString)} >
{ isClaimingLoading ? "Loading..." : "Claim" }
<DownloadIcon tw="h-[16px] w-[16px] ms-[5px]" />
<Button buttonType="primary" className="flex items-center" onClick={() => handleClaim(wallet)} >
Claim
<DownloadIcon tw="h-[16px] w-[16px] ms-[5px] dark:stroke-blanc" />
</Button>
) : <></>
}
// sdfasdf
)
}
23 changes: 15 additions & 8 deletions src/common/ClaimBar/index.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { useEffect } from 'react';
import { utils } from 'ethers';
import {
GameTypeBadgeWrapper,
Expand All @@ -15,14 +16,15 @@ import {
CurrencyTypes,
CurrencyTypesEnum,
AllPossibleCurrencyTypes,
AllPossibleWagerTypes
AllPossibleWagerTypes,
HexishString,
} from '../../models';
import { dateFromTs, parseBarCount } from '../../utils';
import { Count } from './types'
import{ BarDiceIcon, BarCoinIcon, USDCIcon, USDTIcon} from '../../assets/icons';
import { selectGameById } from '../../containers/App/api';
import { useSelector } from 'react-redux'
import { useWegaStore } from '../../hooks'
import { useWegaStore, useBlockchainApiHooks } from '../../hooks'
import { ButtonForClaiming } from '../ButtonForClaiming';
export const BADGE_TEXTS: any = {
[WegaTypes[WegaTypesEnum.DICE]]: 'Dice',
Expand All @@ -42,8 +44,15 @@ function ClaimBar({
...rest
}: { gameId: number, count: number } & React.Attributes & Partial<React.AllHTMLAttributes<HTMLDivElement>> & ClaimBarProps) {
const game = useSelector(state => selectGameById(state, gameId));
const { user } = useWegaStore();
return game && user?.uuid && (
const { user, wallet } = useWegaStore();
const { useGetWinnersQuery } = useBlockchainApiHooks;
const { getWinners, data: winners } = useGetWinnersQuery();

useEffect(() => {
if(game && !winners && game.wager && game.gameType && game.wager.wagerHash ) getWinners(game.gameType, game.wager.wagerHash as HexishString);
}, [winners, game?.wager, game?.gameType, game?.wager?.wagerHash])

return game && wallet?.address && user?.uuid && winners && (winners.includes(wallet.address) || winners.includes(wallet.address)) ? (
<BarWrapper {...rest}>
<Count>{parseBarCount(count)}</Count>
{/* date */}
Expand All @@ -62,11 +71,9 @@ function ClaimBar({
{/* escrow link button */}

{/* render for a joinable game */}
<>
<ButtonForClaiming gameId={game.id} />
</>
<ButtonForClaiming game={game} />
</BarWrapper>
)
) : <></>
}

export default ClaimBar;
Expand Down
Empty file.
Loading

0 comments on commit 5a2dbeb

Please sign in to comment.