Add XCM encoder utility

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.133.2-120-x",
   "dependencies": {
-    "@polkadot/react-components": "^0.133.2-120-x"
+    "@polkadot/react-components": "^0.133.2-120-x",
+    "@polkadot/react-params": "^0.133.2-120-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

@@ -1846,6 +1846,7 @@ __metadata:
   resolution: "@polkadot/app-utilities@workspace:packages/page-utilities"
   dependencies:
     "@polkadot/react-components": "npm:^0.133.2-120-x"
+    "@polkadot/react-params": "npm:^0.133.2-120-x"
   peerDependencies:
     react: "*"
     react-dom: "*"