Connect WalletLink

metylbk · December 26, 2022, 1:30pm

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.

Yomoo · October 28, 2021, 3:00pm

Hi @metylbk

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

metylbk · October 30, 2021, 7:27pm

Did you test it? Is it working for you?

metylbk · November 3, 2021, 4:33am

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

metylbk · November 13, 2021, 5:12pm

@Yomoo could u check that?

Yomoo · November 15, 2021, 12:50pm

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;
  };

minkowsky · January 8, 2022, 2:18am

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];
  }

YosephKS · January 8, 2022, 6:39am

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 hope this helps~

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

Cheers~

RdGhostmann · January 14, 2022, 5:13am

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()]

YosephKS · January 14, 2022, 5:29am

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

RdGhostmann · January 14, 2022, 8:39am

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

RdGhostmann · January 14, 2022, 5:57am

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()

YosephKS · January 14, 2022, 3:14pm

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

nfttwk · January 17, 2022, 5:21pm

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.

ntsh.vicky · March 19, 2022, 7:26am

its worked or not? connect with wallet link…

Clint1080 · June 16, 2022, 7:41pm

Did anyone ever figure this out?

alex · June 16, 2022, 11:50pm

What are you having issues with?

Clint1080 · June 17, 2022, 4:31pm

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

alex · June 18, 2022, 10:43pm

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]}`);

    });
  };
}

Mantou · June 21, 2022, 6:01pm

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.