How to use wallet like portis with moralis?

i am using React with moralis and i want to integrate web3. I want to include two options like connect with metamask and connect with portis in my Dapp how do i provide custom provider and the moralis examples with react are very less.

Hey @PRATIK

Iโ€™m not sure is there a way to connect a Portis wallet.
Here is an example of using WalletConnect provider:

authenticate({ provider: "walletconnect" })

WallectConnect supports a lot of wallets. Take a look at Suported Wallets WallectConnect

Hope it will help you :mage:

Itโ€™s not There I will find a Way to do that if I found a solution then will definitely share it with the forum.

1 Like

I found a Solution Using Custom Wallet Docs in the moralis docs.

1 Like

@PRATIK

Great Job!
Happy BUIDLing :mage:

Hey @Yomoo
I was looking into the same thing and according to Moralis Docs to add custom wallet, you have overwrite Moralis.Web3.enable. I wanted to add the options for both MetaMask and a custom wallet but once Moralis.Web3.enable is overwritten, you canโ€™t use metamask.

Is there a workaround for it, or am I missing something out?

1 Like

@sksuran

Please share your code. We need to look at the logic of the code.

:man_mechanic:

1 Like

Iโ€™m using Moralis along side react-moralis and I have a modal with two buttons, one for metamask and one for portis.

For metamask, Iโ€™m simply using authenticate method from useMoralis react hook.

This particular part handles the onClick event for portis.

const handlePortis = async () => {
    class MoralisPortisProvider {
      async activate() {
        const portis = new Portis(
          'portis dapp id',
          'maticMumbai'
        );

        this.provider = portis.provider;
        const MWeb3 = typeof Web3 === 'function' ? Web3 : window.Web3;
        this.web3 = new MWeb3(this.provider);
        this.isActivated = true;
        return this.web3;
      }
    }

    // Global Moralis object overwritten

    Moralis.Web3.enable = async () => {
      const web3Provider = new MoralisPortisProvider();
      const web3 = await web3Provider.activate();
      console.log('RUNNING');
      console.log('WEB3', web3);
      const accounts = await web3.eth.getAccounts();
      console.log(accounts);
      return web3;
    };

    enableWeb3();
    authenticate();
  };

Once the Moralis.Web3.enable is overwritten, it would only use Portis as itโ€™s provider. So thatโ€™s the issue I have been facing. Is there any way, to restore the Moralis.Web3.enable to itโ€™s initial value.

1 Like

@Yomoo Can you please Look into the code

Hi @PRATIK

I will test it tomorrow :man_mechanic:

Hi @PRATIK

Iโ€™s a bit difficuilt to test it without a full code :sweat_smile:
But i think you can use the solution from this topic Disconnect a web3 wallet [Solved]

window.Moralis.Web3.cleanup();

or

Moralis.Web3.cleanup();

Let me know how it will work for you :man_mechanic:

1 Like

If you will have any difficulties, share the full code, I will help

2 Likes

Hey @Yomoo, thanks for the help!