feat(components): Add buy-modal component for purchasing crypto
This commit introduces a new component, `buy-modal.tsx`, within the cryptos scope of components. This component allows the option to buy cryptocurrency either from a user or directly from the server. It provides form validation, API integrations, handles states, and displays proper response messages.
This commit is contained in:
parent
37b7116a69
commit
49d485c11a
GPG Key ID:
DD9E0666A747D126
193
src/components/cryptos/buy-modal.tsx
Normal file
193
src/components/cryptos/buy-modal.tsx
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
// @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>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
x
Reference in New Issue
Block a user