diff --git a/src/assets/images/UI/connection.svg b/src/assets/images/UI/connection.svg index 54066a9..f5d5c55 100644 --- a/src/assets/images/UI/connection.svg +++ b/src/assets/images/UI/connection.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/UI/Tabs/types.ts b/src/components/UI/Tabs/types.ts index c7c0066..2ef8d95 100644 --- a/src/components/UI/Tabs/types.ts +++ b/src/components/UI/Tabs/types.ts @@ -1,5 +1,3 @@ -import { Dispatch, SetStateAction } from 'react'; - export type tabsType = { title: string; type: string; @@ -8,6 +6,6 @@ export type tabsType = { export interface TabsProps { value: tabsType; - setValue: Dispatch>; + setValue: (_next: tabsType) => void; data: tabsType[]; } diff --git a/src/components/dex/AliasCell/index.tsx b/src/components/dex/AliasCell/index.tsx index 64673c6..1a5c923 100644 --- a/src/components/dex/AliasCell/index.tsx +++ b/src/components/dex/AliasCell/index.tsx @@ -1,6 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import Tooltip from '@/components/UI/Tooltip/Tooltip'; -import { cutAddress } from '@/utils/utils'; +import { classes, cutAddress } from '@/utils/utils'; import MatrixConnectionBadge from '@/components/dex/MatrixConnectionBadge'; import BadgeStatus from '@/components/dex/BadgeStatus'; import { createPortal } from 'react-dom'; @@ -12,6 +12,7 @@ export default function AliasCell({ address, matrixAddresses, isInstant, + isSm, max = 12, }: AliasCellProps) { const display = alias ? cutAddress(alias, max) : 'no alias'; @@ -59,6 +60,7 @@ export default function AliasCell({ userAdress={address} userAlias={alias} matrixAddresses={matrixAddresses} + isSm={isSm} /> {isInstant && ( diff --git a/src/components/dex/AliasCell/types.ts b/src/components/dex/AliasCell/types.ts index c661e7b..d92c771 100644 --- a/src/components/dex/AliasCell/types.ts +++ b/src/components/dex/AliasCell/types.ts @@ -5,5 +5,6 @@ export interface AliasCellProps { address?: string; matrixAddresses: MatrixAddress[]; isInstant?: boolean; + isSm?: boolean; max?: number; } diff --git a/src/components/dex/AllTrades/index.tsx b/src/components/dex/AllTrades/index.tsx deleted file mode 100644 index 8e9a3cb..0000000 --- a/src/components/dex/AllTrades/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import React from 'react'; -import { classes, formatTime } from '@/utils/utils'; -import ContentPreloader from '@/components/UI/ContentPreloader/ContentPreloader'; -import EmptyMessage from '@/components/UI/EmptyMessage'; -import styles from './styles.module.scss'; -import { AllTradesProps } from './types'; - -const AllTrades = ({ - setTradesType, - tradesType, - filteredTrades, - tradesLoading, - currencyNames, -}: AllTradesProps) => { - return ( -
-
- - - -
- -
- - - - - - - - - - {!tradesLoading && !!filteredTrades.length && ( - - {filteredTrades.map((trade) => ( - - - - - - ))} - - )} -
Price ({currencyNames.secondCurrencyName})Amount ({currencyNames.firstCurrencyName})Time
-

- {trade.price} -

- 		-

{trade.amount}

- 		-

{formatTime(trade.timestamp)}

-
- - {!filteredTrades.length && !tradesLoading && } - - {tradesLoading && } -
-
- ); -}; - -export default AllTrades; diff --git a/src/components/dex/AllTrades/styles.module.scss b/src/components/dex/AllTrades/styles.module.scss deleted file mode 100644 index aae3f21..0000000 --- a/src/components/dex/AllTrades/styles.module.scss +++ /dev/null @@ -1,116 +0,0 @@ -.allTrades { - max-width: 415px; - width: 100%; - padding: 5px; - background: var(--window-bg-color); - border: 1px solid var(--delimiter-color); - border-radius: 10px; - - @media screen and (max-width: 1480px) { - max-width: 340px; - } - - &__header { - border-bottom: 1px solid var(--delimiter-color); - display: flex; - align-items: center; - gap: 22px; - padding: 10px; - padding-bottom: 0; - - &_btn { - padding-bottom: 7px; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - font-size: 16px; - border-bottom: 2px solid transparent; - font-weight: 600; - background-color: transparent !important; - cursor: pointer; - - &.active { - border-color: #1f8feb; - } - - &:hover { - color: #1f8feb; - } - } - } - - &__content { - display: flex; - flex-direction: column; - padding-top: 10px; - - table { - width: 100%; - - thead { - display: flex; - width: 100%; - padding-inline: 10px; - margin-bottom: 9px; - - tr { - width: 100%; - display: flex; - justify-content: space-between; - - th { - min-width: 80px; - font-size: 11px; - font-weight: 700; - text-align: start; - color: var(--table-th-color); - - &:last-child { - text-align: right; - } - } - } - } - - tbody { - height: 29dvh; - min-height: 265px; - max-height: 380px; - display: flex; - flex-direction: column; - overflow: auto; - padding: 10px; - padding-bottom: 20px; - - tr { - position: relative; - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - padding: 4px 0; - - &:nth-child(even) { - background-color: var(--table-even-bg); - } - - td { - position: relative; - - &:last-child { - > p { - text-align: right; - } - } - - > p { - min-width: 80px; - width: 100%; - font-size: 12px; - font-weight: 400; - } - } - } - } - } - } -} diff --git a/src/components/dex/AllTrades/types.ts b/src/components/dex/AllTrades/types.ts deleted file mode 100644 index 1fb3096..0000000 --- a/src/components/dex/AllTrades/types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Trade } from '@/interfaces/responses/trades/GetTradeRes'; -import { Dispatch, SetStateAction } from 'react'; - -type tradeType = 'all' | 'my'; - -export interface AllTradesProps { - setTradesType: Dispatch>; - tradesType: tradeType; - filteredTrades: Trade[]; - tradesLoading: boolean; - currencyNames: { - firstCurrencyName: string; - secondCurrencyName: string; - }; -} diff --git a/src/components/dex/InputPanelItem/index.tsx b/src/components/dex/InputPanelItem/index.tsx index 8a13902..5e61ecd 100644 --- a/src/components/dex/InputPanelItem/index.tsx +++ b/src/components/dex/InputPanelItem/index.tsx @@ -14,6 +14,7 @@ import infoIcon from '@/assets/images/UI/info_alert_icon.svg'; import Image from 'next/image'; import { useAlert } from '@/hook/useAlert'; import { buySellValues } from '@/constants'; +import { usePathname, useSearchParams } from 'next/navigation'; import styles from './styles.module.scss'; import LabeledInput from './components/LabeledInput'; @@ -40,6 +41,8 @@ function InputPanelItem(props: InputPanelItemProps) { const { state } = useContext(Store); const router = useRouter(); + const pathname = usePathname(); + const searchParams = useSearchParams(); const { setAlertState, setAlertSubtitle } = useAlert(); const [creatingState, setCreatingState] = useState(false); const { firstCurrencyName, secondCurrencyName } = currencyNames; @@ -47,6 +50,16 @@ function InputPanelItem(props: InputPanelItemProps) { const [hasImmediateMatch, setHasImmediateMatch] = useState(false); const isBuy = buySellState?.code === 'buy'; + function goToSuitableTab() { + const params = new URLSearchParams(searchParams.toString()); + params.set('tab', 'suitable'); + + router.replace(`${pathname}?${params.toString()}`, undefined, { + shallow: true, + scroll: false, + }); + } + function resetForm() { setPriceFunction(''); setAmountFunction(''); @@ -126,6 +139,7 @@ function InputPanelItem(props: InputPanelItemProps) { className={styles.applyAlert__button} onClick={() => { scrollToOrderList(); + goToSuitableTab(); setHasImmediateMatch(false); }} > diff --git a/src/components/dex/MatrixConnectionBadge/index.tsx b/src/components/dex/MatrixConnectionBadge/index.tsx index faf040f..1d28078 100644 --- a/src/components/dex/MatrixConnectionBadge/index.tsx +++ b/src/components/dex/MatrixConnectionBadge/index.tsx @@ -10,7 +10,7 @@ function MatrixConnectionBadge({ userAdress, userAlias, matrixAddresses, - className, + isSm, }: MatrixConnectionBadgeProps) { const hasConnection = (address: string) => matrixAddresses.some((item) => item.address === address && item.registered); @@ -44,7 +44,7 @@ function MatrixConnectionBadge({ if (!userAdress || !hasConnection(userAdress)) return <>; return ( -
+

{ diff --git a/src/components/dex/MatrixConnectionBadge/styles.module.scss b/src/components/dex/MatrixConnectionBadge/styles.module.scss index 6ac3d79..61504d8 100644 --- a/src/components/dex/MatrixConnectionBadge/styles.module.scss +++ b/src/components/dex/MatrixConnectionBadge/styles.module.scss @@ -1,9 +1,21 @@ .badge { position: relative; + &.sm { + .badge__link svg { + width: 14px; + height: 14px; + } + } + &__link { margin-top: 4px; cursor: pointer; + + svg { + width: 16px; + height: 16px; + } } &__tooltip { diff --git a/src/components/dex/MatrixConnectionBadge/types.ts b/src/components/dex/MatrixConnectionBadge/types.ts index 08a6668..1e49526 100644 --- a/src/components/dex/MatrixConnectionBadge/types.ts +++ b/src/components/dex/MatrixConnectionBadge/types.ts @@ -1,7 +1,7 @@ import MatrixAddress from '@/interfaces/common/MatrixAddress'; export interface MatrixConnectionBadgeProps { - className?: string; + isSm?: boolean; userAdress?: string; userAlias?: string; matrixAddresses: MatrixAddress[]; diff --git a/src/components/dex/OrdersPool/columns/index.tsx b/src/components/dex/OrdersPool/columns/index.tsx index b7a24fb..3a982c0 100644 --- a/src/components/dex/OrdersPool/columns/index.tsx +++ b/src/components/dex/OrdersPool/columns/index.tsx @@ -19,6 +19,7 @@ export function buildOrderPoolColumns({ className: 'alias', cell: (row) => ( Total ({secondCurrencyName}), width: '80px', + align: 'right', cell: (row) => , }, ]; @@ -75,6 +77,7 @@ export function buildTradesColumns({ }, { key: 'time', + align: 'right', header: <>Time, width: '80px', cell: (row) =>

{formatTimestamp(row.timestamp)}

, diff --git a/src/components/dex/OrdersPool/index.tsx b/src/components/dex/OrdersPool/index.tsx index 0cf2043..04f2d17 100644 --- a/src/components/dex/OrdersPool/index.tsx +++ b/src/components/dex/OrdersPool/index.tsx @@ -145,12 +145,12 @@ const OrdersPool = (props: OrdersPoolProps) => { <> {!tradesLoading ? ( r.id} /> ) : ( diff --git a/src/components/dex/OrdersPool/styles.module.scss b/src/components/dex/OrdersPool/styles.module.scss index 99a8495..d3ef712 100644 --- a/src/components/dex/OrdersPool/styles.module.scss +++ b/src/components/dex/OrdersPool/styles.module.scss @@ -60,6 +60,10 @@ width: 100%; height: 410px; + &.full { + height: 480px; + } + .table { width: 100%; @@ -229,4 +233,4 @@ font-size: 11px; font-weight: 400; } -} \ No newline at end of file +} diff --git a/src/components/dex/UserOrders/index.tsx b/src/components/dex/UserOrders/index.tsx index 0aa98c6..691b9a7 100644 --- a/src/components/dex/UserOrders/index.tsx +++ b/src/components/dex/UserOrders/index.tsx @@ -1,4 +1,3 @@ -import { classes } from '@/utils/utils'; import ContentPreloader from '@/components/UI/ContentPreloader/ContentPreloader'; import useUpdateUser from '@/hook/useUpdateUser'; import EmptyMessage from '@/components/UI/EmptyMessage'; @@ -13,6 +12,9 @@ import { useAlert } from '@/hook/useAlert'; import Alert from '@/components/UI/Alert/Alert'; import { tabsType } from '@/components/UI/Tabs/types'; import Tabs from '@/components/UI/Tabs'; +import { createOrderSorter } from '@/utils/utils'; +import ApplyTip from '@/interfaces/common/ApplyTip'; +import { useQuerySyncedTab } from '@/hook/useQuerySyncedTab'; import { UserOrdersProps } from './types'; import styles from './styles.module.scss'; import { @@ -80,9 +82,15 @@ const UserOrders = ({ ], ); - const [ordersType, setOrdersType] = useState(tabsData[0]); + const { active: ordersType, setActiveTab } = useQuerySyncedTab({ + tabs: tabsData, + defaultType: 'opened', + queryKey: 'tab', + }); useEffect(() => { + if (!loggedIn) return; + (async () => { const requestsData = await getUserPendings(); @@ -204,6 +212,11 @@ const UserOrders = ({ [firstCurrencyName, secondCurrencyName, secondAssetUsdPrice], ); + const sortedSuitables = createOrderSorter({ + getPrice: (e) => e.price, + getSide: (e) => e.type, + }); + const renderTable = () => { switch (ordersType.type) { case 'opened': @@ -221,7 +234,7 @@ const UserOrders = ({ r.id} emptyMessage="No suitables" /> @@ -265,7 +278,11 @@ const UserOrders = ({ <>
- + setActiveTab(t.type)} + /> {ordersType?.type === 'opened' && userOrders.length > 0 && ( = { + title: string; + type: T; + length?: number; +}; + +type Options = { + tabs: TabItem[]; + queryKey?: string; + defaultType?: T; + replace?: boolean; +}; + +export function useQuerySyncedTab({ + tabs, + queryKey = 'tab', + defaultType, + replace = true, +}: Options) { + const router = useRouter(); + const pathname = usePathname(); + const searchParams = useSearchParams(); + + const urlValue = searchParams.get(queryKey) as T | null; + + const initialTab = useMemo(() => { + const fallback = (defaultType ?? tabs[0]?.type) as T; + if (!urlValue) return tabs.find((t) => t.type === fallback) ?? tabs[0]; + return ( + tabs.find((t) => t.type === urlValue) ?? + tabs.find((t) => t.type === fallback) ?? + tabs[0] + ); + }, [tabs, urlValue, defaultType]); + + const [active, setActive] = useState>(initialTab); + + useEffect(() => { + setActive(initialTab); + }, [initialTab]); + + const setActiveTab = (next: TabItem | T) => { + const nextType = (typeof next === 'string' ? next : next.type) as T; + + const found = tabs.find((t) => t.type === nextType); + if (found) setActive(found); + + const params = new URLSearchParams(searchParams.toString()); + const def = (defaultType ?? tabs[0]?.type) as T; + if (nextType === def) { + params.delete(queryKey); + } else { + params.set(queryKey, nextType); + } + + const url = params.toString() ? `${pathname}?${params}` : pathname; + + if (replace) { + router.replace(url, { scroll: false }); + } else { + router.push(url, { scroll: false }); + } + }; + + return { active, setActiveTab }; +} diff --git a/src/pages/dex/trading/[id].tsx b/src/pages/dex/trading/[id].tsx index 172039b..09f0ad2 100644 --- a/src/pages/dex/trading/[id].tsx +++ b/src/pages/dex/trading/[id].tsx @@ -23,7 +23,6 @@ import TradingHeader from '@/components/dex/TradingHeader'; import UserOrders from '@/components/dex/UserOrders'; import OrdersPool from '@/components/dex/OrdersPool'; import CandleChart from '@/components/dex/CandleChart'; -import AllTrades from '@/components/dex/AllTrades'; import { useSocketListeners } from '@/hook/useSocketListeners'; import { useTradingData } from '@/hook/useTradingData'; import useFilteredData from '@/hook/useFilteredData'; @@ -216,13 +215,6 @@ function Trading() { onAfter={onAfter} />
- {/* */}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts index fceb632..e0be10b 100644 --- a/src/utils/utils.ts +++ b/src/utils/utils.ts @@ -154,10 +154,10 @@ export function formatTimestamp(ms: number | string) { const YYYY = date.getFullYear(); const MM = String(date.getMonth() + 1).padStart(2, '0'); const DD = String(date.getDate()).padStart(2, '0'); - const HH = String(date.getHours()).padStart(2, '0'); + const hh = String(date.getHours()).padStart(2, '0'); const mm = String(date.getMinutes()).padStart(2, '0'); const ss = String(date.getSeconds()).padStart(2, '0'); - return `${YYYY}-${MM}-${DD} ${HH}:${mm}:${ss}`; + return `${hh}:${mm}:${ss} ${DD}-${MM}-${YYYY}`; } export function classes(...classes: (string | boolean | undefined)[]): string {