diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx index 479bcee08b..4bce4e28f3 100644 --- a/ui/shared/tx/interpretation/TxInterpretation.tsx +++ b/ui/shared/tx/interpretation/TxInterpretation.tsx @@ -19,7 +19,14 @@ import EnsEntity from 'ui/shared/entities/ens/EnsEntity'; import TokenEntity from 'ui/shared/entities/token/TokenEntity'; import IconSvg from 'ui/shared/IconSvg'; -import { extractVariables, getStringChunks, fillStringVariables, checkSummary, NATIVE_COIN_SYMBOL_VAR_NAME } from './utils'; +import { + extractVariables, + getStringChunks, + fillStringVariables, + checkSummary, + NATIVE_COIN_SYMBOL_VAR_NAME, + WEI_VAR_NAME, +} from './utils'; type Props = { summary?: TxInterpretationSummary; @@ -152,19 +159,23 @@ const TxInterpretation = ({ summary, isLoading, addressDataMap, className }: Pro { chunks.map((chunk, index) => { + let content = null; + if (variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME) { + content = { currencyUnits.ether + ' ' }; + } else if (variablesNames[index] === WEI_VAR_NAME) { + content = { currencyUnits.wei + ' ' }; + } else { + content = ( + + ); + } return ( { chunk.trim() + (chunk.trim() && variablesNames[index] ? ' ' : '') } - { index < variablesNames.length && ( - variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME ? - { currencyUnits.ether + ' ' } : - ( - - ) - ) } + { index < variablesNames.length && content } ); }) } diff --git a/ui/shared/tx/interpretation/utils.test.ts b/ui/shared/tx/interpretation/utils.test.ts index f60532cb12..f54357ec2f 100644 --- a/ui/shared/tx/interpretation/utils.test.ts +++ b/ui/shared/tx/interpretation/utils.test.ts @@ -13,7 +13,7 @@ it('split string without capturing variables', () => { }); it('checks that summary is valid', () => { - const result = checkSummary('{foo} {native} {bar}', { foo: { type: 'string', value: 'foo' }, bar: { type: 'string', value: 'bar' } }); + const result = checkSummary('{foo} {native} {bar} {wei}', { foo: { type: 'string', value: 'foo' }, bar: { type: 'string', value: 'bar' } }); expect(result).toBe(true); }); diff --git a/ui/shared/tx/interpretation/utils.ts b/ui/shared/tx/interpretation/utils.ts index bf480f3f8b..28e3d4b71d 100644 --- a/ui/shared/tx/interpretation/utils.ts +++ b/ui/shared/tx/interpretation/utils.ts @@ -6,6 +6,7 @@ import type { TxInterpretationVariable } from 'types/api/txInterpretation'; export const VAR_REGEXP = /\{(?:[^}]+)\}/g; export const NATIVE_COIN_SYMBOL_VAR_NAME = 'native'; +export const WEI_VAR_NAME = 'wei'; export function extractVariables(templateString: string) { @@ -24,7 +25,7 @@ export function checkSummary(template: string, variables: Record