React moralis cannot connect walletlink

Moralis General
#1 
 const enableWalletLinkWeb3 = () => {
    const walletLink = new WalletLink({
      appName: 'app',
      appLogoUrl: 'app-url',
      darkMode: false,
    })
    const walletLinkProvider = walletLink.makeWeb3Provider(
      'https://api.avax.network/ext/bc/C/rpc',
      43114,
    )
    const activate = async () => {
      await walletLinkProvider.enable()
      return {
        provider: walletLinkProvider as unknown as providers.ExternalProvider,
      }
    }
    enableWeb3({
      connector: {
        type: 'walletlink',
        network: '0xa86a',
        account: null,
        chainId: null,
        activate,
        deactivate: async () => {
          walletLinkProvider.disconnect()
        },
      },
    })
  }

It is no respond after enableWalletLinkWeb3.

#2

answer from discord.

import Moralis from "moralis";
import WalletLink from "walletlink";
import Web3 from "web3";

// @ts-ignore
class WalletLinkConnector extends Moralis?.AbstractWeb3Connector {
  // A name for the connector to reference it easy later on
  type = "WalletLink";
  account: string | null = null;
  chainId: string | null = null;
  provider: unknown = null;
  walletLink = new WalletLink({
    appName: "appName",
    appLogoUrl:
      "appLogoUrl",
    darkMode: false,
  });

  /**
   * A function to connect to the provider
   * This function should return an EIP1193 provider (which is the case with most wallets)
   * It should also return the account and chainId, if possible
   */
  async activate() {
    const ethereum = this.walletLink.makeWeb3Provider(
      `https://speedy-nodes-nyc.moralis.io/${process.env.REACT_APP_MORALIS_SPEEDY_NODES_KEY}/eth/mainnet`,
      1
    );

    // Store the EIP-1193 provider, account and chainId
    await ethereum.enable();
    const web3 = new Web3(ethereum);
    const accounts = await web3.eth.getAccounts();
    this.account = accounts[0];
    this.chainId = "0x1"; // Should be in hex format
    this.provider = ethereum;

    // Call the subscribeToEvents from AbstractWeb3Connector to handle events like accountsChange and chainChange
    // @ts-ignore
    this.subscribeToEvents(this.provider);

    // Return the provider, account and chainId
    return {
      provider: this.provider,
      chainId: this.chainId,
      account: this.account,
    };
  }

  // Cleanup any references to torus
  async deactivate() {
    // Call the unsubscribeToEvents from AbstractWeb3Connector to handle events like accountsChange and chainChange
    // @ts-ignore
    this.unsubscribeToEvents(this.provider);

    this.walletLink.disconnect();

    this.account = null;
    this.chainId = null;
    this.provider = null;
  }
}

export default WalletLinkConnector;
Coinbase AbstractWeb3Connector not working
#3

Hi, thanks for posting this answer.
I wanted to make the Coinbase wallet appear in react-boilerplate’s modal along with other wallet options, would you have any idea how I should be going about that?

Also, if you’ve got this working, could you link your repo (if possible) so that I could have a look at how you’ve implemented it?

Thanks

#4

Do i need to change this code, for it to work with Vanilla JS?