blockworks-foundation
/
lev-stake-sol
mirror of https://github.com/blockworks-foundation/lev-stake-sol.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18 from blockworks-foundation/finn/tooltop_estAPY 

Tooltip for Est APY
This commit is contained in:
saml33 2024-03-15 10:27:44 +11:00 committed by GitHub
parent 78d3c91152 3acd75ba7d
commit 6c207a02b6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 87 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
components/Positions.tsx
View File

@ -15,6 +15,7 @@ import {
} from '@blockworks-foundation/mango-v4'
import useBankRates from 'hooks/useBankRates'
import usePositions from 'hooks/usePositions'
import Tooltip from './shared/Tooltip'
const set = mangoStore.getState().set
@ -136,13 +137,13 @@ const PositionItem = ({
return [liqRatio, liqPriceChangePercentage.toFixed(2)]
}, [bank, borrowBalance, borrowBank, stakeBalance])
const { financialMetrics, stakeBankDepositRate } = useBankRates(
bank.name,
leverage,
)
const { financialMetrics, stakeBankDepositRate, borrowBankBorrowRate } =
useBankRates(bank.name, leverage)
const APY_Daily_Compound = Math.pow(1 + Number(stakeBankDepositRate) / 365, 365) - 1;
const uiRate = bank.name == 'USDC' ? APY_Daily_Compound * 100 : financialMetrics.APY
const APY_Daily_Compound =
Math.pow(1 + Number(stakeBankDepositRate) / 365, 365) - 1
const uiRate =
bank.name == 'USDC' ? APY_Daily_Compound * 100 : financialMetrics.APY
return (
<div className="rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
@ -187,9 +188,83 @@ const PositionItem = ({
</div>
<div>
<p className="mb-1 text-th-fgd-4">Est. APY</p>
<span className="text-xl font-bold text-th-fgd-1">
<FormatNumericValue value={Number(uiRate)} decimals={2} />%
</span>
{bank.name !== 'USDC' ? (
<div className="w-max">
<Tooltip
content={
<>
<div className="space-y-2 md:px-3">
<div className="flex justify-between gap-6">
<p className="text-th-fgd-4">
{formatTokenSymbol(bank.name)} Yield APY
</p>
<span className="font-bold text-th-success">
{financialMetrics.collectedReturnsAPY > 0.01
? '+'
: ''}
<FormatNumericValue
value={financialMetrics.collectedReturnsAPY}
decimals={2}
/>
%
</span>
</div>
<div className="flex justify-between gap-6">
<p className="text-th-fgd-4">
{formatTokenSymbol(bank.name)} Collateral Fee APY
</p>
<span
className={`font-bold ${
financialMetrics?.collateralFeeAPY > 0.01
? 'text-th-error'
: 'text-th-bkg-4'
}`}
>
{financialMetrics?.collateralFeeAPY > 0.01 ? '-' : ''}
<FormatNumericValue
value={financialMetrics?.collateralFeeAPY?.toString()}
decimals={2}
/>
%
</span>
</div>
{borrowBank ? (
<>
<div className="flex justify-between gap-6">
<p className="text-th-fgd-4">{`${borrowBank?.name} Borrow APY`}</p>
<span
className={`font-bold ${
borrowBankBorrowRate > 0.01
? 'text-th-error'
: 'text-th-bkg-4'
}`}
>
-
<FormatNumericValue
value={financialMetrics.borrowsAPY}
decimals={2}
/>
%
</span>
</div>
</>
) : null}
</div>
</>
}
>
<span className="tooltip-underline text-xl font-bold text-th-fgd-1">
<FormatNumericValue value={Number(uiRate)} decimals={2} />%
</span>
</Tooltip>
</div>
) : (
<>
<span className="text-xl font-bold text-th-fgd-1">
<FormatNumericValue value={Number(uiRate)} decimals={2} />%
</span>
</>
)}
</div>
<div>
<p className="mb-1 text-th-fgd-4">Total Earned</p>

6
components/shared/Tooltip.tsx
View File

@ -35,8 +35,8 @@ const Tooltip = ({
content={
content ? (
<div
className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} font-sans font-sans rounded-md bg-th-bkg-2 p-3 font-body text-xs leading-4 text-th-fgd-3 outline-none focus:outline-none ${className}`}
style={{ boxShadow: '0px 0px 8px 0px rgba(0,0,0,0.25)' }}
className={`${themeData.fonts.body.variable} ${themeData.fonts.display.variable} font-sans rounded-xl border-2 border-th-fgd-1 bg-th-bkg-1 p-4 font-body text-xs leading-4 text-th-fgd-3 outline-none focus:outline-none ${className}`}
style={{ boxShadow: '0px 0px 0px 0px rgba(0,0,0,0)' }}
>
{content}
</div>
@ -59,7 +59,7 @@ const Content = ({
} & HTMLAttributes<HTMLDivElement>) => {
return (
<div
className={`inline-block cursor-help border-b border-dashed border-th-fgd-3 border-opacity-20 hover:border-th-bkg-2 ${className}`}
className={`inline-block cursor-help border-b border-dashed border-th-fgd-3 hover:border-th-bkg-2 ${className}`}
>
{children}
</div>