feat(connect-kit/x-settings): add switch/mint character entry

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

@@ -14,9 +14,25 @@
 }
 
 .characterInfo {
+	width: fit-content;
 	display: flex;
 	align-items: center;
 	gap: 8px;
+	overflow: hidden;
+	background: rgba(62, 64, 82, 0.5);
+	backdrop-filter: blur(3px);
+}
+
+.characterInfoMain {
+	flex: 0 1;
+	max-width: 188px;
+}
+
+.characterName,
+.characterHandle {
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	overflow: hidden;
 }
 
 .characterName {
@@ -30,6 +46,12 @@
 	opacity: 0.9;
 }
 
+.switchCharacter {
+	flex: 0 0 auto;
+	font-size: 24px;
+	cursor: pointer;
+}
+
 .accountDescription {
 	font-weight: 500;
 	font-size: 16px;

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

@@ -1,18 +1,25 @@
 import React from "react";
-import { CharacterAvatar } from "@crossbell/ui";
+import { CharacterAvatar, SettingsAccountOutlineIcon } from "@crossbell/ui";
 import { extractCharacterName } from "@crossbell/util-metadata";
 import { truncateAddress } from "@crossbell/util-ethers";
+
 import {
 	GeneralAccount,
 	useAccountCharacter,
 	useConnectedAccount,
-} from "@crossbell/connect-kit";
+} from "../../../../hooks";
 
 import { WalletIcon, EmailIcon } from "../../../../components";
 
 import styles from "./index.module.css";
 
-export function CharacterWidget() {
+export type CharacterWidgetProps = {
+	onClickSwitchCharacter: () => void;
+};
+
+export function CharacterWidget({
+	onClickSwitchCharacter,
+}: CharacterWidgetProps) {
 	const account = useConnectedAccount();
 	const character = useAccountCharacter();
 
@@ -22,29 +29,32 @@ export function CharacterWidget() {
 
 	return (
 		<div className={styles.container}>
-			<div>
-				<div className={styles.characterInfo}>
-					<CharacterAvatar
-						character={character}
-						size="36px"
-						className={styles.avatar}
-					/>
+			<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 className={styles.characterInfoMain}>
+					<div className={styles.characterName}>
+						{extractCharacterName(character)}
 					</div>
+					<div className={styles.characterHandle}>@{character.handle}</div>
 				</div>
 
-				<div className={styles.accountDescription}>
-					{getAccountDescription(account)}
-				</div>
-				<div className={styles.accountAddress}>
-					{getAccountAddress(account)}
-				</div>
+				{account.type === "wallet" && (
+					<SettingsAccountOutlineIcon
+						onClick={onClickSwitchCharacter}
+						className={styles.switchCharacter}
+					/>
+				)}
+			</div>
+
+			<div className={styles.accountDescription}>
+				{getAccountDescription(account)}
 			</div>
+			<div className={styles.accountAddress}>{getAccountAddress(account)}</div>
 
 			{getAccountIcon(account)}
 		</div>

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

@@ -9,6 +9,8 @@ import {
 	OPSignSettings,
 	CharacterSyncSettings,
 	ManageOperators,
+	SelectCharacters,
+	MintCharacterForDynamicModal,
 } from "../../../../scenes";
 import { SelectOptions } from "../../../../scenes/upgrade-account";
 
@@ -20,6 +22,7 @@ import {
 	DumbOpSignIcon,
 	WalletIcon,
 	IdCardIcon,
+	Congrats,
 } from "../../../../components";
 
 import styles from "./index.module.css";
@@ -86,6 +89,38 @@ export function MainSetting() {
 		});
 	});
 
+	const goToCongratsForMintCharacter = useRefCallback(() => {
+		goTo({
+			kind: "congrats-for-mint-character",
+			Component: () => <CongratsForMintCharacter />,
+		});
+	});
+
+	const goToMintCharacter = useRefCallback(() => {
+		goTo({
+			kind: "mint-characters",
+			Component: () => (
+				<MintCharacterForDynamicModal
+					sceneMode="form"
+					formMode="normal"
+					onSuccess={goToCongratsForMintCharacter}
+				/>
+			),
+		});
+	});
+
+	const goToSwitchCharacter = useRefCallback(() => {
+		goTo({
+			kind: "select-characters",
+			Component: () => (
+				<SelectCharacters
+					onSelectNew={goToMintCharacter}
+					afterSelectCharacter={goBack}
+				/>
+			),
+		});
+	});
+
 	return (
 		<DynamicScenesContainer
 			header={
@@ -101,7 +136,7 @@ export function MainSetting() {
 			padding="0 24px 48px"
 		>
 			<div className={styles.container}>
-				<CharacterWidget />
+				<CharacterWidget onClickSwitchCharacter={goToSwitchCharacter} />
 
 				{character && <StorageWidget characterId={character.characterId} />}
 
@@ -160,3 +195,26 @@ export function MainSetting() {
 		</DynamicScenesContainer>
 	);
 }
+
+function CongratsForMintCharacter() {
+	const { hide, resetScenes } = useDynamicScenesModal();
+
+	return (
+		<Congrats
+			title="Congrats!"
+			desc="Now you can return into the feed and enjoy Crossbell."
+			tips="Welcome to new Crossbell"
+			timeout="15s"
+			btnText="Back to xSettings"
+			onClose={hide}
+			onClickBtn={() => {
+				resetScenes([
+					{
+						kind: "main-settings",
+						Component: MainSetting,
+					},
+				]);
+			}}
+		/>
+	);
+}

packages/connect-kit/src/scenes/index.ts

@@ -1,4 +1,5 @@
 export * from "./mint-character";
+export * from "./mint-character-for-dynamic-modal";
 export * from "./character-sync-settings";
 export * from "./connect-kind-differences";
 export * from "./connect-wallet";

packages/connect-kit/src/scenes/mint-character-for-dynamic-modal/index.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { useRefCallback } from "@crossbell/util-hooks";
+import { useUrlComposer } from "@crossbell/ui";
+
+import { useAccountCharacter } from "../../hooks";
+import { useDynamicScenesModal, Congrats } from "../../components";
+import {
+	MintCharacter as Main,
+	MintCharacterProps as Props,
+	MintCharacterFormMode,
+	MintCharacterSceneMode,
+} from "../mint-character";
+
+export type MintCharacterPropsForDynamicModal = Pick<
+	Props,
+	"sceneMode" | "formMode"
+> & {
+	onSuccess?: () => void;
+};
+
+export function MintCharacterForDynamicModal({
+	sceneMode,
+	formMode,
+	onSuccess,
+}: MintCharacterPropsForDynamicModal) {
+	const { goTo, updateLast } = useDynamicScenesModal();
+
+	const onSwitchSceneMode = useRefCallback(
+		(sceneMode: MintCharacterSceneMode) => {
+			updateLast({
+				kind: "mint-character",
+				Component: () => (
+					<MintCharacterForDynamicModal
+						formMode={formMode}
+						sceneMode={sceneMode}
+						onSuccess={onSuccess}
+					/>
+				),
+			});
+		}
+	);
+
+	const onSwitchFormMode = useRefCallback((formMode: MintCharacterFormMode) => {
+		updateLast({
+			kind: "mint-character",
+			Component: () => (
+				<MintCharacterForDynamicModal
+					formMode={formMode}
+					sceneMode={sceneMode}
+					onSuccess={onSuccess}
+				/>
+			),
+		});
+	});
+
+	return (
+		<Main
+			formMode={formMode}
+			sceneMode={sceneMode}
+			onSwitchFormMode={onSwitchFormMode}
+			onSwitchSceneMode={onSwitchSceneMode}
+			onSuccess={() => {
+				if (onSuccess) {
+					onSuccess();
+				} else {
+					goTo({
+						kind: "congrats",
+						Component: CongratsForMintCharacter,
+					});
+				}
+			}}
+		/>
+	);
+}
+
+function CongratsForMintCharacter() {
+	const character = useAccountCharacter();
+	const urlComposer = useUrlComposer();
+	const { hide } = useDynamicScenesModal();
+
+	return (
+		<Congrats
+			title="Congrats!"
+			desc="Now you can return into the feed and enjoy Crossbell."
+			tips="Welcome to new Crossbell"
+			timeout="15s"
+			btnText={character ? "Check Character" : "Close"}
+			onClose={hide}
+			onClickBtn={() => {
+				if (character) {
+					window.open(urlComposer.characterUrl(character), "_blank");
+				}
+				hide();
+			}}
+		/>
+	);
+}

packages/ui/src/icons/svgr/index.ts

@@ -41,6 +41,7 @@ export { default as PersonRemoveIcon } from "./person-remove";
 export { default as RefreshFilledIcon } from "./refresh-filled";
 export { default as RiskIcon } from "./risk";
 export { default as SearchIcon } from "./search";
+export { default as SettingsAccountOutlineIcon } from "./settings-account-outline";
 export { default as SettingsEyeIcon } from "./settings-eye";
 export { default as SettingsXSyncIcon } from "./settings-x-sync";
 export { default as ShareIcon } from "./share";

packages/ui/src/icons/svgr/settings-account-outline.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { SVGProps, Ref, forwardRef } from "react";
+const SvgSettingsAccountOutline = (
+	props: SVGProps<SVGSVGElement>,
+	ref: Ref<SVGSVGElement>
+) => (
+	<svg
+		width="1em"
+		height="1em"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		ref={ref}
+		{...props}
+	>
+		<path
+			d="M13.497 12c.819 0 1.515-.287 2.09-.86a2.837 2.837 0 0 0 .863-2.087c0-.819-.287-1.516-.86-2.09a2.837 2.837 0 0 0-2.087-.863c-.819 0-1.515.287-2.09.86a2.837 2.837 0 0 0-.863 2.087c0 .819.286 1.515.86 2.09a2.837 2.837 0 0 0 2.087.863ZM6.5 17.525a9.435 9.435 0 0 1 3.1-2.575 8.326 8.326 0 0 1 3.9-.95c1.383 0 2.683.317 3.9.95a9.435 9.435 0 0 1 3.1 2.575V3.5h-14v14.025ZM6.5 19c-.412 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 5 17.5v-14c0-.413.147-.766.44-1.06.294-.293.647-.44 1.06-.44h14c.413 0 .766.147 1.06.44.293.294.44.647.44 1.06v14c0 .413-.147.766-.44 1.06-.294.293-.647.44-1.06.44h-14Zm-3 3c-.413 0-.766-.147-1.06-.44A1.445 1.445 0 0 1 2 20.5V6.25h1.5V20.5h14.25V22H3.5Zm10-11.5c-.4 0-.742-.142-1.025-.425a1.397 1.397 0 0 1-.425-1.025c0-.4.142-.742.425-1.025A1.397 1.397 0 0 1 13.5 7.6c.4 0 .742.142 1.025.425.283.283.425.625.425 1.025 0 .4-.142.742-.425 1.025a1.397 1.397 0 0 1-1.025.425Zm-4.675 7h9.35a6.051 6.051 0 0 0-2.113-1.488A6.514 6.514 0 0 0 13.5 15.5c-.9 0-1.754.17-2.563.512A6.051 6.051 0 0 0 8.825 17.5Z"
+			fill="#fff"
+		/>
+	</svg>
+);
+const ForwardRef = forwardRef(SvgSettingsAccountOutline);
+export default ForwardRef;