solana-age-verify-sdk 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/ui/spinner.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generates a premium gradient spinner HTML string for use in SDK UI overlays
+ * Matches Solana brand colors (purple to cyan gradient)
+ */
+export declare function createSpinnerHTML(): string;

package/dist/ui/spinner.js

@@ -0,0 +1,36 @@
+/**
+ * Generates a premium gradient spinner HTML string for use in SDK UI overlays
+ * Matches Solana brand colors (purple to cyan gradient)
+ */
+export function createSpinnerHTML() {
+    return `
+        <div style="display: flex; align-items: center; justify-content: center; padding: 20px;">
+            <div style="
+                width: 64px;
+                height: 64px;
+                border: 4px solid transparent;
+                border-radius: 50%;
+                background: linear-gradient(#0f172a, #0f172a) padding-box, linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #14b8a6 100%) border-box;
+                animation: spin 0.8s linear infinite;
+                position: relative;
+            " aria-label="Loading">
+                <div style="
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 48px;
+                    height: 48px;
+                    border-radius: 50%;
+                    background: #0f172a;
+                "></div>
+            </div>
+        </div>
+        <style>
+            @keyframes spin {
+                from { transform: rotate(0deg); }
+                to { transform: rotate(360deg); }
+            }
+        </style>
+    `;
+}

package/dist/verify.js

@@ -1,9 +1,12 @@
+// The public treasury address is provided via the environment variable VITE_TREASURY_ADDRESS.
+// This address is used by the SDK to direct fee payments to the platform's treasury.
 import { DEFAULT_CONFIG } from './types';
 import { Transaction, SystemProgram, LAMPORTS_PER_SOL, PublicKey, TransactionInstruction, ComputeBudgetProgram } from '@solana/web3.js';
 import { Camera } from './camera';
 import { computeFaceHash, generateSalt, toHex } from './hashing/facehash';
 import { generateChallengeSequence } from './liveness/challenges';
 import { getPlatformPublicKey, getProtocolFee } from './security';
+import { createSpinnerHTML } from './ui/spinner';
 // Lazy getter to avoid top-level PublicKey construction before polyfills load
 let _memoProgramId = null;
 function getMemoProgramId() {
@@ -205,7 +208,7 @@ export async function verifyHost18Plus(options) {
         // Load Models
         if (options.onChallenge)
             options.onChallenge('Loading models...');
-        // Show loading screen
+        // Show loading screen with premium spinner
         if (options.uiMountEl) {
             options.uiMountEl.innerHTML = `
                 <div style="position: relative; height: 100%; width: 100%; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.85);">
@@ -213,15 +216,11 @@ export async function verifyHost18Plus(options) {
                         <div style="font-size: 24px; font-weight: 600; background: linear-gradient(to right, #e2e8f0, #94a3b8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 32px; letter-spacing: -0.01em;">
                             Initializing Neural Engine...
                         </div>
-                        <div style="width: 240px; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; margin: 0 auto; position: relative;">
-                            <div style="position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(90deg, transparent, #3b82f6, transparent); animation: shimmer 1.5s infinite;">
-                            </div>
-                        </div>
+                        ${createSpinnerHTML()}
                     </div>
                 </div>
                 <style>
                     @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
-                    @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
                 </style>
             `;
         }
@@ -655,15 +654,12 @@ export async function verifyHost18Plus(options) {
                                 To record your verification on-chain, a minimal protocol fee of <b>${protocolFeeSol} SOL</b> is required.<br>
                                 Please approve the transaction in your wallet.
                              </div>
-                             <div style="display: flex; align-items: center; justify-content: center; gap: 12px; color: #60a5fa; font-weight: 600;">
-                                <div style="width: 16px; height: 16px; border: 2px solid #60a5fa; border-top-color: transparent; border-radius: 50%; animation: spin 1s linear infinite;"></div>
+                             ${createSpinnerHTML()}
+                             <div style="color: #60a5fa; font-weight: 600; margin-top: 16px;">
                                 Waiting for signature...
                              </div>
                         </div>
                     </div>
-                    <style>
-                        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-                    </style>
                 `;
             }
             try {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "solana-age-verify-sdk",
-    "version": "2.0.0-beta.4",
+    "version": "2.0.0-beta.5",
     "type": "module",
     "description": "Solana Age Verify is a premium, client-side SDK for privacy-preserving age verification and liveness detection. It generates a deterministic Face Hash linked to a wallet without storing facial data.",
     "license": "MIT",