5 |
6 |
32 |
33 | );
34 | };
35 |
36 | export default Spinner;
37 |
--------------------------------------------------------------------------------
/pages/api/auth/signup.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from "next"
2 | import clientPromise from "@/lib/mongodb"
3 |
4 | const bcrypt = require('bcrypt');
5 |
6 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
7 | if (req.method === "POST") {
8 | const client = await clientPromise
9 | const db = client.db("sports-betting")
10 | const { username, email, password } = req.body
11 |
12 | const saltRounds = 10
13 | const salt = await bcrypt.genSalt(saltRounds)
14 | const hashPassword = await bcrypt.hash(password, salt)
15 |
16 | const user = await db.collection("users").findOne({
17 | email: email
18 | })
19 |
20 | if (user) {
21 | return res.status(200).json({
22 | res: "fail",
23 | error: "User already exist"
24 | })
25 | }
26 |
27 | await db.collection("users").insertOne({
28 | username,
29 | email,
30 | password: hashPassword,
31 | })
32 |
33 | return res.status(200).json({
34 | res: "success"
35 | })
36 | }
37 | }
--------------------------------------------------------------------------------
/public/img/svg-icon/tabletennis.svg:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/public/img/svg-icon/valor.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/components/BreadCrumb.tsx:
--------------------------------------------------------------------------------
1 | import { usePathname } from 'next/navigation';
2 | import React from 'react';
3 | type BreadCrumbProps = {
4 | title: string;
5 | searchWord?: string;
6 | setSearchWord?: React.Dispatch
14 |
32 | );
33 | };
34 |
35 | export default BreadCrumb;
--------------------------------------------------------------------------------
/public/img/svg-icon/rainbow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/pages/api/fixture/save.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from "next"
2 | import clientPromise from "@/lib/mongodb"
3 |
4 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
5 | try {
6 | if (req.method === "POST") {
7 | const client = await clientPromise
8 | const db = client.db("sports-betting")
9 | const { fixtureId, fixtureDate, league, homeTeam, awayTeam, homeTeamName, awayTeamName } = req.body
10 |
11 | const fixture = await db.collection("fixtures").findOne({
12 | fixtureId: fixtureId,
13 | })
14 |
15 | if (fixture) {
16 | return res.status(200).json({
17 | res: "fail",
18 | error: "Fixture already exist"
19 | })
20 | }
21 |
22 | await db.collection("fixtures").insertOne({
23 | fixtureId,
24 | fixtureDate,
25 | league,
26 | homeTeam,
27 | awayTeam,
28 | homeTeamName,
29 | awayTeamName,
30 | finished: false,
31 | })
32 |
33 | return res.status(200).json({
34 | res: "success"
35 | })
36 | }
37 | } catch (err) {
38 | console.log(err)
39 | return res.status(200).json({
40 | res: "fail",
41 | error: err,
42 | })
43 | }
44 | }
--------------------------------------------------------------------------------
/pages/api/auth/signin.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from "next"
2 | import jwt from "jsonwebtoken"
3 | import clientPromise from "@/lib/mongodb"
4 |
5 | const bcrypt = require('bcrypt');
6 |
7 | export default async function handler(req: NextApiRequest, res: NextApiResponse) {
8 | if (req.method === 'POST') {
9 | const client = await clientPromise
10 | const db = client.db("sports-betting")
11 | const { email, password } = req.body
12 |
13 | const user = await db.collection("users").findOne({
14 | email: email
15 | })
16 |
17 | if (!user) {
18 | return res.status(200).json({
19 | res: "fail",
20 | error: "User does not exist. Please Register account first."
21 | })
22 | }
23 |
24 | const result = await bcrypt.compare(password, user.password);
25 | if (!result) {
26 | return res.status(200).json({
27 | res: "fail",
28 | error: "Wrong password"
29 | })
30 | }
31 |
32 | const tokenData = {
33 | id: user._id,
34 | username: user.username,
35 | email: user.email
36 | }
37 |
38 | const token = await jwt.sign(tokenData, process.env.TOKEN_SECRET!, { expiresIn: "1d" })
39 |
40 | return res.status(200).json({
41 | res: "success",
42 | token,
43 | })
44 |
45 | }
46 | }
--------------------------------------------------------------------------------
/lib/mongodb.ts:
--------------------------------------------------------------------------------
1 | import { MongoClient, ServerApiVersion } from "mongodb";
2 |
3 | if (!process.env.MONGODB_URI) {
4 | throw new Error('Invalid/Missing environment variable: "MONGODB_URI"');
5 | }
6 |
7 | const uri = process.env.MONGODB_URI;
8 | const options = {
9 | serverApi: {
10 | version: ServerApiVersion.v1,
11 | strict: true,
12 | deprecationErrors: true,
13 | },
14 | };
15 |
16 | let client;
17 | let clientPromise: Promise
15 |
31 |
16 |
30 | 17 | {title} 18 |
19 | { 20 | pathname && !pathname.includes("/details") && setSearchWord && ( 21 |
22 | setSearchWord(e.target.value)} />
23 |
24 |
25 |
26 |
27 | )
28 | }
29 |
12 |
52 | ))
53 | }
54 |
55 | )
56 | }
57 |
58 | export default DisplayFixtures
--------------------------------------------------------------------------------
/hooks/usePlaceBet.tsx:
--------------------------------------------------------------------------------
1 | import { Address, Chain } from "viem";
2 | import { useSimulateContract, useWaitForTransactionReceipt, useWriteContract } from "wagmi";
3 | import { bettingContract } from "@/lib/const/contracts";
4 |
5 | const usePlaceBet = ({ chainId, bets, account }: { chainId: Chain['id'], bets: [bigint, number, number, bigint], account?: Address }) => {
6 | const {
7 | data: config,
8 | refetch,
9 | isLoading: isLoadingPrepare,
10 | isError: isErrorPrepare,
11 | error: errorPrepare,
12 | } = useSimulateContract({
13 | chainId,
14 | ...bettingContract,
15 | functionName: "placeBet",
16 | args: bets,
17 | query: { enabled: !!account },
18 | });
19 |
20 | const {
21 | writeContractAsync,
22 | data: transactionHash,
23 | isPending: isLoadingWrite,
24 | isError: isErrorWrite,
25 | error: errorWrite,
26 | } = useWriteContract()
27 |
28 | const {
29 | isFetching: isFetchingReceipt,
30 | isLoading: isLoadingReceipt,
31 | data: betReceipt,
32 | isFetched: isBetFetched,
33 | isSuccess,
34 | isError: isErrorReceipt,
35 | error: errorTransaction,
36 | } = useWaitForTransactionReceipt({
37 | hash: transactionHash,
38 | confirmations: 2,
39 | chainId,
40 | query: {
41 | enabled: !!account,
42 | },
43 | })
44 |
45 | const placeBet = async () => {
46 | if (config && !!account) {
47 | try {
48 | await writeContractAsync(config.request)
49 | } catch (e) {
50 | console.log(e)
51 | // onError?.(errorWrite instanceof Error ? errorWrite : new Error('Something went wrong'))
52 | }
53 | }
54 | return
55 | }
56 |
57 | const isLoading = isLoadingReceipt || isLoadingPrepare || isLoadingWrite || isFetchingReceipt
58 | const isError = isErrorWrite || isErrorReceipt || isErrorPrepare
59 | const error = errorWrite || errorTransaction || errorPrepare
60 |
61 | return {
62 | isLoading,
63 | isSuccess,
64 | isError,
65 | error,
66 | isBetFetched,
67 | betReceipt,
68 | placeBet,
69 | }
70 | }
71 |
72 | export default usePlaceBet
73 |
--------------------------------------------------------------------------------
/public/img/svg-icon/volleyball.svg:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/public/img/svg-icon/scgo.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/styles/_abstracts/_mixins.scss:
--------------------------------------------------------------------------------
1 | @mixin justify {
2 | display: flex;
3 | align-items: center;
4 | justify-content: space-between;
5 | }
6 | @mixin wrap {
7 | display: flex;
8 | align-items: center;
9 | justify-content: space-between;
10 | flex-wrap: wrap;
11 | }
12 | @mixin flex {
13 | display: flex;
14 | align-items: center;
15 | }
16 | @mixin bordert {
17 | borrder-top: 1px solid #fff;
18 | }
19 | @mixin borderb {
20 | borrder-bottom: 1px solid var(--border-color);
21 | }
22 | @mixin radius {
23 | width: 38px;
24 | height: 38px;
25 | line-height: 38px;
26 | text-align: center;
27 | border-radius: 50%;
28 | background: var(--icon-bg);
29 | }
30 | @mixin fz14 {
31 | line-height: 16.8px;
32 | font-size: 14px;
33 | font-weight: 400;
34 | }
35 | @mixin fz16 {
36 | line-height: 19.2px;
37 | font-size: 16px;
38 | font-weight: 600;
39 | }
40 | @mixin imgw {
41 | width: 100%;
42 | height: 100%;
43 | }
44 | @mixin gradian-bg{
45 | background: linear-gradient(80.92deg, #af03ff -7.62%, #460663 105.55%);
46 | box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
47 | }
48 | @mixin gradian-border{
49 | background: linear-gradient(80.92deg, #460663 -7.62%, #af03ff 105.55%);
50 | box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
51 | }
52 | @mixin gradian-50{
53 | background: linear-gradient(80.92deg, #af03ff -7.62%, #460663 105.55%);
54 | box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
55 | border-radius: 50%;
56 | }
57 | @mixin gradian-5{
58 | background: linear-gradient(80.92deg, #460663 -7.62%, #af03ff 105.55%);
59 | box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.25);
60 | border-radius: 5px;
61 | }
62 | @mixin gradian-hover{
63 | background: linear-gradient(80.92deg, #af03ff -7.62%, #460663 105.55%);
64 | }
65 | @mixin gradian-text{
66 | background: linear-gradient(80.92deg, #af03ff -7.62%, #460663 105.55%);
67 | -webkit-background-clip: text;
68 | -webkit-text-fill-color: transparent;
69 | background-clip: text;
70 | text-fill-color: transparent;
71 | }
72 | @mixin gradian-text-hover{
73 | background: linear-gradient(80.92deg, #00A182 -7.62%, #81CD34 105.55%);
74 | -webkit-background-clip: text;
75 | -webkit-text-fill-color: transparent;
76 | background-clip: text;
77 | text-fill-color: transparent;
78 | }
79 |
--------------------------------------------------------------------------------
/public/img/svg-icon/world.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/public/img/svg-icon/global.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/public/img/svg-icon/sc2.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/public/img/svg-icon/log1.svg:
--------------------------------------------------------------------------------
1 |
10 |
--------------------------------------------------------------------------------
/components/DisplayOdds.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react"
2 | import getOdds from "@/lib/getOdds"
3 | import { Fixture, Odds } from "@/lib/types/fixture"
4 | import { useBet } from "@/provider/BetProvider"
5 |
6 | const DisplayOdds = ({ fixture }: { fixture: Fixture }) => {
7 | const { betType, selectedFixture, setSelectedFixture, setSelectedOdd } = useBet()
8 | const [odds, setOdds] = useState
13 |
14 |
15 | 
16 |
17 | {league.name}
18 |
19 |
25 | -
20 |
- {formatDate(fixture.date)} 21 |
- Match Winner 22 |
- Total 23 |
26 |
51 | -
27 |
-
28 | 29 | {teams.home.name} 30 | 31 |34 |
32 | 33 |
35 | -
36 | 37 | VS 38 |39 |
40 |
-
41 | 42 | 43 |47 |
44 | 45 | {teams.away.name} 46 |
48 |
50 |
63 | )
64 | }
65 |
66 | export default DisplayOdds
--------------------------------------------------------------------------------
/public/img/svg-icon/etennis.svg:
--------------------------------------------------------------------------------
1 |
30 |
--------------------------------------------------------------------------------
/public/img/svg-icon/rugby.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/public/img/svg-icon/hockyman.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/styles/_components/_buttons.scss:
--------------------------------------------------------------------------------
1 | /*--Button Area Start--*/
2 | /*--Button Area Start--*/
3 | .cmn--btn {
4 | border-radius: 5px;
5 | padding: 8px 22px 13px;
6 | font-weight: 600;
7 | font-size: 16px;
8 | line-height: 19px;
9 | display: inline-block;
10 | color:var(--btn-clr);
11 | border: unset;
12 | text-transform: capitalize;
13 | position: relative;
14 | span{
15 | position: relative;
16 | z-index: 1;
17 | transition: all 0.5s;
18 | }
19 | &::before, &::after {
20 | inset: 0;
21 | content: '';
22 | transition: all ease 0.5s;
23 | position: absolute;
24 | border: 1px solid #af03ff;
25 | border-radius: 5px;
26 | }
27 | &::after {
28 | @include gradian-bg;
29 | opacity: 0;
30 | }
31 | &::before {
32 | @include gradian-hover;
33 | }
34 | &:hover {
35 | color: var(--white-clr);
36 | border-color: #af03ff;
37 | &::before {
38 | background: none;
39 | border-color: #af03ff;
40 | }
41 | &::after {
42 | background: none;
43 | border-color: #af03ff;
44 | }
45 | }
46 | }
47 | .btn--two{
48 | border-radius: 5px;
49 | padding: 6px 22px 11px;
50 | font-weight: 600;
51 | font-size: 16px;
52 | line-height: 19px;
53 | display: inline-block;
54 | color:var(--btn-clr);
55 | background-color: var(--btn-two);
56 | border: unset;
57 | text-transform: capitalize;
58 | transition: all 0.3s;
59 | border: 1px solid var(--btn-two);
60 | overflow: hidden;
61 | &:hover{
62 | background-color: transparent;
63 | border-color: var(--btn-two);
64 | }
65 | }
66 | .cmn--grp{
67 | display: flex;
68 | align-items: center;
69 | flex-wrap: wrap;
70 | gap: 30px;
71 | .border-btn{
72 | &::before{
73 | background-color: #170E30;
74 | }
75 | }
76 | }
77 | .border-btn{
78 | border-radius: 5px;
79 | padding: 11px 22px 12px;
80 | font-weight: 600;
81 | font-size: 16px;
82 | line-height: 19px;
83 | transition: 0.3s;
84 | display: inline-block;
85 | color:var(--title);
86 | text-transform: capitalize;
87 | position: relative;
88 | @include gradian-bg;
89 | span{
90 | position: relative;
91 | z-index: 1;
92 | font-weight: 600;
93 | @include gradian-text;
94 | }
95 | &::before, &::after {
96 | inset: 0;
97 | content: '';
98 | transition: all ease 0.5s;
99 | position: absolute;
100 | }
101 | &::before {
102 | background: var(--section-bg);
103 | border-radius: 5px;
104 | inset: 1px;
105 | transition: all 0.5s;
106 | }
107 | &::after{
108 | opacity: 1;
109 | }
110 | &:hover{
111 | &::before{
112 | opacity: 1;
113 | }
114 | @include gradian-hover;
115 | }
116 | }
117 | /*--Button Area End--*/
118 | /*--Button Area End--*/
--------------------------------------------------------------------------------
/public/img/svg-icon/warcraft.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
handleOddClick(0)}>
51 | 1
52 | {odds[0]?.odd}
53 |
54 | handleOddClick(1)}>
55 | X
56 | {odds[1]?.odd}
57 |
58 | handleOddClick(2)}>
59 | 2
60 | {odds[2]?.odd}
61 |
62 |