add link variable type to the interpretation (#3068)

* add link variable type to the interpretation

* add margin for dex and other links

types/api/txInterpretation.ts

@@ -21,7 +21,8 @@ export type TxInterpretationVariable =
   TxInterpretationVariableAddress |
   TxInterpretationVariableDomain |
   TxInterpretationVariableMethod |
-  TxInterpretationVariableDex;
+  TxInterpretationVariableDex |
+  TxInterpretationVariableLink;
 
 export type TxInterpretationVariableType =
   'string' |
@@ -32,7 +33,8 @@ export type TxInterpretationVariableType =
   'address' |
   'domain' |
   'method' |
-  'dexTag';
+  'dexTag' |
+  'link';
 
 export type TxInterpretationVariableString = {
   type: 'string';
@@ -87,3 +89,11 @@ export type TxInterpretationVariableDex = {
     app_icon?: string;
   };
 };
+
+export type TxInterpretationVariableLink = {
+  type: 'link';
+  value: {
+    name: string;
+    url: string;
+  };
+};

ui/shared/tx/interpretation/TxInterpretation.tsx

@@ -173,12 +173,15 @@ const TxInterpretationElementByType = (
       })();
 
       return (
-        <chakra.span display="inline-flex" alignItems="center" verticalAlign="top" _notFirst={{ marginLeft: 1 }} gap={ 1 }>
+        <chakra.span display="inline-flex" alignItems="center" verticalAlign="top" _notFirst={{ marginLeft: 1 }} gap={ 1 } mr={ 2 }>
           { icon && <Image src={ icon } alt={ value.name } width={ 5 } height={ 5 }/> }
           { name }
         </chakra.span>
       );
     }
+    case 'link': {
+      return <Link external href={ value.url }>{ value.name }</Link>;
+    }
   }
 };