feat(connect-kit/x-settings): add remove-operator

packages/connect-kit/src/components/option-list/index.tsx

@@ -14,6 +14,11 @@ const colorMap = {
 		color: "#fff",
 		background: "#6AD991",
 	},
+
+	red: {
+		color: "#fff",
+		background: "#E65040",
+	},
 };
 
 type OptionListItemBaseProps = {

packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/item.tsx

@@ -1,11 +1,14 @@
 import React from "react";
+import classNames from "classnames";
 import { CharacterOperatorEntity } from "crossbell.js";
-import { truncateAddress } from "@crossbell/util-ethers";
 import { Loading } from "@crossbell/ui";
-import classNames from "classnames";
+import { truncateAddress } from "@crossbell/util-ethers";
+import { useRefCallback } from "@crossbell/util-hooks";
+import { RemoveOperator } from "../remove-operator";
 
 import commonStyles from "../../../styles.module.css";
 import { useCharacterOperatorPermissions } from "../../../hooks";
+import { useDynamicScenesModal } from "../../../components";
 
 import styles from "./item.module.css";
 
@@ -33,6 +36,20 @@ export function Item({
 	});
 	const permissions = data ?? [];
 
+	const { goTo, goBack } = useDynamicScenesModal();
+	const goToRemoveOperator = useRefCallback(() => {
+		goTo({
+			kind: "remove-operator",
+			Component: () => (
+				<RemoveOperator
+					characterOperator={characterOperator}
+					onSuccess={goBack}
+					onCancel={goBack}
+				/>
+			),
+		});
+	});
+
 	return (
 		<div className={styles.container}>
 			<div>
@@ -56,6 +73,7 @@ export function Item({
 			) : permissions.length > 0 ? (
 				<button
 					className={classNames(styles.removeBtn, commonStyles.uxOverlay)}
+					onClick={goToRemoveOperator}
 				>
 					Remove
 				</button>

packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/list.module.css

@@ -11,3 +11,11 @@
 .itemTitle {
 	padding: 0 0 0 20px;
 }
+
+.emptyTips {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 150px;
+	opacity: 0.8;
+}

packages/connect-kit/src/scenes/for-dynamic-modal/manage-operators/list.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { ScrollArea } from "@mantine/core";
-import { LoadMore } from "@crossbell/ui";
+import { LoadMore, LoadingOverlay } from "@crossbell/ui";
 import { isAddressEqual } from "@crossbell/util-ethers";
 import { CharacterOperatorEntity } from "crossbell.js";
 
@@ -18,31 +18,42 @@ export type ListProps = {
 };
 
 export function List({ characterId }: ListProps) {
-	const { data, hasNextPage, fetchNextPage, isFetchingNextPage } =
+	const { data, hasNextPage, fetchNextPage, isFetchingNextPage, isLoading } =
 		useGetCharacterOperators({
 			characterId,
 		});
 
+	const list = React.useMemo(
+		() =>
+			data?.pages
+				.flatMap((page) =>
+					page.list.map((characterOperator) => ({
+						characterOperator: characterOperator,
+						tags: getTags(characterOperator),
+					}))
+				)
+				.sort((a, b) => (a.tags ? (b.tags ? 0 : -1) : 1)) ?? [],
+		[data]
+	);
+
 	return (
 		<ScrollArea.Autosize mah="70vh" className={styles.container}>
+			<LoadingOverlay visible={isLoading && isFetchingNextPage} />
+
+			{list.length === 0 && (
+				<div className={styles.emptyTips}>No operators</div>
+			)}
+
 			<div className={styles.list}>
-				{data?.pages
-					.flatMap((page) =>
-						page.list.map((characterOperator) => ({
-							characterOperator: characterOperator,
-							tags: getTags(characterOperator),
-						}))
-					)
-					.sort((a, b) => (a.tags ? (b.tags ? 0 : -1) : 1))
-					.map(({ characterOperator, tags }) => (
-						<Item
-							key={characterOperator.operator}
-							characterId={characterId}
-							characterOperator={characterOperator}
-							description={getDescription(characterOperator)}
-							tags={tags}
-						/>
-					))}
+				{list.map(({ characterOperator, tags }) => (
+					<Item
+						key={characterOperator.operator}
+						characterId={characterId}
+						characterOperator={characterOperator}
+						description={getDescription(characterOperator)}
+						tags={tags}
+					/>
+				))}
 			</div>
 
 			<LoadMore

packages/connect-kit/src/scenes/for-dynamic-modal/remove-operator/index.module.css

@@ -0,0 +1,21 @@
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.tips {
+	margin: 0 0 12px;
+	font-weight: 400;
+	font-size: 14px;
+	color: #49454f;
+	text-align: center;
+}
+
+.item {
+	height: 64px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-weight: 500;
+}

packages/connect-kit/src/scenes/for-dynamic-modal/remove-operator/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { CharacterOperatorEntity } from "crossbell.js";
+import { LoadingOverlay } from "@crossbell/ui";
+
+import { useRemoveCharacterOperator } from "../../../hooks";
+
+import {
+	DynamicScenesContainer,
+	DynamicScenesHeader,
+	OptionList,
+	OptionListItem,
+} from "../../../components";
+
+import styles from "./index.module.css";
+import { useRefCallback } from "@crossbell/util-hooks";
+
+export type RemoveOperatorProps = {
+	onSuccess: () => void;
+	onCancel: () => void;
+	characterOperator: CharacterOperatorEntity;
+};
+
+export function RemoveOperator({
+	characterOperator,
+	onSuccess,
+	onCancel,
+}: RemoveOperatorProps) {
+	const { isLoading, mutate } = useRemoveCharacterOperator({ onSuccess });
+	const remove = useRefCallback(() => mutate(characterOperator));
+
+	return (
+		<DynamicScenesContainer
+			padding="10px 24px 24px"
+			header={<DynamicScenesHeader title="Remove Operators" />}
+		>
+			<LoadingOverlay visible={isLoading} />
+			<div className={styles.container}>
+				<p className={styles.tips}>
+					Are you sure you would like to remove the operators? some functions
+					might be affected.
+				</p>
+
+				<OptionList>
+					<OptionListItem className={styles.item} color="red" onClick={remove}>
+						Remove
+					</OptionListItem>
+					<OptionListItem
+						className={styles.item}
+						color="gray"
+						onClick={onCancel}
+					>
+						Cancel
+					</OptionListItem>
+				</OptionList>
+			</div>
+		</DynamicScenesContainer>
+	);
+}

packages/util-ethers/src/index.ts

@@ -11,11 +11,14 @@ export const truncateAddress = (
 		return "0xUNKNOWN";
 	}
 
-	return (
-		address.substring(0, options?.start ?? 6) +
-		"..." +
-		address.substring(address.length - (options?.end ?? 4))
-	);
+	const ellipsis = "...";
+	const start = options?.start ?? 6;
+	const end = options?.end ?? 4;
+
+	const [, startStr, endStr] =
+		new RegExp(`^(.{${start}}).+(.{${end}})$`).exec(address) ?? [];
+
+	return [startStr, endStr].filter(Boolean).join(ellipsis) || address;
 };
 
 export const NIL_ADDRESS = "0x0000000000000000000000000000000000000000";