chore: simplify how the account switch dialog is opened

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

@@ -3,24 +3,27 @@ import { memo } from 'react';
 import { CircleProps } from 'leather-styles/jsx';
 
 import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names';
-import { useDialogs } from '@app/common/hooks/use-dialogs';
 import { AccountAvatar } from '@app/components/account/account-avatar';
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 
-export const CurrentAccountAvatar = memo((props: CircleProps) => {
+interface CurrentAccountAvatar extends CircleProps {
+  toggleSwitchAccount(): void;
+}
+export const CurrentAccountAvatar = memo((props: CurrentAccountAvatar) => {
+  const { toggleSwitchAccount } = props;
   const accountIndex = useCurrentAccountIndex();
   const accounts = useStacksAccounts();
   const currentAccount = accounts[accountIndex] as StacksAccount | undefined;
   const name = useCurrentAccountDisplayName();
-  const { setIsShowingSwitchAccountsState } = useDialogs();
+
   if (!currentAccount) return null;
   return (
     <AccountAvatar
       index={currentAccount.index}
       name={name}
-      onClick={() => setIsShowingSwitchAccountsState(true)}
+      onClick={toggleSwitchAccount}
       publicKey={currentAccount.stxPublicKey}
       {...props}
     />

src/app/features/settings/settings.tsx

@@ -10,7 +10,6 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { useWalletType } from '@app/common/use-wallet-type';
 import { openInNewTab, openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab';
-import { SwitchAccountDialog } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
 import { SignOut } from '@app/features/settings/sign-out/sign-out-confirm';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { useHasLedgerKeys, useLedgerDeviceTargetId } from '@app/store/ledger/ledger.selectors';
@@ -34,9 +33,14 @@ import { ThemeList } from './theme/theme-list';
 // on the radix site it says latest version is 2.0.5 but we have 2.0.6?
 // designs here https://www.figma.com/file/2MLHeIeL6XPVi3Tc2DfFCr/%E2%9D%96-Leather-%E2%80%93-Design-System?node-id=10352%3A137700&mode=dev
 // use this to add in replaced routable dialogs - void analytics.page('view', '/save-secret-key');
-export function Settings({ triggerButton }: { triggerButton: React.ReactNode }) {
+
+interface SettingsProps {
+  triggerButton: React.ReactNode;
+  toggleSwitchAccount(): void;
+}
+
+export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) {
   const [showSignOut, setShowSignOut] = useState(false);
-  const [showSwitchAccount, setShowSwitchAccount] = useState(false);
   const hasGeneratedWallet = !!useCurrentStacksAccount();
   const { lockWallet } = useKeyActions();
 
@@ -52,10 +56,6 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode })
 
   return (
     <>
-      <SwitchAccountDialog
-        isShowing={showSwitchAccount}
-        onClose={() => setShowSwitchAccount(false)}
-      />
       <DropdownMenu.Root>
         <DropdownMenu.Trigger>{triggerButton}</DropdownMenu.Trigger>
         <DropdownMenu.Portal>
@@ -69,7 +69,7 @@ export function Settings({ triggerButton }: { triggerButton: React.ReactNode })
               {hasGeneratedWallet && (
                 <DropdownMenu.Item
                   data-testid={SettingsSelectors.SwitchAccountTrigger}
-                  onClick={() => setShowSwitchAccount(!showSwitchAccount)}
+                  onClick={toggleSwitchAccount}
                 >
                   <Flag img={<SwapIcon />} textStyle="label.02">
                     Switch account

src/app/features/stacks-transaction-request/transaction-error/error-messages.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { Navigate } from 'react-router-dom';
 
 import { STXTransferPayload, TransactionTypes } from '@stacks/connect';
@@ -8,9 +8,9 @@ import { RouteUrls } from '@shared/route-urls';
 import { closeWindow } from '@shared/utils';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
-import { useDialogs } from '@app/common/hooks/use-dialogs';
 import { useScrollLock } from '@app/common/hooks/use-scroll-lock';
 import { stacksValue } from '@app/common/stacks-utils';
+import { SwitchAccountDialog } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog';
 import { ErrorMessage } from '@app/features/stacks-transaction-request/transaction-error/error-message';
 import { useCurrentStacksAccountBalances } from '@app/query/stacks/balance/stx-balance.hooks';
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
@@ -24,7 +24,7 @@ interface InsufficientFundsActionButtonsProps {
 }
 function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionButtonsProps) {
   const analytics = useAnalytics();
-  const { setIsShowingSwitchAccountsState } = useDialogs();
+  const [showSwitchAccount, setShowSwitchAccount] = useState(false);
 
   const onGetStx = () => {
     void analytics.track(eventName);
@@ -34,8 +34,12 @@ function InsufficientFundsActionButtons({ eventName }: InsufficientFundsActionBu
 
   return (
     <>
+      <SwitchAccountDialog
+        isShowing={showSwitchAccount}
+        onClose={() => setShowSwitchAccount(false)}
+      />
       <Button onClick={onGetStx}>Get STX</Button>
-      <Button onClick={() => setIsShowingSwitchAccountsState(true)} variant="outline">
+      <Button onClick={() => setShowSwitchAccount(true)} variant="outline">
         Switch account
       </Button>
     </>

src/app/ui/components/layout/card/account/account.card.stories.tsx

@@ -19,7 +19,7 @@ export default meta;
 
 export function AccountCard() {
   return (
-    <Component name="leather.btc" balance="$1,000" onClickTrigger={() => null}>
+    <Component name="leather.btc" balance="$1,000">
       <Flex justify="space-between">
         <ActionButton icon={<ArrowUpIcon />} label="Send" />
         <ActionButton icon={<ArrowDownIcon />} label="Receive" />

src/app/ui/components/layout/page/home.layout.stories.tsx

@@ -25,7 +25,6 @@ export function HomeLayout() {
     <Component
       name="leather.btc"
       balance="$1,000"
-      onClickTrigger={() => null}
       accountActions={
         // TODO don't repeat this, compose story
         <Flex justify="space-between">