@enbox/create-dapp 0.0.1 → 0.0.3

package/template/src/application.ts

@@ -1,10 +0,0 @@
-import { defineApplicationManifest } from '@enbox/react/config';
-import type { CreateEnboxClientOptions } from '@enbox/react/config';
-
-import app from './app.json' with { type: 'json' };
-import { DemoProtocol } from './demo/protocol.js';
-
-export const config = {
-  application: defineApplicationManifest({ protocols: [DemoProtocol] }),
-  wallet: { appName: app.name, applicationId: app.id },
-} satisfies CreateEnboxClientOptions;

package/template/src/demo/Demo.tsx

@@ -1,48 +0,0 @@
-import { useEnboxMutation, useRecords } from '@enbox/react';
-
-import { CHOICES, DemoProtocol } from './protocol.js';
-import type { ChoiceEmoji } from './protocol.js';
-import './demo.css';
-
-export function Demo({ disabled = false }: { disabled?: boolean }) {
-  const choices = useRecords(DemoProtocol, 'choice', { materialize: true, pagination: { limit: 1 } });
-  const save = useEnboxMutation((enbox, emoji: ChoiceEmoji) =>
-    enbox.using(DemoProtocol).records.set('choice', { data: { emoji } }));
-  const observed = CHOICES.find(({ emoji }) => emoji === choices.records[0]?.value.emoji);
-
-  return (
-    <section className="panel demo" aria-labelledby="demo-title">
-      <h2 id="demo-title">Your first record</h2>
-      <p>Choose a little hello. It’s encrypted for this app, separate from your public profile.</p>
-      <fieldset className="choice-options" disabled={disabled || save.isPending || choices.status !== 'ready'}>
-        <legend className="sr-only">Choose your hello</legend>
-        {CHOICES.map(({ emoji, label }) => (
-          <button type="button" className="choice-option" key={emoji}
-            aria-label={`Choose ${label.toLowerCase()}`}
-            aria-pressed={observed?.emoji === emoji}
-            onClick={() => { void save.run(emoji).catch(() => {}); }}>
-            <span className="choice-emoji" aria-hidden="true">{emoji}</span>
-            <span>{label}</span>
-          </button>
-        ))}
-      </fieldset>
-      <p className="demo-status" role="status">
-        {save.isPending ? 'Saving your choice…'
-          : choices.status === 'loading' ? 'Reading your saved choice…'
-            : observed ? `Saved: ${observed.emoji} ${observed.label}` : 'Choose an emoji to get started.'}
-      </p>
-      {choices.status === 'error' && (
-        <div className="notice notice-error" role="alert">
-          <p>Couldn’t read your choice: {choices.error.message}</p>
-          <button type="button" className="button button-secondary" disabled={disabled || save.isPending}
-            onClick={() => { void choices.retry().catch(() => {}); }}>
-            Try again
-          </button>
-        </div>
-      )}
-      {save.error && (
-        <p className="error-detail" role="alert">Couldn’t save: {save.error.message} Choose an emoji again to retry.</p>
-      )}
-    </section>
-  );
-}

package/template/src/demo/demo.css

@@ -1,17 +0,0 @@
-.demo { padding: 30px; }
-.demo > p { margin-top: 12px; color: var(--muted); font-size: .85rem; }
-.choice-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; padding: 0; margin: 24px 0 0; border: 0; min-width: 0; }
-.choice-option { display: grid; place-items: center; gap: 10px; padding: 20px 8px 17px; border: 1px solid var(--border); border-radius: 13px; background: #fff; color: #59645a; font-size: .75rem; transition: background .15s, border-color .15s; }
-.choice-option:hover:not(:disabled) { background: #f8faf5; border-color: #a6bea0; }
-.choice-option[aria-pressed="true"] { background: #edf3e7; border-color: #709865; color: #315b46; }
-.choice-emoji { font-size: 1.9rem; line-height: 1.3; }
-.demo .demo-status { min-height: 20px; margin-top: 18px; font-size: .74rem; text-align: center; }
-.demo > p[role="alert"] { color: #7d4533; }
-.demo .notice { margin: 16px 0 0; }
-@media (max-width: 600px) {
-  .demo { padding: 26px 20px; }
-  .choice-options { gap: 8px; }
-}
-@media (prefers-reduced-motion: reduce) {
-  .choice-option { transition: none; }
-}

package/template/src/demo/protocol.ts

@@ -1,28 +0,0 @@
-import { defineProtocol, recordCodecs } from '@enbox/react/config';
-import type { RecordValidator } from '@enbox/react/config';
-
-import app from '../app.json' with { type: 'json' };
-
-export const CHOICES = [
-  { emoji: '🌱', label: 'Grow' },
-  { emoji: '✨', label: 'Spark' },
-  { emoji: '🚀', label: 'Explore' },
-] as const;
-
-export type ChoiceEmoji = typeof CHOICES[number]['emoji'];
-export type Choice = { emoji: ChoiceEmoji };
-
-const validateChoice: RecordValidator = (value: unknown): boolean =>
-  value !== null && typeof value === 'object' && !Array.isArray(value)
-  && 'emoji' in value && CHOICES.some(({ emoji }) => emoji === value.emoji);
-
-// Replace this example URI with one you own before publishing your app.
-// Keep it stable after launch: it identifies the app's saved data and grants.
-export const DemoProtocol = defineProtocol({
-  protocol: `https://example.com/${encodeURIComponent(app.id)}/demo/v1`,
-  published: false,
-  types: {
-    choice: { dataFormats: ['application/json'], encryptionRequired: true },
-  },
-  structure: { choice: { $recordLimit: { max: 1 } } },
-} as const, { choice: recordCodecs.json<Choice>({ validator: validateChoice }) });