How to use wallet like portis with moralis?

Moralis General
#1

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.

#2

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:

#3

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
#4

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

1 Like
#5

@PRATIK

Great Job!
Happy BUIDLing :mage:

#6

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
#7

@sksuran

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

:man_mechanic:

1 Like
#8

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
#9

@Yomoo Can you please Look into the code

#10

Hi @PRATIK

I will test it tomorrow :man_mechanic:

#11

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
#12

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

2 Likes
#13

Hey @Yomoo, thanks for the help!

#14