v7.3.6

v7.3.6

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "kwenta",
-	"version": "7.3.5",
+	"version": "7.3.6",
 	"description": "Kwenta",
 	"main": "index.js",
 	"scripts": {

packages/app/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@kwenta/app",
-	"version": "7.3.5",
+	"version": "7.3.6",
 	"scripts": {
 		"dev": "next",
 		"build": "next build",

packages/app/src/components/README.md

@@ -6,7 +6,7 @@ Most of the components in this folder are viewable in our [Storybook]().
 
 ## Folder Structure
 
-We try to ensure that folders are as flat as (reasonbly) possible. For this, reason, most individual components can be found under `{component-name}.tsx`. However in the future, some domain specific components may be found in subfolders like `mobile`, `futures` or `exchange`. The components are only expected to be used in the context of the folders in which they are contained.
+We try to ensure that folders are as flat as (reasonably) possible. For this, reason, most individual components can be found under `{component-name}.tsx`. However in the future, some domain specific components may be found in subfolders like `mobile`, `futures` or `exchange`. The components are only expected to be used in the context of the folders in which they are contained.
 
 ## Checklist
 

packages/app/src/components/TextToggle.tsx

@@ -35,7 +35,7 @@ const TextToggle: React.FC<TextToggleProps<any>> = ({
 	)
 }
 
-const ToggleButton = styled(Body)<{ $active: boolean }>`
+export const ToggleButton = styled(Body)<{ $active: boolean }>`
 	cursor: pointer;
 	text-transform: capitalize;
 	color: ${(props) => props.theme.colors.selectedTheme.newTheme.text.disabled};

packages/app/src/containers/Connector/config.ts

@@ -3,7 +3,6 @@ import {
 	braveWallet,
 	coinbaseWallet,
 	injectedWallet,
-	ledgerWallet,
 	metaMaskWallet,
 	rainbowWallet,
 	walletConnectWallet,
@@ -82,7 +81,6 @@ const connectors = connectorsForWallets([
 	{
 		groupName: 'More',
 		wallets: [
-			ledgerWallet({ projectId, chains }),
 			braveWallet({ chains, shimDisconnect: true }),
 			Tally({ chains, shimDisconnect: true }),
 			Frame({ chains, shimDisconnect: true }),

packages/app/src/sections/futures/FundingChart.tsx

@@ -1,4 +1,4 @@
-import { formatChartTime } from '@kwenta/sdk/utils'
+import format from 'date-fns/format'
 import { FC } from 'react'
 import {
 	LineChart,
@@ -13,72 +13,87 @@ import styled, { css } from 'styled-components'
 import { useTheme } from 'styled-components'
 
 import { fetchFundingRatesHistory } from 'state/futures/actions'
-import { selectMarketAsset } from 'state/futures/selectors'
+import { selectHistoricalFundingRatePeriod, selectMarketAsset } from 'state/futures/selectors'
 import { useAppSelector, usePollAction } from 'state/hooks'
 
 import FundingChartTooltip, { formatFundingRate } from './FundingChartTooltip'
+import FundingPeriodToggle from './FundingPeriodToggle'
 
 type FundingChartProps = {
 	display?: boolean
 }
 
-const FundingChart: FC<FundingChartProps> = ({ display = true }) => {
+const formatFundingDate = (date: Date | number) => format(date, 'MMM d')
+
+const FundingChart: FC<FundingChartProps> = ({ display }) => {
 	const theme = useTheme()
 	const marketAsset = useAppSelector(selectMarketAsset)
+	const period = useAppSelector(selectHistoricalFundingRatePeriod)
 	const historicalFundingRates = useAppSelector(({ futures }) => futures.historicalFundingRates)
 
-	usePollAction('fetchFundingRatesHistory', () => fetchFundingRatesHistory(marketAsset), {
-		dependencies: [marketAsset],
-		intervalTime: 60 * 60 * 1000,
-	})
+	usePollAction(
+		'fetchFundingRatesHistory',
+		() => fetchFundingRatesHistory({ marketAsset, period }),
+		{ dependencies: [marketAsset, period], intervalTime: 60 * 60 * 1000 }
+	)
 
 	return (
-		<FundingChartContainer $display={display} minWidth={1} minHeight={1}>
-			<LineChart
-				data={historicalFundingRates[marketAsset]}
-				margin={{
-					top: 30,
-					right: 50,
-					left: 30,
-					bottom: 15,
-				}}
-			>
-				<YAxis dataKey="fundingRate" domain={['auto', 0]} tickFormatter={formatFundingRate} />
-				<XAxis
-					dataKey="timestamp"
-					type="number"
-					scale="time"
-					tickFormatter={formatChartTime}
-					minTickGap={75}
-					domain={['dataMin', 'dataMax']}
-				/>
-				<Tooltip
-					content={<FundingChartTooltip />}
-					formatter={(x) => formatFundingRate(x as any)}
-					isAnimationActive={false}
-				/>
-				<ReferenceLine y={0} stroke={theme.colors.selectedTheme.text.body} />
-				<Line
-					type="monotone"
-					dataKey="fundingRate"
-					stroke={theme.colors.selectedTheme.text.value}
-					strokeWidth={1}
-					strokeLinecap="square"
-					dot={false}
-					isAnimationActive={false}
-				/>
-			</LineChart>
-		</FundingChartContainer>
+		<FundingChartWrapper $display={display}>
+			<FundingPeriodToggle />
+			<FundingChartContainer>
+				<LineChart
+					data={historicalFundingRates[marketAsset]}
+					margin={{ top: 30, right: 50, left: 30, bottom: 15 }}
+				>
+					<YAxis
+						dataKey="fundingRate"
+						domain={['auto', 'auto']}
+						tickFormatter={formatFundingRate}
+						allowDataOverflow
+						tickCount={10}
+					/>
+					<XAxis
+						dataKey="timestamp"
+						type="number"
+						scale="time"
+						tickFormatter={formatFundingDate}
+						minTickGap={75}
+						domain={['dataMin', 'dataMax']}
+					/>
+					<Tooltip
+						content={<FundingChartTooltip />}
+						formatter={(x) => formatFundingRate(x as any)}
+						isAnimationActive={false}
+					/>
+					<ReferenceLine y={0} stroke={theme.colors.selectedTheme.text.body} />
+					<Line
+						type="monotone"
+						dataKey="fundingRate"
+						stroke={theme.colors.selectedTheme.text.value}
+						strokeWidth={1}
+						strokeLinecap="square"
+						dot={false}
+						isAnimationActive={false}
+					/>
+				</LineChart>
+			</FundingChartContainer>
+		</FundingChartWrapper>
 	)
 }
 
-const FundingChartContainer = styled(ResponsiveContainer)<{ $display: boolean }>`
-	flex: 1;
+const FundingChartWrapper = styled.div<{ $display?: boolean }>`
+	width: 100%;
+	height: calc(100% - 45px);
+
 	${(props) =>
 		!props.$display &&
 		css`
 			display: none;
 		`}
 `
 
+const FundingChartContainer = styled(ResponsiveContainer)`
+	flex: 1;
+`
+
 export default FundingChart

packages/app/src/sections/futures/FundingChartTooltip.tsx

@@ -1,9 +1,11 @@
 import { formatPercent } from '@kwenta/sdk/utils'
 import { wei } from '@synthetixio/wei'
+import { format } from 'date-fns'
 import { FC } from 'react'
 import styled from 'styled-components'
 
-import { NumericValue } from 'components/Text'
+import { FlexDiv } from 'components/layout/flex'
+import { Body, NumericValue } from 'components/Text'
 import { ETH_UNIT } from 'constants/network'
 
 export const parseFundingRate = (value: number) => {
@@ -13,25 +15,45 @@ export const parseFundingRate = (value: number) => {
 export const formatFundingRate = (value: number) => {
 	const parsed = parseFundingRate(value)
 
-	return parsed.eq(0) ? '0%' : formatPercent(parsed, { minDecimals: 4 })
+	return parsed.eq(0) ? '0%' : formatPercent(parsed, { minDecimals: 6 })
 }
 
 type FundingChartTooltipProps = {
 	active?: boolean
-	payload?: { value: number }[]
+	payload?: {
+		value: number
+		payload: {
+			timestamp: number
+			fundingRate: number
+		}
+	}[]
 }
 
+const formatTooltipDate = (date: number) => format(date, 'HH:mm,MM/dd')
+
 const FundingChartTooltip: FC<FundingChartTooltipProps> = ({ active, payload }) => {
 	if (active && payload && payload.length) {
-		const { value } = payload[0]
+		const { value, payload: p } = payload[0]
 		const parsedValue = parseFundingRate(value)
 		const percent = formatFundingRate(value)
 
 		return (
 			<FundingChartTooltipContainer>
-				<NumericValue colored value={parsedValue}>
-					{percent}
-				</NumericValue>
+				<Body color="secondary">
+					Time:{'  '}
+					<Body color="secondary" as="span" mono>
+						{formatTooltipDate(p.timestamp)}
+					</Body>
+				</Body>
+				<FlexDiv style={{ justifyContent: 'space-between' }}>
+					<NumericValue value={parsedValue} colored mono={false}>
+						Rate:
+					</NumericValue>
+					<NumericValue colored value={parsedValue}>
+						{' '}
+						{percent}
+					</NumericValue>
+				</FlexDiv>
 			</FundingChartTooltipContainer>
 		)
 	}

packages/app/src/sections/futures/FundingPeriodToggle.tsx

@@ -0,0 +1,56 @@
+import { PERIOD_DISPLAY, Period } from '@kwenta/sdk/constants'
+import { useCallback } from 'react'
+import styled from 'styled-components'
+
+import { Body } from 'components/Text'
+import { ToggleButton } from 'components/TextToggle'
+import { setHistoricalFundingRatePeriod } from 'state/futures/reducer'
+import { selectHistoricalFundingRatePeriod } from 'state/futures/selectors'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+
+const PERIOD_OPTIONS = [Period.TWO_WEEKS, Period.ONE_MONTH, Period.THREE_MONTHS]
+
+const FundingPeriodToggle = () => {
+	const period = useAppSelector(selectHistoricalFundingRatePeriod)
+	const dispatch = useAppDispatch()
+
+	const handlePeriodChange = useCallback(
+		(period: Period) => () => {
+			dispatch(setHistoricalFundingRatePeriod(period))
+		},
+		[dispatch]
+	)
+
+	return (
+		<PeriodToggleContainer>
+			<Body>Time Range:</Body>
+			<PeriodOptions>
+				{PERIOD_OPTIONS.map((value) => (
+					<ToggleButton key={value} $active={value === period} onClick={handlePeriodChange(value)}>
+						{PERIOD_DISPLAY[value]}
+					</ToggleButton>
+				))}
+			</PeriodOptions>
+		</PeriodToggleContainer>
+	)
+}
+
+const PeriodToggleContainer = styled.div`
+	width: 100%;
+	display: flex;
+	padding: 15px;
+	border-bottom: ${(props) => props.theme.colors.selectedTheme.newTheme.border.style};
+`
+
+const PeriodOptions = styled.div`
+	display: flex;
+	margin-left: 15px;
+
+	& > {
+		&:not(:last-of-type) {
+			margin-right: 15px;
+		}
+	}
+`
+
+export default FundingPeriodToggle

packages/app/src/sections/futures/MarketDetails/HisotryToggle.tsx → packages/app/src/sections/futures/MarketDetails/HistoryToggle.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react'
 
 import TextToggle from 'components/TextToggle'
-import { setShowTradeHistory } from 'state/futures/reducer'
+import { toggleShowTradeHistory } from 'state/futures/reducer'
 import { selectShowHistory } from 'state/futures/selectors'
 import { useAppSelector, useAppDispatch } from 'state/hooks'
 
@@ -10,8 +10,8 @@ const HistoryToggle = () => {
 	const showHistory = useAppSelector(selectShowHistory)
 
 	const handleHistoryChange = useCallback(() => {
-		dispatch(setShowTradeHistory(!showHistory))
-	}, [dispatch, showHistory])
+		dispatch(toggleShowTradeHistory())
+	}, [dispatch])
 
 	return (
 		<TextToggle

packages/app/src/sections/futures/MarketDetails/MarketDetails.tsx

@@ -24,7 +24,7 @@ import media from 'styles/media'
 import { MARKETS_DETAILS_HEIGHT_DESKTOP } from '../styles'
 
 import ChartToggle from './ChartToggle'
-import HistoryToggle from './HisotryToggle'
+import HistoryToggle from './HistoryToggle'
 import HoursToggle from './HoursToggle'
 import MarketDetail, { MarketDetailValue } from './MarketDetail'
 import { MarketDataKey } from './utils'

packages/app/src/sections/futures/MarketInfo/ChartWrapper.tsx

@@ -1,6 +1,5 @@
 import styled from 'styled-components'
 
-import { FlexDivRowCentered } from 'components/layout/flex'
 import { selectShowHistory } from 'state/futures/selectors'
 import { useAppSelector } from 'state/hooks'
 
@@ -13,17 +12,24 @@ const ChartWrapper = () => {
 	const selectedChart = useAppSelector(({ futures }) => futures.selectedChart)
 
 	return (
-		<Container>
-			<PositionChart display={selectedChart === 'price'} />
-			<FundingChart display={selectedChart === 'funding'} />
-			{showHistory && <TradesHistoryTable />}
+		<Container $showHistory={showHistory}>
+			<div className="charts-container">
+				<PositionChart display={selectedChart === 'price'} />
+				<FundingChart display={selectedChart === 'funding'} />
+			</div>
+			<TradesHistoryTable display={showHistory} />
 		</Container>
 	)
 }
 
-const Container = styled(FlexDivRowCentered)`
+const Container = styled.div<{ $showHistory: boolean }>`
+	display: flex;
 	height: 100%;
 	overflow: hidden;
+
+	.charts-container {
+		width: ${(props) => (props.$showHistory ? 'calc(100% - 300px)' : '100%')};
+	}
 `
 
 export default ChartWrapper

packages/app/src/sections/futures/MobileTrade/OverviewTabs/FundingTab.tsx

@@ -5,7 +5,7 @@ import FundingChart from '../../FundingChart'
 const FundingTab = () => {
 	return (
 		<Pane noPadding>
-			<FundingChart />
+			<FundingChart display />
 		</Pane>
 	)
 }