Skip to content

Commit 5216f11

Browse files
therealemjytherealemjy
committed
feat: add Boost tab to Market page
1 parent 9ddded0 commit 5216f11

File tree

12 files changed

+160
-88
lines changed

12 files changed

+160
-88
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { TertiaryButton } from '@venusprotocol/ui';
33
import { useStyles } from './styles';
44

55
export interface ButtonGroupProps {
6-
buttonLabels: string[];
6+
buttonLabels: React.ReactNode[];
77
activeButtonIndex: number;
88
onButtonClick: (newIndex: number) => void;
99
fullWidth?: boolean;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,4 @@ export { default as transactionOut } from './transactionOut';
7272
export { default as transactionCollateral } from './transactionCollateral';
7373
export { default as transactionLink } from './transactionLink';
7474
export { default as eMode } from './eMode';
75+
export { default as rocket } from './rocket';

‎apps/evm/src/components/Icon/icons/rocket.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 SvgRocket = (props: SVGProps<SVGSVGElement>) => (
4+
<svg
5+
width="16"
6+
height="16"
7+
viewBox="0 0 16 16"
8+
fill="currentColor"
9+
xmlns="http://www.w3.org/2000/svg"
10+
{...props}
11+
>
12+
<path
13+
d="M5.89655 3.169C4.22354 5.04704 3.07539 7.74518 2.96878 7.99942L0 6.72825L3.32142 3.40683C3.70687 3.02138 4.26454 2.84916 4.80581 2.95578L5.89655 3.169ZM7.52036 11.9031C7.52036 11.9031 10.5875 10.632 12.3508 8.86873C16.7793 4.44016 16.0412 0.979324 15.8034 0.200225C15.0243 -0.0458066 11.5635 -0.775699 7.13491 3.65286C5.37168 5.41609 4.10052 8.48328 4.10052 8.48328L7.52036 11.9031ZM12.8346 10.1071C10.9566 11.7801 8.25845 12.9282 8.00422 13.0349L9.27538 16.0036L12.5968 12.6822C12.9822 12.2968 13.1545 11.7391 13.0479 11.1978L12.8346 10.1071ZM5.74073 12.7232C5.74073 13.4039 5.46189 14.019 5.01904 14.4618C4.05131 15.4296 0 16.0036 0 16.0036C0 16.0036 0.574073 11.9523 1.5418 10.9846C1.98465 10.5417 2.59973 10.2629 3.28042 10.2629C4.64179 10.2629 5.74073 11.3618 5.74073 12.7232ZM9.02115 5.34228C9.02115 4.44016 9.75924 3.70207 10.6614 3.70207C11.5635 3.70207 12.3016 4.44016 12.3016 5.34228C12.3016 6.24439 11.5635 6.98249 10.6614 6.98249C9.75924 6.98249 9.02115 6.24439 9.02115 5.34228Z"
14+
fill="currentColor"
15+
/>
16+
</svg>
17+
);
18+
19+
export default SvgRocket;

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

Lines changed: 54 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
11
/** @jsxImportSource @emotion/react */
2+
import { cn } from '@venusprotocol/ui';
3+
import { Delimiter } from 'components';
24
import { type Tab, type TabNavType, useTabs } from 'hooks/useTabs';
35
import { ButtonGroup } from '../ButtonGroup';
46
import { useStyles } from './styles';
57

68
export interface TabsProps {
79
tabs: Tab[];
10+
fullWidth?: boolean;
11+
variant?: 'primary' | 'secondary';
812
onTabChange?: (newIndex: number) => void;
913
navType?: TabNavType;
1014
initialActiveTabId?: string;
1115
className?: string;
16+
headerClassName?: string;
1217
}
1318

1419
export const Tabs = ({
1520
tabs,
21+
variant = 'primary',
1622
onTabChange,
1723
initialActiveTabId,
1824
className,
25+
headerClassName,
1926
navType = 'state',
27+
fullWidth = true,
2028
}: TabsProps) => {
2129
const styles = useStyles();
2230
const { activeTab, setActiveTab } = useTabs({
@@ -36,16 +44,52 @@ export const Tabs = ({
3644
};
3745

3846
return (
39-
<div className={className}>
40-
<ButtonGroup
41-
buttonLabels={tabs.map(({ title }) => title)}
42-
css={styles.buttonsContainer}
43-
activeButtonIndex={tabs.findIndex(tab => activeTab.id === tab.id)}
44-
onButtonClick={handleChange}
45-
fullWidth
46-
/>
47-
48-
{activeTab.content}
47+
<div className={cn('space-y-6', className)}>
48+
{variant === 'primary' ? (
49+
<ButtonGroup
50+
buttonLabels={tabs.map(({ title }) => title)}
51+
css={styles.buttonsContainer}
52+
className={headerClassName}
53+
activeButtonIndex={tabs.findIndex(tab => activeTab.id === tab.id)}
54+
onButtonClick={handleChange}
55+
fullWidth={fullWidth}
56+
/>
57+
) : (
58+
<div className={cn('relative text-sm', headerClassName)}>
59+
<div
60+
className={cn(
61+
'flex gap-x-4 sm:gap-x-6',
62+
fullWidth
63+
? 'justify-between'
64+
: 'scrollbar-hidden overflow-y-auto md:overflow-y-visible',
65+
)}
66+
>
67+
{tabs.map((tab, index) => (
68+
<button onClick={() => handleChange(index)} type="button" key={tab.id}>
69+
<p
70+
className={cn(
71+
'mb-2 font-semibold whitespace-nowrap',
72+
activeTab.id === tab.id ? 'text-offWhite' : 'text-grey',
73+
)}
74+
>
75+
{tab.title}
76+
</p>
77+
78+
<div
79+
className={cn(
80+
'w-full h-[5px] rounded-t-[2px]',
81+
activeTab.id === tab.id ? 'bg-blue' : 'bg-transparent',
82+
)}
83+
/>
84+
</button>
85+
))}
86+
</div>
87+
88+
<Delimiter className="-mt-[1px] -z-[1]" />
89+
</div>
90+
)}
91+
92+
<div>{activeTab.content}</div>
4993
</div>
5094
);
5195
};

‎apps/evm/src/components/Tabs/styles.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ export const useStyles = () => {
88
buttonsContainer: css`
99
display: flex;
1010
align-items: center;
11-
margin-bottom: ${theme.spacing(6)};
1211
width: 100%;
1312
1413
> button {

‎apps/evm/src/hooks/useIsFeatureEnabled/index.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,16 @@ export const featureFlags = {
141141
ChainId.UNICHAIN_SEPOLIA,
142142
],
143143
transactionHistory: [ChainId.BSC_MAINNET, ChainId.ETHEREUM, ChainId.UNICHAIN_MAINNET],
144+
leveragedPositions: [
145+
ChainId.BSC_TESTNET,
146+
ChainId.OPBNB_TESTNET,
147+
ChainId.SEPOLIA,
148+
ChainId.ARBITRUM_SEPOLIA,
149+
ChainId.ZKSYNC_SEPOLIA,
150+
ChainId.OPTIMISM_SEPOLIA,
151+
ChainId.BASE_SEPOLIA,
152+
ChainId.UNICHAIN_SEPOLIA,
153+
],
144154
};
145155

146156
export type FeatureFlag = keyof typeof featureFlags;

‎apps/evm/src/hooks/useTabs/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export interface UseTabsInput<T extends Tab> {
1111

1212
export interface Tab extends Record<string, any> {
1313
id: string;
14-
title: string;
14+
title: React.ReactNode;
1515
content: React.ReactNode;
1616
}
1717

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -239,11 +239,11 @@
239239
},
240240
"assetInfo": {
241241
"borrowApy": "Borrow APY",
242-
"intrinsicApy": "Intrinsic APY ({{tokenSymbol}})",
243242
"distributionApy": "Distribution APY ({{tokenSymbol}})",
244243
"distributionTooltip": "Distribution rewards are initiated and implemented by the decentralized Venus community. The Venus protocol does not guarantee them and accepts no liability.",
245-
"intrinsicApyTooltip": "APY earned directly from the asset itself (e.g. staking or external rewards), separate from Venus lending yield. The Venus protocol does not guarantee them and accepts no liability.",
246244
"externalDistributionApy": "{{description}} APY ({{tokenSymbol}})",
245+
"intrinsicApy": "Intrinsic APY ({{tokenSymbol}})",
246+
"intrinsicApyTooltip": "APY earned directly from the asset itself (e.g. staking or external rewards), separate from Venus lending yield. The Venus protocol does not guarantee them and accepts no liability.",
247247
"primeApy": "Prime APY ({{tokenSymbol}})",
248248
"supplyApy": "Supply APY",
249249
"totalApy": {
@@ -638,6 +638,8 @@
638638
},
639639
"operationForm": {
640640
"availableAmount": "Available",
641+
"boostTabAltText": "Rocket icon",
642+
"boostTabTitle": "Boost",
641643
"borrowTabTitle": "Borrow",
642644
"error": {
643645
"borrowCapReached": "The borrow cap of {{assetBorrowCap}} has been reached for this pool. You can not borrow from this market anymore until loans are repaid or its borrow cap is increased.",

‎apps/evm/src/pages/Account/Tabs/index.tsx‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1+
import { cn } from '@venusprotocol/ui';
2+
13
import { useGetPools, useGetTokenUsdPrice, useGetVaiRepayApr, useGetVaults } from 'clients/api';
2-
import { Page, Spinner } from 'components';
4+
import { Page, Spinner, Tabs } from 'components';
35
import { Redirect } from 'containers/Redirect';
46
import { useGetHomePagePath } from 'hooks/useGetHomePagePath';
57
import { useGetUserPrimeInfo } from 'hooks/useGetUserPrimeInfo';
@@ -14,7 +16,6 @@ import { Pools } from './Pools';
1416
import { PrimeBanner } from './PrimeBanner';
1517
import { Settings } from './Settings';
1618
import { Summary } from './Summary';
17-
import { Tabs } from './Tabs';
1819
import { Transactions } from './Transactions';
1920
import { Vaults } from './Vaults';
2021
import { useExtractData } from './useExtractData';
@@ -171,7 +172,14 @@ export const Account: React.FC = () => {
171172
/>
172173
</div>
173174

174-
<Tabs tabs={tabs} />
175+
<Tabs
176+
tabs={tabs}
177+
className="lg:space-y-8"
178+
headerClassName={cn('text-md sm:text-lg')}
179+
navType="searchParam"
180+
variant="secondary"
181+
fullWidth={false}
182+
/>
175183
</Page>
176184
);
177185
};

0 commit comments

Comments
 (0)