[DDW-741] Implement Wallet sorting (#2775)

Co-authored-by: Daniel Main <daniel.main.cernhoff@icloud.com>

Author: renanvalentin

CHANGELOG.md

@@ -4,10 +4,13 @@
 
 ### Features
 
+- Implemented wallet sorting on sidebar menu ([PR 2775](https://github.com/input-output-hk/daedalus/pull/2775))
 - Implemented new token picker ([PR 2787](https://github.com/input-output-hk/daedalus/pull/2787))
 
 ## 4.8.0-FC1
 
+### Features
+
 - Added dynamic RTS flags setting ([PR 2758](https://github.com/input-output-hk/daedalus/pull/2758/files))
 - Updated messages about Cardano node sync on the initial screen ([PR 2827](https://github.com/input-output-hk/daedalus/pull/2827)) ([PR 2831](https://github.com/input-output-hk/daedalus/pull/2831))
 

jest.config.js

@@ -182,10 +182,10 @@ module.exports = {
   },
 
   // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  // transformIgnorePatterns: [
-  //   "/node_modules/",
-  //   "\\.pnp\\.[^\\/]+$"
-  // ],
+  transformIgnorePatterns: [
+    'node_modules/(?!react-polymorph)',
+    // "\\.pnp\\.[^\\/]+$"
+  ],
 
   // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
   // unmockedModulePathPatterns: undefined,

package.json

@@ -205,9 +205,11 @@
     "fireworks-js": "1.0.4",
     "form-data": "3.0.0",
     "fs-extra": "9.0.1",
+    "fuse.js": "6.5.3",
     "glob": "7.1.6",
     "graceful-fs": "4.2.4",
     "gulp": "4.0.2",
+    "highlight-words": "1.2.0",
     "history": "4.10.1",
     "humanize-duration": "3.23.1",
     "inquirer": "7.3.3",

source/renderer/app/actions/sidebar-actions.js

@@ -1,4 +1,5 @@
 // @flow
+
 import Action from './lib/Action';
 
 // ======= SIDEBAR ACTIONS =======

source/renderer/app/assets/images/sort-arrow.inline.svg

@@ -79,11 +79,16 @@ const Sidebar = ({
         <SidebarWalletsMenu
           wallets={menus?.wallets?.items || []}
           onAddWallet={onAddWallet}
-          onWalletItemClick={menus?.wallets?.actions?.onWalletItemClick}
+          onWalletItemClick={menus?.wallets?.actions.onWalletItemClick}
           isActiveWallet={(id) => id === menus?.wallets?.activeWalletId}
           isAddWalletButtonActive={pathname === ROUTES.WALLETS.ADD}
           isShelleyActivated={isShelleyActivated}
           visible={isShowingSubMenus}
+          onWalletSortBy={menus?.wallets?.actions.onWalletSortBy}
+          sortBy={menus?.wallets?.walletSortConfig?.sortBy}
+          sortOrder={menus?.wallets?.walletSortConfig?.sortOrder}
+          searchValue={menus?.wallets?.searchValue}
+          onSearch={menus?.wallets?.actions.onSearch}
         />
       )}
     </div>

source/renderer/app/components/sidebar/Sidebar.js

@@ -10,5 +10,6 @@
 }
 
 .visible {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }

source/renderer/app/components/sidebar/SidebarMenu.scss

@@ -1,13 +1,25 @@
 // @flow
-import type { SidebarWalletType } from '../../types/sidebarTypes';
+import type {
+  SidebarWalletType,
+  WalletSortByOptions,
+  WalletSortOrderOptions,
+  WalletSortConfig,
+} from '../../types/sidebarTypes';
 
 export type SidebarMenus = {
   wallets: ?{
     items: Array<SidebarWalletType>,
     activeWalletId: ?string,
     actions: {
       onWalletItemClick: Function,
+      onWalletSortBy: ({
+        sortBy: WalletSortByOptions,
+        sortOrder: WalletSortOrderOptions,
+      }) => void,
+      onSearch: (term: string) => void,
     },
+    walletSortConfig: WalletSortConfig,
+    searchValue: string,
   },
 };
 

source/renderer/app/components/sidebar/types.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { observer } from 'mobx-react';
 import classNames from 'classnames';
+import highlightWords from 'highlight-words';
 import SVGInline from 'react-svg-inline';
 import LegacyBadge, {
   LEGACY_BADGE_MODES,
@@ -26,6 +27,7 @@ type Props = {
   hasNotification: boolean,
   isHardwareWalletDisconnected?: boolean,
   isHardwareWallet: boolean,
+  searchValue: string,
 };
 
 @observer
@@ -45,6 +47,7 @@ export default class SidebarWalletMenuItem extends Component<Props> {
       hasNotification,
       isHardwareWalletDisconnected,
       isHardwareWallet,
+      searchValue,
     } = this.props;
 
     const showLegacyBadge = isLegacy && isShelleyActivated;
@@ -67,11 +70,29 @@ export default class SidebarWalletMenuItem extends Component<Props> {
         : styles.connected,
     ]);
 
+    const chunks = highlightWords({
+      text: title,
+      query: `/(${searchValue.split('').join('|')})/i`,
+    });
+
     return (
-      <button className={componentStyles} onClick={onClick}>
+      <button
+        className={componentStyles}
+        onClick={onClick}
+        data-testid="walletMenu"
+      >
         <div className={styles.meta}>
           <div className={styles.topContainer}>
-            <div className={styles.title}>{title}</div>
+            <div className={styles.title} data-testid={title}>
+              {chunks.map(({ text, match, key }) => (
+                <span
+                  key={key}
+                  className={match ? styles.searchMatch : styles.searchUnmatch}
+                >
+                  {text}
+                </span>
+              ))}
+            </div>
             {isHardwareWallet && (
               <div className={styles.hardwareWalletsIconWrapper}>
                 <SVGInline svg={hardwareWalletsIcon} className={hwIconStyles} />

source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.js

@@ -86,14 +86,22 @@
       justify-content: space-between;
 
       .title {
-        color: var(--theme-sidebar-menu-item-wallet-name-color);
         font-family: var(--font-regular);
         font-size: 18px;
         line-height: 1.5em;
         margin-top: -5.5px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+
+        .searchMatch {
+          color: var(--theme-sidebar-menu-item-wallet-name-color);
+        }
+
+        .searchUnmatch {
+          color: var(--theme-sidebar-menu-item-wallet-name-color);
+          opacity: 0.7;
+        }
       }
 
       .hardwareWalletsIconWrapper {