create-partylayer-app 0.2.0 → 0.4.0

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,EAWnC,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

@@ -9,6 +9,16 @@ export const TEMPLATES = [
         label: 'Next.js (SSR)',
         hint: 'App Router, server-side session via cookieStorage',
     },
+    {
+        id: 'vue-nuxt-pinia',
+        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;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.2.0",
+  "version": "0.4.0",
   "description": "Scaffold a PartyLayer dApp (Canton wallet integration) in seconds.",
   "type": "module",
   "bin": {

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.10.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/README.md

@@ -0,0 +1,27 @@
+# {{PROJECT_NAME}}
+
+A [PartyLayer](https://partylayer.xyz) dApp — Nuxt 3 + Vue 3 + Pinia, with **SSR session**.
+
+## Develop
+
+```bash
+npm run dev
+```
+
+## How it's wired
+
+- **Server** ([lib/session.ts](lib/session.ts)) reads the session cookie via Nuxt's SSR-aware `useCookie()`, wrapped as a `CookieAdapter` and fed to `@partylayer/session`'s `createCookieStorage` → the connected party renders in the **initial HTML** (no flash). `app.vue` gates on `getServerSession()`.
+- **Client** ([plugins/partylayer.client.ts](plugins/partylayer.client.ts)) creates the PartyLayer client and provides the session store (`createPartyLayerSession`), using `createCookieStorage()` (the same cookie, `document.cookie`).
+- **Pinia** ([stores/session.ts](stores/session.ts)) surfaces the PartyLayer session (`isConnected` / `party` / `status` + `connect`/`disconnect`) as a store — components read the store. This is the idiomatic "PartyLayer + Pinia" pattern.
+- Nuxt's cookie API is used only in your app (`lib/session.ts`), never in `@partylayer/session` — the library stays framework-agnostic (the same `CookieAdapter` the Next template feeds with `cookies()`).
+
+## Build
+
+```bash
+npm run build && npm run preview
+```
+
+## Docs
+
+- [PartyLayer docs](https://partylayer.xyz/docs/introduction)
+- [@partylayer/vue composables](https://www.npmjs.com/package/@partylayer/vue)

package/templates/vue-nuxt-pinia/_gitignore

@@ -0,0 +1,10 @@
+node_modules
+.nuxt
+.output
+.data
+dist
+*.local
+.DS_Store
+.env
+.env.*
+!.env.example

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

@@ -0,0 +1,23 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "preview": "nuxt preview",
+    "generate": "nuxt generate",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@partylayer/sdk": "^0.10.0",
+    "@partylayer/session": "^1.1.0",
+    "@partylayer/vue": "^0.1.3",
+    "@pinia/nuxt": "^0.5.5",
+    "pinia": "^2.2.0",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "nuxt": "^3.13.0"
+  }
+}

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

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { getServerSession, truncateParty } from './lib/session';
+import { useSessionStore } from './stores/session';
+
+// SSR-aware cookie → server-rendered connected party (Option A: the server owns
+// the display, so there's no disconnected→connected flash in the initial HTML).
+const cookie = useCookie<string | null>('pl_session');
+const session = getServerSession(cookie);
+const serverParty = session?.account?.partyId ?? null;
+
+// Pinia store = the reactive client session (the interactive island).
+const sessionStore = useSessionStore();
+</script>
+
+<template>
+  <main class="app">
+    <h1>{{PROJECT_NAME}}</h1>
+    <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.
+    </p>
+
+    <!-- Pinia-backed interactive session (reads the Pinia store, not the composables) -->
+    <button v-if="!sessionStore.isConnected" class="btn" @click="sessionStore.connect()">
+      Connect Wallet
+    </button>
+    <div v-else class="connected">
+      <code>{{ truncateParty(sessionStore.party ?? '') }}</code>
+      <button class="btn" @click="sessionStore.disconnect()">Disconnect</button>
+    </div>
+  </main>
+</template>
+
+<style>
+:root { color-scheme: light dark; }
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  background: #0b0f1a;
+  color: rgba(255, 255, 255, 0.92);
+}
+.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; }
+.session code, .connected 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;
+}
+</style>

package/templates/vue-nuxt-pinia/lib/session.ts

@@ -0,0 +1,46 @@
+import {
+  createCookieStorage,
+  decodeSessionEnvelope,
+  type CookieAdapter,
+  type PersistedSessionSnapshot,
+} from '@partylayer/session';
+import type { Ref } from 'vue';
+
+/**
+ * Wrap a Nuxt `useCookie()` ref as a `CookieAdapter`. `useCookie` is SSR-aware:
+ * on the server it reads the request's Cookie header, on the client it reads
+ * `document.cookie`. This is the SAME `CookieAdapter` interface next-ssr feeds
+ * with `next/headers` `cookies()` — different framework, one primitive. Nuxt's
+ * cookie API lives ONLY here (the app), never inside `@partylayer/session`.
+ */
+export function nuxtCookieAdapter(cookieRef: Ref<string | null | undefined>): CookieAdapter {
+  return {
+    get: () => cookieRef.value ?? null,
+    set: (_name, value) => {
+      cookieRef.value = value;
+    },
+    remove: () => {
+      cookieRef.value = null;
+    },
+  };
+}
+
+/**
+ * Read the persisted session on the server (for SSR) from the cookie ref, so a
+ * page can render the connected party in the initial HTML — before any client JS.
+ */
+export function getServerSession(
+  cookieRef: Ref<string | null | undefined>,
+): PersistedSessionSnapshot | null {
+  const storage = createCookieStorage({ adapter: nuxtCookieAdapter(cookieRef) });
+  // Cookie reads are synchronous; narrow the MaybePromise interface type.
+  const raw = storage.getItem('pl_session');
+  if (typeof raw !== 'string') return null;
+  return decodeSessionEnvelope(raw);
+}
+
+/** Pure, server-safe party-id truncation. */
+export function truncateParty(partyId: string): string {
+  if (partyId.length <= 16) return partyId;
+  return `${partyId.slice(0, 10)}…${partyId.slice(-4)}`;
+}

package/templates/vue-nuxt-pinia/nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: ['@pinia/nuxt'],
+  compatibilityDate: '2024-11-01',
+  devtools: { enabled: false },
+});

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

@@ -0,0 +1,19 @@
+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
+ * the server reads for SSR (lib/session.ts). The connected/wallet UI is
+ * client-side; the server-rendered party comes from the cookie directly.
+ */
+export default defineNuxtPlugin((nuxtApp) => {
+  const client = createPartyLayer({ network: 'devnet', app: { name: '{{PROJECT_NAME}}' } });
+  nuxtApp.vueApp.use(
+    createPartyLayerSession({
+      provider: client.asProvider(),
+      storage: createCookieStorage(),
+    }),
+  );
+});

package/templates/vue-nuxt-pinia/stores/session.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia';
+import { useSession, useAccount } from '@partylayer/vue';
+
+/**
+ * Pinia store surfacing the PartyLayer session — the idiomatic
+ * "PartyLayer + Pinia" pattern. Components read THIS store instead of the
+ * composables directly. The composables are SSR-safe (with no provided store
+ * they report a disconnected session), so this store is safe during SSR too;
+ * the live state comes in on the client once the plugin provides the store.
+ */
+export const useSessionStore = defineStore('partylayer-session', () => {
+  const { status, isConnected, isConnecting, connect, disconnect } = useSession();
+  const { party, networkId } = useAccount();
+
+  return { status, isConnected, isConnecting, party, networkId, connect, disconnect };
+});

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

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}