fix: loading of wins, and gradient border on claim modal

src/common/modals/ClaimModal.tsx

@@ -1,6 +1,6 @@
 import { formatUnits } from 'ethers';
 import tw, { styled } from 'twin.macro';
-import { WinnerDeclarationContainer, GradientDiv } from './types';
+import { WinnerDeclarationContainer } from './types';
 import { NormalText, SmallText } from '../../components/CreateGameCard/types';
 import { DownloadIcon } from '../../assets/icons';
 import arrowDown from '../../assets/icons/arrow-down-icon.png';
@@ -109,9 +109,9 @@ export const ClaimModal = ({ hide, game, wallet, tokenDecimals
      <div tw="flex flex-row items-end justify-between w-full">
       <NormalText tw="dark:text-shinishi">Total claim before fees</NormalText>
       {
-        !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
-          parseFloat(String((Number(formatUnits(calculateFeesQuery.data[feeAmountIndex], tokenDecimals)) + Number(formatUnits(calculateFeesQuery.data[sendAmountIndex], tokenDecimals))/2))).toFixed(0) 
-        } {game.wager.wagerCurrency}</NormalText>
+        !calculateFeesQuery.data ? 'calculating...' : <NormalText> {
+          parseFloat(formatUnits(game.wager.wagerAmount, tokenDecimals)).toFixed(0).concat(` ${game.wager.wagerCurrency}`)
+        }</NormalText>
       }
      </div>
 
@@ -121,29 +121,31 @@ export const ClaimModal = ({ hide, game, wallet, tokenDecimals
     </div> */}
     </div>
     <div tw="w-full flex flex-col justify-center gap-y-[8px]">
-      <NormalText tw="dark:text-shinishi text-center">Fee details</NormalText>
+      {/* <NormalText tw="dark:text-shinishi text-center">Fee details</NormalText> */}
       <div tw="flex flex-col w-full rounded-[4px] p-[12px]">
-
         <NormalText tw="dark:text-shinishi text-center">Platform fee (2%)</NormalText>
         <div tw="h-[1px] w-[90%] bg-[#3A3A3A] my-[8px]"></div>
         <div tw="w-full flex justify-between">
           <NormalText tw="dark:text-shinishi">You pay</NormalText>
           {
             !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
-              parseFloat(formatUnits(calculateFeesQuery.data[feeAmountIndex], tokenDecimals) ).toFixed(2)
-            } {game.wager.wagerCurrency}</NormalText>
+              parseFloat(formatUnits(calculateFeesQuery.data[feeAmountIndex], tokenDecimals)).toFixed(2).concat(` ${game.wager.wagerCurrency}`)
+            }</NormalText>
           }
         </div>
       </div>
     </div> 
-    <GradientDiv tw="h-[max-content] flex justify-between gap-[10px] dark:bg-[#414141] py-[8px] px-[5px]">
-      <NormalText tw="dark:text-blanc">Net winnings</NormalText>
-      {
-        !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
-          parseFloat(String(formatUnits(calculateFeesQuery.data[sendAmountIndex], tokenDecimals))).toFixed(2)
-        } {game.wager.wagerCurrency}</NormalText>
-      }
-    </GradientDiv>
+    <div tw="w-full rounded-[5px] p-[2px] dark:bg-gradient-to-r from-[#5DEDD3] to-[#00D62F]">
+      <div tw="w-full py-[8px] px-[5px] h-[max-content] flex items-center justify-between gap-[10px] dark:bg-[#414141] rounded-[5px]">
+        <NormalText tw="dark:text-blanc">Net winnings</NormalText>
+        {
+          !calculateFeesQuery.data ? 'calculating...' : <NormalText>{
+            parseFloat(String(formatUnits(calculateFeesQuery.data[sendAmountIndex], tokenDecimals))).toFixed(2).concat(` ${game.wager.wagerCurrency}`)
+          }</NormalText>
+        }
+
+      </div>
+    </div>
     <div tw="flex flex-col w-full items-center gap-y-[8px]">
       <SmallText tw="text-center font-[14px] font-[400] leading-[15px]">Why is withdrawal amount higher on block explorer?</SmallText>
       <SmallText tw="text-shinishi text-center font-[12px] font-[300] leading-[15px]" >When claiming a win you also claim back your initial wager deposit.</SmallText>

src/components/WegaGames/index.tsx

@@ -23,7 +23,6 @@ export const JoinableAndPlayableGames: React.FC<JoinableAndPlayableGamesProps> =
  const [sortedGames, setSortedGames] = useState<Wega[]>();
 
  useEffect(() => {
-  console.log(sortedGames)
    if(isSuccess && data && data?.entities) {                                     
      const dataArray = data?.ids.map((id: number) => data.entities[id]) as Wega[];
      const playableGames = filterPlayableGames(dataArray, userUuid);

src/containers/FooterMobile/index.tsx

@@ -53,7 +53,7 @@ const FooterMobile = () => {
               <Link to="https://wega-1.gitbook.io/wega-lite-paper/" target="_blank">
                 <NormalText>Documentation</NormalText>
               </Link>
-              <Link to="https://app.wega.fun/#/" target="_blank">
+              <Link to="https://app.wega.fun" target="_blank">
                 <NormalText tw="text-transparent dark:bg-gradient-to-r from-oranjo-blanc to-oranjo  bg-clip-text">Play Beta(Web only)</NormalText>
               </Link>
             </div>

src/containers/Layout/index.tsx

@@ -3,7 +3,8 @@ import {
   Outlet, 
   useNavigation, 
   type Location, 
-  type useMatches, 
+  type useMatches,
+  useLoaderData,
   ScrollRestoration 
 } from 'react-router-dom';
 import Navigation from '../Navigation'
@@ -12,12 +13,14 @@ import { Toaster } from 'react-hot-toast';
 import { useMediaQuery, useWarnAppInBeta } from '../../hooks';
 import NavigationMobile from '../NavigationMobile';
 import FooterMobile from '../FooterMobile';
+import { ComponentLoader } from '../../common/loaders';
 import 'twin.macro';
 
 const Layout = () => {
   useWarnAppInBeta();
   const navigation = useNavigation();
   const { windowIsCurrentlyMobile } = useMediaQuery();
+  useLoaderData();
   const getKey = useCallback(
     (location: Location, matches: ReturnType<typeof useMatches>) => {
       const match = matches.find((m) => (m.handle as any)?.scrollMode);
@@ -31,14 +34,12 @@ const Layout = () => {
 
  return (
     <>
-     <div
-       className="spinner"
+     <ComponentLoader
+       tw="w-[100vw] h-[100vh] flex justify-center"
        style={{
          display: navigation.state === "idle" ? "none" : "block",
        }}
-     >
-       Navigating...
-     </div>
+     />
      { windowIsCurrentlyMobile ? <NavigationMobile /> : <Navigation /> }
      <div tw="min-h-[100vh] flex flex-col sm:mt-0 justify-between relative z-[inherit]">
         <Outlet />

src/containers/Router/index.tsx

@@ -1,5 +1,5 @@
 import {
- createHashRouter
+ createBrowserRouter,
 } from "react-router-dom";
 import Layout from "../Layout";
 import PlayPage  from '../PlayPage';
@@ -9,18 +9,25 @@ import PlayGamePage  from '../PlayGamePage';
 import ErrorPage from '../ErrorPage';
 import WinsPage from '../WinsPage';
 import { GlobalModal } from '../../common/modals';
-
+import { gamesApiSlice } from '../../components/WegaGames/apiSlice'
+import { createGameApiSlice } from '../../components/CreateGameCard/apiSlice'
+import { store } from "../../app/store";
 
 declare global  {
  interface Window{
    ethereum?: any
  }
 }
 
-const router = createHashRouter([
+const router = createBrowserRouter([
  {
   path: '/',
   element: <GlobalModal><Layout /></GlobalModal>,
+  loader: async () => {
+    store.dispatch(gamesApiSlice.endpoints.getGames.initiate(undefined)); // loads all games
+    store.dispatch(createGameApiSlice.endpoints.getRandomNumber.initiate(undefined)); // loads all games
+    return null;
+  },
   children: [
    {
     index: true,
@@ -40,6 +47,7 @@ const router = createHashRouter([
    },
    {
     path: 'wins',
+    loader: async () =>  store.dispatch(gamesApiSlice.endpoints.getGames.initiate({ state: 'COMPLETED' })),
     element: <WinsPage />,
    },
    {
@@ -50,7 +58,7 @@ const router = createHashRouter([
  },
 ])
 
-export const mobileRouter = createHashRouter([
+export const mobileRouter = createBrowserRouter([
  {
   path: '/',
   element: <Layout />,

src/main.tsx

@@ -3,13 +3,11 @@ import ReactDOM from "react-dom/client"
 import App from "./containers/App";
 import { Provider as ReduxProvider } from 'react-redux';
 import { store } from './app/store';
-import { gamesApiSlice } from './components/WegaGames/apiSlice.ts'
 import './themes/index.css'
 import GlobalStyles  from "./themes/GlobalStyles.tsx";
 import WalletProvider from './containers/WalletProvider/index.tsx' 
 // TODO
-  // remove old api files
-store.dispatch(gamesApiSlice.endpoints.getGames.initiate(undefined));
+// remove old api files
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <ReduxProvider store={store}>