Skip to content

Commit c5c94fc

Browse files
foodakafoodaka
committed
feat: add incentives on reserves
1 parent 1c15a3e commit c5c94fc

File tree

10 files changed

+239
-81
lines changed

10 files changed

+239
-81
lines changed

‎src/components/incentives/IncentivesCard.tsx‎

Lines changed: 64 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ interface IncentivesCardProps {
2828
market: string;
2929
protocolAction?: ProtocolAction;
3030
align?: 'center' | 'flex-end';
31+
inlineIncentives?: boolean;
3132
}
3233

3334
export const IncentivesCard = ({
@@ -42,6 +43,7 @@ export const IncentivesCard = ({
4243
tooltip,
4344
market,
4445
protocolAction,
46+
inlineIncentives = false,
4547
}: IncentivesCardProps) => {
4648
const protocolAPY = typeof value === 'string' ? parseFloat(value) : value;
4749

@@ -83,22 +85,52 @@ export const IncentivesCard = ({
8385
? protocolAPY - (protocolIncentivesAPR as number) - meritIncentivesAPR - merklIncentivesAPR
8486
: protocolAPY + (protocolIncentivesAPR as number) + meritIncentivesAPR + merklIncentivesAPR;
8587

88+
const incentivesContent = (
89+
<>
90+
<IncentivesButton
91+
incentives={incentives}
92+
symbol={symbol}
93+
market={market}
94+
protocolAction={protocolAction}
95+
protocolAPY={protocolAPY}
96+
address={address}
97+
/>
98+
<MeritIncentivesButton
99+
symbol={symbol}
100+
market={market}
101+
protocolAction={protocolAction}
102+
protocolAPY={protocolAPY}
103+
protocolIncentives={incentives || []}
104+
/>
105+
<MerklIncentivesButton
106+
market={market}
107+
rewardedAsset={address}
108+
protocolAction={protocolAction}
109+
protocolAPY={protocolAPY}
110+
protocolIncentives={incentives || []}
111+
/>
112+
<EthenaIncentivesButton rewardedAsset={address} />
113+
<EtherfiIncentivesButton symbol={symbol} market={market} protocolAction={protocolAction} />
114+
<SonicIncentivesButton rewardedAsset={address} />
115+
</>
116+
);
117+
86118
return (
87119
<Box
88120
sx={{
89121
display: 'flex',
90-
flexDirection: 'column',
91-
alignItems: align || { xs: 'flex-end', xsm: 'center' },
92-
justifyContent: 'center',
93-
textAlign: 'center',
94-
gap: 1,
122+
flexDirection: inlineIncentives ? 'row' : 'column',
123+
alignItems: inlineIncentives ? 'center' : align || { xs: 'flex-end', xsm: 'center' },
124+
justifyContent: inlineIncentives ? 'flex-start' : 'center',
125+
textAlign: inlineIncentives ? 'left' : 'center',
126+
gap: inlineIncentives ? 1 : 1,
95127
}}
96128
>
97129
{value.toString() !== '-1' ? (
98-
<Box sx={{ display: 'flex' }}>
130+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
99131
{displayAPY === 'Infinity' ? (
100132
<Typography variant={variant} color={color || 'text.secondary'}>
101-
∞%
133+
∞ %
102134
</Typography>
103135
) : (
104136
<FormattedNumber
@@ -112,45 +144,35 @@ export const IncentivesCard = ({
112144
/>
113145
)}
114146
{tooltip}
147+
{inlineIncentives && (
148+
<Box
149+
sx={{
150+
display: 'flex',
151+
gap: '4px',
152+
flexWrap: 'wrap',
153+
alignItems: 'center',
154+
}}
155+
>
156+
{incentivesContent}
157+
</Box>
158+
)}
115159
</Box>
116160
) : (
117161
<NoData variant={variant} color={color || 'text.secondary'} />
118162
)}
119-
<Box
120-
sx={{
121-
display: 'flex',
122-
gap: '4px',
123-
flexWrap: 'wrap',
124-
alignItems: 'center',
125-
justifyContent: 'center',
126-
}}
127-
>
128-
<IncentivesButton
129-
incentives={incentives}
130-
symbol={symbol}
131-
market={market}
132-
protocolAction={protocolAction}
133-
protocolAPY={protocolAPY}
134-
address={address}
135-
/>
136-
<MeritIncentivesButton
137-
symbol={symbol}
138-
market={market}
139-
protocolAction={protocolAction}
140-
protocolAPY={protocolAPY}
141-
protocolIncentives={incentives || []}
142-
/>
143-
<MerklIncentivesButton
144-
market={market}
145-
rewardedAsset={address}
146-
protocolAction={protocolAction}
147-
protocolAPY={protocolAPY}
148-
protocolIncentives={incentives || []}
149-
/>
150-
<EthenaIncentivesButton rewardedAsset={address} />
151-
<EtherfiIncentivesButton symbol={symbol} market={market} protocolAction={protocolAction} />
152-
<SonicIncentivesButton rewardedAsset={address} />
153-
</Box>
163+
{!inlineIncentives && (
164+
<Box
165+
sx={{
166+
display: 'flex',
167+
gap: '4px',
168+
flexWrap: 'wrap',
169+
alignItems: 'center',
170+
justifyContent: 'center',
171+
}}
172+
>
173+
{incentivesContent}
174+
</Box>
175+
)}
154176
</Box>
155177
);
156178
};

‎src/components/incentives/MerklIncentivesTooltipContent.tsx‎

Lines changed: 147 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -82,37 +82,156 @@ export const MerklIncentivesTooltipContent = ({
8282
) : null}
8383

8484
<Box sx={{ width: '100%' }}>
85-
<Row
86-
height={32}
87-
caption={
88-
<Box
89-
sx={{
90-
display: 'flex',
91-
alignItems: 'center',
92-
mb: 0,
93-
}}
85+
{merklIncentives.breakdown ? (
86+
<>
87+
{/* Protocol APY */}
88+
<Row
89+
height={32}
90+
caption={
91+
<Typography variant={typographyVariant}>
92+
<Trans>Protocol APY</Trans>
93+
</Typography>
94+
}
95+
width="100%"
9496
>
95-
<TokenIcon
96-
aToken={merklIncentivesFormatted.aToken}
97-
symbol={merklIncentivesFormatted.tokenIconSymbol}
98-
sx={{ fontSize: '20px', mr: 1 }}
97+
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
98+
<FormattedNumber
99+
value={merklIncentives.breakdown.protocolAPY}
100+
percent
101+
variant={typographyVariant}
102+
/>
103+
<Typography variant={typographyVariant} sx={{ ml: 1 }}>
104+
<Trans>APY</Trans>
105+
</Typography>
106+
</Box>
107+
</Row>
108+
109+
{/* Protocol APR */}
110+
{merklIncentives.breakdown.protocolIncentivesAPR > 0 && (
111+
<Row
112+
height={32}
113+
caption={
114+
<Typography variant={typographyVariant}>
115+
<Trans>Protocol Incentives</Trans>
116+
</Typography>
117+
}
118+
width="100%"
119+
>
120+
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
121+
<FormattedNumber
122+
value={merklIncentives.breakdown.protocolIncentivesAPR}
123+
percent
124+
variant={typographyVariant}
125+
/>
126+
<Typography variant={typographyVariant} sx={{ ml: 1 }}>
127+
<Trans>APR</Trans>
128+
</Typography>
129+
</Box>
130+
</Row>
131+
)}
132+
133+
{/* Merit Incentives */}
134+
<Row
135+
height={32}
136+
caption={
137+
<Box
138+
sx={{
139+
display: 'flex',
140+
alignItems: 'center',
141+
mb: 0,
142+
}}
143+
>
144+
<TokenIcon
145+
aToken={merklIncentivesFormatted.aToken}
146+
symbol={merklIncentivesFormatted.tokenIconSymbol}
147+
sx={{ fontSize: '20px', mr: 1 }}
148+
/>
149+
<Typography variant={typographyVariant}>
150+
{merklIncentivesFormatted.symbol}
151+
</Typography>
152+
<Typography variant={typographyVariant} sx={{ ml: 0.5 }}>
153+
{merklIncentives.breakdown.isBorrow ? '(-)' : '(+)'}
154+
</Typography>
155+
</Box>
156+
}
157+
width="100%"
158+
>
159+
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
160+
<FormattedNumber
161+
value={
162+
merklIncentives.breakdown.isBorrow
163+
? -merklIncentives.breakdown.merklIncentivesAPR
164+
: merklIncentives.breakdown.merklIncentivesAPR
165+
}
166+
percent
167+
variant={typographyVariant}
168+
/>
169+
<Typography variant={typographyVariant} sx={{ ml: 1 }}>
170+
<Trans>APR</Trans>
171+
</Typography>
172+
</Box>
173+
</Row>
174+
175+
{/* Total APY */}
176+
<Box sx={{ mt: 2, pt: 2, borderTop: 1, borderColor: 'divider' }}>
177+
<Row
178+
height={32}
179+
caption={
180+
<Typography variant={typographyVariant} fontWeight={600}>
181+
<Trans>Total APY</Trans>
182+
</Typography>
183+
}
184+
width="100%"
185+
>
186+
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
187+
<FormattedNumber
188+
value={merklIncentives.breakdown.totalAPY}
189+
percent
190+
variant={typographyVariant}
191+
color="text.primary"
192+
/>
193+
<Typography variant={typographyVariant} sx={{ ml: 1 }} color="text.primary">
194+
<Trans>APY</Trans>
195+
</Typography>
196+
</Box>
197+
</Row>
198+
</Box>
199+
</>
200+
) : (
201+
<Row
202+
height={32}
203+
caption={
204+
<Box
205+
sx={{
206+
display: 'flex',
207+
alignItems: 'center',
208+
mb: 0,
209+
}}
210+
>
211+
<TokenIcon
212+
aToken={merklIncentivesFormatted.aToken}
213+
symbol={merklIncentivesFormatted.tokenIconSymbol}
214+
sx={{ fontSize: '20px', mr: 1 }}
215+
/>
216+
<Typography variant={typographyVariant}>
217+
{merklIncentivesFormatted.symbol}
218+
</Typography>
219+
</Box>
220+
}
221+
width="100%"
222+
>
223+
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
224+
<FormattedNumber
225+
value={+merklIncentivesFormatted.incentiveAPR}
226+
percent
227+
variant={typographyVariant}
99228
/>
100-
<Typography variant={typographyVariant}>{merklIncentivesFormatted.symbol}</Typography>
229+
<Typography variant={typographyVariant} sx={{ ml: 1 }}>
230+
<Trans>APR</Trans>
231+
</Typography>
101232
</Box>
102-
}
103-
width="100%"
104-
>
105-
<Box sx={{ display: 'inline-flex', alignItems: 'center' }}>
106-
<FormattedNumber
107-
value={+merklIncentivesFormatted.incentiveAPR}
108-
percent
109-
variant={typographyVariant}
110-
/>
111-
<Typography variant={typographyVariant} sx={{ ml: 1 }}>
112-
<Trans>APR</Trans>
113-
</Typography>
114-
</Box>
115-
</Row>
233+
</Row>
234+
)}
116235
</Box>
117236
</Box>
118237
);

‎src/components/transactions/Borrow/BorrowModalContent.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,8 +64,6 @@ export const BorrowModalContent = ({
6464
// amount calculations
6565
const maxAmountToBorrow = getMaxAmountAvailableToBorrow(poolReserve, user);
6666

67-
console.log('maxAmountToBorrow', maxAmountToBorrow);
68-
6967
// We set this in a useEffect, so it doesn't constantly change when
7068
// max amount selected
7169
const handleChange = (_value: string) => {

‎src/locales/el/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/en/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/en/messages.po‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -511,6 +511,8 @@ msgstr "Switch Network"
511511
#: src/components/incentives/IncentivesTooltipContent.tsx
512512
#: src/components/incentives/MeritIncentivesTooltipContent.tsx
513513
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
514+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
515+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
514516
#: src/components/transactions/SavingsGho/SavingsGhoModalDepositContent.tsx
515517
#: src/modules/reserve-overview/Gho/SavingsGho.tsx
516518
#: src/modules/sGho/SGhoDepositPanel.tsx
@@ -878,6 +880,10 @@ msgstr "Please connect your wallet to see migration tool."
878880
msgid "{networkName} Faucet"
879881
msgstr "{networkName} Faucet"
880882

883+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
884+
msgid "Protocol Incentives"
885+
msgstr "Protocol Incentives"
886+
881887
#: src/layouts/MobileMenu.tsx
882888
#: src/layouts/SettingsMenu.tsx
883889
msgid "Watch wallet"
@@ -1538,6 +1544,10 @@ msgstr "Deposit GHO"
15381544
msgid "Website"
15391545
msgstr "Website"
15401546

1547+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
1548+
msgid "Protocol APY"
1549+
msgstr "Protocol APY"
1550+
15411551
#: src/components/transactions/Withdraw/WithdrawAndSwitchModalContent.tsx
15421552
#: src/components/transactions/Withdraw/WithdrawAndUnwrapActions.tsx
15431553
#: src/components/transactions/Withdraw/WithdrawModal.tsx
@@ -2698,6 +2708,7 @@ msgid "Amount After Fee"
26982708
msgstr "Amount After Fee"
26992709

27002710
#: src/components/incentives/IncentivesTooltipContent.tsx
2711+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
27012712
msgid "Total APY"
27022713
msgstr "Total APY"
27032714

@@ -3233,6 +3244,8 @@ msgstr "Amount must be greater than 0"
32333244
msgid "Selected supply assets"
32343245
msgstr "Selected supply assets"
32353246

3247+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
3248+
#: src/components/incentives/MerklIncentivesTooltipContent.tsx
32363249
#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
32373250
#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsList.tsx
32383251
#: src/modules/dashboard/lists/BorrowedPositionsList/BorrowedPositionsListItem.tsx

‎src/locales/es/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/locales/fr/messages.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)