feat: complete loading of winning section

src/app/apiSlice.ts

@@ -10,6 +10,6 @@ const baseQuery = fetchBaseQuery({
 
 export const appApiSlice = createApi({
   baseQuery,
-  reducerPath: 'wega-api',
+  reducerPath: 'wegaApi',
   endpoints: () => ({})
 });

src/app/blockchainApiSlice.ts

@@ -3,7 +3,7 @@ import { createApi  } from '@reduxjs/toolkit/query/react';
 import { customBlockchainBaseQuery } from '../libs/rtk';
 import { BlockchainAPIBase } from '../libs/wagmi';
 
-const baseUrl = 'wega-blockchain-api'
+const baseUrl = 'wegaBlockchainApi'
 const baseQuery = customBlockchainBaseQuery({ baseUrl }, BlockchainAPIBase);
 export const blockchainApiSlice = createApi({
   baseQuery,

src/app/store.ts

@@ -1,25 +1,22 @@
 import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
-import appReducer from '../containers/App/AppSlice'
-import { appApiSlice } from '../containers/App/api';
+import walletConnectionReducer from '../components/RainBowConnectButton/connectionSlice'
 import { blockchainApiSlice } from './blockchainApiSlice';
-import { appApiSlice as newAppApiSlice } from './apiSlice';
+import { appApiSlice } from './apiSlice';
 import intlReducer from '../containers/LanguageProvider/intlSlice'
 import blockchainReducer from '../api/blockchain/blockchainSlice'
 
 export const store = configureStore({
   reducer: {
+    connection: walletConnectionReducer,
     [appApiSlice.reducerPath]: appApiSlice.reducer,
-    [newAppApiSlice.reducerPath]: newAppApiSlice.reducer,
     [blockchainApiSlice.reducerPath]: blockchainApiSlice.reducer,
     blockchain: blockchainReducer,
-    app: appReducer,
     language: intlReducer,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware({
     serializableCheck: false
   }).concat(
     appApiSlice.middleware,
-    newAppApiSlice.middleware,
     blockchainApiSlice.middleware
   ),
   devTools: import.meta.env.VITE_REDUX_DEBUG === "true" ? true : false

src/common/ClaimBar/index.tsx

@@ -17,13 +17,13 @@ import {
  AllPossibleCurrencyTypes,
  AllPossibleWagerTypes,
  HexishString,
+ Wega
 } from '../../models';
 import { dateFromTs, parseBarCount } from '../../utils';
 import { Count } from './types'
 import{ BarDiceIcon, BarCoinIcon, USDCIcon, USDTIcon, ArrowTrSquareIcon} from '../../assets/icons';
-import { selectGameById } from '../../containers/App/api';
+import { selectGameById } from '../../components/WegaGames/apiSlice';
 import { useSelector } from 'react-redux' 
-import { useWegaStore } from '../../hooks'
 import { ButtonForClaiming } from '../ButtonForClaiming';
 import { constructBlockExplorerHash } from '../GameBar/utils';
 import { Link } from 'react-router-dom'
@@ -40,35 +40,37 @@ export const BADGE_TEXTS: any = {
 interface ClaimBarProps {
   gameId: number;
   count: number;
+  networkId: number;
+  game: Wega;
 }
 
 function ClaimBar({ 
   gameId,
+  networkId,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  css, 
+  css,
+  game, 
   count,
   ...rest
 }: { gameId: number, count: number  } & React.Attributes & Partial<React.AllHTMLAttributes<HTMLDivElement>> & ClaimBarProps) {
-  const game = useSelector(state => selectGameById(state, gameId));
-  const { user, wallet, network } = useWegaStore();  
-
-  return game && wallet?.address && user?.uuid && network?.id && (
-   <BarWrapper tw="grid grid-cols-10 w-[50vw] justify-between" {...rest}>
+  const claimableGame = useSelector(state => selectGameById(state, gameId)) ?? game;
+  return (
+   <BarWrapper tw="grid grid-cols-10 w-full justify-between" {...rest}>
     <Count tw="w-[fit-content]">{parseBarCount(count)}</Count>
     {/* date */}
-    <DateColumn>{dateFromTs(new Date(game.createdAt as string).getTime() * 1000)}</DateColumn>
+    <DateColumn>{dateFromTs(new Date(claimableGame.createdAt as string).getTime() * 1000)}</DateColumn>
 
     <WagerTypeBadgeWrapper tw="col-span-3 w-[fit-content]">
-      <BadgeText>{formatEther(game.wager.wagerAmount)}</BadgeText>
-      <BadgeIcon>{renderWagerBadge(game.wager.wagerType, game.wager.wagerCurrency)}</BadgeIcon>
-      <BadgeText>{game.wager.wagerCurrency}</BadgeText>
+      <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(game.gameType)}
-      <BadgeText>{BADGE_TEXTS[game.gameType]}</BadgeText>
+      {renderGameTypeBadge(claimableGame.gameType)}
+      <BadgeText>{BADGE_TEXTS[claimableGame.gameType]}</BadgeText>
       </GameTypeBadgeWrapper>
     </div>
 
@@ -78,7 +80,7 @@ function ClaimBar({
       <div tw="flex items-center justify-end gap-x-[24px]">
         <div tw="flex gap-x-[8px] ">
           <NormalText>view on explorer</NormalText>
-          <Link to={constructBlockExplorerHash(network.id as number, game.transactionHash as HexishString)} target="_blank" rel="noreferrer"><ArrowTrSquareIcon /></Link>
+          <Link to={constructBlockExplorerHash(networkId, claimableGame.transactionHash as HexishString)} target="_blank" rel="noreferrer"><ArrowTrSquareIcon /></Link>
         </div>
         {/* render for a joinable game */}
         <ButtonForClaiming  game={game} />

src/components/ClaimNFTWinsSection/index.tsx

@@ -3,16 +3,21 @@ import 'twin.macro';
 import { 
  LargeText, 
 } from "../../components/CreateGameCard/types";
-interface ClaimNFTWinsSection extends React.Attributes {
+import {
+  SectionHeader,
+ } from "../../common/Section/types"
+interface ClaimNFTWinsSection extends React.AllHTMLAttributes<HTMLDivElement> {
  gameIds: number[]
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function ClaimNFTWinsSection({ gameIds , ...rest }: ClaimNFTWinsSection) {
   // filter out the games of which the user is not the winner
   return (
-    <Section hdr="NFTs won" direction="col" tw="gap-y-[5rem]" { ...rest } >
-      <LargeText tw="text-shinishi">Coming soon.</LargeText>
+    <Section hdr={
+      <SectionHeader tw="w-full self-start">NFTs won</SectionHeader>
+    } direction="col" tw="gap-y-[24px]" { ...rest } >
+      <LargeText tw="text-shinishi text-center">Coming soon.</LargeText>
     </Section>
   )
 }

src/components/ClaimOnOtherNetworkSection/index.tsx

@@ -0,0 +1,25 @@
+import 'twin.macro';
+import { NormalText } from '../CreateGameCard/types';
+import Section from '../../common/Section';
+import optimismLogo from '../../assets/images/optimisim-logo.png'
+import arbitrumLogo from '../../assets/images/arbitrum-logo.png'
+
+function ClaimOnOtherNetworkSection(props: React.AllHTMLAttributes<HTMLDivElement>)  {
+  // filter out the games of which the user is not the winner
+  return ( <Section hdr="Claim on other networks" direction="col" {...props}>
+
+      <div tw="flex self-start gap-x-[24px] ">
+        <div tw="flex px-[10px] py-[5px] rounded-[5px] bg-[#2E2E2E] justify-center items-center gap-x-[10px]">
+          <img src={optimismLogo} alt="optimism-logo"  tw="w-[24px] h-[24px]"/>
+          <NormalText>Arbitrum - Coming soon</NormalText>
+        </div>
+
+        <div tw="flex px-[10px] py-[5px] rounded-[5px] bg-[#2E2E2E] justify-center items-center gap-x-[10px]">
+          <img src={arbitrumLogo} alt="arbitrum-logo" tw="w-[24px] h-[24px]" />
+          <NormalText>Optimisim - Coming soon</NormalText>
+        </div>
+      </div>
+    </Section> 
+  )
+}
+export default ClaimOnOtherNetworkSection;

src/components/ClaimTokenWinsSection/index.tsx

@@ -1,19 +1,15 @@
-import Section from '../../common/Section';
-import ClaimBar from '../../common/ClaimBar';
 import 'twin.macro';
-interface ClaimTokenWinsSectionProps extends React.Attributes {
- gameIds: number[]
+import { ClaimableGames } from '../WegaGames';
+import { HexishString } from '../../models';
+
+interface ClaimTokenWinsSectionProps extends React.AllHTMLAttributes<HTMLDivElement> {
+  userWalletAddress: HexishString;
+  gamesCount: number;
+  networkId: number;
 }
 
-function ClaimTokenWinsSection({ gameIds , ...rest }: ClaimTokenWinsSectionProps) {
+function ClaimTokenWinsSection({ networkId, userWalletAddress, gamesCount, ...rest }: ClaimTokenWinsSectionProps) {
   // filter out the games of which the user is not the winner
-  return (
-    <Section hdr="Tokens won" direction="col" tw="gap-2" { ...rest } >
-      {
-        gameIds.map(
-        (dg, i) => ( <ClaimBar count={i + 1} gameId={dg} key={`claim-wins-bar-${i}`} className="dark:bg-[#1C1C1C] py-2 px-3 rounded-[5px]"/> ))
-      }
-    </Section>
-  )
+  return ( <ClaimableGames userWalletAddress={userWalletAddress} gamesCount={gamesCount} {...rest} networkId={networkId} /> )
 }
 export default ClaimTokenWinsSection;

src/components/ClaimWinsDisconnectedUserSection/index.tsx

@@ -0,0 +1,33 @@
+import Section from '../../common/Section';
+import Button from '../../common/Button';
+import { 
+ LargeText,
+ NormalText 
+} from "../CreateGameCard/types";
+import {
+ useConnectModal,
+} from '@rainbow-me/rainbowkit';
+import 'twin.macro';
+
+interface ClaimWinsDisconnectedUserSectionProps extends React.AllHTMLAttributes<HTMLDivElement> {
+ gameIds: number[]
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function ClaimWinsDisconnectedUserSection({ gameIds , ...rest }: ClaimWinsDisconnectedUserSectionProps) {
+  // filter out the games of which the user is not the winner
+  const { openConnectModal } = useConnectModal();
+  return openConnectModal ? (
+    <Section hdr="Tokens won" direction="col" tw="gap-y-[32px] w-full" { ...rest } >
+     <LargeText tw="text-shinishi text-center">Connect your wallet to see your wins.</LargeText>
+     <Button buttonType="secondary" tw="flex max-w-[fit-content] self-center border-[2px]" onClick={
+            (e: any) => { 
+              e.preventDefault();
+              openConnectModal();
+            }}>
+            <NormalText tw="tracking-[0.32px] leading-[12px] font-bold">Connect</NormalText>
+     </Button>
+    </Section>
+  ) : <></>
+}
+export default ClaimWinsDisconnectedUserSection;

src/components/RainBowConnectButton/apiSlice.ts

@@ -0,0 +1,21 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+import {  User } from '../../models';
+import { appApiSlice } from '../../app/apiSlice';
+
+export const connectButtonApiSlice = appApiSlice.injectEndpoints({ 
+ endpoints: (builder) => ({
+  createPlayer: builder.mutation<any, Partial<User> & Pick<User, 'uuid'>>({
+   query: (walletAddress) => ({
+     url: '/users',
+     method: 'POST',
+     body: { walletAddress }
+   }),
+   transformResponse: (response: any) => { 
+     return response.uuid 
+   },
+ }),
+ })
+})
+
+export const { useCreatePlayerMutation } = connectButtonApiSlice;
+

src/components/RainBowConnectButton/connectionSlice.ts

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Network, User, Wallet } from '../../models';
+import { RootState } from "../../app/store";
+import { connectButtonApiSlice } from './apiSlice';
+
+interface AppState {
+ loading: boolean;
+ network: Network | undefined;
+ user: User;
+}
+
+export const initialState: AppState = {
+ loading: false,
+ network: undefined, 
+ user: {
+  uuid: undefined,
+  wallet: undefined,
+  loading: false,
+ },
+};
+
+export const connectionSlice = createSlice({
+ name: 'connection',
+ initialState,
+ reducers: {
+  setWallet(state, action: PayloadAction<Wallet>){
+   state.user.wallet = action.payload
+  },
+  resetWallet(state) {
+   state.user.wallet = undefined;
+  },
+  resetNetwork(state) {
+   state.network = undefined;
+  },
+  setNetworkUnsupported(state, action: PayloadAction<boolean>) {
+   state = Object.assign(state, { ...state, network: { unsupported: action.payload } });
+  },
+  setNetwork(state, action: PayloadAction<Network>){
+   state.network = action.payload;
+  },
+ },
+ extraReducers: (builder) => {
+  builder.addMatcher(connectButtonApiSlice.endpoints.createPlayer.matchFulfilled, (state, action) =>  { state.user.uuid = action.payload });
+  builder.addMatcher(connectButtonApiSlice.endpoints.createPlayer.matchRejected, (state) =>  { state.user.loading = false });
+  builder.addMatcher(connectButtonApiSlice.endpoints.createPlayer.matchPending, (state) =>  { state.user.loading = true });
+ }
+});
+
+export const { setWallet, setNetwork, resetWallet, resetNetwork, setNetworkUnsupported } = connectionSlice.actions;
+export const selectNetwork = (state: RootState) => state.connection.network;
+export const selectUser = (state: RootState) => state.connection.user;    
+export const selectWallet = (state: RootState) => state.connection.user.wallet;  
+export const selectAppLoading = (state: RootState) => state.connection.loading;
+export default connectionSlice.reducer;

src/components/RainBowConnectButton/index.tsx

@@ -3,10 +3,10 @@ import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { ConnectionInformation, Balance, Chain, AvatarWrapper } from './types';
 import Button from '../../common/Button';
 import WalletAvatar from '../../common/WalletAvatar';
-import { resetWallet, resetNetwork, setNetworkUnsupported, setWallet, setNetwork } from '../../containers/App/AppSlice';
+import { resetWallet, resetNetwork, setNetworkUnsupported, setWallet, setNetwork } from './connectionSlice';
 import { useAppDispatch } from '../../hooks';
 import { useAccount } from 'wagmi';
-import { useCreatePlayerMutation } from '../../containers/App/api'; 
+import { useCreatePlayerMutation } from './apiSlice'; 
 
 import 'twin.macro';