create-partylayer-app 0.3.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,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.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({});