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

packages/connect-kit/src/components/congrats/index.tsx

@@ -15,6 +15,7 @@ export type CongratsProps = {
 	desc: string;
 	tips: string;
 	timeout?: `${number}${"s" | "ms"}`;
+	illustration?: React.ReactNode;
 };
 
 export function Congrats({
@@ -25,6 +26,7 @@ export function Congrats({
 	onClickBtn,
 	onClose,
 	timeout,
+	illustration,
 }: CongratsProps) {
 	const illustrationUrl = useWeb2Url(IMAGES.addBtnImg);
 	const bgUrl = useWeb2Url(IMAGES.congratsBg);
@@ -56,15 +58,19 @@ export function Congrats({
 				<p className={styles.desc}>{desc}</p>
 			</div>
 
-			<div className={styles.illustration1}>
-				<img className={styles.illustration1Img} src={illustrationUrl} />
-			</div>
+			{illustration ?? (
+				<div className={styles.illustration1}>
+					<img className={styles.illustration1Img} src={illustrationUrl} />
+				</div>
+			)}
 
 			<img className={styles.bg} src={bgUrl} />
 
-			<button className={styles.btn} onClick={onClickBtn}>
-				{btnText}
-			</button>
+			{btnText && (
+				<button className={styles.btn} onClick={onClickBtn}>
+					{btnText}
+				</button>
+			)}
 		</div>
 	);
 }

packages/connect-kit/src/hooks/account-state/index.ts

@@ -53,7 +53,8 @@ export const useAccountState = create(
 			},
 
 			async refresh() {
-				await Promise.all([this.refreshEmail(), this.refreshWallet()]);
+				const { refreshEmail, refreshWallet } = get();
+				await Promise.all([refreshEmail(), refreshWallet()]);
 			},
 		}),
 		{

packages/connect-kit/src/hooks/account-state/wallet.ts

@@ -52,9 +52,7 @@ export const createWalletAccountSlice: SliceFn<WalletAccountSlice> = (
 				const { wallet } = get();
 
 				const [character] = await Promise.all([
-					wallet?.address === address && wallet.characterId
-						? indexer.getCharacter(wallet.characterId)
-						: indexer.getPrimaryCharacter(address),
+					getDefaultCharacter({ address, characterId: wallet?.characterId }),
 					wallet?.address === address && wallet.siwe
 						? get().siweRefresh(wallet.siwe.token)
 						: updateSiwe(undefined),
@@ -173,3 +171,17 @@ async function getSiweInfo({
 		return undefined;
 	}
 }
+
+async function getDefaultCharacter({
+	address,
+	characterId,
+}: {
+	address: string;
+	characterId?: number | null;
+}): Promise<CharacterEntity | null> {
+	const character = await (characterId
+		? indexer.getCharacter(characterId)
+		: indexer.getPrimaryCharacter(address));
+
+	return character ?? (await indexer.getCharacters(address)).list[0] ?? null;
+}

packages/connect-kit/src/scenes/for-dynamic-modal/delete-character/index.module.css

@@ -0,0 +1,55 @@
+.tips {
+	color: #49454f;
+	font-weight: 400;
+	font-size: 14px;
+	text-align: center;
+	margin: 10px 0 22px;
+}
+
+.list {
+	margin-top: 12px;
+	width: 100%;
+}
+
+.item {
+	justify-content: center;
+	font-weight: 500;
+	height: 64px;
+	position: relative;
+	overflow: hidden;
+	z-index: 0;
+}
+
+.deleteProgress {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #000;
+	z-index: -1;
+	transform: translateX(-100%);
+	transition: 3s transform linear;
+	--is-active: false;
+}
+
+.delete:active .deleteProgress,
+.deleting .deleteProgress {
+	transform: translateX(0);
+	--is-active: true;
+}
+
+.heartImgContainer {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 183px;
+	width: 100%;
+	margin-bottom: -24px;
+}
+
+.heartImg {
+	width: 120px;
+	height: 120px;
+	object-fit: contain;
+}

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

@@ -0,0 +1,116 @@
+import React from "react";
+import classNames from "classnames";
+import { usePreloadImgs, useRefCallback } from "@crossbell/util-hooks";
+import { LoadingOverlay, useWeb2Url } from "@crossbell/ui";
+
+import {
+	DynamicScenesHeader,
+	DynamicScenesContainer,
+	OptionList,
+	OptionListItem,
+	useDynamicScenesModal,
+	Congrats,
+} from "../../../components";
+import { useDeleteCharacter } from "../../../hooks";
+
+import styles from "./index.module.css";
+
+const heartImgIPFS =
+	"ipfs://bafkreiggl5dvgdoak4grhokwyam3zp3ohecaede4rgbop2jupnbgqjb7bi";
+
+export type DeleteCharacterProps = {
+	characterId: number;
+	afterDelete?: () => void;
+	onCancel?: () => void;
+};
+
+export function DeleteCharacter({
+	characterId,
+	onCancel,
+}: DeleteCharacterProps) {
+	const { goBack, updateLast } = useDynamicScenesModal();
+	const heartUrl = useWeb2Url(heartImgIPFS);
+	const { mutate, isLoading } = useDeleteCharacter({
+		onSuccess() {
+			updateLast({
+				kind: "deleted-congrats",
+				Component: DeletedCongrats,
+			});
+		},
+	});
+
+	usePreloadImgs([heartUrl]);
+
+	const deleteCharacter = useRefCallback(() => mutate({ characterId }));
+
+	return (
+		<DynamicScenesContainer
+			padding="0 24px 24px"
+			header={<DynamicScenesHeader title="Delete Character" />}
+		>
+			<LoadingOverlay visible={isLoading} />
+
+			<p className={styles.tips}>
+				Your data including your character and feed will be permanently deleted
+				except your wallet. Press the button to proceed with the deletion
+			</p>
+
+			<OptionList className={styles.list}>
+				<OptionListItem
+					className={classNames(
+						styles.item,
+						styles.delete,
+						isLoading && styles.deleting
+					)}
+					color="red"
+				>
+					<div
+						className={styles.deleteProgress}
+						onTransitionEnd={({ currentTarget }) => {
+							const isActive =
+								getComputedStyle(currentTarget)
+									.getPropertyValue("--is-active")
+									.trim() === "true";
+
+							if (isActive) {
+								deleteCharacter();
+							}
+						}}
+					/>
+					Press to Delete
+				</OptionListItem>
+				<OptionListItem
+					className={styles.item}
+					color="gray"
+					onClick={onCancel ?? goBack}
+				>
+					Cancel
+				</OptionListItem>
+			</OptionList>
+		</DynamicScenesContainer>
+	);
+}
+
+function DeletedCongrats() {
+	const { hide } = useDynamicScenesModal();
+	const heartUrl = useWeb2Url(heartImgIPFS);
+
+	return (
+		<Congrats
+			title="Deleted!"
+			desc="You have deleted your character, take care and see you next time!"
+			tips="Delete Character"
+			timeout="15s"
+			btnText=""
+			onClose={hide}
+			illustration={
+				<div className={styles.heartImgContainer}>
+					<img className={styles.heartImg} src={heartUrl} alt="Heart" />
+				</div>
+			}
+			onClickBtn={() => {
+				hide();
+			}}
+		/>
+	);
+}

packages/connect-kit/src/scenes/for-dynamic-modal/my-character/index.module.css

@@ -25,3 +25,16 @@
 .lockIcon {
 	color: #78909c;
 }
+
+.deleteCharacter {
+	background: transparent;
+	color: #e65040;
+	font-family: inherit;
+	font-weight: 500;
+	font-size: 16px;
+	border: none;
+	height: 64px;
+	margin-top: 36px;
+	margin-bottom: -36px;
+	border-radius: 12px;
+}

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

@@ -5,6 +5,7 @@ import { useRefCallback } from "@crossbell/util-hooks";
 import { useAccountCharacter, useAccountState } from "../../../hooks";
 import { SelectCharacters } from "../../../scenes";
 import { MintCharacter } from "../../../scenes/for-dynamic-modal/mint-character";
+import { DeleteCharacter } from "../delete-character";
 import { SelectOptions } from "../../../scenes/for-upgrade-account";
 
 import {
@@ -15,10 +16,11 @@ import {
 	WalletIcon,
 	Congrats,
 } from "../../../components";
-
+import commonStyles from "../../../styles.module.css";
 import styles from "./index.module.css";
 import { StorageWidget } from "./components/storage-widget";
 import { CharacterWidget } from "./components/character-widget";
+import classNames from "classnames";
 
 export function MyCharacter() {
 	const account = useAccountState();
@@ -64,6 +66,17 @@ export function MyCharacter() {
 		});
 	});
 
+	const goToDeleteCharacter = useRefCallback(() => {
+		if (character) {
+			goTo({
+				kind: "delete-character",
+				Component: () => (
+					<DeleteCharacter characterId={character?.characterId} />
+				),
+			});
+		}
+	});
+
 	return (
 		<DynamicScenesContainer
 			header={<DynamicScenesHeader title="My Character" />}
@@ -85,6 +98,18 @@ export function MyCharacter() {
 						},
 					])}
 				/>
+
+				{character && (
+					<button
+						className={classNames(
+							styles.deleteCharacter,
+							commonStyles.uxOverlay
+						)}
+						onClick={goToDeleteCharacter}
+					>
+						Delete Character
+					</button>
+				)}
 			</div>
 		</DynamicScenesContainer>
 	);