@fairmint/ui 0.2.1 → 0.2.2

package/dist/components/specific/WalletList/WalletList.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+export interface Wallet {
+    /** Ethereum wallet address. */
+    address: string;
+    /** Wallet type identifier (e.g. "fairmint", "privy", "manual"). */
+    type: string;
+    /** Optional display label. */
+    label?: string | null;
+}
+export interface WalletListProps {
+    /** Wallets to display. */
+    wallets: Wallet[];
+    /** Called when user adds a new wallet address. */
+    onAdd?: (address: string) => void | Promise<void>;
+    /** Called when user confirms removal of a wallet address. */
+    onRemove?: (address: string) => void | Promise<void>;
+    /** Whether add/remove actions are disabled (e.g. admin viewing another user). */
+    readOnly?: boolean;
+    /** Whether an add operation is in progress. */
+    addLoading?: boolean;
+    /** Whether a remove operation is in progress. */
+    removeLoading?: boolean;
+    /** Icon for the empty state. Passed as ReactNode. */
+    emptyIcon?: ReactNode;
+    /** Icon for the copy button. Passed as ReactNode. */
+    copyIcon?: ReactNode;
+    /** Icon for the "copied" state. Passed as ReactNode. */
+    copiedIcon?: ReactNode;
+    /** Icon for the remove button. Passed as ReactNode. */
+    removeIcon?: ReactNode;
+    /** Icon for the add button. Passed as ReactNode. */
+    addIcon?: ReactNode;
+    /**
+     * Map a wallet type string to a display label.
+     * @default Built-in: "fairmint"|"privy" → "Fairmint Wallet", "manual" → "Manual", else as-is
+     */
+    typeLabels?: Record<string, string>;
+    /**
+     * Which wallet types can be removed.
+     * @default ["manual"]
+     */
+    removableTypes?: string[];
+}
+export declare function WalletList({ wallets, onAdd, onRemove, readOnly, addLoading, removeLoading, emptyIcon, copyIcon, copiedIcon, removeIcon, addIcon, typeLabels, removableTypes, }: WalletListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WalletList.d.ts.map

package/dist/components/specific/WalletList/WalletList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WalletList.d.ts","sourceRoot":"","sources":["../../../../src/components/specific/WalletList/WalletList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAYpE,MAAM,WAAW,MAAM;IACrB,+BAA+B;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,mEAAmE;IACnE,IAAI,EAAE,MAAM,CAAC;IACb,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,eAAe;IAC9B,0BAA0B;IAC1B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrD,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iDAAiD;IACjD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qDAAqD;IACrD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,wDAAwD;IACxD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAaD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,UAAkB,EAClB,aAAqB,EACrB,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,OAAO,EACP,UAAU,EACV,cAA2B,GAC5B,EAAE,eAAe,2CAmMjB"}

package/dist/fairmint-ui.cjs

@@ -25533,6 +25533,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] = React.useState("");
+  const [addressError, setAddressError] = React.useState(null);
+  const [showAddForm, setShowAddForm] = React.useState(false);
+  const [walletToRemove, setWalletToRemove] = React.useState(null);
+  const [copiedAddress, setCopiedAddress] = React.useState(null);
+  const copyTimeoutRef = React.useRef(void 0);
+  React.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] = React.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
+    wallets.map((w) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Group,
+      {
+        justify: "space-between",
+        p: "xs",
+        style: {
+          borderRadius: "var(--mantine-radius-sm)",
+          border: "1px solid var(--mantine-color-default-border)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: "xs", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Badge, { size: "xs", variant: "light", children: getTypeLabel(w.type, typeLabels) }),
+            w.label && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: `${colors.neutral}.5`, children: w.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", ff: "monospace", children: truncateAddress(w.address) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Group, { gap: 4, children: [
+            copyIcon && /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { label: copiedAddress === w.address ? "Copied!" : "Copy address", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Tooltip, { label: "Remove wallet", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Group, { gap: "xs", mt: "xs", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        TextInput,
+        {
+          placeholder: "0x...",
+          "aria-label": "Wallet address",
+          value: newAddress,
+          onChange: (e) => {
+            setNewAddress(e.currentTarget.value);
+            setAddressError(null);
+          },
+          error: addressError,
+          style: { flex: 1 }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: handleAdd, loading: addLoading, children: "Add" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "subtle",
+          color: colors.neutral,
+          onClick: () => {
+            setShowAddForm(false);
+            setNewAddress("");
+            setAddressError(null);
+          },
+          children: "Cancel"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "light",
+        size: "xs",
+        leftSection: addIcon,
+        onClick: () => setShowAddForm(true),
+        mt: "xs",
+        children: "Add Wallet"
+      }
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmDialog,
+      {
+        title: "Remove Wallet",
+        message: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { gap: "sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", children: "Are you sure you want to remove this wallet address? This action cannot be undone." }),
+          walletToRemove && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "sm", ff: "monospace", c: `${colors.neutral}.5`, children: walletToRemove }),
+          removeError && /* @__PURE__ */ jsxRuntime.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 = React.useRef(null);
   const fnRef = React.useRef(fn);
@@ -25564,10 +25769,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)}`;
-}
 exports.AVATAR_PALETTE = AVATAR_PALETTE;
 exports.ActionIcon = ActionIcon;
 exports.Alert = Alert;
@@ -25591,6 +25792,7 @@ exports.DetailDrawer = DetailDrawer;
 exports.Divider = Divider;
 exports.DocumentRow = DocumentRow;
 exports.Drawer = Drawer;
+exports.ETHEREUM_ADDRESS_REGEX = ETHEREUM_ADDRESS_REGEX;
 exports.EmailField = EmailField;
 exports.EmptyState = EmptyState;
 exports.EquityGrantCard = EquityGrantCard;
@@ -25634,6 +25836,8 @@ exports.TextInput = TextInput;
 exports.Title = Title;
 exports.Tooltip = Tooltip;
 exports.UserMenu = UserMenu;
+exports.WalletList = WalletList;
+exports.ZERO_ETHEREUM_ADDRESS = ZERO_ETHEREUM_ADDRESS;
 exports.brandColors = brandColors;
 exports.colors = colors;
 exports.emailSchema = emailSchema;
@@ -25644,6 +25848,7 @@ exports.formatNumber = formatNumber;
 exports.formatPercent = formatPercent;
 exports.formatPreciseWithCurrency = formatPreciseWithCurrency;
 exports.getAvatarColor = getAvatarColor;
+exports.isEthereumAddress = isEthereumAddress;
 exports.neutralColors = neutralColors;
 exports.notify = notify;
 exports.passwordSchema = passwordSchema;
@@ -25664,5 +25869,6 @@ exports.useIsMobile = useIsMobile;
 exports.useMediaQuery = useMediaQuery;
 exports.useScrollIntoView = useScrollIntoView;
 exports.useViewportSize = useViewportSize;
+exports.validateEthereumAddress = validateEthereumAddress;
 exports.z = z;
 //# sourceMappingURL=fairmint-ui.cjs.map