Skip to content

S
sweepstake
Commit 4f363234 by Arjun Jhukal
Options

updated the withdrawl and deposit functionality

parent 439f259f
Showing with 682 additions and 140 deletions
next.config.ts
......@@ -6,11 +6,19 @@ const nextConfig: NextConfig = {
remotePatterns: [
{
protocol: 'https',
hostname: 'sweepstake.webjuwa.com',
hostname: 'app.bdwebai.com',
port: '',
pathname: '/storage/**',
},
],
// remotePatterns: [
// {
// protocol: 'https',
// hostname: 'sweepstake.webjuwa.com',
// port: '',
// pathname: '/storage/**',
// },
// ],
},
};
......
src/app/(dashboard)/(user)/buy-coins/[slug]/checkout/page.tsx
import CheckoutPage from "@/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout";
import BitCoinIcon from '@/icons/BitCoinIcon';
import GoldCoinIcon from '@/icons/GoldCoinIcon';
import { Box, Button } from '@mui/material';
import Image from 'next/image';
import React from 'react'
export default async function CheckoutPage(props: {
export default async function Checkout(props: {
params: Promise<{ slug: string }>;
searchParams: Promise<{ amount?: string; bonus?: string }>;
}) {
......@@ -14,81 +11,6 @@ export default async function CheckoutPage(props: {
const amount = searchParams.amount ? Number(searchParams.amount) : 0;
const bonus = searchParams.bonus ? Number(searchParams.bonus) : 0;
return (
<section className="checkout__root">
<div className="grid grid-cols-12 gap-4 lg:gap-10 xl:gap-12">
<div className="col-span-12 lg:col-span-4 ">
<Box className="coin__card" sx={{
borderRadius: "16px",
background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
padding: "16px"
}}>
<div className="title">
<h2 className='text-[28px]'>${amount}</h2>
</div>
<div className="footer mt-10">
<div className="coin-info flex justify-between items-center py-3 px-4"
style={{
borderRadius: "16px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
}}
>
<div className="coin flex items-center gap-1">
<GoldCoinIcon />
<span className='text-[12px]'>Gold Coins</span>
</div>
<p>
<strong className='text-[16px] block'>500</strong>
</p>
</div>
<div className="coin-info flex justify-between items-center py-3 px-4 mt-1"
style={{
borderRadius: "16px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
}}
>
<div className="coin flex items-center gap-1">
<GoldCoinIcon />
<span className='text-[12px]'>Bonus Coins</span>
</div>
<p>
<strong className='text-[16px] block'>{bonus}</strong>
</p>
</div>
</div>
</Box>
</div>
<div className="col-span-12 lg:col-span-8">
<Box>
<h1 className='mb-2 text-[24px] lg:text-[32px]'>Payment Method</h1>
<p className='text-[11px] lg:text-[13px]'>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>
<h2 className='text-[20px] lg:text-[24px] mt-8 mb-4'>Select payment method</h2>
<div className="grid sm:grid-cols-2 mb-8">
<div className="col-span-1">
<div className="py-5 px-4 rounded-[8px]" style={{
borderRadius: "8px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)",
}}>
<span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span>
</div>
</div>
</div>
<Button type='submit' variant='contained' color='primary' className='!mt-3' >Proceed to Payment</Button>
<p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">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>
</div>
</div>
</section>
<CheckoutPage amount={amount} slug={slug} bonus={bonus}/>
)
}
src/app/(dashboard)/(user)/withdrawl/page.tsx 0 → 100644
import WithdrawlPage from '@/components/pages/dashboard/userDashboard/withdrawl'
import { getAllGames, getUserGameBalance } from '@/serverApi/game';
import React from 'react'
export default async function Withdrawl() {
const games = await getAllGames();
const coins = await getUserGameBalance();
return (
<WithdrawlPage games={games} coins={coins} />
)
}
src/app/globals.css
......@@ -181,14 +181,22 @@
transform-origin: bottom left;
}
.status.success {
.status.paid {
background-color: #12A211;
}
.status.unsuccessful {
.status.fail {
background-color: #D03538;
}
.status.pending {
.status.active {
background-color: #F2BF53;
}
.user_table tr td:first-child {
border-radius: 24px 0 0 24px;
}
.user_table tr td:last-child {
border-radius: 0 24px 24px 0;
}
\ No newline at end of file
src/components/molecules/Sliders/ScreenShotSlider.tsx
......@@ -80,8 +80,9 @@ export default function ScreenShotSlider({
</motion.div>
{/* Optional gradient overlays for smooth edges */}
<div className="absolute top-0 left-0 w-16 h-full bg-gradient-to-r from-white to-transparent pointer-events-none z-10" />
<div className="absolute top-0 right-0 w-16 h-full bg-gradient-to-l from-white to-transparent pointer-events-none z-10" />
<div className="absolute top-0 left-0 w-16 h-full bg-gradient-to-r from-[#11011E] to-transparent pointer-events-none z-10" />
<div className="absolute top-0 right-0 w-16 h-full bg-gradient-to-l from-[#11011E] to-transparent pointer-events-none z-10" />
</div>
);
}
\ No newline at end of file
src/components/organism/Header/UserProfileMenu.tsx
......@@ -28,7 +28,7 @@ const UserProfileMenu = () => {
},
{
label: "Withdraw History",
href: "/account/withdraw-history",
href: "/account/withdrawl-history",
icon: <MoneySend size="20" />,
},
{
......
src/components/organism/Sidebar/UserSidebar/index.tsx
......@@ -3,6 +3,7 @@ import { PATH } from '@/routes/PATH';
import Private from '@/routes/Private';
import { Box, Button, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
import { Home, MessageQuestion, ReceiptEdit, RecordCircle, StatusUp, UserEdit } from '@wandersonalwes/iconsax-react';
import Link from 'next/link';
import { usePathname, useRouter } from 'next/navigation';
import React from 'react'
......@@ -13,8 +14,8 @@ export default function UserMenu({ open }: { open: boolean }) {
<Box>
{open ? <Private>
<div className="flex justify-between items-center gap-1 mb-6">
<Button variant='contained' color='primary'>Buy Coins</Button>
<Button variant='contained' color='secondary'>Withdraw</Button>
<Link href="/buy-coin" className="ss-btn bg-primary-grad" >Buy Coins</Link>
<Link href="/withdrawl" className="ss-btn bg-secondary-grad" >Withdraw</Link>
</div>
</Private> : null}
......
src/components/organism/Table/index.tsx
......@@ -18,7 +18,7 @@ export default function CustomTable<TData>({ table, loading = false,
const user = useAppSelector((state) => state.auth.user)
if (user?.role && user?.role.toUpperCase() === "USER") {
return (
<table className="min-w-full text-left">
<table className="min-w-full text-left border-separate border-spacing-y-1 user_table">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
......@@ -42,7 +42,7 @@ export default function CustomTable<TData>({ table, loading = false,
<tr key={`skeleton-${rowIndex}`} className="animate-pulse">
{Array.from({ length: columnCount }).map((_, colIndex) => (
<td key={`skeleton-cell-${rowIndex}-${colIndex}`} className="text-[14px] p-2 lg:p-4 ">
<div className="h-4 w-full rounded bg-[rgba(255, 255, 255, 0.10)]" />
<div className="h-4 w-full rounded-xl bg-[rgba(255, 255, 255, 0.10)]" />
</td>
))}
</tr>
......@@ -58,9 +58,11 @@ export default function CustomTable<TData>({ table, loading = false,
</tr>
) : (
table.getRowModel().rows.map((row) => (
<tr key={row.id} className="">
<tr key={row.id} className="rounded-[24px] mb-1" >
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="text-[14px] px-4 py-4 ">
<td key={cell.id}
className="text-[14px] px-4 py-4"
style={{ background: "rgba(255, 255, 255, 0.10)" }}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
......
src/components/pages/dashboard/adminDashboard/pages/add-page/index.tsx
"use client";
import React from "react";
import React, { useEffect, useState } from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
import {
......@@ -22,7 +22,7 @@ export default function AddPageForm() {
const [createPage, { isLoading: creatingPage }
] = useCreatePageMutation();
const dispatch = useAppDispatch();
const route = useRouter();
const router = useRouter();
const formik = useFormik({
initialValues: pageInitialData,
enableReinitialize: true,
......@@ -38,38 +38,70 @@ export default function AddPageForm() {
),
}),
onSubmit: async (values) => {
const formData = new FormData();
console.log("Submitting form with values:", values); // <---- Add this
if (!values.content) {
console.error("❌ content is undefined in form values");
return;
}
const formData = new FormData();
formData.append("name", values.name);
formData.append("slug", values.slug);
formData.append("description", values.description);
// Add dynamic content fields
values.content.forEach((item, index) => {
formData.append(`content[${index}][heading]`, item.heading);
formData.append(`content[${index}][description]`, item.description);
});
console.log("FormData entries:");
for (const [key, val] of formData.entries()) {
console.log(key, val);
}
try {
const response = await createPage(formData).unwrap();
console.log("API response:", response);
dispatch(
showToast({
message: response.message || "Page created successfully",
variant: ToastVariant.SUCCESS
})
)
);
router.push("/pages");
} catch (e: any) {
// console.error("Error submitting form:", e);
console.error("Error submitting form:", e);
dispatch(
showToast({
message: e.message || "Something went wrong",
variant: ToastVariant.ERROR
})
)
);
}
},
}
});
const [slugTouchedManually, setSlugTouchedManually] = useState(false);
useEffect(() => {
if (!slugTouchedManually) {
const generatedSlug = formik.values.name
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, "")
.replace(/\s+/g, "-");
formik.setFieldValue("slug", generatedSlug);
}
}, [formik.values.name]);
const handleSlugChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSlugTouchedManually(true);
formik.handleChange(e);
};
const handleAddPageContent = () => {
formik.setFieldValue("content", [
...formik.values.content,
......@@ -114,7 +146,7 @@ export default function AddPageForm() {
placeholder="Page Slug"
name="slug"
value={formik.values.slug}
onChange={formik.handleChange}
onChange={handleSlugChange}
onBlur={formik.handleBlur}
error={formik.touched.slug && Boolean(formik.errors.slug)}
/>
......@@ -123,14 +155,33 @@ export default function AddPageForm() {
)}
</div>
{/* Description */}
<div className="input__field">
<InputLabel>
Page Description [Excert] <span className="text-red-500">*</span>
</InputLabel>
<OutlinedInput
fullWidth
placeholder="Excert"
name="description"
value={formik.values.description}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
error={formik.touched.description && Boolean(formik.errors.description)}
/>
{formik.touched.description && formik.errors.description && (
<FormHelperText error>{formik.errors.description}</FormHelperText>
)}
</div>
{/* Dynamic Content */}
<InputLabel className="mb-2">Page Content</InputLabel>
<div className="space-y-6">
{formik.values.content.map((item, i) => (
{formik.values.content.map((item, i) => (
<div className="space-y-6" key={i}>
<div
key={i}
className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start border border-gray-200 p-4 rounded-lg relative"
>
{/* Heading */}
......@@ -183,8 +234,8 @@ export default function AddPageForm() {
</IconButton>
</div>}
</div>
))}
</div>
</div>
))}
{/* Buttons */}
......@@ -197,7 +248,7 @@ export default function AddPageForm() {
>
Add More Content
</Button>
<Button type="submit" variant="contained" color="secondary">
<Button type="submit" variant="contained" color="secondary" disabled={!formik.dirty}>
Save Page Content
</Button>
</div>
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/CoinCalculator.tsx
......@@ -38,7 +38,7 @@ export default function CoinCalculator() {
const handleBuy = () => {
if (baseCoins !== null && bonusCoins !== null) {
router.push(`/checkout/buy-coins/1?amount=${baseCoins}&bonus=${bonusCoins}`);
router.push(`/buy-coins/1/checkout?amount=${amount}&bonus=${bonusCoins}`);
}
};
......@@ -100,6 +100,7 @@ export default function CoinCalculator() {
value={amount}
onChange={(e) => setAmount(e.target.value === "" ? "" : Number(e.target.value))}
placeholder="Enter amount"
inputProps={{ min: 1 }}
/>
<Button variant="contained" color="primary" className='!mt-4' onClick={handleCalculate}>
Calculate
......
src/components/pages/dashboard/userDashboard/buyCoins/buyCoinSinlgeGame/checkout/index.tsx
import React from 'react'
"use client";
export default function CheckoutPage() {
import { useAppDispatch } from '@/hooks/hook';
import BitCoinIcon from '@/icons/BitCoinIcon';
import GoldCoinIcon from '@/icons/GoldCoinIcon';
import { useDepositMutation } from '@/services/transaction';
import { showToast, ToastVariant } from '@/slice/toastSlice';
import { Box, Button } from '@mui/material';
import Image from 'next/image';
import { useRouter } from 'next/navigation';
import React from 'react'
export default function CheckoutPage({ amount, slug, bonus }: {
amount: number;
slug: string;
bonus: number
}) {
const dispatch = useAppDispatch();
const router = useRouter();
const [getPaymentLink, { isLoading: gettingLink }] = useDepositMutation();
return (
<div>CheckoutPage</div>
<section className="checkout__root">
<div className="grid grid-cols-12 gap-4 lg:gap-10 xl:gap-12">
<div className="col-span-12 lg:col-span-4 ">
<Box className="coin__card" sx={{
borderRadius: "16px",
background: "linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(255, 255, 255, 0.10)",
padding: "16px"
}}>
<div className="title">
<h2 className='text-[28px]'>${amount}</h2>
</div>
<div className="footer mt-10">
<div className="coin-info flex justify-between items-center py-3 px-4"
style={{
borderRadius: "16px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
}}
>
<div className="coin flex items-center gap-1">
<GoldCoinIcon />
<span className='text-[12px]'>Gold Coins</span>
</div>
<p>
<strong className='text-[16px] block'>500</strong>
</p>
</div>
<div className="coin-info flex justify-between items-center py-3 px-4 mt-1"
style={{
borderRadius: "16px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)"
}}
>
<div className="coin flex items-center gap-1">
<GoldCoinIcon />
<span className='text-[12px]'>Bonus Coins</span>
</div>
<p>
<strong className='text-[16px] block'>{bonus}</strong>
</p>
</div>
</div>
</Box>
</div>
<div className="col-span-12 lg:col-span-8">
<Box>
<h1 className='mb-2 text-[24px] lg:text-[32px]'>Payment Method</h1>
<p className='text-[11px] lg:text-[13px]'>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>
<h2 className='text-[20px] lg:text-[24px] mt-8 mb-4'>Select payment method</h2>
<div className="grid sm:grid-cols-2 mb-8">
<div className="col-span-1">
<div className="py-5 px-4 rounded-[8px]" style={{
borderRadius: "8px",
background: "linear-gradient(0deg, rgba(234, 47, 231, 0.10) 0%, rgba(234, 47, 231, 0.10) 100%), rgba(255, 255, 255, 0.10)",
}}>
<span className="text-[14px] flex items-center justify-start gap-2"><BitCoinIcon />Crypto Currency</span>
</div>
</div>
</div>
<Button type='submit' variant='contained' color='primary' className='!mt-3' onClick={async () => {
try {
const response = await getPaymentLink({
id: slug,
amount,
}).unwrap();
router.replace(response?.data?.payment_url)
}
catch (e: any) {
dispatch(
showToast({
message: e.message || "Something went wrong",
variant: ToastVariant.ERROR
})
)
}
}}>Proceed to Payment</Button>
<p className="text-[11px] leading-[120%] mt-8 mb-2 text-center">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>
</div>
</div>
</section>
)
}
src/components/pages/dashboard/userDashboard/depositHistory/index.tsx
......@@ -3,6 +3,7 @@
import CustomTable from '@/components/organism/Table';
import { useGetAllDepositQuery } from '@/services/transaction';
import { SingleDepositProps } from '@/types/transaction';
import { Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
import React, { useState } from 'react'
......@@ -43,7 +44,7 @@ export default function DepositHistoryPage() {
const display = status.charAt(0).toUpperCase() + status.slice(1);
return (
<span className={`px-2 py-1 inline-block lg:text-[10px] text-white status rounded-[8px] ${status}`} >
<span className={`px-2 py-1 max-w-[50px] block lg:text-[10px] text-white status rounded-[8px] text-center ${status}`} >
{display}
</span>
);
......@@ -52,8 +53,6 @@ export default function DepositHistoryPage() {
]
const table = useReactTable({
data: data?.data?.data || [],
// data: dummyDeposits,
......@@ -63,6 +62,29 @@ export default function DepositHistoryPage() {
})
return (
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
<>
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
<div className="flex justify-between items-center mt-4 px-8 py-6">
<Pagination count={data?.data?.pagination.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
<div>
<span>Row per page:</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
className="ml-2 border border-gray-300 rounded p-1"
>
{[5, 10, 15, 20].map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</div>
</div>
</>
)
}
src/components/pages/dashboard/userDashboard/games/exclusiveGames/exclusiveGameDetail/index.tsx
......@@ -55,7 +55,9 @@ export default function ExlusiveGameDetail({ game }: { game: SingleGameResponse
borderRadius: "16px"
}} className="flex justify-center items-center gap-2 py-4 px-6 border border-secondary min-w-[30%] ">
<div className="coins">
<strong className="text-[16px] leading-4 font-[600] block mb-1 text-secondary">Withdraw Coins</strong>
<Link href={"/withdrawl"}>
<strong className="text-[16px] leading-4 font-[600] block mb-1 text-secondary">Withdraw Coins</strong>
</Link>
</div>
</Box>
......
src/components/pages/dashboard/userDashboard/withdrawl/WithdrawlModal.tsx 0 → 100644
import { Box, Button, Modal, OutlinedInput } from "@mui/material";
import Image from "next/image";
import React from "react";
import ConnectWalletForm from "../connectWallet/ConnectWalletForm";
import { SecuritySafe } from "@wandersonalwes/iconsax-react";
import { FormikProps } from "formik";
export default function WithdrawlModal({
open,
handleClose,
formik,
wallet
}: {
open: boolean;
handleClose: () => void;
formik: FormikProps<any>;
wallet: string;
}) {
const [isEditing, setIsEditing] = React.useState(false);
React.useEffect(() => {
if (open) {
formik.setFieldValue("wallet_address", wallet);
setIsEditing(false);
}
}, [open, wallet]);
const handleChangeAddress = () => {
setIsEditing(true);
formik.setFieldValue("wallet_address", ""); // clear so user can enter new
};
return (
<Modal open={open} onClose={handleClose}>
<Box
sx={{
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
borderRadius: "24px",
maxWidth: "574px",
width: "100%",
background:
"linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.04) 100%), #3A013F",
boxShadow: 24,
p: { xs: 3, sm: 4 },
textAlign: "center",
}}
>
{/* Wallet Banner */}
<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]">
Confirm your Wallet Address
</h1>
<p className="text-[11px] leading-[150%] text-center max-w-[420px] mx-auto mt-3 mb-6">
Your Withdrawn amount will be sent to the following address.
</p>
<form onSubmit={formik.handleSubmit}>
<div className="relative">
<OutlinedInput
name="wallet_address"
id="wallet_address"
value={formik.values.wallet_address}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
placeholder="Enter your bitcoin address"
disabled={!isEditing} // ✅ locked until change
/>
{!isEditing && (
<Button
className="!p-0 !text-primary"
sx={{
position: "absolute",
top: "50%",
transform: "translateY(-50%)",
right: 16,
maxWidth: "fit-content",
textDecoration: "underline",
}}
type="button"
onClick={handleChangeAddress}
>
| &nbsp;&nbsp;Change Address
</Button>
)}
</div>
<Button
type="submit"
variant="contained"
color="primary"
className="!mt-3"
disabled={!formik.values.wallet_address}
>
Withdraw Now Wallet
</Button>
</form>
{/* Powered by */}
<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>
</Modal>
);
}
src/components/pages/dashboard/userDashboard/withdrawlHistory/index.tsx
"use client";
import CustomTable from '@/components/organism/Table';
import { useGetAllDepositQuery } from '@/services/transaction';
import { useGetAllDepositQuery, useGetAllWithdrawlQuery } from '@/services/transaction';
import { SingleDepositProps } from '@/types/transaction';
import { Pagination } from '@mui/material';
import { ColumnDef, getCoreRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
import React, { useState } from 'react'
export default function WithdrawnHistoryPage() {
const [page, setPage] = useState(1);
const [pageSize, setPageSize] = useState(10);
const { data, isLoading } = useGetAllDepositQuery({
const { data, isLoading } = useGetAllWithdrawlQuery({
page,
per_page: pageSize
});
......@@ -59,6 +60,28 @@ export default function WithdrawnHistoryPage() {
})
return (
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
<>
<CustomTable table={table} loading={isLoading} emptyMessage="You haven't deposite yet!" />
<div className="flex justify-between items-center mt-4 px-8 py-6">
<Pagination count={data?.data?.pagination.total_pages || 1}
page={page}
onChange={(_, value) => setPage(value)} variant="outlined" shape="rounded" sx={{ gap: "8px" }} />
<div>
<span>Row per page:</span>
<select
value={pageSize}
onChange={(e) => setPageSize(Number(e.target.value))}
className="ml-2 border border-gray-300 rounded p-1"
>
{[5, 10, 15, 20].map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</div>
</div>
</>
)
}
src/routes/ProtectedLink.tsx
......@@ -20,7 +20,8 @@ export default function ProtectedLink({ href, className, children }: Props) {
if (user) {
router.push(href);
} else {
dispatch(openAuthModal());
// dispatch(openAuthModal());
router.push("/login");
}
};
......
src/services/authApi.ts
......@@ -11,7 +11,7 @@ export const authApi = createApi({
username,
password,
password_confirmation }) => ({
url: `/api/auth/register/`,
url: `/api/auth/register`,
method: "POST",
body: {
email,
......@@ -23,7 +23,7 @@ export const authApi = createApi({
}),
login: builder.mutation<LoginResponse, LoginProps>({
query: ({ email, password }) => ({
url: `/api/auth/login/`,
url: `/api/auth/login`,
method: "POST",
body: { email, password },
})
......
src/services/baseQuery.ts
......@@ -6,8 +6,8 @@ export const baseQuery = fetchBaseQuery({
prepareHeaders(headers, { getState }) {
const token = (getState() as RootState).auth.access_token;
// headers.set("Accept", "application/json");
// headers.set("Content-Type", "application/json");
headers.set("Accept", "application/json");
headers.set("Content-Type", "application/json");
if (token) {
headers.set("Authorization", `Bearer ${token}`);
}
......
src/services/transaction.ts
import { createApi } from "@reduxjs/toolkit/query/react";
import { baseQuery } from "./baseQuery";
import { DepositListProps, DepositProps, DepositUrlProps } from "@/types/transaction";
import { DepositListProps, DepositProps, DepositResponseProps, DepositUrlProps } from "@/types/transaction";
import { QueryParams } from "@/types/config";
export const transactionApi = createApi({
reducerPath: "transactionApi",
baseQuery: baseQuery,
tagTypes: ["transaction"],
tagTypes: ["deposit", "withdrawl"],
endpoints: (builder) => ({
deposit: builder.mutation<DepositUrlProps, DepositProps>({
query: ({ gameId, amount }) => ({
url: `/api/payment/${gameId}`,
deposit: builder.mutation<DepositResponseProps, DepositProps>({
query: ({ id, amount, type = "crypto" }) => ({
url: `/api/payment/${id}`,
method: "POST",
body: amount
body: { amount: amount, type: type }
}),
invalidatesTags: ["transaction"]
invalidatesTags: ["deposit"]
}),
getAllDeposit: builder.query<DepositListProps, QueryParams>({
query: ({ search, page, per_page }) => {
......@@ -28,10 +28,31 @@ export const transactionApi = createApi({
method: "GET"
}
},
providesTags: ['transaction']
providesTags: ['deposit']
}),
withdrawl: builder.mutation<DepositResponseProps, any>({
query: (body) => ({
url: `/api/user/withdrawl`,
method: "POST",
body: body
}),
invalidatesTags: ["withdrawl"]
}),
getAllWithdrawl: builder.query<DepositListProps, QueryParams>({
query: ({ search, page, per_page }) => {
const params = new URLSearchParams();
if (search) params.append('search', search);
if (page) params.append('page', page.toString());
if (per_page) params.append('page_size', per_page.toString());
const queryString = params.toString();
return {
url: `/api//user/withdrawl${queryString ? `?${queryString}` : ''}`,
method: "GET"
}
},
providesTags: ["withdrawl"]
}),
})
})
export const { useDepositMutation, useGetAllDepositQuery } = transactionApi;
\ No newline at end of file
export const { useDepositMutation, useGetAllDepositQuery, useWithdrawlMutation, useGetAllWithdrawlQuery } = transactionApi;
\ No newline at end of file
src/types/transaction.ts
......@@ -3,8 +3,9 @@ import { Pagination } from "./game";
type TransactionStatus = "SUCCESS" | "UNSUCCESSFUL" | "PENDING";
export interface DepositProps {
gameId: string;
id: string;
amount: number;
type?: "crypto" | "bank"
}
export interface DepositUrlProps {
......@@ -15,6 +16,12 @@ export interface DepositUrlProps {
payment_url: string;
}
export interface DepositResponseProps {
message: string;
success: true;
data: DepositUrlProps;
}
export interface SingleDepositProps {
id: number;
transaction_id: string;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment