Skip to content

Commit f5ab817

Browse files
cuzz-venuscuzz-venus
authored
Merge pull request #5581 from VenusProtocol/feat/landing-page
feat: landing page style update
2 parents 35c12a6 + 643d22c commit f5ab817

19 files changed

Lines changed: 181 additions & 153 deletions

File tree

‎.changeset/quiet-peaches-brake.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+
feat: landing page ui update

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

Lines changed: 28 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const Dropdown = ({
2121
variant = 'primary',
2222
menuTitle,
2323
menuPosition = 'left',
24+
triggerOnHover = false,
2425
}: DropdownProps) => {
2526
const { t } = useTranslation();
2627
const [isDropdownOpened, setIsDropdownOpened] = useState(false);
@@ -37,9 +38,13 @@ export const Dropdown = ({
3738
</div>
3839
)}
3940

40-
<div className="relative w-full">
41-
{/* MD and up backdrop */}
42-
{isDropdownOpened && (
41+
<div
42+
className="relative w-full"
43+
onMouseEnter={triggerOnHover ? () => setIsDropdownOpened(true) : undefined}
44+
onMouseLeave={triggerOnHover ? () => setIsDropdownOpened(false) : undefined}
45+
>
46+
{/* MD and up backdrop — click mode only */}
47+
{isDropdownOpened && !triggerOnHover && (
4348
<div
4449
className="fixed bottom-0 left-0 right-0 top-0 hidden md:block z-50"
4550
onClick={() => setIsDropdownOpened(false)}
@@ -52,25 +57,28 @@ export const Dropdown = ({
5257
{isDropdownOpened && (
5358
<div className="relative z-50 hidden min-w-full md:block">
5459
<div
55-
className={cn(
56-
'border-lightGrey bg-cards absolute top-2 min-w-full overflow-hidden border shadow',
57-
menuPosition === 'right' && 'right-0',
58-
variant === 'quaternary' ? 'rounded-xl' : 'rounded-lg',
59-
menuClassName,
60-
)}
60+
className={cn('pt-2 absolute min-w-full', menuPosition === 'right' && 'right-0')}
6161
>
62-
{!!menuTitle && (
63-
<div
64-
className={cn(
65-
'text-grey w-full py-3 text-xs',
66-
variant === 'primary' ? 'px-3 sm:px-4' : 'px-3',
67-
)}
68-
>
69-
{menuTitle}
70-
</div>
71-
)}
62+
<div
63+
className={cn(
64+
'border-lightGrey bg-cards overflow-hidden border shadow',
65+
variant === 'quaternary' ? 'rounded-xl' : 'rounded-lg',
66+
menuClassName,
67+
)}
68+
>
69+
{!!menuTitle && (
70+
<div
71+
className={cn(
72+
'text-grey w-full py-3 text-xs',
73+
variant === 'primary' ? 'px-3 sm:px-4' : 'px-3',
74+
)}
75+
>
76+
{menuTitle}
77+
</div>
78+
)}
7279

73-
{optionsDom({ setIsDropdownOpened, optionClassName })}
80+
{optionsDom({ setIsDropdownOpened, optionClassName })}
81+
</div>
7482
</div>
7583
</div>
7684
)}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ export interface DropdownProps {
2222
menuTitle?: string;
2323
menuPosition?: 'left' | 'right';
2424
menuClassName?: string;
25+
triggerOnHover?: boolean;
2526
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export function TableCards<R>({
7171
<div className={cn(!breakpoint && 'hidden', breakpoint && `block ${breakpoint}:hidden`)}>
7272
{controls && selectOptions.length > 0 && (
7373
<Select
74+
className="max-sm:hidden"
7475
label={t('table.cardsSelect.label')}
7576
placeLabelToLeft
7677
options={selectOptions}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Controls: React.FC<ControlsProps> = ({
3434
<div className="@container/controls">
3535
<div className="flex flex-col gap-y-3 @2xl:items-center @2xl:flex-row @2xl:justify-between">
3636
<TextField
37-
size="xs"
37+
size="sm"
3838
value={searchValue}
3939
onChange={handleSearchInputChange}
4040
placeholder={searchInputPlaceholder}

‎apps/evm/src/containers/Layout/NavBar/MenuItem/index.tsx‎

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@ export interface MenuItemProps {
1515
}
1616

1717
export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
18-
const [isSubMenuOpen, setIsSubMenuOpen] = useState(false);
18+
const [isSubMenuOpen, setIsSubMenuOpen] = useState(
19+
'items' in item ? !!item.defaultOpenOnMobile : false,
20+
);
1921
const { t } = useTranslation();
2022
const { pathname } = useLocation();
2123

@@ -37,14 +39,6 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
3739

3840
return 'items' in item ? (
3941
<div>
40-
{/* XL and up backdrop */}
41-
{isSubMenuOpen && (
42-
<div
43-
className="fixed bottom-0 left-0 right-0 top-0 hidden z-50 xl:block"
44-
onClick={() => setIsSubMenuOpen(false)}
45-
/>
46-
)}
47-
4842
{/* Mobile/tablet submenu */}
4943
<div className="xl:hidden">
5044
<button
@@ -68,12 +62,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
6862
{...item}
6963
items={item.items.map(i => ({
7064
...i,
71-
onClick: () => {
72-
// Close submenu
73-
setIsSubMenuOpen(false);
74-
75-
onClick();
76-
},
65+
onClick,
7766
}))}
7867
/>
7968
</AccordionAnimatedContent>
@@ -82,7 +71,8 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
8271
{/* XL and up dropdown */}
8372
<Dropdown
8473
className="hidden xl:block"
85-
menuClassName="top-7 shadow-none border-0 bg-background-active"
74+
menuClassName="mt-5 shadow-none border-0 bg-background-active"
75+
triggerOnHover
8676
optionsDom={({ setIsDropdownOpened }) => {
8777
const items: SubMenuItemProps[] = item.items.map(i => ({
8878
...i,
@@ -97,19 +87,18 @@ export const MenuItem: React.FC<MenuItemProps> = ({ item, onClick }) => {
9787
return <SubMenuContent {...item} items={items} />;
9888
}}
9989
>
100-
{({ isDropdownOpened, handleToggleDropdown }) => (
90+
{({ isDropdownOpened }) => (
10191
<button
10292
className={cn(
10393
sharedContainerClassName,
10494
'flex items-center justify-between cursor-pointer xl:gap-x-2',
10595
isDropdownOpened && 'xl:text-white xl:bg-dark-blue-active',
10696
)}
10797
type="button"
108-
onClick={handleToggleDropdown}
10998
>
11099
<span>{item.label}</span>
111100

112-
<Icon name="chevronDown" className={cn('size-3', isSubMenuOpen && 'rotate-180')} />
101+
<Icon name="chevronDown" className={cn('size-3', isDropdownOpened && 'rotate-180')} />
113102
</button>
114103
)}
115104
</Dropdown>

‎apps/evm/src/containers/Layout/NavBar/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@ export interface SubMenu {
1414
label: string;
1515
items: MenuItem[];
1616
variant?: 'primary' | 'secondary';
17+
defaultOpenOnMobile?: boolean;
1718
}

‎apps/evm/src/containers/Layout/NavBar/useMenuItems/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const useMenuItems = () => {
3030
label: t('layout.menu.markets.label'),
3131
to: marketsPagePath,
3232
variant: 'secondary',
33+
defaultOpenOnMobile: true,
3334
items: [
3435
{
3536
to: marketsPagePath,

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
formatCentsToReadableValue,
2525
formatPercentageToReadableValue,
2626
formatTokensToReadableValue,
27-
getCombinedDistributionApys,
27+
getBestDistributionApys,
2828
isAssetPaused,
2929
isCollateralActionDisabled,
3030
} from 'utilities';
@@ -345,21 +345,21 @@ export const useColumns = ({
345345
: (rowA, rowB, direction) => {
346346
if (column === 'borrowApy' || column === 'labeledBorrowApy') {
347347
const roaABorrowApy = rowA.borrowApyPercentage.minus(
348-
getCombinedDistributionApys({ asset: rowA }).totalBorrowApyBoostPercentage,
348+
getBestDistributionApys({ asset: rowA }).totalBorrowApyBoostPercentage,
349349
);
350350
const roaBBorrowApy = rowB.borrowApyPercentage.minus(
351-
getCombinedDistributionApys({ asset: rowB }).totalBorrowApyBoostPercentage,
351+
getBestDistributionApys({ asset: rowB }).totalBorrowApyBoostPercentage,
352352
);
353353

354354
return compareBigNumbers(roaABorrowApy, roaBBorrowApy, direction);
355355
}
356356

357357
if (column === 'supplyApy' || column === 'labeledSupplyApy') {
358358
const roaASupplyApy = rowA.supplyApyPercentage.plus(
359-
getCombinedDistributionApys({ asset: rowA }).totalSupplyApyBoostPercentage,
359+
getBestDistributionApys({ asset: rowA }).totalSupplyApyBoostPercentage,
360360
);
361361
const roaBSupplyApy = rowB.supplyApyPercentage.plus(
362-
getCombinedDistributionApys({ asset: rowB }).totalSupplyApyBoostPercentage,
362+
getBestDistributionApys({ asset: rowB }).totalSupplyApyBoostPercentage,
363363
);
364364

365365
return compareBigNumbers(roaASupplyApy, roaBSupplyApy, direction);

‎apps/evm/src/pages/Landing/Hero/HeroTabs/TabContent/Earnings/BarChart/index.tsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { cn, theme } from '@venusprotocol/ui';
2+
import { useState } from 'react';
23
import { Bar, BarChart as RCBarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
34

45
import { ChartYAxisTick, Icon } from 'components';
@@ -9,6 +10,7 @@ import type { CompoundedAmountDataPoint } from '../../types';
910
const X_AXIS_DATA_KEY: keyof CompoundedAmountDataPoint = 'months';
1011
const Y_AXIS_DATA_KEY: keyof CompoundedAmountDataPoint = 'earningsCents';
1112
const INTERVAL = 6;
13+
const HIGHLIGHTED_MONTH_INDEX = 9;
1214

1315
export interface ChartProps {
1416
data: CompoundedAmountDataPoint[];
@@ -18,8 +20,13 @@ export interface ChartProps {
1820
export const BarChart: React.FC<ChartProps> = ({ className, data }) => {
1921
const { t } = useTranslation();
2022

23+
// Bumping this key on mouseLeave re-mounts the Tooltip so its `defaultIndex` is re-applied —
24+
// otherwise Recharts only honors `defaultIndex` on first mount, and leaving the chart clears
25+
// the active tooltip without restoring the default.
26+
const [tooltipResetKey, setTooltipResetKey] = useState(0);
27+
2128
return (
22-
<div className={cn('w-full h-47.5', className)}>
29+
<div className={cn('w-full h-32', className)}>
2330
<ResponsiveContainer>
2431
<RCBarChart
2532
margin={{
@@ -29,6 +36,7 @@ export const BarChart: React.FC<ChartProps> = ({ className, data }) => {
2936
}}
3037
data={data}
3138
barGap={'8%'}
39+
onMouseLeave={() => setTooltipResetKey(k => k + 1)}
3240
>
3341
<Bar
3442
dataKey={Y_AXIS_DATA_KEY}
@@ -55,6 +63,8 @@ export const BarChart: React.FC<ChartProps> = ({ className, data }) => {
5563
axisLine={false}
5664
tickLine={false}
5765
hide={true}
66+
width={0}
67+
domain={[0, 'dataMax']}
5868
tickMargin={8}
5969
tick={({ payload, y }) => (
6070
<ChartYAxisTick
@@ -70,6 +80,8 @@ export const BarChart: React.FC<ChartProps> = ({ className, data }) => {
7080
/>
7181

7282
<Tooltip
83+
key={tooltipResetKey}
84+
defaultIndex={HIGHLIGHTED_MONTH_INDEX}
7385
isAnimationActive={false}
7486
cursor={{ stroke: 'transparent', fill: 'transparent' }}
7587
content={({ payload }) => {

0 commit comments

Comments
 (0)