@agg-build/ui 1.2.12 → 2.0.0

package/README.md

@@ -82,7 +82,40 @@ Override theme tokens with CSS variables on the `.agg-root` container (automatic
   --agg-color-primary: #ed8200;
   --agg-color-foreground: #1a1a1a;
   --agg-radius-md: 8px;
-  --agg-font-family-sans: "Inter", sans-serif;
+  --agg-font-family-sans: "Your Font", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+You can also set `--agg-font-family-sans` on `:root`; a value on `.agg-root` wins because it is
+scoped closer to the AGG UI tree.
+
+With Next.js `next/font`, expose the generated font variable on an ancestor, then map it into the
+AGG token on `.agg-root`:
+
+```tsx
+import { Inter } from "next/font/google";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export default function App() {
+  return (
+    <div className={inter.variable}>
+      <AggProvider>
+        <div className="agg-root">
+          <AggApp />
+        </div>
+      </AggProvider>
+    </div>
+  );
+}
+```
+
+```css
+.agg-root {
+  --agg-font-family-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
 }
 ```
 

package/dist/{chunk-U55T5BPE.mjs → chunk-2UKDQ7WP.mjs}

@@ -38,7 +38,7 @@ import {
   shortenAddress,
   useOptionalToast,
   venueLogoLabels
-} from "./chunk-X3KCFWXN.mjs";
+} from "./chunk-2ZS3BPSF.mjs";
 
 // src/deposit/index.tsx
 import { useAggAuthState, useAggUiConfig, useDepositAddresses, useLabels as useLabels11 } from "@agg-build/hooks";
@@ -3294,7 +3294,7 @@ var OnboardingModal = ({
 OnboardingModal.displayName = "OnboardingModal";
 
 // src/profile/index.tsx
-import { useState as useState10, useEffect as useEffect7, useCallback as useCallback9, useMemo as useMemo2 } from "react";
+import { useState as useState10, useEffect as useEffect7, useCallback as useCallback9, useMemo as useMemo3 } from "react";
 import { useAggClient as useAggClient2, useAggAuthState as useAggAuthState2 } from "@agg-build/hooks";
 
 // src/profile/profile-modal.constants.ts
@@ -3483,6 +3483,13 @@ var DisconnectTextButton = ({ onClick }) => /* @__PURE__ */ jsx24(
   }
 );
 var VerifiedBadge = () => /* @__PURE__ */ jsx24(Icon, { name: "check-badge", size: "small", color: "var(--agg-color-primary, #536dfe)" });
+var getWalletIconName = (wallet) => {
+  const chain = wallet.chain.toLowerCase();
+  if (chain === "solana" || chain === "svm") {
+    return "solana";
+  }
+  return "ethereum";
+};
 var ConnectedAccountRow = ({
   icon,
   label,
@@ -3511,7 +3518,6 @@ var AccountsWalletsTab = ({
   onDisconnectGoogle,
   onConnectApple,
   onDisconnectApple,
-  onDisconnectWallet,
   onConnectEmail
 }) => {
   const twitter = socialAccounts == null ? void 0 : socialAccounts.twitter;
@@ -3579,7 +3585,7 @@ var AccountsWalletsTab = ({
           /* @__PURE__ */ jsx24(
             AccountIdentity,
             {
-              icon: "wallet",
+              icon: getWalletIconName(wallet),
               iconClassName: "text-agg-foreground",
               label: (_a = wallet.displayAddress) != null ? _a : wallet.address
             }
@@ -3593,8 +3599,16 @@ var AccountsWalletsTab = ({
 AccountsWalletsTab.displayName = "AccountsWalletsTab";
 
 // src/profile/tabs/trading-access-tab.tsx
-import { useAggClient, useDepositAddresses as useDepositAddresses2, useLabels as useLabels22 } from "@agg-build/hooks";
-import { useCallback as useCallback8, useEffect as useEffect6, useState as useState9 } from "react";
+import {
+  getVenueAvailabilityState,
+  getVisibleVenuesByConfig,
+  useAggClient,
+  useAppConfig,
+  useDepositAddresses as useDepositAddresses2,
+  useGeoBlock,
+  useLabels as useLabels22
+} from "@agg-build/hooks";
+import { useCallback as useCallback8, useEffect as useEffect6, useMemo as useMemo2, useState as useState9 } from "react";
 import { jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
 var TRADING_ACCESS_VENUES = [
   "kalshi",
@@ -3606,7 +3620,7 @@ var TRADING_ACCESS_VENUES = [
   "myriad",
   "hyperliquid"
 ];
-var UNAVAILABLE_VENUES = /* @__PURE__ */ new Set([]);
+var TRADING_ACCESS_VENUE_ITEMS = TRADING_ACCESS_VENUES.map((id) => ({ id }));
 var SectionTitle2 = ({ children }) => /* @__PURE__ */ jsx25("h3", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children });
 var AccessRow = ({ children }) => /* @__PURE__ */ jsx25(
   "div",
@@ -3667,32 +3681,49 @@ var AvailableStatus = () => /* @__PURE__ */ jsxs25("div", { className: "flex ite
   /* @__PURE__ */ jsx25(Icon, { name: "check-badge", size: "small", color: "var(--agg-color-primary, #536dfe)" }),
   /* @__PURE__ */ jsx25("span", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground whitespace-nowrap", children: "Available" })
 ] });
+var GeoblockedStatus = () => {
+  const labels = useLabels22();
+  return /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 text-agg-muted-foreground", children: [
+    /* @__PURE__ */ jsx25(Icon, { name: "warning-filled", size: "small", color: "currentColor" }),
+    /* @__PURE__ */ jsx25("span", { className: "text-agg-sm font-agg-normal leading-agg-5 whitespace-nowrap", children: labels.trading.venueUnavailableInRegion })
+  ] });
+};
 var TradingAccessTab = ({
   venueAccounts,
   onKycError
 }) => {
   const labels = useLabels22();
+  const { disabledVenues } = useAppConfig();
+  const { isLocationBlocked } = useGeoBlock();
+  const visibleVenues = useMemo2(
+    () => getVisibleVenuesByConfig(TRADING_ACCESS_VENUE_ITEMS, disabledVenues),
+    [disabledVenues]
+  );
   return /* @__PURE__ */ jsxs25("div", { className: "agg-trading-access-section flex flex-col gap-4", children: [
     /* @__PURE__ */ jsx25(SectionTitle2, { children: "Venues" }),
-    /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-3", children: TRADING_ACCESS_VENUES.map((venue) => {
+    /* @__PURE__ */ jsx25("div", { className: "flex flex-col gap-3", children: visibleVenues.map(({ id: venue }) => {
       var _a;
       const venueAccount = venueAccounts == null ? void 0 : venueAccounts.find((account) => account.venue === venue);
       const isKalshi = venue === "kalshi";
       const isVerified = (venueAccount == null ? void 0 : venueAccount.kycStatus) === "verified";
-      const isUnavailable = UNAVAILABLE_VENUES.has(venue);
+      const availabilityState = getVenueAvailabilityState({
+        venueId: venue,
+        disabledVenues,
+        isLocationBlocked
+      });
       const displayName = (_a = venueLogoLabels[venue]) != null ? _a : venue;
       return /* @__PURE__ */ jsxs25(AccessRow, { children: [
         /* @__PURE__ */ jsxs25("div", { className: "flex min-w-0 items-center gap-3", children: [
           /* @__PURE__ */ jsx25(VenueLogo, { venue, size: "small" }),
           /* @__PURE__ */ jsx25("span", { className: "truncate text-agg-base font-agg-normal leading-6 text-agg-foreground", children: displayName })
         ] }),
-        isKalshi && !isVerified ? /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-4", children: [
+        availabilityState === "geoblocked" ? /* @__PURE__ */ jsx25(GeoblockedStatus, {}) : isKalshi && !isVerified ? /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ jsx25("span", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground whitespace-nowrap", children: labels.trading.kycRequired }),
           /* @__PURE__ */ jsx25(VerifyIdentityButton, { onError: onKycError })
         ] }) : isKalshi && isVerified ? /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-4", children: [
           /* @__PURE__ */ jsx25("span", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground whitespace-nowrap", children: labels.trading.verified }),
           /* @__PURE__ */ jsx25(AvailableStatus, {})
-        ] }) : isUnavailable ? /* @__PURE__ */ jsx25("span", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground whitespace-nowrap", children: labels.trading.venueUnavailableInRegion }) : /* @__PURE__ */ jsx25(AvailableStatus, {})
+        ] }) : /* @__PURE__ */ jsx25(AvailableStatus, {})
       ] }, venue);
     }) })
   ] });
@@ -3940,7 +3971,7 @@ var ProfileModal = ({
     }),
     [client, onDisconnectWallet]
   );
-  const providerActionMap = useMemo2(
+  const providerActionMap = useMemo3(
     () => ({
       twitter: {
         connect: () => {
@@ -3982,7 +4013,7 @@ var ProfileModal = ({
       handleDisconnectTwitter
     ]
   );
-  const resolvedWallets = useMemo2(() => {
+  const resolvedWallets = useMemo3(() => {
     var _a2, _b2;
     if (wallets) return wallets;
     return (_b2 = (_a2 = user == null ? void 0 : user.wallets) == null ? void 0 : _a2.map((wallet) => {