+
-
+
{formattedPrice.toFixed(groupingDecimalCount)}
+
>
diff --git a/components/trade/OrderbookAndTrades.tsx b/components/trade/OrderbookAndTrades.tsx
index 9ec9615c..28a72661 100644
--- a/components/trade/OrderbookAndTrades.tsx
+++ b/components/trade/OrderbookAndTrades.tsx
@@ -3,6 +3,11 @@ import { useState } from 'react'
import Orderbook from './Orderbook'
import RecentTrades from './RecentTrades'
+const TABS: [string, number][] = [
+ ['book', 0],
+ ['trades', 0],
+]
+
const OrderbookAndTrades = () => {
const [activeTab, setActiveTab] = useState('book')
return (
@@ -11,7 +16,7 @@ const OrderbookAndTrades = () => {
setActiveTab(tab)}
- values={['book', 'trades']}
+ values={TABS}
fillWidth
/>
diff --git a/components/trade/RecentTrades.tsx b/components/trade/RecentTrades.tsx
index e15189ed..4c4775ed 100644
--- a/components/trade/RecentTrades.tsx
+++ b/components/trade/RecentTrades.tsx
@@ -30,17 +30,21 @@ const RecentTrades = () => {
const fetchTradesForChart = useCallback(async () => {
if (!selectedMarketPk) return
- const response = await fetch(
- `https://event-history-api-candles.herokuapp.com/trades/address/${selectedMarketPk}`
- )
- const parsedResp = await response.json()
- const newTrades = parsedResp.data
- if (!newTrades) return null
+ try {
+ const response = await fetch(
+ `https://event-history-api-candles.herokuapp.com/trades/address/${selectedMarketPk}`
+ )
+ const parsedResp = await response.json()
+ const newTrades = parsedResp.data
+ if (!newTrades) return null
- if (newTrades.length && trades.length === 0) {
- setTrades(newTrades)
- } else if (newTrades?.length && !isEqual(newTrades[0], trades[0])) {
- setTrades(newTrades)
+ if (newTrades.length && trades.length === 0) {
+ setTrades(newTrades)
+ } else if (newTrades?.length && !isEqual(newTrades[0], trades[0])) {
+ setTrades(newTrades)
+ }
+ } catch (e) {
+ console.error('Unable to fetch recent trades', e)
}
}, [selectedMarketPk, trades])
@@ -92,7 +96,7 @@ const RecentTrades = () => {
{formattedSize.toFixed()}
-
+
{trade.time && new Date(trade.time).toLocaleTimeString()}
diff --git a/components/trade/TradeAdvancedPage.tsx b/components/trade/TradeAdvancedPage.tsx
index 35e577d2..0861b505 100644
--- a/components/trade/TradeAdvancedPage.tsx
+++ b/components/trade/TradeAdvancedPage.tsx
@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
-// import { useTranslation } from 'next-i18next'
+import { useCallback, useMemo, useState } from 'react'
import dynamic from 'next/dynamic'
import ReactGridLayout, { Responsive, WidthProvider } from 'react-grid-layout'
@@ -8,10 +7,9 @@ import { GRID_LAYOUT_KEY } from 'utils/constants'
import useLocalStorageState from 'hooks/useLocalStorageState'
import { breakpoints } from 'utils/theme'
import { useViewport } from 'hooks/useViewport'
-import Orderbook from './Orderbook'
import AdvancedMarketHeader from './AdvancedMarketHeader'
import AdvancedTradeForm from './AdvancedTradeForm'
-import BalanceAndOpenOrders from './BalanceAndOpenOrders'
+import TradeInfoTabs from './TradeInfoTabs'
import MobileTradeAdvancedPage from './MobileTradeAdvancedPage'
import OrderbookAndTrades from './OrderbookAndTrades'
@@ -60,13 +58,13 @@ const TradeAdvancedPage = () => {
return {
xxxl: [
{ i: 'market-header', x: 0, y: 0, w: 16, h: marketHeaderHeight },
- { i: 'tv-chart', x: 0, y: 1, w: 16, h: 676 },
+ { i: 'tv-chart', x: 0, y: 1, w: 16, h: 640 },
{
i: 'balances',
x: 0,
y: 2,
w: 16,
- h: getHeight(innerHeight, 300, 676 + marketHeaderHeight),
+ h: getHeight(innerHeight, 300, 640 + marketHeaderHeight),
},
{
i: 'orderbook',
@@ -79,13 +77,13 @@ const TradeAdvancedPage = () => {
],
xxl: [
{ i: 'market-header', x: 0, y: 0, w: 15, h: marketHeaderHeight },
- { i: 'tv-chart', x: 0, y: 1, w: 15, h: 576 },
+ { i: 'tv-chart', x: 0, y: 1, w: 15, h: 536 },
{
i: 'balances',
x: 0,
y: 2,
w: 15,
- h: getHeight(innerHeight, 300, 576 + marketHeaderHeight),
+ h: getHeight(innerHeight, 300, 536 + marketHeaderHeight),
},
{
i: 'orderbook',
@@ -98,13 +96,13 @@ const TradeAdvancedPage = () => {
],
xl: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: marketHeaderHeight },
- { i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
+ { i: 'tv-chart', x: 0, y: 1, w: 14, h: 488 },
{
i: 'balances',
x: 0,
y: 2,
w: 14,
- h: getHeight(innerHeight, 300, 520 + marketHeaderHeight),
+ h: getHeight(innerHeight, 300, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
@@ -117,13 +115,13 @@ const TradeAdvancedPage = () => {
],
lg: [
{ i: 'market-header', x: 0, y: 0, w: 14, h: marketHeaderHeight },
- { i: 'tv-chart', x: 0, y: 1, w: 14, h: 520 },
+ { i: 'tv-chart', x: 0, y: 1, w: 14, h: 488 },
{
i: 'balances',
x: 0,
y: 2,
w: 14,
- h: getHeight(innerHeight, 300, 520 + marketHeaderHeight),
+ h: getHeight(innerHeight, 300, 488 + marketHeaderHeight),
},
{
i: 'orderbook',
@@ -136,10 +134,10 @@ const TradeAdvancedPage = () => {
],
md: [
{ i: 'market-header', x: 0, y: 0, w: 18, h: marketHeaderHeight },
- { i: 'tv-chart', x: 0, y: 1, w: 18, h: 520 },
+ { i: 'tv-chart', x: 0, y: 1, w: 18, h: 488 },
{ i: 'balances', x: 0, y: 2, w: 18, h: 488 },
- { i: 'orderbook', x: 18, y: 2, w: 6, h: 489 },
- { i: 'trade-form', x: 18, y: 1, w: 6, h: 568 },
+ { i: 'orderbook', x: 18, y: 2, w: 6, h: 488 },
+ { i: 'trade-form', x: 18, y: 1, w: 6, h: 488 },
],
}
}, [height])
@@ -156,6 +154,8 @@ const TradeAdvancedPage = () => {
}, [])
const onBreakpointChange = useCallback((newBreakpoint: string) => {
+ console.log('newBreakpoints', newBreakpoint)
+
setCurrentBreakpoint(newBreakpoint)
}, [])
@@ -193,7 +193,7 @@ const TradeAdvancedPage = () => {