Authorization using WalletConnect 2.0 (@web3modal/ethereum)

[pmtp]

WalletConnect v1.0 will be officially deprecated on March 1, 2023 .
(https://medium.com/walletconnect/walletconnect-v1-0-sunset-notice-and-migration-schedule-8af9d3720d2e)

Moralis documentation still didn’t provide tutorial how to easily set up Moralis auth for every possible wallet using WalletConnect V2.
(https://docs.moralis.io/authentication-api/how-to-sign-in-with-walletconnect)

One of the key changes is in modalConnectors struct from @web3modal/ethereum

import {
  EthereumClient,
  modalConnectors,
  walletConnectProvider,
} from "@web3modal/ethereum";

//modalConnectors
(alias) function modalConnectors({ appName, chains, version, projectId }: ModalConnectorsOpts): (WalletConnectConnector | InjectedConnector | CoinbaseWalletConnector)[]
import modalConnectors

Now you can’t pass the connector as described in Moralis docs:

function SignIn() {
  const { connectAsync } = useConnect({
    connector: new WalletConnectConnector({ options: { qrcode: true } }),
  });

Because even wagmi WalletConnectProvider is for V1, and there is completely new UniversalProvider for V2 (check wagmi /docs/connectors/walletConnect).

First of all I advise the developers to add this info to the docs and make changes asap.

What’s best way to solve this now to implement Moralis authentication wrapped in wagmi using WalletConnect V2?

[johnversus]

Hi @pmtp
Thanks for sharing this🙏

It seems that depreciation has been postponed.

We will update our docs soon. However, the WalletConnectConnector used in our tutorial is from wagmi, so you can also follow the wallet connect v2 guide to modify the code accordingly as per their upgrade guide.

Installation | WalletConnect Docs

And would be great if you can contribute the required changes on our GitHub docs🙌.

Thank you

[pmtp]

@johnversus

WalletConnectConnector

Thanks. Just in case WalletConnect V2 wrap WalletConnectConnector and InjectedConnector and CoinbaseWalletConnector inside modalConnectors.

And structures go different.

WalletConnectProvider (V1)

export interface IWCRpcConnectionOptions {
  connector?: IConnector;
  bridge?: string;
  qrcode?: boolean;
  chainId?: number;
  storageId?: string;
  signingMethods?: string[];
  qrcodeModalOptions?: IQRCodeModalOptions;
  clientMeta?: IClientMeta;
}

UniversalProvider (V2)

export interface UniversalProviderOpts {
  projectId?: string;
  metadata?: Metadata;
  logger?: string;
  client?: SignClient;
  relayUrl?: string;
  storageOptions?: KeyValueStorageOptions;
  name?: string;
}

[pmtp]

WalletConnectConnector and WalletConnectConnectorV1