Refactor ProveScreen in two screens and upgrade UI

app/src/components/AppCard.tsx

@@ -38,7 +38,6 @@ const AppCard: React.FC<AppCardProps> = ({
     return (
         <YStack
             overflow="hidden"
-            elevation={selected ? "$3" : "$3"}
             borderRadius="$7"
             borderWidth={1.2}
             borderColor={borderColor}

app/src/screens/MainScreen.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, Profiler } from 'react';
 import { YStack, XStack, Text, Button, Tabs, Sheet, Label, Fieldset, Input, Switch, H2, Image, useWindowDimensions, H4 } from 'tamagui'
 import { HelpCircle, IterationCw, VenetianMask, Cog, CheckCircle2, ExternalLink } from '@tamagui/lucide-icons';
 import X from '../images/x.png'
@@ -13,6 +13,7 @@ import { Linking, Platform, Pressable } from 'react-native';
 import { Keyboard } from 'react-native';
 import NFC_IMAGE from '../images/nfc.png'
 import { bgColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
+import MintScreen from './MintScreen';
 
 interface MainScreenProps {
   onStartCameraScan: () => void;
@@ -117,12 +118,15 @@ const MainScreen: React.FC<MainScreenProps> = ({
         setNFCScanIsOpen(false);
       }, 0);
     }
-    else if (step >= Steps.NFC_SCAN_COMPLETED) {
+    else if (step == Steps.NFC_SCAN_COMPLETED) {
       // Set the timeout and store its ID
       timeoutId = setTimeout(() => {
         setNFCScanIsOpen(false);
       }, 700);
     }
+    else if (step == Steps.PROOF_GENERATED) {
+      setSelectedTab("mint");
+    }
     if (step == Steps.NFC_SCAN_COMPLETED) {
       setSelectedTab("app");
     }
@@ -368,62 +372,22 @@ const MainScreen: React.FC<MainScreenProps> = ({
             setAddress={setAddress}
             generatingProof={generatingProof}
             handleProve={handleProve}
-            step={step}
-            mintText={mintText}
-            proof={proof}
-            proofTime={proofTime}
-            handleMint={handleMint}
             hideData={hideData}
             ens={ens}
             setEns={setEns}
             majority={majority}
             setMajority={setMajority} />
         </Tabs.Content>
-        <XStack bc="#343434" h={1.2} />
-
-        {/* {(!keyboardVisible || Platform.OS == "ios") &&
-          <Tabs.List pt="$2" pb="$2">
-            <Tabs.Tab value="scan" unstyled w="33%">
-              <YStack ai="center">
-                <Scan color={selectedTab === "scan" ? '#369eff' : '#a0a0a0'} />
-                <Text fontSize="$2" color={selectedTab === "scan" ? '#369eff' : '#a0a0a0'}>Scan</Text>
-              </YStack>
-            </Tabs.Tab>
-            {step >= Steps.NFC_SCAN_COMPLETED ?
-              <Tabs.Tab value="app" unstyled w="33%">
-                <YStack ai="center">
-                  <LayoutGrid color={selectedTab === "app" ? '#369eff' : '#a0a0a0'} />
-                  <Text fontSize="$2" color={selectedTab === "app" ? '#3185FC' : '#a0a0a0'}>Apps</Text>
-                </YStack>
-              </Tabs.Tab>
-              :
-              <Tabs.Tab value="scan" unstyled w="33%">
-                <YStack ai="center">
-                  <LayoutGrid color="#bcbcbc" />
-                  <Text fontSize="$2" color="#bcbcbc">Apps</Text>
-                </YStack>
-              </Tabs.Tab>
-
-            }
-            {
-              (step >= Steps.NFC_SCAN_COMPLETED) && (selectedApp != null) ?
-                <Tabs.Tab value="prove" unstyled w="33%">
-                  <YStack ai="center">
-                    <UserCheck color={selectedTab === "generate" ? '#369eff' : '#a0a0a0'} />
-                    <Text fontSize="$2" color={selectedTab === "generate" ? '#369eff' : '#a0a0a0'}>Prove</Text>
-                  </YStack>
-                </Tabs.Tab>
-                :
-                <Tabs.Tab value={step >= Steps.NFC_SCAN_COMPLETED ? "app" : "scan"} unstyled w="33%">
-                  <YStack ai="center">
-                    <UserCheck color="#a0a0a0" />
-                    <Text fontSize="$2" color="#a0a0a0">Prove</Text>
-                  </YStack>
-                </Tabs.Tab>
-            }
-          </Tabs.List>
-
-        } */}
+        <Tabs.Content value="mint" f={1}>
+          <MintScreen
+            selectedApp={selectedApp}
+            step={step}
+            mintText={mintText}
+            proof={proof}
+            proofTime={proofTime}
+            handleMint={handleMint}
+          />
+        </Tabs.Content>
       </Tabs>
     </YStack >
   );

app/src/screens/MintScreen.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { YStack, XStack, Text, Button, Spinner } from 'tamagui';
+import { Copy } from '@tamagui/lucide-icons';
+import { formatDuration } from '../../utils/utils';
+import { Steps } from '../utils/utils';
+import ProofGrid from '../components/ProofGrid';
+import { App } from '../utils/AppClass';
+import { Platform } from 'react-native';
+import Clipboard from '@react-native-community/clipboard';
+import Toast from 'react-native-toast-message';
+import { blueColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
+
+const { ethers } = require('ethers');
+const fileName = "passport.arkzkey"
+const path = "/data/user/0/com.proofofpassport/files/" + fileName
+
+interface MintScreenProps {
+    selectedApp: App | null;
+    step: number;
+    mintText: string;
+    proof: { proof: string, inputs: string } | null;
+    proofTime: number;
+    handleMint: () => void;
+
+}
+
+const MintScreen: React.FC<MintScreenProps> = ({
+    selectedApp,
+    step,
+    mintText,
+    proof,
+    proofTime,
+    handleMint,
+}) => {
+
+    const getTx = (input: string | null): string => {
+        if (!input) return '';
+        const transaction = input.split(' ').filter(word => word.startsWith('0x')).join(' ');
+        return transaction;
+    }
+    const shortenInput = (input: string | null): string => {
+        if (!input) return '';
+        if (input.length > 9) {
+            return input.substring(0, 25) + '\u2026';
+        } else {
+            return input;
+        }
+    }
+
+    const copyToClipboard = (input: string) => {
+        Clipboard.setString(input);
+        Toast.show({
+            type: 'success',
+            text1: '🖨️ Tx copied to clipboard',
+            position: 'top',
+            bottomOffset: 80,
+        })
+    };
+
+
+    return (
+        <YStack px="$4" f={1} mb={Platform.OS === 'ios' ? "$5" : "$0"}>
+            {step === Steps.TX_MINTED ? (
+                <YStack flex={1} justifyContent='center' alignItems='center' gap="$5">
+                    <XStack flex={1} />
+                    <ProofGrid proof={proof} />
+
+                    <YStack gap="$1">
+                        <Text color={textColor1} fontWeight="bold" fontSize="$5" >You just have minted a Soulbond token 🎉</Text>
+                        <Text color={textColor1} fontSize="$4" fow="bold" textAlign='left'>You can now share this proof with the selected app.</Text>
+
+                        <Text color={textColor1} fontSize="$4" fow="bold" mt="$5">Network: Sepolia</Text>
+                        <XStack jc='space-between' h="$2" ai="center">
+                            <Text color={textColor1} fontWeight="bold" fontSize="$5">Tx: {shortenInput(getTx(mintText))}</Text>
+                        </XStack>
+                    </YStack>
+
+                    <XStack flex={1} />
+                    <Button borderRadius={100} onPress={() => copyToClipboard(getTx(mintText))} marginTop="$4" mb="$8" backgroundColor="#3185FC">
+                        <Copy color="white" size="$1" /><Text color={textColor1} fow="bold" >Copy to clipboard</Text>
+                    </Button>
+
+                </YStack>
+            ) : (
+                <YStack flex={1} justifyContent='center' alignItems='center' gap="$5">
+                    <XStack flex={1} />
+                    <ProofGrid proof={proof} />
+
+                    <YStack >
+                        <Text color={textColor1} fontWeight="bold" fontSize="$5" mt="$3">You just generated this Zero Knowledge proof  🎉</Text>
+                        <Text color={textColor2} fontSize="$5" mt="$2" textAlign='left'>You can now share this proof with the selected app.</Text>
+                        <Text color={textColor2} mt="$3">Proof generation duration: {formatDuration(proofTime)}</Text>
+                    </YStack>
+                    <XStack flex={1} />
+                    <Button borderColor={borderColor} borderWidth={1.3} disabled={step === Steps.TX_MINTING} borderRadius={100} onPress={handleMint} marginTop="$4" mb="$8" backgroundColor="#0090ff">
+                        {step === Steps.TX_MINTING ?
+                            <XStack gap="$2">
+                                <Spinner />
+                                <Text color={textColor1} fow="bold" > Minting </Text>
+                            </XStack>
+                            : <Text color={textColor1} fow="bold" >{selectedApp?.mintphrase}</Text>}
+                    </Button>
+
+                </YStack>
+            )}
+
+        </YStack >
+    );
+};
+export default MintScreen;     

app/src/screens/ProveScreen.tsx

@@ -1,18 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { NativeModules } from 'react-native';
-import { YStack, XStack, Text, Checkbox, Input, Button, Spinner, Image, useWindowDimensions } from 'tamagui';
-import { Check, LayoutGrid, Scan, Copy, Plus, Minus } from '@tamagui/lucide-icons';
-import { getFirstName, formatDuration } from '../../utils/utils';
+import { YStack, XStack, Text, Checkbox, Input, Button, Spinner, Image, useWindowDimensions, ScrollView, SizableStack, SizableText } from 'tamagui';
+import { Check, Plus, Minus, ExternalLink, Cpu, PenTool, Info } from '@tamagui/lucide-icons';
+import { getFirstName } from '../../utils/utils';
 import { attributeToPosition } from '../../../common/src/constants/constants';
-import { Steps } from '../utils/utils';
 import USER from '../images/user.png'
-import ProofGrid from '../components/ProofGrid';
 import { App } from '../utils/AppClass';
 import { Keyboard, Platform } from 'react-native';
 import { DEFAULT_ADDRESS } from '@env';
-import Clipboard from '@react-native-community/clipboard';
 import Toast from 'react-native-toast-message';
-import { blueColor, borderColor, componentBgColor, textColor1, textColor2 } from '../utils/colors';
+import { blueColor, borderColor, componentBgColor, componentBgColor2, textColor1, textColor2 } from '../utils/colors';
+import ENS from "../images/ens_mark_dao.png"
 
 const { ethers } = require('ethers');
 const fileName = "passport.arkzkey"
@@ -27,11 +25,6 @@ interface ProveScreenProps {
   setAddress: (address: string) => void;
   generatingProof: boolean;
   handleProve: (path: string) => void;
-  handleMint: () => void;
-  step: number;
-  mintText: string;
-  proof: { proof: string, inputs: string } | null;
-  proofTime: number;
   hideData: boolean;
   ens: string;
   setEns: (ens: string) => void;
@@ -48,11 +41,6 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
   setAddress,
   generatingProof,
   handleProve,
-  step,
-  mintText,
-  proof,
-  proofTime,
-  handleMint,
   hideData,
   ens,
   setEns,
@@ -61,34 +49,8 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
 }) => {
   const [zkeyLoading, setZkeyLoading] = useState(false);
   const [zkeyLoaded, setZkeyLoaded] = useState(true);
-  const [age, setAge] = useState(18);
 
-  const incrementAge = () => setAge(prevAge => prevAge + 1);
-  const decrementAge = () => setAge(prevAge => prevAge > 0 ? prevAge - 1 : 0);
 
-  const getTx = (input: string | null): string => {
-    if (!input) return '';
-    const transaction = input.split(' ').filter(word => word.startsWith('0x')).join(' ');
-    return transaction;
-  }
-  const shortenInput = (input: string | null): string => {
-    if (!input) return '';
-    if (input.length > 9) {
-      return input.substring(0, 25) + '\u2026';
-    } else {
-      return input;
-    }
-  }
-
-  const copyToClipboard = (input: string) => {
-    Clipboard.setString(input);
-    Toast.show({
-      type: 'success',
-      text1: '🖨️ Tx copied to clipboard',
-      position: 'top',
-      bottomOffset: 80,
-    })
-  };
 
   const downloadZkey = async () => {
     // TODO: don't redownload if already in the file system at path, if downloaded from previous session
@@ -219,34 +181,47 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
 
   return (
     <YStack px="$4" f={1} mb={Platform.OS === 'ios' ? "$5" : "$0"}>
-      {(step >= Steps.NFC_SCAN_COMPLETED && selectedApp != null) ?
-        (step < Steps.PROOF_GENERATED ? (
-          <YStack flex={1} mx="$2" gap="$2">
-            <YStack alignSelf='center' my="$3">
-              {hideData ?
-                <Image
-                  w={height > 750 ? 150 : 100}
-                  h={height > 750 ? 190 : 80}
-                  borderRadius={height > 800 ? "$7" : "$6"}
-                  source={{
-                    uri: USER,
-                  }}
-                /> :
-                <Image
-                  w={height > 750 ? 150 : 110}
-                  h={height > 750 ? 190 : 130}
-                  borderRadius={height > 750 ? "$7" : "$6"}
-                  source={{
-                    uri: passportData.photoBase64 ?? USER,
-                  }}
-                />
+      <YStack flex={1} mx="$2" gap="$2">
+        <YStack alignSelf='center' my="$3">
+          {hideData ?
+            <Image
+              w={height > 750 ? 150 : 100}
+              h={height > 750 ? 190 : 80}
+              borderRadius={height > 800 ? "$7" : "$6"}
+              source={{
+                uri: USER,
+              }}
+            /> :
+            <Image
+              w={height > 750 ? 150 : 110}
+              h={height > 750 ? 190 : 130}
+              borderRadius={height > 750 ? "$7" : "$6"}
+              source={{
+                uri: passportData.photoBase64 ?? USER,
+              }}
+            />
 
-              }
-            </YStack>
-            <Text color={textColor1} fontSize="$5" fontWeight="bold">Hi {hideData ? maskString(getFirstName(passportData.mrz)) : getFirstName(passportData.mrz)} 👋</Text>
-            <Text color={textColor2}>Enter your address or ens:</Text>
+          }
+        </YStack>
+        <Text color={textColor1} fontSize="$5" fontWeight="bold" ml="$2" mb="$1">Hi {hideData ? maskString(getFirstName(passportData.mrz)) : getFirstName(passportData.mrz)} 👋</Text>
+
+        <YStack bc={componentBgColor} borderRadius="$6" borderWidth={1.5} borderColor={borderColor}>
+          <YStack p="$3">
+            <XStack gap="$4" ai="center">
+              <XStack p="$2" bc="#232323" borderWidth={1.2} borderColor="#343434" borderRadius="$3">
+                <Image
+                  source={{ uri: ENS }}
+                  w="$1"
+                  h="$1" />
+              </XStack>
+              <YStack gap="$1">
+                <Text fontSize={16} fow="bold" color="#ededed">Address or ENS</Text>
+              </YStack>
+            </XStack>
+          </YStack>
+          <YStack bc={componentBgColor2} borderTopWidth={1.5} borderColor={borderColor} borderBottomLeftRadius="$6" borderBottomRightRadius="$6">
             <Input
-              bg={componentBgColor}
+              bg="transparent"
               color={textColor1}
               fontSize={13}
               placeholder="anon.eth or 0x023…"
@@ -254,12 +229,32 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
               onChangeText={setInputValue}
               autoCorrect={false}
               autoCapitalize='none'
-              borderColor={address != ethers.ZeroAddress ? "#3185FC" : "#343434"}
+              borderColor="transparent"
+              borderWidth={0}
             />
+          </YStack>
+        </YStack>
+
+
+        <YStack f={1} >
+          <YStack bc="#1c1c1c" borderWidth={1.2} borderColor="#343434" borderRadius="$6">
+            <YStack p="$3">
+              <XStack gap="$4" ai="center">
+                <XStack p="$2" bc="#232323" borderWidth={1.2} borderColor="#343434" borderRadius="$3">
+                  <PenTool color="#a0a0a0" />
+                </XStack>
+                <YStack gap="$1">
+                  <XStack gap="$2">
+                    <Text fontSize={16} fow="bold" color="#ededed">Disclose</Text>
+                    <Info size="$1" color={textColor2} />
+                  </XStack>
+                  <SizableText color="#a0a0a0">Select optionnal data </SizableText>
+                </YStack>
+              </XStack>
+            </YStack>
+            <YStack gap="$2" p="$3" bc="#232323" borderWidth={1.2} borderLeftWidth={0} borderRightWidth={0} borderBottomWidth={0} borderColor="#343434" borderBottomLeftRadius="$6" borderBottomRightRadius="$6">
+              <ScrollView >
 
-            <YStack f={1} >
-              <Text color={textColor1} h="$3" mt="$2">{selectedApp?.disclosurephrase}</Text>
-              <YStack mt="$2">
                 {selectedApp && Object.keys(selectedApp.disclosure).map((key) => {
                   const key_ = key as string;
                   const indexes = attributeToPosition[key_];
@@ -268,8 +263,8 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
                   const mrzAttributeFormatted = mrzAttribute;
 
                   return (
-                    <XStack key={key} mx="$2" gap="$4" alignItems='center'>
-                      <XStack p="$2" onPress={() => handleDisclosureChange(key_)}>
+                    <XStack key={key} mx="$2" gap="$4" alignItems='center' >
+                      <XStack p="$2" onPress={() => handleDisclosureChange(key_)} >
                         <Checkbox
                           bg={componentBgColor}
                           borderColor={borderColor}
@@ -286,96 +281,43 @@ const ProveScreen: React.FC<ProveScreenProps> = ({
                       </XStack>
                       <Text color={textColor2} >{keyFormatted}: </Text>
                       {key_ === 'older_than' ? (
-                        <XStack gap="$2" jc='center' ai='center'>
-                          <Text color={textColor1} w="$2" fontSize={16}>{majority}</Text>
+                        <XStack gap="$1.5" jc='center' ai='center'>
+                          <XStack mr="$2">
+                            <Text color={textColor1} w="$1" fontSize={16}>{majority}</Text>
+                            <Text color={textColor1} fontSize={16}> yo</Text>
+                          </XStack>
                           <Button bg={componentBgColor} borderColor={borderColor} h="$2" w="$3" onPress={() => setMajority(majority - 1)}><Minus color={textColor1} size={18} /></Button>
                           <Button bg={componentBgColor} borderColor={borderColor} h="$2" w="$3" onPress={() => setMajority(majority + 1)}><Plus color={textColor1} size={18} /></Button>
-
                         </XStack>
                       ) : (
                         <Text color={textColor1} >{hideData ? maskString(mrzAttributeFormatted) : mrzAttributeFormatted}</Text>
                       )}
-
                     </XStack>
                   );
                 })}
-              </YStack>
-            </YStack>
-            <Button disabled={zkeyLoading || (address == ethers.ZeroAddress)} borderWidth={1.3} borderColor={borderColor} borderRadius={100} onPress={() => { (!zkeyLoaded && Platform.OS != "ios") ? downloadZkey() : handleProve(path) }} mt="$8" backgroundColor={(zkeyLoading || (address == ethers.ZeroAddress)) ? "#1c1c1c" : "#3185FC"} alignSelf='center' >
-              {!zkeyLoaded && Platform.OS != "ios" ? (
 
-                <XStack ai="center" gap="$2">
-                  {zkeyLoading && <Spinner />}
-                  <Text color={textColor1} fow="bold">{zkeyLoading ? "Downloading ZK circuit" : "Download ZK circuit"}</Text>
-                </XStack>
-              ) : generatingProof ? (
-                <XStack ai="center" gap="$1">
-                  <Spinner />
-                  <Text color={textColor1} marginLeft="$2" fow="bold" >Generating ZK proof</Text>
-                </XStack>
-              ) : (
-                <Text color={(zkeyLoading || (address == ethers.ZeroAddress)) ? "#343434" : "#ededed"} fow="bold">Generate ZK proof</Text>
-              )}
-            </Button>
-            {(height > 750) && <Text fontSize={10} color={generatingProof ? "#a0a0a0" : "#161616"} py="$2" alignSelf='center'>This operation can take up to 2 mn, phone may freeze during this time</Text>}
+              </ScrollView>
+            </YStack>
           </YStack >
-
-        ) : step === Steps.TX_MINTED ? (
-          <YStack flex={1} justifyContent='center' alignItems='center' gap="$5">
-            <XStack flex={1} />
-            <ProofGrid proof={proof} />
-
-            <YStack gap="$1">
-              <Text color={textColor1} fontWeight="bold" fontSize="$5" >You just have minted a Soulbond token 🎉</Text>
-              <Text color={textColor1} fontSize="$4" fow="bold" textAlign='left'>You can now share this proof with the selected app.</Text>
-
-              <Text color={textColor1} fontSize="$4" fow="bold" mt="$5">Network: Sepolia</Text>
-              <XStack jc='space-between' h="$2" ai="center">
-                <Text color={textColor1} fontWeight="bold" fontSize="$5">Tx: {shortenInput(getTx(mintText))}</Text>
-              </XStack>
-            </YStack>
-
-            <XStack flex={1} />
-            <Button borderRadius={100} onPress={() => copyToClipboard(getTx(mintText))} marginTop="$4" mb="$8" backgroundColor="#3185FC">
-              <Copy color="white" size="$1" /><Text color={textColor1} fow="bold" >Copy to clipboard</Text>
-            </Button>
-
-          </YStack>
-        ) : (
-          <YStack flex={1} justifyContent='center' alignItems='center' gap="$5">
-            <XStack flex={1} />
-            <ProofGrid proof={proof} />
-
-            <YStack >
-              <Text color={textColor1} fontWeight="bold" fontSize="$5" mt="$3">You just generated this Zero Knowledge proof  🎉</Text>
-              <Text color={textColor2} fontSize="$5" mt="$2" textAlign='left'>You can now share this proof with the selected app.</Text>
-              <Text color={textColor2} mt="$3">Proof generation duration: {formatDuration(proofTime)}</Text>
-            </YStack>
-            <XStack flex={1} />
-            <Button borderColor={borderColor} borderWidth={1.3} disabled={step === Steps.TX_MINTING} borderRadius={100} onPress={handleMint} marginTop="$4" mb="$8" backgroundColor="#0090ff">
-              {step === Steps.TX_MINTING ?
-                <XStack gap="$2">
-                  <Spinner />
-                  <Text color={textColor1} fow="bold" > Minting </Text>
-                </XStack>
-                : <Text color={textColor1} fow="bold" >{selectedApp?.mintphrase}</Text>}
-            </Button>
-
-          </YStack>
-        )
-
-        ) :
-        (
-          <YStack flex={1} justifyContent='center' alignItems='center'>
-            <Text color={textColor1} fontSize={17} textAlign='center' fow="bold">Please scan your passport and select an app to generate ZK proof</Text>
-            <XStack mt="$8" gap="$7">
-              <Scan size="$4" color={step < Steps.NFC_SCAN_COMPLETED ? "black" : "#3185FC"} />
-              <LayoutGrid size="$4" color={selectedApp == null ? "black" : "#3185FC"} />
+        </YStack>
+        <Button disabled={zkeyLoading || (address == ethers.ZeroAddress)} borderWidth={1.3} borderColor={borderColor} borderRadius={100} onPress={() => { (!zkeyLoaded && Platform.OS != "ios") ? downloadZkey() : handleProve(path) }} mt="$8" backgroundColor={(zkeyLoading || (address == ethers.ZeroAddress)) ? "#1c1c1c" : "#3185FC"} alignSelf='center' >
+          {!zkeyLoaded && Platform.OS != "ios" ? (
+            <XStack ai="center" gap="$2">
+              {zkeyLoading && <Spinner />}
+              <Text color={textColor1} fow="bold">{zkeyLoading ? "Downloading ZK circuit" : "Download ZK circuit"}</Text>
             </XStack>
-          </YStack>
+          ) : generatingProof ? (
+            <XStack ai="center" gap="$1">
+              <Spinner />
+              <Text color={textColor1} marginLeft="$2" fow="bold" >Generating ZK proof</Text>
+            </XStack>
+          ) : (
+            <Text color={(zkeyLoading || (address == ethers.ZeroAddress)) ? "#343434" : "#ededed"} fow="bold">Generate ZK proof</Text>
+          )}
+        </Button>
+        {(height > 750) && <Text fontSize={10} color={generatingProof ? "#a0a0a0" : "#161616"} py="$2" alignSelf='center'>This operation can take up to 2 mn, phone may freeze during this time</Text>}
+      </YStack >
 
-        )
-      }
     </YStack >
   );
 };

app/src/screens/ScanScreen.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { YStack, Text, XStack, Button } from 'tamagui';
 import { Steps } from '../utils/utils';
 import { Camera, ExternalLink, Nfc } from '@tamagui/lucide-icons';
+import { blueColorDark, blueColorLight } from '../utils/colors';
 
 interface ScanScreenProps {
   onStartCameraScan: () => void;
@@ -37,8 +38,8 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, handleNFCSca
                 <Text color="#3bb178" fow="bold">Done</Text>
               </XStack>
             ) : (
-              <XStack ml="$2" p="$2" px="$3" bc="#2b1400" borderRadius="$10">
-                <Text color="#f7670a" fow="bold">To-do</Text>
+              <XStack ml="$2" p="$2" px="$3" bc={blueColorDark} borderRadius="$10">
+                <Text color={blueColorLight} fow="bold">To-do</Text>
               </XStack>
             )}
             <XStack f={1} />
@@ -75,8 +76,8 @@ const ScanScreen: React.FC<ScanScreenProps> = ({ onStartCameraScan, handleNFCSca
                 <Text color="#a0a0a0" fontWeight="bold">To-do</Text>
               </YStack>
             ) : step < Steps.NFC_SCAN_COMPLETED ? (
-              <XStack ml="$2" p="$2" px="$3" bc="#2b1400" borderRadius="$10">
-                <Text color="#f7670a" fow="bold">To-do</Text>
+              <XStack ml="$2" p="$2" px="$3" bc={blueColorDark} borderRadius="$10">
+                <Text color={blueColorLight} fow="bold">To-do</Text>
               </XStack>
             ) : (
               <XStack ml="$2" p="$2" px="$3" bc="#0d1e18" borderRadius="$10">

app/src/utils/colors.ts

@@ -4,4 +4,6 @@ export const componentBgColor = "#1c1c1c";
 export const componentBgColor2 = "#232323";
 export const blueColor = "#3185FC";
 export const textColor1 = "#ededed";
-export const textColor2 = "#a0a0a0";
+export const textColor2 = "#a0a0a0";
+export const blueColorDark = "#11233e"
+export const blueColorLight = "#0090ff"