create-partylayer-app 0.4.0 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-partylayer-app",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Scaffold a PartyLayer dApp (Canton wallet integration) in seconds.",
   "type": "module",
   "bin": {

package/templates/next-ssr/_package.json

@@ -10,9 +10,10 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@partylayer/react": "^0.9.1",
-    "@partylayer/sdk": "^0.10.0",
-    "@partylayer/session": "^1.1.0",
+    "@partylayer/react": "^2.1.0",
+    "@partylayer/sdk": "^0.15.0",
+    "@partylayer/session": "^1.1.4",
+    "@tanstack/react-query": "^5.0.0",
     "next": "^14.2.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package/templates/next-ssr/app/page.tsx

@@ -1,7 +1,7 @@
 import { getServerSession, truncateParty } from '@/lib/session';
 import { ConnectButton } from '@/components/ConnectButton';
 
-// Reading cookies() opts this route into dynamic (per-request) rendering — which
+// Reading cookies() opts this route into dynamic (per-request) rendering, which
 // is exactly what SSR session needs: the server reads the session cookie on
 // every request and renders the connected state into the initial HTML.
 export default function Home() {
@@ -11,7 +11,7 @@ export default function Home() {
   return (
     <main className="app">
       <h1>{{PROJECT_NAME}}</h1>
-      <p className="subtitle">A PartyLayer dApp on Canton — connect any verified wallet.</p>
+      <p className="subtitle">A PartyLayer dApp on Canton: connect any verified wallet.</p>
 
       {/* SERVER-RENDERED connected state (Option A: server owns the display). This
           appears in the initial HTML from the cookie, before any client JS, so
@@ -22,11 +22,11 @@ export default function Home() {
         </p>
       ) : (
         <p className="session" data-testid="server-cta">
-          Not connected — connect a wallet to continue.
+          Not connected: connect a wallet to continue.
         </p>
       )}
 
-      {/* Interactive client island — reconciles silently with the live provider. */}
+      {/* Interactive client island: reconciles silently with the live provider. */}
       <ConnectButton />
     </main>
   );

package/templates/next-ssr/app/providers.tsx

@@ -1,19 +1,29 @@
 'use client';
 
-import { useMemo, type ReactNode } from 'react';
+import { useMemo, useState, type ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { PartyLayerKit } from '@partylayer/react';
 import { createCookieStorage } from '@partylayer/session';
 
 /**
  * Client provider boundary. cookieStorage on the client uses document.cookie
- * (synchronous → flash-free), the SAME cookie the server reads in lib/session.ts
- * — so server HTML and client hydration agree.
+ * (synchronous, flash-free), the SAME cookie the server reads in lib/session.ts,
+ * so server HTML and client hydration agree.
+ *
+ * The QueryClient is created with useState so each browser client gets one stable
+ * instance (never shared across server requests), the SSR-safe pattern for the
+ * App Router. PartyLayer's data hooks (@partylayer/react/query) read this client;
+ * the base session surface works without it, but it is set up so the query hooks
+ * are ready when you reach for them.
  */
 export function Providers({ children }: { children: ReactNode }) {
   const storage = useMemo(() => createCookieStorage(), []);
+  const [queryClient] = useState(() => new QueryClient());
   return (
-    <PartyLayerKit network="devnet" appName="{{PROJECT_NAME}}" sessionOptions={{ storage }}>
-      {children}
-    </PartyLayerKit>
+    <QueryClientProvider client={queryClient}>
+      <PartyLayerKit network="devnet" appName="{{PROJECT_NAME}}" sessionOptions={{ storage }}>
+        {children}
+      </PartyLayerKit>
+    </QueryClientProvider>
   );
 }

package/templates/react-vite/_package.json

@@ -9,8 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@partylayer/react": "^0.9.1",
-    "@partylayer/sdk": "^0.10.0",
+    "@partylayer/react": "^2.1.0",
+    "@partylayer/sdk": "^0.15.0",
+    "@tanstack/react-query": "^5.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

package/templates/react-vite/src/App.tsx

@@ -12,7 +12,7 @@ export default function App() {
     <PartyLayerKit network="devnet" appName="{{PROJECT_NAME}}">
       <main className="app">
         <h1>{{PROJECT_NAME}}</h1>
-        <p className="subtitle">A PartyLayer dApp on Canton — connect any verified wallet.</p>
+        <p className="subtitle">A PartyLayer dApp on Canton: connect any verified wallet.</p>
         <ConnectButton />
         <SessionPanel />
       </main>

package/templates/react-vite/src/main.tsx

@@ -1,10 +1,20 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import App from './App';
 import './index.css';
 
+// PartyLayer's data hooks (the `@partylayer/react/query` entrypoint:
+// useDamlContract, useChoice, the cost hooks) are built on TanStack Query, so
+// they need a QueryClient in context. Create one here and wrap the app. The base
+// session surface (PartyLayerKit, ConnectButton, useAccount) works without it,
+// but having it set up means the query hooks are ready when you reach for them.
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
   </StrictMode>,
 );

package/templates/vanilla/_package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@partylayer/sdk": "^0.10.0"
+    "@partylayer/sdk": "^0.15.0"
   },
   "devDependencies": {
     "typescript": "^5.6.2",

package/templates/vue-nuxt-pinia/_package.json

@@ -10,10 +10,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@partylayer/sdk": "^0.10.0",
-    "@partylayer/session": "^1.1.0",
-    "@partylayer/vue": "^0.1.3",
+    "@partylayer/sdk": "^0.15.0",
+    "@partylayer/session": "^1.1.4",
+    "@partylayer/vue": "^1.0.1",
     "@pinia/nuxt": "^0.5.5",
+    "@tanstack/vue-query": "^5.0.0",
     "pinia": "^2.2.0",
     "vue": "^3.5.0"
   },

package/templates/vue-nuxt-pinia/app.vue

@@ -15,14 +15,14 @@ const sessionStore = useSessionStore();
 <template>
   <main class="app">
     <h1>{{PROJECT_NAME}}</h1>
-    <p class="subtitle">A PartyLayer dApp on Canton — Nuxt 3 + Pinia, SSR session.</p>
+    <p class="subtitle">A PartyLayer dApp on Canton: Nuxt 3 + Pinia, SSR session.</p>
 
     <!-- SERVER-RENDERED party from the cookie (initial HTML, no flash) -->
     <p v-if="serverParty" class="session">
       Connected as <code data-testid="server-party">{{ truncateParty(serverParty) }}</code>
     </p>
     <p v-else class="session" data-testid="server-cta">
-      Not connected — connect a wallet to continue.
+      Not connected: connect a wallet to continue.
     </p>
 
     <!-- Pinia-backed interactive session (reads the Pinia store, not the composables) -->

package/templates/vue-nuxt-pinia/plugins/partylayer.client.ts

@@ -1,14 +1,22 @@
+import { VueQueryPlugin } from '@tanstack/vue-query';
 import { createPartyLayer } from '@partylayer/sdk';
 import { createPartyLayerSession } from '@partylayer/vue';
 import { createCookieStorage } from '@partylayer/session';
 
 /**
  * Client-only plugin: create the PartyLayer client and provide the session store
- * app-wide. cookieStorage on the client uses document.cookie — the SAME cookie
+ * app-wide. cookieStorage on the client uses document.cookie, the SAME cookie
  * the server reads for SSR (lib/session.ts). The connected/wallet UI is
  * client-side; the server-rendered party comes from the cookie directly.
+ *
+ * VueQueryPlugin supplies the QueryClient that PartyLayer's data composables
+ * (useDamlContract, useChoice, the cost composables) build on. It is registered
+ * client-side here, so there is no SSR query state to dehydrate; the base session
+ * composables work without it, but it is set up so the query composables are
+ * ready when you reach for them. For SSR query prefetch, see the Nuxt SSR guide.
  */
 export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueQueryPlugin);
   const client = createPartyLayer({ network: 'devnet', app: { name: '{{PROJECT_NAME}}' } });
   nuxtApp.vueApp.use(
     createPartyLayerSession({