Can I use openConnectModal outside the ConnectButton component?

[ujjwala2296]

Is there a way to open connect modal automatically (without any click) whenever there is no account connected?

https://www.rainbowkit.com/docs/custom-connect-button

[o-az]

I was able to do this but haven't yet tested fully. I did something like this

export const RainbowButton = () => (
 <ConnectButton.Custom>
    {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => {
	.....
          {(() => {
            if (!mounted || !account || !chain) {
              return (
		// notice I added id="connect-button" <-------------------------------------------------
                <button onClick={openConnectModal} type="button" id="connect-button"> 
                  Connect Wallet
                </button>
              )
            }
	....
  </ConnectButton.Custom>
);

Then in page

  React.useEffect(() => {
    try {
      const btn = document.querySelector('#connect-button') as HTMLButtonElement
      btn.click()
    } catch (error) {
      return
    }
  }, [])

It's a bad solution but it will do for me until they expose more APIs.

[markdalgleish]

This is out now in RainbowKit v0.4.3.

You can check out the docs here: https://www.rainbowkit.com/docs/modal-hooks

[adrianotadao]

@markdalgleish according to the doc

Each of these Hooks returns an object with a function for opening its respective modal. Note that the returned functions will be undefined if your application is not in the required state for the modal to be open.

I'm wondering why in my case this is always undefined .... what state is that?

[fachebot]

I had the same problem.

[1337-ishaan]

+1

it would be really nice if there would be an explaination for "required state"

[yoratoni]

From what I found, they're using two things to set openConnectModal to undefined or to the underneath function, something like this:

openConnectModal:
            connectionStatus === 'disconnected' ||
            connectionStatus === 'unauthenticated'
              ? openConnectModal
              : undefined,

Where connection status depends firstly on "isConnected" from wagmi useAccount hook and, secondly, on their internal hook, where they're listening to some events, the strange thing is that, normally, if isConnected === false, it should return "disconnected" and then, work..

export function useConnectionStatus(): ConnectionStatus {
  const authenticationStatus = useAuthenticationStatus();
  const { isConnected } = useAccount();

  if (!isConnected) {
    return 'disconnected';
  }

  if (!authenticationStatus) {
    return 'connected';
  }

  if (
    authenticationStatus === 'loading' ||
    authenticationStatus === 'unauthenticated'
  ) {
    return authenticationStatus;
  }

  return 'connected';
}

So idk, pretty strange issue, as, in my case, isConnected is equal to false, but it still returns undefined..

Someone told me to retrigger useDisconnect() manually, we'll see if it works

[alireza0sfr]

@yoratoni I faced the same issue that in some scenarios my oppenConnectModal was undefiend and causes my app to break after a lot of investigations I found the issue it was in my custom authentication provider

<WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitAuthenticationProvider enabled={true} adapter={authenticationAdapter} status={authenticationStatus}>
          <RainbowKitProvider theme={darkTheme({
            accentColor: '#19FB80',
            accentColorForeground: 'black',
            fontStack: 'system',
          })}
            initialChain={chains[0]}>
            {children}
          </RainbowKitProvider>
        </RainbowKitAuthenticationProvider>
      </QueryClientProvider>
    </WagmiProvider>

as you can see there is a status which you have to pass your authentication status if your app is handling authentication mechanism instead of rainbowkit and this status wasn't getting updated after user has logged in in or logged out therefore this breaks the rainbowkit mechanism to detect whether user is actually logged in our logged out