diff --git a/libs/main/src/lib/components/my-account-block.tsx b/libs/main/src/lib/components/my-account-block.tsx index 3fc9ac6a8..7eeec5232 100644 --- a/libs/main/src/lib/components/my-account-block.tsx +++ b/libs/main/src/lib/components/my-account-block.tsx @@ -12,6 +12,7 @@ import { useIndexerBalanceQuery, useStakingUnbondingsQuery, } from '@haqq/shell-shared'; +import { useStislmBalance, useStrideRates } from '@haqq/shell-staking'; import { Tooltip, Button, @@ -36,11 +37,13 @@ import { function MyAccountAmountBlock({ title, value, + subValue, isGreen = false, valueClassName, }: { title: string; value: string | ReactNode; + subValue?: string; isGreen?: boolean; valueClassName?: string; }) { @@ -60,6 +63,9 @@ function MyAccountAmountBlock({ > {value} + {subValue ? ( +
{subValue}
+ ) : null} ); } @@ -154,9 +160,29 @@ function MyAccountConnected({ }, 2500); } }, [copyText, haqqAddress]); + const { + isHovered: isHoveredLocked, + handleMouseEnter: handleMouseEnterLocked, + handleMouseLeave: handleMouseLeaveLocked, + } = useHoverPopover(100); - const { isHovered, handleMouseEnter, handleMouseLeave } = - useHoverPopover(100); + const { + isHovered: isHoveredStaking, + handleMouseEnter: handleMouseEnterStaking, + handleMouseLeave: handleMouseLeaveStaking, + } = useHoverPopover(100); + + const { + isHovered: isHoveredLiquidStaking, + handleMouseEnter: handleMouseEnterLiquidStaking, + handleMouseLeave: handleMouseLeaveLiquidStaking, + } = useHoverPopover(100); + + const unbonding = useUnbonding(haqqAddress); + + const { stIslmBalance } = useStislmBalance(); + + const { data: { islmAmountFromStIslm } = {} } = useStrideRates(stIslmBalance); if (!balances) { return null; @@ -186,11 +212,11 @@ function MyAccountConnected({
{`${formatNumber(balances.balance)} ${symbol.toLocaleUpperCase()}`}
-
- +
+
Locked: {formatNumber(balances.locked)} - + + {balances && unbonding ? ( + + ) : null}
+
+ + + +
+ + Available for staking:{' '} + {formatNumber(balances.available)} + + +
+
+ + + + +
+ + + +
+ + Available for liquid staking:{' '} + {formatNumber(balances.availableForStake)} + + +
+
+ + + + +
+ { const { data: undelegations } = useStakingUnbondingsQuery(haqqAddress); const unbonding = useMemo(() => { const allUnbound: number[] = (undelegations ?? []).map((validator) => { @@ -302,7 +394,14 @@ function LockedBalancePopup({ haqqAddress }: { haqqAddress: string }) { return Number.parseFloat(formatUnits(BigInt(result), 18)); }, [undelegations]); - if (!balances || !unbonding) { + return unbonding; +}; + +function LockedBalancePopup({ haqqAddress }: { haqqAddress: string }) { + const { data: balances } = useIndexerBalanceQuery(haqqAddress); + const unbonding = useUnbonding(haqqAddress); + + if (!balances) { return null; } @@ -349,3 +448,68 @@ function LockedBalancePopup({ haqqAddress }: { haqqAddress: string }) { ); } + +function StakingBalancePopup({ + haqqAddress, + title, + isLiquidStaking, +}: { + haqqAddress: string; + title?: string; + isLiquidStaking?: boolean; +}) { + const { data: balances } = useIndexerBalanceQuery(haqqAddress); + const unbonding = useUnbonding(haqqAddress); + + const { stIslmBalance } = useStislmBalance(); + + if (!balances) { + return null; + } + + console.log(balances); + + return ( +
+
+ {title ? ( +
+

{title}

+
+ ) : null} +
+
+ +
+ Available: {formatNumber(balances.availableForStake)} +
+
+
+
+
+
+ +
+ Locked:{' '} + {isLiquidStaking + ? formatNumber(stIslmBalance) + : formatNumber(balances.locked)} +
+
+ +
+ +
+
+
+
+
+ ); +} diff --git a/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx b/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx index 03a3518f0..c7b094670 100644 --- a/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx +++ b/libs/staking/src/lib/components/stride/statistics/stride-stats.tsx @@ -25,10 +25,10 @@ import { } from '../../staking-stats'; const MIN_BALANCE = 0.2; -const MIN_DELEGATION = 0.01; // '0x4FEBDDe47Ab9a76200e57eFcC80b212a07b3e6cE'; // '0x12fEFEAc0568503F7C0D934c149f29a42B05C48f'; +const MIN_DELEGATION = 0.01; export function StrideStats() { - const { openSelectWallet, isHaqqWallet } = useWallet(); + const { isHaqqWallet } = useWallet(); const chains = useChains(); const { chain = chains[0] } = useAccount(); @@ -44,10 +44,10 @@ export function StrideStats() { const balance = balances?.availableForStake ?? 0; - const { data: { redemption_rate: redemptionRate } = {} } = useStrideRates(); - const { stIslmBalance } = useStislmBalance(); + const { data: { islmAmountFromStIslm } = {} } = useStrideRates(stIslmBalance); + const isWalletConnected = Boolean(ethAddress && haqqAddress); if (!isWalletConnected) { @@ -73,13 +73,13 @@ export function StrideStats() { ) : ( )} @@ -112,11 +112,11 @@ export const useHandleDelegateContinue = () => { function StrideStatsDesktop({ balance, stIslmBalance, - redemptionRate, + islmAmountFromStIslm, }: { balance: number; stIslmBalance: number; - redemptionRate: number; + islmAmountFromStIslm: number; }) { const { handleDelegateContinue, handleUndelegateContinue } = useHandleDelegateContinue(); @@ -152,7 +152,7 @@ function StrideStatsDesktop({
@@ -197,11 +197,11 @@ function StrideStatsDesktop({ function StrideStatsMobile({ balance, stIslmBalance, - redemptionRate, + islmAmountFromStIslm, }: { balance: number; stIslmBalance: number; - redemptionRate: number; + islmAmountFromStIslm: number; }) { const { handleDelegateContinue, handleUndelegateContinue } = useHandleDelegateContinue(); @@ -230,7 +230,7 @@ function StrideStatsMobile({ /> diff --git a/libs/staking/src/lib/hooks/use-stride-rates.ts b/libs/staking/src/lib/hooks/use-stride-rates.ts index b7cbd91b2..7adde984f 100644 --- a/libs/staking/src/lib/hooks/use-stride-rates.ts +++ b/libs/staking/src/lib/hooks/use-stride-rates.ts @@ -21,12 +21,19 @@ async function fetchRedemptionRate() { } } -export function useStrideRates() { +export function useStrideRates(stIslmBalance: number) { const { data, isLoading, error } = useQuery({ queryKey: ['redemptionRate'], queryFn: fetchRedemptionRate, refetchInterval: 10000, }); - return { data, isLoading, error }; + return { + data: { + ...data, + islmAmountFromStIslm: stIslmBalance * data?.redemption_rate ?? 1, + }, + isLoading, + error, + }; }