Custom connectors

Moralis General
#1

hi guys. I have a valid waletconnect connection, provider, and signer. However, my app already has {Moralis, enableWeb3, isAuthenticated, logout, deactivateWeb3 } = useMoralis(); in different pages, and I like using these hooks. but I would want to inject my custom connection into the moralis context what is the easiest way to go about this? Note: when I enableWeb3(provider:‘walletconnect’) ,I always get rate limited because of how often walletconnect calls the speedy node URL. so ideally I’m trying to inject my own connection with my own URL to prevent clogging the moralis default speedy node link.

#2

You can use a custom connector in enableWeb3 similar to authenticate.

Moralis.enableWeb3({ connector: CustomConnector })

Web3modal and Moralis
#3

Hi @alex I checked out this method of yours, I am using the moralis-v1 SDK only in which this code is available. So can I use this custom WalletConnectWeb3Connector directly from SDK?

As I am not clear how to implement that code. @cryptokid @Yomoo

#4

you can try to check the examples from documentation
https://v1docs.moralis.io/moralis-dapp/users/web3-login/custom-auth-any-eip1193-provider#example-implementations

#5

There is an example here for using a custom connector. You can do something similar to the WalletConnect connector.

1 Like
#6

Hi @alex, thanks for the suggestion. I tried to implement the mentioned code in my dApp.

But I keep getting type errors and import errors.

My dApp(s) configuration Next JS+ TypeScript, React JS + TypeScript

“react”: “^18.2.0”,
“next”: “12.3.1”,
“@coinbase/wallet-sdk”: “^3.6.2”,
“web3”: “^1.8.1”,
“moralis”: “^2.9.0”,
“moralis-v1”: “^1.11.0”,
“react-moralis”: “^1.4.2”,
other project related packages

Error 1: When trying to extend the Moralis?.AbstractWeb3Connector

I tried using moralis sdk and also moralis-v1 sdk, but none exports the AbstractWeb3Connector method and I keep getting type error. So I can’t progress with this.

  • I tried Passing the custom connector this way,

await Moralis.authenticate({connector: CoinbaseConnector});
TypeError: Type ‘typeof CoinbaseWalletConnector’ is missing the following properties from type ‘Connector’: type, network, account, chainId, and 2 more.

Connector type mentioned: interface Connector {
type: string;
network: string;
account: null | string;
chainId: null | string;
activate: () => Promise<{
provider: Provider;
account?: string | null;
chainId?: string | null;
}>;
deactivate: () => Promise;
[key: string]: any;
}

Please correct me where I am getting this wrong. My dApp is dependent upon the react-moralis “useMoralis” hook, so I am trying to work walletConnect/coinbase wallet in same way.

If you know some way by which I can get benefits of both the world like implementing separate authentication method and still able to use “useMoralis” please let me know. Thanks.

#7

So you do want to use that particular Coinbase connector, not WalletConnect? Try ignoring the type issue first and see if it works like the demo - I believe that example should still work - make sure you change import Moralis from 'moralis' to import Moralis from 'moralis-v1';.

#8

No I want the walletConnect to work, but I am not able to implement it as of now. So when I came across this implementation of yours, I thought let me try this, as this Coinbase connector also has walletConnect and metamask supported.

Okay I will try to ignore types and check if it works. Thanks.

#9

Hi @alex as mentioned I disable typing and implemented coinbase as mentioned here and also implemented the custom wallet connector as per given moralis docs.

I am getting authenticated via both the methods but none updates the useMoralis hook that I am authenticated. And if I refresh the page, I get connected to browser injected metamask.

I am stuck in this loop and don’t seem the way of getting out, what else alternatives I should try?

#10

Try changing:

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

to

await authenticate({connector: CoinbaseWalletConnector}); // from useMoralis

If you want the states to update from any react-moralis hooks, you’ll need to use the hook versions.

What do you mean by this?

#11

Okay thanks, its working now.
I was using useMoralis hook only but in this way so it wasn’t getting updated.

const {Moralis}:any = useMoralis();
Moralis.authenticate({connector:WalletConnectWeb3Connector})