TypeError: Object(...) is not a function (WalletConnectV2)

[damianlluch]

I have the chainIds correctly configured. The error occurs when connecting to WalletConnectV2, the modal does not open (if it is working with Metamaks). The striking thing is that the error comes from a library that I don't see it as a dependency of web3-react, unstorage.

If someone has a suggestion.

Thanks

code

import { ProviderType, connectorsMap } from 'config/web3/Web3Pro';
import { useCallback, useMemo } from 'react';

interface Props {
  chainId: number | string;
  walletProviderId: string;
}

interface Returns {
  connectWallet: () => void;
  disconnectWallet: () => void;
}
const EMPTY = () => console.warn('No connector selected');
const NULL_VALUES = {
  useChainId: EMPTY,
  useAccounts: EMPTY,
  useIsActivating: EMPTY,
  useIsActive: EMPTY,
  useProvider: EMPTY,
  useENSNames: EMPTY,
};
export const useConnectWallet: (props: Props) => Returns = ({ walletProviderId, chainId }) => {
  // wallet or magic ?
  const isWalletConnection = useMemo(
    () => ['metamask', 'wallet-connect']?.includes(walletProviderId),
    [walletProviderId]
  );
  // Get provider, default metamask
  const [connector, hooks] = useMemo<ProviderType>(
    () => connectorsMap?.[walletProviderId] ?? [null, null],
    [walletProviderId]
  );
  const { useIsActivating, useIsActive } = hooks ?? {};
  const isActivating = useIsActivating();
  const isActive = useIsActive();
  // console.log({
  //   connector,
  //   chainId,
  //   walletProviderId,
  //   isActivating,
  //   isActive,
  // });

  const connectWithWallet = useCallback(async () => {
    console.log('Connect with wallet:', walletProviderId);
    console.log('Chain Id:', chainId);
    console.log('Coonector:', connector);
    console.log('Activate function: ', connector?.activate);

    try {
      await connector?.activate?.(Number(chainId))
        .catch((error) => {
          console.error('Error on activate', error);
        })
        .then(() => console.log('finished'));
    } catch (error) {
      console.error('Error connecting to WalletConnect:', error);
    }
  }, [chainId, walletProviderId, connector]);

  const disconnectWallet = useCallback(() => {
    console.log('Disconnect wallet');
    connector?.deactivate?.();
    connector?.resetState?.();
  }, [connector]);

  const connectWithMagic = useCallback(() => {
    console.log('Connect with Magic');
  }, []);

  return { connectWallet: isWalletConnection ? connectWithWallet : connectWithMagic, disconnectWallet };
};

// archivo walletConnectV2.ts
import { initializeConnector } from '@web3-react/core';
import { WalletConnect as WalletConnectV2 } from '@web3-react/walletconnect-v2';
import { MAINNET_CHAINS, TESTNET_CHAINS } from '../chains';

// Asume que quieres incluir tanto cadenas principales como de prueba
const allChains = { ...MAINNET_CHAINS, ...TESTNET_CHAINS };
const allChainIds = Object.keys(allChains).map(Number);

export const [walletConnectV2, hooks] = initializeConnector<WalletConnectV2>((actions) => {
  return new WalletConnectV2({
    actions,
    options: {
      projectId: '***************',
      chains: allChainIds, // Aquí incluimos todos los chainIds, asegurando que el deseado está presente
      showQrModal: true,
    },
  });
});

[kovart]

Having the same issue after upgrading from version 8.5.0