Skip to content

Commit 84ee242

Browse files
R0BIN0R0BIN0
committed
feat: some UI update
1 parent 6dffedf commit 84ee242

19 files changed

+244
-156
lines changed

‎frontend/src/components/CreateOfferDialog/CreateOfferDialog.logic.tsx

+30-8
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,32 @@ import { IOfferType } from "@/types/IOfferType/IOfferType";
88
import { erc20Abi, parseEther } from "viem";
99
import { OTC_ADDRESS, TIG_ADDRESS, USDC_ADDRESS } from "@/const/const";
1010
import { IOfferDTO } from "@/types/IOfferDTO/IOfferDTO";
11+
import { useBalance } from "@/hooks/useBalance";
12+
import { formatTIG } from "@/utils/formatTIG";
1113

1214
export const useCreateOfferDialog = () => {
1315
const { data, dispatch } = useDialogs();
1416
const { writeContract } = useWriteContract();
17+
const TIGBalance = useBalance({ token: TIG_ADDRESS });
1518

1619
const {
1720
handleSubmit,
1821
control,
1922
setValue,
23+
getValues,
2024
formState: { isValid, isDirty },
2125
} = useForm<IOfferDTO>({
2226
mode: "onChange",
27+
defaultValues: {
28+
quantity: undefined,
29+
price: 1,
30+
total: undefined,
31+
},
2332
});
2433

2534
const index = 1.54; // Dollar index
26-
const balance = 231; // User balance
2735

2836
const onSubmit: SubmitHandler<IOfferDTO> = (form: IOfferDTO) => {
29-
if (!data.type) return; // throw error
30-
3137
if (data.type === IOfferType.BUY) {
3238
writeContract({
3339
abi: erc20Abi,
@@ -67,18 +73,34 @@ export const useCreateOfferDialog = () => {
6773
dispatch({ action: IAction.CLOSE_MODAL });
6874
}, []);
6975

70-
const fieldUpdate = (key: string, e: React.ChangeEvent<HTMLInputElement>, onChange: (...event: any[]) => void) => {
76+
const fieldUpdate = (key: keyof IOfferDTO, e: React.ChangeEvent<HTMLInputElement>, onChange: (...event: any[]) => void) => {
7177
const value = Number(e.target.value);
7278
onChange(value);
79+
const currentValues = getValues();
7380
if (typeof value !== "number") return;
74-
if (key === "quantity") setValue("total", value === 0 ? 0 : value * index);
75-
if (key === "total") setValue("quantity", value === 0 ? 0 : value / index);
81+
if (key === "quantity") setValue("total", value === 0 ? 0 : value * currentValues.price);
82+
if (key === "total") setValue("quantity", value === 0 ? 0 : value / currentValues.price);
83+
if (key === "price") {
84+
setValue("total", value === 0 ? 0 : value * currentValues.quantity);
85+
}
7686
};
7787

7888
const hasEnoughtTIG = (field: number): boolean | string => {
79-
if (field > balance) return "The number of TIGs entered is greater than your current balance";
89+
if (TIGBalance.balance === undefined) return false;
90+
if (field > formatTIG(TIGBalance.balance)) return "The amount of TIGs entered is greater than your current balance";
8091
return true;
8192
};
8293

83-
return { closeModal, data, handleSubmit, onSubmit, control, isValid, isDirty, fieldUpdate, balance, hasEnoughtTIG };
94+
return {
95+
closeModal,
96+
data,
97+
handleSubmit,
98+
onSubmit,
99+
control,
100+
isValid,
101+
isDirty,
102+
fieldUpdate,
103+
balance: TIGBalance.balance,
104+
hasEnoughtTIG,
105+
};
84106
};

‎frontend/src/components/CreateOfferDialog/CreateOfferDialog.tsx

+93-80
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { CircleBackslashIcon, Cross1Icon, PlusIcon } from "@radix-ui/react-icons";
2-
import { Box, Button, Callout, Dialog, Flex, Grid, IconButton, Text, TextField } from "@radix-ui/themes";
2+
import { Box, Button, Callout, Dialog, Flex, Grid, IconButton, Spinner, Text, TextField } from "@radix-ui/themes";
33
import React, { useMemo } from "react";
44
import { useCreateOfferDialog } from "./CreateOfferDialog.logic";
55
import { IOfferType } from "@/types/IOfferType/IOfferType";
66
import { Controller } from "react-hook-form";
77
import { IUnit } from "@/types/IUnit/IUnit";
8+
import { formatTIG } from "../../utils/formatTIG";
89

910
const CreateOfferDialog = () => {
1011
const logic = useCreateOfferDialog();
@@ -33,110 +34,122 @@ const CreateOfferDialog = () => {
3334
<Dialog.Description size="2" color="gray" mb="5">
3435
{UI.description}
3536
</Dialog.Description>
36-
<Flex>
37-
<form action="" style={{ width: "100%" }}>
38-
<Flex mt="4" style={{ flexFlow: "column" }}>
39-
<Flex width="100%" style={{ flexFlow: "column" }}>
40-
<Flex align="center" justify="between" mb="1">
41-
<Text as="label" size="2" weight="regular" color="gray">
42-
Amount of tig (required)
43-
</Text>
44-
<Text as="span" size="2" weight="regular" color="gray">
45-
Balance: {logic.balance}
46-
<span style={{ fontSize: ".6rem" }}>{IUnit.TIG}</span>
47-
</Text>
48-
</Flex>
49-
<Box mb="4">
50-
<Controller
51-
name="quantity"
52-
rules={{ required: true, validate: (field) => logic.hasEnoughtTIG(field) }}
53-
control={logic.control}
54-
render={({ field, fieldState }) => (
55-
<>
56-
<TextField.Root
57-
size="3"
58-
type="number"
59-
style={{ paddingLeft: "0" }}
60-
onChange={(e) => logic.fieldUpdate("quantity", e, field.onChange)}
61-
value={field.value}
62-
>
63-
<TextField.Slot style={{ paddingLeft: "0" }}></TextField.Slot>
64-
<TextField.Slot>
65-
<Text as="label" size="2" weight="regular" color="gray">
66-
{IUnit.TIG}
67-
</Text>
68-
</TextField.Slot>
69-
</TextField.Root>
70-
{fieldState.error && (
71-
<Callout.Root mt="4" color="red">
72-
<Callout.Icon>
73-
<CircleBackslashIcon />
74-
</Callout.Icon>
75-
<Callout.Text>{fieldState.error.message}</Callout.Text>
76-
</Callout.Root>
77-
)}
78-
</>
79-
)}
80-
></Controller>
81-
</Box>
82-
<Grid columns="2" gap="6">
83-
<Flex width="100%" style={{ flexFlow: "column" }} mb="4">
84-
<Text as="label" size="2" weight="regular" mb="1" color="gray">
85-
Price per TIG (required)
37+
{logic.balance !== undefined ? (
38+
<Flex>
39+
<form action="" style={{ width: "100%" }}>
40+
<Flex mt="4" style={{ flexFlow: "column" }}>
41+
<Flex width="100%" style={{ flexFlow: "column" }}>
42+
<Flex align="center" justify="between" mb="1">
43+
<Text as="label" size="2" weight="regular" color="gray">
44+
Amount of tig (required)
45+
</Text>
46+
<Text as="span" size="2" weight="regular" color="gray">
47+
Balance: {formatTIG(logic.balance)}
48+
<span style={{ fontSize: ".6rem" }}>{IUnit.TIG}</span>
8649
</Text>
50+
</Flex>
51+
<Box mb="4">
8752
<Controller
88-
name="price"
53+
name="quantity"
54+
rules={{ required: true, validate: (field) => logic.hasEnoughtTIG(field) }}
8955
control={logic.control}
90-
render={({ field }) => (
91-
<TextField.Root size="3" type="number" onChange={field.onChange} value={field.value}>
92-
<TextField.Slot style={{ paddingLeft: "0" }}></TextField.Slot>
93-
<TextField.Slot>
94-
<Text as="label" size="2" weight="regular" color="gray">
95-
{IUnit.USDC}
96-
</Text>
97-
</TextField.Slot>
98-
</TextField.Root>
56+
render={({ field, fieldState }) => (
57+
<>
58+
<TextField.Root
59+
size="3"
60+
type="number"
61+
style={{ paddingLeft: "0" }}
62+
onChange={(e) => logic.fieldUpdate("quantity", e, field.onChange)}
63+
min={1}
64+
value={field.value}
65+
>
66+
<TextField.Slot style={{ paddingLeft: "0" }}></TextField.Slot>
67+
<TextField.Slot>
68+
<Text as="label" size="2" weight="regular" color="gray">
69+
{IUnit.TIG}
70+
</Text>
71+
</TextField.Slot>
72+
</TextField.Root>
73+
{fieldState.error && (
74+
<Callout.Root mt="4" color="red">
75+
<Callout.Icon>
76+
<CircleBackslashIcon />
77+
</Callout.Icon>
78+
<Callout.Text>{fieldState.error.message}</Callout.Text>
79+
</Callout.Root>
80+
)}
81+
</>
9982
)}
10083
></Controller>
101-
</Flex>
102-
<Flex width="100%" style={{ flexFlow: "column" }}>
103-
<Text as="label" size="2" weight="regular" mb="1" color="gray">
104-
Total USDC (required)
105-
</Text>
106-
<Box>
84+
</Box>
85+
<Grid columns="2" gap="6">
86+
<Flex width="100%" style={{ flexFlow: "column" }} mb="4">
87+
<Text as="label" size="2" weight="regular" mb="1" color="gray">
88+
Price per TIG (required)
89+
</Text>
10790
<Controller
108-
name="total"
91+
name="price"
10992
control={logic.control}
11093
render={({ field }) => (
11194
<TextField.Root
11295
size="3"
11396
type="number"
114-
onChange={(e) => logic.fieldUpdate("total", e, field.onChange)}
97+
onChange={(e) => logic.fieldUpdate("price", e, field.onChange)}
11598
value={field.value}
11699
>
117100
<TextField.Slot style={{ paddingLeft: "0" }}></TextField.Slot>
118101
<TextField.Slot>
119102
<Text as="label" size="2" weight="regular" color="gray">
120-
{IUnit.DOLLARD}
103+
{IUnit.USDC}
121104
</Text>
122105
</TextField.Slot>
123106
</TextField.Root>
124107
)}
125108
></Controller>
109+
</Flex>
110+
<Flex width="100%" style={{ flexFlow: "column" }}>
111+
<Text as="label" size="2" weight="regular" mb="1" color="gray">
112+
Total USDC (required)
113+
</Text>
114+
<Box>
115+
<Controller
116+
name="total"
117+
control={logic.control}
118+
render={({ field }) => (
119+
<TextField.Root
120+
size="3"
121+
type="number"
122+
onChange={(e) => logic.fieldUpdate("total", e, field.onChange)}
123+
value={field.value}
124+
>
125+
<TextField.Slot style={{ paddingLeft: "0" }}></TextField.Slot>
126+
<TextField.Slot>
127+
<Text as="label" size="2" weight="regular" color="gray">
128+
{IUnit.DOLLARD}
129+
</Text>
130+
</TextField.Slot>
131+
</TextField.Root>
132+
)}
133+
></Controller>
134+
</Box>
135+
</Flex>
136+
</Grid>
137+
<Flex justify={"end"}>
138+
<Box>
139+
<Button onClick={logic.handleSubmit(logic.onSubmit)} disabled={!logic.isDirty || !logic.isValid}>
140+
<PlusIcon /> Create Offer
141+
</Button>
126142
</Box>
127143
</Flex>
128-
</Grid>
129-
<Flex justify={"end"}>
130-
<Box>
131-
<Button onClick={logic.handleSubmit(logic.onSubmit)} disabled={!logic.isDirty || !logic.isValid}>
132-
<PlusIcon /> Create Offer
133-
</Button>
134-
</Box>
135144
</Flex>
136145
</Flex>
137-
</Flex>
138-
</form>
139-
</Flex>
146+
</form>
147+
</Flex>
148+
) : (
149+
<Flex justify="center" align="center" style={{ minHeight: "200px" }}>
150+
<Spinner />
151+
</Flex>
152+
)}
140153
</Dialog.Content>
141154
</Dialog.Root>
142155
);

‎frontend/src/components/GlobalInformation/GlobalInformation.logic.tsx

+11-17
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,38 @@ export const useGlobalInformation = () => {
99

1010
const items: ICard[] = [
1111
{
12-
title: "Last transaction price",
13-
description: "Review here the last transaction done",
12+
title: "Transactions",
13+
description: "Review here all informations relative to transactions",
1414
data: [
1515
{
1616
title: "Last transaction price",
1717
value: 0,
1818
unit: IUnit.DOLLARD,
1919
},
20-
],
21-
},
22-
{
23-
title: "Market cap",
24-
description: "Review here the global market cap relative to TIG",
25-
forceRender: true,
26-
data: [
2720
{
28-
title: "Market cap",
29-
value: Number(formatUnits(marketCap.data ?? BigInt(0), 18)),
21+
title: "24h Volume",
22+
value: 0,
3023
unit: IUnit.TIG,
3124
},
3225
{
33-
title: "Market cap",
26+
title: "24h Volume",
3427
value: 0,
3528
unit: IUnit.DOLLARD,
3629
},
3730
],
3831
},
3932
{
40-
title: "24h Volume",
41-
description: "Review here the global volume during the last 24h",
33+
title: "Market cap",
34+
description: "Review here the global market cap relative to TIG",
35+
forceRender: true,
4236
data: [
4337
{
44-
title: "24h Volume",
45-
value: 0,
38+
title: "Market cap",
39+
value: Number(formatUnits(marketCap.data ?? BigInt(0), 18)),
4640
unit: IUnit.TIG,
4741
},
4842
{
49-
title: "24h Volume",
43+
title: "Market cap",
5044
value: 0,
5145
unit: IUnit.DOLLARD,
5246
},

‎frontend/src/components/GlobalInformation/GlobalInformation.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
"use client";
2-
import { Flex, Grid } from "@radix-ui/themes";
2+
import { Grid } from "@radix-ui/themes";
33
import React from "react";
44
import { useGlobalInformation } from "./GlobalInformation.logic";
55
import Card from "../Card/Card";

‎frontend/src/components/Navbar/Navbar.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Navbar = () => {
1616
<Flex align="center" gap="2">
1717
<Logo />
1818
<Text weight="bold">
19-
TIG <span style={{ color: "#ccb256" }}>OTC</span>
19+
TIG <span style={{ color: "#ffc53d" }}>OTC</span>
2020
</Text>
2121
</Flex>
2222
<Flex justify="between" align="center">

‎frontend/src/components/Offers/Offers.logic.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import { IAction } from "@/store/dialogsReducer/dialogsReducer.types";
33
import { IModals } from "@/types/IModals/IModals";
44
import { IOffers } from "@/types/IOffers/IOffers";
55
import { useCallback } from "react";
6+
import { useAccount } from "wagmi";
67

78
export const useOffers = (props: IOffers) => {
89
const { dispatch } = useDialogs();
10+
const { address } = useAccount();
911

1012
const openCreateOffer = useCallback(() => {
1113
dispatch({ action: IAction.OPEN_MODAL, payload: { isOpen: IModals.CREATE_OFFER, data: { type: props.type } } });
1214
}, [props.type]);
1315

14-
return { openCreateOffer };
16+
return { openCreateOffer, address };
1517
};

‎frontend/src/components/Offers/Offers.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ const Offers = (props: IOffers) => {
1616
<Text as="p" size="6" weight="medium" mb="1">
1717
{props.title}
1818
</Text>
19-
20-
<Button size="2" style={{ minHeight: "35px" }} onClick={logic.openCreateOffer}>
19+
<Button size="2" style={{ minHeight: "35px" }} onClick={logic.openCreateOffer} disabled={!logic.address}>
2120
<PlusIcon /> Create Offer
2221
</Button>
2322
</Flex>

0 commit comments

Comments
 (0)