ConnectButton [Source Code]

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>
);

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>
);