How to custom popup login container

[v1xingyue]

Hi, I want to konw is it possible extend rainbowkit .
Because I want to move the popup panel to the other html document, Cause my style only can be put in one fixed dom.

[magiziz]

@v1xingyue Are you able to see if you can move your <RainbowKitProvider /> under the component that populates the styles ?

Something like this:

<PopulateCssComponent>
  <RainbowKitProvider> ... </RainbowKitProvider>
</PopulateCssComponent />

[v1xingyue]

Some pages work as expected.
such as https://www.rainbowkit.com/zh-CN.
But other pages the pop up style is lost.

[v1xingyue]

Also this is my example code :

import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { mainnet, polygon, optimism, arbitrum, base, zora } from "wagmi/chains";
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import { ConnectButton } from "@rainbow-me/rainbowkit";

const config = getDefaultConfig({
  appName: "My RainbowKit App",
  projectId: "",
  chains: [mainnet, polygon, optimism, arbitrum, base, zora],
});

const App = () => {
  const queryClient = new QueryClient();

  return (
    <div
      style={{
        width: 200,
        height: 200,
      }}
      className="plasmo-card plasmo-bg-base-200 plasmo-shadow-xl plasmo-fixed plasmo-top-10 plasmo-right-5"
    >
      <h2>Hello world</h2>

      <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
          <RainbowKitProvider>
            <p>Rainbow !!!!</p>
            <ConnectButton />
          </RainbowKitProvider>
        </QueryClientProvider>
      </WagmiProvider>
    </div>
  );
};

export default App;

[magiziz]

@v1xingyue Sorry i think i misunderstood you a bit here. You're trying to make a custom popup with RainbowKit ? Also < PopulateCssComponent/> was just a example i provided, but if you want to create your own popup through RainbowKit that wouldn't be possible.

What you can do is wait till you connect your wallet with RainbowKit and when you're connected you can then have your own login popup modal as you wish using wagmi hooks. We also have sign-in with ethreum solution here

[v1xingyue]

Thanks all the same! I got it, I will try other ways.