fix: only add dialogs to vdom when they are visible

leather-io · Apr 24, 2024 · 8f5f630 · 8f5f630
1 parent 5182ecd
commit 8f5f630
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 25 deletions.
diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx
@@ -10,13 +10,17 @@ import { NetworkListItem } from '@app/features/settings/network/network-list-ite
 import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks';
 import { useNetworks } from '@app/store/networks/networks.selectors';
 import { Button } from '@app/ui/components/button/button';
-import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Footer } from '@app/ui/components/containers/footers/footer';
 import { Header } from '@app/ui/components/containers/headers/header';
 
 const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[];
 
-export function NetworkDialog({ isShowing, onClose }: DialogProps) {
+interface NetworkDialogProps {
+  onClose(): void;
+}
+
+export function NetworkDialog({ onClose }: NetworkDialogProps) {
   const navigate = useNavigate();
   const networks = useNetworks();
   const analytics = useAnalytics();
@@ -40,7 +44,7 @@ export function NetworkDialog({ isShowing, onClose }: DialogProps) {
   return (
     <Dialog
       header={<Header variant="dialog" title="Change network" />}
-      isShowing={isShowing}
+      isShowing
       onClose={onClose}
       footer={
         <Footer>

diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx
@@ -200,15 +200,11 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps)
           </DropdownMenu.Content>
         </DropdownMenu.Portal>
       </DropdownMenu.Root>
-      <SignOut isShowing={showSignOut} onClose={() => setShowSignOut(!showSignOut)} />
-      <ThemeDialog
-        isShowing={showChangeTheme}
-        onClose={() => setShowChangeTheme(!showChangeTheme)}
-      />
-      <NetworkDialog
-        isShowing={showChangeNetwork}
-        onClose={() => setShowChangeNetwork(!showChangeNetwork)}
-      />
+      {showSignOut && <SignOut onClose={() => setShowSignOut(!showSignOut)} />}
+      {showChangeTheme && <ThemeDialog onClose={() => setShowChangeTheme(!showChangeTheme)} />}
+      {showChangeNetwork && (
+        <NetworkDialog onClose={() => setShowChangeNetwork(!showChangeNetwork)} />
+      )}
     </>
   );
 }
diff --git a/src/app/features/settings/sign-out/sign-out-confirm.tsx b/src/app/features/settings/sign-out/sign-out-confirm.tsx
@@ -9,22 +9,19 @@ import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { SignOutDialog } from './sign-out';
 
 interface SignOutProps {
-  isShowing: boolean;
   onClose(): void;
 }
 
-export function SignOut({ isShowing = false, onClose }: SignOutProps) {
+export function SignOut({ onClose }: SignOutProps) {
   const analytics = useAnalytics();
 
   useEffect(() => void analytics.track('sign-out'), [analytics]);
   const { signOut } = useKeyActions();
   const navigate = useNavigate();
-  // #4370 SMELL without this early return the wallet crashes on new install with
-  // : Wallet is neither of type `ledger` nor `software`
-  if (!isShowing) return null;
+
   return (
     <SignOutDialog
-      isShowing={isShowing}
+      isShowing
       onUserDeleteWallet={() => {
         void signOut().finally(() => {
           navigate(RouteUrls.Onboarding);

diff --git a/src/app/features/settings/theme/theme-dialog.tsx b/src/app/features/settings/theme/theme-dialog.tsx
@@ -2,12 +2,16 @@ import { useCallback } from 'react';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { UserSelectedTheme, themeLabelMap, useThemeSwitcher } from '@app/common/theme-provider';
-import { Dialog, DialogProps } from '@app/ui/components/containers/dialog/dialog';
+import { Dialog } from '@app/ui/components/containers/dialog/dialog';
 import { Header } from '@app/ui/components/containers/headers/header';
 
 import { ThemeListItem } from './theme-list-item';
 
-export function ThemeDialog({ isShowing, onClose }: DialogProps) {
+interface ThemeDialogProps {
+  onClose(): void;
+}
+
+export function ThemeDialog({ onClose }: ThemeDialogProps) {
   const themes = Object.keys(themeLabelMap) as UserSelectedTheme[];
   const analytics = useAnalytics();
   const { setUserSelectedTheme } = useThemeSwitcher();
@@ -25,11 +29,7 @@ export function ThemeDialog({ isShowing, onClose }: DialogProps) {
   const { userSelectedTheme } = useThemeSwitcher();
 
   return (
-    <Dialog
-      header={<Header variant="dialog" title="Change theme" />}
-      isShowing={isShowing}
-      onClose={onClose}
-    >
+    <Dialog header={<Header variant="dialog" title="Change theme" />} isShowing onClose={onClose}>
       {themes.map(theme => (
         <ThemeListItem
           key={theme}