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 [
{
source: '/api/:path*',
destination: `${process.env.API_URL}/api/:path*`
}
]
destination: `${process.env.API_URL}/api/:path*`,
},
];
},
};
export default nextConfig;

1
package.json
View file

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

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

@ -7,4 +7,4 @@ interface IProps {
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 (
<Link
href={href}
className={linkClass}
>
<Link href={href} className={linkClass}>
<Img />
<h6>{title}</h6>
<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';
export interface Asset {
name: string;
ticker: string;
assetId: string;
decimalPoint: number;
balance: string;
unlockedBalance: string;
name: string;
ticker: string;
assetId: string;
decimalPoint: number;
balance: string;
unlockedBalance: string;
}
export interface Transfer {
amount: string;
assetId: string;
incoming: boolean;
amount: string;
assetId: string;
incoming: boolean;
}
export interface Transaction {
isConfirmed: boolean;
txHash: string;
blobSize: number;
timestamp: number;
height: number;
paymentId: string;
comment: string;
fee: string;
isInitiator: boolean;
transfers: Transfer[];
isConfirmed: boolean;
txHash: string;
blobSize: number;
timestamp: number;
height: number;
paymentId: string;
comment: string;
fee: string;
isInitiator: boolean;
transfers: Transfer[];
}
interface WalletState {
address: string;
alias: string;
balance: string;
assets: Asset[];
transactions: Transaction[];
connected: boolean
address: string;
alias: string;
balance: string;
assets: Asset[];
transactions: Transaction[];
connected: boolean;
}
type UserState = GetUserResData | null;
@ -75,7 +75,7 @@ type ContextAction =
| {
type: 'CLOSED_NOTIFICATIONS_UPDATED';
payload: number[];
};
};
interface ContextValue {
state: ContextState;

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

@ -28,12 +28,12 @@ interface DateState {
}
interface CurrencyType {
name: string;
name: string;
}
interface PairType {
id: string | number;
first_currency: CurrencyType;
id: string | number;
first_currency: CurrencyType;
}
const AdminPanel: React.FC = () => {
@ -79,7 +79,7 @@ const AdminPanel: React.FC = () => {
if (response.data.success) {
const fetchedAdmins = response.data.data;
setAdmins(
fetchedAdmins.map((admin: {alias: string, isOwner: boolean, id: string}) => ({
fetchedAdmins.map((admin: { alias: string; isOwner: boolean; id: string }) => ({
alias: admin.alias,
isOwner: admin.isOwner,
key: admin.id,
@ -185,7 +185,7 @@ const AdminPanel: React.FC = () => {
if (data.success) {
fetchAdmins();
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
// eslint-disable-next-line @typescript-eslint/no-explicit-any
} catch (error: any) {
message.error({
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 EmptyLink from '@/components/UI/EmptyLink/EmptyLink';
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 { UserOrderData } from '@/interfaces/responses/orders/GetUserOrdersRes';
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) {
if (decimal.value !== undefined) {
if (decimal.value !== undefined) {
if (decimal.value.lessThan(0.00001)) {
e[decimal.index] = 0;
}
@ -150,7 +150,7 @@ function CandleChart(props: CandleChartProps) {
show: true,
type: 'line',
label: {
formatter: (params: {value: string}) => timestampToString(params.value),
formatter: (params: { value: string }) => timestampToString(params.value),
backgroundColor: '#4A90E2',
color: '#ffffff',
},
@ -163,7 +163,7 @@ function CandleChart(props: CandleChartProps) {
scale: true,
splitArea: { show: false },
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: {
show: true,
type: 'line',

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

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

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

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

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

@ -784,14 +784,14 @@ function Trading() {
{e.isInstant && <BadgeStatus />}
{(state.wallet?.connected && state.wallet?.alias ? state.wallet?.alias : '')
?.length > 12 && (
<Tooltip
className={styles.table__tooltip_right}
arrowClass={styles.table__tooltip_arrow}
shown={showTooltip}
>
{state.wallet?.connected && state.wallet?.alias}
</Tooltip>
)}
<Tooltip
className={styles.table__tooltip_right}
arrowClass={styles.table__tooltip_arrow}
shown={showTooltip}
>
{state.wallet?.connected && state.wallet?.alias}
</Tooltip>
)}
{/* High volume */}
{/* <BadgeStatus type="high" /> */}
</td>
@ -1071,13 +1071,13 @@ function Trading() {
pairData.first_currency?.name &&
pairData.second_currency?.name
) ? (
'...'
) : (
<>
{firstCurrencyName}
<span>/{secondCurrencyName}</span>
</>
)}
'...'
) : (
<>
{firstCurrencyName}
<span>/{secondCurrencyName}</span>
</>
)}
</p>
<div className={styles.trading__currency__rate}>
<p>
@ -1172,7 +1172,7 @@ function Trading() {
totalValid,
totalUsd,
scrollToOrderList,
updateUserOrders
updateUserOrders,
})}
</div>
<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(
<p key={nanoid(16)}>...</p>,
generateButton(props.totalPages, false)
);
result.push(<p key={nanoid(16)}>...</p>, generateButton(props.totalPages, false));
} else if (props.value >= props.totalPages - 2) {
result.push(generateButton(1, false), <p key={nanoid(16)}>...</p>);
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' : '')}>
<Input
disabled={!!finishState}
onKeyDown={e => e.keyCode === 13 && createMessage()}
onKeyDown={(e) => e.keyCode === 13 && createMessage()}
value={msgInputState}
onInput={(e) => setMsgInputState(e.target.value)}
bordered={true}

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

@ -112,7 +112,8 @@ function ProfileTable(props: ProfileTableProps) {
<td>
<EmptyLink className={styles.profile__header__mobile}>Price</EmptyLink>
<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>
</td>
<td>

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

@ -54,19 +54,18 @@ function Profile() {
function getFilterFunction(code: 'chats' | 'active' | 'finished') {
if (code === 'finished') {
return (e: UserChatData) => e.status === 'finished';
} if (code === 'active') {
}
if (code === 'active') {
return (e: UserChatData) =>
e.status !== 'finished' &&
((e.owner_deposit && e.owner_deposit !== 'default') ||
(e.opponent_deposit && e.opponent_deposit !== 'default'));
}
((e.owner_deposit && e.owner_deposit !== 'default') ||
(e.opponent_deposit && e.opponent_deposit !== 'default'));
}
return (e: UserChatData) =>
(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({
chats: 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>({
state: initialState,
dispatch: () => undefined,
dispatch: () => undefined,
});
export const StoreProvider = (props: { children: ReactNode }) => {
const [state, dispatch] = useReducer(reducer, initialState);

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

@ -96,4 +96,4 @@
--admin-table-border-color: #596f98;
--alert-btn-bg: rgba(31, 143, 235, 0.2);
--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 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 { msBackingStorePixelRatio?: number })?.msBackingStorePixelRatio ||
(ctx as unknown as { oBackingStorePixelRatio?: number })?.oBackingStorePixelRatio ||