Compare commits
No commits in common. "5164255aea0db3f113504837a8596cc83cf265bd" and "aa322d0c8f1b04b7fc34f1d5960da4d71ae385a5" have entirely different histories.
5164255aea
...
aa322d0c8f
10
.idea/inspectionProfiles/Project_Default.xml
generated
10
.idea/inspectionProfiles/Project_Default.xml
generated
@ -1,10 +0,0 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<profile version="1.0">
|
||||
<option name="myName" value="Project Default" />
|
||||
<inspection_tool class="DuplicatedCode" enabled="true" level="WEAK WARNING" enabled_by_default="true">
|
||||
<Languages>
|
||||
<language minSize="86" name="TypeScript" />
|
||||
</Languages>
|
||||
</inspection_tool>
|
||||
</profile>
|
||||
</component>
|
||||
@ -39,7 +39,6 @@
|
||||
"@radix-ui/react-toggle": "^1.0.3",
|
||||
"@radix-ui/react-toggle-group": "^1.0.4",
|
||||
"@radix-ui/react-tooltip": "^1.0.7",
|
||||
"@tanstack/react-table": "^8.17.3",
|
||||
"axios": "^1.7.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
|
||||
22
pnpm-lock.yaml
generated
22
pnpm-lock.yaml
generated
@ -95,9 +95,6 @@ importers:
|
||||
'@radix-ui/react-tooltip':
|
||||
specifier: ^1.0.7
|
||||
version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
'@tanstack/react-table':
|
||||
specifier: ^8.17.3
|
||||
version: 8.17.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
|
||||
axios:
|
||||
specifier: ^1.7.2
|
||||
version: 1.7.2
|
||||
@ -1241,17 +1238,6 @@ packages:
|
||||
'@swc/helpers@0.5.5':
|
||||
resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
|
||||
|
||||
'@tanstack/react-table@8.17.3':
|
||||
resolution: {integrity: sha512-5gwg5SvPD3lNAXPuJJz1fOCEZYk9/GeBFH3w/hCgnfyszOIzwkwgp5I7Q4MJtn0WECp84b5STQUDdmvGi8m3nA==}
|
||||
engines: {node: '>=12'}
|
||||
peerDependencies:
|
||||
react: '>=16.8'
|
||||
react-dom: '>=16.8'
|
||||
|
||||
'@tanstack/table-core@8.17.3':
|
||||
resolution: {integrity: sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
'@types/babel__core@7.20.5':
|
||||
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
|
||||
|
||||
@ -3893,14 +3879,6 @@ snapshots:
|
||||
'@swc/counter': 0.1.3
|
||||
tslib: 2.6.3
|
||||
|
||||
'@tanstack/react-table@8.17.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
|
||||
dependencies:
|
||||
'@tanstack/table-core': 8.17.3
|
||||
react: 18.3.1
|
||||
react-dom: 18.3.1(react@18.3.1)
|
||||
|
||||
'@tanstack/table-core@8.17.3': {}
|
||||
|
||||
'@types/babel__core@7.20.5':
|
||||
dependencies:
|
||||
'@babel/parser': 7.24.7
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
export default function AdminPage() {
|
||||
return (<>
|
||||
<section>
|
||||
<h1>Welcome to the Dashboard</h1>
|
||||
</section>
|
||||
</>)
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
|
||||
import {CryptosTable} from "@/components/data-tables/cryptos-table";
|
||||
import {useEffect, useState} from "react";
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import ApiRequest from "@/services/apiRequest";
|
||||
import type {IApiAllOffersRes} from "@/interfaces/api.interface";
|
||||
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true)
|
||||
const [cryptosList, setCryptosList] = useState<ICryptoInWalletInfo[]>([])
|
||||
//FIX the loop
|
||||
|
||||
useEffect(() => {
|
||||
ApiRequest.authenticated.get.json<ICryptoInWalletInfo[]>(
|
||||
"crypto/all"
|
||||
).then((response)=>{
|
||||
if (response.data.length <= 0) {
|
||||
setCryptosList([])
|
||||
setIsLoading(false)
|
||||
return
|
||||
}
|
||||
const resp = response.data
|
||||
setCryptosList(resp)
|
||||
setIsLoading(false)
|
||||
})
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (<div className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
|
||||
<h1 className={"text-2xl font-bold"}>Available cryptos</h1>
|
||||
<Skeleton className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}/>
|
||||
</div>)
|
||||
}
|
||||
|
||||
return (<>
|
||||
<section className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
|
||||
<h1 className={"text-2xl font-bold"}>Available cryptos</h1>
|
||||
<CryptosTable cryptosArray={cryptosList}/>
|
||||
</section>
|
||||
</>)
|
||||
}
|
||||
@ -8,8 +8,6 @@ import { Providers } from "@/components/providers/providers";
|
||||
import { ThemeProvider } from "@/components/providers/theme-provider";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import type React from "react";
|
||||
import Link from "next/link";
|
||||
import {Button} from "@/components/ui/button";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "YeloBit",
|
||||
@ -30,10 +28,7 @@ export default function RootLayout({
|
||||
<body className={"w-full min-h-screen flex flex-col items-center justify-between"}>
|
||||
<Providers>
|
||||
<Header>
|
||||
<div className={"flex flex-row flex-wrap md:flex-nowrap gap-2"}>
|
||||
<Button asChild variant={'light'}><Link href={'/wallet'}>Wallet</Link></Button>
|
||||
<Button asChild variant={'light'}><Link href={'/dashboard'}>Dashboard</Link></Button>
|
||||
</div>
|
||||
<PrimaryNavigationMenu />
|
||||
</Header>
|
||||
{children}
|
||||
<Toaster />
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
|
||||
import {CryptosTable} from "@/components/data-tables/cryptos-table";
|
||||
import {useContext, useEffect, useState} from "react";
|
||||
import {Skeleton} from "@/components/ui/skeleton";
|
||||
import ApiRequest from "@/services/apiRequest";
|
||||
import type {IApiAllOffersRes} from "@/interfaces/api.interface";
|
||||
import {WalletTable} from "@/components/data-tables/wallet-table";
|
||||
import {UserDataContext} from "@/components/providers/userdata-provider";
|
||||
import {IUserWallet} from "@/interfaces/userdata.interface";
|
||||
|
||||
|
||||
export default function WalletPage() {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true)
|
||||
const [cryptosList, setCryptosList] = useState<ICryptoInWalletInfo[]>([])
|
||||
const userContext = useContext(UserDataContext);
|
||||
//FIX the loop
|
||||
|
||||
useEffect(() => {
|
||||
console.log(userContext?.userData)
|
||||
if (userContext?.userData) {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [userContext]);
|
||||
|
||||
if (isLoading || !userContext?.userData) {
|
||||
return (<div className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
|
||||
<h1 className={"text-2xl font-bold"}>Cryptos in your wallet</h1>
|
||||
<Skeleton className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}/>
|
||||
</div>)
|
||||
}
|
||||
|
||||
return (<>
|
||||
<section className={"container flex flex-col justify-center items-center min-h-64 my-6 gap-4"}>
|
||||
<h1 className={"text-2xl font-bold"}>Cryptos in your wallet</h1>
|
||||
<WalletTable walletArray={userContext.userData.wallet as unknown as IUserWallet}/>
|
||||
</section>
|
||||
</>)
|
||||
}
|
||||
@ -11,15 +11,13 @@ import {
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type {IUserData, IUserWallet} from "@/interfaces/userdata.interface";
|
||||
import type { IUserData } from "@/interfaces/userdata.interface";
|
||||
|
||||
import { CopyButton } from "@/components/ui/copy-button";
|
||||
import { doDisconnect, getWallet } from "@/services/account.handler";
|
||||
import { Bitcoin, Fingerprint, Key, Landmark, Unplug, User, Wallet } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import type React from "react";
|
||||
import {useEffect, useState} from "react";
|
||||
import {type ICryptoInUserWalletInfo, ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
|
||||
|
||||
export function AccountInfo({
|
||||
userData,
|
||||
@ -30,41 +28,9 @@ export function AccountInfo({
|
||||
setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
|
||||
isDisconnected: boolean;
|
||||
}) {
|
||||
const [isLoaded,setIsLoaded] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoaded) {
|
||||
getWallet().then((res) => {
|
||||
|
||||
const wallet: IUserWallet = {
|
||||
uat: Date.now(),
|
||||
update_interval: 30_000,
|
||||
owned_cryptos: res.resolved?.UserHasCrypto?.map((el): ICryptoInUserWalletInfo => {
|
||||
return {
|
||||
id: el.Crypto.id,
|
||||
name: el.Crypto.name,
|
||||
value: el.Crypto.value,
|
||||
image: el.Crypto.image,
|
||||
quantity: el.Crypto.quantity,
|
||||
owned_amount: el.amount,
|
||||
created_at: el.Crypto.created_at,
|
||||
updated_at: el.Crypto.updated_at
|
||||
}
|
||||
}) || []
|
||||
}
|
||||
|
||||
delete res.resolved?.UserHasCrypto
|
||||
//@ts-ignore
|
||||
setUserData({
|
||||
...userData,
|
||||
...res.resolved,
|
||||
wallet: wallet
|
||||
})
|
||||
console.log(userData)
|
||||
setIsLoaded(true)
|
||||
});
|
||||
}
|
||||
}, [isLoaded]);
|
||||
getWallet().then(() => {
|
||||
console.log("pong !");
|
||||
});
|
||||
if (isDisconnected) {
|
||||
return (
|
||||
<div className={"flex flex-col justify-center items-center h-10 p-2 text-xs mt-2"}>
|
||||
@ -98,7 +64,7 @@ export function AccountInfo({
|
||||
<User />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px] md:max-w-[720px]">
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
|
||||
<DialogDescription>{userData.city}</DialogDescription>
|
||||
@ -127,7 +93,7 @@ export function AccountInfo({
|
||||
>
|
||||
<Bitcoin />
|
||||
<p className={"rounded bg-accent text-accent-foreground p-1"}>
|
||||
{`You currently have ${userData.wallet.owned_cryptos.length} crypto(s)`}
|
||||
You dont have cryptos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -150,15 +116,13 @@ export function AccountInfo({
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant={"secondary"} className={"gap-2 px-2"} asChild>
|
||||
<Link href={'/wallet'}>
|
||||
<Wallet />
|
||||
<p>My wallet</p>
|
||||
</Link>
|
||||
<Button variant={"secondary"} className={"gap-2 px-2"}>
|
||||
<Wallet />
|
||||
<p>My wallet</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
className={"gap-2 px-2 mb-2"}
|
||||
className={"gap-2 px-2"}
|
||||
onClick={() => doDisconnect()}
|
||||
>
|
||||
<Unplug />
|
||||
|
||||
@ -88,8 +88,7 @@ export function AuthForms() {
|
||||
owned_cryptos: [],
|
||||
},
|
||||
});
|
||||
|
||||
setSub(ReqRes.data.access_token);
|
||||
setSub(ReqRes.data.access_token?.toString());
|
||||
}
|
||||
console.debug(ReqRes.data.message || "Not additional message from request");
|
||||
return {
|
||||
|
||||
@ -1,193 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Ban, DollarSign, RefreshCw} from "lucide-react";
|
||||
import * as z from "zod";
|
||||
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
|
||||
import {Dispatch, SetStateAction, useEffect, useState} from "react";
|
||||
import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
|
||||
import {toast} from "@/components/ui/use-toast";
|
||||
import AutoForm, {AutoFormSubmit} from "@/components/auto-form";
|
||||
import type {IApiAllOffersRes, IApiDoTradeReq} from "@/interfaces/api.interface";
|
||||
import ApiRequest from "@/services/apiRequest";
|
||||
import {Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
|
||||
import {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from "@/components/ui/select";
|
||||
import Link from "next/link";
|
||||
import {useForm} from "react-hook-form";
|
||||
import {zodResolver} from "@hookform/resolvers/zod";
|
||||
type Props = {
|
||||
cryptoData: ICryptoInWalletInfo
|
||||
};
|
||||
export function BuyModal(props: Props) {
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false)
|
||||
const [offersList, setOffersList] = useState<IApiAllOffersRes[]>([])
|
||||
const [isLoaded,setIsLoaded] = useState(false)
|
||||
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
|
||||
useEffect(() => {
|
||||
if(!isLoaded) {
|
||||
ApiRequest.authenticated.get.json<IApiAllOffersRes[]>(`offer/crypto/${props.cryptoData.id}`).then((response) => {
|
||||
setOffersList(response.data);
|
||||
console.log(`Crypto ${props.cryptoData.name} -> ${response.data.length}`)
|
||||
setIsLoaded(true);
|
||||
return;
|
||||
})
|
||||
}
|
||||
}, [isLoaded]);
|
||||
|
||||
const buyFromServerSchema = z.object({
|
||||
amount: z
|
||||
.number({
|
||||
required_error: "An amount is needed.",
|
||||
})
|
||||
.min(1)
|
||||
.max(props.cryptoData.quantity, "You cant buy more that what is available on the server.")
|
||||
.describe("The amount you want to buy."),
|
||||
});
|
||||
|
||||
const buyFromUserSchema = z.object({
|
||||
offerId: z
|
||||
.string({
|
||||
required_error: "You should select an offer.",
|
||||
})
|
||||
.uuid(),
|
||||
})
|
||||
|
||||
function onBuyFromServerSubmit(data: z.infer<typeof buyFromServerSchema>) {
|
||||
ApiRequest.authenticated.post.json("crypto/buy", {id_crypto: props.cryptoData.id, amount: data.amount}).then((res)=>{
|
||||
if (res.status !== 201) {
|
||||
toast({
|
||||
title: "An error occurred !",
|
||||
description: (<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white text-wrap">{JSON.stringify(res.statusText, null, 2)}</code>
|
||||
</pre>)
|
||||
})
|
||||
return
|
||||
}
|
||||
toast({
|
||||
title: "Transaction accepted.",
|
||||
description: (
|
||||
<p>You will be redirected.</p>
|
||||
)
|
||||
})
|
||||
setTimeout(()=>location.reload(), 1_500)
|
||||
})
|
||||
toast({
|
||||
title: "You submitted the following values:",
|
||||
description: (
|
||||
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||
</pre>
|
||||
),
|
||||
})
|
||||
}
|
||||
function onBuyFromUserSubmit(data: z.infer<typeof buyFromUserSchema>) {
|
||||
ApiRequest.authenticated.post.json("trade/create", {id_offer: data.offerId}).then((res)=>{
|
||||
if (res.status !== 201) {
|
||||
toast({
|
||||
title: "An error occurred !",
|
||||
description: (<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white text-wrap">{JSON.stringify(res.statusText, null, 2)}</code>
|
||||
</pre>)
|
||||
})
|
||||
return
|
||||
}
|
||||
toast({
|
||||
title: "Transaction accepted.",
|
||||
description: (
|
||||
<p>You will be redirected.</p>
|
||||
)
|
||||
})
|
||||
setTimeout(()=>location.reload(), 1_500)
|
||||
})
|
||||
toast({
|
||||
title: "You submitted the following values:",
|
||||
description: (
|
||||
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||
</pre>
|
||||
),
|
||||
})
|
||||
}
|
||||
|
||||
const buyFromUserForm = useForm<z.infer<typeof buyFromUserSchema>>({
|
||||
resolver: zodResolver(buyFromUserSchema),
|
||||
})
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="light"><DollarSign /></Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px] md:max-w-[800px] flex flex-col justify-start items-center">
|
||||
<Tabs defaultValue="server" className="w-full p-2 my-4">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="user">Buy from user <p className={" ml-1 px-1 bg-primary text-primary-foreground rounded"}>{offersList.length}</p></TabsTrigger>
|
||||
<TabsTrigger value="server">Buy from server</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="user" className={"flex flex-col justify-start items-center"}>
|
||||
<Form {...buyFromUserForm}>
|
||||
<form onSubmit={buyFromUserForm.handleSubmit(onBuyFromUserSubmit)} className="w-full space-y-6">
|
||||
<FormField
|
||||
control={buyFromUserForm.control}
|
||||
name="offerId"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Select an offer</FormLabel>
|
||||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an offer to purchase." />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
{offersList.map((offer)=>{
|
||||
return (
|
||||
<SelectItem value={offer.id} key={offer.id}>{`${offer.amount}x ${offer.Crypto.name} - ${offer.User.pseudo}`}</SelectItem>
|
||||
)
|
||||
})}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button type="submit">Submit</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</TabsContent>
|
||||
<TabsContent value="server" className={"flex flex-col justify-start items-center"}>
|
||||
{!props.cryptoData.quantity && <div
|
||||
className={"bg-destructive text-destructive-foreground border-destructive rounded p-2 flex justify-start items-center gap-2"}>
|
||||
<Ban/>
|
||||
<p>The server dont have stock for the designated cryptos.</p>
|
||||
</div>}
|
||||
<div className={"w-full flex justify-center gap-2 items-center p-2"}>
|
||||
<p>Available quantity on the server :</p>
|
||||
<p className={"p-1 bg-accent text-accent-foreground rounded m-1"}>{props.cryptoData.quantity}</p>
|
||||
</div>
|
||||
{props.cryptoData.quantity && <AutoForm
|
||||
// Pass the schema to the form
|
||||
formSchema={buyFromServerSchema}
|
||||
onSubmit={onBuyFromServerSubmit}
|
||||
>
|
||||
<AutoFormSubmit
|
||||
disabled={!!isLoading}
|
||||
className={"gap-2 disabled:bg-secondary-foreground"}
|
||||
>
|
||||
{/* biome-ignore lint/style/useTemplate: <explanation> */}
|
||||
<RefreshCw className={`animate-spin ${!isLoading && "hidden"}`}/>
|
||||
<p>Buy from the server</p>
|
||||
</AutoFormSubmit>
|
||||
</AutoForm>}
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@ -1,30 +0,0 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription, DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {Label} from "@/components/ui/label";
|
||||
import {Input} from "@/components/ui/input";
|
||||
import {LineChart} from "lucide-react";
|
||||
type Props = {
|
||||
targetedCryptoId: string
|
||||
};
|
||||
export function ViewModal(props: Props) {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="ghost"><LineChart /></Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px] md:max-w-[800px]">
|
||||
Test 1,2 !
|
||||
//From here
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
@ -1,86 +0,0 @@
|
||||
'use client'
|
||||
import * as React from 'react';
|
||||
import type {ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
import {DataTable} from "@/components/ui/data-table";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {ArrowUpDown, MoreHorizontal} from "lucide-react";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {useState} from "react";
|
||||
import {BuyModal} from "@/components/cryptos/buy-modal";
|
||||
import {ViewModal} from "@/components/cryptos/view-modal";
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
type Props = {
|
||||
cryptosArray: ICryptoInWalletInfo[]
|
||||
};
|
||||
|
||||
export function CryptosTable(props: Props) {
|
||||
const router = useRouter()
|
||||
const cryptos= props.cryptosArray
|
||||
|
||||
const columns: ColumnDef<ICryptoInWalletInfo, any>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Name",
|
||||
},
|
||||
{
|
||||
accessorKey: "value",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
Value - USD
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "quantity",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
Available from server
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => {
|
||||
const payment = row.original
|
||||
|
||||
return (
|
||||
<div className={"flex gap-2"}>
|
||||
<BuyModal cryptoData={row.original}/>
|
||||
<ViewModal targetedCryptoId={row.original.id}/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable columns={columns} data={cryptos} fieldToFilter={"name"}/>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
'use client'
|
||||
import * as React from 'react';
|
||||
import type {ICryptoInUserWalletInfo, ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
import {DataTable} from "@/components/ui/data-table";
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {ArrowUpDown, MoreHorizontal} from "lucide-react";
|
||||
import {useRouter} from "next/navigation";
|
||||
import {useState} from "react";
|
||||
import {BuyModal} from "@/components/cryptos/buy-modal";
|
||||
import {ViewModal} from "@/components/cryptos/view-modal";
|
||||
import {IUserWallet} from "@/interfaces/userdata.interface";
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
type Props = {
|
||||
walletArray: IUserWallet
|
||||
};
|
||||
|
||||
export function WalletTable(props: Props) {
|
||||
const router = useRouter()
|
||||
const wallet= props.walletArray.owned_cryptos
|
||||
|
||||
const columns: ColumnDef<ICryptoInUserWalletInfo, any>[] = [
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Name",
|
||||
},
|
||||
{
|
||||
accessorKey: "value",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
Value - USD
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "owned_amount",
|
||||
header: ({ column }) => {
|
||||
return (
|
||||
<Button
|
||||
variant="light"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
|
||||
>
|
||||
Amount owned
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
</Button>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => {
|
||||
const payment = row.original
|
||||
|
||||
return (
|
||||
<div className={"flex gap-2"}>
|
||||
<p className={"font-light italic text-xs"}>Soon here : Sell, History</p>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable columns={columns} data={wallet} fieldToFilter={"name"}/>
|
||||
</>
|
||||
);
|
||||
|
||||
}
|
||||
@ -15,7 +15,6 @@ const buttonVariants = cva(
|
||||
"border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
light: "hover:bg-accent-foreground hover:text-accent",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import {
|
||||
type ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getPaginationRowModel,
|
||||
type ColumnFiltersState,
|
||||
getFilteredRowModel,
|
||||
getSortedRowModel, type SortingState,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import {Button} from "@/components/ui/button";
|
||||
import {useState} from "react";
|
||||
import {Input} from "@/components/ui/input";
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
fieldToFilter: string
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({
|
||||
columns,
|
||||
data,
|
||||
fieldToFilter,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const [sorting, setSorting] = useState<SortingState>([])
|
||||
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
|
||||
[]
|
||||
)
|
||||
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
onSortingChange: setSorting,
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
onColumnFiltersChange: setColumnFilters,
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
state: {
|
||||
sorting,
|
||||
columnFilters,
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div className={"w-full"}>
|
||||
<div className="flex items-center py-4">
|
||||
<Input
|
||||
placeholder={`Filter ${fieldToFilter}...`}
|
||||
value={(table.getColumn(fieldToFilter)?.getFilterValue() as string) ?? ""}
|
||||
onChange={(event) =>
|
||||
table.getColumn(fieldToFilter)?.setFilterValue(event.target.value)
|
||||
}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="rounded-md border w-full text-md">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
return (
|
||||
<TableHead key={header.id} className={"font-bold text-lg text-center"}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id} className={"text-center"}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="flex items-center justify-end space-x-2 py-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
import {type ICryptoInWalletInfo, ITrade, type IUserWalletCryptos} from "@/interfaces/crypto.interface";
|
||||
import { ITrade, type IUserWalletCryptos } from "@/interfaces/crypto.interface";
|
||||
import type { IUserData } from "@/interfaces/userdata.interface";
|
||||
|
||||
// ----- Request -----
|
||||
@ -27,20 +27,6 @@ export interface IApiOfferCreateReq {
|
||||
amount: number;
|
||||
}
|
||||
|
||||
export interface IApiCreateReferralCodeReq {
|
||||
name: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface IApiDoTradeReq {
|
||||
id_offer: string;
|
||||
}
|
||||
|
||||
export interface IApiDoOfferReq {
|
||||
id_crypto: string;
|
||||
amount: number;
|
||||
}
|
||||
|
||||
// ----- Response -----
|
||||
|
||||
export interface IAbstractApiResponse {
|
||||
@ -72,19 +58,6 @@ export interface IAllRankRes extends IAbstractApiResponse {}
|
||||
|
||||
export interface IAllReferralCodeRes extends IAbstractApiResponse {}
|
||||
|
||||
export interface ICreateReferralCodeRes extends IAbstractApiResponse {}
|
||||
|
||||
export interface IReferralCodeUpdateRes extends IAbstractApiResponse {}
|
||||
|
||||
export interface IReferralCodeDeleteRes extends IAbstractApiResponse {}
|
||||
|
||||
export interface IApiAllOffersRes extends IAbstractApiResponse {
|
||||
id: string
|
||||
User: {
|
||||
pseudo: string
|
||||
}
|
||||
amount: number
|
||||
created_at: string
|
||||
id_user: string
|
||||
Crypto: ICryptoInWalletInfo
|
||||
}
|
||||
|
||||
@ -1,18 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import type {
|
||||
IAbstractApiResponse,
|
||||
IAllReferralCodeRes,
|
||||
IApiAllTradesRes, IApiDoTradeReq,
|
||||
IApiUserAssetsRes,
|
||||
ICreateReferralCodeRes,
|
||||
} from "@/interfaces/api.interface";
|
||||
import {ICryptoInWalletInfo, IUserWalletCryptos} from "@/interfaces/crypto.interface";
|
||||
import type {IAllReferralCodeRes, IApiAllTradesRes, IApiUserAssetsRes} from "@/interfaces/api.interface";
|
||||
import { IUserWalletCryptos } from "@/interfaces/crypto.interface";
|
||||
import { EReturnState, type IStandardisedReturn } from "@/interfaces/general.interface";
|
||||
import type { IUserData, IUserWallet } from "@/interfaces/userdata.interface";
|
||||
import ApiRequest from "@/services/apiRequest";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import {AxiosResponse} from "axios";
|
||||
|
||||
//TODO Run disconnect task
|
||||
export function doDisconnect() {
|
||||
@ -50,4 +43,154 @@ export async function getWallet(): Promise<IStandardisedReturn<IApiUserAssetsRes
|
||||
state: EReturnState.serverError,
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function getUserTrades() {
|
||||
try {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.get.json<IStandardisedReturn<IApiAllTradesRes>>(
|
||||
"user/my-trades",
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
state: EReturnState.serverError,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function getAlltrades() {
|
||||
try {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.get.json<IStandardisedReturn<IApiAllTradesRes>>(
|
||||
"trade/all",
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
} catch (err) {
|
||||
return {
|
||||
state: EReturnState.serverError,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function createTrade(data: any) {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.post.json<IStandardisedReturn<IApiAllTradesRes>>(
|
||||
"trade/create",
|
||||
{
|
||||
|
||||
}
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
}
|
||||
|
||||
export async function getAllTrade() {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.get.json<IStandardisedReturn<IApiAllTradesRes>>(
|
||||
"trade/all",
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
}
|
||||
|
||||
export async function getUserTrade() {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.get.json<IStandardisedReturn<IApiAllTradesRes>>(
|
||||
"user/my-trades",
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
}
|
||||
|
||||
export async function getAllReferralCode() {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.get.json<IStandardisedReturn<IAllReferralCodeRes>>(
|
||||
"promoCode/all",
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
}
|
||||
|
||||
export async function createReferralCode(data: any) {
|
||||
const ReqRes =
|
||||
await ApiRequest.authenticated.post.json<IStandardisedReturn<IAllReferralCodeRes>>(
|
||||
"promoCode/create",
|
||||
data
|
||||
);
|
||||
console.log(ReqRes.data);
|
||||
|
||||
if (ReqRes.status !== 200) {
|
||||
return {
|
||||
state: EReturnState.clientError,
|
||||
};
|
||||
}
|
||||
return {
|
||||
state: EReturnState.done,
|
||||
resolved: ReqRes.data,
|
||||
};
|
||||
}
|
||||
|
||||
export async function getAllCryptos() {}
|
||||
|
||||
export async function getCryptoHistory(cryptoId: string) {}
|
||||
|
||||
export async function sellCrypto() {}
|
||||
|
||||
export async function buyCrypto() {}
|
||||
@ -10,7 +10,7 @@ const AxiosConfigs = {
|
||||
return {
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
Authorization: `Bearer ${typeof window !== "undefined" ? JSON.parse(window.localStorage.getItem("sub") || "not-ssr") : "not-ssr"}`,
|
||||
Authorization: `Bearer ${typeof window !== "undefined" ? window.localStorage.getItem("sub") : "not-ssr"}`,
|
||||
},
|
||||
validateStatus: (status: number) => {
|
||||
return status < 500; // Resolve only if the status code is less than 500
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user