create-partylayer-app 0.3.0 → 0.4.1

package/dist/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,SAAS,EAAE,YAAY,EAgBnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEnD"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,SAAS,EAAE,YAAY,EAqBnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEnD"}

package/dist/templates.js

@@ -14,6 +14,11 @@ export const TEMPLATES = [
         label: 'Vue + Nuxt + Pinia',
         hint: 'Nuxt 3 SSR session, PartyLayer session in a Pinia store',
     },
+    {
+        id: 'vanilla',
+        label: 'Vanilla TypeScript',
+        hint: 'No framework — Vite + the @partylayer/sdk client API',
+    },
 ];
 export function isTemplateId(value) {
     return TEMPLATES.some((t) => t.id === value);

package/dist/templates.js.map

@@ -1 +1 @@
-{"version":3,"file":"templates.js","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,2CAA2C;KAClD;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,mDAAmD;KAC1D;IACD;QACE,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,yDAAyD;KAChE;CACF,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAa;IACxC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,2CAA2C;KAClD;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,mDAAmD;KAC1D;IACD;QACE,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,yDAAyD;KAChE;IACD;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,sDAAsD;KAC7D;CACF,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAa;IACxC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAC/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-partylayer-app",
-  "version": "0.3.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/README.md

@@ -0,0 +1,36 @@
+# {{PROJECT_NAME}}
+
+A [PartyLayer](https://partylayer.xyz) dApp — vanilla TypeScript + Vite, no framework.
+
+## Develop
+
+```bash
+npm run dev
+```
+
+## How it's wired
+
+```ts
+import { createPartyLayer } from '@partylayer/sdk';
+
+const client = createPartyLayer({ network: 'devnet', app: { name: '{{PROJECT_NAME}}' } });
+
+const wallets = await client.listWallets();        // verified wallets from the registry
+const session = await client.connect({ walletId }); // connect to one
+client.on('session:connected', () => { /* … */ });  // react to session changes
+client.on('session:disconnected', () => { /* … */ });
+const active = await client.getActiveSession();      // restore on load
+```
+
+`createPartyLayer` is the dApp connect API — no framework bindings needed. See `src/main.ts` for the full hand-rolled connect UI. Switch networks by changing `network` to `"testnet"` or `"mainnet"`.
+
+## Build
+
+```bash
+npm run build && npm run preview
+```
+
+## Docs
+
+- [PartyLayer docs](https://partylayer.xyz/docs/introduction)
+- [@partylayer/sdk](https://www.npmjs.com/package/@partylayer/sdk)

package/templates/vanilla/_gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+*.local
+.DS_Store
+.env
+.env.*
+!.env.example

package/templates/vanilla/_package.json

@@ -0,0 +1,18 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@partylayer/sdk": "^0.15.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.2",
+    "vite": "^5.4.2"
+  }
+}

package/templates/vanilla/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla/src/main.ts

@@ -0,0 +1,77 @@
+import { createPartyLayer, type Session } from '@partylayer/sdk';
+import './style.css';
+
+// The PartyLayer client — the dApp connect API (listWallets / connect / session).
+// All built-in wallet adapters are auto-registered.
+const client = createPartyLayer({ network: 'devnet', app: { name: '{{PROJECT_NAME}}' } });
+
+const app = document.querySelector<HTMLDivElement>('#app')!;
+app.innerHTML = `
+  <main class="app">
+    <h1>{{PROJECT_NAME}}</h1>
+    <p class="subtitle">A PartyLayer dApp on Canton — vanilla TypeScript, no framework.</p>
+    <div id="status" class="status"></div>
+    <button id="connect" class="btn">Connect Wallet</button>
+    <ul id="wallets" class="wallets" hidden></ul>
+  </main>
+`;
+
+const statusEl = document.querySelector<HTMLDivElement>('#status')!;
+const connectBtn = document.querySelector<HTMLButtonElement>('#connect')!;
+const walletsEl = document.querySelector<HTMLUListElement>('#wallets')!;
+
+const truncateParty = (p: string) => (p.length <= 16 ? p : `${p.slice(0, 10)}…${p.slice(-4)}`);
+
+function renderConnected(session: Session) {
+  walletsEl.hidden = true;
+  connectBtn.hidden = true;
+  statusEl.innerHTML = `Connected as <code>${truncateParty(session.partyId)}</code>`;
+  const disconnect = document.createElement('button');
+  disconnect.className = 'btn';
+  disconnect.textContent = 'Disconnect';
+  disconnect.addEventListener('click', () => void client.disconnect());
+  statusEl.appendChild(disconnect);
+}
+
+function renderDisconnected() {
+  statusEl.textContent = 'Not connected — connect a wallet to continue.';
+  connectBtn.hidden = false;
+  walletsEl.hidden = true;
+}
+
+// Connect → list the verified wallets from the registry → pick one → connect.
+connectBtn.addEventListener('click', async () => {
+  const wallets = await client.listWallets();
+  walletsEl.innerHTML = wallets
+    .map(
+      (w, i) => `<li>
+        <button class="wallet" data-idx="${i}">
+          ${w.icons?.md ? `<img src="${w.icons.md}" alt="" width="24" height="24" />` : ''}
+          <span>${w.name}</span>
+        </button>
+      </li>`,
+    )
+    .join('');
+  walletsEl.hidden = false;
+  walletsEl.querySelectorAll<HTMLButtonElement>('.wallet').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      // Pass the WalletInfo's walletId (a branded WalletId), not a raw string.
+      const wallet = wallets[Number(btn.dataset.idx)];
+      try {
+        const session = await client.connect({ walletId: wallet.walletId });
+        renderConnected(session);
+      } catch (err) {
+        statusEl.textContent = `Connect failed: ${(err as Error).message}`;
+      }
+    });
+  });
+});
+
+// Keep the UI in sync with external session changes (multi-tab, expiry, restore).
+client.on('session:connected', () => {
+  void client.getActiveSession().then((s) => s && renderConnected(s));
+});
+client.on('session:disconnected', () => renderDisconnected());
+
+// Initial state — restore an existing session if there is one.
+void client.getActiveSession().then((s) => (s ? renderConnected(s) : renderDisconnected()));

package/templates/vanilla/src/style.css

@@ -0,0 +1,45 @@
+:root {
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  color-scheme: light dark;
+  background: #0b0f1a;
+  color: rgba(255, 255, 255, 0.92);
+}
+* { box-sizing: border-box; }
+body { margin: 0; }
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  text-align: center;
+}
+.app h1 { font-size: 2.5rem; margin: 0; }
+.subtitle { margin: 0 0 8px; color: rgba(255, 255, 255, 0.6); max-width: 32rem; }
+.status { display: flex; align-items: center; gap: 12px; }
+.status code { background: rgba(255, 255, 255, 0.08); padding: 2px 8px; border-radius: 6px; }
+.btn {
+  padding: 10px 18px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: #ffcc00;
+  color: #0b0f1a;
+  font-weight: 600;
+  cursor: pointer;
+}
+.wallets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 20rem; }
+.wallet {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.04);
+  color: inherit;
+  cursor: pointer;
+}
+.wallet img { border-radius: 6px; }

package/templates/vanilla/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

package/templates/vanilla/vite.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from 'vite';
+
+// https://vite.dev/config/
+export default defineConfig({});

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({