From d5ece8fd80ac2a727bd9c3e91d478cbe02b28a35 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Wed, 6 Mar 2024 10:38:18 +0100 Subject: [PATCH] fix: regression on stacking layout --- .../crypto-currency-asset-item.layout.tsx | 15 +++-- src/app/features/asset-list/asset-list.tsx | 10 ++- .../components/stacks-asset-list.tsx | 50 --------------- ...tacks-balance-list-item.layout.stories.tsx | 64 +++++++++++++++++++ .../stacks-balance-list-item.layout.tsx | 52 +++++++++++++++ .../components/stacks-balance-list-item.tsx | 11 ++++ ...tacks-fungible-token-asset-list.layout.tsx | 24 +++++++ .../stacks-fungible-token-asset-list.tsx | 23 ++----- 8 files changed, 175 insertions(+), 74 deletions(-) delete mode 100644 src/app/features/asset-list/components/stacks-asset-list.tsx create mode 100644 src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx create mode 100644 src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx create mode 100644 src/app/features/asset-list/components/stacks-balance-list-item.tsx create mode 100644 src/app/features/asset-list/components/stacks-fungible-token-asset-list.layout.tsx 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 41d014c4164..6d8f0e40e8a 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 @@ -1,9 +1,10 @@ import { ReactNode } from 'react'; -import { styled } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model'; +import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator'; import { ItemInteractive } from '@app/ui/components/item/item-interactive'; import { ItemLayout } from '@app/ui/components/item/item.layout'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; @@ -57,10 +58,14 @@ export function CryptoCurrencyAssetItemLayout({ } captionRight={ !rightElement && ( - <> - {balance.amount.toNumber() > 0 && address ? usdBalance : null} - {additionalUsdBalanceInfo} - + + + + {balance.amount.toNumber() > 0 && address ? usdBalance : null} + {additionalUsdBalanceInfo} + + + ) } /> diff --git a/src/app/features/asset-list/asset-list.tsx b/src/app/features/asset-list/asset-list.tsx index f8e05c26abe..78bc0ff035d 100644 --- a/src/app/features/asset-list/asset-list.tsx +++ b/src/app/features/asset-list/asset-list.tsx @@ -19,7 +19,8 @@ import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-br import { AddStacksLedgerKeysItem } from './components/add-stacks-ledger-keys-item'; import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list'; import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button'; -import { StacksAssetList } from './components/stacks-asset-list'; +import { StacksBalanceListItem } from './components/stacks-balance-list-item'; +import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token-asset-list'; export function AssetsList() { const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain(); @@ -62,7 +63,12 @@ export function AssetsList() { })} }> - {account => } + {account => ( + <> + + + + )} {whenWallet({ diff --git a/src/app/features/asset-list/components/stacks-asset-list.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx deleted file mode 100644 index f92f68276d1..00000000000 --- a/src/app/features/asset-list/components/stacks-asset-list.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { styled } from 'leather-styles/jsx'; - -import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance'; -import { ftDecimals } from '@app/common/stacks-utils'; -import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout'; -import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks'; -import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; -import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; -import { BulletOperator } from '@app/ui/components/bullet-separator/bullet-separator'; -import { Caption } from '@app/ui/components/typography/caption'; - -import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list'; - -interface StacksAssetListProps { - account: StacksAccount; -} -export function StacksAssetList({ account }: StacksAssetListProps) { - const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(account.address); - - const { stxEffectiveBalance, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance } = - useStxBalance(); - - 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/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx new file mode 100644 index 00000000000..32e8341b0b4 --- /dev/null +++ b/src/app/features/asset-list/components/stacks-balance-list-item.layout.stories.tsx @@ -0,0 +1,64 @@ +import { TooltipProvider } from '@radix-ui/react-tooltip'; +import { Meta, StoryObj } from '@storybook/react'; +import BigNumber from 'bignumber.js'; + +import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout'; + +const meta: Meta = { + component: StacksBalanceListItemLayout, + tags: ['autodocs'], + title: 'Feature/StacksBalanceListItem', + argTypes: {}, + parameters: {}, + decorators: [ + Story => ( + + + + ), + ], +}; + +export default meta; + +type Story = StoryObj; + +const symbol = 'STX'; + +export const StacksBalanceItem: Story = { + args: { + address: 'ST1PQHQKV0YX2K1Z0V2VQZGZGZGZGZGZGZGZGZGZG', + stxEffectiveBalance: { + balance: { decimals: 8, amount: new BigNumber(100000000000), symbol }, + blockchain: 'stacks', + type: 'crypto-currency', + asset: { + decimals: 8, + hasMemo: true, + name: 'Stacks', + symbol, + } as const, + }, + stxEffectiveUsdBalance: '$100,000', + }, +}; + +export const StacksBalanceItemWithLockedBalance: Story = { + args: { + address: 'ST1PQHQKV0YX2K1Z0V2VQZGZGZGZGZGZGZGZGZGZG', + stxEffectiveBalance: { + balance: { decimals: 8, amount: new BigNumber(100000000000), symbol }, + blockchain: 'stacks', + type: 'crypto-currency', + asset: { + decimals: 8, + hasMemo: true, + name: 'Stacks', + symbol, + } as const, + }, + stxEffectiveUsdBalance: '$100,000', + stxUsdLockedBalance: '$1,000', + stxLockedBalance: { decimals: 8, amount: new BigNumber(1000000000), symbol }, + }, +}; diff --git a/src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx new file mode 100644 index 00000000000..f8f03130540 --- /dev/null +++ b/src/app/features/asset-list/components/stacks-balance-list-item.layout.tsx @@ -0,0 +1,52 @@ +import { styled } from 'leather-styles/jsx'; + +import type { StacksCryptoCurrencyAssetBalance } from '@shared/models/crypto-asset-balance.model'; +import type { Money } from '@shared/models/money.model'; + +import { ftDecimals } from '@app/common/stacks-utils'; +import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout'; +import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon'; +import { + BulletOperator, + BulletSeparator, +} from '@app/ui/components/bullet-separator/bullet-separator'; +import { Caption } from '@app/ui/components/typography/caption'; + +interface StacksBalanceListItemLayoutProps { + address: string; + stxEffectiveBalance: StacksCryptoCurrencyAssetBalance; + stxEffectiveUsdBalance?: string; + stxLockedBalance?: Money; + stxUsdLockedBalance?: string; +} +export function StacksBalanceListItemLayout(props: StacksBalanceListItemLayoutProps) { + const { + address, + stxEffectiveBalance, + stxEffectiveUsdBalance, + stxLockedBalance, + stxUsdLockedBalance, + } = props; + + 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/features/asset-list/components/stacks-balance-list-item.tsx b/src/app/features/asset-list/components/stacks-balance-list-item.tsx new file mode 100644 index 00000000000..a5f728565d6 --- /dev/null +++ b/src/app/features/asset-list/components/stacks-balance-list-item.tsx @@ -0,0 +1,11 @@ +import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance'; + +import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout'; + +interface StacksBalanceListItemProps { + address: string; +} +export function StacksBalanceListItem({ address }: StacksBalanceListItemProps) { + const balaceDetails = useStxBalance(); + return ; +} diff --git a/src/app/features/asset-list/components/stacks-fungible-token-asset-list.layout.tsx b/src/app/features/asset-list/components/stacks-fungible-token-asset-list.layout.tsx new file mode 100644 index 00000000000..a13708304f5 --- /dev/null +++ b/src/app/features/asset-list/components/stacks-fungible-token-asset-list.layout.tsx @@ -0,0 +1,24 @@ +import { Stack } from 'leather-styles/jsx'; + +import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model'; + +import { StacksFungibleTokenAssetItemLayout } from '@app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout'; + +interface StacksFungibleTokenAssetListLayoutProps { + assetBalances: StacksFungibleTokenAssetBalance[]; +} +export function StacksFungibleTokenAssetListLayout({ + assetBalances, +}: StacksFungibleTokenAssetListLayoutProps) { + if (assetBalances.length === 0) return null; + return ( + + {assetBalances.map(assetBalance => ( + + ))} + + ); +} diff --git a/src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx b/src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx index 5061426a76f..d3b1ea5d4ea 100644 --- a/src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx +++ b/src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx @@ -1,22 +1,11 @@ -import { Stack } from 'leather-styles/jsx'; +import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks'; -import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model'; - -import { StacksFungibleTokenAssetItemLayout } from '@app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout'; +import { StacksFungibleTokenAssetListLayout } from './stacks-fungible-token-asset-list.layout'; interface StacksFungibleTokenAssetListProps { - assetBalances: StacksFungibleTokenAssetBalance[]; + address: string; } -export function StacksFungibleTokenAssetList({ assetBalances }: StacksFungibleTokenAssetListProps) { - if (assetBalances.length === 0) return null; - return ( - - {assetBalances.map(assetBalance => ( - - ))} - - ); +export function StacksFungibleTokenAssetList({ address }: StacksFungibleTokenAssetListProps) { + const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(address); + return ; }