feat: ui items

src/app/components/account-total-balance.tsx

@@ -13,5 +13,9 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota
 
   if (!totalBalance) return null;
 
-  return <styled.span textStyle="label.01">{totalBalance.totalUsdBalance}</styled.span>;
+  return (
+    <styled.span fontWeight={500} textStyle="label.02">
+      {totalBalance.totalUsdBalance}
+    </styled.span>
+  );
 });

src/app/components/account/account-addresses.tsx

@@ -0,0 +1,29 @@
+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 { Caption } from '@app/ui/components/typography/caption';
+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 => <Caption>{truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}</Caption>}
+        </StacksAccountLoader>
+        <BitcoinNativeSegwitAccountLoader index={index}>
+          {signer => <Caption>{truncateMiddle(signer.address, 5)}</Caption>}
+        </BitcoinNativeSegwitAccountLoader>
+      </BulletSeparator>
+    </HStack>
+  );
+}

src/app/components/account/account-list-item.layout.tsx

@@ -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>
+  );
+}

src/app/components/account/account-name.tsx

@@ -6,5 +6,7 @@ interface AccountNameLayoutProps {
   children: React.ReactNode;
 }
 export const AccountNameLayout = memo(({ children }: AccountNameLayoutProps) => (
-  <styled.p textStyle="label.01">{children}</styled.p>
+  <styled.span fontWeight={500} textStyle="label.02">
+    {children}
+  </styled.span>
 ));

src/app/components/bitcoin-transaction-item/bitcoin-transaction-item.tsx

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
-import { BoxProps } from 'leather-styles/jsx';
-
 import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model';
 import { RouteUrls } from '@shared/route-urls';
 
@@ -15,7 +13,6 @@
   isBitcoinTxInbound,
 } from '@app/common/transactions/bitcoin/utils';
 import { openInNewTab } from '@app/common/utils/open-in-new-tab';
-import { usePressable } from '@app/components/item-hover';
 import { IncreaseFeeButton } from '@app/components/stacks-transaction-item/increase-fee-button';
 import { TransactionTitle } from '@app/components/transaction/transaction-title';
 import {
@@ -34,11 +31,10 @@
 import { BitcoinTransactionStatus } from './bitcoin-transaction-status';
 import { BitcoinTransactionValue } from './bitcoin-transaction-value';
 
-interface BitcoinTransactionItemProps extends BoxProps {
+interface BitcoinTransactionItemProps {
   transaction: BitcoinTx;
 }
-export function BitcoinTransactionItem({ transaction, ...rest }: BitcoinTransactionItemProps) {
-  const [component, bind, { isHovered }] = usePressable(true);
+export function BitcoinTransactionItem({ transaction }: BitcoinTransactionItemProps) {
   const { pathname } = useLocation();
   const navigate = useNavigate();
 
@@ -50,7 +46,7 @@
     },
   });
 
   const bitcoinAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const { handleOpenBitcoinTxLink: handleOpenTxLink } = useBitcoinExplorerLink();
   const analytics = useAnalytics();
   const caption = useMemo(() => getBitcoinTxCaption(transaction), [transaction]);
@@ -92,7 +88,6 @@
   const increaseFeeButton = (
     <IncreaseFeeButton
       isEnabled={isEnabled}
-      isHovered={isHovered}
       isSelected={pathname === RouteUrls.IncreaseBtcFee}
       onIncreaseFee={onIncreaseFee}
     />
@@ -101,6 +96,7 @@
   return (
     <TransactionItemLayout
       openTxLink={openTxLink}
+      rightElement={isEnabled ? increaseFeeButton : undefined}
       txCaption={txCaption}
       txIcon={
         <BitcoinTransactionIcon
@@ -112,11 +108,6 @@
       txStatus={<BitcoinTransactionStatus transaction={transaction} />}
       txTitle={<TransactionTitle title={title} />}
       txValue={txValue}
-      belowCaptionEl={increaseFeeButton}
-      {...bind}
-      {...rest}
-    >
-      {component}
-    </TransactionItemLayout>
+    />
   );
 }

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -3,14 +3,16 @@
 import { RouteUrls } from '@shared/route-urls';
 import { noop } from '@shared/utils';
 
-import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item';
 import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
+import { Brc20TokenAssetItemLayout } from './components/brc20-token-asset-item.layout';
+import { Brc20AssetListLayout } from './components/brc20-token-asset-list.layout';
+
 export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
   const navigate = useNavigate();
   const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
   const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
 
   const hasPositiveBtcBalanceForFees =
@@ -24,13 +26,17 @@
   }
 
   if (!props.brc20Tokens?.length) return null;
-  return props.brc20Tokens.map(token => (
-    <Brc20TokenAssetItem
-      token={token}
-      isPressable={hasPositiveBtcBalanceForFees}
-      onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
-      displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
-      key={token.tick}
-    />
-  ));
+
+  return (
+    <Brc20AssetListLayout>
+      {props.brc20Tokens?.map(token => (
+        <Brc20TokenAssetItemLayout
+          key={token.tick}
+          displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
+          token={token}
+          onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
+        />
+      ))}
+    </Brc20AssetListLayout>
+  );
 }

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -1,69 +1,52 @@
-import { BoxProps, Flex, HStack, styled } from 'leather-styles/jsx';
+import { styled } from 'leather-styles/jsx';
 
-import type { Money } from '@shared/models/money.model';
+import { createMoney } from '@shared/models/money.model';
 
 import { formatBalance } from '@app/common/format-balance';
-import { AssetCaption } from '@app/components/crypto-assets/components/asset-caption';
-import { usePressable } from '@app/components/item-hover';
-import { Flag } from '@app/ui/components/flag/flag';
+import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 import { Brc20TokenIcon } from '@app/ui/components/icons/brc20-token-icon';
+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 extends BoxProps {
-  balance: Money;
-  caption: string;
-  isPressable?: boolean;
+interface Brc20TokenAssetItemLayoutProps {
+  token: Brc20Token;
   onClick?(): void;
-  title: string;
   displayNotEnoughBalance?: boolean;
 }
 export function Brc20TokenAssetItemLayout({
-  balance,
-  caption,
-  isPressable,
   onClick,
-  title,
   displayNotEnoughBalance,
+  token,
 }: Brc20TokenAssetItemLayoutProps) {
-  const [component, bind] = usePressable(isPressable);
-
+  const balance = createMoney(Number(token.overall_balance), token.tick, 0);
   const formattedBalance = formatBalance(balance.amount.toString());
 
   return (
     <BasicTooltip
+      asChild
       disabled={!displayNotEnoughBalance}
+      label="Not enough BTC in balance"
       side="top"
-      label={'Not enough BTC in balance'}
-      asChild
     >
-      <Flex onClick={isPressable ? onClick : undefined} {...bind}>
-        <Flag img={<Brc20TokenIcon />} spacing="space.04" width="100%">
-          <HStack alignItems="center" justifyContent="space-between" width="100%">
-            <styled.span
-              maxWidth="150px"
-              overflow="hidden"
-              textAlign="left"
-              textOverflow="ellipsis"
-              textStyle="label.01"
-              whiteSpace="nowrap"
-            >
-              {title}
-            </styled.span>
+      <ItemInteractive onClick={onClick}>
+        <ItemLayout
+          flagImg={<Brc20TokenIcon />}
+          titleLeft={token.tick}
+          captionLeft="BRC-20"
+          titleRight={
             <BasicTooltip
+              asChild
               label={formattedBalance.isAbbreviated ? balance.amount.toString() : undefined}
               side="left"
             >
-              <styled.span data-testid={title} textStyle="label.01">
+              <styled.span data-testid={token.tick} fontWeight={500} textStyle="label.02">
                 {formattedBalance.value}
               </styled.span>
             </BasicTooltip>
-          </HStack>
-          <HStack alignItems="center" justifyContent="space-between" height="1.25rem" width="100%">
-            <AssetCaption caption={caption} />
-          </HStack>
-          {component}
-        </Flag>
-      </Flex>
+          }
+        />
+      </ItemInteractive>
     </BasicTooltip>
   );
 }