feat(connect-kit/x-settings): add character-widget

packages/connect-kit/src/modals/x-settings-modal/components/character-widget/index.module.css

@@ -0,0 +1,53 @@
+.container {
+	background: #3e4052;
+	color: #fff;
+	padding: 16px 24px;
+	border-radius: 12px;
+	font-weight: 500;
+	line-height: 1.2;
+	position: relative;
+	z-index: 0;
+}
+
+.avatar {
+	border: 2px solid #fff;
+}
+
+.characterInfo {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.characterName {
+	font-size: 16px;
+	font-weight: 500;
+}
+
+.characterHandle {
+	font-size: 12px;
+	font-weight: 500;
+	opacity: 0.9;
+}
+
+.accountDescription {
+	font-weight: 500;
+	font-size: 16px;
+	line-height: 24px;
+	margin-top: 8px;
+}
+
+.accountAddress {
+	font-weight: 500;
+	font-size: 12px;
+	line-height: 16px;
+}
+
+.accountIcon {
+	width: 72px;
+	height: 72px;
+	position: absolute;
+	right: 24px;
+	bottom: 12px;
+	z-index: -1;
+}

packages/connect-kit/src/modals/x-settings-modal/components/character-widget/index.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { CharacterAvatar } from "@crossbell/ui";
+import { extractCharacterName } from "@crossbell/util-metadata";
+import { truncateAddress } from "@crossbell/util-ethers";
+import {
+	GeneralAccount,
+	useAccountCharacter,
+	useConnectedAccount,
+} from "@crossbell/connect-kit";
+
+import { WalletIcon, EmailIcon } from "../../../../components";
+
+import styles from "./index.module.css";
+
+export function CharacterWidget() {
+	const account = useConnectedAccount();
+	const character = useAccountCharacter();
+
+	if (!account || !character) {
+		return null;
+	}
+
+	return (
+		<div className={styles.container}>
+			<div>
+				<div className={styles.characterInfo}>
+					<CharacterAvatar
+						character={character}
+						size="36px"
+						className={styles.avatar}
+					/>
+
+					<div>
+						<div className={styles.characterName}>
+							{extractCharacterName(character)}
+						</div>
+						<div className={styles.characterHandle}>@{character.handle}</div>
+					</div>
+				</div>
+
+				<div className={styles.accountDescription}>
+					{getAccountDescription(account)}
+				</div>
+				<div className={styles.accountAddress}>
+					{getAccountAddress(account)}
+				</div>
+			</div>
+
+			{getAccountIcon(account)}
+		</div>
+	);
+}
+
+function getAccountDescription(account: GeneralAccount): string {
+	switch (account.type) {
+		case "email":
+			return "You are Email User";
+		case "wallet":
+			return "You are Wallet User";
+	}
+}
+
+function getAccountAddress(account: GeneralAccount): string {
+	switch (account.type) {
+		case "email":
+			return truncateAddress(account.email, { start: 8, end: 9 });
+		case "wallet":
+			return truncateAddress(account.address, { start: 8, end: 9 });
+	}
+}
+
+function getAccountIcon(account: GeneralAccount): React.ReactNode {
+	switch (account.type) {
+		case "email":
+			return <EmailIcon className={styles.accountIcon} />;
+		case "wallet":
+			return <WalletIcon className={styles.accountIcon} />;
+	}
+}

packages/connect-kit/src/modals/x-settings-modal/scenes/main-settings/index.tsx

@@ -19,6 +19,7 @@ import {
 
 import styles from "./index.module.css";
 import { StorageWidget } from "../../components/storage-widget";
+import { CharacterWidget } from "../../components/character-widget";
 
 export function MainSetting() {
 	const account = useAccountState();
@@ -81,7 +82,9 @@ export function MainSetting() {
 			padding="0 24px 48px"
 		>
 			<div className={styles.container}>
-				{characterId && <StorageWidget characterId={characterId} />}
+				<CharacterWidget />
+
+				{character && <StorageWidget characterId={character.characterId} />}
 
 				<SettingsSection
 					title="Connect"

packages/util-ethers/src/index.ts

@@ -1,10 +1,20 @@
-export const truncateAddress = (address?: string) => {
+export type TruncateAddressOptions = {
+	start?: number;
+	end?: number;
+};
+
+export const truncateAddress = (
+	address?: string,
+	options?: TruncateAddressOptions
+) => {
 	if (!address) {
 		return "0xUNKNOWN";
 	}
 
 	return (
-		address.substring(0, 6) + "..." + address.substring(address.length - 4)
+		address.substring(0, options?.start ?? 6) +
+		"..." +
+		address.substring(address.length - (options?.end ?? 4))
 	);
 };