Feat/hide 0 balances (#13306)

* Added token list functional component

* Added list - img not showing up

* Changed render list

* Removed unused code

* Clean up

* Lint

* Linted

* Add newline

* Filter out isERC721

* Added token list

* Cleaned up style

* Fixed typography

* Fixed lint

* Fixed spacing measure

* Lint cleanup

ui/components/app/app-components.scss

@@ -53,6 +53,7 @@
 @import 'flask/snap-settings-card/index';
 @import 'tab-bar/index';
 @import 'token-cell/token-cell';
+@import 'token-list-display/token-list-display';
 @import 'transaction-activity-log/index';
 @import 'transaction-breakdown/index';
 @import 'transaction-detail/index';

ui/components/app/token-list-display/index.js

@@ -0,0 +1 @@
+export { default } from './token-list-display';

ui/components/app/token-list-display/token-list-display.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { isEqual } from 'lodash';
+
+import { getShouldHideZeroBalanceTokens } from '../../../selectors';
+import { useTokenTracker } from '../../../hooks/useTokenTracker';
+import Identicon from '../../ui/identicon';
+import TokenBalance from '../../ui/token-balance';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getTokens } from '../../../ducks/metamask/metamask';
+
+export default function TokenListDisplay({ clickHandler }) {
+  const t = useI18nContext();
+  const shouldHideZeroBalanceTokens = useSelector(
+    getShouldHideZeroBalanceTokens,
+  );
+
+  const tokens = useSelector(getTokens, isEqual);
+  const { loading, tokensWithBalances } = useTokenTracker(
+    tokens,
+    true,
+    shouldHideZeroBalanceTokens,
+  );
+  if (loading) {
+    return <div className="loading-span">{t('loadingTokens')}</div>;
+  }
+
+  const sendableTokens = tokensWithBalances.filter((token) => !token.isERC721);
+
+  return (
+    <>
+      {sendableTokens.map((tokenData) => {
+        const { address, symbol, image } = tokenData;
+
+        return (
+          <div
+            key={address}
+            className="token-list-item"
+            onClick={() => clickHandler(tokenData)}
+          >
+            <Identicon address={address} diameter={36} image={image} />
+            <div className="token-list-item__data">
+              <div className="token-list-item__symbol">{symbol}</div>
+              <div className="token-list-item__balance">
+                <span className="token-list-item__balance__label">
+                  {`${t('balance')}:`}
+                </span>
+                <TokenBalance token={tokenData} />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+}
+
+TokenListDisplay.propTypes = {
+  clickHandler: PropTypes.func,
+};

ui/components/app/token-list-display/token-list-display.scss

@@ -0,0 +1,45 @@
+.loading-span {
+  display: flex;
+  height: 250px;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+}
+
+.token-list-item {
+  padding: 8px;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  cursor: pointer;
+  padding: 8px;
+
+  &:hover {
+    background-color: rgba($alto, 0.2);
+  }
+
+  &__data {
+    margin-left: 8px;
+  }
+
+  &__symbol {
+    @include Paragraph;
+
+    line-height: 140%;
+    margin-bottom: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__balance {
+    @include H7;
+
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  &__balance__label {
+    margin-right: 4px;
+  }
+}

ui/pages/send/send-content/send-asset-row/send-asset-row.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import SendRowWrapper from '../send-row-wrapper';
 import Identicon from '../../../../components/ui/identicon';
 import TokenBalance from '../../../../components/ui/token-balance';
+import TokenListDisplay from '../../../../components/app/token-list-display';
 import UserPreferencedCurrencyDisplay from '../../../../components/app/user-preferenced-currency-display';
 import { ERC20, ERC721, PRIMARY } from '../../../../helpers/constants/common';
 import { ASSET_TYPES } from '../../../../ducks/send';
@@ -162,9 +163,12 @@ export default class SendAssetRow extends Component {
           />
           <div className="send-v2__asset-dropdown__list">
             {this.renderNativeCurrency(true)}
-            {this.state.sendableTokens.map((token) =>
-              this.renderToken(token, true),
-            )}
+            <TokenListDisplay
+              clickHandler={(token) =>
+                this.selectToken(ASSET_TYPES.TOKEN, token)
+              }
+            />
+
             {this.state.sendableCollectibles.map((collectible) =>
               this.renderCollectible(collectible, true),
             )}