Using and customizing the ConnectWallet
This is the main component. It is responsible for rendering the connect/disconnect button.
onConnectFailure, onConnectSuccess, and onDisconnect callbacks can be passed to
IdentityKitProvider
import { IdentityKitProvider, ConnectWallet } from "@nfid/identitykit/react"
export const YourApp = () => {
return <IdentityKitProvider
onConnectFailure={(e: Error) => {}}
onConnectSuccess={() => {}}
onDisconnect={() => {}}
>
<ConnectWallet />
</IdentityKitProvider>;
};
But @nfid/identitykit
also exports all components of which ConnectWallet
is built to prodive as
maximum customizations as possile.
import {
ConnectWalletButton,
ConnectedWalletButton,
ConnectWalletDropdownMenu,
} from "@nfid/identitykit/react"
export const YourApp = () => {
return (
<ConnectWallet
connectButtonComponent={ConnectWalletButton || YourCustomConnectButtonComponent}
connectedButtonComponent={ConnectedWalletButton || YourCustomConnectedButtonComponent}
dropdownMenuComponent={ConnectWalletDropdownMenu || YourCustomDropdownMenuComponent}
/>
)
}
Note: Make sure your app is wrapped in the necessary providers. Read more.
Custom components
The ConnectWalletButton
, ConnectedWalletButton
and ConnectWalletDropdown
components expose
several ways to customize its appearance:
ConnectWalletButton
Props ConnectWalletButtonProps = HTMLProps<HTMLButtonElement>
First, and very basic customization is children
, pass them to set a custom ConnectWalletButton
text. Default is “Connect wallet”.
<ConnectWalletButton>Sign in</ConnectWalletButton>
And of course className
. For example to make button background red.
<ConnectWalletButton className="bg-red">Sign in</ConnectWalletButton>
And also it’s possible to create your own custom button, or even not a button, just attach onClick
prop to any element, which you want to open signers modal on click:
function ConnectWalletButton({ onClick, ...props }: ConnectWalletButtonProps) {
return (
<div onClick={onClick}>
<button>
Connect wallet
</button>
<img /> // for example add some image etc.
</div>
)
}
ConnectedWalletButton
Props
ConnectedWalletButtonProps = HTMLProps<HTMLButtonElement> & { connectedAccount: string, icpBalance?: number }
Just like with the previous button, basic button props can be applied, and it’s also possible to create your own custom button, which will receive next props along with default button props:
connectedAccount
string containing address of connected accounticpBalance
string containing connected account balance orundefined
if balance is fetching
function CustomConnectedWalletButton({ connectedAccount, icpBalance, ...props }: ConnectedWalletButtonProps) {
return (
<ConnectedWalletButton {...props}>
{`Disconnect ${connectedAccount} ${icpBalance} ICP`}
</ConnectedWalletButton>
)
}
Note: ConnectedWalletButton is basically DropdownMenuButton with additional styles and manages
opening of dropdown under the hood, so in case you want to use your own existing component for
this purpose just wrap it with ConnectWalletDropdownMenuButton
component
ConnectWalletDropdownMenu
Props
ConnectWalletDropdownMenuProps = { connectedAccount: string, icpBalance?: number, disconnect: () => Promise<void>}
ConnectWalletDropdownMenu
is built from the next components, which @nfid/identitykit
exports:
- ConnectWalletDropdownMenuButton
- ConnectWalletDropdownMenuItems
- ConnectWalletDropdownMenuItem
- ConnectWalletDropdownMenuItemText
- ConnectWalletDropdownMenuAddressItem
- ConnectWalletDropdownMenuDisconnectItem
It’s possible to create your own DropdownComponent
using these components, reorder menu items,
change them or add new
function DropdownMenu({ connectedAccount, icpBalance, disconnect }: ConnectWalletDropdownMenuProps) {
return (
<ConnectWalletDropdownMenu>
<ConnectedWalletButton connectedAccount={connectedAccount} icpBalance={icpBalance} />
// or to make your own component for connected state and trigger dropdown on click
<ConnectWalletDropdownMenuButton>
<YourCustomComponent>
</ConnectWalletDropdownMenuButton>
<ConnectWalletDropdownMenuItems>
<ConnectWalletDropdownMenuDisconnectItem onClick={disconnect} />
<ConnectWalletDropdownMenuItem>
<ConnectWalletDropdownMenuItemText>
Your custom menu item
</ConnectWalletDropdownMenuItemText>
</ConnectWalletDropdownMenuItem>
<ConnectWalletDropdownMenuAddressItem value={connectedAccount} />
</ConnectWalletDropdownMenuItems>
</ConnectWalletDropdownMenu>
)
}