mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Create useTokenFiatAmount
hook (#8778)
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:
parent
e124a9b467
commit
0b86283c10
@ -3,27 +3,16 @@ import PropTypes from 'prop-types'
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import AssetListItem from '../asset-list-item'
|
import AssetListItem from '../asset-list-item'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { getTokenExchangeRates, getConversionRate, getCurrentCurrency, getSelectedAddress } from '../../../selectors'
|
import { getSelectedAddress } from '../../../selectors'
|
||||||
import { useI18nContext } from '../../../hooks/useI18nContext'
|
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 }) {
|
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 userAddress = useSelector(getSelectedAddress)
|
||||||
const t = useI18nContext()
|
const t = useI18nContext()
|
||||||
|
|
||||||
const formattedFiat = getFormattedTokenFiatAmount(
|
const formattedFiat = useTokenFiatAmount(address, string, symbol)
|
||||||
contractExchangeRates[address],
|
|
||||||
conversionRate,
|
|
||||||
currentCurrency,
|
|
||||||
string,
|
|
||||||
symbol
|
|
||||||
)
|
|
||||||
|
|
||||||
const showFiat = Boolean(formattedFiat) && currentCurrency.toUpperCase() !== symbol
|
|
||||||
|
|
||||||
const warning = outdatedBalance
|
const warning = outdatedBalance
|
||||||
? (
|
? (
|
||||||
@ -50,7 +39,7 @@ export default function TokenCell ({ address, outdatedBalance, symbol, string, i
|
|||||||
tokenImage={image}
|
tokenImage={image}
|
||||||
warning={warning}
|
warning={warning}
|
||||||
primary={`${string || 0} ${symbol}`}
|
primary={`${string || 0} ${symbol}`}
|
||||||
secondary={showFiat ? formattedFiat : undefined}
|
secondary={formattedFiat}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
37
ui/app/hooks/useTokenFiatAmount.js
Normal file
37
ui/app/hooks/useTokenFiatAmount.js
Normal 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
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user