m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Create useTokenFiatAmount hook (#8778)

Browse Source 
This hook is responsible for converting a token balance to fiat. It has
been extracted from the `TokenCell` component, and will be used
elsewhere in a future PR.
This commit is contained in:
Mark Stacey 2020-06-10 16:04:29 -03:00 committed by GitHub
parent e124a9b467
commit 0b86283c10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/app/components/app/token-cell/token-cell.js
View File

@ -3,27 +3,16 @@ import PropTypes from 'prop-types'
import React from 'react'
import AssetListItem from '../asset-list-item'
import { useSelector } from 'react-redux'
import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors'
import { getSelectedAddress } from '../../../selectors'
import { useI18nContext } from '../../../hooks/useI18nContext'
import { getFormattedTokenFiatAmount } from '../../../helpers/utils/token-util'
import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'
export default function TokenCell ({ address, outdatedBalance, symbol, string, image, onClick }) {
const contractExchangeRates = useSelector(getTokenExchangeRates)
const conversionRate = useSelector(getConversionRate)
const currentCurrency = useSelector(getCurrentCurrency)
const userAddress = useSelector(getSelectedAddress)
const t = useI18nContext()
const formattedFiat = getFormattedTokenFiatAmount(
contractExchangeRates[address],
conversionRate,
currentCurrency,
string,
symbol
)
const showFiat = Boolean(formattedFiat) && currentCurrency.toUpperCase() !== symbol
const formattedFiat = useTokenFiatAmount(address, string, symbol)
const warning = outdatedBalance
? (
@ -50,7 +39,7 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i
tokenImage={image}
warning={warning}
primary={`${string || 0} ${symbol}`}
secondary={showFiat ? formattedFiat : undefined}
secondary={formattedFiat}
/>
)

37
ui/app/hooks/useTokenFiatAmount.js Normal file
View File

@ -0,0 +1,37 @@
import { useMemo } from 'react'
import { useSelector } from 'react-redux'
import { getTokenExchangeRates, getConversionRate, getCurrentCurrency } from '../selectors'
import { getFormattedTokenFiatAmount } from '../helpers/utils/token-util'
/**
* Get the token balance converted to fiat and formatted for display
*
* @param {string} tokenAddress - The token address
* @param {string} [tokenAmount] - The token balance
* @param {string} [tokenSymbol] - The token symbol
* @return {string} - The formatted token amount in the user's chosen fiat currency
*/
export function useTokenFiatAmount (tokenAddress, tokenAmount, tokenSymbol) {
const contractExchangeRates = useSelector(getTokenExchangeRates)
const conversionRate = useSelector(getConversionRate)
const currentCurrency = useSelector(getCurrentCurrency)
const tokenExchangeRate = contractExchangeRates[tokenAddress]
const formattedFiat = useMemo(
() => getFormattedTokenFiatAmount(
tokenExchangeRate,
conversionRate,
currentCurrency,
tokenAmount,
tokenSymbol
),
[tokenExchangeRate, conversionRate, currentCurrency, tokenAmount, tokenSymbol]
)
if (currentCurrency.toUpperCase() === tokenSymbol) {
return undefined
}
return formattedFiat
}