@agg-build/ui 4.2.0 → 4.4.0

package/README.md

@@ -41,8 +41,9 @@ dependency.
 
 ```tsx
 import "@agg-build/ui/styles.css";
-import { AggProvider } from "@agg-build/hooks";
+import { QueryClient, QueryClientProvider } from "@agg-build/hooks";
 import { createAggClient } from "@agg-build/sdk";
+import { AggProvider } from "@agg-build/ui";
 import { HomePage } from "@agg-build/ui/pages";
 
 const client = createAggClient({
@@ -50,18 +51,21 @@ const client = createAggClient({
   appId: "your-app-id",
   wsUrl: "wss://ws.agg.market",
 });
+const queryClient = new QueryClient();
 
 export default function App() {
   return (
-    <AggProvider
-      client={client}
-      config={{
-        general: { locale: "en-US", theme: "dark" },
-        features: { enableAnimations: true, enableLiveUpdates: true, showFeesBreakdown: true },
-      }}
-    >
-      <HomePage withHeader />
-    </AggProvider>
+    <QueryClientProvider client={queryClient}>
+      <AggProvider
+        client={client}
+        config={{
+          general: { locale: "en-US", theme: "dark" },
+          features: { enableAnimations: true, enableLiveUpdates: true, showFeesBreakdown: true },
+        }}
+      >
+        <HomePage withHeader />
+      </AggProvider>
+    </QueryClientProvider>
   );
 }
 ```
@@ -74,8 +78,9 @@ Import the default theme once at your app entrypoint:
 import "@agg-build/ui/styles.css";
 ```
 
-Override theme tokens with CSS variables on the `.agg-root` container (automatically applied by
-`AggProvider`):
+The UI-level `AggProvider` adds AGG's toast surface to the hooks provider. It still requires the
+same `client` prop and `QueryClientProvider` ancestor shown above. Override theme tokens with CSS
+variables on the `.agg-root` container (automatically applied by `AggProvider`):
 
 ```css
 .agg-root {
@@ -103,11 +108,11 @@ const inter = Inter({
 export default function App() {
   return (
     <div className={inter.variable}>
-      <AggProvider>
-        <div className="agg-root">
+      <QueryClientProvider client={queryClient}>
+        <AggProvider client={client}>
           <AggApp />
-        </div>
-      </AggProvider>
+        </AggProvider>
+      </QueryClientProvider>
     </div>
   );
 }