Account Guard

The WalletUiAccountGuard is a component that conditionally renders content based on the wallet's connection status. This is useful to avoid boilerplate code in your application, as you can provide a fallback component to be rendered when the user is not connected. When the user is connected, the render prop will be called with the account and wallet information.

Usage

It can be used to show different content to users who are connected versus those who are not.

import { WalletUiAccountGuard } from '@wallet-ui/react';

function MyComponent() {
    return (
        <WalletUiAccountGuard
            render={({ account, wallet }) => (
                <div>
                    <p>This content is only visible when a wallet is connected.</p>
                    <p>Account: {account.address}</p>
                    <p>Wallet: {wallet.name}</p>
                </div>
            )}
        />
    );
}

Props

Example