fix: highlight selected accounts inside folders

tonkeeper · Sep 30, 2024 · 9eabe3f · 9eabe3f
1 parent 2aabb8f
commit 9eabe3f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 26 deletions.
diff --git a/packages/uikit/src/components/desktop/aside/AsideMenu.tsx b/packages/uikit/src/components/desktop/aside/AsideMenu.tsx
@@ -11,7 +11,7 @@ import { useIsScrolled } from '../../../hooks/useIsScrolled';
 import { scrollToTop } from '../../../libs/common';
 import { AppProRoute, AppRoute } from '../../../libs/routes';
 import { useMutateUserUIPreferences, useUserUIPreferences } from '../../../state/theme';
-import { useActiveAccount, useMutateActiveTonWallet } from '../../../state/wallet';
+import { useMutateActiveTonWallet } from '../../../state/wallet';
 import { fallbackRenderOver } from '../../Error';
 import { GlobeIcon, PlusIcon, SlidersIcon, StatsIcon } from '../../Icon';
 import { ScrollContainer } from '../../ScrollContainer';
@@ -97,6 +97,7 @@ const AsideMenuBottom = styled.div`
 const DraggingBlock = styled.div<{ $isDragging: boolean }>`
     cursor: pointer !important;
     border-radius: ${p => p.theme.corner2xSmall};
+    overflow: hidden;
     transition: background-color 0.15s ease-in-out;
     ${p =>
         p.$isDragging &&
@@ -119,10 +120,10 @@ export const AsideMenuDNDItem = forwardRef<
     HTMLDivElement,
     {
         item: Account | AccountsFolder;
-        isSelected: boolean;
+        mightBeHighlighted: boolean;
         isDragging: boolean;
     } & DraggableProvidedDraggableProps
->(({ item, isSelected, isDragging, ...rest }, fRef) => {
+>(({ item, mightBeHighlighted, isDragging, ...rest }, fRef) => {
     const { mutateAsync: setActiveWallet } = useMutateActiveTonWallet();
     const navigate = useNavigate();
     const location = useLocation();
@@ -148,11 +149,15 @@ export const AsideMenuDNDItem = forwardRef<
     return (
         <DraggingBlock ref={fRef} $isDragging={isDragging} {...rest}>
             {item.type === 'folder' ? (
-                <AsideMenuFolder folder={item} onClickWallet={onClickWallet} />
+                <AsideMenuFolder
+                    folder={item}
+                    onClickWallet={onClickWallet}
+                    accountMightBeHighlighted={mightBeHighlighted}
+                />
             ) : (
                 <AsideMenuAccount
                     account={item}
-                    isSelected={isSelected}
+                    mightBeHighlighted={mightBeHighlighted}
                     onClickWallet={onClickWallet}
                 />
             )}
@@ -162,9 +167,8 @@ export const AsideMenuDNDItem = forwardRef<
 
 const AccountDNDBlock: FC<{
     items: (Account | AccountsFolder)[];
-    activeAccount: Account;
     activeRoute: string | undefined;
-}> = ({ activeRoute, activeAccount, items }) => {
+}> = ({ activeRoute, items }) => {
     const { handleDrop, itemsOptimistic } = useAccountsDNDDrop(items);
 
     return (
@@ -189,9 +193,7 @@ const AccountDNDBlock: FC<{
                                         <AsideMenuDNDItem
                                             ref={p.innerRef}
                                             item={account}
-                                            isSelected={
-                                                !activeRoute && activeAccount.id === account.id
-                                            }
+                                            mightBeHighlighted={!activeRoute}
                                             isDragging={snapshot.isDragging}
                                             {...p.draggableProps}
                                             {...p.dragHandleProps}
@@ -213,7 +215,6 @@ const AsideMenuPayload: FC<{ className?: string }> = ({ className }) => {
     const { onOpen: addWallet } = useAddWalletNotification();
     const { proFeatures } = useAppContext();
     const items = useSideBarItems();
-    const activeAccount = useActiveAccount();
     const navigate = useNavigate();
     const location = useLocation();
     const { ref, closeBottom } = useIsScrolled();
@@ -285,11 +286,7 @@ const AsideMenuPayload: FC<{ className?: string }> = ({ className }) => {
                             <Label2>{t('aside_dashboard')}</Label2>
                         </AsideMenuItem>
                     )}
-                    <AccountDNDBlock
-                        items={items}
-                        activeAccount={activeAccount}
-                        activeRoute={activeRoute}
-                    />
+                    <AccountDNDBlock items={items} activeRoute={activeRoute} />
                 </ScrollContainer>
                 <AsideMenuBottom>
                     <DividerStyled isHidden={!closeBottom} />

diff --git a/packages/uikit/src/components/desktop/aside/AsideMenuAccount.tsx b/packages/uikit/src/components/desktop/aside/AsideMenuAccount.tsx
@@ -22,7 +22,7 @@ import { FC, forwardRef } from 'react';
 import { useIsHovered } from '../../../hooks/useIsHovered';
 import styled from 'styled-components';
 import { IconButtonTransparentBackground } from '../../fields/IconButton';
-import { useAccountsState, useActiveTonNetwork } from '../../../state/wallet';
+import { useAccountsState, useActiveAccount, useActiveTonNetwork } from '../../../state/wallet';
 import {
     useMultisigsOfAccountToDisplay,
     useMutateMultisigSelectedHostWallet
@@ -424,22 +424,26 @@ export const AsideMenuAccountMultisig = () => {
 
 export const AsideMenuAccount: FC<{
     account: Account;
-    isSelected: boolean;
+    mightBeHighlighted: boolean;
     onClickWallet: (walletId: WalletId) => void;
 }> = ({ account, ...rest }) => {
+    const activeAccount = useActiveAccount();
+    const isSelected = rest.mightBeHighlighted && activeAccount.id === account.id;
     switch (account.type) {
         case 'mnemonic':
-            return <AsideMenuAccountMnemonic account={account} {...rest} />;
+            return <AsideMenuAccountMnemonic account={account} isSelected={isSelected} {...rest} />;
         case 'ledger':
-            return <AsideMenuAccountLedger account={account} {...rest} />;
+            return <AsideMenuAccountLedger account={account} isSelected={isSelected} {...rest} />;
         case 'ton-only':
-            return <AsideMenuAccountTonOnly account={account} {...rest} />;
+            return <AsideMenuAccountTonOnly account={account} isSelected={isSelected} {...rest} />;
         case 'keystone':
-            return <AsideMenuAccountKeystone account={account} {...rest} />;
+            return <AsideMenuAccountKeystone account={account} isSelected={isSelected} {...rest} />;
         case 'watch-only':
-            return <AsideMenuAccountWatchOnly account={account} {...rest} />;
+            return (
+                <AsideMenuAccountWatchOnly account={account} isSelected={isSelected} {...rest} />
+            );
         case 'mam':
-            return <AsideMenuAccountMAM account={account} {...rest} />;
+            return <AsideMenuAccountMAM account={account} isSelected={isSelected} {...rest} />;
         case 'ton-multisig':
             return <AsideMenuAccountMultisig />;
         default:

diff --git a/packages/uikit/src/components/desktop/aside/AsideMenuFolder.tsx b/packages/uikit/src/components/desktop/aside/AsideMenuFolder.tsx
@@ -34,7 +34,8 @@ const AsideMenuSubItemContainer = styled.div`
 export const AsideMenuFolder: FC<{
     folder: AccountsFolder;
     onClickWallet: (walletId: WalletId) => void;
-}> = ({ folder, onClickWallet }) => {
+    accountMightBeHighlighted: boolean;
+}> = ({ folder, onClickWallet, accountMightBeHighlighted }) => {
     const { isHovered, ref } = useIsHovered<HTMLDivElement>();
     const { onOpen: onManageFolder } = useManageFolderNotification();
     const { isOpen, onToggle } = useDisclosure(folder.lastIsOpened);
@@ -68,7 +69,7 @@ export const AsideMenuFolder: FC<{
                         <AsideMenuAccount
                             key={account.id}
                             account={account}
-                            isSelected={false}
+                            mightBeHighlighted={accountMightBeHighlighted}
                             onClickWallet={onClickWallet}
                         />
                     ))}