connectTo function is not available in Wagmi Connector

Help - Plug n Play PnP Web SDKs
1

Hi Web3Auth Support Team,

I’m following your Web3Auth NoModal Wagmi docs:

and example app:

It’s working fine. Now I’m looking for connectTo function to pass Email Passwordless login_hint, which I collect in my website through a separate signup form, but Wagmi provides it’s own connect function which is also used in your example app but it doesn’t accept “loginParams”, so how can I use your connectTo function, as mentioned in the same docs:

2

@musab Welcome Aboard!

Your request has been forwarded to our team and we will get back with further updates.

1 Like
3

Hey @musab, Please have a look here. This accepts login_hint parameter that you need.

4

Hi @maharshi, thanks for getting back to me. I am aware of this, I can’t pass login_hint when initializing wagmi and web3auth during the Web3AuthConnectorInstance. I need to pass login_hint later on to the wagmi connect function.

1 Like
5

Hi @maharshi, @vjgee,

I have the same problem. When initializing wagmi we have to pass the login_hint, but we don’t know the users email address/phone number at this point.

Is there a way for the the user to be able to enter enter their email address/phone number in the popup? Or how can we pass it to the connector on the fly once we get it?

Thanks,
Roshan

6

You can do this

 import { Connector, useConnect } from 'wagmi';

function ConnectWalletModal() {

  const { connect, connectors } = useConnect();

  const handleConnection = (connector: Connector<any, any>) => {
    //@ts-ignore
    if (connector.id === "web3auth" && connector.loginParams.loginProvider === LOGIN_PROVIDER.EMAIL_PASSWORDLESS) {
      const userEmail = prompt('Please enter your email:');
      if (userEmail) {
        //@ts-ignore
        connector.loginParams.extraLoginOptions.login_hint = userEmail;
      } 
      else return
      connect({ connector });
    } else {
      connect({ connector });
    }
  };

return (
  <div>
    {connectors.map((connector) => (
      <div
        key={connector.id + connector.name}
        onClick={() => handleConnection(connector)}
      >
        CONNECT
      </div>
    ))}
  </div>
)

}
export default ConnectWalletModal;
7

@roshan @musab Please check the previous comment from alimunachipeter

8

Tested alimunachipeter’s solution, and received the following error:
Cannot set properties of undefined (setting 'login_hint') .

1 Like
9

@vjgee @musab
This works:

import {OpenloginLoginParams} from '@web3auth/openlogin-adapter';
import {Web3AuthConnector} from '@web3auth/web3auth-wagmi-connector';

  const connectWithWeb3Auth = (
    web3AuthConnector: Web3AuthConnector,
    loginParams: OpenloginLoginParams) => {
    // @ts-ignore
    web3AuthConnector.loginParams = loginParams;
    web3AuthConnector.options.loginParams = loginParams;

    connect({
      connector: web3AuthConnector,
    });
  };

Although I am unable to make the login persistent after redirect as explained here.

1 Like
10

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.