add monospace font for card id

amnet-native/App.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import {View} from "react-native";
 import RealmContext from "./models/RealmContext";
+import {StatusBar} from "expo-status-bar";
 import {AMUITabBar} from "./components/AMUITabBar";
 import {Server, WalletCards} from "lucide-react-native";
 import {NavigationContainer} from "@react-navigation/native";
@@ -7,7 +9,15 @@ import {SafeAreaProvider} from "react-native-safe-area-context";
 import {createBottomTabNavigator} from "@react-navigation/bottom-tabs";
 import {createNativeStackNavigator} from "@react-navigation/native-stack";
 import {DarkTheme as NavigationDarkTheme} from '@react-navigation/native';
-import {adaptNavigationTheme, MD3DarkTheme, MD3Theme, PaperProvider} from 'react-native-paper';
+import {JetBrainsMono_400Regular, useFonts} from "@expo-google-fonts/jetbrains-mono";
+import {
+    ActivityIndicator,
+    adaptNavigationTheme,
+    MD3DarkTheme,
+    MD3Theme,
+    PaperProvider,
+    Paragraph
+} from 'react-native-paper';
 
 import CardAddModal from "./app/CardAddModal";
 import ServerManager from "./app/ServerManager";
@@ -55,12 +65,25 @@ function AppContent() {
 }
 
 export default function AppRoot() {
+    const [fontsLoaded] = useFonts({
+        JetBrainsMono_400Regular
+    });
+
+    if (!fontsLoaded) {
+        return (
+            <View style={{flex: 1, justifyContent: "center", alignItems: "center", gap: 10}}>
+                <ActivityIndicator animating/>
+                <Paragraph>Starting AimeNet...</Paragraph>
+            </View>
+        )
+    }
+    
     return (
         <RealmProvider>
             <SafeAreaProvider>
                 <PaperProvider theme={AMDarkTheme}>
                     <NavigationContainer theme={DarkTheme}>
-                        <StatusBar />
+                        <StatusBar/>
                         <Stack.Navigator initialRouteName="app-root">
                             {/* main app */}
                             <Stack.Screen name="app-root" component={AppContent} options={{headerShown: false}}/>

amnet-native/components/AimeCard.tsx

@@ -1,5 +1,5 @@
 import {useMemo} from "react";
-import {Paragraph} from "react-native-paper";
+import {Text} from "react-native";
 import {CreditCard, History} from "lucide-react-native";
 
 import TimeAgo from "./TimeAgo";
@@ -21,7 +21,7 @@ export function AimeCard(props: AimeCardProps) {
         <AMUICard title={props.card.name} {...props}>
             <AMUICardDetail>
                 <CreditCard size={18} color="gray"/>
-                <Paragraph style={{color: "gray"}}>{displayedCardNumber}</Paragraph>
+                <Text style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>{displayedCardNumber}</Text>
             </AMUICardDetail>
             {props.card.lastUsed && (
                 <AMUICardDetail>

amnet-native/package-lock.json

@@ -8,6 +8,7 @@
       "name": "amnet-native",
       "version": "1.0.0",
       "dependencies": {
+        "@expo-google-fonts/jetbrains-mono": "^0.2.3",
         "@react-navigation/bottom-tabs": "^6.6.1",
         "@react-navigation/native": "^6.1.18",
         "@react-navigation/native-stack": "^6.11.0",
@@ -2431,6 +2432,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@expo-google-fonts/jetbrains-mono": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@expo-google-fonts/jetbrains-mono/-/jetbrains-mono-0.2.3.tgz",
+      "integrity": "sha512-TlAlQzlDYT/cwg3kjME54P/iOl5dxv+EZ0iYSMZ6+3Jhw0oImBI/BVPVKLP+KT+sAs8ze1FvGTYXrtfiYolxtw==",
+      "license": "MIT"
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.1.tgz",

amnet-native/package.json

@@ -8,6 +8,7 @@
     "ios": "expo run:ios"
   },
   "dependencies": {
+    "@expo-google-fonts/jetbrains-mono": "^0.2.3",
     "@react-navigation/bottom-tabs": "^6.6.1",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/native-stack": "^6.11.0",
@@ -16,6 +17,7 @@
     "date-fns": "^3.6.0",
     "expo": "^51.0.0",
     "expo-blur": "~13.0.2",
+    "expo-clipboard": "~6.0.3",
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.10",
     "expo-linking": "~6.3.1",
@@ -32,7 +34,6 @@
     "react-native-screens": "3.31.1",
     "react-native-svg": "^15.5.0",
     "realm": "^12.12.1",
-    "typescript": "~5.3.3",
-    "expo-clipboard": "~6.0.3"
+    "typescript": "~5.3.3"
   }
 }