Coinbase AbstractWeb3Connector not working

Moralis General
#1

I took a look all aronnd the forums. This one seems to follow the official Moralis docs the most https://forum.moralis.io/t/react-moralis-cannot-connect-walletlink/10794/2

I setup a coinbase wallet connector that extends the AbstractWeb3Connector (I think).

import Moralis from "moralis";
import CoinbaseWalletSDK from "@coinbase/wallet-sdk";
import Web3 from "web3";

class CoinbaseWalletConnector extends Moralis?.AbstractWeb3Connector {
  account;
  provider;
  coinbaseLink = new CoinbaseWalletSDK({
    appName: "Sample App",
    appLogoUrl: "Sample PNG",
    darkMode: false,
  });

  async activate() {
    const ethereum = this.coinbaseLink.makeWeb3Provider(
      "https://eth-mainnet.alchemyapi.io/v3/....",
      1
    );

    await ethereum.enable();
    const web3 = new Web3(ethereum);
    const accounts = await web3.eth.getAccounts();
    this.account = accounts[0];
    this.provider = ethereum;

    this.subscribeToEvents(this.provider);

    return {
      provider: this.provider,
      account: this.account,
    };
  }

  async deactivate() {
    this.unsubscribeToEvents(this.provider);

    this.coinbaseLink.disconnect();

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

export default CoinbaseWalletConnector;

Then from where I want to prompt the coinbase wallet connect I initialize the coinbase wallet connector like

const coinbaseConnector = () => new CoinbaseWalletConnector();

Then I tried both

authenticate({
  connector: coinbaseConnector,
});

and

Moralis.authenticate({
  connector: coinbaseConnector,
});

Neither prompts open the coinbase connect. I am also sure the browser has the coinbase wallet extension. Any help would be greatly appreciated!!! Thank you all

#2

You’re missing a type in your connector:

class CoinbaseWalletConnector extends Moralis?.AbstractWeb3Connector {
    type = 'CoinbaseWallet';
...

And then try connecting with await Moralis.authenticate({ provider: 'CoinbaseWallet' });

#3

I’ve added
type = 'CoinbaseWallet' but it still didn’t work.

Calling
authenticate({ provider: "CoinbaseWallet" }) or Moralis.authenticate({ provider: "CoinbaseWallet" })
looks like it’s just doing the same as calling authenticate() where it injects whatever wallet is available on the browser? For example, I have one chrome profile with both coinbase wallet and metamask and coinbase takes priority for some reason. Even if I specify the provider to metamask.

According to the docs, shouldn’t we be calling authenticate({ connector: coinbaseConnector }) instead? Although, the result still isn’t proper, this prompts the coinbase modal on the browser without the coinbase wallet extension but it doesn’t open the coinbase wallet extension when it’s actually installed on the browser.

#4

Don’t worry about the provider version of authenticate, that’s for a different way of doing the connector - I misread.

Do you get any errors when you run Moralis.authenticate({ connector: coinbaseConnector });?

#5

No errors at all. However, the signing message doesn’t get prompted.

#7

Using your connector code, this brings up a signature request with Coinbase Wallet and you can get the current wallet address.

The current Moralis user does seem to be set, although only after a reload when it should be set right after signing. So there’s still a few issues.

CoinbaseConnector.js

import Moralis from 'moralis';
import CoinbaseWalletSDK from '@coinbase/wallet-sdk';
import Web3 from 'web3';

class CoinbaseWalletConnector extends Moralis?.AbstractWeb3Connector {
  type = 'CoinbaseWallet';
  account;
  provider;
  coinbaseLink = new CoinbaseWalletSDK({
    appName: 'Sample App',
    appLogoUrl: 'Sample PNG',
    darkMode: false,
  });

  async activate() {
    const ethereum = this.coinbaseLink.makeWeb3Provider(
      'https://mainnet.infura.io/v3/',
      1
    );

    await ethereum.enable();
    const web3 = new Web3(ethereum);
    const accounts = await web3.eth.getAccounts();
    this.account = accounts[0];
    this.provider = ethereum;
    this.chainId = '0x1';

    this.subscribeToEvents(this.provider);

    return {
      provider: this.provider,
      account: this.account,
      chainId: '0x1',
    };
  }

  async deactivate() {
    this.unsubscribeToEvents(this.provider);

    this.coinbaseLink.disconnect();

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

export default CoinbaseWalletConnector;

App.js (in a React demo)

import CoinbaseWalletConnector from './CoinbaseConnector';

...
function App() {

  ...

  async function connect() {
    await Moralis.authenticate({connector: CoinbaseWalletConnector});
  }

  return <button onClick={connect}>Auth</button>;
}
1 Like
After reloading wallet address changed
[SOLVED] How to connect coinbase wallet using react moralis
Custom connectors
Custom connectors
#8

This is awesome, I think I was missing returning the chainId. Your suggestion works beautifully <3

1 Like