🎨 Customization

The main component of KryptoGO Kit is the "connect wallet" button.

Using and customising the ConnectButton

This is the main component. It is responsible for rendering the connect/disconnect button, as well as chain-swapping UI.

import { ConnectButton } from "@kryptogo/kryptogokit";

export const YourApp = () => {
  return <ConnectButton />;
};

Note: Make sure your app is wrapped in the necessary providers. Read more about wrapped providers here.

The ConnectButton component exposes several props to customize its appearance, including toggling the visibility of different elements.

Prop	Type	Default
label	string	Connect Wallet
accountStatus	enum	full
chainStatus	enum	{ smallScreen: "icon", largeScreen: "full" }
showBalance	enum	{ smallScreen: false, largeScreen: true }

Note: the built-in largeScreen breakpoint is 768px.

Use the label prop to set a custom ConnectButton text.

<ConnectButton label="Sign in" />

Here are a few different ways you can use the accountStatus prop.

Only show the account's avatar.

<ConnectButton accountStatus="avatar" />

Only show the account's address.

<ConnectButton accountStatus="address" />

Here are a few different ways you can use the chainStatus prop.

Only show the current chain's icon.

<ConnectButton chainStatus="icon" />

Only show the current chain's name.

<ConnectButton chainStatus="name" />

Hide the chain UI entirely.

<ConnectButton chainStatus="none" />

Use the showBalance prop to hide/show the balance.

Hide the balance.

<ConnectButton showBalance={false} />

These props can also be defined in a responsive format.

On small screens, only show account icon. But on large screens, show icon and address.

<ConnectButton
  accountStatus={{
    smallScreen: "avatar",
    largeScreen: "full",
  }}
/>

On small screens, hide balance. But on large screens, show it.

<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>