add native var

ui/tx/interpretation/TxInterpretation.tsx

@@ -5,13 +5,14 @@ import React from 'react';
 
 import type { TxInterpretationResponse, TxInterpretationVariable } from 'types/api/txInterpretation';
 
+import config from 'configs/app';
 import actionIcon from 'icons/action.svg';
 import type { ResourceError } from 'lib/api/resources';
 import dayjs from 'lib/date/dayjs';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 
-import { extractVariables, getStringChunks } from './utils';
+import { extractVariables, getStringChunks, NATIVE_COIN_SYMBOL_VAR_NAME } from './utils';
 
 type Props = {
   query: UseQueryResult<TxInterpretationResponse, ResourceError>;
@@ -54,8 +55,12 @@ const TxInterpretation = ({ query, className }: Props) => {
       { chunks.map((chunk, index) => {
         return (
           <>
-            <Text whiteSpace="pre">{ chunk }</Text>
-            { index < chunks.length - 1 && <TxInterpretationElementByType { ...variables[variablesNames[index]] }/> }
+            <Text whiteSpace="pre">{ chunk.trim() + ' ' }</Text>
+            { index < chunks.length - 1 && (
+              variablesNames[index] === NATIVE_COIN_SYMBOL_VAR_NAME ?
+                <Text>{ config.chain.currency.symbol }</Text> :
+                <TxInterpretationElementByType { ...variables[variablesNames[index]] }/>
+            ) }
           </>
         );
       }) }

ui/tx/interpretation/utils.test.ts

 import { extractVariables, checkTemplate } from './utils';
 
-const template = '{action_type} {source_amount} Ether into {destination_amount} {destination_token}';
+const template = '{action_type} {source_amount} {native} into {destination_amount} {destination_token}';
 
 it('extracts variables names', () => {
   const result = extractVariables(template);
-  expect(result).toEqual([ 'action_type', 'source_amount', 'destination_amount', 'destination_token' ]);
+  expect(result).toEqual([ 'action_type', 'source_amount', 'native', 'destination_amount', 'destination_token' ]);
 });
 
 it('check template true', () => {

ui/tx/interpretation/utils.ts

@@ -4,6 +4,8 @@ import type { TxInterpretationSummary } from 'types/api/txInterpretation';
 // eslint-disable-next-line regexp/no-useless-non-capturing-group
 export const VAR_REGEXP = /\{(?:[^}]+)\}/g;
 
+export const NATIVE_COIN_SYMBOL_VAR_NAME = 'native';
+
 export function extractVariables(templateString: string) {
 
   const matches = templateString.match(VAR_REGEXP);
@@ -22,7 +24,7 @@ export function checkTemplate(summary: TxInterpretationSummary) {
   const variablesNames = extractVariables(summary.summary_template);
 
   for (const name of variablesNames) {
-    if (!summary.summary_template_variables[name]) {
+    if (name !== NATIVE_COIN_SYMBOL_VAR_NAME && !summary.summary_template_variables[name]) {
       return false;
     }
   }