fix: default to first account as useCurrentStacksAccount returns unde…

…fined, ref #5683

src/app/features/current-account/current-account-avatar.tsx

@@ -10,7 +10,7 @@ interface CurrentAccountAvatar extends CircleProps {
 export function CurrentAccountAvatar() {
   const stacksAccount = useCurrentStacksAccount();
   const { data: name = 'Account' } = useCurrentAccountDisplayName();
-  if (!stacksAccount) return null;
+  if (!stacksAccount) return <AccountAvatar index={0} name={name} publicKey="" />;
 
   return (
     <AccountAvatar index={stacksAccount.index} name={name} publicKey={stacksAccount.stxPublicKey} />

src/app/features/current-account/current-account-name.tsx

@@ -6,7 +6,6 @@ import { Box, BoxProps, styled } from 'leather-styles/jsx';
 import { HasChildren } from '@app/common/has-children';
 import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
 import { truncateString } from '@app/common/utils';
-import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 function AccountNameTitle({ children, ...props }: HasChildren & BoxProps) {
@@ -20,9 +19,7 @@ function AccountNameTitle({ children, ...props }: HasChildren & BoxProps) {
 }
 
 const AccountNameSuspense = memo((props: BoxProps) => {
-  const currentAccount = useCurrentStacksAccount();
   const { data: name = 'Account' } = useCurrentAccountDisplayName();
-  if (!currentAccount || typeof currentAccount.index === 'undefined') return null;
   // FIXME: The name is truncated here with JS but we could just use CSS to do this
   const nameCharLimit = 18;
   const isLong = name.length > nameCharLimit;

src/app/features/total-balance/total-balance.tsx

@@ -33,7 +33,7 @@ function TotalBalanceSuspense({ displayAddresssBalanceOf }: TotalBalanceProps) {
   return (
     <TotalBalanceLayout>
       <HStack alignItems="center" justifyContent="right">
-        {account && displayAddresssBalanceOf === 'stx' && <StxBalance address={account.address} />}
+        {displayAddresssBalanceOf === 'stx' && <StxBalance address={account?.address || ''} />}
         {isBitcoinEnabled && displayAddresssBalanceOf === 'all' && <BtcBalance />}
       </HStack>
     </TotalBalanceLayout>