MegapotProvider

The MegapotProvider is a context provider component that sets up the Megapot UI environment. It provides theming and wallet connection functionalities.

Usage

 <MegapotProvider
    theme={{
      primaryColor: '#693efe',
      theme: 'dark',
    }}
    onConnectWallet={login}
    onSwitchChain={switchChain}
  >
    {children}
  </MegapotProvider>

Props

Name	Type	Description
onConnectWallet*	() => void	This function handles the logic for connecting to a wallet, compatible with any wallet provider's connect
onSwitchChain	(chainId: number) => void	An optional function that handles chain switching logic, compatible with any wallet provider's connect
theme	MegapotThemeProps	An optional theme object to override the default Megapot theme.

Theming

The MegapotProvider allows you to customize the theme by passing a theme prop. This prop should be an object that matches the MegapotThemeProps type. The theme will be deeply merged with the default theme.

MegapotThemeProps

Name	Type	Description
theme	'dark' | 'light'	Sets the overall theme of the application. Choose between 'dark' and 'light'.
primaryColor	string	Defines the primary color used throughout the UI Kit.
fontFamily	string	Defines the font family used throughout the UI Kit.
text	{ default?: string; caption?: string; }	Customize text colors.
button	{ default?: React.CSSProperties; text?: React.CSSProperties; }	Override default button and text button styles.
input	React.CSSProperties	CSS properties to override input styles.
widget	{ style?: React.CSSProperties; }	CSS properties to override widget styles.
borderRadius	string	Defines the border radius for Input and Button components.