Support chopsticks with archive unstable body

packages/ui/.env.staging

@@ -1,4 +1,4 @@
 VITE_CHAIN_ID="kusama"
 VITE_NETWORK_NAME="kusama"
 VITE_WS_PROVIDER="ws://localhost:8000"
-VITE_GRAPHQL_HTTP_PROVIDER="http://localhost:4350/graphql"
+VITE_GRAPHQL_HTTP_PROVIDER="http://localhost:4000/graphql"

packages/ui/cypress/tests/multisig-creation.cy.ts

@@ -115,17 +115,14 @@ describe('Multisig creation', () => {
 
       verifySignatories()
 
-      // this is commented because chopsticks doesnot support archive_unstable_hashByHeight
-      // see https://github.com/AcalaNetwork/chopsticks/issues/852
-
       // there should be a pending pure proxy creation
-      // multisigPage
-      //   .transactionList()
-      //   .should('be.visible')
-      //   .within(() => {
-      //     multisigPage.pendingTransactionItem().should('have.length', 1)
-      //     multisigPage.pendingTransactionCallName().should('contain.text', 'proxy.createPure')
-      //   })
+      multisigPage
+        .transactionList()
+        .should('be.visible')
+        .within(() => {
+          multisigPage.pendingTransactionItem().should('have.length', 1)
+          multisigPage.pendingTransactionCallName().should('contain.text', 'Proxy.create_pure')
+        })
     })
 
     it('Create a multisig without a pure proxy', () => {
@@ -173,15 +170,14 @@ describe('Multisig creation', () => {
 
       verifySignatories()
 
-      // this is commented because chopsticks doesnot support archive_unstable_hashByHeight
-      // see https://github.com/AcalaNetwork/chopsticks/issues/852
-      // multisigPage
-      //   .transactionList()
-      //   .should('be.visible')
-      //   .within(() => {
-      //     multisigPage.pendingTransactionItem().should('have.length', 1)
-      //     multisigPage.pendingTransactionCallName().should('contain.text', 'remark:')
-      //   })
+      // there should be a pending remark
+      multisigPage
+        .transactionList()
+        .should('be.visible')
+        .within(() => {
+          multisigPage.pendingTransactionItem().should('have.length', 1)
+          multisigPage.pendingTransactionCallName().should('contain.text', 'System.remark')
+        })
     })
   })
 

packages/ui/src/hooks/usePendingTx.tsx

@@ -38,7 +38,7 @@ type AggGroupedByDate = { [index: string]: CallDataInfoFromChain[] }
 const opaqueMetadata = Tuple(compact, Bin(Infinity)).dec
 
 const getExtDecoderAt = async (api: ApiType, client: PolkadotClient, blockHash?: string) => {
-  const rawMetadata = await (blockHash
+  const rawMetadata = await (blockHash && !import.meta.env.DEV
     ? client
         ._request<{
           result: HexString
@@ -108,16 +108,23 @@ const getCallDataFromChainPromise = (
 ) =>
   pendingTxData.map(async (pendingTx) => {
     const blockNumber = pendingTx.info.when.height
-    const blockHash = (
-      await client._request('archive_unstable_hashByHeight', [blockNumber])
-    )?.[0] as HexString | undefined
+    const blockHashes = await client._request('archive_unstable_hashByHeight', [blockNumber])
+    const blockHash = (Array.isArray(blockHashes) ? blockHashes?.[0] : blockHashes) as
+      | HexString
+      | undefined
+
+    console.log('pendingTx', pendingTx)
+    console.log('blockNumber', blockNumber)
+    console.log('blockHashes', blockHashes)
+    console.log('blockHash', blockHash)
 
     if (!blockHash) {
       console.log('no hash found for height', blockNumber)
       return
     }
 
     const body: HexString[] = await client._request('archive_unstable_body', [blockHash])
+    console.log('body', body)
 
     let date: Date | undefined