From e486b4aa68e053ff502dae19c5d4fe9252bf078f Mon Sep 17 00:00:00 2001
From: Anastasios <anastas3993@gmail.com>
Date: Mon, 23 Dec 2024 20:35:28 +0400
Subject: [PATCH] fix: account addresses separator

---
 .../components/account/account-addresses.tsx  | 14 +++++------
 .../loaders/bitcoin-account-loader.tsx        | 23 +++++++++++++------
 .../loaders/stacks-account-loader.tsx         | 12 +++++++++-
 .../connect-ledger-asset-button.tsx           |  2 +-
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/app/components/account/account-addresses.tsx b/src/app/components/account/account-addresses.tsx
index 53cbdaaba7d..81b6347f7e4 100644
--- a/src/app/components/account/account-addresses.tsx
+++ b/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>
   );
diff --git a/src/app/components/loaders/bitcoin-account-loader.tsx b/src/app/components/loaders/bitcoin-account-loader.tsx
index d9bb6998bd6..e3b15646769 100644
--- a/src/app/components/loaders/bitcoin-account-loader.tsx
+++ b/src/app/components/loaders/bitcoin-account-loader.tsx
@@ -1,4 +1,5 @@
 import { P2Ret } from '@scure/btc-signer/payment';
+import type { DistributiveOmit } from 'leather-styles/types';
 
 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: DistributiveOmit<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) {
diff --git a/src/app/components/loaders/stacks-account-loader.tsx b/src/app/components/loaders/stacks-account-loader.tsx
index 3db04fadf16..c2482f40b23 100644
--- a/src/app/components/loaders/stacks-account-loader.tsx
+++ b/src/app/components/loaders/stacks-account-loader.tsx
@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 
+import type { DistributiveOmit } from 'leather-styles/types';
+
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import {
   useCurrentStacksAccount,
@@ -34,12 +36,20 @@ interface StacksAccountIndexLoaderProps extends StacksAccountBaseLoaderProps {
 
 type StacksAccountLoaderProps = StacksAccountCurrentLoaderProps | StacksAccountIndexLoaderProps;
 
-export function StacksAccountLoader({ children, ...props }: StacksAccountLoaderProps) {
+export function useStacksAccountLoader(
+  props: DistributiveOmit<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 account;
+}
+
+export function StacksAccountLoader({ children, ...props }: StacksAccountLoaderProps) {
+  const account = useStacksAccountLoader(props);
+  if (!account) return null;
   return children(account);
 }
diff --git a/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx b/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx
index c9b3077ec23..81a49bc5420 100644
--- a/src/app/features/asset-list/_components/connect-ledger-asset-button.tsx
+++ b/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>