@agg-market/ui 0.0.1

package/dist/chunk-7XRKA6XF.mjs

@@ -0,0 +1,462 @@
+import {
+  LoadingIcon
+} from "./chunk-FZTAHWOS.mjs";
+import {
+  VenueLogo
+} from "./chunk-LY6474C4.mjs";
+import {
+  Icon
+} from "./chunk-DA6KZWSK.mjs";
+import {
+  Button
+} from "./chunk-J6L5BLKX.mjs";
+import {
+  AGG_ROOT_CLASS_NAME,
+  __spreadProps,
+  __spreadValues,
+  cn,
+  formatUsd,
+  getMotionClassName,
+  shortenAddress
+} from "./chunk-GC3QIIH7.mjs";
+
+// src/auth/connect-button/index.tsx
+import { useEffect, useMemo, useRef, useState } from "react";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { isAddress } from "viem";
+import { useAccount, useConnect, useDisconnect, useSignMessage } from "wagmi";
+import {
+  getWalletAddressFromUserProfile,
+  useAggAuth,
+  useAggBalanceState,
+  useLabels,
+  useSdkUiConfig
+} from "@agg-market/hooks";
+
+// src/auth/connect-button/connect-button.constants.ts
+var connectButtonContainerClassName = cn(
+  "inline-flex flex-col items-start gap-2 font-agg-sans"
+);
+var connectedButtonsRowClassName = cn("inline-flex h-10 items-center gap-2");
+var connectedBalanceChipClassName = cn(
+  "inline-flex h-10 items-center gap-3 rounded-agg-full border border-agg-separator bg-agg-secondary pl-3 pr-12 font-agg-sans"
+);
+var connectedProfileChipClassName = cn(
+  "-ml-12",
+  "inline-flex h-10 items-center gap-3 rounded-agg-full border border-agg-separator bg-agg-secondary pl-2 pr-3 font-agg-sans",
+  "cursor-pointer hover:bg-agg-secondary-hover",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary-hover focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary"
+);
+var profileMenuContentClassName = cn(
+  "z-50 w-64 overflow-hidden rounded-agg-xl font-agg-sans",
+  "border border-agg-separator bg-agg-secondary",
+  "shadow-agg-popover"
+);
+var profileMenuSectionClassName = cn("flex w-full flex-col gap-5 px-5 py-5");
+var profileMenuSeparatorClassName = cn("h-px w-full bg-agg-separator");
+var profileMenuActionItemClassName = cn(
+  "flex w-full items-center gap-3 px-5 py-4 font-agg-sans text-agg-sm leading-agg-5 text-agg-foreground",
+  "outline-none",
+  "hover:bg-agg-secondary-hover focus:bg-agg-secondary-hover"
+);
+var avatarRootClassName = cn(
+  "inline-flex size-6 shrink-0 items-center justify-center rounded-agg-full bg-agg-separator"
+);
+var avatarIconClassName = cn("h-[66%] w-[66%] text-agg-muted-foreground");
+
+// src/auth/connect-button/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var venueLogoNameSet = /* @__PURE__ */ new Set([
+  "polymarket",
+  "kalshi",
+  "opinion",
+  "probable"
+]);
+var toVenueLogoName = (value) => {
+  if (!venueLogoNameSet.has(value))
+    return null;
+  return value;
+};
+function WalletAvatar({ className }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn(avatarRootClassName, className), children: /* @__PURE__ */ jsx(Icon, { className: avatarIconClassName, name: "wallet-avatar" }) });
+}
+var ConnectButton = ({
+  autoSignInOnConnect = true,
+  buttonProps,
+  classNames,
+  disabled,
+  onConnect,
+  onDepositClick,
+  onDisconnect,
+  onProfileClick,
+  onViewAllBalancesClick,
+  onWithdrawClick
+}) => {
+  var _a, _b;
+  const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
+  const autoSignInAttemptRef = useRef(null);
+  const { enableAnimations, rootClassName } = useSdkUiConfig();
+  const labels = useLabels();
+  const { address: walletAddress, chainId, isConnected: isWalletConnected } = useAccount();
+  const { connect, connectors, isPending: isConnectPending } = useConnect();
+  const { disconnect } = useDisconnect();
+  const { signMessageAsync } = useSignMessage();
+  const {
+    totalBalance,
+    balanceBreakdown,
+    connectedVenues,
+    isLoading: isBalanceLoading,
+    error: balanceError
+  } = useAggBalanceState();
+  const preferredConnector = useMemo(() => {
+    var _a2;
+    return (_a2 = connectors.find((connector) => connector.name === "MetaMask")) != null ? _a2 : connectors[0];
+  }, [connectors]);
+  const signInStatement = labels.auth.signInStatement;
+  const { signIn, signOut, isAuthenticated, user, isLoading, error } = useAggAuth({
+    signMessage: (message) => signMessageAsync({ message }),
+    address: walletAddress != null ? walletAddress : "",
+    chainId
+  });
+  const resolvedWalletAddress = (_b = (_a = getWalletAddressFromUserProfile(user)) != null ? _a : walletAddress) != null ? _b : "";
+  const resolvedAddressLabel = shortenAddress(resolvedWalletAddress);
+  const resolvedProfileLabel = resolvedAddressLabel;
+  const resolvedBalanceRows = useMemo(() => {
+    const balancesByVenue = /* @__PURE__ */ new Map();
+    for (const balanceItem of balanceBreakdown) {
+      balancesByVenue.set(balanceItem.venue, balanceItem.balance);
+    }
+    for (const venue of connectedVenues) {
+      if (!balancesByVenue.has(venue)) {
+        balancesByVenue.set(venue, 0);
+      }
+    }
+    return Array.from(balancesByVenue.entries()).map(([venue, balanceValue]) => {
+      var _a2;
+      return {
+        key: venue,
+        label: (_a2 = labels.venues[venue]) != null ? _a2 : venue,
+        amountLabel: formatUsd(balanceValue),
+        venue: toVenueLogoName(venue)
+      };
+    });
+  }, [balanceBreakdown, connectedVenues, labels.venues]);
+  const errorText = error ? `Error: ${error.message}` : null;
+  const balanceErrorText = balanceError ? `Error: ${balanceError.message}` : null;
+  const resolvedErrorText = errorText != null ? errorText : balanceErrorText;
+  const normalizedWalletAddress = (walletAddress != null ? walletAddress : "").toLowerCase();
+  const hasWalletAddress = isAddress(walletAddress != null ? walletAddress : "");
+  const isConnectDisabled = disabled || isConnectPending || !preferredConnector;
+  const dropdownMenuItemClassName = cn(
+    "cursor-pointer",
+    profileMenuActionItemClassName,
+    getMotionClassName(enableAnimations, "transition-colors"),
+    disabled ? "pointer-events-none opacity-50" : null,
+    classNames == null ? void 0 : classNames.profileMenuActionItem
+  );
+  useEffect(() => {
+    if (!autoSignInOnConnect) {
+      autoSignInAttemptRef.current = null;
+      return;
+    }
+    if (!isWalletConnected || isAuthenticated || isLoading || !hasWalletAddress) {
+      if (!isWalletConnected || isAuthenticated) {
+        autoSignInAttemptRef.current = null;
+      }
+      return;
+    }
+    const attemptKey = `${normalizedWalletAddress}:${chainId != null ? chainId : "unknown"}`;
+    if (autoSignInAttemptRef.current === attemptKey)
+      return;
+    autoSignInAttemptRef.current = attemptKey;
+    void signIn(signInStatement).catch(() => void 0);
+  }, [
+    autoSignInOnConnect,
+    chainId,
+    hasWalletAddress,
+    isAuthenticated,
+    isLoading,
+    isWalletConnected,
+    normalizedWalletAddress,
+    signIn,
+    signInStatement
+  ]);
+  const handleConnectClick = () => {
+    if (isConnectDisabled || !preferredConnector)
+      return;
+    connect({ connector: preferredConnector });
+    if (!onConnect)
+      return;
+    void Promise.resolve(onConnect());
+  };
+  const handleSignInClick = () => {
+    if (disabled || isLoading || !hasWalletAddress)
+      return;
+    void signIn(signInStatement);
+  };
+  const handleDepositClick = () => {
+    if (disabled)
+      return;
+    if (!onDepositClick)
+      return;
+    void Promise.resolve(onDepositClick());
+  };
+  const handleProfileItemClick = () => {
+    if (disabled)
+      return;
+    if (!onProfileClick)
+      return;
+    void Promise.resolve(onProfileClick());
+  };
+  const handleWithdrawClick = () => {
+    if (disabled)
+      return;
+    if (!onWithdrawClick)
+      return;
+    void Promise.resolve(onWithdrawClick());
+  };
+  const handleViewAllBalancesClick = () => {
+    if (disabled)
+      return;
+    if (!onViewAllBalancesClick)
+      return;
+    void Promise.resolve(onViewAllBalancesClick());
+  };
+  const handleDisconnectClick = () => {
+    if (disabled)
+      return;
+    signOut();
+    disconnect();
+    if (!onDisconnect)
+      return;
+    void Promise.resolve(onDisconnect());
+  };
+  const handleProfileMenuOpenChange = (open) => {
+    if (disabled)
+      return;
+    setIsProfileMenuOpen(open);
+  };
+  if (resolvedErrorText) {
+    console.error({ resolvedErrorText });
+  }
+  if (!isWalletConnected) {
+    return /* @__PURE__ */ jsx("div", { className: cn(connectButtonContainerClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        variant: "primary",
+        size: "l",
+        className: classNames == null ? void 0 : classNames.connectButton,
+        onClick: handleConnectClick,
+        disabled: isConnectDisabled,
+        "aria-label": labels.auth.connect(preferredConnector == null ? void 0 : preferredConnector.name)
+      }, buttonProps), {
+        children: labels.auth.connect(preferredConnector == null ? void 0 : preferredConnector.name)
+      })
+    ) });
+  }
+  if (!isAuthenticated) {
+    return /* @__PURE__ */ jsx("div", { className: cn(connectButtonContainerClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsx(
+      Button,
+      __spreadProps(__spreadValues({
+        variant: "primary",
+        size: "l",
+        className: classNames == null ? void 0 : classNames.signInButton,
+        onClick: handleSignInClick,
+        disabled: disabled || !hasWalletAddress,
+        isLoading,
+        "aria-label": isLoading ? labels.auth.signingIn : labels.auth.signIn
+      }, buttonProps), {
+        children: isLoading ? labels.auth.signingIn : labels.auth.signIn
+      })
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(connectButtonContainerClassName, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsxs("div", { className: cn(connectedButtonsRowClassName, classNames == null ? void 0 : classNames.connectedRow), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(connectedBalanceChipClassName, classNames == null ? void 0 : classNames.balanceChip), children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "primary",
+          size: "xxs",
+          className: cn("h-6 px-3 text-agg-xs leading-agg-4", classNames == null ? void 0 : classNames.depositButton),
+          onClick: handleDepositClick,
+          disabled,
+          "aria-label": labels.auth.deposit,
+          children: labels.auth.deposit
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: cn("text-agg-sm leading-none text-agg-foreground", classNames == null ? void 0 : classNames.balanceText),
+          children: isBalanceLoading ? /* @__PURE__ */ jsx(LoadingIcon, { size: "s" }) : formatUsd(totalBalance)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(DropdownMenu.Root, { open: isProfileMenuOpen, onOpenChange: handleProfileMenuOpenChange, children: [
+      /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            connectedProfileChipClassName,
+            getMotionClassName(enableAnimations, "transition-colors"),
+            classNames == null ? void 0 : classNames.profileTrigger
+          ),
+          disabled,
+          "aria-label": labels.auth.walletMenuFor(resolvedProfileLabel),
+          children: [
+            /* @__PURE__ */ jsx(WalletAvatar, {}),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-agg-base font-agg-bold leading-none text-agg-foreground",
+                  classNames == null ? void 0 : classNames.profileTriggerLabel
+                ),
+                children: resolvedProfileLabel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Icon,
+              {
+                name: isProfileMenuOpen ? "chevron-up" : "chevron-down",
+                size: "s",
+                className: "h-3.5 w-3.5 text-agg-foreground",
+                "aria-hidden": "true"
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsxs(
+        DropdownMenu.Content,
+        {
+          className: cn(
+            AGG_ROOT_CLASS_NAME,
+            rootClassName,
+            profileMenuContentClassName,
+            classNames == null ? void 0 : classNames.profileMenuContent
+          ),
+          "data-agg-animations": enableAnimations ? "true" : "false",
+          sideOffset: 4,
+          align: "end",
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  profileMenuSectionClassName,
+                  "cursor-pointer",
+                  classNames == null ? void 0 : classNames.profileMenuSection
+                ),
+                onClick: handleProfileItemClick,
+                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx(WalletAvatar, { className: "size-11" }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-0.5", children: [
+                    /* @__PURE__ */ jsx("p", { className: "text-agg-lg font-agg-bold leading-agg-7 text-agg-foreground", children: resolvedProfileLabel }),
+                    /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground", children: resolvedAddressLabel })
+                  ] })
+                ] })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(profileMenuSeparatorClassName, classNames == null ? void 0 : classNames.profileMenuSeparator)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn(profileMenuSectionClassName, classNames == null ? void 0 : classNames.profileMenuSection), children: [
+              isBalanceLoading ? /* @__PURE__ */ jsxs("p", { className: "flex flex-col gap-2 items-center justify-center text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground", children: [
+                /* @__PURE__ */ jsx(LoadingIcon, {}),
+                labels.auth.loadingBalances
+              ] }) : /* @__PURE__ */ jsx(Fragment, { children: resolvedBalanceRows.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "flex flex-col gap-2 items-center justify-center text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Icon, { name: "warning", className: "text-agg-primary" }),
+                labels.auth.noBalances
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-agg-xs font-agg-bold uppercase leading-agg-4 tracking-agg-normal text-agg-muted-foreground", children: labels.auth.balances }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "tertiary",
+                    size: "xxs",
+                    className: "h-6 px-3 text-agg-xs leading-agg-4",
+                    onClick: handleViewAllBalancesClick,
+                    children: labels.auth.viewAll
+                  }
+                )
+              ] }) }),
+              !isBalanceLoading ? resolvedBalanceRows.map((row) => /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  row.venue ? /* @__PURE__ */ jsx(VenueLogo, { venue: row.venue, size: "s" }) : null,
+                  /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: row.label })
+                ] }),
+                /* @__PURE__ */ jsx("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: row.amountLabel })
+              ] }, row.key)) : null
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(profileMenuSeparatorClassName, classNames == null ? void 0 : classNames.profileMenuSeparator)
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col py-2", children: [
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  className: dropdownMenuItemClassName,
+                  onSelect: handleProfileItemClick,
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "profile", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ jsx("span", { children: labels.auth.myProfile })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  className: dropdownMenuItemClassName,
+                  onSelect: handleDepositClick,
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "download", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ jsx("span", { children: labels.auth.deposit })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  className: dropdownMenuItemClassName,
+                  onSelect: handleWithdrawClick,
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "upload", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ jsx("span", { children: labels.auth.withdraw })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                DropdownMenu.Item,
+                {
+                  className: dropdownMenuItemClassName,
+                  onSelect: handleDisconnectClick,
+                  disabled,
+                  children: [
+                    /* @__PURE__ */ jsx(Icon, { name: "disconnect", size: "s", className: "text-agg-foreground" }),
+                    /* @__PURE__ */ jsx("span", { children: labels.auth.disconnect })
+                  ]
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] }) });
+};
+ConnectButton.displayName = "ConnectButton";
+
+export {
+  ConnectButton
+};