feat: add modal warning, cleanup apis

Misfits-Labs · Dec 4, 2023 · ec73191 · ec73191
1 parent cdd2f52
commit ec73191
Show file tree

Hide file tree

Showing 41 changed files with 736 additions and 171 deletions.
diff --git a/src/assets/icons/HamburgerIcon.tsx b/src/assets/icons/HamburgerIcon.tsx
@@ -1,14 +1,13 @@
-import { SVGProps } from "react"
+import { SVGProps, forwardRef } from "react"
 
-const HamburgerIcon = (props: SVGProps<SVGSVGElement>) => (
+const HamburgerIcon = forwardRef((props: SVGProps<SVGSVGElement>, ref: any) => (
   <svg
-    // width={22}
-    // height={20}
     viewBox="0 0 24 24"
     fill="none"
     id="hamburger"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
+    ref={ref}
   >
     <path
       id="closed"
@@ -19,16 +18,15 @@ const HamburgerIcon = (props: SVGProps<SVGSVGElement>) => (
       }}
       d="M 1.5,0.5 A 1.5,1.5 0 0 0 0,2 1.5,1.5 0 0 0 1.5,3.5 h 19 A 1.5,1.5 0 0 0 22,2 1.5,1.5 0 0 0 20.5,0.5 Z m 12,8 A 1.5,1.5 0 0 0 12,10 a 1.5,1.5 0 0 0 1.5,1.5 h 7 A 1.5,1.5 0 0 0 22,10 1.5,1.5 0 0 0 20.5,8.5 Z m -12,8 A 1.5,1.5 0 0 0 0,18 1.5,1.5 0 0 0 1.5,19.5 h 19 A 1.5,1.5 0 0 0 22,18 1.5,1.5 0 0 0 20.5,16.5 Z"
     />
-    <path
+    {/* <path
       id="open"
       style={{
           color: "#000000",
           fill: "#ffffff",
           strokeLinecap: "round",
         }}
       d="m 2.0859375,0.48632812 a 1.5,1.5 0 0 0 -1.0605469,0.43945313 1.5,1.5 0 0 0 0,2.12109375 l 8.8789063,8.878906 -8.8789063,8.878907 a 1.5,1.5 0 0 0 0,2.121093 1.5,1.5 0 0 0 2.1210938,0 l 8.8789066,-8.878906 8.878906,8.878906 a 1.5,1.5 0 0 0 2.121094,0 1.5,1.5 0 0 0 0,-2.121093 l -8.878907,-8.878907 6.029297,-6.0292966 2.84961,-2.8496094 a 1.5,1.5 0 0 0 0,-2.12109375 1.5,1.5 0 0 0 -1.060547,-0.43945313 1.5,1.5 0 0 0 -1.060547,0.43945313 L 18.054688,3.7753906 12.025391,9.8046875 3.1464844,0.92578125 A 1.5,1.5 0 0 0 2.0859375,0.48632812 Z"
-    />
+    /> */}
   </svg>
-)
-
+))
 export default HamburgerIcon;
diff --git a/src/common/Button/types.ts b/src/common/Button/types.ts
@@ -23,11 +23,12 @@ interface ButtonProps {
 
 export const PrimaryButton = styled(BaseButton)<ButtonProps>(
   ({disabled}) => !disabled ? [
-    tw`dark:text-pretu dark:bg-gradient-to-r from-oranjo-blanc to-oranjo hover:outline hover:outline-blanc`,
+    tw`dark:text-pretu dark:bg-gradient-to-r from-oranjo-blanc to-oranjo`,
     `
     box-shadow: 0px 1px 5px 0px #090300;
     &:hover {
-      outline-width: 1.5px;
+      outline: 1.5px solid #FDFDFD;
+      --webkit-outline: 1.5px solid #FDFDFD;
     }
     `
   ] : [

diff --git a/src/common/ButtonForJoinableGame/index.tsx b/src/common/ButtonForJoinableGame/index.tsx
@@ -24,12 +24,12 @@ export const ButtonForJoinableGame = ({ gameType, gameId, gameUuid }: ButtonForJ
       >
       Join
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
-    </Button> : !isGamePlayable ? <Link to={`/${gameType.toLowerCase()}/join/${gameUuid}`} state={{ gameUuid, gameId }}>
+    </Button> : !isGamePlayable ? <Link to={`/join/${gameType.toLowerCase()}/${gameUuid}`} state={{ gameUuid, gameId }}>
       <Button buttonType="secondary" className="flex items-center">
         Join
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
       </Button>
-    </Link> : <Link to={`/${gameType.toLowerCase()}/play/${gameUuid}`} state={{ gameUuid, gameId }}>
+    </Link> : <Link to={`/play/${gameType.toLowerCase()}/${gameUuid}`} state={{ gameUuid, gameId }}>
       <Button buttonType="secondary" className="flex items-center">
         Play
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />

diff --git a/src/common/ButtonForWaitingGame/index.tsx b/src/common/ButtonForWaitingGame/index.tsx
@@ -26,15 +26,15 @@ export const ButtonForWaitingGame = ({ gameType, gameId, gameUuid }: ButtonForWa
       Play
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
     </Button> : isGamePlayable ? (
-    <Link to={`/${gameType.toLowerCase()}/play/${gameUuid}`} state={{ gameUuid, gameId }}>
+    <Link to={`/play/${gameType.toLowerCase()}/${gameUuid}`} state={{ gameUuid, gameId }}>
       <Button buttonType="secondary" className="flex items-center">
         Play
       <StarLoaderIcon className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />
       </Button>
     </Link>  
 
     ) : (  
-      <Link to={`/${gameType.toLowerCase()}/play/${gameUuid}`} state={{ gameUuid, gameId }}>
+      <Link to={`/play/${gameType.toLowerCase()}/${gameUuid}`} state={{ gameUuid, gameId }}>
         <Button buttonType="secondary" className="flex items-center w-[max-content]">
           Matching...
           <StarLoaderIcon loading={true} className="dark:fill-blanc h-[16px] w-[16px] ms-[5px]" />

diff --git a/src/common/ClaimBar/index.tsx b/src/common/ClaimBar/index.tsx
@@ -41,7 +41,7 @@ interface ClaimBarProps {
   gameId: number;
   count: number;
   networkId: number;
-  game: Wega;
+  game?: Wega;
 }
 
 function ClaimBar({ 
@@ -53,28 +53,24 @@ function ClaimBar({
   count,
   ...rest
 }: { gameId: number, count: number  } & React.Attributes & Partial<React.AllHTMLAttributes<HTMLDivElement>> & ClaimBarProps) {
-  const claimableGame = useSelector(state => selectGameById(state, gameId)) ?? game;
-  return (
+  let claimableGame = useSelector(state => selectGameById(state, gameId));
+  if(game) claimableGame = game;
+  return claimableGame && (
    <BarWrapper tw="grid grid-cols-10 w-full justify-between" {...rest}>
     <Count tw="w-[fit-content]">{parseBarCount(count)}</Count>
     {/* date */}
     <DateColumn>{dateFromTs(new Date(claimableGame.createdAt as string).getTime() * 1000)}</DateColumn>
-
     <WagerTypeBadgeWrapper tw="col-span-3 w-[fit-content]">
       <BadgeText>{formatEther(claimableGame.wager.wagerAmount)}</BadgeText>
       <BadgeIcon>{renderWagerBadge(claimableGame.wager.wagerType, claimableGame.wager.wagerCurrency)}</BadgeIcon>
       <BadgeText>{claimableGame.wager.wagerCurrency}</BadgeText>
     </WagerTypeBadgeWrapper>
-
-
     <div tw="col-span-2">
       <GameTypeBadgeWrapper tw="w-[fit-content]">
       {renderGameTypeBadge(claimableGame.gameType)}
       <BadgeText>{BADGE_TEXTS[claimableGame.gameType]}</BadgeText>
       </GameTypeBadgeWrapper>
     </div>
-
-
     {/* escrow link button */}
     <div tw="col-span-3">
       <div tw="flex items-center justify-end gap-x-[24px]">
@@ -83,7 +79,7 @@ function ClaimBar({
           <Link to={constructBlockExplorerHash(networkId, claimableGame.transactionHash as HexishString)} target="_blank" rel="noreferrer"><ArrowTrSquareIcon /></Link>
         </div>
         {/* render for a joinable game */}
-        <ButtonForClaiming  game={game} />
+        <ButtonForClaiming  game={claimableGame} />
       </div>
     </div>
    </BarWrapper>

diff --git a/src/common/FloatingOrbs/index.tsx b/src/common/FloatingOrbs/index.tsx
@@ -3,41 +3,60 @@ import { FloatingOrbContainer, FloatingOrbBlurContainer, FloatingOrbBlurContaine
 import { gsap, Sine } from 'gsap';
 import "twin.macro"
 
-
-export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & React.Attributes> = ({ children, ...props}: React.AllHTMLAttributes<HTMLDivElement> & React.Attributes) => {
+interface ReactProps extends React.AllHTMLAttributes<HTMLDivElement>, React.Attributes {}
+interface FloatingOrbProps extends ReactProps {
+  // eslint-disable-next-line no-unused-vars
+  customFloatingOrbs?: React.ReactNode & ReactProps | null,
+  animationTl?: gsap.core.Timeline;  
+}
+export const FloatingOrbs: React.FC<FloatingOrbProps> = ({ animationTl, customFloatingOrbs, children, ...props}: FloatingOrbProps) => {
   const orbContainerRef = useRef<any>(null);
-
   useLayoutEffect(() => {
     const context = gsap.context(() => {
-      const tl = gsap.timeline();
-      const duration = 5;
-      const orbs = orbContainerRef.current.querySelectorAll('.orb');
-      tl.repeatDelay(0.25);
-      tl.fromTo(orbs[0], { scale: 1.1, rotate: '0deg', x: "-=5rem", y: "+=3rem" }, { scale: 1.05 , rotate: '180deg', x: "+=3rem", y: "-=5rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, 'start')
-      tl.fromTo(orbs[1], { scale: 1.05, rotate: '0deg', x: "-=3rem", y: "+=3rem" }, { scale: 1.1 , rotate: '180deg', x: "+=3rem", y: "-=3rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, '<')
-      tl.fromTo(orbs[2], { scale: 1.2, rotate: '0deg', x: "-=3rem", y: "+=3rem" }, { scale: 1 , rotate: '180deg', x: "+=3rem", y: "-=6rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, '<')
-      tl.yoyo(true);
+      if(!animationTl){
+        const tl = gsap.timeline();
+        const orbs = orbContainerRef.current.querySelectorAll('.orb');
+        const duration = 5;
+        tl.repeatDelay(0.25);
+        tl.fromTo(orbs[0], { scale: 1.1, rotate: '0deg', x: "-=5rem", y: "+=3rem" }, { scale: 1.05 , rotate: '180deg', x: "+=3rem", y: "-=5rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, 'start')
+        tl.fromTo(orbs[1], { scale: 1.05, rotate: '0deg', x: "-=3rem", y: "+=3rem" }, { scale: 1.1 , rotate: '180deg', x: "+=3rem", y: "-=3rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, '<')
+        tl.fromTo(orbs[2], { scale: 1.2, rotate: '0deg', x: "-=3rem", y: "+=3rem" }, { scale: 1 , rotate: '180deg', x: "+=3rem", y: "-=6rem", repeat: -1, yoyo: true,  duration, ease: Sine.easeInOut }, '<')
+        tl.yoyo(true);
+      } else {
+        animationTl.play();
+      }
     }, orbContainerRef.current);
     return () => context.revert(); 
   });
-
   return !children ? (
    <FloatingOrbContainer tw="overflow-clip" {...props}>
     <FloatingOrbBlurContainerWithoutBackdrop></FloatingOrbBlurContainerWithoutBackdrop>
-    <div tw="relative flex justify-center items-center w-full sm:w-[100vw] sm:h-[100vh]" ref={orbContainerRef}>
-      <Orb className="orb" tw="dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
-      <Orb className="orb" tw="dark:bg-[#B80D57] translate-x-[-15rem] translate-y-[5rem] z-[-27]"/>
-      <Orb className="orb" tw="dark:bg-oranjo translate-x-[15rem] translate-y-[-2.5rem] z-[-25] z-[-26]"/>
-    </div>
-   </FloatingOrbContainer> 
+    { !customFloatingOrbs ? (
+      <div tw="relative flex justify-center items-center w-full sm:w-[100vw] sm:h-[100vh]" ref={orbContainerRef}>       
+        <Orb className="orb" tw="w-[350px] h-[350px] rounded-[100%] dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
+        <Orb className="orb" tw="w-[350px] h-[350px] rounded-[100%] dark:bg-[#B80D57] translate-x-[-15rem] translate-y-[5rem] z-[-27]"/>
+        <Orb className="orb" tw="w-[350px] h-[350px] rounded-[100%] dark:bg-oranjo translate-x-[15rem] translate-y-[-2.5rem] z-[-25] z-[-26]"/>
+      </div> 
+     ) : <div tw="absolute flex justify-center items-center w-full h-full overflow-clip rounded-[inherit]" ref={orbContainerRef}> { customFloatingOrbs } </div>     
+    }   
+  </FloatingOrbContainer> 
   ) : <FloatingOrbContainer tw="relative w-full h-full" {...props}>
       <FloatingOrbBlurContainer tw="rounded-[inherit]"></FloatingOrbBlurContainer>
-      <div tw="absolute flex justify-center items-center w-full h-full overflow-clip rounded-[inherit]" ref={orbContainerRef}>
-        <Orb className="orb" tw="dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
-        <Orb className="orb" tw="dark:bg-[#B80D57] translate-x-[-15rem] translate-y-[5rem] z-[-27]"/>
-        <Orb className="orb" tw="dark:bg-oranjo translate-x-[15rem] translate-y-[-2.5rem] z-[-25] z-[-26]"/>
-      </div>
+      {
+        !customFloatingOrbs ? (
+          <div tw="absolute flex justify-center items-center w-full h-full overflow-clip rounded-[inherit]" ref={orbContainerRef}>
+            <Orb className="orb" tw="w-[350px] h-[350px] rounded-[100%] dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
+            <Orb className="orb" tw="w-[350px] h-[350px] rounded-[100%] dark:bg-[#B80D57] translate-x-[-15rem] translate-y-[5rem] z-[-27]"/>
+            <Orb className="orb" tw="w-[350px] h-[350px] rounded-[100%] dark:bg-oranjo translate-x-[15rem] translate-y-[-2.5rem] z-[-25] z-[-26]"/>
+          </div>
+        ) : ( 
+            <div tw="absolute flex justify-center items-center w-full h-full overflow-clip rounded-[inherit]" ref={orbContainerRef}>
+              { customFloatingOrbs }
+            </div>
+          )
+      }
       {children}
     </FloatingOrbContainer>
    }
 
+export const CustomOrbs = (props: ReactProps): React.ReactNode | null => <>{props.children}</>
diff --git a/src/common/FloatingOrbs/types.ts b/src/common/FloatingOrbs/types.ts
@@ -25,9 +25,13 @@ export const FloatingOrbBlurContainerWithoutBackdrop = styled.div`
   ${tw`z-[-21] bg-pretu bg-opacity-[0.01]`}
   -webkit-overflow: clip;
 `
-
-export const Orb = styled.div`
-  ${tw`pointer-events-none absolute w-[350px] h-[350px] rounded-[100%] blur-[75px]`}
-  filter: blur(75px);
-  -webkit-filter: blur(75px);
-`
+export interface OrbProps {
+  blur?: number;
+}
+export const Orb = styled.div<OrbProps>((props: OrbProps) => [`
+--orb-blur: ${props.blur ?? 75}px;
+  position: absolute;
+  pointer-events: none;
+  filter: blur(var(--orb-blur));
+  -webkit-filter: blur(var(--orb-blur));
+`])
diff --git a/src/common/Section/types.tsx b/src/common/Section/types.tsx
@@ -42,8 +42,21 @@ export const SectionHeaderTitle = styled.span`
   line-height: calc(var(--font-size) * 1.5);
   justify-content: center;
 `
+
+export const SectionHeaderTitleLarge = styled.span`
+  --font-size: 67px;
+  font-style: normal;
+  font-weight: 600;
+  text-align: center;
+  font-size: var(--font-size);
+  line-height: calc(var(--font-size) * 1.5);
+  justify-content: center;
+`
+
 export const SectionHeaderContainer = styled.div`
   margin-bottom: 48px;
   height: calc(var(--font-size) * 1.5);
   display: flex;
 `
+
+
diff --git a/src/common/modals/GlobalModal.tsx b/src/common/modals/GlobalModal.tsx
@@ -4,6 +4,7 @@ import CoinflipWinnerModal  from './CoinflipWinnerModal';
 import CoinflipLoserModal  from './CoinflipLoserModal';
 import DiceLoserModal  from './DiceLoserModal';
 import DiceWinnerModal  from './DiceWinnerModal';
+import WebAppInBetaModal  from './WebAppInBetaModal';
 import { ClaimModal } from './ClaimModal';
 import BounceFromTop from './BounceFromTop';
 
@@ -13,6 +14,7 @@ export const MODAL_TYPES = {
   DICE_WINNER_MODAL: 'DICE_WINNER_MODAL',
   DICE_LOSER_MODAL: 'DICE_LOSER_MODAL',
   CLAIM_MODAL: 'CLAIM_MODAL',
+  WARN_IN_BETA_MODAL: 'WARN_IN_BETA_MODAL',
  }
 
 const MODAL_COMPONENTS: any = {
@@ -21,6 +23,7 @@ const MODAL_COMPONENTS: any = {
   [MODAL_TYPES.DICE_WINNER_MODAL]: DiceWinnerModal,  
   [MODAL_TYPES.DICE_LOSER_MODAL]: DiceLoserModal,
   [MODAL_TYPES.CLAIM_MODAL]: ClaimModal,
+  [MODAL_TYPES.WARN_IN_BETA_MODAL]: WebAppInBetaModal,
 }
 
 type ContextType = {
@@ -72,6 +75,7 @@ const GlobalModal: React.FC<GlobalModalProps> = ({ children }) => {
     modalProps: any,
     persist?: boolean,
     ) => {
+      console.log(modalType)
     setStore({
       ...store,
       modalType,

diff --git a/src/common/modals/WebAppInBetaModal.tsx b/src/common/modals/WebAppInBetaModal.tsx
@@ -0,0 +1,33 @@
+import { WinnerDeclarationContainer } from './types';
+import { Link } from 'react-router-dom'
+import { ExtraLargeText, NormalText, SmallText } from '../../components/CreateGameCard/types';
+import { RestartIcon } from '../../assets/icons';
+import Button from '../Button';
+import 'twin.macro';
+
+export interface DiceWinnerModalProps {
+  hide: any,
+}
+const WebAppInBetaModal = ({ hide }: DiceWinnerModalProps) => {
+  return (
+   <WinnerDeclarationContainer tw="items-center max-w-[550px] p-[24px] gap-y-[32px]">
+    <ExtraLargeText>Wega web-app is still in Beta</ExtraLargeText>
+    <NormalText tw="text-[21px] text-center text-[#787878] font-[400] font-primary leading-[22px]">We are excited for you to be able to play! The Wega platform front- and back-end are still being tested. The Wega team does not bare any responsibility for any loss of funds. Play at your own risk</NormalText>
+    <div tw="flex flex-col items-center gap-y-[8px]">
+      <div tw="flex gap-x-[25px] items-center">
+      <Link to="https://wega.fun" tw="min-w-[197px]" target="_blank" rel="noreferrer">
+        <Button buttonType="secondary" tw="flex items-center w-full justify-center">
+         Return to wega.fun
+          <RestartIcon  tw="h-[16px] w-[16px] ms-[5px]"/>
+        </Button>
+      </Link>
+      <Button buttonType="primary" tw="flex items-center justify-center min-w-[197px]" onClick={hide}>
+       Proceed
+      </Button>
+      </div>
+      <SmallText tw="font-[16px] text-shinishi leading-[15px] font-primary">By proceeding you are aware of the risks of using Wega platform.</SmallText>
+    </div>
+   </WinnerDeclarationContainer>
+  )
+}
+export default WebAppInBetaModal
diff --git a/src/common/modals/images/warning-triangle.png b/src/common/modals/images/warning-triangle.png
diff --git a/src/components/CreateGameCard/CreateCoinFlipGameCard.tsx b/src/components/CreateGameCard/CreateCoinFlipGameCard.tsx
@@ -155,7 +155,7 @@ export const CreateCoinFlipGameCard = ({
       allowanceQuery.refetch();
 
       if(createGameStatus === 'fulfilled' && createGameResponse) {
-        navigateToGameUi(`/${gameType.toLowerCase()}/play/${createGameResponse.uuid}`, 1500, { replace: true,
+        navigateToGameUi(`/play/${gameType.toLowerCase()}/${createGameResponse.uuid}`, 1500, { replace: true,
           state: { gameId: createGameResponse.id, gameUuid: createGameResponse.uuid } });
       }
     }

diff --git a/src/components/CreateGameCard/CreateDiceGameCard.tsx b/src/components/CreateGameCard/CreateDiceGameCard.tsx
@@ -159,7 +159,7 @@ export const CreateDiceGameCard = ({
     if(playerAddress && tokenAddress){
       allowanceQuery.refetch();
       if(createGameStatus === 'fulfilled' && createGameResponse) {
-        navigateToGameUi(`/${gameType.toLowerCase()}/play/${createGameResponse.uuid}`, 1500, { replace: true, 
+        navigateToGameUi(`/play/${gameType.toLowerCase()}/${createGameResponse.uuid}`, 1500, { replace: true, 
           state: { gameId: createGameResponse.id, gameUuid: createGameResponse.uuid } 
         });
       }

diff --git a/src/components/GameCard/index.tsx b/src/components/GameCard/index.tsx
@@ -74,7 +74,7 @@ export const DiceGameCard = () => {
         Roll the dice, the player with the highest number wins.
       </GameCardDescription>
       {
-        <Link to="/dice/create" tw="w-[75%]" state={{ gameType: WegaTypes[WegaTypesEnum.DICE] }}><Button buttonType="primary" content='Create Game' tw="w-[100%]" /></Link>
+        <Link to="/create/dice" tw="w-[75%]" state={{ gameType: WegaTypes[WegaTypesEnum.DICE] }}><Button buttonType="primary" content='Create Game' tw="w-[100%]" /></Link>
       }
       </GameCardBody>
     </GameCardContainer>
@@ -85,7 +85,6 @@ export const CoinFlipGameCard = () => {
   const iconRef = useRef<SVGSVGElement>(null);
   const orbRef = useRef<SVGSVGElement>(null);
   const [hovering, setHovering] = useState<boolean>();
-
   useEffect(() => {    
     const ctx = gsap.context(() => {
       const duration = 0.65;
@@ -134,9 +133,8 @@ export const CoinFlipGameCard = () => {
      <GameCardDescription>
       Flip the coin, the player that receives their side wins.
      </GameCardDescription>
-
      {
-      <Link to="/coinflip/create" tw="w-[75%]" state={ { gameType: WegaTypes[WegaTypesEnum.COINFLIP] }} ><Button buttonType="primary" content='Create Game' tw="w-[100%]" /></Link>
+      <Link to="/create/coinflip" tw="w-[75%]" state={ { gameType: WegaTypes[WegaTypesEnum.COINFLIP] }} ><Button buttonType="primary" content='Create Game' tw="w-[100%]"/></Link>
      }
     </GameCardBody>
    </GameCardContainer>

diff --git a/src/components/JoinGameCard/JoinCoinFlipGameCard.tsx b/src/components/JoinGameCard/JoinCoinFlipGameCard.tsx
@@ -136,7 +136,7 @@ const JoinCoinFlipGameCard = ({
         }
       ).unwrap();
       toast.success('Deposit success', { ...toastSettings('success', 'top-center') as any });
-      navigateToGameUi(`/${gameType.toLowerCase()}/play/${gameUuid}`, 1500, { 
+      navigateToGameUi(`/play/${gameType.toLowerCase()}/${gameUuid}`, 1500, { 
         replace: true, 
         state: { 
           gameId, gameUuid 

diff --git a/src/components/JoinGameCard/JoinDiceGamecard.tsx b/src/components/JoinGameCard/JoinDiceGamecard.tsx
@@ -108,7 +108,7 @@ const JoinGameDiceCard: React.FC<JoinDiceGameCardProps> = ({
       }).unwrap();
       await joinGame({ newPlayerUuid: playerUuid, gameUuid }).unwrap();
       await updateGame({ uuid: gameUuid, state: WegaState.PLAYING }).unwrap();
-      navigateToGameUi(`/${gameType.toLowerCase()}/play/${gameUuid}`, 1500, { replace: true, state: { gameId: gameId, gameUuid } });
+      navigateToGameUi(`/play/${gameType.toLowerCase()}/${gameUuid}`, 1500, { replace: true, state: { gameId: gameId, gameUuid } });
       toast.success('Deposit success', { ...toastSettings('success', 'top-center') as any });
     } catch (e: any){
       console.log(e)