optimize images

- use jpeg for large images that don't need transparency
- remove unused images

app/declarations.d.ts

@@ -2,4 +2,8 @@ declare module '@env';
 declare module '*.png' {
     const value: string;
     export = value;
+}
+declare module '*.jpeg' {
+    const value: string;
+    export = value;
 }

app/src/components/ProofGrid.tsx

@@ -1,75 +0,0 @@
-import React, { useMemo } from 'react';
-import { Svg, Rect } from 'react-native-svg';
-import { YStack } from 'tamagui';
-import { Proof } from '../../../common/src/utils/types';
-
-interface ProofGridProps {
-    proof: Proof | null;
-}
-
-const ProofGrid: React.FC<ProofGridProps> = ({ proof }) => {
-    const gridSize = 8;
-    const pixelSize = 15;
-
-    const sumAndScaleDigits = useMemo(() => (values: string[]) => {
-        const sum = values.reduce((acc, val) => acc + BigInt(val), BigInt(0));
-        const digits = sum.toString().split('').map(Number);
-        return digits.map(digit => Math.round(digit * (256 / 9)));
-    }, []);
-
-    // Prepare the RGB values
-    const { rValues, gValues, bValues } = useMemo(() => {
-        if (!proof) {
-            return { rValues: [], gValues: [], bValues: [] };
-        }
-
-        const parsedProof = proof.proof;
-        return {
-            rValues: sumAndScaleDigits(parsedProof.a),
-            gValues: sumAndScaleDigits(parsedProof.b.flat()),
-            bValues: sumAndScaleDigits(parsedProof.c)
-        };
-    }, [proof, sumAndScaleDigits]);
-
-    // Generate the grid data
-    const gridData = useMemo(() =>
-        Array.from({ length: gridSize }, (_, rowIndex) =>
-            Array.from({ length: gridSize }, (_, colIndex) => {
-                const index = rowIndex * gridSize + colIndex;
-                const r = index < rValues.length ? rValues[index] : 0;
-                const g = index < gValues.length ? gValues[index] : 0;
-                const b = index < bValues.length ? bValues[index] : 0;
-                return `rgb(${r}, ${g}, ${b})`;
-            })
-        )
-        , [gridSize, rValues, gValues, bValues]);
-
-    // Render the grid using SVG and Rect
-    return (
-        <YStack
-            width={gridSize * pixelSize}
-            borderRadius={40}
-            overflow="hidden"
-            elevation="$4"
-            style={{ backdropFilter: 'blur(10px)' }}
-        >
-            <Svg height={gridSize * pixelSize} width={gridSize * pixelSize} >
-                {gridData.map((row, i) =>
-                    row.map((fill, j) => (
-                        <Rect
-                            key={`${i}-${j}`}
-                            x={j * pixelSize}
-                            y={i * pixelSize}
-                            width={pixelSize}
-                            height={pixelSize}
-                            fill={fill}
-                        />
-                    ))
-                )}
-            </Svg>
-        </YStack>
-
-    );
-};
-
-export default ProofGrid;

app/src/screens/NfcScreen.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { YStack, Text, XStack, Button, ScrollView } from 'tamagui';
 import { bgGreen, borderColor, textBlack, textColor1 } from '../utils/colors';
 import { Carousel } from '../components/Carousel';
-import US_PASSPORT from '../images/us_passport.png'
-import REMOVE_CASE from '../images/remove_case.png'
-import US_PASSPORT_LASTPAGE from '../images/passport_lastpage_graybg.png'
-import US_PASSPORT_LASTPAGE_IOS from '../images/passport_lastpage_iphone.png'
-import US_PASSPORT_LASTPAGE_ANDROID from '../images/passport_lastpage_android.png'
-import PHONE_SCANBUTTON from "../images/phone_scanbutton.png"
+import US_PASSPORT from '../images/us_passport.jpeg'
+import REMOVE_CASE from '../images/remove_case.jpeg'
+import US_PASSPORT_LASTPAGE from '../images/passport_lastpage_graybg.jpeg'
+import US_PASSPORT_LASTPAGE_IOS from '../images/passport_lastpage_iphone.jpeg'
+import US_PASSPORT_LASTPAGE_ANDROID from '../images/passport_lastpage_android.jpeg'
+import PHONE_SCANBUTTON from "../images/phone_scanbutton.jpeg"
 
 import Dialog from "react-native-dialog";
 import NfcManager from 'react-native-nfc-manager';