diff --git a/.github/workflows/build-lux.yml b/.github/workflows/build-lux.yml index caa7158b7c..8f3cfbb1be 100644 --- a/.github/workflows/build-lux.yml +++ b/.github/workflows/build-lux.yml @@ -31,7 +31,7 @@ env: jobs: build: - runs-on: [self-hosted, linux, amd64] + runs-on: lux-build permissions: contents: read packages: write @@ -80,7 +80,7 @@ jobs: deploy: needs: build if: github.ref == 'refs/heads/main' && github.event_name != 'pull_request' - runs-on: [self-hosted, linux, amd64] + runs-on: lux-build permissions: contents: read steps: diff --git a/cspell.jsonc b/cspell.jsonc index d9fa0027db..48b6464155 100644 --- a/cspell.jsonc +++ b/cspell.jsonc @@ -34,6 +34,7 @@ // words - list of words to be always considered correct "words": [ "aatx", + "CLOB", "hanzoai", "zooai", "parsdao", diff --git a/lib/api/dchain/index.ts b/lib/api/dchain/index.ts index c82a4a36a4..464a2aac14 100644 --- a/lib/api/dchain/index.ts +++ b/lib/api/dchain/index.ts @@ -1,13 +1,12 @@ -// D-Chain (DEX) API hooks and types. +// C-Chain native DEX (0x9999) subgraph hooks and types. export { useDexData } from './useDexData'; export type { UseDexDataResult } from './useDexData'; export type { - DexOrder, - DexTrade, - DexPool, - DexSymbolStats, - DexOverviewStats, + DexMarket, + DexFill, + DexMarketView, + DexOverview, } from './types'; diff --git a/lib/api/dchain/types.ts b/lib/api/dchain/types.ts index af794c63d6..36feefda31 100644 --- a/lib/api/dchain/types.ts +++ b/lib/api/dchain/types.ts @@ -1,55 +1,39 @@ -// D-Chain (DEX Chain) API response types for the Lux DexVM indexer. +// C-Chain native DEX (0x9999 V4 PoolManager) subgraph types. +// Source: the explorer's embedded luxfi/graph "dex" (CLOB) subgraph, served at +// `${config.apis.general.endpoint}/v1/graph/cchain/dex/graphql`. Markets are +// emitted by the on-chain Initialize event and fills by the DEXFill event. -export interface DexOrder { +export interface DexMarket { readonly id: string; - readonly symbol: string; - readonly side: 'buy' | 'sell'; - readonly price: string; - readonly quantity: string; - readonly filled: string; - readonly status: 'open' | 'filled' | 'cancelled' | 'partial'; - readonly maker: string; - readonly timestamp: string; + // BASE/QUOTE pair the indexer bound from the two currencies' ERC-20 symbols + // (empty/poolId-hex when a token has no clean symbol). Authoritative when set. + readonly symbol?: string; + readonly baseToken: string; + readonly quoteToken: string; + readonly feeTier: number; + readonly volume24h: string; + readonly tradeCount: number; + readonly lastPrice: string; + readonly lastUpdate: number; } -export interface DexTrade { +export interface DexFill { readonly id: string; - readonly symbol: string; - readonly price: string; - readonly quantity: string; - readonly buyer: string; - readonly seller: string; - readonly fee: string; - readonly timestamp: string; - readonly blockHeight: number; + readonly market: string; + readonly taker: string; + readonly amountOut: string; + readonly timestamp: number; + readonly txHash: string; } -export interface DexPool { - readonly id: string; - readonly tokenA: string; - readonly tokenB: string; - readonly reserveA: string; - readonly reserveB: string; - readonly tvl: string; - readonly volume24h: string; - readonly fee: string; +// A market with its base/quote token symbols resolved to a human pair label. +export interface DexMarketView extends DexMarket { + readonly pair: string; } -export interface DexSymbolStats { - readonly symbol: string; - readonly lastPrice: string; - readonly change24h: number; - readonly volume24h: string; - readonly high24h: string; - readonly low24h: string; - readonly trades24h: number; -} - -// Aggregated DEX statistics - -export interface DexOverviewStats { - readonly totalPairs: number; +// Aggregated headline stats derived from the live market set. +export interface DexOverview { + readonly totalMarkets: number; readonly volume24h: string; - readonly activeOrders: number; - readonly tradesToday: number; + readonly totalTrades: number; } diff --git a/lib/api/dchain/useDexData.spec.ts b/lib/api/dchain/useDexData.spec.ts new file mode 100644 index 0000000000..939ac1a636 --- /dev/null +++ b/lib/api/dchain/useDexData.spec.ts @@ -0,0 +1,68 @@ +import type { DexMarket } from './types'; + +import { expect, test, describe } from 'vitest'; + +import { buildMarketViews, computeOverview } from './useDexData'; + +// Real shapes returned by the testnet cchain/dex subgraph. +const MARKET_A: DexMarket = { + id: '0x70ed78d5fb8fd83110ffb5b6726edb3d76e0968d5dba042e59e0c97af1a1f2cd', + baseToken: '0xaa1c9a2527f70aee8c163fc053ccbba0e0df7a37', + quoteToken: '0xf90434869b41d554c6446aacd73c06406b6ce9c1', + feeTier: 3000, + volume24h: '10', + tradeCount: 1, + lastPrice: '0', + lastUpdate: 11, +}; + +const MARKET_B: DexMarket = { + id: '0x2b0a2ff82be3beb2d2b58d0766b1c6c0b3f9bb44689e469bb49934e4e32802f1', + baseToken: '0xa811aac7a2e132c167650f93f3e14305e6205f95', + quoteToken: '0xccba5e1036dcab7ff4885975d339cafab2a4c0c4', + feeTier: 3000, + volume24h: '1258432996', + tradeCount: 21, + lastPrice: '0', + lastUpdate: 325, +}; + +describe('buildMarketViews', () => { + test('falls back to a shortened address when a token has no metadata', () => { + const [ view ] = buildMarketViews([ MARKET_A ], new Map()); + expect(view.pair).toBe('0xaa1c...7a37/0xf904...e9c1'); + }); + + test('resolves symbols from the metadata map (case-insensitive)', () => { + const symbols = new Map([ + [ MARKET_A.baseToken.toLowerCase(), 'LUX' ], + [ MARKET_A.quoteToken.toLowerCase(), 'USDC' ], + ]); + const [ view ] = buildMarketViews([ MARKET_A ], symbols); + expect(view.pair).toBe('LUX/USDC'); + }); + + test('preserves the source market fields', () => { + const [ view ] = buildMarketViews([ MARKET_A ], new Map()); + expect(view).toMatchObject({ id: MARKET_A.id, feeTier: 3000, tradeCount: 1, volume24h: '10' }); + }); + + test('returns an empty list for no markets (empty state)', () => { + expect(buildMarketViews([], new Map())).toHaveLength(0); + }); +}); + +describe('computeOverview', () => { + test('aggregates market count, big-int volume, and trade count', () => { + const views = buildMarketViews([ MARKET_A, MARKET_B ], new Map()); + expect(computeOverview(views)).toEqual({ + totalMarkets: 2, + volume24h: '1258433006', + totalTrades: 22, + }); + }); + + test('is zeroed for an empty market set', () => { + expect(computeOverview([])).toEqual({ totalMarkets: 0, volume24h: '0', totalTrades: 0 }); + }); +}); diff --git a/lib/api/dchain/useDexData.ts b/lib/api/dchain/useDexData.ts index 82b7bc40a4..211f49f32a 100644 --- a/lib/api/dchain/useDexData.ts +++ b/lib/api/dchain/useDexData.ts @@ -1,139 +1,160 @@ import { useQuery } from '@tanstack/react-query'; import React from 'react'; -import type { - DexOrder, - DexTrade, - DexPool, - DexSymbolStats, - DexOverviewStats, -} from './types'; +import type { DexMarket, DexFill, DexMarketView, DexOverview } from './types'; -import { getDChain } from 'lib/api/luxnet/chains'; +import config from 'configs/app'; +import shortenString from 'lib/shortenString'; +// One root field per request — the subgraph engine processes a single root +// field per query, so markets and fills are fetched separately. +const MARKETS_QUERY = '{ markets { id symbol baseToken quoteToken feeTier volume24h tradeCount lastPrice lastUpdate } }'; +const FILLS_QUERY = '{ fills(first:25) { id market taker amountOut timestamp txHash } }'; + +const DEX_GRAPHQL_PATH = '/v1/graph/cchain/dex/graphql'; const DEX_STALE_TIME_MS = 30_000; -const DEX_QUERY_KEY = 'dchain:dexData' as const; -export interface UseDexDataResult { - readonly symbols: ReadonlyArray; - readonly orders: ReadonlyArray; - readonly trades: ReadonlyArray; - readonly pools: ReadonlyArray; - readonly overview: DexOverviewStats; - readonly isLoading: boolean; - readonly isError: boolean; - readonly error: Error | null; +const EMPTY_MARKETS: ReadonlyArray = []; +const EMPTY_FILLS: ReadonlyArray = []; + +// The DEX subgraph lives on the same API host the rest of the SPA already +// talks to (NEXT_PUBLIC_API_HOST → config.apis.general.endpoint), so the +// network is selected exactly like every other resource — by deployment. +function getApiBase(): string | undefined { + return config.apis.general?.endpoint; } -interface DexDataPayload { - readonly symbols: ReadonlyArray; - readonly orders: ReadonlyArray; - readonly trades: ReadonlyArray; - readonly pools: ReadonlyArray; - readonly overview: DexOverviewStats; +async function fetchGraphql(query: string): Promise { + const base = getApiBase(); + if (!base) { + return null; + } + + let res: Response; + try { + res = await fetch(base + DEX_GRAPHQL_PATH, { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ query }), + }); + } catch { + return null; + } + + // A net without the subgraph mounted answers 404 — that is an empty DEX, + // not an error, so we surface it as "no data" and render the empty state. + if (!res.ok) { + return null; + } + + const json = await res.json().catch(() => null) as { data?: T } | null; + return json?.data ?? null; } -const EMPTY_SYMBOLS: ReadonlyArray = []; -const EMPTY_ORDERS: ReadonlyArray = []; -const EMPTY_TRADES: ReadonlyArray = []; -const EMPTY_POOLS: ReadonlyArray = []; -const EMPTY_OVERVIEW: DexOverviewStats = { - totalPairs: 0, - volume24h: '0', - activeOrders: 0, - tradesToday: 0, -}; - -const EMPTY_PAYLOAD: DexDataPayload = { - symbols: EMPTY_SYMBOLS, - orders: EMPTY_ORDERS, - trades: EMPTY_TRADES, - pools: EMPTY_POOLS, - overview: EMPTY_OVERVIEW, -}; - -// Read DEX state directly from the D-Chain (DexVM) over the luxnet SDK. When the -// D-Chain is not yet serving market data we return an honest-empty payload — the -// UI must never present fabricated markets/orders/trades/pools to users. -async function fetchDexData(): Promise { - const dchain = getDChain(); - const stats = await dchain.getStats(); - - if (!stats || (stats.trades24h ?? 0) <= 0) { - return EMPTY_PAYLOAD; +async function fetchTokenSymbol(address: string): Promise { + const base = getApiBase(); + if (!base) { + return null; } - const [ pools, markets ] = await Promise.all([ - dchain.getPools(), - dchain.getMarkets(), - ]); + try { + const res = await fetch(`${ base }/tokens/${ address }`); + if (!res.ok) { + return null; + } + const json = await res.json().catch(() => null) as { symbol?: string | null } | null; + return json?.symbol || null; + } catch { + return null; + } +} +function tokenLabel(address: string, symbols: ReadonlyMap): string { + return symbols.get(address.toLowerCase()) || shortenString(address, 10); +} + +// Pure: attach a human pair label to each market from a resolved symbol map. +export function buildMarketViews( + markets: ReadonlyArray, + symbols: ReadonlyMap, +): ReadonlyArray { + return markets.map((m) => ({ + ...m, + // Prefer the subgraph's bound BASE/QUOTE symbol (the indexer derives it from + // both currencies' ERC-20 symbols — one pair, one source of truth). Fall back + // to live token-metadata resolution, then to short addresses. + pair: m.symbol && m.symbol.includes('/') ? + m.symbol : + `${ tokenLabel(m.baseToken, symbols) }/${ tokenLabel(m.quoteToken, symbols) }`, + })); +} + +// Pure: headline aggregates over the live market set. +export function computeOverview(markets: ReadonlyArray): DexOverview { return { - // Markets/orders/trades are surfaced once the DexVM indexer exposes them; - // until then the SDK returns nothing and these stay empty rather than faked. - symbols: EMPTY_SYMBOLS, - orders: EMPTY_ORDERS, - trades: EMPTY_TRADES, - pools: pools.map((p, i) => ({ - id: `pool-${ i }`, - tokenA: String(p.tokenA), - tokenB: String(p.tokenB), - reserveA: String(p.reserveA), - reserveB: String(p.reserveB), - tvl: String(p.totalLiquidity), - volume24h: '0', - fee: String(p.fee), - })), - overview: { - totalPairs: markets.length, - volume24h: stats.volume24h ?? '0', - activeOrders: 0, - tradesToday: stats.trades24h ?? 0, - }, + totalMarkets: markets.length, + volume24h: markets.reduce((sum, m) => sum + safeBigInt(m.volume24h), BigInt(0)).toString(), + totalTrades: markets.reduce((sum, m) => sum + (m.tradeCount || 0), 0), }; } +async function fetchMarkets(): Promise> { + const data = await fetchGraphql<{ markets: ReadonlyArray | null }>(MARKETS_QUERY); + const markets = data?.markets ?? []; + + // Resolve base/quote symbols via the existing token metadata endpoint, + // falling back to a shortened address when a token isn't indexed. + const addresses = Array.from(new Set(markets.flatMap((m) => [ m.baseToken, m.quoteToken ]))); + const resolved = await Promise.all(addresses.map(async(addr) => [ addr.toLowerCase(), await fetchTokenSymbol(addr) ] as const)); + const symbols = new Map(resolved.filter((entry): entry is readonly [string, string] => Boolean(entry[1]))); + + return buildMarketViews(markets, symbols); +} + +async function fetchFills(): Promise> { + const data = await fetchGraphql<{ fills: ReadonlyArray | null }>(FILLS_QUERY); + return data?.fills ?? []; +} + +export interface UseDexDataResult { + readonly markets: ReadonlyArray; + readonly fills: ReadonlyArray; + readonly overview: DexOverview; + readonly isLoading: boolean; + readonly isError: boolean; +} + export function useDexData(): UseDexDataResult { - const query = useQuery({ - queryKey: [ DEX_QUERY_KEY ], - queryFn: fetchDexData, + const marketsQuery = useQuery({ + queryKey: [ 'dchain:markets', getApiBase() ], + queryFn: fetchMarkets, staleTime: DEX_STALE_TIME_MS, - retry: 1, }); - const symbols = React.useMemo( - () => query.data?.symbols ?? EMPTY_SYMBOLS, - [ query.data?.symbols ], - ); - - const orders = React.useMemo( - () => query.data?.orders ?? EMPTY_ORDERS, - [ query.data?.orders ], - ); - - const trades = React.useMemo( - () => query.data?.trades ?? EMPTY_TRADES, - [ query.data?.trades ], - ); + const fillsQuery = useQuery({ + queryKey: [ 'dchain:fills', getApiBase() ], + queryFn: fetchFills, + staleTime: DEX_STALE_TIME_MS, + }); - const pools = React.useMemo( - () => query.data?.pools ?? EMPTY_POOLS, - [ query.data?.pools ], - ); + const markets = marketsQuery.data ?? EMPTY_MARKETS; + const fills = fillsQuery.data ?? EMPTY_FILLS; - const overview = React.useMemo( - () => query.data?.overview ?? EMPTY_OVERVIEW, - [ query.data?.overview ], - ); + const overview = React.useMemo(() => computeOverview(markets), [ markets ]); return { - symbols, - orders, - trades, - pools, + markets, + fills, overview, - isLoading: query.isLoading, - isError: query.isError, - error: query.error, + isLoading: marketsQuery.isLoading || fillsQuery.isLoading, + isError: marketsQuery.isError || fillsQuery.isError, }; } + +function safeBigInt(value: string): bigint { + try { + return BigInt(value); + } catch { + return BigInt(0); + } +} diff --git a/ui/dex/DexPage.tsx b/ui/dex/DexPage.tsx index 8b471df1ce..0e6cc65747 100644 --- a/ui/dex/DexPage.tsx +++ b/ui/dex/DexPage.tsx @@ -1,24 +1,23 @@ -// DEX Chain (D-Chain) orderbook page for the Lux multi-chain explorer. -// Displays market stats, orderbook, trade history, and liquidity pools -// sourced from the DexVM indexer. +// C-Chain native DEX (0x9999 V4 PoolManager) page for the Lux explorer. +// Renders live markets and recent fills from the embedded dex (CLOB) subgraph. +// All data is real and network-aware — there is no mock/demo path. import { Skeleton } from '@luxfi/ui/skeleton'; -import { Tag } from '@luxfi/ui/tag'; import React from 'react'; +import { route } from 'nextjs/routes'; + +import type { DexFill, DexMarketView } from 'lib/api/dchain'; import { useDexData } from 'lib/api/dchain'; -import type { DexOrder, DexTrade, DexPool, DexSymbolStats } from 'lib/api/dchain'; +import shortenString from 'lib/shortenString'; import { cn } from 'lib/utils/cn'; import PageTitle from 'ui/shared/Page/PageTitle'; -import PrimaryNetworkGuard from 'ui/shared/PrimaryNetworkGuard'; // ── Constants ── const TAB_IDS = { markets: 'markets', - orderbook: 'orderbook', trades: 'trades', - pools: 'pools', } as const; type TabId = typeof TAB_IDS[keyof typeof TAB_IDS]; @@ -27,28 +26,19 @@ const ROW_BASE = 'flex items-center py-3 px-4 border-b border-[var(--color-borde 'hover:bg-gray-50 dark:hover:bg-white/5 transition-[background] duration-150 gap-4 flex-wrap lg:flex-nowrap'; const HEADER_BASE = 'hidden lg:flex px-4 py-2 gap-4 border-b border-[var(--color-border-divider)]'; const COL_HEADER = 'text-[var(--color-text-secondary)] font-semibold text-xs uppercase tracking-wider'; +const LINK_CLASS = 'text-sm font-mono text-[var(--color-link-primary)] hover:text-[var(--color-link-primary-hover)] hover:underline'; -// ── Sub-components ── +// ── Helpers ── -interface TabButtonProps { - readonly label: string; - readonly isActive: boolean; - readonly onClick: () => void; +function groupDigits(value: string): string { + return /^\d+$/.test(value) ? value.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',') : value; } -const TabButton = ({ label, isActive, onClick }: TabButtonProps) => ( - -); +function formatFeeTier(feeTier: number): string { + return `${ (feeTier / 10_000).toFixed(2) }%`; +} + +// ── Sub-components ── interface StatCardProps { readonly label: string; @@ -69,158 +59,72 @@ const StatCard = ({ label, value, isLoading }: StatCardProps) => ( ); -// ── Symbol row ── - -interface SymbolRowProps { - readonly stat: DexSymbolStats; -} - -const SymbolRow = ({ stat }: SymbolRowProps) => { - const isPositive = stat.change24h >= 0; - - return ( -
-
- { stat.symbol } -
-
- { stat.lastPrice } -
-
- - { isPositive ? '+' : '' }{ stat.change24h.toFixed(2) }% - -
-
- { stat.high24h } -
-
- { stat.low24h } -
-
- ${ stat.volume24h } -
-
- { stat.trades24h } -
-
- ); -}; - -// ── Order row ── - -interface OrderRowProps { - readonly order: DexOrder; +interface TabButtonProps { + readonly label: string; + readonly isActive: boolean; + readonly onClick: () => void; } -const OrderRow = ({ order }: OrderRowProps) => { - const isBuy = order.side === 'buy'; - - return ( -
-
- { order.symbol } -
-
- - { order.side.toUpperCase() } - -
-
- { order.price } -
-
- { order.quantity } -
-
- - { (parseFloat(order.price) * parseFloat(order.quantity)).toFixed(2) } - -
-
- { order.maker } -
-
- { formatTime(order.timestamp) } -
-
- - { order.status } - -
-
- ); -}; - -// ── Trade row ── - -interface TradeRowProps { - readonly trade: DexTrade; -} +const TabButton = ({ label, isActive, onClick }: TabButtonProps) => ( + +); -const TradeRow = ({ trade }: TradeRowProps) => ( +const MarketRow = ({ market }: { readonly market: DexMarketView }) => (
-
- { trade.symbol } +
+ { market.pair }
-
- { trade.price } +
+ { formatFeeTier(market.feeTier) }
- { trade.quantity } + { market.lastPrice }
-
- { trade.buyer } -
-
- { trade.seller } -
-
- { trade.fee } +
+ { groupDigits(market.volume24h) }
- { formatTime(trade.timestamp) } + { market.tradeCount }
); -// ── Pool row ── - -interface PoolRowProps { - readonly pool: DexPool; -} - -const PoolRow = ({ pool }: PoolRowProps) => ( +const FillRow = ({ fill, pair }: { readonly fill: DexFill; readonly pair: string }) => (
-
- { pool.tokenA }/{ pool.tokenB } +
+ { pair }
-
- { pool.reserveA } + -
- { pool.reserveB } +
+ { groupDigits(fill.amountOut) }
-
- ${ pool.tvl } + -
- ${ pool.volume24h } -
- ); -// ── Loading skeleton ── - const LoadingSkeleton = () => (
@@ -230,13 +134,9 @@ const LoadingSkeleton = () => (
); -// ── Empty / error states ── -// The DEX (D-Chain / DexVM) is not yet serving live market data on every -// network. We render an honest message rather than fabricated rows. - -const EmptyRow = ({ message }: { readonly message: string }) => ( +const EmptyState = ({ text }: { readonly text: string }) => (
- { message } + { text }
); @@ -244,81 +144,54 @@ const EmptyRow = ({ message }: { readonly message: string }) => ( const DexPage = () => { const [ activeTab, setActiveTab ] = React.useState(TAB_IDS.markets); - const { symbols, orders, trades, pools, overview, isLoading, isError } = useDexData(); + const { markets, fills, overview, isLoading } = useDexData(); - const emptyMessage = isError ? - 'DEX data is temporarily unavailable.' : - 'No market data yet — the D-Chain DEX is not reporting activity.'; + const pairByMarket = React.useMemo( + () => new Map(markets.map((m) => [ m.id, m.pair ])), + [ markets ], + ); const handleMarketsClick = React.useCallback(() => setActiveTab(TAB_IDS.markets), []); - const handleOrderbookClick = React.useCallback(() => setActiveTab(TAB_IDS.orderbook), []); const handleTradesClick = React.useCallback(() => setActiveTab(TAB_IDS.trades), []); - const handlePoolsClick = React.useCallback(() => setActiveTab(TAB_IDS.pools), []); return ( - + <> - D-Chain decentralized exchange orderbook and market data + C-Chain native exchange — live markets and fills from the 0x9999 PoolManager
) } /> { /* Stats cards */ } -
- - - - +
+ + +
{ /* Tabs */ }
- -
{ /* Markets tab */ } { activeTab === TAB_IDS.markets && (
-
Symbol
-
Price
-
24h Change
-
24h High
-
24h Low
-
24h Volume
+
Pair
+
Fee
+
Last Price
+
24h Volume
Trades
{ isLoading && } - { !isLoading && symbols.length === 0 && } - { !isLoading && symbols.map((stat) => ( - - )) } -
- ) } - - { /* Orderbook tab */ } - { activeTab === TAB_IDS.orderbook && ( -
-
-
Symbol
-
Side
-
Price
-
Quantity
-
Total
-
Maker
-
Time
-
Status
-
- { isLoading && } - { !isLoading && orders.length === 0 && } - { !isLoading && orders.map((order) => ( - + { !isLoading && markets.length === 0 && } + { !isLoading && markets.map((market) => ( + )) }
) } @@ -327,59 +200,21 @@ const DexPage = () => { { activeTab === TAB_IDS.trades && (
-
Symbol
-
Price
-
Quantity
-
Buyer
-
Seller
-
Fee
-
Time
-
- { isLoading && } - { !isLoading && trades.length === 0 && } - { !isLoading && trades.map((trade) => ( - - )) } -
- ) } - - { /* Pools tab */ } - { activeTab === TAB_IDS.pools && ( -
-
-
Pair
-
Reserve A
-
Reserve B
-
TVL
-
24h Volume
-
Fee
+
Pair
+
Taker
+
Amount Out
+
Block
+
Txn
{ isLoading && } - { !isLoading && pools.length === 0 && } - { !isLoading && pools.map((pool) => ( - + { !isLoading && fills.length === 0 && } + { !isLoading && fills.map((fill) => ( + )) }
) } - + ); }; -// ── Helpers ── - -function formatTime(timestamp: string): string { - const date = new Date(timestamp); - return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }); -} - -function getStatusClassName(status: DexOrder['status']): string { - switch (status) { - case 'open': return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'; - case 'filled': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'; - case 'partial': return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200'; - case 'cancelled': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'; - default: return 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200'; - } -} - export default React.memo(DexPage); diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index d540eb111a..2dfb463a29 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -1,3 +1,4 @@ +import { Skeleton } from '@luxfi/ui/skeleton'; import React from 'react'; import type { NovesDescribeTxsResponse } from 'types/api/noves'; @@ -5,7 +6,6 @@ import type { Transaction } from 'types/api/transaction'; import type { ClusterChainConfig } from 'types/multichain'; import config from 'configs/app'; -import { Skeleton } from '@luxfi/ui/skeleton'; import AddressFromTo from 'ui/shared/address/AddressFromTo'; import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; @@ -39,7 +39,6 @@ const TxsListItem = ({ showBlockInfo, currentAddress, enableTimeIncrement, - animation, chainData, translationIsLoading, translationData, @@ -73,7 +72,7 @@ const TxsListItem = ({ hash={ tx.hash } truncation="constant_long" className="font-bold" - icon={ !tx.is_pending_update && tx.transaction_types.includes('blob_transaction') ? { name: 'blob' } : undefined } + icon={ !tx.is_pending_update && tx.transaction_types?.includes('blob_transaction') ? { name: 'blob' } : undefined } chain={ chainData } isPendingUpdate={ tx.is_pending_update } /> @@ -81,7 +80,7 @@ const TxsListItem = ({ timestamp={ tx.timestamp } enableIncrement={ enableTimeIncrement } isLoading={ isLoading } - + />
{ tx.method && (