diff --git a/apps/trading/client-pages/market/market-header-stats.tsx b/apps/trading/client-pages/market/market-header-stats.tsx index 96e5a475b..c69225863 100644 --- a/apps/trading/client-pages/market/market-header-stats.tsx +++ b/apps/trading/client-pages/market/market-header-stats.tsx @@ -126,32 +126,20 @@ export const FundingRate = ({ marketId }: { marketId: string }) => { ); }; -const padStart = (n: number) => n.toString().padStart(2, '0'); - -export const FundingCountdown = ({ marketId }: { marketId: string }) => { - const { data: fundingPeriods } = useFundingPeriodsQuery({ - variables: { - marketId: marketId, - pagination: { first: 1 }, - }, - }); - const { data: marketInfo } = useDataProvider({ - dataProvider: marketInfoProvider, - variables: { marketId }, - }); - +const useNow = () => { const [now, setNow] = useState(Date.now()); useEffect(() => { const interval = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(interval); }, []); + return now; +}; - const node = fundingPeriods?.fundingPeriods.edges?.[0]?.node; - let startTime: number | undefined = undefined; - if (node && node.startTime && !node.endTime) { - startTime = fromNanoSeconds(node.startTime).getTime(); - } - let diffFormatted = t('Unknown'); +const useEvery = (marketId: string) => { + const { data: marketInfo } = useDataProvider({ + dataProvider: marketInfoProvider, + variables: { marketId }, + }); let every: number | undefined = undefined; const sourceType = marketInfo && @@ -165,14 +153,51 @@ export const FundingCountdown = ({ marketId }: { marketId: string }) => { every *= 1000; } } + return every; +}; + +const useStartTime = (marketId: string) => { + const { data: fundingPeriods } = useFundingPeriodsQuery({ + variables: { + marketId: marketId, + pagination: { first: 1 }, + }, + }); + const node = fundingPeriods?.fundingPeriods.edges?.[0]?.node; + let startTime: number | undefined = undefined; + if (node && node.startTime && !node.endTime) { + startTime = fromNanoSeconds(node.startTime).getTime(); + } + return startTime; +}; + +const padStart = (n: number) => n.toString().padStart(2, '0'); + +const useFormatCountdown = ( + now: number, + startTime?: number, + every?: number +) => { if (startTime && every) { const diff = every - ((now - startTime) % every); const hours = (diff / 3.6e6) | 0; const mins = ((diff % 3.6e6) / 6e4) | 0; const secs = Math.round((diff % 6e4) / 1e3); - diffFormatted = `${padStart(hours)}:${padStart(mins)}:${padStart(secs)}`; + return `${padStart(hours)}:${padStart(mins)}:${padStart(secs)}`; } - return
{diffFormatted}
; + return t('Unknown'); +}; + +export const FundingCountdown = ({ marketId }: { marketId: string }) => { + const now = useNow(); + const startTime = useStartTime(marketId); + const every = useEvery(marketId); + + return ( +
+ {useFormatCountdown(now, startTime, every)} +
+ ); }; const ExpiryLabel = ({ market }: ExpiryLabelProps) => { diff --git a/apps/trading/components/funding-container/funding-container.tsx b/apps/trading/components/funding-container/funding-container.tsx index 788f26c2b..adbf826a1 100644 --- a/apps/trading/components/funding-container/funding-container.tsx +++ b/apps/trading/components/funding-container/funding-container.tsx @@ -38,7 +38,7 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => { if (edge.node.endTime) { acc?.push({ endTime: fromNanoSeconds(edge.node.endTime), - fundingRate: Number(edge.node.fundingRate), + fundingRate: Number(edge.node.fundingRate) * 100, }); } return acc; @@ -51,5 +51,11 @@ export const FundingContainer = ({ marketId }: { marketId: string }) => { if (!data || !values?.rows.length) { return {t('No funding history data')}; } - return ; + return ( + `${fundingRate.toFixed(4)}%`} + /> + ); }; diff --git a/apps/trading/components/market-header/market-header.tsx b/apps/trading/components/market-header/market-header.tsx index 563790513..5f1a005e5 100644 --- a/apps/trading/components/market-header/market-header.tsx +++ b/apps/trading/components/market-header/market-header.tsx @@ -5,7 +5,7 @@ import { MarketSelector } from '../../components/market-selector/market-selector import { MarketHeaderStats } from '../../client-pages/market/market-header-stats'; import { useMarket, useMarketList } from '@vegaprotocol/markets'; import { useState } from 'react'; -import { MarketProductPill } from '@vegaprotocol/datagrid'; +import { ProductTypeShortName } from '@vegaprotocol/types'; export const MarketHeader = () => { const { marketId } = useParams(); @@ -28,11 +28,13 @@ export const MarketHeader = () => { {data.tradableInstrument.instrument.code} - + + {' '} + {data.tradableInstrument.instrument.product.__typename && + ProductTypeShortName[ + data.tradableInstrument.instrument.product.__typename + ]}{' '} +