Embeded wallet connection

[mits87]

Hi there!

I have a quick question regarding RainbowKit.
Basically I would like to embed the wallet connection on my page.
I don't want to click on the button "Connect" and display modal- I prefer to show that modal as a part of the page.

Is it possible? If yes then how can I achieve it?
If no, then how can I open the modal when I enter the page (automatically)?

[saihaj]

how can I open the modal when I enter the page (automatically)?

You can on initial page mount call openConnectModal see https://github.com/rainbow-me/rainbowkit/releases/tag/%40rainbow-me%2Frainbowkit%400.4.3

const { openConnectModal } = useConnectModal();

React.useEffect(() => {
openConnectModal();
},[openConnectModal])

[mits87]

Hi @saihaj
Thanks for your reply, I've checked it but it does not work as expected.

My code:

import type { NextPage } from 'next';

import { ConnectButton, useConnectModal } from '@rainbow-me/rainbowkit';
import { useEffect } from 'react';

import { LayoutProvider } from '../../context/layouts';

const App: NextPage = () => {
  const { openConnectModal } = useConnectModal();

  useEffect(() => {
    openConnectModal();
  }, [openConnectModal]);

  return (
    <LayoutProvider>
      <ConnectButton
        accountStatus={{
          largeScreen: 'full',
          smallScreen: 'avatar',
        }}
      />
    </LayoutProvider>
  );
};

export default App;

if I add:

if (openConnectModal) {
    openConnectModal();
}

then there is no effect .

[mits87]

any ideas?

[saihaj]

Can you share a repo to play with?