diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.js index 1fd48b1592..a8b757d84b 100644 --- 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 { 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,13 +132,16 @@ export default class WalletSummaryAssets extends Component { className={styles.spendingPassword} onChange={this.setSearchValue} value={searchValue} + placeholder="Filter token list" /> - + {searchValue.length > 0 && ( + + )} )} @@ -145,18 +149,22 @@ export default class WalletSummaryAssets extends Component { Token Amount - {assets.map((asset) => ( - - ))} + {noResults && ( +

No results matching your query

+ )} + {!noResults && + assets.map((asset) => ( + + ))}
); diff --git a/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss b/source/renderer/app/components/wallet/summary/WalletSummaryAssets.scss index 27c605a39b..05922a3d56 100644 --- 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;