mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
9a1f27fe04
The `TokenBalance` component now uses the new `useTokenTracker` hook instead of the `withTokenTracker` higher-order component. The component was converted from a split container/component to a functional component so that the hook could be used. The prop `withSymbol` was removed from a few call sites, as it was no longer used. An empty string was substituted for any falsy `string` or `symbol` because that's what the `withTokenTracker` higher-order component did.
78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import React, { useContext } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { useDispatch, useSelector } from 'react-redux'
|
|
import { useHistory } from 'react-router-dom'
|
|
|
|
import Button from '../../ui/button'
|
|
import Identicon from '../../ui/identicon'
|
|
import TokenBalance from '../../ui/token-balance'
|
|
import { I18nContext } from '../../../contexts/i18n'
|
|
import WalletOverview from './wallet-overview'
|
|
import { SEND_ROUTE } from '../../../helpers/constants/routes'
|
|
import { useMetricEvent } from '../../../hooks/useMetricEvent'
|
|
import { getAssetImages } from '../../../selectors/selectors'
|
|
import { updateSendToken } from '../../../store/actions'
|
|
|
|
const TokenOverview = ({ className, token }) => {
|
|
const dispatch = useDispatch()
|
|
const t = useContext(I18nContext)
|
|
const sendTokenEvent = useMetricEvent({
|
|
eventOpts: {
|
|
category: 'Navigation',
|
|
action: 'Home',
|
|
name: 'Clicked Send: Token',
|
|
},
|
|
})
|
|
const history = useHistory()
|
|
const assetImages = useSelector(getAssetImages)
|
|
|
|
return (
|
|
<WalletOverview
|
|
balance={(
|
|
<div className="token-overview__balance">
|
|
<TokenBalance
|
|
className="token-overview__primary-balance"
|
|
token={token}
|
|
/>
|
|
</div>
|
|
)}
|
|
buttons={(
|
|
<Button
|
|
type="secondary"
|
|
className="token-overview__button"
|
|
onClick={() => {
|
|
sendTokenEvent()
|
|
dispatch(updateSendToken(token))
|
|
history.push(SEND_ROUTE)
|
|
}}
|
|
>
|
|
{ t('send') }
|
|
</Button>
|
|
)}
|
|
className={className}
|
|
icon={(
|
|
<Identicon
|
|
diameter={32}
|
|
address={token.address}
|
|
image={assetImages[token.address]}
|
|
/>
|
|
)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
TokenOverview.propTypes = {
|
|
className: PropTypes.string,
|
|
token: PropTypes.shape({
|
|
address: PropTypes.string.isRequired,
|
|
decimals: PropTypes.number,
|
|
symbol: PropTypes.string,
|
|
}).isRequired,
|
|
}
|
|
|
|
TokenOverview.defaultProps = {
|
|
className: undefined,
|
|
}
|
|
|
|
export default TokenOverview
|