Add XCM encoder utility

packages/apps/public/locales/en/app-utilities.json

@@ -1,5 +1,6 @@
 {
   "Convert address": "Convert address",
+  "Encode XCM": "Encode XCM",
   "Hash data": "Hash data",
   "No": "No",
   "Yes": "Yes",

packages/apps/public/locales/en/translation.json

@@ -245,6 +245,7 @@
   "Enact end": "",
   "Enactment of the result of referendum {{id}}": "",
   "Enactment period": "",
+  "Encode XCM": "",
   "End of the current parachain auction {{id}}": "",
   "Ended": "",
   "Endorse": "",
@@ -1851,4 +1852,4 @@
   "{{value}}x voting balance, locked for {{duration}}x duration{{period}}": "",
   "{{when}} (est.)": "",
   "⚡️ Thunder Gateway": ""
-}
+}

packages/page-utilities/package.json

@@ -16,7 +16,8 @@
   "type": "module",
   "version": "0.134.2-2-x",
   "dependencies": {
-    "@polkadot/react-components": "^0.134.2-2-x"
+    "@polkadot/react-components": "^0.134.2-2-x",
+    "@polkadot/react-params": "^0.134.2-2-x"
   },
   "peerDependencies": {
     "react": "*",

packages/page-utilities/src/Xcm.tsx

@@ -0,0 +1,46 @@
+// Copyright 2017-2024 @polkadot/app-utilities authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { RawParamOnChangeValue } from '@polkadot/react-params/types';
+import type { HexString } from '@polkadot/util/types';
+
+import React, { useCallback, useState } from 'react';
+
+import { statics } from '@polkadot/react-api';
+import { Output } from '@polkadot/react-components';
+import { createValue, Holder, ParamComp } from '@polkadot/react-params';
+import { getTypeDef } from '@polkadot/types/create';
+import { u8aToHex } from '@polkadot/util';
+
+function Xcm (): React.ReactElement {
+  const VersionedXcmTypeDef = getTypeDef('XcmVersionedXcm');
+  const [encodedXcm, setEncodedXcm] = useState<HexString>('0x');
+
+  const onChange = useCallback(
+    (_index: number, rawXcm: RawParamOnChangeValue): void => {
+      const xcm = statics.api.createType(VersionedXcmTypeDef.type, rawXcm.value);
+
+      setEncodedXcm(u8aToHex(xcm.toU8a()));
+    },
+    [VersionedXcmTypeDef.type]
+  );
+
+  return (
+    <Holder>
+      <ParamComp
+        defaultValue={ createValue(statics.api.registry, { type: VersionedXcmTypeDef }) }
+        index={0}
+        onChange={onChange}
+        registry={statics.api.registry}
+        type={VersionedXcmTypeDef}
+      />
+      <Output
+        isDisabled={true}
+        value={encodedXcm}
+        withCopy={true}
+      />
+    </Holder>
+  );
+}
+
+export default React.memo(Xcm);

packages/page-utilities/src/index.tsx

@@ -9,6 +9,7 @@ import { Tabs } from '@polkadot/react-components';
 import Convert from './Convert.js';
 import Hash from './Hash.js';
 import { useTranslation } from './translate.js';
+import Xcm from './Xcm.js';
 
 interface Props {
   basePath: string;
@@ -27,6 +28,10 @@ function UtilitiesApp ({ basePath, className }: Props): React.ReactElement<Props
     {
       name: 'hash',
       text: t('Hash data')
+    },
+    {
+      name: 'xcm',
+      text: t('Encode XCM')
     }
   ]);
 
@@ -38,6 +43,12 @@ function UtilitiesApp ({ basePath, className }: Props): React.ReactElement<Props
       />
       <Routes>
         <Route path={basePath}>
+          <Route
+            element={
+              <Xcm />
+            }
+            path='xcm'
+          />
           <Route
             element={
               <Hash />

packages/page-utilities/tsconfig.build.json

@@ -7,6 +7,7 @@
   },
   "references": [
     { "path": "../page-settings/tsconfig.build.json" },
-    { "path": "../react-components/tsconfig.build.json" }
+    { "path": "../react-components/tsconfig.build.json" },
+    { "path": "../react-params/tsconfig.build.json" }
   ]
 }

packages/react-params/src/index.tsx

@@ -39,7 +39,7 @@ interface State {
   values?: RawParams;
 }
 
-export { Holder };
+export { createValue, Holder, ParamComp };
 
 class Params extends React.PureComponent<Props, State> {
   public override state: State = {

yarn.lock

@@ -1047,14 +1047,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@noble/hashes@npm:1.3.3, @noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.1":
+"@noble/hashes@npm:1.3.3, @noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.3, @noble/hashes@npm:~1.3.0, @noble/hashes@npm:~1.3.1":
   version: 1.3.3
   resolution: "@noble/hashes@npm:1.3.3"
   checksum: 10/1025ddde4d24630e95c0818e63d2d54ee131b980fe113312d17ed7468bc18f54486ac86c907685759f8a7e13c2f9b9e83ec7b67d1cc20836f36b5e4a65bb102d
   languageName: node
   linkType: hard
 
-"@noble/hashes@npm:^1.2.0, @noble/hashes@npm:^1.3.1, @noble/hashes@npm:^1.3.3":
+"@noble/hashes@npm:^1.3.1":
   version: 1.4.0
   resolution: "@noble/hashes@npm:1.4.0"
   checksum: 10/e156e65794c473794c52fa9d06baf1eb20903d0d96719530f523cc4450f6c721a957c544796e6efd0197b2296e7cd70efeb312f861465e17940a3e3c7e0febc6
@@ -1917,6 +1917,7 @@ __metadata:
   resolution: "@polkadot/app-utilities@workspace:packages/page-utilities"
   dependencies:
     "@polkadot/react-components": "npm:^0.134.2-2-x"
+    "@polkadot/react-params": "npm:^0.134.2-2-x"
   peerDependencies:
     react: "*"
     react-dom: "*"
@@ -6389,7 +6390,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^2.0.10, colorette@npm:^2.0.14, colorette@npm:^2.0.7":
+"colorette@npm:^2.0.10, colorette@npm:^2.0.14":
+  version: 2.0.16
+  resolution: "colorette@npm:2.0.16"
+  checksum: 10/8501db5750d3b8f0935bdc9e999cbd6b6420b5c127a8c0bd41aaf252fe3f6636ff3a5c51e6dc8e12692e0b96ee3d28a4dfd0f89a86ef167a5728d4c926b67f31
+  languageName: node
+  linkType: hard
+
+"colorette@npm:^2.0.7":
   version: 2.0.20
   resolution: "colorette@npm:2.0.20"
   checksum: 10/0b8de48bfa5d10afc160b8eaa2b9938f34a892530b2f7d7897e0458d9535a066e3998b49da9d21161c78225b272df19ae3a64d6df28b4c9734c0e55bbd02406f