Connect WalletLink

I’m trying to integrate Walletlink to my DApps but it’s not working.
It says: Uncaught (in promise) Error: Address not found
What’s wrong with my code?

const walletLinkEnable = async () => {
  const APP_NAME = 'My App';
  const APP_LOGO_URL = 'https://example.com/logo.png';
  const ETH_JSONRPC_URL = 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa4456161';
  const CHAIN_ID = 1;
  // Initialize WalletLink
  const walletLink = new WalletLink({
    appName: APP_NAME,
    appLogoUrl: APP_LOGO_URL,
    darkMode: false
  });
  console.log(walletLink);
  // Initialize a Web3 Provider object
  const ethereum = await walletLink.makeWeb3Provider(ETH_JSONRPC_URL, CHAIN_ID);
  const _web3 = new Web3(ethereum);
  return _web3;
}
Moralis.setEnableWeb3(walletLinkEnable);
web3 = await Moralis.enableWeb3();

When I check the walletLink, the app name, logo url property is null even I already init them.

Hi @metylbk

Thank you for your patience. I’ll test it today :raised_hands:

2 Likes

Did you test it? Is it working for you?

@Yomoo did u test it? Coinbase wallet is popular so it’s better to support it.

@Yomoo could u check that?

Hi @metylbk

Moralis supports custom wallets. If you will follow the full WalletLink guide - you will find this:

So your code is not complete. It should be like this:

 const customEnable = async () => {
    class MoralisWalletLinkProvider {
      walletLink = new WalletLink({
        appName: APP_NAME,
        appLogoUrl: APP_LOGO_URL,
        darkMode: false,
      });

      async activate() {
        const ethereum = this.walletLink.makeWeb3Provider(ETH_JSONRPC_URL, CHAIN_ID);
        await ethereum.enable(); // or ethereum.send('eth_requestAccounts')
        this.web3 = new Web3(ethereum);
        this.isActivated = true;
        return this.web3;
      }
    }

    const web3Provider = new MoralisWalletLinkProvider();
    const web3 = await web3Provider.activate();
    return web3;
  };

Hi @Yomoo

I tried customEnable you provided.

I called:

const { authenticate, isAuthenticated, account, user, Moralis } = useMoralis();
Moralis.setEnableWeb3(customEnable);
window.web3 = await Moralis.enableWeb3();
authenticate();

I can bring up coinbase QR code and can get the address from.

window.web3.eth.getAccount()

But it seems the "user’ is never created with this approach. isAuthenticated is false, account is undefined.

some updates:

It’s the problem of react-moralis. It turns out the useMoralis() has a bug. The “user” updates after authenticate() but the “account” will not. So the solution is that manually update the “account” instead of using the “account” spit out from useMoralis(). Then the rest of the UI works fine.

  var account = "";
  if (user) {
    account = user.attributes.accounts[0];
  }
1 Like

Hey what you do is already right, just use Moralis.authenticate instead of Moralis.enableWeb3, enableWeb3 just allow you connect your wallet to your dApp, authenticate do the same thing, plus adding user in DB and have user signed for acessing user’s information :raised_hands: hope this helps~

Also if you do Moralis.authenticate, don’t need to rewrite window.web3

Cheers~

1 Like

Hello Yomoo… Please I want you to help make necessary change on my scripts in respect to moralis. I will be glad to get quick response solution from you soon. I dont trust my infura server. Thank you

import WalletLink from ‘walletlink’

import Web3 from ‘web3’

const APP_NAME = (‘My Awesome App’)

const APP_LOGO_URL = (‘https://example.com/logo.png’)

const ETH_JSONRPC_URL = (‘https://mainnet.infura.io/v3/1d235eewaqdc4fb2a8be8b4821717b9e’)

const CHAIN_ID = 1

// Initialize WalletLink

export const walletLink = new WalletLink({

appName: (APP_NAME),

appLogoUrl: (APP_LOGO_URL),

darkMode: false

})

// Initialize a Web3 Provider object

export const ethereum = walletLink.makeWeb3Provider(ETH_JSONRPC_URL, CHAIN_ID)

// Initialize a Web3 object

export const web3 = new Web3(ethereum as any)

// Use eth_RequestAccounts

ethereum.send(‘eth_requestAccounts’).then((accounts: string[]) => {

console.log(`User's address is ${accounts[0]}`)



// Optionally, have the default account set for web3.js

web3.eth.defaultAccount = accounts[0]

})

// Alternatively, you can use ethereum.enable()

ethereum.enable().then((accounts: string[]) => {

console.log(`User's address is ${accounts[0]}`)

web3.eth.defaultAccount = accounts[0]

})

walletLink.disconnect()

// is the same as the following:

ethereum.close()]

Hey @RdGhostmann, add setEnableWeb3

Moralis.setEnableWeb3(async () => {
const APP_NAME = (‘My Awesome App’)

const APP_LOGO_URL = (‘https://example.com/logo.png’)

const ETH_JSONRPC_URL = (‘https://mainnet.infura.io/v3/1d235eewaqdc4fb2a8be8b4821717b9e’)

const CHAIN_ID = 1

// Initialize WalletLink

export const walletLink = new WalletLink({

appName: (APP_NAME),

appLogoUrl: (APP_LOGO_URL),

darkMode: false

})

// Initialize a Web3 Provider object

export const ethereum = walletLink.makeWeb3Provider(ETH_JSONRPC_URL, CHAIN_ID)

// Initialize a Web3 object

export const web3 = new Web3(ethereum as any)

// Use eth_RequestAccounts

await ethereum.send(‘eth_requestAccounts’)



// Optionally, have the default account set for web3.js

web3.eth.defaultAccount = accounts[0]
})

return web3;
});

and then call Moralis.authenticate as usual or if you just want Metamask to connect without access to DB then you can Moralis.enableWeb3 and the Coinbase Wallet modal will appear

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

Have I done the neccessary? How do I complete Walletlink process and apply it?


import WalletLink from ‘walletlink’

import Web3 from ‘web3’

Moralis.setEnableWeb3(async () => {

const APP_NAME = ‘My Awesome App’

const APP_LOGO_URL = ‘C:\Users\pc\Desktop\WalletConnect Project\emberdotjs.png’

const ETH_JSONRPC_URL = ‘https://mainnet.infura.io/v3/1d235eee6ddc4fb2a8be8b4821717b9e

const CHAIN_ID = 1

// Initialize WalletLink

export const walletLink = new WalletLink({

appName: APP_NAME,

appLogoUrl: APP_LOGO_URL,

darkMode: false

})

// Initialize a Web3 Provider object

export const ethereum = walletLink.makeWeb3Provider(ETH_JSONRPC_URL, CHAIN_ID)

// Initialize a Web3 object

export const web3 = new Web3(ethereum as any)

// Use eth_RequestAccounts

ethereum.send(‘eth_requestAccounts’).then((accounts: string[]) => {

console.log(User's address is ${accounts[0]})

})

walletLink.disconnect()

you don’t need that walletLink.disconnect() when connecting, you just need to call Moralis.authenticate or Moralis.enableWeb3 to have the WalletLink prompt :raised_hands:

1 Like

Curious if anyone was able to get this working from start to finish? It sounds like there’s a bug somewhere, but also everything I’m trying is failing.

its worked or not? connect with wallet link…

Did anyone ever figure this out?

What are you having issues with?

I’m having a hard time finding documentation or an example implementation of WalletLink as a custom connector.

This is a basic example of a connector using their documentation code (only tested with Coinbase Wallet / WalletLink extension).

It’s missing the rest of the integration like deactivation and states with Moralis that a proper provider would have, but it prompts the extension to connect and logs the address in the browser’s console.

import AbstractWeb3Connector from './AbstractWeb3Connector';

export default class CoinbaseWalletConnector extends AbstractWeb3Connector {
  type = 'CoinbaseWallet';

  activate = async () => {
    let coinbaseWallet = null;

    try {
      const { CoinbaseWalletSDK } = require('@coinbase/wallet-sdk')?.CoinbaseWallet;
    } catch (error) {
      // Do nothing. User might not need CoinbaseWallet
    }

    // Error checking for if library is not installed
    if (!CoinbaseWalletSDK) {
      throw new Error('"@coinbase/wallet-sdk" not installed, please install');
    }

    try {
      coinbaseWallet = new CoinbaseWalletSDK({
        appName: 'My Awesome App',
        appLogoUrl: 'https://example.com/logo.png',
        darkMode: false,
      });
    } catch (err) {
      throw new Error('Error during enable via CoinbaseWallet');
    }

    const ethereum = coinbaseWallet.makeWeb3Provider('https://mainnet.infura.io/v3/', '1');

    ethereum.request({ method: 'eth_requestAccounts' }).then(response => {
      const accounts = response;
      console.log(`User's address is ${accounts[0]}`);

    });
  };
}

I’m still not able to get the authentication state with Moralis to work here. The console does log the wallet address properly and the walletLink does open up but the Moralis isAuthenticated state doesn’t get updated properly along with the user attributes.