[EthereumProvider] will cause create multiple w3m-modal

[windatang]

Describe the bug
website use await EthereumProvider.init(...) create provider.

1. when user not connection for this QR code or choose unconnect wallect provider close the window. client side will use the provider do disconnect and unregister all event and set as undefined.
   2 when user want connnect wallet again will call the await EthereumProvider.init(...) again.

wish it only create one instance for w3m-modal

SDK Version (if relevant)

• Client: React
• Version last

To Reproduce
Steps to reproduce the behavior:

1. when user not connection for this QR code or choose unconnect wallect provider close the window. client side will use the provider do disconnect and unregister all event and set as undefined.
   2 when user want connnect wallet again will call the await EthereumProvider.init(...) again.

Expected behavior
A way to use the same EthereumProvider instance but can reconfig information like chain theme
or when disconnection can destroy the rely instance like the w3m-modal
or have a way to use the same w3m-modal at diff EthereumProvider instance.

Screenshots

Desktop (please complete the following information):

• Browser chrome

[windatang]

if (ethereumProvider && ethereumProvider?.modal) {
      ethereumProvider.modal.setTheme({
        themeMode: !(props?.darkMode) ? 'light' : 'dark',
        themeVariables: {
          '--w3m-z-index':"9999",
        },
      })
      ethereumProvider.setChainIds([Number(props.chainId ?? 1)])
    } else {
      ethereumProvider = await EthereumProvider.init({
        chains: [Number(props.chainId ?? 1)],
        optionalChains: AvaiableNetwork.map(item => Number(item)),
        projectId: process.env[ `${ConnectProvides.APP_FRAMEWORK}WALLET_CONNECT_V2_ID` ] ?? "",
        showQrModal: true, // REQUIRED set to "true" to use @web3modal/standalone,
        rpcMap: RPC_URLS,
        // relayUrl: BRIDGE_URL,
        methods, // OPTIONAL ethereum methods
        events,
        metadata: clientMeta, // OPTIONAL metadata of your app
        // @ts-ignore
        qrModalOptions: {
          themeVariables: {
            '--w3m-z-index':"9999",
          },
          themeMode: !(props?.darkMode) ? 'light' : 'dark'
        },
      });

    }```

[andriirak]

const provider = await EthereumProvider.init shoud be called one time,
to create a new connection call provider.enable()

[windatang]

const provider = await EthereumProvider.init shoud be called one time, to create a new connection call provider.enable()

if (ethereumProvider && ethereumProvider?.modal) {

      ethereumProvider.modal.setTheme({
        themeMode: !(props?.darkMode) ? 'light' : 'dark',
        themeVariables: {
          '--w3m-z-index': "9999",
        },
      });
      ethereumProvider.reset();
      ConfigCtrl.setConfig({
        walletConnectVersion: 2,
        projectId: ethereumProvider.rpc.projectId,
        standaloneChains: [ethereumProvider.formatChainId(Number(props.chainId ?? 1))],
        defaultChain: Number(props.chainId ?? 1),
        ...ethereumProvider.rpc.qrModalOptions
      })
      console.log('modal', ethereumProvider.modal, ethereumProvider.modal.url);
      ethereumProvider.setChainIds([ethereumProvider.formatChainId(Number(props.chainId ?? 1))]);
      console.log('chain', ethereumProvider.chainId);
    } else {
      ethereumProvider = await EthereumProvider.init({
        chains: [Number(props.chainId ?? 1)],
        optionalChains: AvaiableNetwork.map(item => Number(item)),
        projectId: process.env[ `${ConnectProvides.APP_FRAMEWORK}WALLET_CONNECT_V2_ID` ] ?? "",
        showQrModal: true, // REQUIRED set to "true" to use @web3modal/standalone,
        rpcMap: RPC_URLS,
        // relayUrl: BRIDGE_URL,
        methods, // OPTIONAL ethereum methods
        events,
        metadata: clientMeta, // OPTIONAL metadata of your app
        // @ts-ignore
        qrModalOptions: {
          themeVariables: {
            '--w3m-z-index': "9999",
          },
          themeMode: !(props?.darkMode) ? 'light' : 'dark'
        },
      });
      ethereumProvider.on('display_uri', (display_uri: string) => {
        walletServices.sendProcess(ProcessingType.nextStep, {step: ProcessingStep.showQrcode, qrCodeUrl: display_uri});
      })
    }

ConfigCtrl is a global instance, this is the way change the QRcode chainId setup right?

Related coding & demo website
@loopring-web/web3-provider

Demo website
code-Sandbox
product:loopring.io-beta

[windatang]

The QRcode Chain ID will keep on when the The provider init

[windatang]

if (ethereumProvider && ethereumProvider?.modal) {

      ethereumProvider.modal.setTheme({
        themeMode: !(props?.darkMode) ? 'light' : 'dark',
        themeVariables: {
          '--w3m-z-index': "9999",
        },
      });
      ethereumProvider.reset();
      ethereumProvider.setChainIds([ethereumProvider.formatChainId(Number(props.chainId ?? 1))]);
      ethereumProvider.rpc.chains = [ethereumProvider.formatChainId(Number(props.chainId ?? 1))];
      // ConfigCtrl.setConfig({
      //   walletConnectVersion: 2,
      //   projectId: ethereumProvider.rpc.projectId,
      //   standaloneChains:  ethereumProvider.rpc.chains,
      //   //[ethereumProvider.formatChainId(Number(props.chainId ?? 1))],
      //   enableStandaloneMode: true,
      //   // defaultChain: Number(props.chainId ?? 1),
      //   ...ethereumProvider.rpc.qrModalOptions
      // })
      console.log('modal', ethereumProvider.modal, ethereumProvider.modal.url);
      console.log('chain', ethereumProvider.chainId);
    } else {
      ethereumProvider = await EthereumProvider.init({
        chains: [Number(props.chainId ?? 1)],
        optionalChains: AvaiableNetwork.map(item => Number(item)),
        projectId: process.env[ `${ConnectProvides.APP_FRAMEWORK}WALLET_CONNECT_V2_ID` ] ?? "",
        showQrModal: true, // REQUIRED set to "true" to use @web3modal/standalone,
        rpcMap: RPC_URLS,
        // relayUrl: BRIDGE_URL,
        methods, // OPTIONAL ethereum methods
        events,
        metadata: clientMeta, // OPTIONAL metadata of your app
        // @ts-ignore
        qrModalOptions: {
          themeVariables: {
            '--w3m-z-index': "9999",
          },
          themeMode: !(props?.darkMode) ? 'light' : 'dark'
        },
      });
      ethereumProvider.on('display_uri', (display_uri: string) => {
        walletServices.sendProcess(ProcessingType.nextStep, {step: ProcessingStep.showQrcode, qrCodeUrl: display_uri});
      })
    }
    ```
    follow this line I try `      ethereumProvider.rpc.chains = [ethereumProvider.formatChainId(Number(props.chainId ?? 1))];`
    [        const { required, optional } = buildNamespaces(this.rpc);](https://github.com/WalletConnect/walletconnect-monorepo/blob/e15a1767dad40ffcfe9400111d8b2cff5a6a806c/providers/ethereum-provider/src/EthereumProvider.ts#L266C52-L266C60)
   wish this method working.
   but it should have some public function to switch chainIds tp make URL(QR code);

[glitch-txs]

Hi, are you still experiencing this issue?