studio-engine 0.74.7 → 0.74.8

data/app/views/style/modals/_ds_onramp_hub.html.erb

@@ -1,71 +0,0 @@
-<%#
-  Living style guide specimen — the Add Funds hub, every rail at once.
-
-  APP-SPECIFIC flow, engine chrome throughout (blocks/_close_x + six
-  blocks/_rail_row). This is the card the rail primitive was extracted FOR: turf
-  draws these six by hand today, which is six chances for the seventh to drift.
-
-  WHAT TO LOOK AT IS THE RANKING, and this is where it earns its keep. Six rails
-  is enough that "which one do I press" becomes a real question, and a hub where
-  every rail carries equal weight answers it by asking the person to compare
-  payment processors — which is not a question anyone can answer about their own
-  life. Exactly one rail is :primary. The other five defer to it.
-
-  AND THE THIRD SHAPE. PayPal and Venmo are announced before they are wired, so
-  they are :soon — not disabled buttons but plain <div>s, with a badge where the
-  chevron would be. A dimmed chevron would still promise somewhere to go.
-
-  Single root: the outer <div> is the host's required root.
-%>
-<div class="relative">
-  <%= render "studio/modals/blocks/close_x", modal_store: "dsModals" %>
-
-  <div class="text-center pt-1 mb-3">
-    <h3 class="text-heading font-bold text-lg leading-tight">Add Funds</h3>
-  </div>
-
-  <div class="space-y-3">
-    <%= render "studio/modals/blocks/rail_row",
-          emphasis: :primary, on_click: "$store.dsModals.close()",
-          icon_label: "C", icon_bg: "#0052FF",
-          title: "Coinbase", subtitle: "Buy USDC with a card or bank",
-          data: { ds_rail: "coinbase" } %>
-
-    <%= render "studio/modals/blocks/rail_row",
-          on_click: "$store.dsModals.close()",
-          icon_label: "CF", icon_bg: "#14B8A6",
-          title: "Coinflow · $19", subtitle: "Buy 1 entry token with a card",
-          data: { ds_rail: "coinflow" } %>
-
-    <%= render "studio/modals/blocks/rail_row",
-          on_click: "$store.dsModals.close()",
-          icon_label: "A", icon_bg: "#6D28D9",
-          title: "Aeropay · $19", subtitle: "Buy 1 entry token from your bank",
-          data: { ds_rail: "aeropay" } %>
-
-    <%= render "studio/modals/blocks/rail_row",
-          state: :soon,
-          icon_label: "P", icon_bg: "#003087",
-          title: "PayPal", subtitle: "Pay with your PayPal balance",
-          data: { ds_rail: "paypal" } %>
-
-    <%= render "studio/modals/blocks/rail_row",
-          state: :soon,
-          icon_label: "V", icon_bg: "#008CFF",
-          title: "Venmo", subtitle: "Pay from your Venmo balance",
-          data: { ds_rail: "venmo" } %>
-
-    <%= render "studio/modals/blocks/rail_row",
-          on_click: "$store.dsModals.close()",
-          icon_label: "S", icon_bg: "#635BFF",
-          title: "Card · $19", subtitle: "Buy one entry token with a card",
-          data: { ds_rail: "stripe" } %>
-  </div>
-
-  <%# Back, not close: the hub is always reached FROM somewhere, and landing a
-      player on nothing is not the same as returning them. %>
-  <button type="button" @click="$store.dsModals.swap('ds-wallet-topup', {})"
-          class="block mx-auto mt-4 text-sm text-secondary hover:text-heading transition">
-    &larr; Back
-  </button>
-</div>

data/app/views/style/modals/_ds_wallet_topup.html.erb

@@ -1,69 +0,0 @@
-<%#
-  Living style guide specimen — Top Up Wallet, the FIRST funds modal a player
-  meets when they try to enter without funds.
-
-  APP-SPECIFIC flow, engine chrome throughout: blocks/_close_x for the mark and
-  blocks/_rail_row for every option. The engine owns no processors and no funding
-  policy; what turf supplies is which rails exist and which one leads.
-
-  THE TOGGLE IS THE CARD. This is one modal with two faces, and the fork is a
-  SAFETY one rather than a preference. A web2 viewer running with
-  ENABLE_WEB2_USDC_ENTRY off cannot pay an entry with USDC at all — so pitching
-  "Buy USDC" to them would sell a thing that cannot do the job they came to do.
-  For exactly that audience the primary rail becomes the entry token instead.
-  Everyone else — web3, and web2 with the flag on — sees Coinbase.
-
-  Shown as ONE card with a toggle rather than two cards, because two cards would
-  read as two products. The whole point is that a player never sees both.
-
-  Single root: the outer <div> is the host's required root.
-%>
-<div class="relative"
-     x-data="{
-       get props() { var c = $store.dsModals.current(); return (c && c.props) || {} },
-       get tokenFallback() { return !!this.props.tokenFallback }
-     }">
-  <%= render "studio/modals/blocks/close_x", modal_store: "dsModals" %>
-
-  <div class="text-center pt-1 mb-2">
-    <h3 class="text-heading font-bold text-lg leading-tight">Top Up Wallet</h3>
-  </div>
-
-  <%# The balance line follows the fork too — the currency it names has to be the
-      one that can actually pay for the entry. %>
-  <p x-show="!tokenFallback" class="text-xs text-body mb-4 text-center">
-    USDC balance: <span class="font-mono font-semibold text-heading">$12.40</span>
-  </p>
-  <p x-show="tokenFallback" x-cloak class="text-xs text-body mb-4 text-center">
-    Entry tokens: <span class="font-mono font-semibold text-heading">0</span>
-  </p>
-
-  <template x-if="!tokenFallback">
-    <%= render "studio/modals/blocks/rail_row",
-          emphasis:   :primary,
-          on_click:   "$store.dsModals.close()",
-          icon_label: "C",
-          icon_bg:    "#0052FF",
-          title:      "Buy USDC with Coinbase",
-          subtitle:   "Card or bank · funds your entry",
-          data:       { ds_rail: "coinbase" } %>
-  </template>
-
-  <template x-if="tokenFallback">
-    <%= render "studio/modals/blocks/rail_row",
-          emphasis:   :primary,
-          on_click:   "$store.dsModals.close()",
-          icon_label: "🎟️",
-          icon_class: "text-xl",
-          title:      "Buy Entry Tokens",
-          subtitle:   "1 token = 1 contest entry",
-          data:       { ds_rail: "tokens" } %>
-  </template>
-
-  <%# The quiet way to the full hub. Deliberately a link, not a rail: it is not
-      another way to pay, it is a way to see the others. %>
-  <button type="button" @click="$store.dsModals.swap('ds-onramp-hub', {})"
-          class="block mx-auto mt-4 text-sm text-secondary hover:text-heading transition">
-    More ways to add funds &rarr;
-  </button>
-</div>

data/app/views/style/modals/_entry_tokens.html.erb

@@ -1,188 +0,0 @@
-<%#
-  Living style guide specimen — the contest entry & eligibility flow. This
-  documents an APP-SPECIFIC flow (Turf Monster's "Get Entry Tokens" → enter);
-  the engine deliberately does NOT own the packs, pricing, payment rails, or any
-  on-chain write. The specimen composes only engine CHROME (studio/modals/blocks/
-  shell, card_header, progress_pill, solana_tx_link) and represents the packs and
-  the on-chain moments as an illustrative demo — the app owns the money + signing.
-
-  Opened on the page-scoped dsModals host with an internal step machine on
-  props.step, the full web2 walk:
-
-    picker -> confirming -> minted -> entering -> entered
-
-  Single-root templates throughout. The two load steps (confirming, entering)
-  honor the minimum-visible-duration convention (studio/modals/_load_convention):
-  the spinner holds at least MIN_LOAD_MS, then auto-advances (demo mode) —
-  resolveAt = max(min_duration, actual_completion).
-
-  On-chain model (documented, not owned here). An entry token is a PROGRAM-OWNED
-  prepaid entry credit recorded on-chain (a per-token account), NOT a fungible SPL
-  token in the user's wallet. WEB2 (card / Stripe / Coinflow / PayPal) has two
-  on-chain moments: (1) MINT at purchase, server-signed after the payment clears —
-  not on the buyer's click; (2) CONSUME at entry, when the hold-to-confirm gesture
-  spends one token to create the contest entry. WEB3 (wallet / USDC on-chain)
-  funds USDC directly and mints NO token — so the mint→consume prelude is
-  web2-only. Both paths converge at the SAME on-chain Entry PDA and the SAME
-  "Entry Confirmed" card.
-%>
-<%
-  # Illustrative packs only — a real app reads these from its own config
-  # (e.g. StripePurchase.available_packs), and they vary by funding mode.
-  demo_packs = [
-    { tokens: 1,  price: "$5",  note: nil },
-    { tokens: 3,  price: "$12", note: "Popular" },
-    { tokens: 10, price: "$35", note: "Best value" }
-  ]
-%>
-<div x-data="{
-       get props() { var c = Alpine.store('dsModals').current(); return (c && c.props) || {}; },
-       buy(count, balance) {
-         Alpine.store('dsModals').advance({ step: 'confirming', mintedCount: count, mintedBalance: balance });
-       },
-       confirmEntry() {
-         Alpine.store('dsModals').advance({ step: 'entering' });
-       },
-       // Demo auto-resolve honoring the min-load convention: hold the spinner at
-       // least MIN_LOAD_MS, then advance — but only while this modal is still on
-       // the given step (guards against an early close / manual advance).
-       autoAdvance(fromStep, patch) {
-         window.StudioModals.holdAtLeast(window.StudioModals.MIN_LOAD_MS).then(function () {
-           var c = Alpine.store('dsModals').current();
-           if (c && c.id === 'entry-tokens' && c.props.step === fromStep) {
-             Alpine.store('dsModals').advance(patch);
-           }
-         });
-       }
-     }" class="relative">
-
-  <%# Shared close — top-right, above whichever step is active. %>
-  <button @click="$store.dsModals.close()"
-          class="absolute top-0 right-0 -mt-2 -mr-2 text-secondary hover:text-heading text-xl leading-none z-10"
-          aria-label="Close">&times;</button>
-
-  <%# ===== PICKER ===== %>
-  <template x-if="(props.step || 'picker') === 'picker'">
-    <div>
-      <div class="text-center pt-1 mb-3">
-        <h3 class="text-heading font-bold text-lg leading-tight">Get Entry Tokens</h3>
-      </div>
-      <%= render "studio/modals/blocks/progress_pill", current: 2, total: 3 %>
-      <p class="text-xs text-secondary mb-4 text-center">
-        1 token = 1 contest entry. Pick a pack to finish.
-      </p>
-
-      <div class="space-y-2.5">
-        <% demo_packs.each do |pack| %>
-          <button type="button"
-                  @click="buy(<%= pack[:tokens] %>, '<%= pack[:tokens] %>')"
-                  class="w-full flex items-center justify-between gap-3 rounded-lg border border-strong bg-inset px-4 py-3 text-left hover:border-primary transition">
-            <span class="flex items-center gap-2">
-              <span class="text-heading font-semibold"><%= pack[:tokens] %> token<%= "s" unless pack[:tokens] == 1 %></span>
-              <% if pack[:note] %>
-                <span class="badge" style="color: var(--color-primary); border-color: var(--color-primary)"><%= pack[:note] %></span>
-              <% end %>
-            </span>
-            <span class="text-heading font-mono font-bold"><%= pack[:price] %></span>
-          </button>
-        <% end %>
-      </div>
-
-      <%# Rails — which funding path mints tokens vs funds an entry directly. %>
-      <div class="mt-4 flex flex-wrap items-center justify-center gap-x-4 gap-y-1 text-xs text-muted">
-        <span>Pay by card</span>
-        <span aria-hidden="true">&middot;</span>
-        <span>PayPal / Venmo</span>
-        <span aria-hidden="true">&middot;</span>
-        <span>Coinflow</span>
-      </div>
-      <p class="text-center text-2xs text-muted mt-1">
-        These are the <strong>web2</strong> rails — they mint prepaid entry tokens.
-        The <strong>web3</strong> path funds USDC on-chain directly and mints no token.
-      </p>
-
-      <%# The seam callout — what the engine owns vs the app, plus the honest
-          web2/web3 map (a real divergence, not invented). %>
-      <div class="mt-4 rounded-lg border border-subtle bg-surface p-3 text-2xs text-secondary leading-snug">
-        <p class="text-heading font-semibold mb-1">App-specific flow, engine chrome</p>
-        <p class="mb-2">
-          The engine supplies only the shell, header, progress pill, and tx link. The
-          packs, pricing, payment rails, and every on-chain write are
-          <strong>app-owned</strong> — this specimen represents them as a demo. On-chain,
-          an entry token is a <strong>prepaid entry credit recorded on-chain</strong>
-          (a per-token account), not a wallet-held token.
-        </p>
-        <p class="text-heading font-semibold mb-1">Web2 vs web3 — where they diverge and converge</p>
-        <p class="mb-1">
-          <strong>Web2</strong> (card / Stripe / Coinflow / PayPal): a server job mints
-          one prepaid entry credit per token on-chain once payment clears, then
-          hold-to-confirm <strong>consumes</strong> one token to create the entry.
-        </p>
-        <p class="mb-1">
-          <strong>Web3</strong> (wallet / USDC on-chain): funds USDC directly and
-          <strong>mints no token</strong> — the mint → consume prelude is web2-only.
-        </p>
-        <p>
-          Both paths converge on the <strong>same on-chain Entry PDA</strong> and the
-          <strong>same “Entry Confirmed” card</strong> — divergent funding front-end,
-          one shared entry → entered finish.
-        </p>
-      </div>
-    </div>
-  </template>
-
-  <%# ===== CONFIRMING (payment processing — mint-at-purchase) ===== %>
-  <template x-if="props.step === 'confirming'">
-    <div x-init="autoAdvance('confirming', { step: 'minted' })">
-      <%= render "studio/modals/blocks/card_header",
-            spinner: true,
-            title: "Confirming your purchase…",
-            subtitle: "Payment cleared — a server job mints one prepaid entry credit per token on-chain." %>
-    </div>
-  </template>
-
-  <%# ===== MINTED (ready to consume at entry) ===== %>
-  <template x-if="props.step === 'minted'">
-    <div>
-      <%= render "studio/modals/blocks/card_header",
-            icon_color: 'primary',
-            title_key: "(props.mintedCount === 1 ? 'Entry Token Minted' : 'Entry Tokens Minted')" do %>
-        You now have <span class="font-bold text-primary font-mono" x-text="props.mintedBalance"></span> available.
-      <% end %>
-      <p class="text-xs text-secondary text-center mb-4 leading-snug">
-        Holding to confirm now <strong>consumes one token on-chain</strong> to create
-        your contest entry.
-      </p>
-      <button @click="confirmEntry()" class="btn btn-primary btn-lg w-full">Hold to Confirm Entry</button>
-      <button @click="$store.dsModals.close()"
-              class="block mx-auto mt-3 text-xs text-secondary hover:text-heading underline underline-offset-2">
-        I&rsquo;ll confirm later
-      </button>
-    </div>
-  </template>
-
-  <%# ===== ENTERING (contest enter processing — the on-chain consume) ===== %>
-  <template x-if="props.step === 'entering'">
-    <div x-init="autoAdvance('entering', { step: 'entered', txSignature: '5xTrDemoEntrySignature1234567890abc' })">
-      <%= render "studio/modals/blocks/card_header",
-            spinner: true,
-            title: "Confirming your entry…",
-            subtitle: "Consuming one token on-chain to create your contest entry." %>
-    </div>
-  </template>
-
-  <%# ===== ENTERED (contest entered — the shared Entry Confirmed finish) ===== %>
-  <template x-if="props.step === 'entered'">
-    <div>
-      <%= render "studio/modals/blocks/card_header",
-            size: :lg, icon_color: 'primary',
-            title: "Good Luck", subtitle: "Entry Confirmed" %>
-      <%= render "studio/modals/blocks/solana_tx_link", tx_signature_key: "props.txSignature" %>
-      <button @click="$store.dsModals.close()" class="btn btn-primary btn-lg w-full">Contest Lobby &#x2694;&#xFE0F;</button>
-      <button @click="$store.dsModals.close()"
-              class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
-        Dismiss
-      </button>
-    </div>
-  </template>
-</div>

data/app/views/style/modals/_onchain_tx.html.erb

@@ -1,86 +0,0 @@
-<%#
-  On-chain transaction modal — design-system port of turf-monster's
-  modals/_onchain_tx, wired to the living style guide's page-scoped host. Reads
-  display state from $store.dsSolanaModal (a stateless proxy over $store.dsModals
-  that keeps the show/success/error API stable — the same façade shape the real
-  app ships). The proxy's methods push/pop the dsModals stack so this partial
-  renders when opened.
-
-  Three states — processing / success / error — cover the whole non-domain-
-  specific tx flow. The DS preview always uses the GENERIC success card
-  (studio/modals/blocks/_onchain_success); the rich contest-entry celebration
-  (seeds bar + level-up + lobby drain) is turf-specific and stays in the
-  consumer app.
-
-  Single root: content lives inside one <div> so Alpine's <template x-if> clones
-  it whole.
-%>
-<div x-data="{
-       init() {
-         this.$watch('$store.dsSolanaModal.state', function(val) {
-           if (val === 'success') {
-             setTimeout(function() {
-               try { if (window.fireSuccessConfetti) window.fireSuccessConfetti(); } catch (_) {}
-             }, 100);
-           }
-         });
-         // Demo auto-resolve (min-load convention): a processing modal opened with
-         // demoResolve holds its spinner at least MIN_LOAD_MS, then advances to
-         // success — or to error when demoError is set (the Processing specimen's
-         // success/error toggle). Guarded to the still-open, still-processing modal.
-         var entry = Alpine.store('dsModals').current();
-         if (!entry || entry.id !== 'onchain-tx' || !entry.props ||
-             entry.props.state !== 'processing' || !entry.props.demoResolve) return;
-         var minMs = entry.props.minDuration ||
-                     (window.StudioModals && window.StudioModals.MIN_LOAD_MS) || 1400;
-         window.StudioModals.holdAtLeast(minMs).then(function () {
-           var cur = Alpine.store('dsModals').current();
-           if (!cur || cur.id !== 'onchain-tx' || cur.props.state !== 'processing') return;
-           if (entry.props.demoError) {
-             Alpine.store('dsModals').advance({ state: 'error',
-               title: 'Could not confirm',
-               errorMessage: 'The transaction was rejected. Give it another try.' });
-           } else {
-             Alpine.store('dsModals').advance({ state: 'success',
-               txSignature: '5xTrDemoSignature1234567890abcXYZ',
-               successTitle: 'Mint complete',
-               successSubtitle: 'Your on-chain action confirmed.',
-               ctaLabel: 'View wallet', ctaHref: null });
-           }
-         });
-       }
-     }">
-
-  <%# === PROCESSING ====================================================== %>
-  <template x-if="$store.dsSolanaModal.state === 'processing'">
-    <%= render "studio/modals/blocks/card_header",
-          spinner: true,
-          title_key:    "$store.dsSolanaModal.title",
-          subtitle_key: "$store.dsSolanaModal.message" %>
-  </template>
-
-  <%# === SUCCESS (generic) =============================================== %>
-  <template x-if="$store.dsSolanaModal.state === 'success'">
-    <%= render "studio/modals/blocks/onchain_success",
-        tx_signature_key: "$store.dsSolanaModal.txSignature",
-        title_key:        "$store.dsSolanaModal.successTitle",
-        subtitle_key:     "$store.dsSolanaModal.successSubtitle",
-        cta_label_key:    "$store.dsSolanaModal.ctaLabel",
-        cta_href_key:     "$store.dsSolanaModal.ctaHref",
-        modal_store:      "dsModals" %>
-  </template>
-
-  <%# === ERROR =========================================================== %>
-  <template x-if="$store.dsSolanaModal.state === 'error'">
-    <div>
-      <%= render "studio/modals/blocks/card_header",
-            icon: :error,
-            title_key:    "$store.dsSolanaModal.title",
-            subtitle_key: "$store.dsSolanaModal.errorMessage" %>
-      <button @click="$store.dsSolanaModal.close()"
-              class="block mx-auto mt-3 text-sm text-secondary hover:text-heading transition">
-        Close
-      </button>
-    </div>
-  </template>
-</div>