Skip to content

Commit 359f278

Browse files
therealemjytherealemjy
authored
fix: new Account page UI fixes (#4669)
* fix: small UI fixes on new Account page * feat: include VAI borrow interests into daily earnings * chore: add changeset * fix: make Prime banner clickable on mobile
1 parent 961e431 commit 359f278

File tree

27 files changed

+229
-72
lines changed

27 files changed

+229
-72
lines changed

‎.changeset/new-mammals-talk.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@venusprotocol/ui": minor
3+
"@venusprotocol/evm": minor
4+
---
5+
6+
account page UI fixes

‎apps/evm/src/components/AreaChart/index.tsx‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { cn, theme } from '@venusprotocol/ui';
2-
import { ChartTooltipContent, type ChartTooltipContentItem } from 'components';
2+
import { ChartTooltipContent, type ChartTooltipContentItem, ChartYAxisTick } from 'components';
33
import { useUID } from 'react-uid';
44
import {
55
Area,
@@ -17,8 +17,9 @@ export interface ChartProps<T extends Record<string, any>> {
1717
xAxisDataKey: DataKey<T>;
1818
yAxisDataKey: DataKey<T>;
1919
chartColor: string;
20-
formatXAxisValue: (value: any, index: number) => string;
21-
formatYAxisValue: (value: any, index: number) => string;
20+
formatXAxisValue: (value: any) => string;
21+
formatYAxisValue: (value: any) => string;
22+
yAxisTickCount?: number;
2223
onDataPointHover?: (value: T) => void;
2324
onMouseLeave?: () => void;
2425
formatTooltipItems?: (value: T) => ChartTooltipContentItem[];
@@ -33,6 +34,7 @@ export const AreaChart = <T extends Record<string, any>>({
3334
interval,
3435
xAxisDataKey,
3536
yAxisDataKey,
37+
yAxisTickCount = 6,
3638
formatXAxisValue,
3739
formatYAxisValue,
3840
formatTooltipItems,
@@ -51,8 +53,8 @@ export const AreaChart = <T extends Record<string, any>>({
5153
<RCAreaChart
5254
margin={{
5355
top: 20,
54-
right: 10,
55-
left: -12,
56+
left: -14,
57+
right: 4,
5658
}}
5759
data={data}
5860
onMouseLeave={onMouseLeave}
@@ -70,7 +72,7 @@ export const AreaChart = <T extends Record<string, any>>({
7072
</linearGradient>
7173
</defs>
7274

73-
<CartesianGrid vertical={false} stroke={theme.colors.lightGrey} />
75+
<CartesianGrid vertical={false} stroke={theme.colors.lightGrey} strokeDasharray="2 2" />
7476

7577
<XAxis
7678
dataKey={xAxisDataKey}
@@ -88,11 +90,13 @@ export const AreaChart = <T extends Record<string, any>>({
8890
dataKey={yAxisDataKey}
8991
axisLine={false}
9092
tickLine={false}
91-
tickFormatter={formatYAxisValue}
9293
tickMargin={8}
93-
tickCount={6}
94+
tick={({ payload, y }) => (
95+
<ChartYAxisTick value={formatYAxisValue(payload.value)} y={y} />
96+
)}
97+
tickCount={yAxisTickCount}
9498
stroke={theme.colors.grey}
95-
className="text-xs"
99+
className="text-xs text-left"
96100
/>
97101

98102
<Tooltip

‎apps/evm/src/components/CellGroup/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const CellGroup: React.FC<CellGroupProps> = ({
2525
'gap-2 bg-transparent p-0',
2626
variant === 'secondary'
2727
? 'flex overflow-y-auto scrollbar-hidden'
28-
: 'grid grid-cols-1 sm:grid-cols-2 xl:bg-cards xl:flex xl:p-6 xl:flex-wrap xl:rounded-xl xl:gap-x-0',
28+
: 'grid grid-cols-2 xl:bg-cards xl:flex xl:p-6 xl:flex-wrap xl:rounded-xl xl:gap-x-0',
2929
className,
3030
)}
3131
{...containerProps}

‎apps/evm/src/components/ChartYAxisTick/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { theme } from '@venusprotocol/ui';
2+
3+
export interface ChartYAxisTickProps {
4+
value: string | number;
5+
y: number;
6+
}
7+
8+
export const ChartYAxisTick: React.FC<ChartYAxisTickProps> = ({ value, y }) => (
9+
<g transform={`translate(${0},${y})`}>
10+
<text x={0} y={0} textAnchor="start" fill={theme.colors.grey}>
11+
{value}
12+
</text>
13+
</g>
14+
);

‎apps/evm/src/components/Icon/icons/arrowUpFull2.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { SVGProps } from 'react';
2+
3+
const SvgArrowUpFull = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
width="16"
6+
height="16"
7+
viewBox="0 0 16 16"
8+
fill="none"
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<path
13+
d="M2 8.33333L2.94 9.27333L6.66667 5.55333L6.66667 13.6667L8 13.6667L8 5.55333L11.72 9.28L12.6667 8.33333L7.33333 3L2 8.33333Z"
14+
fill="currentColor"
15+
/>
16+
</svg>
17+
);
18+
19+
export default SvgArrowUpFull;

‎apps/evm/src/components/Icon/icons/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,3 +65,4 @@ export { default as lightning2 } from './lightning2';
6565
export { default as graph } from './graph';
6666
export { default as star } from './star';
6767
export { default as download } from './download';
68+
export { default as arrowUpFull2 } from './arrowUpFull2';

‎apps/evm/src/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,3 +54,4 @@ export * from './RiskAcknowledgementToggle';
5454
export * from './AccountHealthBar';
5555
export * from './AreaChart';
5656
export * from './ChartTooltipContent';
57+
export * from './ChartYAxisTick';

‎apps/evm/src/containers/Vault/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,9 @@ export const Vault: React.FC<VaultProps> = ({ vault, variant = 'primary', classN
156156
{/* Mobile */}
157157
<div className="space-y-3 sm:hidden">
158158
{dataListItems.map(item => (
159-
<LabeledInlineContent label={item.label}>{item.value}</LabeledInlineContent>
159+
<LabeledInlineContent label={item.label} key={item.label}>
160+
{item.value}
161+
</LabeledInlineContent>
160162
))}
161163
</div>
162164

‎apps/evm/src/pages/Account/NewPage/PerformanceChart/DollarValueChange/index.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { cn } from '@venusprotocol/ui';
2+
import { formatCentsToReadableValue } from 'utilities';
3+
4+
export interface DollarValueChangeProps {
5+
value?: number;
6+
}
7+
8+
export const DollarValueChange: React.FC<DollarValueChangeProps> = ({ value }) => {
9+
const readableValue = formatCentsToReadableValue({
10+
value,
11+
});
12+
13+
return (
14+
<span
15+
className={cn(
16+
'text-base sm:text-lg',
17+
value !== undefined && value >= 0 && 'text-green',
18+
value !== undefined && value < 0 && 'text-red',
19+
)}
20+
>
21+
{value !== undefined && value > 0 && '+'}
22+
{readableValue}
23+
</span>
24+
);
25+
};

‎apps/evm/src/pages/Account/NewPage/PerformanceChart/index.tsx‎

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@ import {
44
type AccountPerformanceHistoryPeriod,
55
useGetAccountPerformanceHistory,
66
} from 'clients/api';
7-
import { ButtonGroup, Card, Cell, type CellProps, ErrorState, InfoIcon } from 'components';
7+
import { ButtonGroup, Card, Cell, type CellProps, ErrorState, Icon, InfoIcon } from 'components';
88
import { AreaChart } from 'components';
99
import { NULL_ADDRESS } from 'constants/address';
1010
import { useBreakpointUp } from 'hooks/responsive';
1111
import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
1212
import { useTranslation } from 'libs/translations';
1313
import { useAccountAddress } from 'libs/wallet';
1414
import { useState } from 'react';
15-
import { formatCentsToReadableValue } from 'utilities';
15+
import { formatCentsToReadableValue, formatPercentageToReadableValue } from 'utilities';
16+
import { DollarValueChange } from './DollarValueChange';
1617
import { formatToReadableAxisDate } from './formatToReadableAxisDate';
1718
import { formatToReadableTitleDate } from './formatToReadableTitleDate';
1819

@@ -58,10 +59,12 @@ export const PerformanceChart: React.FC<PerformanceChartProps> = ({ className, n
5859
period: selectedPeriod,
5960
});
6061
const accountPerformanceHistory = getAccountPerformanceHistoryData?.performanceHistory || [];
62+
6163
const startOfDayNetWorthCents =
6264
getAccountPerformanceHistoryData?.startOfDayNetWorthCents !== undefined
6365
? getAccountPerformanceHistoryData?.startOfDayNetWorthCents
6466
: undefined;
67+
6568
const oldestNetWorthCents =
6669
accountPerformanceHistory.length > 0
6770
? Number(accountPerformanceHistory[0].netWorthCents)
@@ -71,18 +74,14 @@ export const PerformanceChart: React.FC<PerformanceChartProps> = ({ className, n
7174
oldestNetWorthCents !== undefined ? netWorthCents - oldestNetWorthCents : undefined;
7275

7376
const dailyChangeCents =
74-
startOfDayNetWorthCents !== undefined
75-
? accountPerformanceHistory[accountPerformanceHistory.length - 1].netWorthCents -
76-
startOfDayNetWorthCents
77-
: undefined;
77+
startOfDayNetWorthCents !== undefined ? netWorthCents - startOfDayNetWorthCents : undefined;
7878

79-
const readableAbsolutePerformance = formatCentsToReadableValue({
80-
value: absolutePerformanceCents,
81-
});
79+
const dailyChangePercentage =
80+
dailyChangeCents !== undefined && netWorthCents !== 0
81+
? (dailyChangeCents * 100) / netWorthCents
82+
: undefined;
8283

83-
const readableDailyChange = formatCentsToReadableValue({
84-
value: dailyChangeCents,
85-
});
84+
const readableDailyChangePercentage = formatPercentageToReadableValue(dailyChangePercentage);
8685

8786
const [selectedDataPoint, setSelectedDataPoint] = useState<
8887
AccountPerformanceHistoryDataPoint | undefined
@@ -94,20 +93,30 @@ export const PerformanceChart: React.FC<PerformanceChartProps> = ({ className, n
9493
{
9594
label: t('account.performanceChart.todaysChange'),
9695
value: (
97-
<span className="text-base sm:text-lg">
98-
{dailyChangeCents !== undefined && dailyChangeCents > 0 && '+'}
99-
{readableDailyChange}
100-
</span>
96+
<div className="space-x-2 flex items-center">
97+
<DollarValueChange value={dailyChangeCents} />
98+
99+
{dailyChangeCents !== undefined && dailyChangeCents !== 0 && (
100+
<div
101+
className={cn('flex items-center', dailyChangeCents > 0 ? 'text-green' : 'text-red')}
102+
>
103+
<Icon
104+
name="arrowUpFull2"
105+
className={cn(
106+
'w-4 h-4 text-inherit -mb-[2px]',
107+
dailyChangeCents < 0 && 'rotate-180',
108+
)}
109+
/>
110+
111+
<span>{readableDailyChangePercentage}</span>
112+
</div>
113+
)}
114+
</div>
101115
),
102116
},
103117
{
104118
label: t('account.performanceChart.absolutePerformance'),
105-
value: (
106-
<span className="text-base sm:text-lg">
107-
{absolutePerformanceCents !== undefined && absolutePerformanceCents > 0 && '+'}
108-
{readableAbsolutePerformance}
109-
</span>
110-
),
119+
value: <DollarValueChange value={absolutePerformanceCents} />,
111120
},
112121
];
113122

@@ -140,9 +149,7 @@ export const PerformanceChart: React.FC<PerformanceChartProps> = ({ className, n
140149

141150
<p className="text-xl sm:text-2xl sm:order-1">
142151
{formatCentsToReadableValue({
143-
value: selectedDataPoint?.netWorthCents
144-
? Number(selectedDataPoint.netWorthCents)
145-
: netWorthCents,
152+
value: selectedDataPoint ? Number(selectedDataPoint.netWorthCents) : netWorthCents,
146153
})}
147154
</p>
148155
</div>
@@ -176,6 +183,7 @@ export const PerformanceChart: React.FC<PerformanceChartProps> = ({ className, n
176183
data={accountPerformanceHistory}
177184
xAxisDataKey="blockTimestampMs"
178185
yAxisDataKey="netWorthCents"
186+
yAxisTickCount={5}
179187
onDataPointHover={payload => setSelectedDataPoint(payload)}
180188
onMouseLeave={() => setSelectedDataPoint(undefined)}
181189
formatXAxisValue={formatToReadableAxisDate}

0 commit comments

Comments
 (0)