refactor: new item version

leather-io · Feb 2, 2024 · 149b760 · 149b760
1 parent 797d305
commit 149b760
Show file tree

Hide file tree

Showing 28 changed files with 572 additions and 673 deletions.
diff --git a/panda.config.ts b/panda.config.ts
@@ -4,6 +4,7 @@ import { breakpoints } from './theme/breakpoints';
 import { globalCss } from './theme/global/global';
 import { keyframes } from './theme/keyframes';
 import { buttonRecipe } from './theme/recipes/button-recipe';
+import { itemRecipe } from './theme/recipes/item-recipe';
 import { linkRecipe } from './theme/recipes/link-recipe';
 import { semanticTokens } from './theme/semantic-tokens';
 import { tokens } from './theme/tokens';
@@ -33,7 +34,7 @@ export default defineConfig({
       keyframes,
       textStyles,
       breakpoints,
-      recipes: { button: buttonRecipe, link: linkRecipe },
+      recipes: { button: buttonRecipe, item: itemRecipe, link: linkRecipe },
     },
   },
   outdir: 'leather-styles',

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,59 @@
+import { ComponentProps, ReactNode } from 'react';
+
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { Item } from '@app/ui/components/item/item';
+import { ItemLayout } from '@app/ui/components/item/item.layout';
+import { Spinner } from '@app/ui/components/spinner';
+
+interface AccountListItemLayoutProps extends ComponentProps<'div'> {
+  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 (
+    <Item.Root
+      data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
+      isInteractive
+      key={`account-${index}`}
+      onClickItem={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}
+      />
+    </Item.Root>
+  );
+}
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,21 @@
+import { styled } from 'leather-styles/jsx';
+
 import { createMoney } from '@shared/models/money.model';
+import { isDefined } from '@shared/utils';
 
 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 { Item } from '@app/ui/components/item/item';
+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,23 +30,22 @@ 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 isInteractive={isDefined(onClick)} onClickItem={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>
+          }
+        />
       </Item.Root>
     </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;
   }