Support chopsticks with archive unstable body

package.json

@@ -27,7 +27,7 @@
     "lint:fix": "yarn workspaces foreach run lint:fix",
     "formatAll": "prettier --write .",
     "start:chopsticks-test-build-and-launch-all": "concurrently --kill-others 'npm run start:chopsticks' 'npm run ui:start-with-chopsticks' 'npm run docker:down && npm run docker:db && npm run build:indexer && npm run indexer:start:chopsticks-local' 'npm run start:graphql-server'",
-    "start:chopsticks": "npx --yes @acala-network/[email protected] --config chopsticks-config.yml",
+    "start:chopsticks": "npx --yes @acala-network/[email protected].2-1 --config chopsticks-config.yml",
     "start:graphql-server": "cd squid && npm run start:graphql-server",
     "indexer:start:chopsticks-ci": "cd squid && npm run start:chopsticks-ci",
     "indexer:start:chopsticks-local": "cd squid && npm run start:chopsticks-local",

packages/ui/cypress/support/page-objects/landingPage.ts

@@ -20,6 +20,7 @@ export const landingPage = {
   multisigCreationInfoBanner: (timeout = 4000) =>
     cy.get('[data-cy=banner-multisig-creation-info]', { timeout }),
   creationInfoBannerCloseButton: () => cy.get('[data-cy=button-close-multisig-creation-info]'),
+  transactionListLoader: () => cy.get('[data-cy=loader-transaction-list]'),
 
   // page specific assertion
   shouldHaveNoAccountErrorAndWikiLink() {

packages/ui/cypress/tests/address-bar.cy.ts

@@ -277,11 +277,15 @@ describe('Account address in the address bar', () => {
       watchedAccounts: [publicKey]
     })
 
+    multisigPage.accountHeader().within(() => {
+      accountDisplay.addressLabel().should('contain.text', address.slice(0, 6))
+    })
+
     // check that there is an address in the address bar
     cy.url({ timeout: 3000 }).should('include', address)
 
-    // react-router takes some time to get the search params inside the links
-    cy.wait(1000)
+    // wait for the loader to be done otherwise the test fails
+    landingPage.transactionListLoader().should('not.exist')
 
     topMenuItems.homeButton().click()
     cy.url().should('include', address)

packages/ui/cypress/tests/default-multisigs.cy.ts

@@ -15,24 +15,17 @@ describe('default Multisigs', () => {
       watchedAccounts: [lolmcshizPubKey]
     })
 
-    multisigPage.accountHeader().within(() => {
-      accountDisplay
-        .addressLabel()
-        .invoke('text')
-        .as('defaultPolkadotAddress')
-        .should('not.contain', polkadotSelectedMultiproxy.slice(0, 6))
-    })
-
-    cy.log('@defaultPolkadotAddress', cy.get('@defaultPolkadotAddress'))
-
     // select another one
-    topMenuItems.desktopMenu().within(() =>
+    topMenuItems.desktopMenu().within(() => {
       topMenuItems
-        .multiproxySelectorDesktop()
-        .wait(1000)
+        .multiproxySelectorInputDesktop()
+        .should('not.have.value', '')
         .click()
-        .type(`${polkadotSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`)
-    )
+        .type(`${polkadotSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`, {
+          delay: 100,
+          timeout: 6000
+        })
+    })
 
     // verify that it's displayed
     multisigPage.accountHeader().within(() => {
@@ -47,19 +40,19 @@ describe('default Multisigs', () => {
       accountDisplay
         .addressLabel()
         .invoke('text')
-        .as('defaultKusamaAddress')
         .should('not.contain', kusamaSelectedMultiproxy.slice(0, 6))
     })
 
-    cy.log('@defaultKusamaAddress', cy.get('@defaultKusamaAddress'))
-
     // select another one
     topMenuItems.desktopMenu().within(() =>
       topMenuItems
-        .multiproxySelectorDesktop()
-        .wait(1000)
+        .multiproxySelectorInputDesktop()
+        .should('not.have.value', '')
         .click()
-        .type(`${kusamaSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`)
+        .type(`${kusamaSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`, {
+          delay: 100,
+          timeout: 6000
+        })
     )
 
     // verify that it's displayed

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

@@ -117,17 +117,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', () => {
@@ -174,15 +171,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/cypress/tests/watched-accounts.cy.ts

@@ -11,9 +11,10 @@ import { multisigPage } from '../support/page-objects/multisigPage'
 import { editNamesModal } from '../support/page-objects/modals/editNamesModal'
 import { testAccounts } from '../fixtures/testAccounts'
 import { knownMultisigs } from '../fixtures/knownMultisigs'
+import { getShortAddress } from '../utils/getShortAddress'
 
 const addWatchAccount = (address: string, name?: string) => {
-  settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20 })
+  settingsPage.accountAddressInput().type(`${address}{enter}`, { delay: 20, timeout: 6000 })
 
   if (name) {
     settingsPage.accountNameInput().type(name)
@@ -304,7 +305,7 @@ describe('Watched Accounts', () => {
 
   it('can see all multisigs that a watched signatory is a member of', () => {
     const { publicKey: signatoryPublicKey } = testAccounts['Multisig Member Account 1']
-    const expectedAddresses = [
+    const expectedMultiproxies = [
       {
         address: knownMultisigs['test-simple-multisig-1'].address,
         expectedBadge: 'multi'
@@ -323,24 +324,33 @@ describe('Watched Accounts', () => {
     // ensure all multisigs are displayed in the multiproxy selector
     topMenuItems
       .multiproxySelectorOptionDesktop()
-      .should('have.length', expectedAddresses.length)
-      .each(($el, index) => {
+      .should('have.length', expectedMultiproxies.length)
+      .each(($el) => {
         cy.wrap($el).within(() => {
           accountDisplay
             .addressLabel()
-            .should('contain.text', expectedAddresses[index].address.slice(0, 6))
-          accountDisplay.watchedIcon().should('be.visible')
-          if (expectedAddresses[index].expectedBadge === 'pure') {
-            accountDisplay.pureBadge().should('be.visible')
-          } else {
-            accountDisplay.multisigBadge().should('be.visible')
-          }
+            .invoke('text')
+            .then((address) => {
+              const account = expectedMultiproxies.find((a) => {
+                return getShortAddress(a.address) === (address as unknown as string)
+              })
+              cy.wrap(account).should('not.be.undefined')
+              accountDisplay.watchedIcon().should('be.visible')
+              if (account?.expectedBadge === 'pure') {
+                accountDisplay.pureBadge().should('be.visible')
+              } else {
+                accountDisplay.multisigBadge().should('be.visible')
+              }
+            })
         })
       })
     // ensure each multisig that the signatory is a member of can be viewed
-    expectedAddresses.forEach(({ address }, index) => {
-      topMenuItems.multiproxySelectorDesktop().click()
-      topMenuItems.multiproxySelectorOptionDesktop().eq(index).click()
+    expectedMultiproxies.forEach(({ address }) => {
+      topMenuItems
+        .multiproxySelectorDesktop()
+        .click()
+        .type(`${address.slice(0, 6)}{downArrow}{enter}`)
+
       multisigPage
         .accountHeader()
         .should('be.visible')

packages/ui/cypress/utils/getShortAddress.ts

@@ -0,0 +1 @@
+export const getShortAddress = (address: string) => `${address.slice(0, 6)}..${address.slice(-6)}`

packages/ui/src/components/Transactions/TransactionList.tsx

@@ -29,7 +29,7 @@ const TransactionList = ({ className }: Props) => {
     <Box className={className}>
       <h3>Transactions</h3>
       {isLoadingPendingTxs && (
-        <LoaderStyled>
+        <LoaderStyled data-cy="loader-transaction-list">
           <CircularProgress />
         </LoaderStyled>
       )}

packages/ui/src/hooks/useCallInfoFromCallData.tsx

@@ -34,7 +34,7 @@ export const useCallInfoFromCallData = (callData?: HexString) => {
             decodedCall: tx?.decodedCall,
             call: tx,
             hash: hashFromTx(callData),
-            weight: { proof_size: weight.proof_size, ref_time: weight.ref_time },
+            weight,
             section: tx?.decodedCall.type,
             method: tx?.decodedCall.value.type
           })

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,9 +108,10 @@ 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
 
     if (!blockHash) {
       console.log('no hash found for height', blockNumber)

squid/.env.example

@@ -2,44 +2,10 @@ DB_PORT=5432
 GQL_PORT=4350
 SQD_DEBUG=sqd:processor:mapping
 
-#rococo
-# BLOCK_START=3510000
-# PREFIX=42
-# RPC_WS="wss://rococo-rpc.polkadot.io"
-# CHAIN_ID='rococo'
 
-#kusama
-# BLOCK_START=15000000
-# PREFIX=2
-# RPC_WS="wss://rpc.ibp.network/kusama"
-# CHAIN_ID='kusama'
-
-#polkadot
-# BLOCK_START=12000000
-# PREFIX=0
-# RPC_WS="wss://rpc.ibp.network/polkadot"
-# CHAIN_ID='polkadot'
-
-#rhala
-# BLOCK_START=0
-# PREFIX=30
-# RPC_WS="wss://rhala-node.phala.network/w
-# CHAIN_ID='rhala'
-
-#phala
-# BLOCK_START=2400000
-# PREFIX=30
-# RPC_WS="wss://priv-api.phala.network/phala/ws"
-# CHAIN_ID='phala'
-
-#khala
-# BLOCK_START=0
-# PREFIX=30
-# RPC_WS="wss://khala-api.phala.network/ws"
-# CHAIN_ID='khala'
-
-# hydra rococo
-RPC_WS="wss://hydradx-rococo-rpc.play.hydration.cloud"
-CHAIN_ID='hydra-rococo'
-BLOCK_START=1560491
-PREFIX=30
+#paseo
+BLOCK_START=0
+PREFIX=0
+RPC_WS="wss://rpc.ibp.network/paseo"
+CHAIN_ID='paseo'
+GATEWAY_URL="https://v2.archive.subsquid.io/network/paseo"