Skip to content

Commit e1ca89a

Browse files
therealemjytherealemjy
committed
feat: add ad Banner component
1 parent 4490ee0 commit e1ca89a

File tree

23 files changed

+317
-626
lines changed

23 files changed

+317
-626
lines changed

‎.changeset/sweet-lands-mate.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 Ad banner to Pool page

‎apps/evm/src/components/Carousel/CarouselItem/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const CarouselItem = forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
77
ref={ref}
88
role="group"
99
aria-roledescription="slide"
10-
className={cn('min-w-0 shrink-0 grow-0 basis-full', 'pl-4', className)}
10+
className={cn('min-w-0 shrink-0 grow-0 basis-full pl-4', className)}
1111
{...props}
1212
/>
1313
),

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,24 +60,24 @@ export const Carousel = forwardRef<
6060
return (
6161
<div
6262
ref={ref}
63-
className={cn('relative select-none', className)}
63+
className={cn('relative select-none overflow-hidden', className)}
6464
role="region"
6565
aria-roledescription="carousel"
6666
{...props}
6767
>
68-
<div ref={carouselRef} className="overflow-hidden">
68+
<div ref={carouselRef}>
6969
<div className="flex -ml-4">{children}</div>
7070
</div>
7171

7272
{slidesCount > 1 && (
73-
<div className="flex mx-auto gap-3 w-max mt-4">
73+
<div className="flex mx-auto gap-x-[6px] w-max mt-3">
7474
{Array.from({ length: slidesCount }).map((_s, i) => (
7575
<button
7676
type="button"
7777
onClick={() => api?.scrollTo(i)}
7878
key={i}
7979
className={cn(
80-
'w-2 h-2 rounded-full',
80+
'size-[6px] rounded-full',
8181
i === activeSlideIndex ? 'bg-offWhite' : 'bg-offWhite/30',
8282
)}
8383
/>

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

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

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export * from './AccountHealthBar';
5555
export * from './AreaChart';
5656
export * from './ChartTooltipContent';
5757
export * from './ChartYAxisTick';
58-
export * from './EModeBanner';
5958
export * from './InfoIcon';
6059
export * from './EModeIcon';
6160
export * from './MarketStatus';

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { useAccountAddress } from 'libs/wallet';
44
import type { Asset, Pool, TokenAction, VToken } from 'types';
55
import { areTokensEqual } from 'utilities';
66

7-
import { EModeButton } from 'components/EModeBanner/EModeButton';
87
import { useTranslation } from 'libs/translations';
8+
import { EModeButton } from 'pages/Market/OperationForm/BorrowForm/EModeBanner/EModeButton';
99
import type { Address } from 'viem';
1010
import DisabledActionNotice from './DisabledActionNotice';
1111

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,9 @@
146146
"limit": "Limit:",
147147
"tooltip": "Borrow balance:<LineBreak/>{{borrowBalance}} ({{borrowLimitUsedPercentage}} of your borrow limit)<LineBreak/><LineBreak/>Safe borrow limit:<LineBreak/>{{safeBorrowLimit}} ({{safeBorrowLimitPercentage}}% of your borrow limit)"
148148
},
149+
"adBanner": {
150+
"learnMore": "Learn more"
151+
},
149152
"announcements": {
150153
"bethUpdate": {
151154
"description": "Binance paused BETH withdrawals on 2023-04-26. We recommend users reduce their exposure to BETH on Venus. Borrowing has been paused. Convert BETH to WBETH on-chain at a 1:1 ratio <Link>here</Link>."
@@ -279,6 +282,16 @@
279282
"modalTitle": "{{ poolName }} tokens",
280283
"supplyDescription": "Supplying {{tokenSymbol}} to the {{poolName}} pool will enable you to borrow tokens from this pool exclusively. <Button>Show all markets</Button>"
281284
},
285+
"binanceWalletBanner": {
286+
"binanceLogoAltText": "Binance logo",
287+
"description": "Borrow USDT and share <Bold>$400,000</Bold> in rewards!",
288+
"title": "Venus is live on Binance Wallet Earn."
289+
},
290+
"boostBanner": {
291+
"description": "One-click leverage to boost your yield <White>up to 5x</White>.",
292+
"rocketAltText": "Rocket illustration",
293+
"title": "Boost is available now!"
294+
},
282295
"breadcrumbs": {
283296
"account": "Account",
284297
"bridge": "Bridge",

apps/evm/src/components/EModeBanner/EModeButton/index.tsx renamed to apps/evm/src/pages/Market/OperationForm/BorrowForm/EModeBanner/EModeButton/index.tsx

File renamed without changes.

apps/evm/src/components/EModeBanner/illustration.svg renamed to apps/evm/src/pages/Market/OperationForm/BorrowForm/EModeBanner/illustration.svg

File renamed without changes.

‎apps/evm/src/pages/Market/OperationForm/BorrowForm/EModeBanner/index.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { cn } from '@venusprotocol/ui';
2+
import type { Address } from 'viem';
3+
4+
import { IsolatedEModeGroupTooltip } from 'components';
5+
import { EModeIcon } from 'components/EModeIcon';
6+
import { Icon } from 'components/Icon';
7+
import { useBreakpointUp } from 'hooks/responsive';
8+
import { useTranslation } from 'libs/translations';
9+
import type { EModeGroup } from 'types';
10+
import { EModeButton } from './EModeButton';
11+
import illustrationSrc from './illustration.svg';
12+
13+
export interface EModeBannerProps {
14+
poolComptrollerContractAddress: Address;
15+
enabledEModeGroup?: EModeGroup;
16+
className?: string;
17+
}
18+
19+
export const EModeBanner: React.FC<EModeBannerProps> = ({
20+
enabledEModeGroup,
21+
poolComptrollerContractAddress,
22+
className,
23+
}) => {
24+
const { t } = useTranslation();
25+
const isMdOrUp = useBreakpointUp('md');
26+
27+
return (
28+
<div
29+
className={cn(
30+
'rounded-lg bg-gradient-to-l h-14 from-[#071F39] to-[#1549A1] relative flex items-center before:content-[""] before:absolute before:inset-0 before:bg-[url("/images/noise.png")] before:bg-repeat before:mix-blend-soft-light overflow-hidden sm:pr-3',
31+
enabledEModeGroup ? 'pl-4 pr-2 lg:pr-2' : 'px-4 lg:pr-3',
32+
className,
33+
)}
34+
>
35+
<div className="relative flex-1">
36+
{enabledEModeGroup ? (
37+
<div className="flex items-center gap-x-4 justify-between">
38+
<div className="flex items-center gap-x-2">
39+
<EModeIcon />
40+
41+
<p className="font-semibold text-sm">{enabledEModeGroup.name}</p>
42+
43+
{enabledEModeGroup.isIsolated && (
44+
<IsolatedEModeGroupTooltip
45+
eModeGroupName={enabledEModeGroup.name}
46+
variant="secondary"
47+
/>
48+
)}
49+
</div>
50+
51+
<EModeButton
52+
small
53+
poolComptrollerContractAddress={poolComptrollerContractAddress}
54+
analyticVariant="market_borrow_banner"
55+
>
56+
{t('eModeBanner.manageEModeButtonLabel')}
57+
</EModeButton>
58+
</div>
59+
) : (
60+
<>
61+
<div className="flex items-center gap-x-4">
62+
<img
63+
src={illustrationSrc}
64+
alt={t('eModeBanner.illustrationAltText')}
65+
className="h-10"
66+
/>
67+
68+
<div className="space-y-[2px]">
69+
<h2 className="font-semibold text-sm">{t('eModeBanner.title')}</h2>
70+
</div>
71+
72+
<EModeButton
73+
poolComptrollerContractAddress={poolComptrollerContractAddress}
74+
analyticVariant="market_borrow_banner"
75+
small
76+
className={cn('ml-auto', isMdOrUp ? 'hidden sm:flex' : 'h-8 w-8 p-0 shrink-0')}
77+
>
78+
{isMdOrUp ? (
79+
t('eModeBanner.exploreButtonLabel')
80+
) : (
81+
<Icon name="chevronRight" className="text-offWhite w-6 h-6" />
82+
)}
83+
</EModeButton>
84+
</div>
85+
</>
86+
)}
87+
</div>
88+
</div>
89+
);
90+
};

0 commit comments

Comments
 (0)