fix: account addresses separator

package.json

@@ -370,7 +370,8 @@
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-hot-middleware": "2.26.1",
-    "webpack-shell-plugin": "0.5.0"
+    "webpack-shell-plugin": "0.5.0",
+    "type-fest": "4.30.2"
   },
   "resolutions": {
     "cross-spawn": "7.0.5",

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

@@ -3,22 +3,20 @@ import { HStack } from 'leather-styles/jsx';
 import { BulletSeparator, Caption } from '@leather.io/ui';
 import { truncateMiddle } from '@leather.io/utils';
 
-import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
-import { StacksAccountLoader } from '../loaders/stacks-account-loader';
+import { useBitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
+import { useStacksAccountLoader } from '../loaders/stacks-account-loader';
 
 interface AccountAddressesProps {
   index: number;
 }
 export function AcccountAddresses({ index }: AccountAddressesProps) {
+  const account = useStacksAccountLoader({ index });
+  const signer = useBitcoinNativeSegwitAccountLoader({ index });
   return (
     <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
       <BulletSeparator>
-        <StacksAccountLoader index={index}>
-          {account => <Caption>{truncateMiddle(account.address, 4)}</Caption>}
-        </StacksAccountLoader>
-        <BitcoinNativeSegwitAccountLoader index={index}>
-          {signer => <Caption>{truncateMiddle(signer.address, 4)}</Caption>}
-        </BitcoinNativeSegwitAccountLoader>
+        {account ? <Caption>{truncateMiddle(account.address, 4)}</Caption> : null}
+        {signer ? <Caption>{truncateMiddle(signer.address, 4)}</Caption> : null}
       </BulletSeparator>
     </HStack>
   );

src/app/components/loaders/bitcoin-account-loader.tsx

@@ -1,4 +1,5 @@
 import { P2Ret } from '@scure/btc-signer/payment';
+import type { DistributedOmit } from 'type-fest';
 
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
@@ -20,11 +21,9 @@ interface BtcAccountLoaderIndexProps extends BitcoinAccountLoaderBaseProps {
 
 type BtcAccountLoaderProps = BtcAccountLoaderCurrentProps | BtcAccountLoaderIndexProps;
 
-export function BitcoinNativeSegwitAccountLoader({
-  children,
-  fallback,
-  ...props
-}: BtcAccountLoaderProps) {
+export function useBitcoinNativeSegwitAccountLoader(
+  props: DistributedOmit<BtcAccountLoaderProps, 'children' | 'fallback'>
+) {
   const isBitcoinEnabled = useConfigBitcoinEnabled();
 
   const currentAccountIndex = useCurrentAccountIndex();
@@ -33,8 +32,18 @@ export function BitcoinNativeSegwitAccountLoader({
 
   const signer = useNativeSegwitSigner(properIndex);
 
-  if (!signer || !isBitcoinEnabled) return fallback;
-  return children(signer(0));
+  if (!signer || !isBitcoinEnabled) return null;
+  return signer(0);
+}
+
+export function BitcoinNativeSegwitAccountLoader({
+  children,
+  fallback,
+  ...props
+}: BtcAccountLoaderProps) {
+  const signer = useBitcoinNativeSegwitAccountLoader(props);
+  if (!signer) return fallback;
+  return children(signer);
 }
 
 export function BitcoinTaprootAccountLoader({ children, ...props }: BtcAccountLoaderProps) {

src/app/components/loaders/stacks-account-loader.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import type { DistributedOmit } from 'type-fest';
+
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import {
   useCurrentStacksAccount,
@@ -34,12 +36,14 @@ interface StacksAccountIndexLoaderProps extends StacksAccountBaseLoaderProps {
 
 type StacksAccountLoaderProps = StacksAccountCurrentLoaderProps | StacksAccountIndexLoaderProps;
 
-export function StacksAccountLoader({ children, ...props }: StacksAccountLoaderProps) {
+export function useStacksAccountLoader(
+  props: DistributedOmit<StacksAccountLoaderProps, 'children'>
+) {
   const stacksAccounts = useStacksAccounts();
   const currentAccountIndex = useCurrentAccountIndex();
   const properIndex = 'current' in props ? currentAccountIndex : props.index;
 
   const account = stacksAccounts[properIndex];
   if (!account) return null;
-  return children(account);
+  return account;
 }

src/app/features/asset-list/_components/connect-ledger-asset-button.tsx

@@ -27,7 +27,7 @@ export function ConnectLedgerButton({ chain }: ConnectLedgerButtonProps) {
   };
 
   return (
-    <Button variant="outline" onClick={onClick}>
+    <Button variant="outline" size="sm" onClick={onClick}>
       <HStack>
         <LedgerIcon />
         <styled.span textStyle="label.02">Connect&nbsp;{capitalize(chain)}</styled.span>