feat: show remaining verification session time in modal

components/wallet/VerificationModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ShieldCheck, Loader2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import {
@@ -19,21 +19,48 @@ interface VerificationModalProps {
   actionType?: string;
   /** The challenge message that will be signed — shown to the user for transparency */
   challengeMessage?: string;
+  /** Epoch ms when the current verification session expires, if still active */
+  sessionExpiresAt?: number;
   onVerify: () => Promise<void>;
   onCancel: () => void;
 }
 
+function formatRemaining(ms: number): string {
+  const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}
+
 export function VerificationModal({
   isOpen,
   isLoading = false,
   error,
   actionType,
   challengeMessage,
+  sessionExpiresAt,
   onVerify,
   onCancel,
 }: VerificationModalProps) {
   const t = useTranslations("verification");
   const [localError, setLocalError] = useState<string | null>(null);
+  const [remainingMs, setRemainingMs] = useState<number | null>(
+    sessionExpiresAt ? sessionExpiresAt - Date.now() : null
+  );
+
+  useEffect(() => {
+    if (!sessionExpiresAt) {
+      setRemainingMs(null);
+      return;
+    }
+
+    setRemainingMs(sessionExpiresAt - Date.now());
+    const interval = setInterval(() => {
+      setRemainingMs(sessionExpiresAt - Date.now());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [sessionExpiresAt]);
 
   const handleVerify = async () => {
     try {
@@ -64,6 +91,12 @@ export function VerificationModal({
         </DialogHeader>
 
         <div className="space-y-4">
+          {remainingMs !== null && remainingMs > 0 && (
+            <p className="text-xs text-muted-foreground">
+              {t("sessionExpiresIn", { time: formatRemaining(remainingMs) })}
+            </p>
+          )}
+
           {challengeMessage && (
             <div
               className="rounded-lg border border-border bg-muted/50 px-3 py-2"

components/wallet/VerificationProvider.tsx

@@ -10,6 +10,7 @@ import {
 } from "react";
 import { useWallet } from "@/hooks/useWallet";
 import { VerificationModal } from "./VerificationModal";
+import { VERIFICATION_EXPIRY_MS } from "@/store/walletStore";
 
 interface VerificationContextType {
   requireVerification: (actionType: string) => Promise<void>;
@@ -136,6 +137,11 @@ export function VerificationProvider({ children }: { children: ReactNode }) {
         error={error ?? undefined}
         actionType={actionType}
         challengeMessage={challengeMessage}
+        sessionExpiresAt={
+          wallet.isVerified && wallet.verifiedAt
+            ? wallet.verifiedAt + VERIFICATION_EXPIRY_MS
+            : undefined
+        }
         onVerify={handleVerify}
         onCancel={handleCancel}
       />

messages/ar.json

@@ -727,6 +727,7 @@
     "descriptionDefault": "أثبت ملكيتك لهذه المحفظة بتوقيع رسالة. دون معاملات أو رسوم غاز.",
     "messageToSign": "الرسالة المراد توقيعها:",
     "challengeLabel": "رسالة التحدي المراد توقيعها",
+    "sessionExpiresIn": "تنتهي الجلسة خلال {time}",
     "signAndVerify": "توقيع والتحقق",
     "verifying": "جارٍ التحقق…",
     "cancel": "إلغاء"

messages/en.json

@@ -698,6 +698,7 @@
     "descriptionDefault": "Prove you own this wallet by signing a message. No transaction or gas fees.",
     "messageToSign": "Message to sign:",
     "challengeLabel": "Challenge message to be signed",
+    "sessionExpiresIn": "Session expires in {time}",
     "signAndVerify": "Sign & Verify",
     "verifying": "Verifying…",
     "cancel": "Cancel"

messages/es.json

@@ -727,6 +727,7 @@
     "descriptionDefault": "Prueba que eres dueño de esta billetera firmando un mensaje. Sin transacciones ni tarifas de gas.",
     "messageToSign": "Mensaje a firmar:",
     "challengeLabel": "Mensaje de desafío a firmar",
+    "sessionExpiresIn": "La sesión expira en {time}",
     "signAndVerify": "Firmar y Verificar",
     "verifying": "Verificando…",
     "cancel": "Cancelar"

messages/pt-BR.json

@@ -727,6 +727,7 @@
     "descriptionDefault": "Prove que você é dono desta carteira assinando uma mensagem. Sem transações ou taxas de gas.",
     "messageToSign": "Mensagem para assinar:",
     "challengeLabel": "Mensagem de desafio a ser assinada",
+    "sessionExpiresIn": "A sessão expira em {time}",
     "signAndVerify": "Assinar e Verificar",
     "verifying": "Verificando…",
     "cancel": "Cancelar"

store/walletStore.ts

@@ -15,6 +15,9 @@ const EMPTY_BALANCE: WalletBalance = {
 /** Session expires after 24 hours of inactivity. Change this constant to adjust. */
 export const SESSION_EXPIRY_MS = 24 * 60 * 60 * 1000;
 
+/** Wallet ownership verification expires 1 hour after it was granted. */
+export const VERIFICATION_EXPIRY_MS = 60 * 60 * 1000;
+
 /**
  * Clears all address-scoped caches: TanStack Query, zustand persisted data,
  * and IndexedDB marketplace cache. Call on disconnect and session expiry.