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

Show fiat amounts inline on token transfers (#8786)

Browse Source 
Fiat amounts are now shown inline on token transfers in the transaction
list, where possible (i.e. where the conversion rates are known).

The logic for this hook is pretty tangled because it's used for so many
fundamentally different types of items (eth transactions, token
transactions, signature requests). In the future we should split these
into different components.

The documentation for the `useTokenFiatAmount` hook was updated to make
`tokenAmount` optional, but in practice it already worked as expected
without the amount being passed in.
This commit is contained in:
Mark Stacey 2020-06-12 14:37:06 -03:00 committed by GitHub
parent 016acd3e94
commit 3c98be4214
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ui/app/hooks/tests/useTransactionDisplayData.test.js
View File

@ -4,6 +4,7 @@ import { renderHook } from '@testing-library/react-hooks'
import sinon from 'sinon'
import transactions from '../../../../test/data/transaction-data.json'
import { useTransactionDisplayData } from '../useTransactionDisplayData'
import * as useTokenFiatAmountHooks from '../useTokenFiatAmount'
import { getPreferences, getShouldShowFiat, getNativeCurrency, getCurrentCurrency } from '../../selectors'
import { getTokens } from '../../ducks/metamask/metamask'
import * as i18nhooks from '../useI18nContext'
@ -74,11 +75,15 @@ const expectedResults = [
status: 'confirmed' },
]
let useSelector, useI18nContext
let useSelector, useI18nContext, useTokenFiatAmount
describe('useTransactionDisplayData', function () {
before(function () {
useSelector = sinon.stub(reactRedux, 'useSelector')
useTokenFiatAmount = sinon.stub(useTokenFiatAmountHooks, 'useTokenFiatAmount')
useTokenFiatAmount.returns((tokenAddress) => {
return tokenAddress ? '1 TST' : undefined
})
useI18nContext = sinon.stub(i18nhooks, 'useI18nContext')
useI18nContext.returns((key, variables) => getMessage('en', messages, key, variables))
useSelector.callsFake((selector) => {

2
ui/app/hooks/useTokenFiatAmount.js
View File

@ -6,7 +6,7 @@ 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} [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

11
ui/app/hooks/useTransactionDisplayData.js
View File

@ -3,6 +3,7 @@ import { getKnownMethodData } from '../selectors/selectors'
import { getTransactionActionKey, getStatusKey } from '../helpers/utils/transactions.util'
import { camelCaseToCapitalize } from '../helpers/utils/common.util'
import { useI18nContext } from './useI18nContext'
import { useTokenFiatAmount } from './useTokenFiatAmount'
import { PRIMARY, SECONDARY } from '../helpers/constants/common'
import { getTokenToAddress } from '../helpers/utils/token-util'
import { useUserPreferencedCurrency } from './useUserPreferencedCurrency'
@ -84,6 +85,7 @@ export function useTransactionDisplayData (transactionGroup) {
const token = isTokenCategory && knownTokens.find((token) => token.address === recipientAddress)
const tokenData = useTokenData(initialTransaction?.txParams?.data, isTokenCategory)
const tokenDisplayValue = useTokenDisplayValue(initialTransaction?.txParams?.data, token, isTokenCategory)
const tokenFiatAmount = useTokenFiatAmount(token?.address, tokenDisplayValue, token?.symbol)
let category
let title
@ -127,14 +129,15 @@ export function useTransactionDisplayData (transactionGroup) {
const [primaryCurrency] = useCurrencyDisplay(primaryValue, {
prefix,
displayValue: isTokenCategory && tokenDisplayValue,
suffix: isTokenCategory && token?.symbol,
displayValue: isTokenCategory ? tokenDisplayValue : undefined,
suffix: isTokenCategory ? token?.symbol : undefined,
...primaryCurrencyPreferences,
})
const [secondaryCurrency] = useCurrencyDisplay(primaryValue, {
prefix,
displayValue: isTokenCategory && tokenDisplayValue,
displayValue: isTokenCategory ? tokenFiatAmount : undefined,
hideLabel: isTokenCategory ? true : undefined,
...secondaryCurrencyPreferences,
})
@ -146,7 +149,7 @@ export function useTransactionDisplayData (transactionGroup) {
primaryCurrency,
senderAddress,
recipientAddress,
secondaryCurrency: isTokenCategory ? undefined : secondaryCurrency,
secondaryCurrency: isTokenCategory && !tokenFiatAmount ? undefined : secondaryCurrency,
status,
isPending: status in PENDING_STATUS_HASH,
}