Skip to content

Commit 4b1c565

Browse files
linkielinklinkielink
authored
Merge pull request #1541 from mars-protocol/develop
v2.10.3
2 parents a195ce2 + 684dcaa commit 4b1c565

File tree

17 files changed

+200
-433
lines changed

17 files changed

+200
-433
lines changed

‎next.config.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,15 @@ const nextConfig = {
3737
},
3838
{
3939
key: 'Cache-Control',
40-
value: 'no-store, no-cache, must-revalidate, proxy-revalidate',
40+
value: 'public, max-age=86400, s-maxage=86400, must-revalidate',
4141
},
4242
{
43-
key: 'Pragma',
44-
value: 'no-cache',
43+
key: 'CDN-Cache-Control',
44+
value: 'public, max-age=86400, s-maxage=86400, must-revalidate',
4545
},
4646
{
4747
key: 'Expires',
48-
value: '0',
48+
value: '01',
4949
},
5050
{
5151
key: 'X-Content-Type-Options',

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mars-v2-frontend",
3-
"version": "2.10.2",
3+
"version": "2.10.3",
44
"homepage": "./",
55
"private": false,
66
"license": "SEE LICENSE IN LICENSE FILE",

‎src/components/common/ChartWrapper/ChartCardWrapper.tsx‎

Lines changed: 40 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,51 @@ import Card from 'components/common/Card'
22
import Text from 'components/common/Text'
33
import classNames from 'classnames'
44
import { ReactNode } from 'react'
5+
import { CardWithTabs } from 'components/common/Card/CardWithTabs'
6+
import TimeframeSelector, { TimeframeOption } from 'components/common/TimeframeSelector'
57

68
interface Props {
7-
title: string | ReactNode
8-
children: ReactNode
9+
title?: string | ReactNode
10+
children?: ReactNode
911
className?: string
12+
tabs?: { title: string; content: ReactNode }[]
13+
timeframe?: number
14+
setTimeframe?: (timeframe: number) => void
15+
timeframeOptions?: TimeframeOption[]
1016
}
1117

1218
export default function ChartCardWrapper(props: Props) {
13-
const { title, children, className } = props
19+
const { title, children, className, tabs, timeframe, setTimeframe, timeframeOptions } = props
20+
21+
const renderContent = (content: ReactNode) => {
22+
if (timeframe !== undefined && setTimeframe && timeframeOptions) {
23+
return (
24+
<div className='flex flex-col gap-1 px-2 pb-3 min-h-80'>
25+
<div className='flex justify-end px-4'>
26+
<TimeframeSelector
27+
timeframe={timeframeOptions}
28+
selectedTimeframe={timeframe}
29+
setSelectedTimeframe={setTimeframe}
30+
size='xs'
31+
/>
32+
</div>
33+
{content}
34+
</div>
35+
)
36+
}
37+
return content
38+
}
39+
40+
if (tabs) {
41+
return (
42+
<CardWithTabs
43+
tabs={tabs.map((tab) => ({
44+
title: tab.title,
45+
renderContent: () => renderContent(tab.content),
46+
}))}
47+
/>
48+
)
49+
}
1450

1551
return (
1652
<Card
@@ -22,7 +58,7 @@ export default function ChartCardWrapper(props: Props) {
2258
</div>
2359
}
2460
>
25-
{children}
61+
{renderContent(children)}
2662
</Card>
2763
)
2864
}

‎src/components/common/DynamicLineChart/DynamicLineChartBody.tsx‎

Lines changed: 48 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,23 @@ import useLocalStorage from 'hooks/localStorage/useLocalStorage'
2525
import { LocalStorageKeys } from 'constants/localStorageKeys'
2626
import { getDefaultChainSettings } from 'constants/defaultSettings'
2727
import useChainConfig from 'hooks/chain/useChainConfig'
28-
import CustomTooltip from './ChartTooltip'
28+
import CustomTooltip from 'components/common/DynamicLineChart/ChartTooltip'
29+
30+
interface LineConfig {
31+
dataKey: string
32+
color: string
33+
name: string
34+
isPercentage?: boolean
35+
isCurrency?: boolean
36+
}
2937

3038
interface Props {
3139
data: MergedChartData[]
3240
lines: LineConfig[]
3341
height?: string
34-
customYAxisDomain?: (values: number[]) => [number, number]
42+
legend?: boolean
3543
timeframe?: string
44+
customYAxisDomain?: (values: number[]) => [number, number]
3645
}
3746

3847
interface ChartDataPayloadProps {
@@ -82,14 +91,27 @@ const TooltipContent = ({
8291
{lineConfig?.isPercentage ? (
8392
<FormattedNumber
8493
amount={value}
85-
options={{ minDecimals: 2, maxDecimals: 2, suffix: '%' }}
94+
options={{
95+
maxDecimals: Number(item.value) > 100 ? 0 : 2,
96+
minDecimals: Number(item.value) > 100 ? 0 : 2,
97+
suffix: '%',
98+
}}
99+
className='text-xs'
100+
/>
101+
) : lineConfig?.isCurrency ? (
102+
<DisplayCurrency
103+
coin={BNCoin.fromDenomAndBigNumber(
104+
'usd',
105+
BN(item.value).shiftedBy(-PRICE_ORACLE_DECIMALS),
106+
)}
107+
options={{ maxDecimals: 3, minDecimals: 2 }}
86108
className='text-xs'
87109
/>
88110
) : (
89111
<DisplayCurrency
90-
coin={BNCoin.fromDenomAndBigNumber('usd', BN(value).shiftedBy(-PRICE_ORACLE_DECIMALS))}
112+
coin={BNCoin.fromDenomAndBigNumber('usd', BN(item.value))}
113+
options={{ maxDecimals: 3, minDecimals: 2 }}
91114
className='text-xs'
92-
showSignPrefix
93115
/>
94116
)}
95117
</div>
@@ -98,18 +120,17 @@ const TooltipContent = ({
98120
}
99121

100122
export default function DynamicLineChartBody(props: Props) {
101-
const { data, lines, height = 'h-65', customYAxisDomain, timeframe = '' } = props
123+
const { data, lines, height = 'h-80', timeframe = '', legend = true, customYAxisDomain } = props
102124
const chainConfig = useChainConfig()
103125
const [reduceMotion] = useLocalStorage<boolean>(
104126
LocalStorageKeys.REDUCE_MOTION,
105127
getDefaultChainSettings(chainConfig).reduceMotion,
106128
)
107-
const reversedData = [...data].reverse()
108129

109130
// domain setting for large percentage values and custom domains
110131
const getYAxisDomain = () => {
111132
const extractValues = () =>
112-
reversedData
133+
data
113134
.map((item) =>
114135
lines.map((line) => {
115136
const value = item[line.dataKey]
@@ -139,7 +160,7 @@ export default function DynamicLineChartBody(props: Props) {
139160
<div className={classNames('-ml-4', height)}>
140161
<ResponsiveContainer width='100%' height='100%'>
141162
<AreaChart
142-
data={reversedData}
163+
data={data}
143164
margin={{
144165
top: 10,
145166
right: 10,
@@ -174,7 +195,6 @@ export default function DynamicLineChartBody(props: Props) {
174195
dot={false}
175196
strokeWidth={2}
176197
isAnimationActive={!reduceMotion}
177-
strokeDasharray={lineConfig.strokeDasharray}
178198
/>
179199
))}
180200

@@ -192,29 +212,37 @@ export default function DynamicLineChartBody(props: Props) {
192212
}
193213
return moment(value).format('DD MMM')
194214
}}
195-
interval={reversedData.length > 10 ? Math.floor(reversedData.length / 7) : 0}
215+
interval={data.length > 10 ? Math.floor(data.length / 7) : 0}
196216
/>
197217
<YAxis
198218
axisLine={false}
199219
tickLine={false}
200220
fontSize={8}
201221
tickCount={8}
202-
stroke='rgba(255, 255, 255, 0.4)'
203222
domain={getYAxisDomain()}
223+
stroke='rgba(255, 255, 255, 0.4)'
204224
tickFormatter={(value) => {
205225
if (lines[0]?.isPercentage) {
206226
return formatValue(value, {
227+
minDecimals: Number(value) > 100 ? 0 : 2,
228+
maxDecimals: Number(value) > 100 ? 0 : 2,
229+
suffix: '%',
230+
abbreviated: true,
231+
})
232+
}
233+
if (lines[0]?.isCurrency) {
234+
const adjustedValue = BN(value).shiftedBy(-PRICE_ORACLE_DECIMALS).toNumber()
235+
return formatValue(adjustedValue, {
207236
minDecimals: 2,
208237
maxDecimals: 2,
209-
suffix: '%',
238+
prefix: '$',
239+
abbreviated: true,
210240
})
211241
}
212-
const adjustedValue = BN(value).shiftedBy(-PRICE_ORACLE_DECIMALS).toNumber()
213-
return formatValue(adjustedValue, {
214-
minDecimals: 0,
242+
return formatValue(value, {
243+
minDecimals: 2,
215244
maxDecimals: 2,
216245
prefix: '$',
217-
abbreviated: true,
218246
})
219247
}}
220248
/>
@@ -228,7 +256,9 @@ export default function DynamicLineChartBody(props: Props) {
228256
/>
229257
)}
230258
/>
231-
<Legend content={<ChartLegend payload={[]} data={reversedData} />} verticalAlign='top' />
259+
{legend && (
260+
<Legend content={<ChartLegend payload={[]} data={data} />} verticalAlign='top' />
261+
)}
232262
<CartesianGrid opacity={0.1} vertical={false} />
233263
<ReferenceLine y={0} stroke='rgba(255, 255, 255, 0.2)' strokeWidth={2} />
234264
</AreaChart>

‎src/components/common/DynamicLineChart/index.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,22 @@ interface Props {
88
loading?: boolean
99
lines: LineConfig[]
1010
height?: string
11-
customYAxisDomain?: (values: number[]) => [number, number]
1211
timeframe?: string
12+
legend?: boolean
13+
customYAxisDomain?: (values: number[]) => [number, number]
1314
}
1415

1516
export default function DynamicLineChart(props: Props) {
16-
const { data, loading, lines, height = 'h-65', title, customYAxisDomain, timeframe } = props
17+
const {
18+
data,
19+
loading,
20+
lines,
21+
height = 'h-65',
22+
title,
23+
timeframe,
24+
legend = true,
25+
customYAxisDomain,
26+
} = props
1727

1828
return (
1929
<ChartCardWrapper title={title}>
@@ -24,8 +34,9 @@ export default function DynamicLineChart(props: Props) {
2434
data={data}
2535
lines={lines}
2636
height={height}
27-
customYAxisDomain={customYAxisDomain}
2837
timeframe={timeframe}
38+
customYAxisDomain={customYAxisDomain}
39+
legend={legend}
2940
/>
3041
)}
3142
</ChartCardWrapper>

‎src/components/common/MarketDetails.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,10 @@ export default function MarketDetails({ row, type }: Props) {
117117
unit: selectedInterval.unit,
118118
})
119119

120+
const chartData = useMemo(() => {
121+
return [...aprData].reverse()
122+
}, [aprData])
123+
120124
return (
121125
<tr>
122126
<td
@@ -161,7 +165,7 @@ export default function MarketDetails({ row, type }: Props) {
161165
))}
162166
</div>
163167
<DynamicLineChart
164-
data={aprData || []}
168+
data={chartData || []}
165169
loading={aprLoading}
166170
lines={[
167171
{ dataKey: 'supply_apr', color: '#10b981', name: 'Supply APR', isPercentage: true },

‎src/components/earn/farm/perps/PerpsIntro.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,9 @@ export default function PerpsIntro() {
1919
<span className='text-white'>
2020
Provide liquidity to the Counterparty Vault and earn perpetuals trading fees.
2121
</span>{' '}
22-
Deposits are subject to a {vault?.lockup.duration}-{vault?.lockup.timeframe} and carry
23-
directional risk: when perps traders lose, the vault gains — but when they win, the vault
24-
takes the loss.
22+
Deposits are subject to a {vault?.lockup.duration}-{vault?.lockup.timeframe} unlocking
23+
period and carry directional risk: when perps traders lose, the vault gains — but when
24+
they win, the vault takes the loss.
2525
</>
2626
}
2727
bg='perps-vault'

0 commit comments

Comments
 (0)