Skip to content

Commit 2edd0a4

Browse files
therealemjytherealemjy
authored
feat: add E-mode banner to Account page (#4746)
1 parent 473d589 commit 2edd0a4

File tree

17 files changed

+244
-96
lines changed

17 files changed

+244
-96
lines changed

‎.changeset/thick-bikes-dig.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@venusprotocol/evm": minor
3+
---
4+
5+
add E-mode banner to Account page

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ import { Link } from 'react-router';
99

1010
import { useFormatTo } from 'hooks/useFormatTo';
1111

12-
import { Spinner } from '@venusprotocol/ui';
12+
import { Spinner, cn } from '@venusprotocol/ui';
13+
import { useBreakpointUp } from 'hooks/responsive';
1314
import { Card } from '../Card';
1415
import Head from './Head';
1516
import TableCards from './TableCards';
@@ -39,6 +40,10 @@ export function Table<R>({
3940
const styles = useStyles();
4041
const { formatTo } = useFormatTo();
4142

43+
// The fallback breakpoint is just to satisfy TS here, it is not actually used
44+
const _isBreakpointUp = useBreakpointUp(breakpoint || 'xxl');
45+
const isBreakpointUp = !!breakpoint && _isBreakpointUp;
46+
4247
const [order, setOrder] = useState<Order<R> | undefined>(initialOrder);
4348

4449
const onRequestOrder = (column: TableColumn<R>) => {
@@ -67,21 +72,24 @@ export function Table<R>({
6772
return (
6873
<Card css={styles.getRoot({ breakpoint })} {...otherProps}>
6974
{title && (
70-
<h4 css={styles.getTitle({ breakpoint })} className="text-lg">
75+
<div css={styles.getTitle({ breakpoint })} className="text-lg h-8">
7176
{title}
72-
</h4>
77+
</div>
7378
)}
7479

7580
{!!header && (
76-
<div css={styles.getHeader({ breakpoint })} className="mb-6 sm:mb-0">
81+
<div
82+
css={styles.getHeader({ breakpoint })}
83+
className={cn('mb-4', isBreakpointUp && 'mb-0')}
84+
>
7785
{header}
7886
</div>
7987
)}
8088

8189
{data.length > 0 || !placeholder ? (
8290
<>
8391
<MuiTableContainer css={styles.getTableContainer({ breakpoint })}>
84-
<MuiTable css={styles.table({ minWidth: minWidth ?? '0' })} aria-label={title}>
92+
<MuiTable css={styles.table({ minWidth: minWidth ?? '0' })}>
8593
<Head
8694
columns={columns}
8795
orderBy={order?.orderBy}

‎apps/evm/src/components/Table/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export interface TableColumn<R> {
1111
align?: 'left' | 'center' | 'right';
1212
}
1313

14-
export interface TableProps<R> extends CardProps {
14+
export interface TableProps<R> extends Omit<CardProps, 'title'> {
1515
data: R[];
1616
rowKeyExtractor: (row: R) => string;
1717
columns: TableColumn<R>[];
@@ -27,7 +27,7 @@ export interface TableProps<R> extends CardProps {
2727
isFetching?: boolean;
2828
rowOnClick?: (e: React.MouseEvent<HTMLDivElement>, row: R) => void;
2929
getRowHref?: (row: R) => string;
30-
title?: string;
30+
title?: React.ReactNode | string;
3131
header?: React.ReactNode;
3232
placeholder?: React.ReactNode;
3333
selectVariant?: SelectProps['variant'];

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

Lines changed: 54 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export const MarketTable: React.FC<MarketTableProps> = ({
4343
title,
4444
controls = true,
4545
isFetching,
46+
header,
4647
...otherTableProps
4748
}) => {
4849
const styles = useStyles();
@@ -169,52 +170,62 @@ export const MarketTable: React.FC<MarketTableProps> = ({
169170
rowKeyExtractor={row => `market-table-row-${marketType}-${row.vToken.address}`}
170171
initialOrder={formattedInitialOrder}
171172
header={
172-
<div className="space-y-6">
173-
{controls && (
174-
<div className={cn('space-y-6 sm:space-y-0 sm:-mx-6')}>
175-
<div
176-
className={cn(
177-
'space-y-6 sm:space-y-0 sm:mb-6 sm:px-6 sm:flex sm:items-center sm:justify-between',
178-
isBreakpointUp && 'sm:mb-0 sm:py-4',
173+
(header || controls || columnKeys.includes('collateral')) && (
174+
<div className={cn('space-y-4')}>
175+
{(controls || header) && (
176+
<div className={cn('flow-root space-y-4', isBreakpointUp && 'space-y-0')}>
177+
{header}
178+
179+
{controls && (
180+
<div className={cn(isBreakpointUp && '-mx-6')}>
181+
<div
182+
className={cn(
183+
'space-y-4 sm:space-y-0 sm:flex sm:items-center sm:justify-between',
184+
isBreakpointUp && 'sm:mb-0 px-6 py-4',
185+
)}
186+
>
187+
<div className="flex items-center gap-x-4">
188+
{pausedAssetsExist && (
189+
<Toggle
190+
onChange={() =>
191+
setUserChainSettings({ showPausedAssets: !showPausedAssets })
192+
}
193+
value={showPausedAssets}
194+
label={t('marketTable.pausedAssetsToggle.label')}
195+
/>
196+
)}
197+
198+
{!!accountAddress && userHasAssets && (
199+
<Toggle
200+
onChange={() =>
201+
setUserChainSettings({ showUserAssetsOnly: !showUserAssetsOnly })
202+
}
203+
value={showUserAssetsOnly}
204+
label={t('marketTable.userAssetsOnlyToggle.label')}
205+
/>
206+
)}
207+
</div>
208+
209+
<TextField
210+
className="lg:w-[300px]"
211+
isSmall
212+
value={searchValue}
213+
onChange={handleSearchInputChange}
214+
placeholder={t('marketTable.searchInput.placeholder')}
215+
leftIconSrc="magnifier"
216+
variant="secondary"
217+
/>
218+
</div>
219+
220+
{isBreakpointUp && <Delimiter />}
221+
</div>
179222
)}
180-
>
181-
<div className="flex items-center gap-x-4">
182-
{pausedAssetsExist && (
183-
<Toggle
184-
onChange={() => setUserChainSettings({ showPausedAssets: !showPausedAssets })}
185-
value={showPausedAssets}
186-
label={t('marketTable.pausedAssetsToggle.label')}
187-
/>
188-
)}
189-
190-
{!!accountAddress && userHasAssets && (
191-
<Toggle
192-
onChange={() =>
193-
setUserChainSettings({ showUserAssetsOnly: !showUserAssetsOnly })
194-
}
195-
value={showUserAssetsOnly}
196-
label={t('marketTable.userAssetsOnlyToggle.label')}
197-
/>
198-
)}
199-
</div>
200-
201-
<TextField
202-
className="lg:w-[300px]"
203-
isSmall
204-
value={searchValue}
205-
onChange={handleSearchInputChange}
206-
placeholder={t('marketTable.searchInput.placeholder')}
207-
leftIconSrc="magnifier"
208-
variant="secondary"
209-
/>
210223
</div>
224+
)}
211225

212-
{isBreakpointUp && <Delimiter />}
213-
</div>
214-
)}
215-
216-
{columnKeys.includes('collateral') && <SwitchChainNotice />}
217-
</div>
226+
{columnKeys.includes('collateral') && <SwitchChainNotice />}
227+
</div>
228+
)
218229
}
219230
placeholder={
220231
controls &&

‎apps/evm/src/libs/translations/translations/en.json‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@
33
"circularGradient": "Circular gradient",
44
"marketBreakdown": {
55
"tables": {
6-
"borrowTableTitle": "Borrowed assets",
7-
"supplyTableTitle": "Supplied assets",
6+
"borrowTableTitle": "Borrowed",
7+
"eModeHeader": {
8+
"illustrationAltText": "E-mode illustration",
9+
"title": "E-mode: <UnderlinedText>{{eModeGroupName}}</UnderlinedText>"
10+
},
11+
"supplyTableTitle": "Supplied",
812
"tabletBorrowTabTitle": "Borrowed",
913
"tabletSupplyTabTitle": "Supplied",
1014
"tabletTitle": "Assets"
@@ -690,7 +694,7 @@
690694
"repayButtonLabel": "Repay",
691695
"title": "Your positions"
692696
},
693-
"tooltip": "You can't enable this e-mode group because you have borrow positions with assets that don't belong in that group. <Link>Show my positions</Link>"
697+
"tooltip": "You can't enable this E-mode group because you have borrow positions with assets that don't belong in that group. <Link>Show my positions</Link>"
694698
},
695699
"enableButtonLabel": "Enable",
696700
"enabledButtonLabel": "Enabled",

‎apps/evm/src/pages/Account/NewPage/Pools/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`Pools > displays content correctly 1`] = `"VenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Supplied assetsAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowed assetsAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;
3+
exports[`Pools > displays content correctly 1`] = `"VenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;
44

55
exports[`Pools > displays placeholder when there are no pools to display 1`] = `"No supply or borrow positions yetYour pool positions will appear hereBrowse"`;

‎apps/evm/src/pages/Account/NewPage/__tests__/__snapshots__/index.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`Account > displays content correctly 1`] = `"Net worth$1.23M30D6M1YToday's change+$1.23M99.99%Absolute performance+$1.23MSummaryNet APY0%Daily earnings< $0.01Total supply$1.23MTotal borrow$123.33Total vault stake$233Minted VAI$1KPoolsVaultsVenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Supplied assetsAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowed assetsAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;
3+
exports[`Account > displays content correctly 1`] = `"Net worth$1.23M30D6M1YToday's change+$1.23M99.99%Absolute performance+$1.23MSummaryNet APY0%Daily earnings< $0.01Total supply$1.23MTotal borrow$123.33Total vault stake$233Minted VAI$1KPoolsVaultsVenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;

‎apps/evm/src/pages/Account/OldPage/AccountBreakdown/__snapshots__/index.spec.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3-
exports[`Account > displays page when there are positions 1`] = `"SummaryNet APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33$233VaultsStakedAssetAPRStakesorted descendingXVS12.92%233 XVSSort byStakeXVSAPR12.92%Stake233 XVSPoolsVenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Supplied assetsAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowed assetsAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;
3+
exports[`Account > displays page when there are positions 1`] = `"SummaryNet APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33Total vault stake$233Net APY0%Daily earnings$0.14Total supply$1.23MTotal borrow$123.33$233VaultsStakedAssetAPRStakesorted descendingXVS12.92%233 XVSSort byStakeXVSAPR12.92%Stake233 XVSPoolsVenusMetaverseHealth factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.Health factor15.62Net APY0%Daily earnings$0.03Total supply$1.23MTotal borrow$123.33Borrow limit used:6.4%Limit:$1.92K.SuppliedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99CollateralBorrowedAssetAPY Balancesorted descending% of limitBUSD-5.82%50 BUSD$500%USDT-5.50%-6.51%40 USDT$400%Sort byBorrow balanceBUSDAPY -5.82%Balance50 BUSD$50% of limit0%USDTAPY -5.50%-6.51%Balance40 USDT$40% of limit0%AssetsSuppliedBorrowedAssetAPY Balancesorted descendingCollateralXVS0.17%90 XVS$115.08USDC5.99%100 USDC$99.99Sort bySupply balanceXVSAPY 0.17%Balance90 XVS$115.08CollateralUSDCAPY 5.99%Balance100 USDC$99.99Collateral"`;

‎apps/evm/src/pages/Account/PoolPositions/Tables/EModeHeader/index.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { cn } from '@venusprotocol/ui';
2+
import type { Address } from 'viem';
3+
4+
import lightningIllustrationSrc from 'assets/img/lightning.svg';
5+
import { routes } from 'constants/routing';
6+
import { Link } from 'containers/Link';
7+
import { useFormatTo } from 'hooks/useFormatTo';
8+
import { TAB_PARAM_KEY } from 'hooks/useTabs';
9+
import { useTranslation } from 'libs/translations';
10+
11+
export interface EModeHeaderProps {
12+
eModeGroupName: string;
13+
poolComptrollerContractAddress: Address;
14+
className?: string;
15+
}
16+
17+
export const EModeHeader: React.FC<EModeHeaderProps> = ({
18+
eModeGroupName,
19+
poolComptrollerContractAddress,
20+
className,
21+
}) => {
22+
const { t, Trans } = useTranslation();
23+
const { formatTo } = useFormatTo();
24+
const to = formatTo({
25+
to: {
26+
pathname: routes.pool.path.replace(':poolComptrollerAddress', poolComptrollerContractAddress),
27+
search: `${TAB_PARAM_KEY}=e-mode`,
28+
},
29+
});
30+
31+
console.log('rendered');
32+
33+
return (
34+
<Link
35+
className={cn(
36+
'flex items-center justify-center rounded-full border border-lightGrey bg-cards h-8 px-2 text-offWhite transition-colors duration-[250ms] hover:no-underline hover:bg-lightGrey',
37+
className,
38+
)}
39+
to={to}
40+
>
41+
<div className="flex items-center gap-x-1">
42+
<div className={cn('w-5 h-5 rounded-full flex items-center justify-center bg-lightGrey')}>
43+
<img
44+
src={lightningIllustrationSrc}
45+
className="h-3"
46+
alt={t('account.marketBreakdown.tables.eModeHeader.illustrationAltText')}
47+
/>
48+
</div>
49+
50+
<p className="text-sm font-semibold">
51+
<Trans
52+
i18nKey="account.marketBreakdown.tables.eModeHeader.title"
53+
values={{
54+
eModeGroupName,
55+
}}
56+
components={{
57+
UnderlinedText: <span className="underline" />,
58+
}}
59+
/>
60+
</p>
61+
</div>
62+
</Link>
63+
);
64+
};

0 commit comments

Comments
 (0)