From e4d577e96f0c3b604ba4975ed3bdb1570d8aed35 Mon Sep 17 00:00:00 2001
From: Justin Holmes <justin@justinholmes.com>
Date: Sat, 11 Jul 2026 19:24:15 +0000
Subject: [PATCH] Rewrite claim-ticket-stub as vanilla form; fix printed-stub
 typos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Claim page:
- Strip wagmi/viem, @wagmi/core, @web3modal, viem imports and the
  entire <script type="module"> block. The gasless architecture means
  the claim page never talks to a wallet directly — it just POSTs
  {tokenId, secret, recipient} to the delivery-kid relayer, which
  handles the signed transaction on Optimism from its hot wallet.
- Vanilla script: auto-populates the secret from the ?secret= URL
  param (same as before), submits to
  https://delivery-kid.cryptograss.live/claim-ticket-stub, renders
  loading/success/error alerts, and on success shows the transaction
  hash with an Optimistic Etherscan link.
- ENS resolution moves server-side; the page just sends the raw
  address-or-ENS string and displays what the backend resolved.
- SetStone upsell block preserved as-is. It's driven by
  strike_set_stones.js which has its own wagmi config, so the inline
  module strip doesn't affect it.

Printed-stub typos:
- single-ticket-stub.njk: the "Click here to claim / move this ticket
  stub" link was hardcoded to /blox-office/claim/blah blah — never
  updated from placeholder. Now points at the real per-token claim
  URL with the secret pre-populated.
- ticketstub-front.njk and ticketstub-back.njk: the token-range text
  under the tokenId was literal "{100-149}" and "{50-99}" — literal
  strings in the template, printed onto real paper stubs at every
  show since Prague. Now renders {{ show.firstTokenId }}-{{
  show.lastTokenId }} from the actual show data.
- setstone_utils.js: adds firstTokenId and lastTokenId to the show
  object during stub generation so the templates have real values to
  render.

The delivery-kid endpoint at /claim-ticket-stub is task #13 — not yet
implemented. Deploying this page against the current backend will show
a network error alert until the endpoint lands.
---
 src/build_logic/setstone_utils.js             |   2 +
 .../templates/pages/claim-ticket-stub.njk     | 528 +++++++-----------
 .../templates/partials/ticketstub-back.njk    |   2 +-
 .../templates/partials/ticketstub-front.njk   |   2 +-
 .../templates/reuse/single-ticket-stub.njk    |   2 +-
 5 files changed, 209 insertions(+), 327 deletions(-)

diff --git a/src/build_logic/setstone_utils.js b/src/build_logic/setstone_utils.js
index 5602f851..2ebf7248 100644
--- a/src/build_logic/setstone_utils.js
+++ b/src/build_logic/setstone_utils.js
@@ -46,6 +46,8 @@ export function generateSetStonePages(shows, outputDir) {
                 console.log(`Creating ${fakeTicketStubCount} fake ticket stubs for show ${showId} (tokens ${startTokenId}-${startTokenId + fakeTicketStubCount - 1})`);
                 show.ticketStubs = [];
                 show.ticketStubCount = fakeTicketStubCount; // Update count for consistency
+                show.firstTokenId = startTokenId;
+                show.lastTokenId = startTokenId + fakeTicketStubCount - 1;
                 for (let i = 0; i < fakeTicketStubCount; i++) {
                     show.ticketStubs.push({
                         tokenId: startTokenId + i,
diff --git a/src/sites/cryptograss.live/templates/pages/claim-ticket-stub.njk b/src/sites/cryptograss.live/templates/pages/claim-ticket-stub.njk
index 0c07e21f..fbb2954d 100644
--- a/src/sites/cryptograss.live/templates/pages/claim-ticket-stub.njk
+++ b/src/sites/cryptograss.live/templates/pages/claim-ticket-stub.njk
@@ -7,7 +7,7 @@
     <div class="row">
         <div class="col-12">
             <h1 class="pixel-font mb-4">Claim Ticket Stub #{{ tokenId }}</h1>
-            
+
             <!-- Ticket Stub and Show Info -->
             {% if show and ticketStub %}
             <div class="row mb-4 align-items-center">
@@ -26,8 +26,8 @@
                             <p class="mb-0 text-muted">Block Height: {{ show.blockheight.toLocaleString() }}</p>
                             {% if show.poster %}
                                 <div class="mt-3">
-                                    <img src="{{ get_image(show.poster, 'thumbnail') }}" 
-                                         alt="Show poster" 
+                                    <img src="{{ get_image(show.poster, 'thumbnail') }}"
+                                         alt="Show poster"
                                          class="img-fluid rounded shadow-sm"
                                          style="max-height: 120px; object-fit: contain;">
                                 </div>
@@ -37,352 +37,232 @@
                 </div>
             </div>
             {% endif %}
-            
-            {% if error %}
-                <div class="alert alert-danger" role="alert">
-                    <h4 class="alert-heading">Error!</h4>
-                    <p>{{ error }}</p>
-                </div>
-            {% endif %}
 
-            {% if success %}
-                <div class="alert alert-success" role="alert">
-                    <h4 class="alert-heading">Success!</h4>
-                    <p>Your ticket stub has been claimed successfully!</p>
-                    <p>Transaction hash: <code>{{ transactionHash }}</code></p>
-                    <p>You can view your NFT on <a href="https://arbiscan.io/token/{{ contractAddress }}?a={{ tokenId }}" target="_blank">Arbiscan</a></p>
-                </div>
-            {% endif %}
+            <div id="claim-alert-slot"></div>
 
-            {% if not success and not error %}
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">Ready to Claim</h5>
-                        <p class="card-text">
-                            You're about to claim ticket stub #{{ tokenId }} using the secret from your physical ticket.
-                        </p>
-                        
-                        {% if secret %}
-                            <p class="text-muted">
-                                <small>Secret detected from URL: {{ secret | truncate(8) }}...</small>
-                            </p>
-                        {% endif %}
-
-                        <form id="claimForm">
-                            <div class="mb-3">
-                                <label for="walletAddress" class="form-label">Your Wallet Address or ENS Name</label>
-                                <input type="text" class="form-control" id="walletAddress" placeholder="0x... or yourname.eth" required>
-                                <div class="form-text">The address where you want to receive your ticket stub NFT. ENS names are supported.</div>
-                                <div id="ensResolution" class="text-muted small mt-1" style="display: none;"></div>
-                            </div>
-                            
-                            <div class="mb-3">
-                                <label for="secretInput" class="form-label">Secret from Ticket</label>
-                                <input type="text" class="form-control" id="secretInput" placeholder="Enter the secret from your physical ticket" required>
-                                <div class="form-text">This should be the text or QR code content from your ticket stub</div>
-                                <div id="secretFromUrl" class="text-success small mt-1" style="display: none;"></div>
-                            </div>
-
-                            <button type="submit" class="btn btn-primary">
-                                Connect Wallet & Claim Ticket Stub
-                            </button>
-                        </form>
-                    </div>
-                </div>
+            <div id="claim-form-card" class="card">
+                <div class="card-body">
+                    <h5 class="card-title">Ready to Claim</h5>
+                    <p class="card-text">
+                        You're about to claim ticket stub #{{ tokenId }} using the secret from your physical ticket.
+                    </p>
+
+                    <form id="claimForm">
+                        <div class="mb-3">
+                            <label for="walletAddress" class="form-label">Your Wallet Address or ENS Name</label>
+                            <input type="text" class="form-control" id="walletAddress" placeholder="0x... or yourname.eth" required autocomplete="off">
+                            <div class="form-text">The address where you want to receive your ticket stub NFT. ENS names are supported.</div>
+                        </div>
+
+                        <div class="mb-3">
+                            <label for="secretInput" class="form-label">Secret from Ticket</label>
+                            <input type="text" class="form-control" id="secretInput" placeholder="Enter the secret from your physical ticket" required autocomplete="off">
+                            <div class="form-text">This should be the text or QR code content from your ticket stub.</div>
+                            <div id="secretFromUrl" class="text-success small mt-1" style="display: none;"></div>
+                        </div>
 
-                <div class="mt-4 bg-white p-3 rounded shadow-sm">
-                    <h5>What happens when I claim?</h5>
-                    <ul>
-                        <li>We'll verify your secret against the ticket stub contract</li>
-                        <li>If valid, the NFT will be minted to your wallet address</li>
-                        <li>You'll own the digital representation of your physical ticket</li>
-                        <li>The secret can only be used once</li>
-                    </ul>
+                        <button type="submit" id="claimSubmit" class="btn btn-primary">
+                            Claim Ticket Stub
+                        </button>
+                    </form>
                 </div>
+            </div>
 
-                {% if show.ticketStubs and show.ticketStubs.length > 0 %}
-                <div class="mt-5">
-                    <div class="row">
-                        <div class="col-3"></div>
-                        <div id="donationModal" class="col-md-6 semi-transparent-bg p-4 rounded shadow">
-                            <span class="pixel-font" style="color: white;">
-                                <h2>🎵 Also Available: Strike Set Stone for This Show</h2>
-                            </span>
-                            <p class="text-white">Commemorate your experience with a unique set stone NFT. Select three colors from the original NES palette.</p>
-                            
-                            <div id="setStoneColorPicker" style="width: 100%; align-items: left; color: white;">
-                                <select id="colorDropdown1" class="form-select pixel-font"></select>
-                                <select id="colorDropdown2" class="form-select pixel-font"></select>
-                                <select id="colorDropdown3" class="form-select pixel-font"></select>
-                                <button id="randomizeColors" class="btn btn-primary mt-2 pixel-font"
-                                    onclick="randomizeColors()">
-                                Randomize
-                            </button>
-                            </div>
-
-                            <div id="stoneRenderArea"></div>
-
-                            <div id="crystalizationMessage">
-                                <h4 class="pixel-font" style="color: white;">Crystalization message:</h4>
-                                <input id="crystalizationMessageText" type="text" class="form-control"
-                                   placeholder="Enter personal message">
-                            </div>
-
-                            <select id="setPicker" class="form-select pixel-font mt-2">
-                                {% for set_number, set in show.sets %}
-                                    <option value="{{set_number}}">Set #{{loop.index}}</option>
-                                {% endfor %}
-                            </select>
-
-                            <h4 data-tippy-content="Select a song from the setlist to make it your favorite song for this set stone."
-                            class="pixel-font mt-2" style="color: white;">Song of Note:</h4>
-                            <select id="favoriteSongPicker" class="form-select pixel-font mt-2"></select>
-
-                            <h4 class="pixel-font text-white">
-                                <span>Minimum price:</span>
-                                <span id="stonePrice"></span>
-                            </h4>
-                            <div class="input-group mt-2" style="width: 100%">
-                                <input id="amount" class="form-control">
-                                <span class="input-group-text">ETH</span>
-                            </div>
-
-                            <h3 class="pixel-font text-white">Rabbit</h3>
-                            <p class="text-white">You need a secret "rabbit", distributed at the show, to buy a set stone. Each rabbit is valid to purchase one stone.</p>
-                            <input id="rabbit" type="text" class="form-control"/>
-                            <button id="verifyRabbit" class="btn btn-primary mt-2">Verify</button>
-
-                            <div id="rabbitHashIconContainer" style="display: flex; flex-direction: row; align-items: center;">
-                                <div id="rabbitHashIcon"></div>
-                                <span id="rabbithash"></span>
-                            </div>
-
-                            <p id="verifyResult" class="text-light"></p>
-                            <p id="invalidRabbitErrorMessage" style="display: none; color: red;">Invalid secret rabbit</p>
-
-                            <div class="mt-5" style="display: flex; justify-content: space-between; width: 100%">
-                                <button id="mintStone" class="btn btn-primary pixel-font"
-                                        style="padding: 10px; background-color: hsl(345, 100%, 51%); border-color: hsl(345, 100%, 51%);"
-                                        onclick="mintStone()">Strike SetStone
-                                </button>
-                                <w3m-button></w3m-button>
-                            </div>
+            <div class="mt-4 bg-white p-3 rounded shadow-sm">
+                <h5>What happens when I claim?</h5>
+                <ul>
+                    <li>We verify your secret against the ticket stub contract on Optimism.</li>
+                    <li>If valid, we submit the mint transaction on your behalf — no wallet or ETH required on your end.</li>
+                    <li>The NFT lands in the address you specified above.</li>
+                    <li>The secret can only be used once.</li>
+                </ul>
+            </div>
+
+            {% if show.ticketStubs and show.ticketStubs.length > 0 %}
+            <div class="mt-5">
+                <div class="row">
+                    <div class="col-3"></div>
+                    <div id="donationModal" class="col-md-6 semi-transparent-bg p-4 rounded shadow">
+                        <span class="pixel-font" style="color: white;">
+                            <h2>🎵 Also Available: Strike Set Stone for This Show</h2>
+                        </span>
+                        <p class="text-white">Commemorate your experience with a unique set stone NFT. Select three colors from the original NES palette.</p>
+
+                        <div id="setStoneColorPicker" style="width: 100%; align-items: left; color: white;">
+                            <select id="colorDropdown1" class="form-select pixel-font"></select>
+                            <select id="colorDropdown2" class="form-select pixel-font"></select>
+                            <select id="colorDropdown3" class="form-select pixel-font"></select>
+                            <button id="randomizeColors" class="btn btn-primary mt-2 pixel-font"
+                                onclick="randomizeColors()">
+                            Randomize
+                        </button>
+                        </div>
+
+                        <div id="stoneRenderArea"></div>
 
+                        <div id="crystalizationMessage">
+                            <h4 class="pixel-font" style="color: white;">Crystalization message:</h4>
+                            <input id="crystalizationMessageText" type="text" class="form-control"
+                               placeholder="Enter personal message">
                         </div>
-                        <div class="col-3"></div>
+
+                        <select id="setPicker" class="form-select pixel-font mt-2">
+                            {% for set_number, set in show.sets %}
+                                <option value="{{set_number}}">Set #{{loop.index}}</option>
+                            {% endfor %}
+                        </select>
+
+                        <h4 data-tippy-content="Select a song from the setlist to make it your favorite song for this set stone."
+                        class="pixel-font mt-2" style="color: white;">Song of Note:</h4>
+                        <select id="favoriteSongPicker" class="form-select pixel-font mt-2"></select>
+
+                        <h4 class="pixel-font text-white">
+                            <span>Minimum price:</span>
+                            <span id="stonePrice"></span>
+                        </h4>
+                        <div class="input-group mt-2" style="width: 100%">
+                            <input id="amount" class="form-control">
+                            <span class="input-group-text">ETH</span>
+                        </div>
+
+                        <h3 class="pixel-font text-white">Rabbit</h3>
+                        <p class="text-white">You need a secret "rabbit", distributed at the show, to buy a set stone. Each rabbit is valid to purchase one stone.</p>
+                        <input id="rabbit" type="text" class="form-control"/>
+                        <button id="verifyRabbit" class="btn btn-primary mt-2">Verify</button>
+
+                        <div id="rabbitHashIconContainer" style="display: flex; flex-direction: row; align-items: center;">
+                            <div id="rabbitHashIcon"></div>
+                            <span id="rabbithash"></span>
+                        </div>
+
+                        <p id="verifyResult" class="text-light"></p>
+                        <p id="invalidRabbitErrorMessage" style="display: none; color: red;">Invalid secret rabbit</p>
+
+                        <div class="mt-5" style="display: flex; justify-content: space-between; width: 100%">
+                            <button id="mintStone" class="btn btn-primary pixel-font"
+                                    style="padding: 10px; background-color: hsl(345, 100%, 51%); border-color: hsl(345, 100%, 51%);"
+                                    onclick="mintStone()">Strike SetStone
+                            </button>
+                            <w3m-button></w3m-button>
+                        </div>
+
                     </div>
+                    <div class="col-3"></div>
                 </div>
-                {% endif %}
+            </div>
             {% endif %}
         </div>
     </div>
 </div>
 
 <script>
-    console.log("Script is loading...");
-    
-    // Simple secret population function
-    function populateSecretFromUrl() {
-        const urlParams = new URLSearchParams(window.location.search);
-        const secretParam = urlParams.get('secret');
-        console.log('Looking for secret in URL:', secretParam);
-        
-        if (secretParam) {
-            const secretInput = document.getElementById('secretInput');
-            if (secretInput) {
-                secretInput.value = secretParam;
-                console.log('Secret populated:', secretParam.substring(0, 8) + '...');
-                
-                const secretFromUrl = document.getElementById('secretFromUrl');
-                if (secretFromUrl) {
-                    secretFromUrl.style.display = 'block';
-                    secretFromUrl.textContent = `Secret detected from URL: ${secretParam.substring(0, 8)}...`;
-                }
-            }
-        }
+(function () {
+    const TOKEN_ID = {{ tokenId }};
+    const CONTRACT_ADDRESS = '{{ contractAddress }}';
+    const RELAYER_URL = 'https://delivery-kid.cryptograss.live/claim-ticket-stub';
+    const EXPLORER_TX_BASE = 'https://optimistic.etherscan.io/tx/';
+    const EXPLORER_TOKEN_BASE = 'https://optimistic.etherscan.io/token/';
+
+    const alertSlot = document.getElementById('claim-alert-slot');
+    const formCard = document.getElementById('claim-form-card');
+    const form = document.getElementById('claimForm');
+    const submitBtn = document.getElementById('claimSubmit');
+    const walletInput = document.getElementById('walletAddress');
+    const secretInput = document.getElementById('secretInput');
+    const secretFromUrlNote = document.getElementById('secretFromUrl');
+
+    // Populate the secret from the ?secret= URL param (from the QR code).
+    const params = new URLSearchParams(window.location.search);
+    const secretParam = params.get('secret');
+    if (secretParam) {
+        secretInput.value = secretParam;
+        secretFromUrlNote.style.display = 'block';
+        secretFromUrlNote.textContent =
+            'Secret detected from URL: ' + secretParam.substring(0, 8) + '…';
     }
-    
-    // Run when page loads
-    document.addEventListener('DOMContentLoaded', populateSecretFromUrl);
-    
-    // Also try immediately in case DOM is already ready
-    if (document.readyState !== 'loading') {
-        populateSecretFromUrl();
-    }
-</script>
-
-<!-- Placeholder for future blockchain functionality -->
-<script type="module">
-    import { createConfig, http, writeContract, waitForTransactionReceipt, getEnsAddress } from '@wagmi/core';
-    import { arbitrum, mainnet } from '@wagmi/core/chains';
-    import { keccak256, toBytes, isAddress } from 'viem';
-
-    // Contract configuration
-    const TICKET_STUB_CONTRACT_ADDRESS = '{{ contractAddress }}';
-    const TICKET_STUB_ABI = JSON.parse('{{ contractABI | safe }}');
-
-    // Public RPCs - no API key needed for read operations
-    // ENS resolution uses mainnet, contract writes go through user's wallet
-    const config = createConfig({
-        chains: [arbitrum, mainnet],
-        transports: {
-            [arbitrum.id]: http('https://arb1.arbitrum.io/rpc'),
-            [mainnet.id]: http('https://cloudflare-eth.com'),
-        },
-    });
 
-    // Check for secret in URL parameters
-    function checkUrlParams() {
-        console.log('checkUrlParams called, current URL:', window.location.href);
-        const urlParams = new URLSearchParams(window.location.search);
-        const secretParam = urlParams.get('secret');
-        console.log('Secret parameter from URL:', secretParam);
-        
-        if (secretParam) {
-            const secretInput = document.getElementById('secretInput');
-            const secretFromUrl = document.getElementById('secretFromUrl');
-            
-            console.log('Found secret input element:', !!secretInput);
-            console.log('Found secretFromUrl element:', !!secretFromUrl);
-            
-            if (secretInput && secretFromUrl) {
-                secretInput.value = secretParam;
-                secretFromUrl.style.display = 'block';
-                secretFromUrl.textContent = `Secret detected from URL: ${secretParam.substring(0, 8)}...`;
-                console.log('Secret populated successfully:', secretParam.substring(0, 8) + '...');
-            } else {
-                console.log('Missing DOM elements for secret population');
-            }
-        } else {
-            console.log('No secret parameter found in URL');
-        }
+    function renderAlert(kind, headline, bodyHtml) {
+        alertSlot.innerHTML =
+            '<div class="alert alert-' + kind + '" role="alert">' +
+            '<h4 class="alert-heading">' + headline + '</h4>' +
+            bodyHtml +
+            '</div>';
     }
 
-    // ENS resolution for address field
-    async function resolveENS(ensName) {
-        try {
-            if (ensName.endsWith('.eth')) {
-                const address = await getEnsAddress(config, {
-                    name: ensName,
-                    chainId: mainnet.id
-                });
-                return address;
-            }
-        } catch (error) {
-            console.error('ENS resolution error:', error);
-            return null;
-        }
-        return null;
-    }
-
-    // Address field validation and ENS resolution
-    document.getElementById('walletAddress').addEventListener('input', async function(e) {
-        const value = e.target.value.trim();
-        const ensDiv = document.getElementById('ensResolution');
-        
-        if (value.endsWith('.eth')) {
-            ensDiv.style.display = 'block';
-            ensDiv.textContent = 'Resolving ENS name...';
-            ensDiv.className = 'text-muted small mt-1';
-            
-            const resolvedAddress = await resolveENS(value);
-            if (resolvedAddress) {
-                ensDiv.textContent = `Resolves to: ${resolvedAddress}`;
-                ensDiv.className = 'text-success small mt-1';
-            } else {
-                ensDiv.textContent = 'ENS name not found';
-                ensDiv.className = 'text-danger small mt-1';
-            }
-        } else if (isAddress(value)) {
-            ensDiv.style.display = 'block';
-            ensDiv.textContent = 'Valid Ethereum address';
-            ensDiv.className = 'text-success small mt-1';
-        } else if (value.length > 0) {
-            ensDiv.style.display = 'block';
-            ensDiv.textContent = 'Invalid address format';
-            ensDiv.className = 'text-danger small mt-1';
-        } else {
-            ensDiv.style.display = 'none';
-        }
-    });
-
-    document.getElementById('claimForm').addEventListener('submit', async function(e) {
+    form.addEventListener('submit', async function (e) {
         e.preventDefault();
-        
-        let walletAddress = document.getElementById('walletAddress').value.trim();
-        const secret = document.getElementById('secretInput').value;
-        
-        if (!walletAddress || !secret) {
-            alert('Please fill in all fields');
-            return;
-        }
 
-        // Resolve ENS if needed
-        if (walletAddress.endsWith('.eth')) {
-            const resolvedAddress = await resolveENS(walletAddress);
-            if (!resolvedAddress) {
-                alert('Could not resolve ENS name. Please use a valid Ethereum address.');
-                return;
-            }
-            walletAddress = resolvedAddress;
-        }
+        const recipient = walletInput.value.trim();
+        const secret = secretInput.value.trim();
 
-        // Validate address
-        if (!isAddress(walletAddress)) {
-            alert('Please enter a valid Ethereum address or ENS name');
+        if (!recipient || !secret) {
+            renderAlert('warning', 'Missing info', '<p>Please fill in both the address and secret fields.</p>');
             return;
         }
 
+        submitBtn.disabled = true;
+        const originalLabel = submitBtn.textContent;
+        submitBtn.textContent = 'Submitting…';
+        renderAlert('info',
+            'Working on it',
+            '<p>Verifying your secret and submitting the claim transaction. This usually takes a few seconds.</p>');
+
         try {
-            // Convert secret to bytes32
-            const secretBytes = keccak256(toBytes(secret));
-            
-            // Show loading state
-            const submitBtn = e.target.querySelector('button[type="submit"]');
-            const originalText = submitBtn.textContent;
-            submitBtn.textContent = 'Claiming...';
-            submitBtn.disabled = true;
-
-            // Call the contract
-            const hash = await writeContract(config, {
-                abi: TICKET_STUB_ABI,
-                address: TICKET_STUB_CONTRACT_ADDRESS,
-                functionName: 'claimTicketStub',
-                args: [secretBytes],
-                account: walletAddress,
+            const response = await fetch(RELAYER_URL, {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    tokenId: TOKEN_ID,
+                    secret: secret,
+                    recipient: recipient
+                })
             });
 
-            // Wait for transaction confirmation
-            const receipt = await waitForTransactionReceipt(config, {
-                hash,
-            });
+            let data = {};
+            try {
+                data = await response.json();
+            } catch (_) {
+                // Non-JSON response — surface the raw status.
+                data = {error: 'Unexpected response from relayer (HTTP ' + response.status + ')'};
+            }
+
+            if (!response.ok) {
+                const msg = data.error || 'Claim failed (HTTP ' + response.status + ')';
+                renderAlert('danger', 'Something went wrong', '<p>' + msg + '</p>');
+                submitBtn.disabled = false;
+                submitBtn.textContent = originalLabel;
+                return;
+            }
 
-            // Redirect to success page
-            window.location.href = `?success=true&hash=${hash}`;
+            const txHash = data.transactionHash || data.txHash;
+            const resolvedAddress = data.resolvedAddress || recipient;
 
-        } catch (error) {
-            console.error('Error claiming ticket stub:', error);
-            alert('Error claiming ticket stub: ' + error.message);
-            
-            // Reset button
-            const submitBtn = e.target.querySelector('button[type="submit"]');
-            submitBtn.textContent = originalText;
+            let successBody = '<p>Your ticket stub has been claimed. It will show up in the receiving wallet once the transaction confirms on Optimism.</p>';
+            if (resolvedAddress && resolvedAddress !== recipient) {
+                successBody += '<p><small>ENS resolved to: <code>' + resolvedAddress + '</code></small></p>';
+            }
+            if (txHash) {
+                successBody +=
+                    '<p>Transaction: <a href="' + EXPLORER_TX_BASE + txHash + '" target="_blank" rel="noopener"><code>' + txHash + '</code></a></p>';
+            }
+            if (CONTRACT_ADDRESS) {
+                successBody +=
+                    '<p><small>Ticket stub contract: <a href="' + EXPLORER_TOKEN_BASE + CONTRACT_ADDRESS + '?a=' + TOKEN_ID + '" target="_blank" rel="noopener"><code>' + CONTRACT_ADDRESS + '</code></a></small></p>';
+            }
+            renderAlert('success', 'Claimed!', successBody);
+
+            // Hide the form once we've succeeded so the SetStone upsell becomes
+            // the natural next thing to look at.
+            formCard.style.display = 'none';
+        } catch (err) {
+            renderAlert('danger', 'Network error',
+                '<p>' + (err && err.message ? err.message : 'Could not reach the claim relayer.') + '</p>' +
+                '<p><small>You can also claim directly from your own wallet by calling <code>claimTicketStub</code> on the contract with your secret.</small></p>');
             submitBtn.disabled = false;
+            submitBtn.textContent = originalLabel;
         }
     });
-
-    // Initialize page when DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', function() {
-            checkUrlParams();
-            // Try again after a short delay in case elements aren't ready
-            setTimeout(checkUrlParams, 100);
-        });
-    } else {
-        checkUrlParams();
-        // Try again after a short delay in case elements aren't ready
-        setTimeout(checkUrlParams, 100);
-    }
+})();
 </script>
 
 <style>
@@ -390,13 +270,13 @@
         max-width: 100%;
         overflow: hidden;
     }
-    
+
     .responsive-ticket-stub > div {
         transform: scale(0.8);
         transform-origin: top left;
         width: 125%;
     }
-    
+
     /* Mobile phones */
     @media (max-width: 576px) {
         .responsive-ticket-stub > div {
@@ -404,7 +284,7 @@
             width: 167%;
         }
     }
-    
+
     /* Small tablets */
     @media (min-width: 577px) and (max-width: 768px) {
         .responsive-ticket-stub > div {
@@ -412,7 +292,7 @@
             width: 143%;
         }
     }
-    
+
     /* Medium tablets and up */
     @media (min-width: 769px) and (max-width: 991px) {
         .responsive-ticket-stub > div {
@@ -420,7 +300,7 @@
             width: 133%;
         }
     }
-    
+
     /* Desktop */
     @media (min-width: 992px) {
         .responsive-ticket-stub > div {
@@ -431,13 +311,13 @@
     .ticket-stub-number {
         position:absolute;
     }
-    
+
     /* Set stone interface styling */
     .semi-transparent-bg {
         background: linear-gradient(90deg, rgba(64, 70, 84, 0.7) 0%, rgba(58, 58, 62, .84) 100%);
         border-radius: 15px;
     }
-    
+
     .pixel-font {
         font-family: 'll-pixel', monospace;
     }
@@ -445,4 +325,4 @@
 
 <!-- Include set stone functionality -->
 <script src="/js/bazaar/strike_set_stones.js"></script>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/src/sites/cryptograss.live/templates/partials/ticketstub-back.njk b/src/sites/cryptograss.live/templates/partials/ticketstub-back.njk
index f582c2f0..417597de 100644
--- a/src/sites/cryptograss.live/templates/partials/ticketstub-back.njk
+++ b/src/sites/cryptograss.live/templates/partials/ticketstub-back.njk
@@ -22,7 +22,7 @@
             <div class="rabbit-hash">
                 {{ ticketStub.rabbitHash }}
             </div>
-            {{ ticketStub.tokenId }} / {50-99}
+            {{ ticketStub.tokenId }} / {{ show.firstTokenId }}-{{ show.lastTokenId }}
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/sites/cryptograss.live/templates/partials/ticketstub-front.njk b/src/sites/cryptograss.live/templates/partials/ticketstub-front.njk
index 51693a69..53ef8117 100644
--- a/src/sites/cryptograss.live/templates/partials/ticketstub-front.njk
+++ b/src/sites/cryptograss.live/templates/partials/ticketstub-front.njk
@@ -25,7 +25,7 @@
                 <p class="small">Rabbit hash:</p>
                 {{ ticketStub.rabbitHash }}
             </div>
-            {{ ticketStub.tokenId }} / {100-149}
+            {{ ticketStub.tokenId }} / {{ show.firstTokenId }}-{{ show.lastTokenId }}
         </div>
     </div>
 
diff --git a/src/sites/cryptograss.live/templates/reuse/single-ticket-stub.njk b/src/sites/cryptograss.live/templates/reuse/single-ticket-stub.njk
index 92a90d06..c3eab5db 100644
--- a/src/sites/cryptograss.live/templates/reuse/single-ticket-stub.njk
+++ b/src/sites/cryptograss.live/templates/reuse/single-ticket-stub.njk
@@ -4,7 +4,7 @@
 </div>
 <div class="row">
     <div class="claim-link">
-        <a href="/blox-office/claim/blah blah">
+        <a href="/blox-office/ticketstubs/claim/{{ ticketStub.tokenId }}.html?secret={{ ticketStub.secret }}">
             Click here to claim / move this ticket stub
         </a>
     </div>