add send token button on fullscreen asset list (#8812)

ui/app/components/app/asset-list-item/asset-list-item.js

@@ -1,10 +1,17 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import Identicon from '../../ui/identicon'
 import ListItem from '../../ui/list-item'
 import Tooltip from '../../ui/tooltip-v2'
 import InfoIcon from '../../ui/icon/info-icon.component'
+import Button from '../../ui/button'
+import { useI18nContext } from '../../../hooks/useI18nContext'
+import { useMetricEvent } from '../../../hooks/useMetricEvent'
+import { useDispatch } from 'react-redux'
+import { updateSendToken } from '../../../store/actions'
+import { useHistory } from 'react-router-dom'
+import { SEND_ROUTE } from '../../../helpers/constants/routes'
 
 
 const AssetListItem = ({
@@ -13,11 +20,23 @@ const AssetListItem = ({
   iconClassName,
   onClick,
   tokenAddress,
+  tokenSymbol,
+  tokenDecimals,
   tokenImage,
   warning,
   primary,
   secondary,
 }) => {
+  const t = useI18nContext()
+  const dispatch = useDispatch()
+  const history = useHistory()
+  const sendTokenEvent = useMetricEvent({
+    eventOpts: {
+      category: 'Navigation',
+      action: 'Home',
+      name: 'Clicked Send: Token',
+    },
+  })
   const titleIcon = warning
     ? (
       <Tooltip
@@ -40,6 +59,38 @@ const AssetListItem = ({
     )
     : null
 
+  const sendTokenButton = useMemo(() => {
+    if (tokenAddress == null) {
+      return null
+    }
+    return (
+      <Button
+        type="link"
+        className="asset-list-item__send-token-button"
+        onClick={(e) => {
+          e.stopPropagation()
+          sendTokenEvent()
+          dispatch(updateSendToken({
+            address: tokenAddress,
+            decimals: tokenDecimals,
+            symbol: tokenSymbol,
+          }))
+          history.push(SEND_ROUTE)
+        }}
+      >
+        {t('sendSpecifiedTokens', [tokenSymbol])}
+      </Button>
+    )
+  }, [
+    tokenSymbol,
+    sendTokenEvent,
+    tokenAddress,
+    tokenDecimals,
+    history,
+    t,
+    dispatch,
+  ])
+
   return (
     <ListItem
       className={classnames('asset-list-item', className)}
@@ -57,7 +108,12 @@ const AssetListItem = ({
         />
       )}
       midContent={midContent}
-      rightContent={<i className="fas fa-chevron-right asset-list-item__chevron-right" />}
+      rightContent={(
+        <>
+          <i className="fas fa-chevron-right asset-list-item__chevron-right" />
+          {sendTokenButton}
+        </>
+      )}
     />
   )
 }
@@ -68,6 +124,8 @@ AssetListItem.propTypes = {
   iconClassName: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   tokenAddress: PropTypes.string,
+  tokenSymbol: PropTypes.string,
+  tokenDecimals: PropTypes.number,
   tokenImage: PropTypes.string,
   warning: PropTypes.node,
   primary: PropTypes.string,

ui/app/components/app/asset-list-item/asset-list-item.scss

@@ -17,6 +17,13 @@
     margin-left: 8px;
   }
 
+  &__send-token-button {
+    display: none;
+    text-transform: uppercase;
+    width: fit-content;
+    font-size: 14px;
+  }
+
   @media (min-width: 576px) {
     &__warning-tooltip {
       display: none;
@@ -25,5 +32,13 @@
     .list-item__mid-content {
       display: flex;
     }
+
+    &__send-token-button {
+      display: inline-block;
+    }
+
+    &__chevron-right {
+      display: none;
+    }
   }
 }

ui/app/components/app/token-cell/token-cell.js

@@ -8,7 +8,15 @@ import { useI18nContext } from '../../../hooks/useI18nContext'
 import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
 
 
-export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) {
+export default function TokenCell ({
+  address,
+  decimals,
+  outdatedBalance,
+  symbol,
+  string,
+  image,
+  onClick,
+}) {
   const userAddress = useSelector(getSelectedAddress)
   const t = useI18nContext()
 
@@ -37,6 +45,8 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i
       onClick={onClick.bind(null, address)}
       tokenAddress={address}
       tokenImage={image}
+      tokenSymbol={symbol}
+      tokenDecimals={decimals}
       warning={warning}
       primary={`${string || 0} ${symbol}`}
       secondary={formattedFiat}
@@ -49,6 +59,7 @@ TokenCell.propTypes = {
   address: PropTypes.string,
   outdatedBalance: PropTypes.bool,
   symbol: PropTypes.string,
+  decimals: PropTypes.number,
   string: PropTypes.string,
   image: PropTypes.string,
   onClick: PropTypes.func.isRequired,

ui/app/components/app/token-cell/token-cell.test.js

@@ -5,6 +5,7 @@ import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import { mount } from 'enzyme'
 import sinon from 'sinon'
+import { MemoryRouter } from 'react-router-dom'
 
 import TokenCell from '.'
 import Identicon from '../../ui/identicon'
@@ -44,14 +45,16 @@ describe('Token Cell', function () {
     onClick = sinon.stub()
     wrapper = mount(
       <Provider store={store}>
-        <TokenCell
+        <MemoryRouter>
-          address="0xAnotherToken"
+          <TokenCell
-          symbol="TEST"
+            address="0xAnotherToken"
-          string="5.000"
+            symbol="TEST"
-          currentCurrency="usd"
+            string="5.000"
-          image="./test-image"
+            currentCurrency="usd"
-          onClick={onClick}
+            image="./test-image"
-        />
+            onClick={onClick}
+          />
+        </MemoryRouter>
       </Provider>
     )
   })