refactor: code review comments

leather-io · Jan 31, 2024 · 409490c · 409490c
1 parent 208c557
commit 409490c
Show file tree

Hide file tree

Showing 15 changed files with 78 additions and 68 deletions.
diff --git a/src/app/components/account/account-addresses.tsx b/src/app/components/account/account-addresses.tsx
@@ -0,0 +1,35 @@
+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 { Item } from '@app/ui/components/item/item';
+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 => (
+            <Item.Caption textStyle="caption.01">
+              {truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}
+            </Item.Caption>
+          )}
+        </StacksAccountLoader>
+        <BitcoinNativeSegwitAccountLoader index={index}>
+          {signer => (
+            <Item.Caption textStyle="caption.01">{truncateMiddle(signer.address, 5)}</Item.Caption>
+          )}
+        </BitcoinNativeSegwitAccountLoader>
+      </BulletSeparator>
+    </HStack>
+  );
+}
diff --git a/...ents/account/account-list-item-layout.tsx → ...ents/account/account-list-item.layout.tsx b/...ents/account/account-list-item-layout.tsx → ...ents/account/account-list-item.layout.tsx
@@ -3,18 +3,13 @@ import { ComponentProps, ReactNode } from 'react';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 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 { CheckmarkIcon } from '@app/ui/components/icons/checkmark-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 { Spinner } from '@app/ui/components/spinner';
-import { truncateMiddle } from '@app/ui/utils/truncate-middle';
-
-import { StacksAccountLoader } from '../loaders/stacks-account-loader';
-import { BitcoinNativeSegwitAccountLoader } from './bitcoin-account-loader';
 
 interface AccountListItemLayoutProps extends ComponentProps<'div'> {
+  accountAddresses: ReactNode;
   accountName: ReactNode;
   avatar: ReactNode;
   balanceLabel: ReactNode;
@@ -26,6 +21,7 @@ interface AccountListItemLayoutProps extends ComponentProps<'div'> {
 }
 export function AccountListItemLayout(props: AccountListItemLayoutProps) {
   const {
+    accountAddresses,
     accountName,
     avatar,
     balanceLabel,
@@ -36,8 +32,6 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
     onSelectAccount,
   } = props;
 
-  const isBreakpointSm = useViewportMinWidth('sm');
-
   return (
     <Item.Root
       data-testid={SettingsSelectors.SwitchAccountItemIndex.replace('[index]', `${index}`)}
@@ -46,7 +40,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
       onClick={onSelectAccount}
     >
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable={isPressable}
           flagImg={avatar}
           contentLeftTop={
@@ -55,26 +49,7 @@ export function AccountListItemLayout(props: AccountListItemLayoutProps) {
               {isSelected && <CheckmarkIcon />}
             </HStack>
           }
-          contentLeftBottom={
-            <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
-              <BulletSeparator>
-                <StacksAccountLoader index={index}>
-                  {account => (
-                    <Item.Caption textStyle="caption.01">
-                      {truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}
-                    </Item.Caption>
-                  )}
-                </StacksAccountLoader>
-                <BitcoinNativeSegwitAccountLoader index={index}>
-                  {signer => (
-                    <Item.Caption textStyle="caption.01">
-                      {truncateMiddle(signer.address, 5)}
-                    </Item.Caption>
-                  )}
-                </BitcoinNativeSegwitAccountLoader>
-              </BulletSeparator>
-            </HStack>
-          }
+          contentLeftBottom={accountAddresses}
           contentRightTop={
             isLoading ? (
               <Spinner

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
@@ -3,8 +3,8 @@ 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 { 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 {
@@ -31,7 +31,7 @@ export function Brc20TokenAssetItemLayout({
     >
       <Item.Root isPressable={isPressable} onClick={onClick}>
         <Item.Content>
-          <ItemDefaultLayout
+          <ItemLayout
             isPressable={isPressable}
             flagImg={<Brc20TokenIcon />}
             contentLeftTop={<Item.Text>{token.tick}</Item.Text>}

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
@@ -2,8 +2,8 @@ import { ReactNode } from 'react';
 
 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 { 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';
 
 import { parseCryptoCurrencyAssetBalance } from './crypto-currency-asset.utils';
@@ -36,7 +36,7 @@ export function CryptoCurrencyAssetItemLayout({
   return (
     <Item.Root data-testid={dataTestId} isPressable={isPressable} onClick={onClick}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable={isPressable}
           flagImg={icon}
           contentLeftTop={<Item.Text>{title}</Item.Text>}

diff --git a/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx b/...nts/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx
@@ -1,8 +1,8 @@
 import { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
 
 import { StacksAssetAvatar } from '@app/components/crypto-assets/stacks/components/stacks-asset-avatar';
-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';
 
 import { parseStacksFungibleTokenAssetBalance } from './fungible-token-asset.utils';
@@ -23,7 +23,7 @@ export function StacksFungibleTokenAssetItemLayout({
   return (
     <Item.Root data-testid={dataTestId} isPressable={isPressable} onClick={onClick}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable={isPressable}
           flagImg={
             <StacksAssetAvatar

diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 
-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';
 
 interface TransactionItemLayoutProps {
   openTxLink(): void;
@@ -25,7 +25,7 @@ export function TransactionItemLayout({
   return (
     <Item.Root isPressable onClick={openTxLink} position="relative" zIndex={99}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable
           flagImg={txIcon && txIcon}
           contentLeftTop={<Item.Text>{txTitle}</Item.Text>}

diff --git a/src/app/features/switch-account-drawer/components/switch-account-list-item.tsx b/src/app/features/switch-account-drawer/components/switch-account-list-item.tsx
@@ -4,7 +4,8 @@ import { useAccountDisplayName } from '@app/common/hooks/account/use-account-nam
 import { useSwitchAccount } from '@app/common/hooks/account/use-switch-account';
 import { useLoading } from '@app/common/hooks/use-loading';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
-import { AccountListItemLayout } from '@app/components/account/account-list-item-layout';
+import { AcccountAddresses } from '@app/components/account/account-addresses';
+import { AccountListItemLayout } from '@app/components/account/account-list-item.layout';
 import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
@@ -39,6 +40,7 @@ export const SwitchAccountListItem = memo(
 
     return (
       <AccountListItemLayout
+        accountAddresses={<AcccountAddresses index={index} />}
         accountName={<AccountNameLayout>{name}</AccountNameLayout>}
         avatar={
           <AccountAvatarItem

diff --git a/src/app/pages/choose-account/components/accounts.tsx b/src/app/pages/choose-account/components/accounts.tsx
@@ -12,8 +12,9 @@ import { useCreateAccount } from '@app/common/hooks/account/use-create-account';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { slugify } from '@app/common/utils';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
+import { AcccountAddresses } from '@app/components/account/account-addresses';
 import { AccountAvatar } from '@app/components/account/account-avatar';
-import { AccountListItemLayout } from '@app/components/account/account-list-item-layout';
+import { AccountListItemLayout } from '@app/components/account/account-list-item.layout';
 import { usePressable } from '@app/components/item-hover';
 import { useNativeSegwitAccountIndexAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
@@ -45,6 +46,7 @@ const ChooseAccountItem = memo(
       // Padding required on outer element to prevent jumpy virtualized list
       <Box pb="space.05">
         <AccountListItemLayout
+          accountAddresses={<AcccountAddresses index={account.index} />}
           accountName={
             <Suspense fallback={<AccountTitlePlaceholder account={account} />}>
               <styled.span textStyle="label.01">{name}</styled.span>

diff --git a/src/app/pages/receive/components/receive-item.tsx b/src/app/pages/receive/components/receive-item.tsx
@@ -3,8 +3,8 @@ import { HStack } from 'leather-styles/jsx';
 import { Button } from '@app/ui/components/button/button';
 import { CopyIcon } from '@app/ui/components/icons/copy-icon';
 import { QrCodeIcon } from '@app/ui/components/icons/qr-code-icon';
-import { Item } from '@app/ui/components/items/item';
-import { ItemWithButtonsLayout } from '@app/ui/components/items/item-with-buttons.layout';
+import { Item } from '@app/ui/components/item/item';
+import { ItemWithButtonsLayout } from '@app/ui/components/item/item-with-buttons.layout';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
 
 interface ReceiveItemProps {

diff --git a/...es/send/send-crypto-asset-form/components/recipient-accounts-drawer/account-list-item.tsx b/...es/send/send-crypto-asset-form/components/recipient-accounts-drawer/account-list-item.tsx
@@ -6,8 +6,9 @@ import { BitcoinSendFormValues, StacksSendFormValues } from '@shared/models/form
 
 import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { AccountTotalBalance } from '@app/components/account-total-balance';
+import { AcccountAddresses } from '@app/components/account/account-addresses';
 import { AccountAvatarItem } from '@app/components/account/account-avatar-item';
-import { AccountListItemLayout } from '@app/components/account/account-list-item-layout';
+import { AccountListItemLayout } from '@app/components/account/account-list-item.layout';
 import { AccountNameLayout } from '@app/components/account/account-name';
 import { useNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
@@ -36,6 +37,7 @@ export const AccountListItem = memo(({ index, stacksAccount, onClose }: AccountL
 
   return (
     <AccountListItemLayout
+      accountAddresses={<AcccountAddresses index={index} />}
       accountName={<AccountNameLayout>{name}</AccountNameLayout>}
       avatar={
         <AccountAvatarItem

diff --git a/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx b/src/app/pages/swap/swap-choose-asset/components/swap-asset-item.tsx
@@ -3,8 +3,8 @@ import { styled } from 'leather-styles/jsx';
 import { formatMoneyWithoutSymbol } from '@app/common/money/format-money';
 import { useGetFungibleTokenMetadataQuery } from '@app/query/stacks/tokens/fungible-tokens/fungible-token-metadata.query';
 import { isFtAsset } from '@app/query/stacks/tokens/token-metadata.utils';
-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 { useAlexSdkBalanceAsFiat } from '../../hooks/use-alex-sdk-fiat-price';
 import { SwapAsset } from '../../hooks/use-swap-form';
@@ -24,7 +24,7 @@ export function SwapAssetItem({ asset, dataTestId, onClick }: SwapAssetItemProps
   return (
     <Item.Root data-testid={dataTestId} isPressable onClick={onClick}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable
           flagImg={<styled.img src={asset.icon} width="40px" height="40px" alt="Swap asset" />}
           contentLeftTop={<Item.Text>{displayName}</Item.Text>}

diff --git a/...onents/items/item-with-buttons.layout.tsx → ...ponents/item/item-with-buttons.layout.tsx b/...onents/items/item-with-buttons.layout.tsx → ...ponents/item/item-with-buttons.layout.tsx
diff --git a/.../components/items/item-default.layout.tsx → src/app/ui/components/item/item.layout.tsx b/.../components/items/item-default.layout.tsx → src/app/ui/components/item/item.layout.tsx
@@ -4,7 +4,7 @@ import { Grid, GridItem } from 'leather-styles/jsx';
 
 import { ChevronUpIcon } from '../icons/chevron-up-icon';
 
-interface ItemDefaultLayoutProps {
+interface ItemLayoutProps {
   contentLeftTop: ReactNode;
   contentLeftBottom?: ReactNode;
   contentRightTop: ReactNode;
@@ -13,15 +13,15 @@ interface ItemDefaultLayoutProps {
   isDisabled?: boolean;
   isPressable?: boolean;
 }
-export function ItemDefaultLayout({
+export function ItemLayout({
   contentLeftTop,
   contentLeftBottom,
   contentRightTop,
   contentRightBottom,
   flagImg,
   isDisabled,
   isPressable,
-}: ItemDefaultLayoutProps) {
+}: ItemLayoutProps) {
   return (
     <Grid
       columns={3}

diff --git a/src/app/ui/components/items/item.stories.tsx → src/app/ui/components/item/item.stories.tsx b/src/app/ui/components/items/item.stories.tsx → src/app/ui/components/item/item.stories.tsx
@@ -7,8 +7,8 @@ import { CheckmarkIcon } from '../icons/checkmark-icon';
 import { CopyIcon } from '../icons/copy-icon';
 import { QrCodeIcon } from '../icons/qr-code-icon';
 import { Item } from './item';
-import { ItemDefaultLayout } from './item-default.layout';
 import { ItemWithButtonsLayout } from './item-with-buttons.layout';
+import { ItemLayout } from './item.layout';
 
 const meta: Meta<typeof Item.Root> = {
   component: Item.Root,
@@ -21,10 +21,9 @@ type Story = StoryObj<typeof Item.Root>;
 
 export const Default: Story = {
   render: () => (
-    // eslint-disable-next-line no-console
     <Item.Root>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           flagImg={<BtcIcon size="40px" />}
           contentLeftTop={<Item.Text>Label</Item.Text>}
           contentLeftBottom={<Item.Caption textStyle="caption.01">Caption</Item.Caption>}
@@ -38,10 +37,9 @@ export const Default: Story = {
 
 export const DefaultPressable: Story = {
   render: () => (
-    // eslint-disable-next-line no-console
-    <Item.Root isPressable onClick={() => console.log(`I'm interactive`)}>
+    <Item.Root isPressable onClick={() => {}}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable
           flagImg={<BtcIcon size="40px" />}
           contentLeftTop={<Item.Text>Label</Item.Text>}
@@ -56,10 +54,9 @@ export const DefaultPressable: Story = {
 
 export const Selected: Story = {
   render: () => (
-    // eslint-disable-next-line no-console
-    <Item.Root isPressable isSelected onClick={() => console.log(`I'm interactive`)}>
+    <Item.Root isPressable isSelected onClick={() => {}}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isPressable
           flagImg={<BtcIcon size="40px" />}
           contentLeftTop={
@@ -79,10 +76,9 @@ export const Selected: Story = {
 
 export const Disabled: Story = {
   render: () => (
-    // eslint-disable-next-line no-console
-    <Item.Root isDisabled isPressable onClick={() => console.log(`I'm interactive`)}>
+    <Item.Root isDisabled isPressable onClick={() => {}}>
       <Item.Content>
-        <ItemDefaultLayout
+        <ItemLayout
           isDisabled
           isPressable
           flagImg={<BtcIcon size="40px" />}
@@ -98,7 +94,6 @@ export const Disabled: Story = {
 
 export const WithButtons: Story = {
   render: () => (
-    // eslint-disable-next-line no-console
     <Item.Root>
       <Item.Content>
         <ItemWithButtonsLayout
@@ -123,7 +118,6 @@ export const WithButtons: Story = {
 
 export const WithButtonsDisabled: Story = {
   render: () => (
-    // eslint-disable-next-line no-console
     <Item.Root isDisabled>
       <Item.Content>
         <ItemWithButtonsLayout

diff --git a/src/app/ui/components/items/item.tsx → src/app/ui/components/item/item.tsx b/src/app/ui/components/items/item.tsx → src/app/ui/components/item/item.tsx