SEL-447: Improve proof failure feedback (#707)

* feat: flag stale proofs as failed

* make a constant

* format

app/src/screens/home/ProofHistoryScreen.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: BUSL-1.1; Copyright (c) 2025 Social Connect Labs, Inc.; Licensed under BUSL-1.1 (see LICENSE); Apache-2.0 from 2029-06-11
 
 import { useNavigation } from '@react-navigation/native';
-import { CheckSquare2, Wallet } from '@tamagui/lucide-icons';
+import { CheckSquare2, Wallet, XCircle } from '@tamagui/lucide-icons';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   ActivityIndicator,
@@ -15,12 +15,14 @@ import { Card, Image, Text, View, XStack, YStack } from 'tamagui';
 import { BodyText } from '../../components/typography/BodyText';
 import {
   ProofHistory,
+  ProofStatus,
   useProofHistoryStore,
 } from '../../stores/proofHistoryStore';
 import {
   black,
   blue100,
   blue600,
+  red500,
   slate50,
   slate200,
   slate300,
@@ -270,6 +272,25 @@ const ProofHistoryScreen: React.FC = () => {
                     </Text>
                     <CheckSquare2 color={blue600} height={14} width={14} />
                   </XStack>
+                  {item.status === ProofStatus.FAILURE && (
+                    <XStack
+                      paddingVertical={2}
+                      paddingHorizontal={8}
+                      borderRadius={4}
+                      alignItems="center"
+                      marginLeft={4}
+                    >
+                      <Text
+                        color={red500}
+                        fontSize={14}
+                        fontWeight="600"
+                        marginRight={4}
+                      >
+                        FAIL
+                      </Text>
+                      <XCircle color={red500} height={14} width={14} />
+                    </XStack>
+                  )}
                 </XStack>
               </Card>
             </YStack>

app/src/stores/proofHistoryStore.ts

@@ -53,6 +53,7 @@ interface ProofHistoryState {
 const PAGE_SIZE = 20;
 const DB_NAME = Platform.OS === 'ios' ? 'proof_history.db' : 'proof_history.db';
 const TABLE_NAME = 'proof_history';
+const STALE_PROOF_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
 
 export const useProofHistoryStore = create<ProofHistoryState>()((set, get) => {
   const syncProofHistoryStatus = async () => {
@@ -62,6 +63,16 @@ export const useProofHistoryStore = create<ProofHistoryState>()((set, get) => {
         name: DB_NAME,
         location: 'default',
       });
+
+      const tenMinutesAgo = Date.now() - STALE_PROOF_TIMEOUT_MS;
+      const [stalePending] = await db.executeSql(
+        `SELECT sessionId FROM ${TABLE_NAME} WHERE status = ? AND timestamp <= ?`,
+        [ProofStatus.PENDING, tenMinutesAgo],
+      );
+      for (let i = 0; i < stalePending.rows.length; i++) {
+        const { sessionId } = stalePending.rows.item(i);
+        await get().updateProofStatus(sessionId, ProofStatus.FAILURE);
+      }
       const [pendingProofs] = await db.executeSql(`
         SELECT * FROM ${TABLE_NAME} WHERE status = '${ProofStatus.PENDING}'
       `);