mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
ac8f673716
* Set result of calcTokenAmount to base 10 string in useTokenDisplayValue * Use primaryCurrency for amount in transaction breakdownd details * Hidden overflow and text overflow ellipsis on long primary currency in transaction-list-item * Empty prefix for token approvals * Conditional render primaryCurrency title in tx breakdown to `Spend limit amount` when tx is a token approve. * Add title to primaryCurrency in tx list item to show full amount on hover * Update ui/app/components/app/transaction-breakdown/transaction-breakdown.component.js DRY title conditional rendering. Co-authored-by: Mark Stacey <markjstacey@gmail.com>
50 lines
2.3 KiB
JavaScript
50 lines
2.3 KiB
JavaScript
import { useMemo } from 'react'
|
|
import { getTokenValueParam, calcTokenAmount } from '../helpers/utils/token-util'
|
|
import { useTokenData } from './useTokenData'
|
|
|
|
/**
|
|
* Defines the shape for the Token input parameter for useTokenDisplayValue
|
|
* @typedef {Object} Token
|
|
* @property {string} symbol - The string to use as a suffix for the token (eg. DAI)
|
|
* @property {number} decimals - The number of decimals to show when displaying this type of token
|
|
*/
|
|
|
|
/**
|
|
* useTokenDisplayValue
|
|
* Given the data string from txParams and a token object with symbol and decimals, return
|
|
* a displayValue that represents a string representing that token amount as a string. Also
|
|
* return a tokenData object for downstream usage and the suffix for the token to use as props
|
|
* for other hooks and/or components
|
|
* @param {string} [transactionData] - Raw data string from token transaction
|
|
* @param {Token} [token] - The token associated with this transaction
|
|
* @param {boolean} [isTokenTransaction] - Due to the nature of hooks, it isn't possible
|
|
* to conditionally call this hook. This flag will
|
|
* force this hook to return null if it set as false
|
|
* which indicates the transaction is not associated
|
|
* with a token.
|
|
* @return {string} - The computed displayValue of the provided transactionData and token
|
|
*/
|
|
export function useTokenDisplayValue (transactionData, token, isTokenTransaction = true) {
|
|
const tokenData = useTokenData(transactionData, isTokenTransaction)
|
|
const shouldCalculateTokenValue = Boolean(
|
|
// If we are currently processing a token transaction
|
|
isTokenTransaction &&
|
|
// and raw transaction data string is provided
|
|
transactionData &&
|
|
// and a token object has been provided
|
|
token &&
|
|
// and we are able to parse the token details from the raw data
|
|
tokenData?.args?.length,
|
|
)
|
|
|
|
const displayValue = useMemo(() => {
|
|
if (!shouldCalculateTokenValue) {
|
|
return null
|
|
}
|
|
const tokenValue = getTokenValueParam(tokenData)
|
|
return calcTokenAmount(tokenValue, token.decimals).toString(10)
|
|
}, [shouldCalculateTokenValue, tokenData, token])
|
|
|
|
return displayValue
|
|
}
|