[bug] <UI Problems>

[EagTf]

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

1.0.4

wagmi Version

1.3.7

Current Behavior

Hey, Whenever i add

My Ui acts up and everything centered becomes higher, thats super annoying and really not sure what wrogn with the extension causing that

Expected Behavior

UI shouldnt be affected

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[DanielSinclair]

Hi @EagTf. That seems like an issue with your project that is causing styling to leak. Can you share a CodeSandbox example?

[EagTf]

import { Box, Flex, Show } from '@chakra-ui/react';
import { QueryStatus } from '@/components/panel/QueryPanel';
import { useSelfUserQuery } from '@/api/hooks';
import { LoadingPanel } from '@/components/panel/LoadingPanel';
import { Navbar } from '@/components/layout/navbar';
import { Sidebar, SidebarResponsive } from './sidebar';
import { sidebarBreakpoint, navbarBreakpoint } from '@/theme/breakpoints';
import { ReactNode } from 'react';
import { DefaultNavbar } from './navbar/default';

//Eth
import '@rainbow-me/rainbowkit/styles.css';
import {
  getDefaultWallets,
  RainbowKitProvider,
  darkTheme,
  connectorsForWallets,
} from '@rainbow-me/rainbowkit';
import { WagmiConfig, configureChains, createConfig } from 'wagmi';
import { mainnet, polygon } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import { publicProvider } from 'wagmi/providers/public';
import {
  rainbowWallet,
  walletConnectWallet,
  phantomWallet,
  metaMaskWallet,
  coinbaseWallet,
  trustWallet,
} from '@rainbow-me/rainbowkit/wallets';
const { chains, publicClient } = configureChains(
  [mainnet, polygon],
  [alchemyProvider({ apiKey: 'id' }), publicProvider()]
);

/*const { connectors } = getDefaultWallets({
  appName: 'name', //removed just for code sample
  projectId: 'id', //removed just for code sample
  chains,
});*/

const connectors = connectorsForWallets([
  {
    groupName: 'Recommended',
    wallets: [
      metaMaskWallet({ projectId: 'id', chains }),
      phantomWallet({ chains }),
      coinbaseWallet({ appName: 'name', chains }),
      trustWallet({ projectId: 'id', chains }),
      rainbowWallet({ projectId: 'id', chains }),
      walletConnectWallet({ projectId: 'id', chains }),
    ],
  },
]);

const wagmiConfig = createConfig({
  autoConnect: true,
  connectors,
  publicClient,
});
//
export default function AppLayout({
  navbar,
  children,
  sidebar,
}: {
  navbar?: ReactNode;
  children: ReactNode;
  sidebar?: ReactNode;
}) {
  const query = useSelfUserQuery();

  return (
    <Flex direction="row" h="full">
      <Sidebar sidebar={sidebar} />
      <Show below={sidebarBreakpoint}>
        <SidebarResponsive sidebar={sidebar} />
      </Show>
      <QueryStatus query={query} loading={<LoadingPanel />} error="Failed to load user info">
        <Flex
          pos="relative"
          direction="column"
          height="100%"
          overflow="auto"
          w="full"
          maxWidth={{ base: '100%', xl: 'calc( 100% - 290px )' }}
          maxHeight="100%"
        >
          <Box
            top={0}
            mx="auto"
            maxW="1200px"
            zIndex="sticky"
            pos="sticky"
            w="full"
            pt={{ [navbarBreakpoint]: '16px' }}
            px={{ '3sm': '30px' }}
          >
            <Navbar>{navbar ?? <DefaultNavbar />}</Navbar>
          </Box>
          <Box
            mx="auto"
            w="full"
            maxW="1200px"
            flex={1}
            my={{ base: '30px', [sidebarBreakpoint]: '50px' }}
            px={{ base: '24px', '3sm': '30px' }}
          >
            <WagmiConfig config={wagmiConfig}>
              <RainbowKitProvider theme={darkTheme()} modalSize="compact" chains={chains}>
                {children}
              </RainbowKitProvider>
            </WagmiConfig>
          </Box>
        </Flex>
      </QueryStatus>
    </Flex>
  );
}

[DanielSinclair]

@EagTf Hi. Please share a repo or CodeSandbox example; the issue is more likely in the bundler and dev setup.

[DanielSinclair]

Ensure that you use WagmiConfig and RainbowKitProvider at the top of your component tree. That typically resolves any styling leaks. Reference our examples here for best practices