feat: display asset id in xcm format (#1345)

packages/extension-ui/package.json

@@ -22,6 +22,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@paraspell/xcm-analyser": "^1.2.0",
     "@polkadot/api": "^10.12.4",
     "@polkadot/extension-base": "0.46.10-5-x",
     "@polkadot/extension-chains": "0.46.10-5-x",

packages/extension-ui/src/Popup/Signing/Extrinsic.tsx

@@ -7,6 +7,7 @@ import type { AnyJson, SignerPayloadJSON } from '@polkadot/types/types';
 import type { BN } from '@polkadot/util';
 import type { TFunction } from '../../hooks/useTranslation.js';
 
+import { convertMultilocationToUrl } from '@paraspell/xcm-analyser';
 import React, { useMemo, useRef } from 'react';
 
 import { bnToBn, formatNumber } from '@polkadot/util';
@@ -106,6 +107,14 @@ function mortalityAsString (era: ExtrinsicEra, hexBlockNumber: string, t: TFunct
   });
 }
 
+function getHumanReadableAssetId (assetId: unknown): string | undefined {
+  try {
+    return convertMultilocationToUrl(assetId);
+  } catch (_) {
+    return undefined;
+  }
+}
+
 function Extrinsic ({ className, payload, request: { blockNumber, genesisHash, method, specVersion: hexSpec }, url }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const chain = useMetadata(genesisHash);
@@ -119,6 +128,7 @@ function Extrinsic ({ className, payload, request: { blockNumber, genesisHash, m
 
   const humanReadablePayload = payload.toHuman() as Record<string, unknown>;
   const assetId = humanReadablePayload['assetId'];
+  const humanReadableAssetId = getHumanReadableAssetId(assetId);
 
   return (
     <Table
@@ -152,7 +162,7 @@ function Extrinsic ({ className, payload, request: { blockNumber, genesisHash, m
           <td className='label'>{t('assetId')}</td>
           <td className='data'>
             <details>
-              <summary>{'{...}'}</summary>
+              <summary>{humanReadableAssetId || '{...}'}</summary>
               <pre>{JSON.stringify(assetId, null, 2)}</pre>
             </details>
           </td>

yarn.lock

@@ -869,6 +869,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@paraspell/xcm-analyser@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@paraspell/xcm-analyser@npm:1.2.0"
+  dependencies:
+    zod: "npm:^3.22.4"
+  checksum: 10/920f211583e2d01b0dc26812b010489c2611dd65244aba461efbc6688fdda0e18bb8820a71e5490cb96650c4d22ac5ae1eb86e04845b9601f083418032b7dc9c
+  languageName: node
+  linkType: hard
+
 "@polkadot-api/client@npm:0.0.1-492c132563ea6b40ae1fc5470dec4cd18768d182.1.0":
   version: 0.0.1-492c132563ea6b40ae1fc5470dec4cd18768d182.1.0
   resolution: "@polkadot-api/client@npm:0.0.1-492c132563ea6b40ae1fc5470dec4cd18768d182.1.0"
@@ -1207,6 +1216,7 @@ __metadata:
     "@fortawesome/free-regular-svg-icons": "npm:^6.5.1"
     "@fortawesome/free-solid-svg-icons": "npm:^6.5.1"
     "@fortawesome/react-fontawesome": "npm:^0.2.0"
+    "@paraspell/xcm-analyser": "npm:^1.2.0"
     "@polkadot/api": "npm:^10.12.4"
     "@polkadot/extension-base": "npm:0.46.10-5-x"
     "@polkadot/extension-chains": "npm:0.46.10-5-x"
@@ -15763,3 +15773,10 @@ __metadata:
   checksum: 10/f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"zod@npm:^3.22.4":
+  version: 3.22.4
+  resolution: "zod@npm:3.22.4"
+  checksum: 10/73622ca36a916f785cf528fe612a884b3e0f183dbe6b33365a7d0fc92abdbedf7804c5e2bd8df0a278e1472106d46674281397a3dd800fa9031dc3429758c6ac
+  languageName: node
+  linkType: hard