From 42421697d7e928df0a9726abce042e7dd298100b Mon Sep 17 00:00:00 2001
From: Leouarz <ghalielouarzazi@hotmail.com>
Date: Tue, 12 Dec 2023 14:03:45 +0100
Subject: [PATCH] fix app id display for ids > 63

---
 package.json                              |  1 +
 packages/react-components/src/Inspect.tsx |  6 ++----
 yarn.lock                                 | 10 ++++++++++
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 6900ea413fba..181a780fd636 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
     "test:skipped": "echo 'tests skipped'"
   },
   "dependencies": {
+    "avail-js-sdk": "^0.1.5",
     "axios": "^1.4.0",
     "dotenv": "^16.3.1"
   },
diff --git a/packages/react-components/src/Inspect.tsx b/packages/react-components/src/Inspect.tsx
index 0b3474420cde..306c0e385b08 100644
--- a/packages/react-components/src/Inspect.tsx
+++ b/packages/react-components/src/Inspect.tsx
@@ -11,6 +11,7 @@ import { u8aToHex } from '@polkadot/util';
 import Output from './Output.js';
 import { styled } from './styled.js';
 import { useTranslation } from './translate.js';
+import { decodeU8IntAppId } from "avail-js-sdk/helpers";
 
 interface Props {
   className?: string;
@@ -32,10 +33,7 @@ function formatInspect ({ inner = [], name = '', outer = [] }: Inspect, result:
       if (name !== 'appId') {
         value[i] = u8aToHex(outer[i], undefined, false);
       } else {
-        const hexAppId = u8aToHex(outer[i], undefined, false);
-        const appId = parseInt(hexAppId, 16) >> 2;
-
-        value[i] = appId.toString();
+        value[i] = decodeU8IntAppId(outer[i]);
       }
     }
 
diff --git a/yarn.lock b/yarn.lock
index 890c0bb54b37..ec0513db64f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4931,6 +4931,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"avail-js-sdk@npm:^0.1.5":
+  version: 0.1.5
+  resolution: "avail-js-sdk@npm:0.1.5"
+  dependencies:
+    "@polkadot/api": ^10.10.1
+  checksum: 58aeb7aece7d3d24fe260ea4a146d8653a6d4b601306e93ecdc50accac1ab8e18bab5fbcdc8d2549eb3de5d5f40f4192690ec9b82a4bc9e6957787efea598dc4
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.4":
   version: 1.0.4
   resolution: "available-typed-arrays@npm:1.0.4"
@@ -13956,6 +13965,7 @@ fsevents@~2.3.2:
     "@types/store": ^2.0.2
     "@types/styled-components": ^5.1.26
     "@types/styled-theming": ^2.2.5
+    avail-js-sdk: ^0.1.5
     axios: ^1.4.0
     concurrently: ^8.2.0
     devtron: ^1.4.0