From 8aca85c9b1fc56ab9a99063c014df5814897bc78 Mon Sep 17 00:00:00 2001
From: Serban Iorga <serban@parity.io>
Date: Tue, 12 Mar 2024 10:40:53 +0100
Subject: [PATCH] Add XCM encoder utility

---
 .../apps/public/locales/en/translation.json   |  3 +-
 packages/page-utilities/package.json          |  3 +-
 packages/page-utilities/src/Xcm.tsx           | 46 +++++++++++++++++++
 packages/page-utilities/src/index.tsx         | 11 +++++
 packages/page-utilities/tsconfig.build.json   |  3 +-
 packages/react-params/src/index.tsx           |  2 +-
 yarn.lock                                     |  1 +
 7 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 packages/page-utilities/src/Xcm.tsx

diff --git a/packages/apps/public/locales/en/translation.json b/packages/apps/public/locales/en/translation.json
index 24d448cb3126..15bdbb706862 100644
--- a/packages/apps/public/locales/en/translation.json
+++ b/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": ""
-}
\ No newline at end of file
+}
diff --git a/packages/page-utilities/package.json b/packages/page-utilities/package.json
index db16fcdd83c6..7fe280bb1f54 100644
--- a/packages/page-utilities/package.json
+++ b/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": "*",
diff --git a/packages/page-utilities/src/Xcm.tsx b/packages/page-utilities/src/Xcm.tsx
new file mode 100644
index 000000000000..84d8553f788d
--- /dev/null
+++ b/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);
diff --git a/packages/page-utilities/src/index.tsx b/packages/page-utilities/src/index.tsx
index 3da6b15a73d1..c6774b244617 100644
--- a/packages/page-utilities/src/index.tsx
+++ b/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 />
diff --git a/packages/page-utilities/tsconfig.build.json b/packages/page-utilities/tsconfig.build.json
index 493cf463764c..fc0a0b644355 100644
--- a/packages/page-utilities/tsconfig.build.json
+++ b/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" }
   ]
 }
diff --git a/packages/react-params/src/index.tsx b/packages/react-params/src/index.tsx
index 256510e85ea0..19349d36e4c3 100644
--- a/packages/react-params/src/index.tsx
+++ b/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 = {
diff --git a/yarn.lock b/yarn.lock
index ce47a1480038..0509d6a57a42 100644
--- a/yarn.lock
+++ b/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: "*"