refactor: interactive item

leather-io · Feb 3, 2024 · 290c5cc · 290c5cc
1 parent 797d305
commit 290c5cc
Show file tree

Hide file tree

Showing 29 changed files with 591 additions and 709 deletions.
diff --git a/src/app/components/account/account-addresses.tsx b/src/app/components/account/account-addresses.tsx
@@ -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>
+  );
+}
diff --git a/src/app/components/account/account-list-item-layout.tsx b/src/app/components/account/account-list-item-layout.tsx
diff --git a/src/app/components/account/account-list-item.layout.tsx b/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>
+  );
+}
diff --git a/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx b/src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx
@@ -34,7 +34,6 @@ export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
           key={token.tick}
           displayNotEnoughBalance={!hasPositiveBtcBalanceForFees}
           token={token}
-          isPressable={hasPositiveBtcBalanceForFees}
           onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
         />
       ))}

diff --git a/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx b/...crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx
@@ -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,
@@ -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>
   );
 }
diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx
@@ -18,7 +18,6 @@ export function CryptoAssetListItem(props: CryptoAssetListItemProps) {
         <CryptoCurrencyAssetItemLayout
           assetBalance={assetBalance}
           icon={<CryptoCurrencyAssetIcon blockchain={blockchain} />}
-          isPressable
           onClick={onClick}
         />
       );

diff --git a/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx b/src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx
@@ -29,7 +29,6 @@ export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAsse
                 assetBalance={balance}
                 icon={<BtcIcon />}
                 onClick={() => onItemClick(balance)}
-                isPressable
               />
             )}
           </BitcoinBalanceLoader>

diff --git a/src/app/components/crypto-assets/choose-crypto-asset/fungible-token-asset-item.tsx b/src/app/components/crypto-assets/choose-crypto-asset/fungible-token-asset-item.tsx
@@ -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;
   }

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
@@ -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';
@@ -14,7 +16,6 @@ interface CryptoCurrencyAssetItemLayoutProps {
   address?: string;
   assetBalance: AllCryptoCurrencyAssetBalances;
   icon: React.ReactNode;
-  isPressable?: boolean;
   onClick?(): void;
   rightElement?: React.ReactNode;
   usdBalance?: string;
@@ -25,7 +26,6 @@ export function CryptoCurrencyAssetItemLayout({
   address = '',
   assetBalance,
   icon,
-  isPressable,
   onClick,
   rightElement,
   usdBalance,
@@ -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>
   );
 }