Skip to content

Commit

Permalink
refactor: interactive item
Browse files Browse the repository at this point in the history
  • Loading branch information
fbwoolf committed Feb 3, 2024
1 parent 797d305 commit a6edc2d
Show file tree
Hide file tree
Showing 29 changed files with 591 additions and 709 deletions.
28 changes: 28 additions & 0 deletions src/app/components/account/account-addresses.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { HStack } from 'leather-styles/jsx';

import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
import { truncateMiddle } from '@app/ui/utils/truncate-middle';

import { StacksAccountLoader } from '../loaders/stacks-account-loader';
import { BitcoinNativeSegwitAccountLoader } from './bitcoin-account-loader';

interface AccountAddressesProps {
index: number;
}
export function AcccountAddresses({ index }: AccountAddressesProps) {
const isBreakpointSm = useViewportMinWidth('sm');

return (
<HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
<BulletSeparator>
<StacksAccountLoader index={index}>
{account => <>{truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}</>}
</StacksAccountLoader>
<BitcoinNativeSegwitAccountLoader index={index}>
{signer => <>{truncateMiddle(signer.address, 5)}</>}
</BitcoinNativeSegwitAccountLoader>
</BulletSeparator>
</HStack>
);
}
95 changes: 0 additions & 95 deletions src/app/components/account/account-list-item-layout.tsx

This file was deleted.

58 changes: 58 additions & 0 deletions src/app/components/account/account-list-item.layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { ReactNode } from 'react';

import { SettingsSelectors } from '@tests/selectors/settings.selectors';

import { ItemInteractive } from '@app/ui/components/item/item-interactive';
import { ItemLayout } from '@app/ui/components/item/item.layout';
import { Spinner } from '@app/ui/components/spinner';

interface AccountListItemLayoutProps {
accountAddresses: ReactNode;
accountName: ReactNode;
avatar: ReactNode;
balanceLabel: ReactNode;
index: number;
isLoading: boolean;
isSelected: boolean;
onSelectAccount(): void;
}
export function AccountListItemLayout(props: AccountListItemLayoutProps) {
const {
accountAddresses,
accountName,
avatar,
balanceLabel,
index,
isLoading,
isSelected,
onSelectAccount,
} = props;

return (
<ItemInteractive
data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
key={`account-${index}`}
onClick={onSelectAccount}
>
<ItemLayout
isSelected={isSelected}
flagImg={avatar}
titleLeft={accountName}
titleRight={
isLoading ? (
<Spinner
color="accent.text-subdued"
position="absolute"
right={0}
size="18px"
top="calc(50% - 8px)"
/>
) : (
balanceLabel
)
}
captionLeft={accountAddresses}
/>
</ItemInteractive>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
key={token.tick}
displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
token={token}
isPressable={hasPositiveBtcBalanceForFees}
onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
/>
))}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { styled } from 'leather-styles/jsx';

import { createMoney } from '@shared/models/money.model';

import { formatBalance } from '@app/common/format-balance';
import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon';
import { Item } from '@app/ui/components/items/item';
import { ItemDefaultLayout } from '@app/ui/components/items/item-default.layout';
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';

interface Brc20TokenAssetItemLayoutProps {
token: Brc20Token;
isPressable?: boolean;
onClick?(): void;
displayNotEnoughBalance?: boolean;
}
export function Brc20TokenAssetItemLayout({
isPressable,
onClick,
displayNotEnoughBalance,
token,
Expand All @@ -29,24 +29,23 @@ export function Brc20TokenAssetItemLayout({
label={'Not enough BTC in balance'}
side="top"
>
<Item.Root isPressable={isPressable} onClick={onClick}>
<Item.Content>
<ItemDefaultLayout
isPressable={isPressable}
flagImg={<Brc20TokenIcon />}
contentLeftTop={<Item.Text>{token.tick}</Item.Text>}
contentLeftBottom={<Item.Caption textStyle="caption.01">{'BRC-20'}</Item.Caption>}
contentRightTop={
<BasicTooltip
label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
side="left"
>
<Item.Text data-testid={token.tick}>{formattedBalance.value}</Item.Text>
</BasicTooltip>
}
/>
</Item.Content>
</Item.Root>
<ItemInteractive onClick={onClick}>
<ItemLayout
flagImg={<Brc20TokenIcon />}
titleLeft={token.tick}
captionLeft={'BRC-20'}
titleRight={
<BasicTooltip
label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
side="left"
>
<styled.span data-testid={token.tick} fontWeight={500} textStyle="label.02">
{formattedBalance.value}
</styled.span>
</BasicTooltip>
}
/>
</ItemInteractive>
</BasicTooltip>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export function CryptoAssetListItem(props: CryptoAssetListItemProps) {
<CryptoCurrencyAssetItemLayout
assetBalance={assetBalance}
icon={<CryptoCurrencyAssetIcon blockchain={blockchain} />}
isPressable
onClick={onClick}
/>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
assetBalance={balance}
icon={<BtcIcon />}
onClick={() => onItemClick(balance)}
isPressable
/>
)}
</BitcoinBalanceLoader>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,7 @@ export function FungibleTokenAssetItem({ assetBalance, onClick }: FungibleTokenA

switch (blockchain) {
case 'stacks':
return (
<StacksFungibleTokenAssetItemLayout
assetBalance={assetBalance}
isPressable
onClick={onClick}
/>
);
return <StacksFungibleTokenAssetItemLayout assetBalance={assetBalance} onClick={onClick} />;
default:
return null;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { ReactNode } from 'react';

import { styled } from 'leather-styles/jsx';

import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';

import { Item } from '@app/ui/components/items/item';
import { ItemDefaultLayout } from '@app/ui/components/items/item-default.layout';
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';

import { parseCryptoCurrencyAssetBalance } from './crypto-currency-asset.utils';
Expand All @@ -14,7 +16,6 @@ interface CryptoCurrencyAssetItemLayoutProps {
address?: string;
assetBalance: AllCryptoCurrencyAssetBalances;
icon: React.ReactNode;
isPressable?: boolean;
onClick?(): void;
rightElement?: React.ReactNode;
usdBalance?: string;
Expand All @@ -25,7 +26,6 @@ export function CryptoCurrencyAssetItemLayout({
address = '',
assetBalance,
icon,
isPressable,
onClick,
rightElement,
usdBalance,
Expand All @@ -34,40 +34,35 @@ export function CryptoCurrencyAssetItemLayout({
parseCryptoCurrencyAssetBalance(assetBalance);

return (
<Item.Root data-testid={dataTestId} isPressable={isPressable} onClick={onClick}>
<Item.Content>
<ItemDefaultLayout
isPressable={isPressable}
flagImg={icon}
contentLeftTop={<Item.Text>{title}</Item.Text>}
contentLeftBottom={<Item.Caption textStyle="caption.01">{balance.symbol}</Item.Caption>}
contentRightTop={
rightElement ? (
rightElement
) : (
<BasicTooltip
asChild
label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
side="left"
>
<Item.Text data-testid={title}>
{formattedBalance.value} {additionalBalanceInfo}
</Item.Text>
</BasicTooltip>
)
}
contentRightBottom={
!rightElement && (
<>
{balance.amount.toNumber() > 0 && address ? (
<Item.Caption textStyle="caption.02">{usdBalance}</Item.Caption>
) : null}
{additionalUsdBalanceInfo}
</>
)
}
/>
</Item.Content>
</Item.Root>
<ItemInteractive data-testid={dataTestId} onClick={onClick}>
<ItemLayout
flagImg={icon}
titleLeft={title}
captionLeft={balance.symbol}
titleRight={
rightElement ? (
rightElement
) : (
<BasicTooltip
asChild
label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
side="left"
>
<styled.span data-testid={title} fontWeight={500} textStyle="label.02">
{formattedBalance.value} {additionalBalanceInfo}
</styled.span>
</BasicTooltip>
)
}
captionRight={
!rightElement && (
<>
{balance.amount.toNumber() > 0 && address ? usdBalance : null}
{additionalUsdBalanceInfo}
</>
)
}
/>
</ItemInteractive>
);
}
Loading

0 comments on commit a6edc2d

Please sign in to comment.