@fairmint/ui 0.2.14 → 0.2.16

package/dist/fairmint-ui.js

@@ -15839,14 +15839,14 @@ function useAvatarGroupContext() {
   const ctx = useContext(AvatarGroupContext);
   return { withinGroup: !!ctx };
 }
-const varsResolver$v = createVarsResolver((_, { spacing }) => ({
+const varsResolver$v = createVarsResolver((_, { spacing: spacing2 }) => ({
   group: {
-    "--ag-spacing": getSpacing(spacing)
+    "--ag-spacing": getSpacing(spacing2)
   }
 }));
 const AvatarGroup = factory((_props, ref) => {
   const props = useProps("AvatarGroup", null, _props);
-  const { classNames: classNames2, className, style, styles, unstyled, vars, spacing, attributes, ...others } = props;
+  const { classNames: classNames2, className, style, styles, unstyled, vars, spacing: spacing2, attributes, ...others } = props;
   const getStyles2 = useStyles({
     name: "AvatarGroup",
     classes: classes$t,
@@ -21383,15 +21383,15 @@ Select$1.classes = { ...InputBase.classes, ...Combobox.classes };
 Select$1.displayName = "@mantine/core/Select";
 var classes$8 = { "container": "m_925c2d2c", "root": "m_2415a157" };
 function SimpleGridMediaVariables({
-  spacing,
+  spacing: spacing2,
   verticalSpacing,
   cols,
   selector
 }) {
   const theme2 = useMantineTheme();
-  const _verticalSpacing = verticalSpacing === void 0 ? spacing : verticalSpacing;
+  const _verticalSpacing = verticalSpacing === void 0 ? spacing2 : verticalSpacing;
   const baseStyles = filterProps({
-    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing)),
+    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing2)),
     "--sg-spacing-y": getSpacing(getBaseValue$1(_verticalSpacing)),
     "--sg-cols": getBaseValue$1(cols)?.toString()
   });
@@ -21400,8 +21400,8 @@ function SimpleGridMediaVariables({
       if (!acc[breakpoint]) {
         acc[breakpoint] = {};
       }
-      if (typeof spacing === "object" && spacing[breakpoint] !== void 0) {
-        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing[breakpoint]);
+      if (typeof spacing2 === "object" && spacing2[breakpoint] !== void 0) {
+        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing2[breakpoint]);
       }
       if (typeof _verticalSpacing === "object" && _verticalSpacing[breakpoint] !== void 0) {
         acc[breakpoint]["--sg-spacing-y"] = getSpacing(_verticalSpacing[breakpoint]);
@@ -21432,13 +21432,13 @@ function sortBreakpoints(breakpoints) {
   return breakpoints.sort((a, b) => px(a) - px(b));
 }
 function getUniqueBreakpoints({
-  spacing,
+  spacing: spacing2,
   verticalSpacing,
   cols
 }) {
   const breakpoints = Array.from(
     /* @__PURE__ */ new Set([
-      ...getBreakpoints(spacing),
+      ...getBreakpoints(spacing2),
       ...getBreakpoints(verticalSpacing),
       ...getBreakpoints(cols)
     ])
@@ -21446,25 +21446,25 @@ function getUniqueBreakpoints({
   return sortBreakpoints(breakpoints);
 }
 function SimpleGridContainerVariables({
-  spacing,
+  spacing: spacing2,
   verticalSpacing,
   cols,
   selector
 }) {
-  const _verticalSpacing = verticalSpacing === void 0 ? spacing : verticalSpacing;
+  const _verticalSpacing = verticalSpacing === void 0 ? spacing2 : verticalSpacing;
   const baseStyles = filterProps({
-    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing)),
+    "--sg-spacing-x": getSpacing(getBaseValue$1(spacing2)),
     "--sg-spacing-y": getSpacing(getBaseValue$1(_verticalSpacing)),
     "--sg-cols": getBaseValue$1(cols)?.toString()
   });
-  const uniqueBreakpoints = getUniqueBreakpoints({ spacing, verticalSpacing, cols });
+  const uniqueBreakpoints = getUniqueBreakpoints({ spacing: spacing2, verticalSpacing, cols });
   const queries = uniqueBreakpoints.reduce(
     (acc, breakpoint) => {
       if (!acc[breakpoint]) {
         acc[breakpoint] = {};
       }
-      if (typeof spacing === "object" && spacing[breakpoint] !== void 0) {
-        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing[breakpoint]);
+      if (typeof spacing2 === "object" && spacing2[breakpoint] !== void 0) {
+        acc[breakpoint]["--sg-spacing-x"] = getSpacing(spacing2[breakpoint]);
       }
       if (typeof _verticalSpacing === "object" && _verticalSpacing[breakpoint] !== void 0) {
         acc[breakpoint]["--sg-spacing-y"] = getSpacing(_verticalSpacing[breakpoint]);
@@ -21498,7 +21498,7 @@ const SimpleGrid = factory((_props, ref) => {
     vars,
     cols,
     verticalSpacing,
-    spacing,
+    spacing: spacing2,
     type,
     attributes,
     ...others
@@ -26768,6 +26768,13 @@ const z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   },
   void: voidType
 }, Symbol.toStringTag, { value: "Module" }));
+const spacing = {
+  xs: "0.625rem",
+  sm: "0.75rem",
+  md: "1rem",
+  lg: "1.25rem",
+  xl: "2rem"
+};
 const colors = {
   /** Primary UI color — buttons, links, active states. */
   primary: "indigo",
@@ -26919,6 +26926,7 @@ const theme = createTheme({
   },
   radius: radii,
   defaultRadius: "md",
+  spacing,
   breakpoints: {
     xs: "30em",
     sm: "48em",
@@ -30688,38 +30696,84 @@ function InvestorProfileCard({
     children
   ] });
 }
-const DEFAULT_TYPE_LABELS = {
+const SYSTEM_TYPES = /* @__PURE__ */ new Set(["fairmint", "privy"]);
+const 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 normalizeWalletType(type) {
+  return String(type ?? "").trim().toLowerCase();
+}
+function getWalletLabel(type, custom2) {
+  const key = normalizeWalletType(type);
+  const rawType = typeof type === "string" ? type : String(type ?? "");
+  if (custom2?.[key]) return custom2[key];
+  if (custom2?.[rawType]) return custom2[rawType];
+  return TYPE_LABELS[key] ?? rawType;
+}
+function getWalletDisplayName(wallet, customLabels) {
+  const label = wallet.label?.trim();
+  if (label) return label;
+  return getWalletLabel(wallet.type, customLabels);
+}
+function isSystemWalletType(type) {
+  return SYSTEM_TYPES.has(normalizeWalletType(type));
+}
+function isRemovableWalletType(type) {
+  return !isSystemWalletType(type);
+}
+function walletKey(w) {
+  return `${normalizeWalletType(w.type)}:${w.address.toLowerCase()}`;
 }
 function WalletList({
   wallets,
   onAdd,
   onRemove,
+  onSetDefault,
+  onLabel,
+  onConnect,
+  getExplorerUrl,
   readOnly = false,
   addLoading = false,
   removeLoading = false,
+  setDefaultLoading = false,
+  setDefaultAddress,
+  labelLoading = false,
+  labelAddress,
+  connectLoading = false,
   emptyIcon,
   copyIcon,
   copiedIcon,
   removeIcon,
   addIcon,
+  defaultIcon,
+  renameIcon,
+  explorerIcon,
+  connectIcon,
   typeLabels,
-  removableTypes = ["manual"]
+  removableTypes,
+  children
 }) {
+  const normalizeWalletAddress = useCallback(
+    (address) => address?.trim().toLowerCase() ?? "",
+    []
+  );
   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 [renamingAddress, setRenamingAddress] = useState(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [labelError, setLabelError] = useState(null);
+  const [setDefaultError, setSetDefaultError] = useState(null);
   const copyTimeoutRef = useRef(void 0);
   useEffect(() => () => clearTimeout(copyTimeoutRef.current), []);
-  const copyAddress = async (address) => {
+  useEffect(() => {
+    if (readOnly) setRenamingAddress(null);
+  }, [readOnly]);
+  const copyAddress = useCallback(async (address) => {
     try {
       await navigator.clipboard.writeText(address);
       clearTimeout(copyTimeoutRef.current);
@@ -30727,9 +30781,27 @@ function WalletList({
       copyTimeoutRef.current = setTimeout(() => setCopiedAddress(null), 2e3);
     } catch {
     }
-  };
+  }, []);
   const canAdd = !readOnly && !!onAdd;
   const canRemove = !readOnly && !!onRemove;
+  const canSetDefault = !readOnly && !!onSetDefault;
+  const canLabel = !readOnly && !!onLabel;
+  const canConnect = !readOnly && !!onConnect;
+  const getSafeExplorerUrl = useCallback(
+    (address) => {
+      if (!getExplorerUrl) return null;
+      try {
+        const url = getExplorerUrl(address);
+        if (!url) return null;
+        const parsed = new URL(url);
+        if (parsed.protocol !== "http:" && parsed.protocol !== "https:") return null;
+        return parsed.toString();
+      } catch {
+        return null;
+      }
+    },
+    [getExplorerUrl]
+  );
   const handleAdd = async () => {
     const trimmed = newAddress.trim();
     const error2 = validateEthereumAddress(trimmed);
@@ -30757,8 +30829,191 @@ function WalletList({
       setRemoveError("Failed to remove wallet. Please try again.");
     }
   };
-  if (wallets.length === 0 && !showAddForm) {
-    return /* @__PURE__ */ jsx(
+  const handleSetDefault = async (address) => {
+    setSetDefaultError(null);
+    try {
+      await onSetDefault?.(address);
+    } catch {
+      setSetDefaultError("Failed to set default wallet. Please try again.");
+    }
+  };
+  const handleLabelSave = async (address) => {
+    setLabelError(null);
+    try {
+      await onLabel?.(address, renameValue.trim() || null);
+      setRenamingAddress((current) => current === address ? null : current);
+    } catch {
+      setLabelError("Failed to update label. Please try again.");
+    }
+  };
+  const hasWallets = wallets.length > 0;
+  if (!hasWallets && !showAddForm && !canConnect) {
+    return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__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
+        }
+      ),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+    wallets.map((w) => {
+      const normalizedWalletAddress = normalizeWalletAddress(w.address);
+      const setDefaultActionLoading = setDefaultLoading && (!setDefaultAddress || normalizeWalletAddress(setDefaultAddress) === normalizedWalletAddress);
+      const labelActionLoading = labelLoading && (!labelAddress || normalizeWalletAddress(labelAddress) === normalizedWalletAddress);
+      const explorerUrl = getSafeExplorerUrl(w.address);
+      return /* @__PURE__ */ jsxs(Stack, { gap: 0, children: [
+        /* @__PURE__ */ jsxs(
+          Group,
+          {
+            justify: "space-between",
+            p: "xs",
+            style: {
+              borderRadius: radii.sm,
+              border: `1px solid ${neutralColors[200]}`
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+                /* @__PURE__ */ jsx(Badge, { size: "xs", variant: "light", children: getWalletLabel(w.type, typeLabels) }),
+                w.label && /* @__PURE__ */ jsx(Text, { size: "xs", c: fairmintVars.colorTextSecondary, children: w.label }),
+                w.defaultRecipient && /* @__PURE__ */ jsx(Badge, { size: "xs", color: colors.success, variant: "light", children: "Default" }),
+                /* @__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
+                  }
+                ) }),
+                canSetDefault && defaultIcon && !w.defaultRecipient && /* @__PURE__ */ jsx(Tooltip, { label: "Set as default recipient", children: /* @__PURE__ */ jsx(
+                  ActionIcon,
+                  {
+                    variant: "subtle",
+                    size: "sm",
+                    onClick: () => handleSetDefault(w.address),
+                    loading: setDefaultActionLoading,
+                    disabled: setDefaultActionLoading,
+                    "aria-label": "Set as default wallet",
+                    children: defaultIcon
+                  }
+                ) }),
+                canLabel && renameIcon && /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    label: renamingAddress === w.address ? "Cancel rename" : "Rename wallet",
+                    children: /* @__PURE__ */ jsx(
+                      ActionIcon,
+                      {
+                        variant: "subtle",
+                        size: "sm",
+                        onClick: () => {
+                          setLabelError(null);
+                          if (renamingAddress === w.address) {
+                            setRenamingAddress(null);
+                          } else {
+                            setRenamingAddress(w.address);
+                            setRenameValue(w.label ?? "");
+                          }
+                        },
+                        "aria-label": "Rename wallet",
+                        children: renameIcon
+                      }
+                    )
+                  }
+                ),
+                explorerUrl && explorerIcon && /* @__PURE__ */ jsx(Tooltip, { label: "View on block explorer", children: /* @__PURE__ */ jsx(
+                  Anchor,
+                  {
+                    href: explorerUrl,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    "aria-label": "View on block explorer",
+                    c: colors.primary,
+                    style: {
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      width: "1.625rem",
+                      height: "1.625rem",
+                      borderRadius: radii.sm
+                    },
+                    children: explorerIcon
+                  }
+                ) }),
+                canRemove && removeIcon && (removableTypes ? removableTypes.some(
+                  (t) => normalizeWalletType(t) === normalizeWalletType(w.type)
+                ) : isRemovableWalletType(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
+                  }
+                ) })
+              ] })
+            ]
+          }
+        ),
+        renamingAddress === w.address && /* @__PURE__ */ jsxs(Group, { gap: "xs", mt: "xs", align: "flex-start", children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: renameValue,
+              onChange: (e) => {
+                setRenameValue(e.currentTarget.value);
+                setLabelError(null);
+              },
+              placeholder: getWalletLabel(w.type, typeLabels),
+              size: "xs",
+              style: { flex: 1 },
+              "aria-label": "Wallet label",
+              maxLength: 50,
+              error: labelError
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "xs",
+              loading: labelActionLoading,
+              disabled: labelActionLoading,
+              onClick: () => handleLabelSave(w.address),
+              children: "Save"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "xs",
+              variant: "subtle",
+              color: colors.neutral,
+              onClick: () => {
+                setRenamingAddress(null);
+                setLabelError(null);
+              },
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] }, walletKey(w));
+    }),
+    setDefaultError && /* @__PURE__ */ jsx(Text, { size: "sm", c: colors.error, children: setDefaultError }),
+    !hasWallets && !showAddForm && /* @__PURE__ */ jsx(
       EmptyState,
       {
         icon: emptyIcon,
@@ -30767,52 +31022,19 @@ function WalletList({
         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,
+    ),
+    canConnect && /* @__PURE__ */ jsx(
+      Button,
       {
-        justify: "space-between",
-        p: "xs",
-        style: {
-          borderRadius: radii.sm,
-          border: `1px solid ${neutralColors[200]}`
-        },
-        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: fairmintVars.colorTextSecondary, 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
-    )),
+        variant: "light",
+        size: "xs",
+        leftSection: connectIcon,
+        onClick: onConnect,
+        loading: connectLoading,
+        mt: "xs",
+        children: "Connect Wallet"
+      }
+    ),
     canAdd && (showAddForm ? /* @__PURE__ */ jsxs(Group, { gap: "xs", mt: "xs", children: [
       /* @__PURE__ */ jsx(
         TextInput,
@@ -30843,7 +31065,7 @@ function WalletList({
           children: "Cancel"
         }
       )
-    ] }) : /* @__PURE__ */ jsx(
+    ] }) : hasWallets ? /* @__PURE__ */ jsx(
       Button,
       {
         variant: "light",
@@ -30853,7 +31075,8 @@ function WalletList({
         mt: "xs",
         children: "Add Wallet"
       }
-    )),
+    ) : null),
+    children,
     /* @__PURE__ */ jsx(
       ConfirmDialog,
       {
@@ -31013,14 +31236,20 @@ export {
   formatPhoneDisplay,
   formatPreciseWithCurrency,
   getAvatarColor,
+  getWalletDisplayName,
+  getWalletLabel,
   isEthereumAddress,
+  isRemovableWalletType,
+  isSystemWalletType,
   neutralColors,
   normalizePhone,
+  normalizeWalletType,
   notify,
   passwordSchema,
   phoneSchema,
   radii,
   semanticColors,
+  spacing,
   theme,
   truncateAddress,
   typography,
@@ -31038,6 +31267,7 @@ export {
   useScrollIntoView,
   useViewportSize,
   validateEthereumAddress,
+  walletKey,
   z,
   zipSchema
 };