[DDW-587] Search progress

input-output-hk · Jun 8, 2021 · c19907c · c19907c
1 parent bed5d1f
commit c19907c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js
@@ -103,6 +103,7 @@ export default class WalletSummaryAssets extends Component<Props, State> {
     const searchButtonStyles = classNames([styles.searchButton, 'flat']);
     const isRestoreActive = wallet.isRestoring;
     const numberOfAssets = assets && assets.length ? assets.length : 0;
+    const noResults = !assets.length && searchValue.length >= 3;
 
     if (isLoadingAssets) {
       return (
@@ -131,32 +132,39 @@ export default class WalletSummaryAssets extends Component<Props, State> {
               className={styles.spendingPassword}
               onChange={this.setSearchValue}
               value={searchValue}
+              placeholder="Filter token list"
             />
-            <button
-              className={classNames([styles.clearButton, 'flat'])}
-              onClick={() => this.setSearchValue('')}
-            >
-              <SVGInline svg={crossIcon} />
-            </button>
+            {searchValue.length > 0 && (
+              <button
+                className={classNames([styles.clearButton, 'flat'])}
+                onClick={() => this.setSearchValue('')}
+              >
+                <SVGInline svg={crossIcon} />
+              </button>
+            )}
           </div>
         )}
         <BorderedBox>
           <div className={styles.assetsColumns}>
             <span>Token</span>
             <span>Amount</span>
           </div>
-          {assets.map((asset) => (
-            <WalletSummaryAsset
-              key={asset.uniqueId}
-              asset={asset}
-              onOpenAssetSend={onOpenAssetSend}
-              onCopyAssetItem={onCopyAssetItem}
-              onAssetSettings={onAssetSettings}
-              anyAssetWasHovered={anyAssetWasHovered}
-              assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
-              isLoading={isRestoreActive}
-            />
-          ))}
+          {noResults && (
+            <p className={styles.noResults}>No results matching your query</p>
+          )}
+          {!noResults &&
+            assets.map((asset) => (
+              <WalletSummaryAsset
+                key={asset.uniqueId}
+                asset={asset}
+                onOpenAssetSend={onOpenAssetSend}
+                onCopyAssetItem={onCopyAssetItem}
+                onAssetSettings={onAssetSettings}
+                anyAssetWasHovered={anyAssetWasHovered}
+                assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
+                isLoading={isRestoreActive}
+              />
+            ))}
         </BorderedBox>
       </div>
     );

diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss
@@ -118,6 +118,15 @@
   }
 }
 
+.noResults {
+  font-size: 12px;
+  line-height: 1.33;
+  font-family: var(--font-regular);
+  color: var(--theme-bordered-box-text-color);
+  letter-spacing: 0.4px;
+  margin: 0 12px;
+}
+
 .assetsColumns {
   display: flex;
   justify-content: space-between;