Documentation
ConnectButton

ConnectButton [Source Code]

ConnectButton is responsible for rendering the connect/disconnect button

💡

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

Basic usage

import { ConnectButton } from "@crossbell/connect-kit";
 
export const Main = () => (
	<ConnectButton>
		{(status, { connect, disconnect }) => (
			<button onClick={status.isConnected ? disconnect : connect}>
				{status.isConnected ? "Disconnect" : "Connect"}
			</button>
		)}
	</ConnectButton>
);

Render with account info

import { CharacterAvatar } from "@crossbell/ui";
import { ConnectButton } from "@crossbell/connect-kit";
import { extractCharacterName } from "@crossbell/util-metadata";
 
export const Main = () => (
	<ConnectButton>
		{(status, { connect, selectCharacters }) => {
			if (status.isConnected) {
				const { character } = status.account;
				const displayName =
					extractCharacterName(character) ?? status.displayAddress;
 
				return (
					<button onClick={selectCharacters}>
						<CharacterAvatar size="24px" character={character} />
						{displayName}
					</button>
				);
			} else {
				return <button onClick={connect}>Connect</button>;
			}
		}}
	</ConnectButton>
);

Interfaces

ConnectButtonProps

OptionTypeDescription
children( status: ConnectButtonStatus, actions: ConnectButtonActions ) => React.ReactNodeRender props

ConnectButtonStatus

OptionTypeDescription
isConnectedboolean
ssrReadyboolean
accountGeneralAccount | null
displayAddressstring | null

ConnectButtonActions

OptionTypeDescription
connect() => voidShow connect modal
disconnect() => voidShow disconnect modal
selectCharacters() => voidShow character selection modal