Create new Type to show DEX tag in summary header (#2543)

* Create new Type to show DEX tag in summary header

* Add new response variable for interpreter

types/api/txInterpretation.ts

@@ -16,12 +16,23 @@ export type TxInterpretationVariable =
   TxInterpretationVariableString |
   TxInterpretationVariableCurrency |
   TxInterpretationVariableTimestamp |
+  TxInterpretationVariableExternalLink |
   TxInterpretationVariableToken |
   TxInterpretationVariableAddress |
   TxInterpretationVariableDomain |
-  TxInterpretationVariableMethod;
+  TxInterpretationVariableMethod |
+  TxInterpretationVariableDex;
 
-export type TxInterpretationVariableType = 'string' | 'currency' | 'timestamp' | 'token' | 'address' | 'domain' | 'method';
+export type TxInterpretationVariableType =
+  'string' |
+  'currency' |
+  'timestamp' |
+  'external_link' |
+  'token' |
+  'address' |
+  'domain' |
+  'method' |
+  'dexTag';
 
 export type TxInterpretationVariableString = {
   type: 'string';
@@ -38,6 +49,14 @@ export type TxInterpretationVariableTimestamp = {
   value: string;
 };
 
+export type TxInterpretationVariableExternalLink = {
+  type: 'external_link';
+  value: {
+    name: string;
+    link: string;
+  };
+};
+
 export type TxInterpretationVariableToken = {
   type: 'token';
   value: TokenInfo;
@@ -57,3 +76,14 @@ export type TxInterpretationVariableMethod = {
   type: 'method';
   value: string;
 };
+
+export type TxInterpretationVariableDex = {
+  type: 'dexTag';
+  value: {
+    name: string;
+    icon: string;
+    url: string;
+    app_id?: string;
+    app_icon?: string;
+  };
+};

ui/shared/tx/interpretation/TxInterpretation.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, chakra } from '@chakra-ui/react';
+import { Tooltip, Image, chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -9,6 +9,8 @@ import type {
   TxInterpretationVariableString,
 } from 'types/api/txInterpretation';
 
+import { route } from 'nextjs-routes';
+
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
 import * as mixpanel from 'lib/mixpanel/index';
@@ -19,6 +21,8 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import IconSvg from 'ui/shared/IconSvg';
+import LinkExternal from 'ui/shared/links/LinkExternal';
+import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import {
   extractVariables,
@@ -121,6 +125,9 @@ const TxInterpretationElementByType = (
     case 'timestamp': {
       return <chakra.span color="text_secondary" whiteSpace="pre">{ dayjs(Number(value) * 1000).format('MMM DD YYYY') }</chakra.span>;
     }
+    case 'external_link': {
+      return <LinkExternal href={ value.link }>{ value.name }</LinkExternal>;
+    }
     case 'method': {
       return (
         <Tag
@@ -134,6 +141,35 @@ const TxInterpretationElementByType = (
         </Tag>
       );
     }
+    case 'dexTag': {
+      const icon = value.app_icon || value.icon;
+      const name = (() => {
+        if (value.app_id && config.features.marketplace.isEnabled) {
+          return (
+            <LinkInternal
+              href={ route({ pathname: '/apps/[id]', query: { id: value.app_id } }) }
+            >
+              { value.name }
+            </LinkInternal>
+          );
+        }
+        if (value.url) {
+          return (
+            <LinkExternal href={ value.url }>
+              { value.name }
+            </LinkExternal>
+          );
+        }
+        return value.name;
+      })();
+
+      return (
+        <chakra.span display="inline-flex" alignItems="center" verticalAlign="top" _notFirst={{ marginLeft: 1 }} gap={ 1 }>
+          { icon && <Image src={ icon } alt={ value.name } width={ 5 } height={ 5 }/> }
+          { name }
+        </chakra.span>
+      );
+    }
   }
 };