@@ -21,7 +21,6 @@ export const MerklIncentivesTooltipContent = ({
2121 const merklIncentivesFormatted = getSymbolMap ( merklIncentives ) ;
2222
2323 const isPointsBased = Boolean ( merklIncentives ?. breakdown ?. points ) ;
24-
2524 return (
2625 < Box
2726 sx = { {
@@ -186,102 +185,95 @@ export const MerklIncentivesTooltipContent = ({
186185 </ Typography >
187186 </ Box >
188187 </ Row >
189- ) : (
188+ ) : merklIncentives . rewardsTokensMappedApys &&
189+ merklIncentives . rewardsTokensMappedApys . length > 1 ? (
190190 < >
191- { merklIncentives . allOpportunities && merklIncentives . allOpportunities . length > 1 ? (
192- < >
193- { merklIncentives . allOpportunities . map ( ( opportunity , index ) => {
194- const { tokenIconSymbol, symbol, aToken } = getSymbolMap ( {
195- rewardTokenSymbol : opportunity . rewardToken . symbol ,
196- rewardTokenAddress : opportunity . rewardToken . address ,
197- incentiveAPR : opportunity . apy . toString ( ) ,
198- } ) ;
199- return (
200- < Row
201- key = { index }
202- height = { 32 }
203- caption = {
204- < Box
205- sx = { {
206- display : 'flex' ,
207- alignItems : 'center' ,
208- mb : 0 ,
209- } }
210- >
211- < TokenIcon
212- symbol = { tokenIconSymbol }
213- aToken = { aToken }
214- sx = { { fontSize : '20px' , mr : 1 } }
215- />
216- < Typography variant = { typographyVariant } > { symbol } </ Typography >
217- < Typography variant = { typographyVariant } sx = { { ml : 0.5 } } >
218- { merklIncentives . breakdown . isBorrow ? '(-)' : '(+)' }
219- </ Typography >
220- </ Box >
221- }
222- width = "100%"
191+ { merklIncentives . rewardsTokensMappedApys . map ( ( reward , index ) => {
192+ const { tokenIconSymbol, symbol, aToken } = getSymbolMap ( {
193+ rewardTokenSymbol : reward . token . symbol ,
194+ rewardTokenAddress : reward . token . address ,
195+ incentiveAPR : reward . apy . toString ( ) ,
196+ } ) ;
197+ return (
198+ < Row
199+ key = { index }
200+ height = { 32 }
201+ caption = {
202+ < Box
203+ sx = { {
204+ display : 'flex' ,
205+ alignItems : 'center' ,
206+ mb : 0 ,
207+ } }
223208 >
224- < Box sx = { { display : 'inline-flex' , alignItems : 'center' } } >
225- < FormattedNumber
226- value = {
227- merklIncentives . breakdown . isBorrow
228- ? - opportunity . apy
229- : opportunity . apy
230- }
231- percent
232- variant = { typographyVariant }
233- />
234- < Typography variant = { typographyVariant } sx = { { ml : 1 } } >
235- < Trans > APY</ Trans >
236- </ Typography >
237- </ Box >
238- </ Row >
239- ) ;
240- } ) }
241- </ >
242- ) : (
243- < Row
244- height = { 32 }
245- caption = {
246- < Box
247- sx = { {
248- display : 'flex' ,
249- alignItems : 'center' ,
250- mb : 0 ,
251- } }
252- >
253- < TokenIcon
254- aToken = { merklIncentivesFormatted . aToken }
255- symbol = { merklIncentivesFormatted . tokenIconSymbol }
256- sx = { { fontSize : '20px' , mr : 1 } }
209+ < TokenIcon
210+ symbol = { tokenIconSymbol }
211+ aToken = { aToken }
212+ sx = { { fontSize : '20px' , mr : 1 } }
213+ />
214+ < Typography variant = { typographyVariant } > { symbol } </ Typography >
215+ < Typography variant = { typographyVariant } sx = { { ml : 0.5 } } >
216+ { merklIncentives . breakdown . isBorrow ? '(-)' : '(+)' }
217+ </ Typography >
218+ </ Box >
219+ }
220+ width = "100%"
221+ >
222+ < Box sx = { { display : 'inline-flex' , alignItems : 'center' } } >
223+ < FormattedNumber
224+ value = { merklIncentives . breakdown . isBorrow ? - reward . apy : reward . apy }
225+ percent
226+ variant = { typographyVariant }
257227 />
258- < Typography variant = { typographyVariant } >
259- { merklIncentivesFormatted . symbol }
260- </ Typography >
261- < Typography variant = { typographyVariant } sx = { { ml : 0.5 } } >
262- { merklIncentives . breakdown . isBorrow ? '(-)' : '(+)' }
228+ < Typography variant = { typographyVariant } sx = { { ml : 1 } } >
229+ < Trans > APY</ Trans >
263230 </ Typography >
264231 </ Box >
265- }
266- width = "100%"
267- >
268- < Box sx = { { display : 'inline-flex' , alignItems : 'center' } } >
269- < FormattedNumber
270- value = {
271- merklIncentives . breakdown . isBorrow
272- ? - merklIncentives . breakdown . merklIncentivesAPR
273- : merklIncentives . breakdown . merklIncentivesAPR
274- }
275- percent
276- variant = { typographyVariant }
277- />
278- < Typography variant = { typographyVariant } sx = { { ml : 1 } } >
279- < Trans > APY</ Trans >
280- </ Typography >
281- </ Box >
282- </ Row >
283- ) }
232+ </ Row >
233+ ) ;
234+ } ) }
284235 </ >
236+ ) : (
237+ < Row
238+ height = { 32 }
239+ caption = {
240+ < Box
241+ sx = { {
242+ display : 'flex' ,
243+ alignItems : 'center' ,
244+ mb : 0 ,
245+ } }
246+ >
247+ < TokenIcon
248+ aToken = { merklIncentivesFormatted . aToken }
249+ symbol = { merklIncentivesFormatted . tokenIconSymbol }
250+ sx = { { fontSize : '20px' , mr : 1 } }
251+ />
252+ < Typography variant = { typographyVariant } >
253+ { merklIncentivesFormatted . symbol }
254+ </ Typography >
255+ < Typography variant = { typographyVariant } sx = { { ml : 0.5 } } >
256+ { merklIncentives . breakdown . isBorrow ? '(-)' : '(+)' }
257+ </ Typography >
258+ </ Box >
259+ }
260+ width = "100%"
261+ >
262+ < Box sx = { { display : 'inline-flex' , alignItems : 'center' } } >
263+ < FormattedNumber
264+ value = {
265+ merklIncentives . breakdown . isBorrow
266+ ? - merklIncentives . breakdown . merklIncentivesAPR
267+ : merklIncentives . breakdown . merklIncentivesAPR
268+ }
269+ percent
270+ variant = { typographyVariant }
271+ />
272+ < Typography variant = { typographyVariant } sx = { { ml : 1 } } >
273+ < Trans > APY</ Trans >
274+ </ Typography >
275+ </ Box >
276+ </ Row >
285277 ) }
286278
287279 { /* Total APY */ }
0 commit comments