Automatically switch to polkadot when unsuported network (#492)

Author: Tbaut

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

@@ -44,7 +44,12 @@ describe('Account address in the address bar', () => {
 
   it('shows an error with 0 watched, 0 connected account, unknown linked address', () => {
     cy.visit(landingPageAddressUrl(testAccounts['Non Multisig Member 1'].address))
-    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    landingPage
+      .linkedAddressNotFound()
+      .should(
+        'contain.text',
+        "The linked address can't be found in your accounts or watched accounts on rococo"
+      )
     topMenuItems.multiproxySelectorDesktop().should('not.exist')
   })
 
@@ -58,7 +63,12 @@ describe('Account address in the address bar', () => {
       watchedAccounts: [publicKey]
     })
 
-    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    landingPage
+      .linkedAddressNotFound()
+      .should(
+        'contain.text',
+        "The linked address can't be found in your accounts or watched accounts on rococo"
+      )
     cy.url().should('include', testAccounts['Non Multisig Member 1'].address)
     topMenuItems.multiproxySelectorDesktop().should('be.visible')
     topMenuItems.multiproxySelectorInputDesktop().should('have.value', '')
@@ -82,7 +92,12 @@ describe('Account address in the address bar', () => {
       url: landingPageAddressUrl(testAccounts['Non Multisig Member 1'].address),
       watchedAccounts: [purePublicKey]
     })
-    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    landingPage
+      .linkedAddressNotFound()
+      .should(
+        'contain.text',
+        "The linked address can't be found in your accounts or watched accounts on rococo"
+      )
     cy.url().should('include', testAccounts['Non Multisig Member 1'].address)
     topMenuItems.multiproxySelectorDesktop().should('be.visible')
     topMenuItems.multiproxySelectorInputDesktop().should('have.value', '')
@@ -107,7 +122,12 @@ describe('Account address in the address bar', () => {
       injectExtensionWithAccounts: [testAccounts['Multisig Member Account 1']]
     })
 
-    landingPage.linkedAddressNotFound().should('contain.text', "The linked address can't be found")
+    landingPage
+      .linkedAddressNotFound()
+      .should(
+        'contain.text',
+        "The linked address can't be found in your accounts or watched accounts on rococo"
+      )
     cy.url().should('include', nonMulitisigAccountAddress)
     topMenuItems.multiproxySelectorDesktop().should('be.visible')
     topMenuItems.multiproxySelectorInputDesktop().should('have.value', '')

packages/ui/cypress/tests/landing-messaging.cy.ts

@@ -1,5 +1,5 @@
 import { testAccounts } from '../fixtures/testAccounts'
-import { landingPageUrl } from '../fixtures/landingData'
+import { landingPageNetwork, landingPageUrl } from '../fixtures/landingData'
 import { landingPage } from '../support/page-objects/landingPage'
 import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { clickOnConnect } from '../utils/clickOnConnect'
@@ -47,7 +47,24 @@ describe('Landing Page Messaging', () => {
     cy.connectAccounts([testAccounts['Non Multisig Member 1'].address])
     landingPage
       .noMultisigFoundError()
-      .should('contain.text', 'No multisig found for your accounts or watched accounts.')
+      .should('contain.text', 'No multisig found for your accounts or watched accounts on rococo.')
+    landingPage.createOneButton().should('be.visible').should('be.enabled')
+    landingPage.watchAccountButton().should('be.visible').should('be.enabled')
+  })
+
+  it('redirect to Polkadot if wrong network in url', () => {
+    cy.visit(landingPageNetwork('wrong network'))
+    cy.initWallet([testAccounts['Non Multisig Member 1']])
+    clickOnConnect()
+    // share the account that is not part of any multisig
+    cy.connectAccounts([testAccounts['Non Multisig Member 1'].address])
+    landingPage
+      .noMultisigFoundError()
+      .should(
+        'contain.text',
+        'No multisig found for your accounts or watched accounts on polkadot.'
+      )
+    cy.url().should('include', 'network=polkadot')
     landingPage.createOneButton().should('be.visible').should('be.enabled')
     landingPage.watchAccountButton().should('be.visible').should('be.enabled')
   })
@@ -60,7 +77,7 @@ describe('Landing Page Messaging', () => {
     })
     landingPage
       .noMultisigFoundError()
-      .should('contain.text', 'No multisig found for your accounts or watched accounts.')
+      .should('contain.text', 'No multisig found for your accounts or watched accounts on rococo.')
     landingPage.connectWalletButton().should('be.visible').should('be.enabled')
     landingPage.watchAccountButton().should('be.visible').should('be.enabled')
   })
@@ -76,7 +93,7 @@ describe('Landing Page Messaging', () => {
 
     landingPage
       .noMultisigFoundError()
-      .should('contain.text', 'No multisig found for your accounts or watched accounts.')
+      .should('contain.text', 'No multisig found for your accounts or watched accounts on rococo.')
     landingPage.createOneButton().should('be.visible').should('be.enabled')
     landingPage.watchAccountButton().should('be.visible').should('be.enabled')
   })

packages/ui/src/components/ConnectCreateOrWatch.tsx

@@ -4,18 +4,21 @@ import { createSearchParams, useNavigate, useSearchParams } from 'react-router-d
 import { Button } from './library'
 import { WATCH_ACCOUNT_ANCHOR } from '../pages/Settings/Settings'
 import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
+import { useNetwork } from '../contexts/NetworkContext'
 
 export const ConnectOrWatch = () => {
   const { isAllowedToConnectToExtension, allowConnectionToExtension } = useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
   const navigate = useNavigate()
   const [searchParams] = useSearchParams()
+  const { selectedNetwork } = useNetwork()
 
   return (
     <WrapperStyled>
       {isAllowedToConnectToExtension || watchedAddresses.length !== 0 ? (
         <div data-cy="label-no-multisig-found">
-          No multisig found for your accounts or watched accounts.
+          No multisig found for your accounts or watched accounts on{' '}
+          <NetworkNameStyled>{selectedNetwork}</NetworkNameStyled>.
         </div>
       ) : (
         <>
@@ -89,3 +92,7 @@ const ButtonWrapperStyled = styled('div')`
     margin: 0 0.5rem;
   }
 `
+
+const NetworkNameStyled = styled('span')`
+  text-transform: capitalize;
+`

packages/ui/src/contexts/NetworkContext.tsx

@@ -3,6 +3,7 @@ import { useSearchParams } from 'react-router-dom'
 import { NetworkInfo, SupportedNetworks, networkList } from '../constants'
 
 const LOCALSTORAGE_SELECTED_NETWORK = 'multix.selectedNetwork'
+const DEFAULT_NETWORK = 'polkadot'
 
 type NetworkContextProps = {
   children: React.ReactNode | React.ReactNode[]
@@ -25,10 +26,9 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
 
   const selectNetwork = useCallback(
     (network: string, shouldResetAccountAddress = false) => {
-      const isNewSelectedNetworkSupported = isSupportedNetwork(network)
-
-      if (!isNewSelectedNetworkSupported) {
+      if (!isSupportedNetwork(network)) {
         console.error('This network is not supported', network)
+        selectNetwork(DEFAULT_NETWORK)
         return
       }
 
@@ -64,7 +64,7 @@ const NetworkContextProvider = ({ children }: NetworkContextProps) => {
         return
       }
 
-      selectNetwork('kusama')
+      selectNetwork(DEFAULT_NETWORK)
     }
   }, [searchParams, selectNetwork, selectedNetwork])
 

packages/ui/src/hooks/useDisplayError.tsx

@@ -10,13 +10,15 @@ import { Center } from '../components/layout/Center'
 import { useWatchedAddresses } from '../contexts/WatchedAddressesContext'
 import { useMultiProxy } from '../contexts/MultiProxyContext'
 import { useSearchParams } from 'react-router-dom'
+import { useNetwork } from '../contexts/NetworkContext'
 
 export const useDisplayError = () => {
   const { isExtensionError, isAccountLoading, ownAccountList, isAllowedToConnectToExtension } =
     useAccounts()
   const { watchedAddresses } = useWatchedAddresses()
   const { error: multisigQueryError, refetch, canFindMultiProxyFromUrl } = useMultiProxy()
   const [, setSearchParams] = useSearchParams()
+  const { selectedNetwork } = useNetwork()
 
   if (
     watchedAddresses.length === 0 &&
@@ -76,7 +78,8 @@ export const useDisplayError = () => {
         <ErrorMessageStyled>
           <ErrorOutlineIcon size={64} />
           <div data-cy="label-linked-address-not-found">
-            The linked address can't be found in your accounts or watched accounts.
+            The linked address can't be found in your accounts or watched accounts on{' '}
+            <NetworkNameStyled>{selectedNetwork}</NetworkNameStyled>.
           </div>
           <Button
             data-cy="button-reset-linked-address"
@@ -119,3 +122,7 @@ const ErrorMessageStyled = styled('div')`
     margin-top: 1rem;
   }
 `
+
+const NetworkNameStyled = styled('span')`
+  text-transform: capitalize;
+`