Prevent "no multisig" from being displayed before we checked

[Tbaut]

closes #381

The flow of things was as follow

• connect to a node
• check whether this is an ethereum network we're connecting to
• --> here we showed the "no multisig" before even checking
• depending on the type of network, we request specific accounts (of type substrate or ethereum)
• query the indexer for known multisigs

There are other flashing things like the "loading multisig" but it's a little more tricky to fix.

• fixed some nits like stray console.log
• prevent walletconnect from spamming the console

Submission checklist:

Layout

• Change inspected in the desktop web ui
• Change inspected in the mobile web ui

[Tbaut]

Deployment is failing because of Cloudflare issues. The reviewing of this PR shouldn't be impacted though.

[Tbaut]

Found a bug, let's not merge.

[Tbaut]

The bug was visible when you had a watched account with no multisig, but no extension connection. The spinner would show endlessly.

I changed a little my strategy. Making sure the first "Mutlxi is an interface.." would only show when we're sure we've init all the localstorage related elements (connection to the extension and watched accounts).
The "no multisig" is still displayed, due to the way our state is handled and loosely coupled. But we're now talking about a couple ms, which is less than the blink of an eye, as I think a big refactor to prevent this isn't worth it rn.

[Lykhoyda]

We can use waitUntil especially when we show the loader. It's hard to guess how much time you really need, so the test might be unstable.
An example of usage

 cy.waitUntil(function() {
  return cy.get('loader').should('not.exist');
 })

[Lykhoyda]

There is a library for that method https://www.npmjs.com/package/cypress-wait-until

It's a missing method in the cypress, but it's inspired by "Testing library" (https://testing-library.com/docs/guide-disappearance/#waiting-for-disappearance).

[Tbaut]

I really dislike waits, and I'll fight them all as much as I can. But in this case, I don't think we have any other solution, because the actual firing of the request is itself delayed. the loader appears right away (after this PR) but the firing of the request for accounts is done 500ms after, because of a bug, see the comment above the following code:

Multix/packages/ui/src/contexts/AccountsContext.tsx

Lines 135 to 138 in eac29c0

	// race condition see https://github.com/polkadot-js/extension/issues/938
	setTimeout(() => {
	getaccountList(chainInfo.isEthereum)
	}, 500)

[Tbaut]

I'll check if waitUntil can help here, at least to make things more elegant on the surface. It will have to wait for 500ms at least.

[Lykhoyda]

What about to move the loading and error handling in the separate file:

import React from 'react';
import { CircularProgress } from '@mui/material';
import { LoaderBoxStyled, MessageWrapper, ErrorMessageStyled } from './YourStyledComponents'; // Update with your actual imports

const useLoadingAndError = ({ api, isAccountLoading, isLoadingMultisigs, multisigQueryError, multiProxyList, showNewMultisigAlert, selectedNetworkInfo }) => {
  if (!api) {
    return (
      <LoaderBoxStyled data-cy="loader-rpc-connection">
        <CircularProgress />
        {`Connecting to the node at ${selectedNetworkInfo?.rpcUrl}`}
      </LoaderBoxStyled>
    );
  }

  if (isAccountLoading) {
    return (
      <LoaderBoxStyled data-cy="loader-accounts-connection">
        <CircularProgress />
        Loading accounts...
      </LoaderBoxStyled>
    );
  }

  if (isLoadingMultisigs) {
    return (
      <MessageWrapper>
        <CircularProgress />
        <div>Loading your multisigs...</div>
      </MessageWrapper>
    );
  }

  if (multisigQueryError) {
    return (
      <MessageWrapper>
        <ErrorMessageStyled>
          <ErrorOutlineIcon size={64} />
          <div>An error occurred.</div>
        </ErrorMessageStyled>
      </MessageWrapper>
    );
  }

  if (multiProxyList.length === 0) {
    return (
      <MessageWrapper>
        {showNewMultisigAlert ? <SuccessCreation /> : <ConnectOrWatch />}
      </MessageWrapper>
    );
  }

  return null; 
};

export default useLoadingAndError;

Home page

  const loadingAndErrorComponent = useLoadingAndError({
    api,
    isAccountLoading,
    isLoadingMultisigs,
    multisigQueryError,
    multiProxyList,
    showNewMultisigAlert,
    selectedNetworkInfo,
  });

  if (loadingAndErrorComponent) {
    return loadingAndErrorComponent;
  }

[Tbaut]

Sure, that'd help make the Home easier to read, I may do it in a normal component though, rather than a hook.
edit: a hook allows to remove a lot of code from Home, so doing this.

[Tbaut]

I pushed an update separating DisplayError and DisplayLoader, and keeping the rest as is for now.

[Lykhoyda]

Please check the refactoring suggestion. Let me know if you want to work on it in the separate issue

[Tbaut]

All right, waitUntil is much nicer. I want to keep it out of the cypress commands though so as not to request more deps from our users when the plugin is deployed out of Multix

[Lykhoyda]

Looks good! Thank you for the updates