From 565be148340d0b627ab0ec7667544f42c3f5b6a3 Mon Sep 17 00:00:00 2001 From: alter-eggo Date: Mon, 22 May 2023 18:48:45 +0400 Subject: [PATCH] feat: show stacked balance, closes #2835 --- .../hooks/balance/stx/use-stx-balance.ts | 11 ++++++++++ .../crypto-currency-asset-item.layout.tsx | 11 ++++++++-- .../crypto-currency-asset-item.tsx | 16 +++++++++++++- .../features/balances-list/balances-list.tsx | 22 +++++++++++++++++-- .../query/stacks/balance/stx-balance.hooks.ts | 1 + 5 files changed, 56 insertions(+), 5 deletions(-) diff --git a/src/app/common/hooks/balance/stx/use-stx-balance.ts b/src/app/common/hooks/balance/stx/use-stx-balance.ts index fe96b515eee..187205276c1 100644 --- a/src/app/common/hooks/balance/stx/use-stx-balance.ts +++ b/src/app/common/hooks/balance/stx/use-stx-balance.ts @@ -26,6 +26,13 @@ export function useStxBalance() { ? i18nFormatCurrency(baseCurrencyAmountInQuote(stxEffectiveBalance, stxMarketData)) : undefined; + const stxLockedBalance = anchoredBalanceQuery.data?.stx.locked; + const stxUsdLockedBalance = isDefined(stxLockedBalance) + ? i18nFormatCurrency( + baseCurrencyAmountInQuote(stxLockedBalance, stxMarketData) + ) + : undefined; + return useMemo(() => { return { anchoredBalanceQuery, @@ -36,6 +43,8 @@ export function useStxBalance() { : createMoney(0, 'STX'), stxEffectiveBalance: createStacksCryptoCurrencyAssetTypeWrapper(stxEffectiveBalance.amount), stxEffectiveUsdBalance, + stxLockedBalance, + stxUsdLockedBalance, }; }, [ anchoredBalanceQuery, @@ -43,5 +52,7 @@ export function useStxBalance() { unlockedStxBalance, stxEffectiveBalance, stxEffectiveUsdBalance, + stxLockedBalance, + stxUsdLockedBalance, ]); } diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx index 520135c430e..2e2bfea8fec 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx @@ -26,6 +26,8 @@ interface CryptoCurrencyAssetItemLayoutProps extends StackProps { canCopy?: boolean; isHovered?: boolean; currency?: CryptoCurrencies; + additionalBalanceInfo?: JSX.Element; + additionalUsdBalanceInfo?: JSX.Element; } export const CryptoCurrencyAssetItemLayout = forwardRefWithAs( (props: CryptoCurrencyAssetItemLayoutProps, ref) => { @@ -39,6 +41,8 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs( usdBalance, address = '', isHovered = false, + additionalBalanceInfo, + additionalUsdBalanceInfo, ...rest } = props; const [component, bind] = usePressable(isPressable); @@ -69,13 +73,16 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs( placement="left-start" > - {formattedBalance.value} + {formattedBalance.value} {additionalBalanceInfo} {caption} - {balance.amount.toNumber() > 0 && address ? {usdBalance} : null} + + {balance.amount.toNumber() > 0 && address ? {usdBalance} : null} + {additionalUsdBalanceInfo} + {component} diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx index 84a14a43b0b..376a18324ab 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx @@ -18,10 +18,22 @@ interface CryptoCurrencyAssetItemProps extends StackProps { address?: string; isPressable?: boolean; canCopy?: boolean; + additionalBalanceInfo?: JSX.Element; + additionalUsdBalanceInfo?: JSX.Element; } export const CryptoCurrencyAssetItem = forwardRefWithAs( (props: CryptoCurrencyAssetItemProps, ref) => { - const { assetBalance, icon, isPressable, address, canCopy, usdBalance, ...rest } = props; + const { + assetBalance, + icon, + isPressable, + address, + canCopy, + usdBalance, + additionalBalanceInfo, + additionalUsdBalanceInfo, + ...rest + } = props; const { balance, asset } = assetBalance; const [isHovered, setIsHovered] = useState(false); const { onCopy, hasCopied } = useClipboard(address || ''); @@ -65,6 +77,8 @@ export const CryptoCurrencyAssetItem = forwardRefWithAs( onClick={onClick} onMouseOver={onHover} onMouseOut={onBlur} + additionalBalanceInfo={additionalBalanceInfo} + additionalUsdBalanceInfo={additionalUsdBalanceInfo} {...rest} /> ); diff --git a/src/app/features/balances-list/balances-list.tsx b/src/app/features/balances-list/balances-list.tsx index c98333527cc..f7ed53a207c 100644 --- a/src/app/features/balances-list/balances-list.tsx +++ b/src/app/features/balances-list/balances-list.tsx @@ -1,13 +1,15 @@ -import { Box, Stack, StackProps } from '@stacks/ui'; +import { Box, Stack, StackProps, Text } from '@stacks/ui'; import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors'; import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance'; import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance'; +import { ftDecimals } from '@app/common/stacks-utils'; import { useWalletType } from '@app/common/use-wallet-type'; import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item'; import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; import { BtcIcon } from '@app/components/icons/btc-icon'; import { LoadingSpinner } from '@app/components/loading-spinner'; +import { Caption } from '@app/components/typography'; import { Brc20TokensLoader } from '@app/features/balances-list/components/brc-20-tokens-loader'; import { useConfigBitcoinEnabled } from '@app/query/common/hiro-config/hiro-config.query'; import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks'; @@ -25,13 +27,27 @@ export function BalancesList({ address, ...props }: BalancesListProps) { const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address); const isBitcoinEnabled = useConfigBitcoinEnabled(); const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero(); - const { stxEffectiveBalance, stxEffectiveUsdBalance, isLoading } = useStxBalance(); + const { + stxEffectiveBalance, + stxEffectiveUsdBalance, + stxLockedBalance, + stxUsdLockedBalance, + isLoading, + } = useStxBalance(); const { btcAvailableAssetBalance, btcAvailableUsdBalance } = useBtcAssetBalance(btcAddress); const { whenWallet } = useWalletType(); // Better handle loading state if (isLoading) return ; + const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? ( + ({ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked) + ) : undefined; + + const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? ( + ({stxUsdLockedBalance} locked) + ) : undefined; + return ( } /> diff --git a/src/app/query/stacks/balance/stx-balance.hooks.ts b/src/app/query/stacks/balance/stx-balance.hooks.ts index c082d649082..cb22ed8bf47 100644 --- a/src/app/query/stacks/balance/stx-balance.hooks.ts +++ b/src/app/query/stacks/balance/stx-balance.hooks.ts @@ -27,6 +27,7 @@ export function parseBalanceResponse(balances: AddressBalanceResponse) { ...balances.stx, ...stxMoney, balance: createMoney(stxMoney.balance.amount, 'STX'), + locked: createMoney(stxMoney.locked.amount, 'STX'), unlockedStx: createMoney(stxMoney.balance.amount.minus(stxMoney.locked.amount), 'STX'), }; return { ...balances, stx };