Squid v7 with multisig replication for all system chains

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

@@ -1,5 +1,5 @@
 import { accountDisplay } from '../support/page-objects/components/accountDisplay'
-import { landingPageNetwork } from '../fixtures/landingData'
+import { landingPageNetwork, landingPageNetworkAddress } from '../fixtures/landingData'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { multisigPage } from '../support/page-objects/multisigPage'
 
@@ -15,11 +15,17 @@ describe('default Multisigs', () => {
       watchedAccounts: [lolmcshizPubKey]
     })
 
+    // verify that it's displayed
+    multisigPage.accountHeader().within(() => {
+      accountDisplay
+        .addressLabel()
+        .should('not.contain.text', polkadotSelectedMultiproxy.slice(0, 6))
+    })
+
     // select another one
     topMenuItems.desktopMenu().within(() => {
       topMenuItems
         .multiproxySelectorInputDesktop()
-        .should('not.have.value', '')
         .click()
         .type(`${polkadotSelectedMultiproxy.slice(0, 6)}{downArrow}{enter}`, {
           delay: 100,
@@ -34,9 +40,14 @@ describe('default Multisigs', () => {
 
     // go on Kusama and do the same
     // check the default multiproxy
-    cy.visit(landingPageNetwork('kusama'))
+    cy.visit(
+      landingPageNetworkAddress({
+        network: 'kusama',
+        address: 'Coo7PHJP8MssUbqeeHwfC6DVjNCccw5N4pCtFwZVPJzb7JM'
+      })
+    )
 
-    multisigPage.accountHeader().within(() => {
+    multisigPage.accountHeader(8000).within(() => {
       accountDisplay
         .addressLabel()
         .invoke('text')
@@ -56,15 +67,15 @@ describe('default Multisigs', () => {
     )
 
     // verify that it's displayed
-    multisigPage.accountHeader().within(() => {
+    multisigPage.accountHeader(8000).within(() => {
       accountDisplay.addressLabel().should('contain.text', kusamaSelectedMultiproxy.slice(0, 6))
     })
 
     // go back on Polkadot and verify the last used one is selected
     cy.visit(landingPageNetwork('polkadot'))
 
     // verify that it's displayed
-    multisigPage.accountHeader().within(() => {
+    multisigPage.accountHeader(8000).within(() => {
       accountDisplay.addressLabel().should('contain.text', polkadotSelectedMultiproxy.slice(0, 6))
     })
 
@@ -74,7 +85,7 @@ describe('default Multisigs', () => {
     cy.visit(landingPageNetwork('kusama'))
 
     // verify that it's displayed
-    multisigPage.accountHeader().within(() => {
+    multisigPage.accountHeader(8000).within(() => {
       accountDisplay.addressLabel().should('contain.text', kusamaSelectedMultiproxy.slice(0, 6))
     })
 

packages/ui/graphql.config.json

@@ -1,6 +1,6 @@
 {
   "overwrite": true,
-  "schema": "https://chainsafe.squids.live/multix-arrow@v6/api/graphql",
+  "schema": "https://chainsafe.squids.live/multix-arrow@v7/api/graphql",
   "documents": "src/**/*.graphql",
   "generates": {
     "src/gql/": {

packages/ui/src/App.tsx

@@ -10,7 +10,7 @@ import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles'
 import { AccountNamesContextProvider } from './contexts/AccountNamesContext'
 import { NetworkContextProvider } from './contexts/NetworkContext'
 import MainLayout from './components/layout/Main'
-import { WatchedAddressesContextProvider } from './contexts/WatchedAddressesContext'
+import { WatchedAccountsContextProvider } from './contexts/WatchedAccountsContext'
 import { WalletConnectContextProvider } from './contexts/WalletConnectContext'
 import { ModalsContextProvider } from './contexts/ModalsContext'
 import { PplApiContextProvider } from './contexts/PeopleChainApiContext'
@@ -34,7 +34,7 @@ const App = () => {
                 <ApiContextProvider>
                   <PplApiContextProvider>
                     <AssetsContextProvider>
-                      <WatchedAddressesContextProvider>
+                      <WatchedAccountsContextProvider>
                         <HiddenAccountsContextProvider>
                           <AccountContextProvider>
                             <AccountNamesContextProvider>
@@ -48,7 +48,7 @@ const App = () => {
                             </AccountNamesContextProvider>
                           </AccountContextProvider>
                         </HiddenAccountsContextProvider>
-                      </WatchedAddressesContextProvider>
+                      </WatchedAccountsContextProvider>
                     </AssetsContextProvider>
                   </PplApiContextProvider>
                 </ApiContextProvider>

packages/ui/src/components/ConnectCreateOrWatch.tsx

@@ -3,14 +3,14 @@ import { styled } from '@mui/material'
 import { createSearchParams, useNavigate, useSearchParams } from 'react-router'
 import { Button } from './library'
 import { WATCH_ACCOUNT_ANCHOR } from '../pages/Settings/Settings'
-import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
+import { useWatchedAccounts } from '../contexts/WatchedAccountsContext'
 import { useNetwork } from '../contexts/NetworkContext'
 import { useAccounts } from '../contexts/AccountsContext'
 
 export const ConnectOrWatch = () => {
   const { setIsConnectionDialogOpen, isAllowedToConnectToExtension, allowConnectionToExtension } =
     useAccounts()
-  const { watchedAddresses } = useWatchedAddresses()
+  const { watchedAddresses } = useWatchedAccounts()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
   const { selectedNetwork } = useNetwork()

packages/ui/src/components/EasySetup/FromCallData.tsx

@@ -9,8 +9,7 @@ import { getExtrinsicName } from '../../utils/getExtrinsicName'
 import { usePjsLinks } from '../../hooks/usePjsLinks'
 import { Binary, HexString, Transaction } from 'polkadot-api'
 import { getPapiHowLink } from '../../utils/getPapiHowLink'
-import { decodeAddress } from '@polkadot/util-crypto'
-import { u8aToHex } from '@polkadot/util'
+import { getPubKeyFromAddress } from '../../utils/getPubKeyFromAddress'
 
 interface Props {
   className?: string
@@ -36,7 +35,7 @@ const FromCallData = ({ className, onSetExtrinsic, currentProxy }: Props) => {
         const decodedCall = (await api.txFromCallData(Binary.fromHex(call))).decodedCall
 
         const real = `0x${call.substring(8, 72)}`
-        const currentProxyAddress = u8aToHex(decodeAddress(currentProxy))
+        const currentProxyAddress = getPubKeyFromAddress(currentProxy)
 
         // check if this call is a proxy.proxy
         if (

packages/ui/src/components/MultisigCompactDisplay.tsx

@@ -6,6 +6,8 @@ import Expander from './Expander'
 import { useMultisigByIdQuery } from '../../types-and-hooks'
 import { useEffect, useState } from 'react'
 import { useAccountId } from '../hooks/useAccountId'
+import { useGetEncodedAddress } from '../hooks/useGetEncodedAddress'
+import { getPubKeyFromAddress } from '../utils/getPubKeyFromAddress'
 
 interface Props {
   address: string
@@ -15,7 +17,8 @@ interface Props {
 
 const MultisigCompactDisplay = ({ className, address, expanded = false }: Props) => {
   const [signatories, setSignatories] = useState<string[]>([])
-  const accountId = useAccountId(address)
+  const accountId = useAccountId(getPubKeyFromAddress(address) || '')
+  const getEncodedAddress = useGetEncodedAddress()
   const { data, error, isFetching } = useMultisigByIdQuery({ id: accountId })
   const [badge, setBadge] = useState<AccountBadge | undefined>()
   const [threshold, setThreshold] = useState<number | null | undefined>(null)
@@ -31,11 +34,15 @@ const MultisigCompactDisplay = ({ className, address, expanded = false }: Props)
 
     if (data?.accounts[0]) {
       // this is a query by id, so it should return just 1 account
-      setSignatories(data.accounts[0].signatories.map(({ signatory }) => signatory.address))
+      setSignatories(
+        data.accounts[0].signatories.map(
+          ({ signatory }) => getEncodedAddress(signatory.pubKey) || ''
+        )
+      )
       setThreshold(data.accounts[0].threshold)
       setBadge(AccountBadge.MULTI)
     }
-  }, [data, error, isFetching])
+  }, [data, error, getEncodedAddress, isFetching])
 
   return (
     <Box className={className}>

packages/ui/src/constants.ts

@@ -47,7 +47,7 @@ export interface NetworkInfo {
   pplChainDescriptor?: PplDescriptorKeys
 }
 
-export const HTTP_GRAPHQL_URL = `https://chainsafe.squids.live/multix-arrow@v6/api/graphql`
+export const HTTP_GRAPHQL_URL = `https://chainsafe.squids.live/multix-arrow@v7/api/graphql`
 
 export const PAYMENT_INFO_ACCOUNT = '5CXQZrh1MSgnGGCdJu3tqvRfCv7t5iQXGGV9UKotrbfhkavs'
 

packages/ui/src/contexts/HiddenAccountsContext.tsx

@@ -13,7 +13,7 @@ import { useNetwork } from './NetworkContext'
 import { HexString } from 'polkadot-api'
 import { useGetEncodedAddress } from '../hooks/useGetEncodedAddress'
 import { useSearchParams } from 'react-router'
-import { useWatchedAddresses } from './WatchedAddressesContext'
+import { useWatchedAccounts } from './WatchedAccountsContext'
 
 const LOCALSTORAGE_HIDDEN_ACCOUNTS_KEY = 'multix.hiddenAccounts'
 
@@ -45,7 +45,7 @@ const HiddenAccountsContextProvider = ({ children }: HiddenAccountsProps) => {
   const { selectedNetwork } = useNetwork()
   const getEncodedAddress = useGetEncodedAddress()
   const [searchParams, setSearchParams] = useSearchParams({ address: '' })
-  const { watchedAddresses, removeWatchedAccount } = useWatchedAddresses()
+  const { watchedAddresses, removeWatchedAccount } = useWatchedAccounts()
 
   const networkHiddenAccounts = useMemo(() => {
     if (!selectedNetwork) return []