lthn/trade-frontend
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

lint

Browse source
This commit is contained in:
jejolare 2025-07-01 19:04:53 +07:00
parent 4e45757a30
commit c26200e29c
18 changed files with 247 additions and 252 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
next.config.js
View file

@ -27,11 +27,10 @@ const nextConfig = {
return [ return [
{ {
source: '/api/:path*', source: '/api/:path*',
destination: `${process.env.API_URL}/api/:path*` destination: `${process.env.API_URL}/api/:path*`,
} },
] ];
}, },
}; };
export default nextConfig; export default nextConfig;

1
package.json
View file

@ -8,6 +8,7 @@
"build": "next build", "build": "next build",
"start": "next start -p 30289", "start": "next start -p 30289",
"lint": "next lint", "lint": "next lint",
"lint:fix": "eslint . --fix",
"format": "prettier --write .", "format": "prettier --write .",
"format:check": "prettier --check .", "format:check": "prettier --check .",
"prepare": "husky" "prepare": "husky"

2
src/components/UI/Switch/Switch.tsx
View file

@ -7,4 +7,4 @@ interface IProps {
disabled?: boolean; disabled?: boolean;
} }
export const Switch: FC<IProps> = ({ ...rest }) => <ANTDSwitch {...rest} />; export const Switch: FC<IProps> = ({ ...rest }) => <ANTDSwitch {...rest} />;

5
src/components/default/Header/NavBar/NavBar.tsx
View file

@ -37,10 +37,7 @@ function NavBar(props: NavBarProps) {
} }
return ( return (
<Link <Link href={href} className={linkClass}>
href={href}
className={linkClass}
>
<Img /> <Img />
<h6>{title}</h6> <h6>{title}</h6>
<NotificationIndicator count={notifications} /> <NotificationIndicator count={notifications} />

52
src/interfaces/common/ContextValue.ts
View file

@ -3,40 +3,40 @@ import { GetUserResData } from '../responses/user/GetUserRes';
import { GetConfigResData } from '../responses/config/GetConfigRes'; import { GetConfigResData } from '../responses/config/GetConfigRes';
export interface Asset { export interface Asset {
name: string; name: string;
ticker: string; ticker: string;
assetId: string; assetId: string;
decimalPoint: number; decimalPoint: number;
balance: string; balance: string;
unlockedBalance: string; unlockedBalance: string;
} }
export interface Transfer { export interface Transfer {
amount: string; amount: string;
assetId: string; assetId: string;
incoming: boolean; incoming: boolean;
} }
export interface Transaction { export interface Transaction {
isConfirmed: boolean; isConfirmed: boolean;
txHash: string; txHash: string;
blobSize: number; blobSize: number;
timestamp: number; timestamp: number;
height: number; height: number;
paymentId: string; paymentId: string;
comment: string; comment: string;
fee: string; fee: string;
isInitiator: boolean; isInitiator: boolean;
transfers: Transfer[]; transfers: Transfer[];
} }
interface WalletState { interface WalletState {
address: string; address: string;
alias: string; alias: string;
balance: string; balance: string;
assets: Asset[]; assets: Asset[];
transactions: Transaction[]; transactions: Transaction[];
connected: boolean connected: boolean;
} }
type UserState = GetUserResData | null; type UserState = GetUserResData | null;
@ -75,7 +75,7 @@ type ContextAction =
| { | {
type: 'CLOSED_NOTIFICATIONS_UPDATED'; type: 'CLOSED_NOTIFICATIONS_UPDATED';
payload: number[]; payload: number[];
}; };
interface ContextValue { interface ContextValue {
state: ContextState; state: ContextState;

10
src/pages/admin/index.tsx
View file

@ -28,12 +28,12 @@ interface DateState {
} }
interface CurrencyType { interface CurrencyType {
name: string; name: string;
} }
interface PairType { interface PairType {
id: string | number; id: string | number;
first_currency: CurrencyType; first_currency: CurrencyType;
} }
const AdminPanel: React.FC = () => { const AdminPanel: React.FC = () => {
@ -79,7 +79,7 @@ const AdminPanel: React.FC = () => {
if (response.data.success) { if (response.data.success) {
const fetchedAdmins = response.data.data; const fetchedAdmins = response.data.data;
setAdmins( setAdmins(
fetchedAdmins.map((admin: {alias: string, isOwner: boolean, id: string}) => ({ fetchedAdmins.map((admin: { alias: string; isOwner: boolean; id: string }) => ({
alias: admin.alias, alias: admin.alias,
isOwner: admin.isOwner, isOwner: admin.isOwner,
key: admin.id, key: admin.id,
@ -185,7 +185,7 @@ const AdminPanel: React.FC = () => {
if (data.success) { if (data.success) {
fetchAdmins(); fetchAdmins();
} }
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) { } catch (error: any) {
message.error({ message.error({
content: content:

2
src/pages/dex/orders/OrdersTable/OrdersTable.tsx
View file

@ -4,7 +4,7 @@ import { ReactComponent as DeleteIcon } from '@/assets/images/UI/delete.svg';
import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg';
import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; import EmptyLink from '@/components/UI/EmptyLink/EmptyLink';
import { notationToString, toStandardDateString } from '@/utils/utils'; import { notationToString, toStandardDateString } from '@/utils/utils';
import { cancelOrder, getUserOrders, } from '@/utils/methods'; import { cancelOrder, getUserOrders } from '@/utils/methods';
import OrdersTableProps from '@/interfaces/props/pages/dex/orders/OrdersTable/OrdersTableProps'; import OrdersTableProps from '@/interfaces/props/pages/dex/orders/OrdersTable/OrdersTableProps';
import { UserOrderData } from '@/interfaces/responses/orders/GetUserOrdersRes'; import { UserOrderData } from '@/interfaces/responses/orders/GetUserOrdersRes';
import Decimal from 'decimal.js'; import Decimal from 'decimal.js';

6
src/pages/dex/trading/CandleChart/CandleChart.tsx
View file

@ -53,7 +53,7 @@ function CandleChart(props: CandleChartProps) {
})); }));
for (const decimal of decimals) { for (const decimal of decimals) {
if (decimal.value !== undefined) { if (decimal.value !== undefined) {
if (decimal.value.lessThan(0.00001)) { if (decimal.value.lessThan(0.00001)) {
e[decimal.index] = 0; e[decimal.index] = 0;
} }
@ -150,7 +150,7 @@ function CandleChart(props: CandleChartProps) {
show: true, show: true,
type: 'line', type: 'line',
label: { label: {
formatter: (params: {value: string}) => timestampToString(params.value), formatter: (params: { value: string }) => timestampToString(params.value),
backgroundColor: '#4A90E2', backgroundColor: '#4A90E2',
color: '#ffffff', color: '#ffffff',
}, },
@ -163,7 +163,7 @@ function CandleChart(props: CandleChartProps) {
scale: true, scale: true,
splitArea: { show: false }, splitArea: { show: false },
min: 0, min: 0,
max: (value: {max: string}) => new Decimal(value.max).mul(1.1).toNumber(), max: (value: { max: string }) => new Decimal(value.max).mul(1.1).toNumber(),
axisPointer: { axisPointer: {
show: true, show: true,
type: 'line', type: 'line',

350
src/pages/dex/trading/InputPanelItem/InputPanelItem.module.scss
View file

@ -1,218 +1,218 @@
.input_panel__item { .input_panel__item {
width: 100%; width: 100%;
> div:first-child { > div:first-child {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px; margin-bottom: 20px;
} }
> div:last-child { > div:last-child {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
> .buy_btn { > .buy_btn {
background-color: #16d1d6; background-color: #16d1d6;
&:hover { &:hover {
background-color: #45dade; background-color: #45dade;
} }
} }
> .sell_btn { > .sell_btn {
background-color: #ff6767; background-color: #ff6767;
&:hover { &:hover {
background-color: #ff8585; background-color: #ff8585;
} }
} }
.input_panel__range { .input_panel__range {
margin-top: 10px; margin-top: 10px;
} }
.input_panel__expiration { .input_panel__expiration {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 20px;
h6 { h6 {
white-space: nowrap; white-space: nowrap;
} }
.expiration__dropdown { .expiration__dropdown {
width: 100%; width: 100%;
} }
> div:first-child { > div:first-child {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
@media screen and (max-width: 1500px) { @media screen and (max-width: 1500px) {
flex-wrap: wrap; flex-wrap: wrap;
} }
@media screen and (max-width: 1000px) { @media screen and (max-width: 1000px) {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@media screen and (max-width: 530px) { @media screen and (max-width: 530px) {
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
.labeled_input { .labeled_input {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
h6 { h6 {
color: var(--font-dimmed-color); color: var(--font-dimmed-color);
} }
> div { > div {
width: 100%; width: 100%;
position: relative; position: relative;
background-color: var(--bordered-input-bg); background-color: var(--bordered-input-bg);
border: 1px solid var(--window-border-color); border: 1px solid var(--window-border-color);
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
input { input {
width: 100%; width: 100%;
padding: 16px 15px; padding: 16px 15px;
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
.labeled_input__value { .labeled_input__value {
padding-right: 15px; padding-right: 15px;
display: flex; display: flex;
align-items: center; align-items: center;
> p { > p {
color: var(--font-dimmed-color); color: var(--font-dimmed-color);
} }
} }
.labeled_input__currency { .labeled_input__currency {
min-width: 82px; min-width: 82px;
max-width: 150px; max-width: 150px;
padding: 0 15px; padding: 0 15px;
background-color: var(--dex-input-currency); background-color: var(--dex-input-currency);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
> p { > p {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
} }
} }
&.labeled_input__invalid > div { &.labeled_input__invalid > div {
border-color: #ff6767; border-color: #ff6767;
} }
@media screen and (max-width: 430px) { @media screen and (max-width: 430px) {
> div { > div {
input, input,
.labeled_input__value > p, .labeled_input__value > p,
.labeled_input__currency > p { .labeled_input__currency > p {
font-size: 13px; font-size: 13px;
} }
input { input {
padding: 19px 15px; padding: 19px 15px;
} }
.labeled_input__currency { .labeled_input__currency {
min-width: 70px; min-width: 70px;
} }
} }
} }
} }
.input_panel__fees { .input_panel__fees {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
p { p {
color: var(--font-dimmed-color); color: var(--font-dimmed-color);
} }
} }
} }
} }
.buy-sell-switch { .buy-sell-switch {
padding: 3px; padding: 3px;
height: 30px; height: 30px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 100px; border-radius: 100px;
border: 1px solid var(--dex-buy-sell-border); border: 1px solid var(--dex-buy-sell-border);
.buy-sell-switch__item { .buy-sell-switch__item {
width: 50px; width: 50px;
height: 100%; height: 100%;
background-color: transparent; background-color: transparent;
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
border-radius: 100px; border-radius: 100px;
&.item_selected-buy { &.item_selected-buy {
background-color: #16d1d6; background-color: #16d1d6;
color: #ffffff; color: #ffffff;
} }
&.item_selected-sell { &.item_selected-sell {
background-color: #ff6767; background-color: #ff6767;
color: #ffffff; color: #ffffff;
} }
} }
} }
.apply__alert { .apply__alert {
display: flex; display: flex;
gap: 20px; gap: 20px;
align-items: center; align-items: center;
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
} }
&__button { &__button {
max-width: 125px; max-width: 125px;
background-color: var(--alert-btn-bg); background-color: var(--alert-btn-bg);
color: #1f8feb; color: #1f8feb;
padding: 7px 32px; padding: 7px 32px;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
&:hover { &:hover {
background-color: var(--alert-btn-hover); background-color: var(--alert-btn-hover);
} }
} }
h2 { h2 {
font-size: 16px; font-size: 16px;
font-weight: 600; font-weight: 600;
} }
p { p {
font-size: 14px; font-size: 14px;
opacity: 0.7; opacity: 0.7;
margin-bottom: 5px; margin-bottom: 5px;
} }
} }

2
src/pages/dex/trading/InputPanelItem/InputPanelItem.tsx
View file

@ -68,7 +68,7 @@ function InputPanelItem(props: InputPanelItemProps) {
totalValid, totalValid,
totalUsd, totalUsd,
scrollToOrderList, scrollToOrderList,
updateUserOrders updateUserOrders,
} = props; } = props;
const [creatingState, setCreatingState] = useState(false); const [creatingState, setCreatingState] = useState(false);

32
src/pages/dex/trading/[id].tsx
View file

@ -784,14 +784,14 @@ function Trading() {
{e.isInstant && <BadgeStatus />} {e.isInstant && <BadgeStatus />}
{(state.wallet?.connected && state.wallet?.alias ? state.wallet?.alias : '') {(state.wallet?.connected && state.wallet?.alias ? state.wallet?.alias : '')
?.length > 12 && ( ?.length > 12 && (
<Tooltip <Tooltip
className={styles.table__tooltip_right} className={styles.table__tooltip_right}
arrowClass={styles.table__tooltip_arrow} arrowClass={styles.table__tooltip_arrow}
shown={showTooltip} shown={showTooltip}
> >
{state.wallet?.connected && state.wallet?.alias} {state.wallet?.connected && state.wallet?.alias}
</Tooltip> </Tooltip>
)} )}
{/* High volume */} {/* High volume */}
{/* <BadgeStatus type="high" /> */} {/* <BadgeStatus type="high" /> */}
</td> </td>
@ -1071,13 +1071,13 @@ function Trading() {
pairData.first_currency?.name && pairData.first_currency?.name &&
pairData.second_currency?.name pairData.second_currency?.name
) ? ( ) ? (
'...' '...'
) : ( ) : (
<> <>
{firstCurrencyName} {firstCurrencyName}
<span>/{secondCurrencyName}</span> <span>/{secondCurrencyName}</span>
</> </>
)} )}
</p> </p>
<div className={styles.trading__currency__rate}> <div className={styles.trading__currency__rate}>
<p> <p>
@ -1172,7 +1172,7 @@ function Trading() {
totalValid, totalValid,
totalUsd, totalUsd,
scrollToOrderList, scrollToOrderList,
updateUserOrders updateUserOrders,
})} })}
</div> </div>
<div className={styles.trading__chart__wrapper}> <div className={styles.trading__chart__wrapper}>

5
src/pages/p2p/components/Pagination/Pagination.tsx
View file

@ -66,10 +66,7 @@ function Pagination(props: PaginationProps) {
result.push(generateButton(i, i === props.value, hiding)); result.push(generateButton(i, i === props.value, hiding));
} }
result.push( result.push(<p key={nanoid(16)}>...</p>, generateButton(props.totalPages, false));
<p key={nanoid(16)}>...</p>,
generateButton(props.totalPages, false)
);
} else if (props.value >= props.totalPages - 2) { } else if (props.value >= props.totalPages - 2) {
result.push(generateButton(1, false), <p key={nanoid(16)}>...</p>); result.push(generateButton(1, false), <p key={nanoid(16)}>...</p>);
for (let i = props.totalPages - 4; i <= props.totalPages; i += 1) { for (let i = props.totalPages - 4; i <= props.totalPages; i += 1) {

2
src/pages/p2p/process/components/Messenger/Messenger.tsx
View file

@ -249,7 +249,7 @@ function Messenger(props: MessengerProps) {
<div className={styles.messenger__panel + (messageLoading ? ' disabled' : '')}> <div className={styles.messenger__panel + (messageLoading ? ' disabled' : '')}>
<Input <Input
disabled={!!finishState} disabled={!!finishState}
onKeyDown={e => e.keyCode === 13 && createMessage()} onKeyDown={(e) => e.keyCode === 13 && createMessage()}
value={msgInputState} value={msgInputState}
onInput={(e) => setMsgInputState(e.target.value)} onInput={(e) => setMsgInputState(e.target.value)}
bordered={true} bordered={true}

3
src/pages/p2p/profile/ProfileTable/ProfileTable.tsx
View file

@ -112,7 +112,8 @@ function ProfileTable(props: ProfileTableProps) {
<td> <td>
<EmptyLink className={styles.profile__header__mobile}>Price</EmptyLink> <EmptyLink className={styles.profile__header__mobile}>Price</EmptyLink>
<p className={styles.profile__row__price}> <p className={styles.profile__row__price}>
<span>{params.offerData.price}</span> {params.offerData.target_currency?.name} <span>{params.offerData.price}</span>{' '}
{params.offerData.target_currency?.name}
</p> </p>
</td> </td>
<td> <td>

13
src/pages/p2p/profile/index.tsx
View file

@ -54,19 +54,18 @@ function Profile() {
function getFilterFunction(code: 'chats' | 'active' | 'finished') { function getFilterFunction(code: 'chats' | 'active' | 'finished') {
if (code === 'finished') { if (code === 'finished') {
return (e: UserChatData) => e.status === 'finished'; return (e: UserChatData) => e.status === 'finished';
} if (code === 'active') { }
if (code === 'active') {
return (e: UserChatData) => return (e: UserChatData) =>
e.status !== 'finished' && e.status !== 'finished' &&
((e.owner_deposit && e.owner_deposit !== 'default') || ((e.owner_deposit && e.owner_deposit !== 'default') ||
(e.opponent_deposit && e.opponent_deposit !== 'default')); (e.opponent_deposit && e.opponent_deposit !== 'default'));
} }
return (e: UserChatData) => return (e: UserChatData) =>
(e.owner_deposit === null || e.owner_deposit === 'default') && (e.owner_deposit === null || e.owner_deposit === 'default') &&
(e.opponent_deposit === null || e.opponent_deposit === 'default'); (e.opponent_deposit === null || e.opponent_deposit === 'default');
} }
const [notificationsAmount, setNotificationsAmount] = useState({ const [notificationsAmount, setNotificationsAmount] = useState({
chats: 0, chats: 0,
active: 0, active: 0,

2
src/store/store-reducer.tsx
View file

@ -38,7 +38,7 @@ const reducer = (state: ContextState, action: ContextAction): ContextState => {
export const Store = createContext<ContextValue>({ export const Store = createContext<ContextValue>({
state: initialState, state: initialState,
dispatch: () => undefined, dispatch: () => undefined,
}); });
export const StoreProvider = (props: { children: ReactNode }) => { export const StoreProvider = (props: { children: ReactNode }) => {
const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, initialState);

2
src/styles/themes/light.scss
View file

@ -96,4 +96,4 @@
--admin-table-border-color: #596f98; --admin-table-border-color: #596f98;
--alert-btn-bg: rgba(31, 143, 235, 0.2); --alert-btn-bg: rgba(31, 143, 235, 0.2);
--alert-btn-hover: rgba(31, 143, 235, 0.3); --alert-btn-hover: rgba(31, 143, 235, 0.3);
} }

3
src/utils/utils.ts
View file

@ -53,7 +53,8 @@ export const canvasResize = (inputCanvas: HTMLCanvasElement) => {
const devicePixelRatio = window.devicePixelRatio || 1; const devicePixelRatio = window.devicePixelRatio || 1;
const backingStorePixel = const backingStorePixel =
(ctx as unknown as { webkitBackingStorePixelRatio?: number })?.webkitBackingStorePixelRatio || (ctx as unknown as { webkitBackingStorePixelRatio?: number })
?.webkitBackingStorePixelRatio ||
(ctx as unknown as { mozBackingStorePixelRatio?: number })?.mozBackingStorePixelRatio || (ctx as unknown as { mozBackingStorePixelRatio?: number })?.mozBackingStorePixelRatio ||
(ctx as unknown as { msBackingStorePixelRatio?: number })?.msBackingStorePixelRatio || (ctx as unknown as { msBackingStorePixelRatio?: number })?.msBackingStorePixelRatio ||
(ctx as unknown as { oBackingStorePixelRatio?: number })?.oBackingStorePixelRatio || (ctx as unknown as { oBackingStorePixelRatio?: number })?.oBackingStorePixelRatio ||