@fairmint/ui 0.2.1 → 0.2.2

package/dist/fairmint-ui.js

@@ -25515,6 +25515,211 @@ function InvestorProfileCard({
     children
   ] });
 }
+function truncateAddress(address, chars = 4) {
+  if (address.length <= chars * 2 + 2) return address;
+  return `${address.slice(0, chars + 2)}...${address.slice(-chars)}`;
+}
+const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
+const ETH_ADDRESS_RE = /^0x[a-fA-F0-9]{40}$/;
+function isEthereumAddress(value) {
+  return ETH_ADDRESS_RE.test(value) && value.toLowerCase() !== ZERO_ADDRESS;
+}
+function validateEthereumAddress(value) {
+  if (!ETH_ADDRESS_RE.test(value))
+    return "Must be a valid Ethereum address (0x + 40 hex characters)";
+  if (value.toLowerCase() === ZERO_ADDRESS) return "Cannot use the zero address";
+  return null;
+}
+const ETHEREUM_ADDRESS_REGEX = ETH_ADDRESS_RE;
+const ZERO_ETHEREUM_ADDRESS = ZERO_ADDRESS;
+const DEFAULT_TYPE_LABELS = {
+  fairmint: "Fairmint Wallet",
+  privy: "Fairmint Wallet",
+  manual: "Manual"
+};
+function getTypeLabel(type, custom2) {
+  if (custom2?.[type]) return custom2[type];
+  return DEFAULT_TYPE_LABELS[type] ?? type;
+}
+function WalletList({
+  wallets,
+  onAdd,
+  onRemove,
+  readOnly = false,
+  addLoading = false,
+  removeLoading = false,
+  emptyIcon,
+  copyIcon,
+  copiedIcon,
+  removeIcon,
+  addIcon,
+  typeLabels,
+  removableTypes = ["manual"]
+}) {
+  const [newAddress, setNewAddress] = useState("");
+  const [addressError, setAddressError] = useState(null);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [walletToRemove, setWalletToRemove] = useState(null);
+  const [copiedAddress, setCopiedAddress] = useState(null);
+  const copyTimeoutRef = useRef(void 0);
+  useEffect(() => () => clearTimeout(copyTimeoutRef.current), []);
+  const copyAddress = async (address) => {
+    try {
+      await navigator.clipboard.writeText(address);
+      clearTimeout(copyTimeoutRef.current);
+      setCopiedAddress(address);
+      copyTimeoutRef.current = setTimeout(() => setCopiedAddress(null), 2e3);
+    } catch {
+    }
+  };
+  const canAdd = !readOnly && !!onAdd;
+  const canRemove = !readOnly && !!onRemove;
+  const handleAdd = async () => {
+    const trimmed = newAddress.trim();
+    const error2 = validateEthereumAddress(trimmed);
+    if (error2) {
+      setAddressError(error2);
+      return;
+    }
+    setAddressError(null);
+    try {
+      await onAdd?.(trimmed);
+      setNewAddress("");
+      setShowAddForm(false);
+    } catch {
+      setAddressError("Failed to add wallet");
+    }
+  };
+  const [removeError, setRemoveError] = useState(null);
+  const handleRemove = async () => {
+    if (!walletToRemove) return;
+    setRemoveError(null);
+    try {
+      await onRemove?.(walletToRemove);
+      setWalletToRemove(null);
+    } catch {
+      setRemoveError("Failed to remove wallet. Please try again.");
+    }
+  };
+  if (wallets.length === 0 && !showAddForm) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        icon: emptyIcon,
+        title: "No wallets connected",
+        description: "Add a wallet address to receive equity on-chain.",
+        actionLabel: canAdd ? "Add Wallet" : void 0,
+        onAction: canAdd ? () => setShowAddForm(true) : void 0
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    wallets.map((w) => /* @__PURE__ */ jsxs(
+      Group,
+      {
+        justify: "space-between",
+        p: "xs",
+        style: {
+          borderRadius: "var(--mantine-radius-sm)",
+          border: "1px solid var(--mantine-color-default-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: getTypeLabel(w.type, typeLabels) }),
+            w.label && /* @__PURE__ */ jsx(Text, { size: "xs", c: `${colors.neutral}.5`, children: w.label }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", children: truncateAddress(w.address) })
+          ] }),
+          /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+            copyIcon && /* @__PURE__ */ jsx(Tooltip, { label: copiedAddress === w.address ? "Copied!" : "Copy address", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "sm",
+                onClick: () => copyAddress(w.address),
+                "aria-label": "Copy wallet address",
+                children: copiedAddress === w.address ? copiedIcon ?? copyIcon : copyIcon
+              }
+            ) }),
+            canRemove && removeIcon && removableTypes.includes(w.type) && /* @__PURE__ */ jsx(Tooltip, { label: "Remove wallet", children: /* @__PURE__ */ jsx(
+              ActionIcon,
+              {
+                variant: "subtle",
+                size: "sm",
+                color: colors.error,
+                onClick: () => setWalletToRemove(w.address),
+                disabled: removeLoading,
+                "aria-label": "Remove wallet",
+                children: removeIcon
+              }
+            ) })
+          ] })
+        ]
+      },
+      w.address
+    )),
+    canAdd && (showAddForm ? /* @__PURE__ */ jsxs(Group, { gap: "xs", mt: "xs", children: [
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          placeholder: "0x...",
+          "aria-label": "Wallet address",
+          value: newAddress,
+          onChange: (e) => {
+            setNewAddress(e.currentTarget.value);
+            setAddressError(null);
+          },
+          error: addressError,
+          style: { flex: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: handleAdd, loading: addLoading, children: "Add" }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "subtle",
+          color: colors.neutral,
+          onClick: () => {
+            setShowAddForm(false);
+            setNewAddress("");
+            setAddressError(null);
+          },
+          children: "Cancel"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "light",
+        size: "xs",
+        leftSection: addIcon,
+        onClick: () => setShowAddForm(true),
+        mt: "xs",
+        children: "Add Wallet"
+      }
+    )),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        title: "Remove Wallet",
+        message: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+          /* @__PURE__ */ jsx(Text, { size: "sm", children: "Are you sure you want to remove this wallet address? This action cannot be undone." }),
+          walletToRemove && /* @__PURE__ */ jsx(Text, { size: "sm", ff: "monospace", c: `${colors.neutral}.5`, children: walletToRemove }),
+          removeError && /* @__PURE__ */ jsx(Text, { size: "sm", c: colors.error, children: removeError })
+        ] }),
+        opened: walletToRemove !== null,
+        confirmLabel: "Remove",
+        confirmColor: colors.error,
+        onConfirm: handleRemove,
+        onCancel: () => {
+          setWalletToRemove(null);
+          setRemoveError(null);
+        },
+        loading: removeLoading
+      }
+    )
+  ] });
+}
 function useDebouncedCallback(fn, delay) {
   const timer = useRef(null);
   const fnRef = useRef(fn);
@@ -25546,10 +25751,6 @@ const notify = {
   warning: ({ title, message, autoClose = 5e3 }) => notifications.show({ title, message, color: colors.warning, autoClose }),
   info: ({ title, message, autoClose = 4e3 }) => notifications.show({ title, message, color: colors.info, autoClose })
 };
-function truncateAddress(address, chars = 4) {
-  if (address.length <= chars * 2 + 2) return address;
-  return `${address.slice(0, chars + 2)}...${address.slice(-chars)}`;
-}
 export {
   AVATAR_PALETTE,
   ActionIcon,
@@ -25574,6 +25775,7 @@ export {
   Divider,
   DocumentRow,
   Drawer,
+  ETHEREUM_ADDRESS_REGEX,
   EmailField,
   EmptyState,
   EquityGrantCard,
@@ -25617,6 +25819,8 @@ export {
   Title,
   Tooltip,
   UserMenu,
+  WalletList,
+  ZERO_ETHEREUM_ADDRESS,
   brandColors,
   colors,
   emailSchema,
@@ -25627,6 +25831,7 @@ export {
   formatPercent,
   formatPreciseWithCurrency,
   getAvatarColor,
+  isEthereumAddress,
   neutralColors,
   notify,
   passwordSchema,
@@ -25647,6 +25852,7 @@ export {
   useMediaQuery,
   useScrollIntoView,
   useViewportSize,
+  validateEthereumAddress,
   z
 };
 //# sourceMappingURL=fairmint-ui.js.map