add processing transaction spinner (#27)

also fixes game character not appearing

Author: alanthai

client/src/pages/Game.tsx

@@ -186,7 +186,7 @@ export default function Game() {
       event.preventDefault();
       if (!gameStateRef.current.isPlaying && !gameStateRef.current.isGameOver) {
         startGame();
-        gameLoop();
+        // Game loop is already running, no need to call it again
       } else if (!gameStateRef.current.isGameOver) {
         jump();
       }
@@ -209,6 +209,9 @@ export default function Game() {
           drawStartText();
         }
         drawDino(DINO_X, GROUND_Y);
+
+        // Continue the animation loop even when not playing to update the character image
+        animationId = requestAnimationFrame(gameLoop);
         return;
       }
 
@@ -270,12 +273,15 @@ export default function Game() {
       }
     }
 
-    // Initial draw
+    // Initial draw and start animation loop
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     drawGround();
     drawDino(DINO_X, GROUND_Y);
     drawStartText();
 
+    // Start the animation loop immediately
+    gameLoop();
+
     // Cleanup function
     return () => {
       canvas.removeEventListener("mousedown", handleClick);

client/src/pages/MicroTransactionStore.css

@@ -452,3 +452,47 @@
       0 15px 25px var(--color-shadow-medium);
   }
 }
+
+/* Processing Spinner Styles */
+.processing-spinner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  color: var(--color-text);
+  font-family: "Cinzel", serif;
+}
+
+.spinner {
+  width: 60px;
+  height: 60px;
+  border: 4px solid rgba(255, 255, 255, 0.2);
+  border-top: 4px solid var(--color-gold);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
+  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
+}
+
+.processing-spinner p {
+  font-size: 1.2rem;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  letter-spacing: 1px;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

client/src/pages/MicroTransactionStore.tsx

@@ -15,6 +15,7 @@ import {
 
 export function MicroTransactionStore() {
   const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
   const { data: gemPackages, isLoading } = useGetAllProducts();
   const { mutate: validateUser } = useValidateUser();
 
@@ -35,19 +36,25 @@ export function MicroTransactionStore() {
     console.log("Payment link retrieved:", paymentLink);
     const paymentLinkSession = await BoltSDK.gaming.openCheckout(paymentLink);
 
+    setIsProcessing(true);
+
     if (!paymentLinkSession) {
       console.error("Failed to open payment link session");
+      setIsProcessing(false);
       return;
     } else if (paymentLinkSession.status === "abandoned") {
       console.log("Purchase cancelled by user:", pkg.name);
+      setIsProcessing(false);
     } else {
       console.log("Purchase pending for:", pkg.name);
       validateUser(paymentLinkSession.paymentLinkId, {
         onSuccess: (data) => {
+          setIsProcessing(false);
           toast.success(`Successfully purchased ${pkg.gemAmount} gems!`);
           console.log("User validated:", data);
         },
         onError: (error) => {
+          setIsProcessing(false);
           toast.error(`Failed to validate purchase: ${error.message}`);
           console.error("Validation error:", error);
         },
@@ -73,6 +80,13 @@ export function MicroTransactionStore() {
             />
           ))}
         </div>
+
+        {isProcessing && (
+          <div className="processing-spinner">
+            <div className="spinner"></div>
+            <p>Processing your purchase...</p>
+          </div>
+        )}
       </div>
       <div className="coin-store-footer">
         <p>

server/package-lock.json

@@ -12,13 +12,14 @@
   "scripts": {
     "start:staging": "tsx --env-file=.env.staging src/index.ts",
     "seed": "tsx --env-file=.env.local src/seed.ts",
+    "seed:staging": "tsx --env-file=.env.staging src/seed.ts",
     "dev": "tsx watch --env-file=.env.local src/index.ts"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@boltpay/bolt-js": "^0.2.1",
+    "@boltpay/bolt-js": "^0.2.2",
     "@types/better-sqlite3": "^7.6.13",
     "@types/uuid": "^10.0.0",
     "axios": "^1.9.0",