refactor asset-list-item to use list-item component (#8725)

* refactor asset items to use list-item Refactors the asset-list-item and token-cell to rely on the list-item component for UI. Little changes were needed to the list-item code to make this work! The result should be lots of eliminated code Co-authored-by: Mark Stacey <[email protected]>
MetaMask · Jun 3, 2020 · 591d84d · 591d84d
1 parent b902839
commit 591d84d
Show file tree

Hide file tree

Showing 16 changed files with 161 additions and 306 deletions.
diff --git a/test/e2e/address-book.spec.js b/test/e2e/address-book.spec.js
@@ -151,7 +151,7 @@ describe('MetaMask', function () {
     })
 
     it('balance renders', async function () {
-      const balance = await driver.findElement(By.css('[data-testid="wallet-balance"] .asset-list__primary-amount'))
+      const balance = await driver.findElement(By.css('[data-testid="wallet-balance"] .list-item__heading'))
       await driver.wait(until.elementTextMatches(balance, /25\s*ETH/))
       await driver.delay(regularDelayMs)
     })

diff --git a/test/e2e/metamask-ui.spec.js b/test/e2e/metamask-ui.spec.js
@@ -207,7 +207,7 @@ describe('MetaMask', function () {
     })
 
     it('balance renders', async function () {
-      const balance = await driver.findElement(By.css('[data-testid="wallet-balance"] .asset-list__primary-amount'))
+      const balance = await driver.findElement(By.css('[data-testid="wallet-balance"] .list-item__heading'))
       await driver.wait(until.elementTextMatches(balance, /100\s*ETH/))
       await driver.delay(regularDelayMs)
     })

diff --git a/test/e2e/threebox.spec.js b/test/e2e/threebox.spec.js
@@ -96,7 +96,7 @@ describe('MetaMask', function () {
       })
 
       it('balance renders', async function () {
-        const balance = await driver.findElement(By.css('[data-testid="wallet-balance"] .asset-list__primary-amount'))
+        const balance = await driver.findElement(By.css('[data-testid="wallet-balance"] .list-item__heading'))
         await driver.wait(until.elementTextMatches(balance, /25\s*ETH/))
         await driver.delay(regularDelayMs)
       })
@@ -202,7 +202,7 @@ describe('MetaMask', function () {
       })
 
       it('balance renders', async function () {
-        const balance = await driver2.findElement(By.css('[data-testid="wallet-balance"] .asset-list__primary-amount'))
+        const balance = await driver2.findElement(By.css('[data-testid="wallet-balance"] .list-item__heading'))
         await driver2.wait(until.elementTextMatches(balance, /25\s*ETH/))
         await driver2.delay(regularDelayMs)
       })

diff --git a/ui/app/components/app/asset-list-item/asset-list-item.js b/ui/app/components/app/asset-list-item/asset-list-item.js
@@ -2,49 +2,50 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Identicon from '../../ui/identicon'
+import ListItem from '../../ui/list-item'
 
 const AssetListItem = ({
-  children,
   className,
   'data-testid': dataTestId,
   iconClassName,
   onClick,
   tokenAddress,
   tokenImage,
   warning,
+  primary,
+  secondary,
 }) => {
   return (
-    <div
-      className={classnames('asset-list-item__container', className)}
+    <ListItem
+      className={classnames('asset-list-item', className)}
       data-testid={dataTestId}
+      title={primary}
+      titleIcon={warning}
+      subtitle={secondary}
       onClick={onClick}
-    >
-      <Identicon
-        className={iconClassName}
-        diameter={32}
-        address={tokenAddress}
-        image={tokenImage}
-      />
-      <div
-        className="asset-list-item__balance"
-      >
-        { children }
-      </div>
-      { warning }
-      <i className="fas fa-chevron-right asset-list-item__chevron-right" />
-    </div>
+      icon={(
+        <Identicon
+          className={iconClassName}
+          diameter={32}
+          address={tokenAddress}
+          image={tokenImage}
+        />
+      )}
+      rightContent={<i className="fas fa-chevron-right asset-list-item__chevron-right" />}
+    />
   )
 }
 
 AssetListItem.propTypes = {
-  children: PropTypes.node.isRequired,
   className: PropTypes.string,
   'data-testid': PropTypes.string,
   iconClassName: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   tokenAddress: PropTypes.string,
   tokenImage: PropTypes.string,
   warning: PropTypes.node,
+  primary: PropTypes.string,
+  secondary: PropTypes.string,
 }
 
 AssetListItem.defaultProps = {

diff --git a/ui/app/components/app/asset-list-item/asset-list-item.scss b/ui/app/components/app/asset-list-item/asset-list-item.scss
@@ -1,26 +1,10 @@
 .asset-list-item {
-  &__container {
-    display: flex;
-    padding: 24px 16px;
-    align-items: center;
-    border-top: 1px solid $mercury;
-    border-bottom: 1px solid $mercury;
-    cursor: pointer;
-
-    &:hover {
-      background-color: $Grey-000;
-    }
-  }
-
-  &__balance {
-    display: flex;
-    flex-direction: column;
-    margin-left: 15px;
-    flex: 1;
-    min-width: 0;
-  }
-
   &__chevron-right {
     color: $Grey-500;
   }
+
+  .list-item__subheading {
+    margin-top: 6px;
+    font-size: 14px;
+  }
 }
diff --git a/ui/app/components/app/asset-list/asset-list.js b/ui/app/components/app/asset-list/asset-list.js
@@ -6,11 +6,11 @@ import AddTokenButton from '../add-token-button'
 import TokenList from '../token-list'
 import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes'
 import AssetListItem from '../asset-list-item'
-import CurrencyDisplay from '../../ui/currency-display'
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'
 import { useMetricEvent } from '../../../hooks/useMetricEvent'
 import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency'
 import { getCurrentAccountWithSendEtherInfo, getNativeCurrency, getShouldShowFiat } from '../../../selectors'
+import { useCurrencyDisplay } from '../../../hooks/useCurrencyDisplay'
 
 const AssetList = ({ onClickAsset }) => {
   const history = useHistory()
@@ -41,29 +41,24 @@ const AssetList = ({ onClickAsset }) => {
     numberOfDecimals: secondaryNumberOfDecimals,
   } = useUserPreferencedCurrency(SECONDARY, { ethNumberOfDecimals: 4 })
 
+  const [primaryCurrencyDisplay] = useCurrencyDisplay(
+    selectedAccountBalance,
+    { numberOfDecimals: primaryNumberOfDecimals, currency: primaryCurrency }
+  )
+
+  const [secondaryCurrencyDisplay] = useCurrencyDisplay(
+    selectedAccountBalance,
+    { numberOfDecimals: secondaryNumberOfDecimals, currency: secondaryCurrency }
+  )
+
   return (
     <>
       <AssetListItem
         onClick={() => onClickAsset(nativeCurrency)}
         data-testid="wallet-balance"
-      >
-        <CurrencyDisplay
-          className="asset-list__primary-amount"
-          currency={primaryCurrency}
-          numberOfDecimals={primaryNumberOfDecimals}
-          value={selectedAccountBalance}
-        />
-        {
-          showFiat && (
-            <CurrencyDisplay
-              className="asset-list__secondary-amount"
-              currency={secondaryCurrency}
-              numberOfDecimals={secondaryNumberOfDecimals}
-              value={selectedAccountBalance}
-            />
-          )
-        }
-      </AssetListItem>
+        primary={primaryCurrencyDisplay}
+        secondary={showFiat && secondaryCurrencyDisplay}
+      />
       <TokenList
         onTokenClick={(tokenAddress) => {
           onClickAsset(tokenAddress)

diff --git a/ui/app/components/app/asset-list/asset-list.scss b/ui/app/components/app/asset-list/asset-list.scss
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
@@ -6,8 +6,6 @@
 
 @import 'app-header/index';
 
-@import 'asset-list/asset-list';
-
 @import 'asset-list-item/asset-list-item';
 
 @import '../ui/breadcrumbs/index';

diff --git a/ui/app/components/app/token-cell/index.js b/ui/app/components/app/token-cell/index.js
@@ -1 +1 @@
-export { default } from './token-cell.container'
+export { default } from './token-cell'
diff --git a/ui/app/components/app/token-cell/token-cell.component.js b/ui/app/components/app/token-cell/token-cell.component.js
diff --git a/ui/app/components/app/token-cell/token-cell.container.js b/ui/app/components/app/token-cell/token-cell.container.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export { default } from './token-cell.container'
		export { default } from './token-cell'