Skip to content

Commit 78389b6

Browse files
therealemjytherealemjy
committed
feat: add Pool page banner
1 parent b1e40a4 commit 78389b6

File tree

24 files changed

+364
-628
lines changed

24 files changed

+364
-628
lines changed

‎apps/evm/src/clients/api/mutations/useOpenLeveragedPositions/index.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { queryClient } from 'clients/api';
2+
import FunctionKey from 'constants/functionKey';
3+
import { useGetContractAddress } from 'hooks/useGetContractAddress';
4+
import { type UseSendTransactionOptions, useSendTransaction } from 'hooks/useSendTransaction';
5+
import { governorBravoDelegateAbi } from 'libs/contracts';
6+
import { VError } from 'libs/errors';
7+
8+
type OpenLeveragedPositionInput = {
9+
proposalId: number;
10+
};
11+
12+
type Options = UseSendTransactionOptions<OpenLeveragedPositionInput>;
13+
14+
// TODO: add tests
15+
16+
export const useOpenLeveragedPositions = (options?: Partial<Options>) => {
17+
const { address: governorBravoDelegateContractAddress } = useGetContractAddress({
18+
name: 'GovernorBravoDelegate',
19+
});
20+
21+
return useSendTransaction({
22+
fn: ({ proposalId }: OpenLeveragedPositionInput) => {
23+
if (!governorBravoDelegateContractAddress) {
24+
throw new VError({ type: 'unexpected', code: 'somethingWentWrong' });
25+
}
26+
27+
return {
28+
abi: governorBravoDelegateAbi,
29+
address: governorBravoDelegateContractAddress,
30+
functionName: 'queue',
31+
args: [BigInt(proposalId)],
32+
};
33+
},
34+
onConfirmed: ({ input }) => {
35+
queryClient.invalidateQueries({
36+
queryKey: [FunctionKey.GET_PROPOSALS],
37+
});
38+
39+
queryClient.invalidateQueries({
40+
queryKey: [
41+
FunctionKey.GET_PROPOSAL,
42+
{
43+
id: input.proposalId,
44+
},
45+
],
46+
});
47+
},
48+
options,
49+
});
50+
};

‎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: 14 additions & 1 deletion
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",
@@ -1526,4 +1539,4 @@
15261539
},
15271540
"withdrawTabTitle": "Withdraw"
15281541
}
1529-
}
1542+
}

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)