updated the wallet form and initialize the page for the buy credit

src/app/(dashboard)/(user)/buy-coins/[slug]/page.tsx

+import React from 'react'
+
+export default function SingleGameCoinPacks() {
+    return (
+        <div>SingleGameCoinPacks</div>
+    )
+}

src/app/(dashboard)/(user)/buy-coins/page.tsx

+import React from 'react'
+
+export default function BuyCoins() {
+    return (
+        <div>BuyCoins</div>
+    )
+}

src/app/(dashboard)/(user)/connect-wallet/page.tsx

+import ConnectWalletPage from '@/components/pages/dashboard/userDashboard/connectWallet'
+import React from 'react'
+
+export default function ConnectWallet() {
+    return (
+        <ConnectWalletPage />
+    )
+}

src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/index.tsx

+import React from 'react'
+
+export default function BuyCoinSinlgeGame() {
+    return (
+        <div>BuyCoinSinlgeGame</div>
+    )
+}

src/components/pages/dashboard/userDashboard/buyCoins/index.tsx

+import React from 'react'
+
+export default function BuyCoinGameListPage() {
+    return (
+        <div>BuyCoinGameListPage</div>
+    )
+}

src/components/pages/dashboard/userDashboard/connectWallet/ConnectWalletForm.tsx

+"use client"
+
+import { useAppDispatch } from '@/hooks/hook'
+import { useAddUserWalletMutation } from '@/services/userApi'
+import { showToast, ToastVariant } from '@/slice/toastSlice'
+import { Button, OutlinedInput } from '@mui/material'
+import { useFormik } from 'formik'
+import React from 'react'
+import * as yup from 'yup'
+
+
+const validationSchema = yup.object({
+    wallet_address: yup.string().required("Wallet Address is Required")
+})
+export default function ConnectWalletForm() {
+    const dispatch = useAppDispatch();
+
+    const [connectWallet, { isLoading }] = useAddUserWalletMutation();
+    const formik = useFormik({
+        initialValues: {
+            wallet_address: "",
+        },
+        enableReinitialize: true,
+        validationSchema,
+        onSubmit: async (values) => {
+            try {
+                const response = await connectWallet(values).unwrap();
+                dispatch(
+                    showToast({
+                        message: response.message || "Unable to connect wallet. Try Again Later",
+                        variant: ToastVariant.SUCCESS
+                    })
+                )
+            }
+            catch (e: any) {
+                dispatch(
+                    showToast({
+                        message: e.message || "Unable to connect wallet. Try Again Later",
+                        variant: ToastVariant.ERROR
+                    })
+                )
+            }
+        }
+    })
+    return (
+        <form onSubmit={formik.handleSubmit}>
+            <OutlinedInput
+                name='wallet_address'
+                id='wallet_address'
+                value={formik.values.wallet_address}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                placeholder='Enter your bitcoin address'
+            />
+            <Button type='submit' variant='contained' color='primary' className='!mt-3' disabled={!formik.dirty}>{isLoading ? "Connecting Wallet" : "Connect Wallet"}</Button>
+        </form>
+    )
+}

src/components/pages/dashboard/userDashboard/connectWallet/index.tsx

+import { Box, Typography } from '@mui/material'
+import { SecuritySafe } from '@wandersonalwes/iconsax-react'
+import Image from 'next/image'
+import React from 'react'
+import ConnectWalletForm from './ConnectWalletForm'
+
+export default function ConnectWalletPage() {
+    return (
+        <section className="wallet__page__root">
+            <Box sx={{
+                borderRadius: "24px",
+                background: "rgba(255, 255, 255, 0.04)",
+            }} className="!p-6 !lg:px-16 !lg:py-8 !text-center !max-w-[50%]">
+                <Image src={"/assets/images/wallet-featured-image.png"} alt='' width={174} height={140} className='mx-auto' />
+
+                <span className="py-2 px-3 rounded-3xl bg-[#DBFBF6] border border-[#426A66] text-[#426A66] flex justify-center items-center max-w-fit mx-auto my-4 lg:my-6"><SecuritySafe />Safe and secure</span>
+                <h1 className='text-[24px] leading-[120%] font-[700]'>Connect your wallet to get started</h1 >
+                <p className='text-[11px] leading-[150%] text-center max-w-[420px] mx-auto mt-3 mb-6'>To start playing and cashing out your winnings, you’ll need a crypto wallet to purchase E-Credits and receive payouts. Don't worry—it’s quick and easy!</p>
+
+                <ConnectWalletForm />
+
+                <p className="text-[11px] leading-[120%] mt-8 mb-2">Powered By</p>
+                <div className="flex justify-center items-center gap-4">
+                    <Image src="/assets/images/payment-01.png" alt='' width={78} height={24} />
+                    <Image src="/assets/images/payment-02.png" alt='' width={78} height={24} />
+                    <Image src="/assets/images/payment-03.png" alt='' width={78} height={24} />
+                </div>
+            </Box>
+        </section>
+    )
+}

src/hooks/store.ts

@@ -7,6 +7,7 @@ import { gameApi } from "@/services/gameApi";
 import { playerApi } from "@/services/playerApi";
 import { providerApi } from "@/services/providerApi";
 import { transactionApi } from "@/services/transaction";
+import { userApi } from "@/services/userApi";
 
 export const store = configureStore({
     reducer: {
@@ -18,6 +19,7 @@ export const store = configureStore({
         [providerApi.reducerPath]: providerApi.reducer,
         [playerApi.reducerPath]: playerApi.reducer,
         [transactionApi.reducerPath]: transactionApi.reducer,
+        [userApi.reducerPath]: userApi.reducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware()
@@ -26,6 +28,7 @@ export const store = configureStore({
             .concat(playerApi.middleware)
             .concat(providerApi.middleware)
             .concat(transactionApi.middleware)
+            .concat(userApi.middleware)
 
 })
 

src/services/transaction.ts

@@ -31,7 +31,6 @@ export const transactionApi = createApi({
             providesTags: ['transaction']
         })
     })
-
 })
 
 export const { useDepositMutation, useGetAllDepositQuery } = transactionApi;
\ No newline at end of file

src/services/userApi.ts

+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQuery } from "./baseQuery";
+import { SinlgePlayerResponseProps, WalletProps } from "@/types/player";
+
+export const userApi = createApi({
+    reducerPath: "userApi",
+    baseQuery: baseQuery,
+    tagTypes: ['user'],
+    endpoints: (builder) => ({
+        addUserWallet: builder.mutation<SinlgePlayerResponseProps, WalletProps>({
+            query: (body) => ({
+                url: "/api/connect-wallet",
+                method: "POST",
+                body: body
+            })
+        })
+    })
+
+})
+
+export const { useAddUserWalletMutation } = userApi;
\ No newline at end of file

src/types/player.ts

@@ -55,3 +55,7 @@ export interface SinlgePlayerResponseProps {
     message: string;
     status: string;
 }
+
+export interface WalletProps {
+    wallet_address: string;
+}
\ No newline at end of file