Problem migration from Wallet Connect V1 to Wallet Connect V2

Technical Issue Reporting
#1

Hell, everybody.

I am having issues with migrating from Wallet Connect V1 to V2.

I have a package registry called Reusable Component Library which all of my dApps are using as one of my components is the Wallet Connect button.

I am using enableWeb3 and so far the code responsible for the connect wallet button looks like this:

export const ConnectOptions = ({ onClose }: Closeable) => {

  const { theme, isWhiteLabel } = useCitadelContext();

  const { account, enableWeb3 } = useMoralis();

  const providers = [

    {

      content: "Metamask",

      url: "https://cdn.protoverse.ai/assets/common/metamask-icon.svg",

      provider: "metamask",

    },

    {

      content: "Wallet Connect",

      url: "https://cdn.protoverse.ai/assets/common/walletconnect-icon.svg",

      provider: "walletconnect",

    },

  ];

I have followed this: https://github.com/MoralisWeb3/Moralis-JS-SDK-v1/tree/main/demos/walletconnect-v2 and created this version of the code:

export const ConnectOptions = ({ onClose }: Closeable) => {

  const { theme, isWhiteLabel } = useCitadelContext();

  const { account, enableWeb3 } = useMoralis();

  const providers = [

    {

      content: "Metamask",

      url: "https://cdn.protoverse.ai/assets/common/metamask-icon.svg",

      provider: "metamask",

    },

    {

      content: "Wallet Connect",

      url: "https://cdn.protoverse.ai/assets/common/walletconnect-icon.svg",

      provider: "walletconnect",

      onClick: () => {    

        enableWeb3({

          provider: 'walletconnect',

          projectId: 'c1b4d01d68cdb162f08d96f772c70d7e',

          qrModalOptions: { themeMode: 'light' },

        });

      }

    }

    ,

  ];

Sadly it is not working, because currently when I click on Wallet Conenct at my dApp nothing happens. MetaMask is still working fine.

Can you suggest me a solution?

Best regards,
Mike//

#2

do you see anything in your console when you use walletconnect?

#3

No, I have no error in the console.

I have tried also to debug with console logs, but when I click to Wallet Connect on my dApp nothing happens. It does not even trigger the console errors.

#4

this should be

async () => {    

      await  enableWeb3

also can you make sure you are assigning this click function when you click wallet connect?

you can also add a .catch() and print the errors to see if anything happens during the process

#5 
export const ConnectOptions = ({ onClose }: Closeable) => {

  const { theme, isWhiteLabel } = useCitadelContext();

  const { account, enableWeb3 } = useMoralis();

  const providers = [

    {

      content: "Metamask",

      url: "https://cdn.protoverse.ai/assets/common/metamask-icon.svg",

      provider: "metamask",

    },

    {

      content: "Wallet Connect",

      url: "https://cdn.protoverse.ai/assets/common/walletconnect-icon.svg",

      provider: "walletconnect",

      onClick: async () => {

        console.log("onClick triggered: trying to enable Web3 with WalletConnect");

   

        try {

          await enableWeb3({

            provider: 'walletconnect',

            projectId: 'c1b4d01d68cdb162f08d96f772c70d7e',

            qrModalOptions: { themeMode: 'light' },

          });

   

          console.log("enableWeb3 call succeeded");

        } catch (error) {

          console.error("enableWeb3 call failed", error);

        }

      }

    },    

  ];

This is the reworked version but it still does not trigger anything, neither shows any errors in console.

#6

can you make sure you have the latest react-moralis and moralis-v1 versions in your project? also make sure you remove the old packages and add the new ones as per the tutorial
https://github.com/MoralisWeb3/Moralis-JS-SDK-v1/tree/main/demos/walletconnect-v2

#7

I have tried everything you have suggested. All the libraries are up-to-date, code seems to be fine.

Still, Metamask is working fine, but WalletConnect is not. When I click WalletConnect nothing happens. I put console logs and it does not trigger anything.

import Moralis from 'moralis';
import { useCitadelContext } from "../contexts/CitadelContext";
import { Clickable, Closeable, ContentIcon } from "../types";
import { TextButton, TextButtonStatus } from "../TextButton";
import { $mask } from "../utils";
import { PoweredBy } from "../PoweredBy";
import { ThemeProvider } from "../contexts/ThemeContext";
import { useMoralis } from "react-moralis";

const WALLET_CONNECT_PROJECT_ID = 'c1b4d01d68cdb162f08d96f772c70d7e';

export const ConnectOptions = ({ onClose }: Closeable) => {
  const { theme, isWhiteLabel } = useCitadelContext();
  const { authenticate, enableWeb3, isAuthenticated, user } = useMoralis();

  const account = isAuthenticated && user?.get("ethAddress");

  const connectWithWalletConnect = async () => {
    console.log("Attempting to connect with WalletConnect...");
    try {
      await authenticate({
        provider: 'walletconnect',
        signingMessage: "Connect to WalletConnect",
        options: {
          projectId: WALLET_CONNECT_PROJECT_ID,
        },
      });
      console.log("Connected successfully with WalletConnect!");
    } catch (error) {
      console.error("An error occurred while connecting with WalletConnect:", error);
    }
  };

  const connectWithMetaMask = async () => {
    enableWeb3(); // Using Moralis to enable MetaMask
  };

  const providers = [
    {
      content: "Metamask",
      url: "https://cdn.protoverse.ai/assets/common/metamask-icon.svg",
      provider: "metamask",
    },
    {
      content: "Wallet Connect",
      url: "https://cdn.protoverse.ai/assets/common/walletconnect-icon.svg",
      provider: "walletconnect",
    },
  ];

  const connectWallet = (provider: string) => {
    if (provider === 'walletconnect') {
      connectWithWalletConnect();
    } else if (provider === 'metamask') {
      connectWithMetaMask();
    }
  };


  return (
    <div
        className={`fixed  top-0 left-0 right-0 bottom-0 flex flex-col justify-center items-center bg-blackPanther-${theme} bg-opacity-75 z-50 inset-0  w-full h-full`}
    >
      {/* ... */}
      <div className={`bg-gradient-to-b from-bigFox-${theme} to-smallFox-${theme}  p-9 rounded-md`}>
        <div className={`sm:w-[483px] flex flex-col  gap-y-4 rounded-lg `}>
          {!account ? (
            <>
              <ConnectOptionsHeader />
              <div className={`flex flex-col gap-y-2 py-2`}>
              {providers.map(({ content, url, provider }: any, idx) => (
  <ConnectOption
    key={`connect-option-${idx}`}
    content={content}
    url={url}
    onClick={() => connectWallet(provider)}
  />
))}
              </div>
            </>
          ) : (
            <div className={`py-4 text-cat-${theme}`}>
              {$mask(account)} is now{" "}
              <span className={`animate-glow-box-${theme}`}>connected</span>
            </div>
          )}
          <p className={`text-lg font-semibold text-[#E2EFF9]`}>
            Suggestions for connecting a wallet
          </p>
          <ul
            className={`text-sm font-medium text-smallSeal-${theme} list-disc pl-4`}
          >
            <li className="py-1 ">If you’re on Desktop, try MetaMask</li>
            <li className="py-1">If you’re on Mobile, try WalletConnect</li>
            <li className="py-1">
              Please avoid using Trust Wallet to connect to our platform
            </li>
            <li className={`animate-glow-box-${theme}`}>
              Note to mobile users. Open your wallet app and sign the gas free
              signature
            </li>
          </ul>
          <TextButton
            content="Close"
            status={TextButtonStatus.NEUTRAL}
            onClick={() => onClose()}
          />
        </div>
        {isWhiteLabel && (
          <div className="pt-6">
            <ThemeProvider bgOpacity={0} hasNavHoverIcon={false}>
              <PoweredBy />
            </ThemeProvider>
          </div>
        )}
      </div>
    </div>
  );
};

const ConnectOptionsHeader = () => {
  const { theme } = useCitadelContext();

  return (
    <div className={`text-cat-${theme} flex flex-col py-2 rounded-lg`}>
      <div className={`text-md md:text-lg animate-glow-box-${theme}`}>
        Connect your wallet
      </div>
      <div className={`text-sm py-2`}>
        Connect with one of the available wallet providers
      </div>
    </div>
  );
};

type ConnectOptionProps = ContentIcon & Clickable;

const ConnectOption = ({ content, url, onClick }: ConnectOptionProps) => {
  const { theme } = useCitadelContext();
  return (
    <div
      className={`bg-seaHorse-${theme} text-cat-${theme} cursor-pointer flex flex-row gap-x-6 items-center justify-start p-4 px-8 rounded-lg`}
      onClick={() => onClick()}
    >
      <img src={url} className={`h-8 md:h-12`} />
      <div className={`text-md md:text-xl`}>{content}</div>
    </div>
  );
};

This is the full code, please examine it and share with me if you have any ideas.

#8

Okay, here is a little progress by the way.

image

When I click I am getting the console log that it is successfully connected, but the pop-up with the QR code does not show up now.

It is the same code as before.

#9

did you log in one before? you will have to log out from that app first otherwise it will reconnect automatically