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

Merge pull request #20 from jejolare-dev/staging

Browse source 
add: fixes
This commit is contained in:
Dmitrii Kolpakov 2025-09-10 18:46:03 +07:00 • committed by GitHub
commit 7c90c084e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 180 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/dex/InputPanelItem/components/LabeledInput/styles.module.scss
View file

@ -48,7 +48,7 @@
align-items: center;
justify-content: center;
>p {
> p {
font-size: 14px;
font-weight: 400;
white-space: nowrap;
@ -76,9 +76,9 @@
&__currency {
padding: 0 8px;
>p {
> p {
font-size: 12px;
}
}
}
}
}

3
src/components/dex/InputPanelItem/styles.module.scss
View file

@ -144,7 +144,6 @@
}
}
@media screen and (max-width: 640px) {
.inputPanel {
padding: 0;
@ -195,4 +194,4 @@
}
}
}
}
}

2
src/components/dex/OrdersPool/styles.module.scss
View file

@ -195,7 +195,7 @@
position: fixed;
border: 1px solid var(--dex-tooltip-border-color);
min-width: 140px;
max-width: 180px;
max-width: 300px;
padding: 10px;
transform: translateX(-50%);
background-color: var(--dex-tooltip-bg);

4
src/components/dex/TradingHeader/styles.module.scss
View file

@ -22,7 +22,7 @@
background-color: var(--icon-bg-color);
border-radius: 50%;
>img {
> img {
width: 24px;
height: auto;
}
@ -169,4 +169,4 @@
gap: 12px;
}
}
}
}

326
src/components/dex/UserOrders/cards/styles.module.scss
View file

@ -1,206 +1,206 @@
.cards {
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 10px;
display: flex;
flex-direction: column;
gap: 10px;
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 15px;
padding: 6px 10px;
.card {
position: relative;
display: flex;
flex-direction: column;
gap: 15px;
padding: 6px 10px;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
}
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
}
&.sell {
&::before {
background-color: #ff6767;
}
&.sell {
&::before {
background-color: #ff6767;
}
.card__type {
color: #ff6767;
text-transform: capitalize;
}
}
.card__type {
color: #ff6767;
text-transform: capitalize;
}
}
&.buy {
&::before {
background-color: #16d1d6;
}
&.buy {
&::before {
background-color: #16d1d6;
}
.card__type {
color: #16d1d6;
text-transform: capitalize;
}
}
.card__type {
color: #16d1d6;
text-transform: capitalize;
}
}
&__row {
width: 100%;
display: flex;
align-items: center;
gap: 40px;
&__row {
width: 100%;
display: flex;
align-items: center;
gap: 40px;
&.sm {
gap: 18px;
&.sm {
gap: 18px;
.card__col {
min-width: 50px;
}
}
}
.card__col {
min-width: 50px;
}
}
}
&__label {
color: var(--table-th-color);
font-size: 12px;
font-weight: 500;
line-height: 100%;
}
&__label {
color: var(--table-th-color);
font-size: 12px;
font-weight: 500;
line-height: 100%;
}
&__value {
font-size: 12px;
font-weight: 500;
line-height: 100%;
&__value {
font-size: 12px;
font-weight: 500;
line-height: 100%;
&.primary {
color: #1f8feb;
}
&.primary {
color: #1f8feb;
}
&.secondary {
color: var(--table-th-color);
}
&.secondary {
color: var(--table-th-color);
}
span {
color: var(--table-th-color);
font-size: 11px;
font-weight: 500;
line-height: 100%;
}
}
span {
color: var(--table-th-color);
font-size: 11px;
font-weight: 500;
line-height: 100%;
}
}
&__col {
min-width: 100px;
display: flex;
flex-direction: column;
gap: 10px;
}
&__col {
min-width: 100px;
display: flex;
flex-direction: column;
gap: 10px;
}
&__pair {
.card__value {
display: flex;
align-items: center;
gap: 8px;
}
&__pair {
.card__value {
display: flex;
align-items: center;
gap: 8px;
}
.card__type {
display: none;
}
}
.card__type {
display: none;
}
}
&__flex {
gap: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
&__flex {
gap: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
&__actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
}
&__actions {
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
}
}
.mobile {
display: none;
}
.mobile {
display: none;
}
}
@media screen and (max-width: 640px) {
.cards .card {
gap: 10px;
.cards .card {
gap: 10px;
&__row {
gap: 15px;
&__row {
gap: 15px;
&.sm {
gap: 5px;
}
}
&.sm {
gap: 5px;
}
}
&__col {
min-width: 80px;
&__col {
min-width: 80px;
&_direction {
display: none;
}
}
&_direction {
display: none;
}
}
&__label {
font-size: 10px;
}
&__label {
font-size: 10px;
}
&__value {
font-size: 11px;
}
&__value {
font-size: 11px;
}
&__pair {
.card__label {
display: none;
}
&__pair {
.card__label {
display: none;
}
.card__value {
font-size: 12px;
}
.card__value {
font-size: 12px;
}
.card__type {
font-size: 12px;
display: inline-block;
}
}
}
.card__type {
font-size: 12px;
display: inline-block;
}
}
}
}
@media screen and (max-width: 500px) {
.cards .card {
&__row {
justify-content: space-between;
.cards .card {
&__row {
justify-content: space-between;
&.sm {
justify-content: flex-start;
}
}
&.sm {
justify-content: flex-start;
}
}
&__col {
min-width: auto;
}
&__col {
min-width: auto;
}
&__flex {
flex-direction: column;
}
&__flex {
flex-direction: column;
}
&__price {
display: none;
&__price {
display: none;
&.mobile {
display: flex;
}
}
&.mobile {
display: flex;
}
}
&__offers {
display: none;
&__offers {
display: none;
&.mobile {
display: flex;
}
}
}
}
&.mobile {
display: flex;
}
}
}
}

6
src/components/dex/UserOrders/styles.module.scss
View file

@ -57,7 +57,7 @@
td {
position: relative;
>p {
> p {
width: 100%;
font-size: 12px;
font-weight: 400;
@ -76,7 +76,7 @@
}
}
>span {
> span {
line-height: 1;
color: var(--font-dimmed-color);
font-size: 11px;
@ -115,4 +115,4 @@
margin-bottom: 10px;
}
}
}
}

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

@ -40,7 +40,7 @@ function Trading() {
const fetchUser = useUpdateUser();
const [ordersHistory, setOrdersHistory] = useState<PageOrderData[]>([]);
const [userOrders, setUserOrders] = useState<OrderRow[]>([]);
const [periodsState, setPeriodsState] = useState<PeriodState>(periods[6]);
const [periodsState, setPeriodsState] = useState<PeriodState>(periods[4]);
const [pairData, setPairData] = useState<PairData | null>(null);
const [candles, setCandles] = useState<CandleRow[]>([]);
const [trades, setTrades] = useState<Trade[]>([]);

3
src/styles/Trading.module.scss
View file

@ -68,7 +68,6 @@
@media screen and (max-width: 1024px) {
.trading__top {
&_trades,
&_form {
max-width: 100%;
@ -90,4 +89,4 @@
.trading__top {
height: 370px;
}
}
}

10
src/utils/utils.ts
View file

@ -183,15 +183,15 @@ export function createOrderSorter<T>({ getSide, getPrice }: Getters<T>) {
return (a: T, b: T) => {
const aSide = getSide(a);
const bSide = getSide(b);
if (aSide !== bSide) return aSide === 'buy' ? -1 : 1;
if (aSide !== bSide) {
return aSide === 'sell' ? -1 : 1;
}
const ap = new Decimal(getPrice(a));
const bp = new Decimal(getPrice(b));
if (aSide === 'buy') {
return bp.comparedTo(ap);
}
return ap.comparedTo(bp);
return bp.comparedTo(ap);
};
}