Merge pull request #61 from djwesty/djwesty/60

Address skipped tests
remove unused imports
2025-03-18 16:05:34 -07:00 · 2025-03-18 15:23:25 -07:00 · 2025-03-18 15:21:06 -07:00 · 2025-03-18 15:11:30 -07:00 · 2025-03-17 23:48:31 -07:00 · 2025-03-17 23:10:31 -07:00
34 changed files with 1821 additions and 652 deletions
--- a/.gitignore
+++ b/.gitignore
@ -37,5 +37,6 @@ yarn-error.*

 app-example
 android
+ios
 .env
 coverage
--- a/README.md
+++ b/README.md
@ -60,6 +60,19 @@ In the output, you'll find options to open the app in a

 You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).

+### Android APK build
+
+To create an APK build, use the following
+
+```bash
+npx expo prebuild
+cd android
+./gradlew assembleRelease # linux
+./gradlew.bat assembleRelease # windows command
+```
+
+Then, see `android/app/build/outputs/apk/release/app-release.apk` for the output
+
 ### Learn more

 To learn more about developing your project with Expo, look at the following resources:
--- a/app.json
+++ b/app.json
@ -4,16 +4,17 @@
    "slug": "poker-chips-helper",
    "version": "1.0.0",
    "orientation": "portrait",
-    "icon": "./assets/images/icon1.png",
+    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.anonymous.pokerchipshelper"
    },
    "android": {
      "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/images/icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.anonymous.pokerchipshelper"
@ -33,7 +34,8 @@
          "resizeMode": "contain",
          "backgroundColor": "#ffffff"
        }
-      ]
+      ],
+      "expo-localization"
    ],
    "experiments": {
      "typedRoutes": true
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@ -1,7 +1,59 @@
+import i18n from "@/i18n/i18n";
+import { COLORS } from "@/styles/styles";
+import AppContext, { IAppContext } from "@/util/context";
+import { MaterialIcons } from "@expo/vector-icons";
 import { Stack } from "expo-router";
-import React from "react";
+import React, { useMemo, useState } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import { useColorScheme } from "react-native";
+
+const RootLayout: React.FC = () => {
+  const [showSettings, setShowSettings] = useState<boolean>(false);
+
+  const { t } = useTranslation();
+
+  const ctx = useMemo<IAppContext>(
+    () => ({
+      showSettings,
+    }),
+    [showSettings]
+  );
+
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+  return (
+    <AppContext.Provider value={ctx}>
+      <I18nextProvider i18n={i18n}>
+        <Stack
+          screenOptions={{
+            contentStyle: {
+              backgroundColor: colors.BACKGROUND,
+            },
+            headerShown: true,
+            title: t("poker_chips_helper"),
+            navigationBarColor: colors.PRIMARY,
+            headerRight: () => (
+              <MaterialIcons
+                name="settings"
+                onPress={() => setShowSettings(!showSettings)}
+                size={30}
+                color={colors.TEXT}
+              />
+            ),
+            headerStyle: {
+              backgroundColor: colors.PRIMARY,
+            },
+            headerTintColor: colors.TEXT,
+            statusBarBackgroundColor: "grey",
+          }}
+        />
+      </I18nextProvider>
+    </AppContext.Provider>
+  );
+};

-const RootLayout: React.FC = () => (
-  <Stack screenOptions={{ headerShown: true, title: "Poker Chips Helper" }} />
-);
 export default RootLayout;
--- a/app/index.tsx
+++ b/app/index.tsx
@ -1,69 +1,237 @@
-import React, { useState } from "react";
-import { ScrollView, Text, Alert, Button } from "react-native";
+import React, { useState, useEffect, useContext, useMemo } from "react";
+import { ScrollView, Alert, useColorScheme, Appearance } from "react-native";
+import Button from "@/containers/Button";
 import PlayerSelector from "@/components/PlayerSelector";
 import BuyInSelector from "@/components/BuyInSelector";
 import ChipsSelector from "@/components/ChipsSelector";
 import ChipDistributionSummary from "@/components/ChipDistributionSummary";
 import ChipDetection from "@/components/ChipDetection";
-
-export enum COLORS {
-  "white",
-  "red",
-  "green",
-  "blue",
-  "black",
-}
+import CurrencySelector from "@/components/CurrencySelector";
+import { saveState, loadState } from "@/util/CalculatorState";
+import {
+  savePersistentState,
+  loadPersistentState,
+} from "@/util/PersistentState";
+import styles, { COLORS } from "@/styles/styles";
+import Section from "@/containers/Section";
+import AppContext from "@/util/context";
+import i18n from "@/i18n/i18n";
+import { Picker, PickerItem } from "@/containers/Picker";
+import { ItemValue } from "@react-native-picker/picker/typings/Picker";

 const IndexScreen: React.FC = () => {
  const [playerCount, setPlayerCount] = useState(2);
  const [buyInAmount, setBuyInAmount] = useState<number>(20);
  const [numberOfChips, setNumberOfChips] = useState<number>(5);
  const [totalChipsCount, setTotalChipsCount] = useState<number[]>([]);
+  const [selectedCurrency, setSelectedCurrency] = useState<string>("$");
+  const [selectedLanguage, setSelectedLanguage] = useState<string>("en");
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+  const context = useContext(AppContext);
+  const isSettingsVisible = useMemo(() => context.showSettings, [context]);

-  const handleSave = () => {
+  useEffect(() => {
+    const loadPersistentData = async () => {
+      try {
+        const savedState = await loadPersistentState();
+        if (savedState) {
+          setPlayerCount(savedState.playerCount || 2);
+          setBuyInAmount(savedState.buyInAmount || 20);
+          setNumberOfChips(savedState.numberOfChips || 5);
+          setTotalChipsCount(savedState.totalChipsCount || []);
+          setSelectedCurrency(savedState.selectedCurrency || "$");
+        }
+      } catch (error) {
+        console.error("Error loading persistent state:", error);
+      }
+    };
+    loadPersistentData();
+  }, []);
+
+  const handleSave = async (slot: "SLOT1" | "SLOT2") => {
    if (buyInAmount === null) {
-      Alert.alert("Error", "Please select a valid buy-in amount");
+      Alert.alert(i18n.t("error"), i18n.t("please_select_valid_buyin"));
+      return;
+    }
+    const state = {
+      playerCount,
+      buyInAmount,
+      numberOfChips,
+      totalChipsCount,
+      selectedCurrency,
+    };
+    await saveState(slot, state);
+    await savePersistentState(state);
+    Alert.alert(i18n.t("success"), i18n.t("state_saved", { slot }));
+  };
+
+  const handleLoad = async (slot: "SLOT1" | "SLOT2") => {
+    const loadedState = await loadState(slot);
+    if (loadedState) {
+      setPlayerCount(loadedState.playerCount);
+      setBuyInAmount(loadedState.buyInAmount ?? 20);
+      setNumberOfChips(loadedState.numberOfChips);
+      setTotalChipsCount(loadedState.totalChipsCount);
+      setSelectedCurrency(loadedState.selectedCurrency || "$");
+      await savePersistentState(loadedState);
+      Alert.alert(i18n.t("success"), i18n.t("state_loaded_from", { slot }));
    } else {
-      Alert.alert(
-        "Success",
-        `Buy-in amount set to ${buyInAmount} for ${playerCount} players`
-      );
+      Alert.alert(i18n.t("info"), i18n.t("no_saved_state_found"));
    }
  };

-  // Update chip count based on detection or manual edit
-  const updateChipCount = (chipData: { [color: string]: number }) => {
-    // Convert the chip data from the API response or manual edit to a count array
-    const chipCountArray = Object.entries(chipData).map(
-      ([color, count]) => count
-    );
-    setTotalChipsCount(chipCountArray); // Update the parent component's state
+  const handleLanguageChange = (language: ItemValue, _: any) => {
+    setSelectedLanguage(language.toString());
+    i18n.changeLanguage(language.toString());
  };

  return (
-    <ScrollView contentContainerStyle={{ padding: 20, flexGrow: 1 }}>
-      <PlayerSelector
-        playerCount={playerCount}
-        setPlayerCount={setPlayerCount}
-      />
-      <BuyInSelector setBuyInAmount={setBuyInAmount} />
-      <ChipDetection updateChipCount={updateChipCount} />
-      <ChipsSelector
-        totalChipsCount={totalChipsCount}
-        setTotalChipsCount={setTotalChipsCount}
-        numberOfChips={numberOfChips}
-        setNumberOfChips={setNumberOfChips}
-      />
-      <ChipDistributionSummary
-        playerCount={playerCount}
-        buyInAmount={buyInAmount}
-        totalChipsCount={totalChipsCount}
-      />
-      <Button
-        title="Save"
-        onPress={handleSave}
-        disabled={buyInAmount === null}
-      />
+    <ScrollView
+      style={styles.scrollView}
+      contentContainerStyle={styles.scrollViewContent}
+    >
+      {isSettingsVisible && (
+        <>
+          <Section
+            title={i18n.t("appearance")}
+            iconName={"brightness-4"}
+            orientation="row"
+          >
+            <Button
+              title={
+                darkMode
+                  ? i18n.t("switch_to_light_mode")
+                  : i18n.t("switch_to_dark_mode")
+              }
+              onPress={() =>
+                Appearance.setColorScheme(darkMode ? "light" : "dark")
+              }
+            />
+          </Section>
+
+          <Section
+            title={i18n.t("select_language")}
+            iconName={"language"}
+            orientation="row"
+          >
+            <Picker
+              selectedValue={selectedLanguage}
+              onValueChange={handleLanguageChange}
+            >
+              <PickerItem label={i18n.t("english")} value="en" />
+              <PickerItem label={i18n.t("spanish")} value="es" />
+            </Picker>
+          </Section>
+
+          <Section
+            title={i18n.t("select_currency")}
+            iconName={"attach-money"}
+            orientation="row"
+          >
+            <CurrencySelector
+              selectedCurrency={selectedCurrency}
+              setSelectedCurrency={setSelectedCurrency}
+            />
+          </Section>
+        </>
+      )}
+
+      <Section
+        title={i18n.t("select_number_of_players")}
+        iconName={"people"}
+        orientation="row"
+        contentStyle={{ justifyContent: "center", gap: 30 }}
+      >
+        <PlayerSelector
+          playerCount={playerCount}
+          setPlayerCount={setPlayerCount}
+        />
+      </Section>
+
+      <Section
+        title={i18n.t("select_buyin_amount")}
+        iconName={"monetization-on"}
+      >
+        <BuyInSelector
+          selectedCurrency={selectedCurrency}
+          setBuyInAmount={setBuyInAmount}
+        />
+      </Section>
+
+      <Section
+        title={i18n.t("automatic_chip_detection")}
+        iconName={"camera-alt"}
+      >
+        <ChipDetection
+          updateChipCount={(chipData) => {
+            const chipCountArray = Object.values(chipData);
+            setTotalChipsCount(chipCountArray);
+            setNumberOfChips(chipCountArray.length);
+          }}
+        />
+      </Section>
+
+      <Section
+        title={i18n.t("manual_chip_adjustment")}
+        iconName={"account-balance"}
+        orientation="row"
+        contentStyle={{ alignItems: "center" }}
+      >
+        <ChipsSelector
+          totalChipsCount={totalChipsCount}
+          setTotalChipsCount={setTotalChipsCount}
+          numberOfChips={numberOfChips}
+          setNumberOfChips={setNumberOfChips}
+        />
+      </Section>
+
+      <Section
+        title={i18n.t("distribution_and_denomination")}
+        iconName={"currency-exchange"}
+      >
+        <ChipDistributionSummary
+          playerCount={playerCount}
+          buyInAmount={buyInAmount}
+          totalChipsCount={totalChipsCount}
+          selectedCurrency={selectedCurrency}
+        />
+      </Section>
+
+      <Section
+        title={i18n.t("save_and_load")}
+        iconName={"save"}
+        orientation="row"
+      >
+        <>
+          <Button
+            title={i18n.t("save_slot_1")}
+            onPress={() => handleSave("SLOT1")}
+            disabled={buyInAmount === null}
+            size="small"
+          />
+          <Button
+            title={i18n.t("save_slot_2")}
+            onPress={() => handleSave("SLOT2")}
+            disabled={buyInAmount === null}
+            size="small"
+          />
+          <Button
+            title={i18n.t("load_slot_1")}
+            onPress={() => handleLoad("SLOT1")}
+            size="small"
+          />
+          <Button
+            title={i18n.t("load_slot_2")}
+            onPress={() => handleLoad("SLOT2")}
+            size="small"
+          />
+        </>
+      </Section>
    </ScrollView>
  );
 };
--- a/assets/images/icon.png
+++ b/assets/images/icon.png
--- a/assets/images/icon1.png
+++ b/assets/images/icon1.png
--- a/components/BuyInSelector.tsx
+++ b/components/BuyInSelector.tsx
@ -1,27 +1,41 @@
-import React, { useState } from "react";
-import {
-  View,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  StyleSheet,
-} from "react-native";
-import { MaterialIcons } from "@expo/vector-icons";
+import React, { useMemo, useState } from "react";
+import { View, Text, TextInput, useColorScheme } from "react-native";
+import styles, { COLORS } from "@/styles/styles";
+import Button from "@/containers/Button";
+import i18n from "@/i18n/i18n";

 interface BuyInSelectorProps {
  setBuyInAmount: React.Dispatch<React.SetStateAction<number>>;
+  selectedCurrency: string;
 }

 const defaultBuyInOptions = [10, 25, 50];
+const MIN = 1;
+const MAX = 200;

-const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
+const parseRoundClamp = (num: string): number => {
+  const parsed = parseFloat(num);
+  const rounded = Math.round(parsed);
+  return Math.min(Math.max(rounded, MIN), MAX);
+};
+
+const BuyInSelector: React.FC<BuyInSelectorProps> = ({
+  setBuyInAmount,
+  selectedCurrency,
+}) => {
  const [customAmount, setCustomAmount] = useState("");
  const [buyInAmount, setBuyInAmountState] = useState<number | null>(null);
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );

  const handleCustomAmountChange = (value: string) => {
-    const numericValue = parseFloat(value);
+    const numericValue = parseRoundClamp(value);
    if (!isNaN(numericValue) && numericValue >= 0) {
-      setCustomAmount(value);
+      setCustomAmount(numericValue.toString());
      setBuyInAmountState(numericValue);
      setBuyInAmount(numericValue);
    } else {
@ -38,88 +52,35 @@ const BuyInSelector: React.FC<BuyInSelectorProps> = ({ setBuyInAmount }) => {
  };

  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <MaterialIcons name="monetization-on" size={30} color="green" />
-        <Text style={styles.title}>Select Buy-in Amount:</Text>
-      </View>
-
-      <View style={styles.optionsContainer}>
+    <>
+      <View style={{ ...styles.container, flexDirection: "row" }}>
        {defaultBuyInOptions.map((amount) => (
-          <TouchableOpacity
+          <Button
            key={amount}
-            style={[
-              styles.buyInButton,
-              buyInAmount === amount ? styles.selectedButton : null,
-            ]}
            onPress={() => handleBuyInSelection(amount)}
-          >
-            <Text style={styles.buttonText}>{amount}</Text>
-          </TouchableOpacity>
+            title={`${selectedCurrency} ${amount}`}
+          />
        ))}
      </View>

-      <Text style={styles.orText}>Or enter a custom amount:</Text>
      <TextInput
-        style={styles.input}
+        style={[styles.input, { color: colors.TEXT }]}
+        placeholderTextColor={colors.TEXT}
        value={customAmount}
+        maxLength={3}
        onChangeText={handleCustomAmountChange}
-        placeholder="Enter custom buy-in"
+        placeholder={`${i18n.t("custom_buy_in")} ${MIN} - ${MAX}`}
        keyboardType="numeric"
      />

-      <Text style={styles.selectionText}>
-        Selected Buy-in: {buyInAmount !== null ? buyInAmount : "None"}
+      <Text style={[styles.h2, { color: colors.TEXT }]}>
+        {`${i18n.t("selected_buy_in")} `}
+        {buyInAmount !== null
+          ? `${selectedCurrency} ${buyInAmount}`
+          : i18n.t("none")}
      </Text>
-    </View>
+    </>
  );
 };

-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    marginBottom: 10,
-  },
-  title: {
-    fontSize: 22,
-    marginLeft: 10,
-  },
-  optionsContainer: {
-    flexDirection: "row",
-    justifyContent: "space-around",
-    marginVertical: 10,
-  },
-  buyInButton: {
-    backgroundColor: "#ddd",
-    padding: 10,
-    borderRadius: 5,
-  },
-  selectedButton: {
-    backgroundColor: "#4caf50",
-  },
-  buttonText: {
-    fontSize: 16,
-  },
-  orText: {
-    marginTop: 10,
-    textAlign: "center",
-  },
-  input: {
-    borderWidth: 1,
-    borderColor: "#ccc",
-    padding: 8,
-    marginVertical: 10,
-    borderRadius: 5,
-  },
-  selectionText: {
-    marginTop: 15,
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-});
-
 export default BuyInSelector;
--- a/components/ChipDetection.tsx
+++ b/components/ChipDetection.tsx
@ -1,19 +1,22 @@
 import React, { useState } from "react";
-import {
-  View,
-  Button,
-  Image,
-  ActivityIndicator,
-  Text,
-  ScrollView,
-} from "react-native";
+import { Image, ActivityIndicator, Text, View } from "react-native";
+import Button from "@/containers/Button";
 import * as ImagePicker from "expo-image-picker";
+import i18n from "@/i18n/i18n";

-const ChipDetection = ({ updateChipCount }) => {
-  const [imageUri, setImageUri] = useState(null);
+const ChipDetection = ({
+  updateChipCount,
+}: {
+  updateChipCount: (chipData: Record<string, number>) => void;
+}) => {
+  const [imageUri, setImageUri] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
-  const [lastDetectedChips, setLastDetectedChips] = useState({});
+  const [error, setError] = useState<string | null>(null);
+  const [lastDetectedChips, setLastDetectedChips] = useState<
+    Record<string, number>
+  >({});
+
+  const chipColors = ["white", "red", "green", "blue", "black"];

  const requestCameraPermissions = async () => {
    const cameraPermission = await ImagePicker.requestCameraPermissionsAsync();
@ -27,16 +30,16 @@ const ChipDetection = ({ updateChipCount }) => {
      quality: 1,
    });

-    if (!result.canceled) {
+    if (!result.canceled && result.assets && result.assets.length > 0) {
      setImageUri(result.assets[0].uri);
-      await processImage(result.assets[0].base64);
+      await processImage(result.assets[0].base64 as string);
    }
  };

  const takePhoto = async () => {
    const hasPermission = await requestCameraPermissions();
    if (!hasPermission) {
-      setError("Camera permission is required to take a photo.");
+      setError(i18n.t("camera_permission_required"));
      return;
    }

@ -45,25 +48,25 @@ const ChipDetection = ({ updateChipCount }) => {
      quality: 1,
    });

-    if (!result.canceled) {
+    if (!result.canceled && result.assets && result.assets.length > 0) {
      setImageUri(result.assets[0].uri);
-      await processImage(result.assets[0].base64);
+      await processImage(result.assets[0].base64 as string);
    }
  };

-  const processImage = async (base64Image) => {
+  const processImage = async (base64Image: string) => {
    setLoading(true);
    setError(null);

    try {
-      const response = await fetch(process.env.EXPO_PUBLIC_API_URL, {
+      const response = await fetch(process.env.EXPO_PUBLIC_API_URL as string, {
        method: "POST",
        headers: {
-          Authorization: `Bearer ${process.env.EXPO_PUBLIC_API_KEY}`, // Use environment variable for API key
+          Authorization: `Bearer ${process.env.EXPO_PUBLIC_API_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
-          model: process.env.EXPO_PUBLIC_MODEL_NAME, // Use environment variable for model name
+          model: process.env.EXPO_PUBLIC_MODEL_NAME,
          messages: [
            {
              role: "system",
@ -91,40 +94,60 @@ const ChipDetection = ({ updateChipCount }) => {
      const result = await response.json();

      if (!response.ok || !result.choices || !result.choices[0].message) {
-        throw new Error("Invalid response from API.");
+        throw new Error(i18n.t("invalid_response"));
      }

      const rawContent = result.choices[0].message.content.trim();
      const cleanJSON = rawContent.replace(/```json|```/g, "").trim();
+      const parsedData: Record<string, number> = JSON.parse(cleanJSON);

-      const parsedData = JSON.parse(cleanJSON);
-
-      const filteredData = Object.fromEntries(
-        Object.entries(parsedData).filter(([_, count]) => count > 0)
-      );
+      const filteredData = Object.entries(parsedData)
+        .filter(([color]) => chipColors.includes(color))
+        .sort(
+          ([colorA], [colorB]) =>
+            chipColors.indexOf(colorA) - chipColors.indexOf(colorB)
+        )
+        .reduce(
+          (acc, [color, count]) => {
+            acc[color] = count;
+            return acc;
+          },
+          {} as Record<string, number>
+        );

      setLastDetectedChips(filteredData);
      updateChipCount(filteredData);
    } catch (error) {
-      setError("Failed to analyze the image.");
+      setError(i18n.t("failed_to_analyze_image"));
    } finally {
      setLoading(false);
    }
  };

  return (
-    <ScrollView contentContainerStyle={{ padding: 20, alignItems: "center" }}>
-      <Button title="Pick an Image" onPress={pickImage} />
-      <Button title="Take a Photo" onPress={takePhoto} />
+    <View>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-evenly",
+          marginBottom: 10,
+        }}
+      >
+        <Button title={i18n.t("pick_an_image")} onPress={pickImage} />
+        <Button title={i18n.t("take_a_photo")} onPress={takePhoto} />
+      </View>
+
      {imageUri && (
        <Image
          source={{ uri: imageUri }}
          style={{ width: 300, height: 300, marginTop: 10 }}
        />
      )}
+
      {loading && <ActivityIndicator size="large" color="blue" />}
+
      {error && <Text style={{ color: "red", marginTop: 10 }}>{error}</Text>}
-    </ScrollView>
+    </View>
  );
 };

--- a/components/ChipDistributionSummary.tsx
+++ b/components/ChipDistributionSummary.tsx
@ -1,26 +1,37 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { View, Text, StyleSheet } from "react-native";
+import { View, Text, Alert } from "react-native";
 import { ColorValue } from "react-native";
+import i18n from "@/i18n/i18n";
+import styles, { COLORS } from "@/styles/styles";
+import { MaterialIcons } from "@expo/vector-icons";

 interface ChipDistributionSummaryProps {
  playerCount: number;
  buyInAmount: number;
  totalChipsCount: number[];
  colors?: ColorValue[];
+  selectedCurrency: string;
 }

+const reverseFib: number[] = [8, 5, 3, 2, 1];
+
 const ChipDistributionSummary = ({
  playerCount,
  buyInAmount,
  totalChipsCount,
  colors = ["white", "red", "green", "blue", "black"],
+  selectedCurrency = "$",
 }: ChipDistributionSummaryProps) => {
  const validDenominations: validDenomination[] = [
-    0.05, 0.1, 0.25, 0.5, 1, 2, 2.5, 5, 10, 20, 50, 100,
+    0.05, 0.1, 0.25, 1, 5, 10, 20, 50, 100,
  ];
  const [denominations, setDenominations] = useState<validDenomination[]>([]);
  const [distributions, setDistributions] = useState<number[]>([]);

+  const showAlert = () => {
+    Alert.alert(i18n.t("warning"), i18n.t("chip_value_warn"));
+  };
+
  type validDenomination =
    | 0.05
    | 0.1
@ -32,29 +43,42 @@ const ChipDistributionSummary = ({
    | 5
    | 10
    | 20
+    | 25
    | 50
    | 100;

-  // Return the closest (but lower) valid denomination to the target
  const findFloorDenomination = (target: number): validDenomination => {
    let current: validDenomination = validDenominations[0];
-    validDenominations.forEach((value, index) => {
+    validDenominations.forEach((value, _) => {
      if (value < target) current = value;
    });
    return current;
  };

-  // Bound for the value of the highest chip
-  // This is somewhat arbitray, but 1/3 to 1/4 is reasonable depending on the number of colors.
-  const maxDenomination = useMemo(() => {
-    if (totalChipsCount.length > 3) {
-      return findFloorDenomination(buyInAmount / 3);
-    } else {
-      return findFloorDenomination(buyInAmount / 4);
-    }
-  }, [totalChipsCount]);
+  const round = useCallback((num: number) => Math.round(num * 100) / 100, []);
+
+  // Bound for the value of the highest chip
+  // This is somewhat arbitray and imperfect, but 1/3 to 1/5 is reasonable depending on the number of colors.
+  // Could be possibly improved based on value of buy in amount
+  const maxDenomination: validDenomination = useMemo(() => {
+    let max: validDenomination;
+    switch (totalChipsCount.length) {
+      case 5:
+      case 4:
+        max = findFloorDenomination(buyInAmount / 3);
+        break;
+      case 3:
+        max = findFloorDenomination(buyInAmount / 4);
+        break;
+      case 2:
+      case 1:
+      default:
+        max = findFloorDenomination(buyInAmount / 5);
+        break;
+    }
+    return max;
+  }, [totalChipsCount, buyInAmount]);

-  // Total value of the pot
  const potValue = useMemo(
    () => buyInAmount * playerCount,
    [buyInAmount, playerCount]
@ -63,7 +87,7 @@ const ChipDistributionSummary = ({
  // The total value of all chips distributed to a single player. Ideally should be equal to buyInAmount
  const totalValue = useMemo(() => {
    let value = 0;
-    for (let i = 0; i < totalChipsCount.length; i++) {
+    for (let i = 0; i < distributions.length; i++) {
      value += distributions[i] * denominations[i];
    }
    return value;
@ -75,170 +99,102 @@ const ChipDistributionSummary = ({
    [totalChipsCount, playerCount]
  );

-  // Redenominate the chips in case of failure to properly distribute.
-  // Move the shuffle index to the next lowest denomination, and keep all else same
-  const redenominate = useCallback(
-    (
-      invalidDenomination: validDenomination[],
-      shuffleIndex: number
-    ): validDenomination[] => {
-      let moved = false;
-      const newDenomination: validDenomination[] = [];
-      for (let i = invalidDenomination.length - 1; i >= 0; i--) {
-        if (i > shuffleIndex) {
-          newDenomination.push(invalidDenomination[i]);
-        } else if (i == shuffleIndex) {
-          newDenomination.push(invalidDenomination[i]);
-        } else if (i < shuffleIndex && !moved) {
-          const nextLowestDenominationIndex = Math.max(
-            validDenominations.indexOf(invalidDenomination[i]) - 1,
-            0
-          );
-          newDenomination.push(validDenominations[nextLowestDenominationIndex]);
-          moved = true;
-        } else {
-          newDenomination.push(invalidDenomination[i]);
-        }
-      }
-      newDenomination.reverse();
-      return newDenomination;
-    },
-    []
-  );
-
  // Dynamically set denominations and distributions from changing inputs
  useEffect(() => {
    let testDenomination: validDenomination[] = [];
-
-    const numColors = totalChipsCount.length;
-    const testDistribution: number[] = [];
-    for (let i = 0; i < numColors; ++i) {
-      testDistribution.push(0);
-    }
+    const totalNumColors = totalChipsCount.length;

    // Start with max denominations, then push on the next adjacent lower denomination
    testDenomination.push(maxDenomination);
    let currentDenominationIndex: number =
      validDenominations.indexOf(maxDenomination);
-    for (let i = numColors - 2; i >= 0; i = i - 1) {
+    for (
+      let i = totalNumColors - 2;
+      i >= 0 && currentDenominationIndex > 0;
+      i = i - 1
+    ) {
      currentDenominationIndex -= 1;
      const currentDemoniation = validDenominations[currentDenominationIndex];
      testDenomination.push(currentDemoniation);
    }
    testDenomination.reverse();
+    let numColors = testDenomination.length;

-    // Distribute the chips using the test denomination
-    // If distribution fails to equal the buy-in, redenominate and re-try
-    // Algorithm could be improved with more complexity and optimization
-    let remainingValue = buyInAmount;
-    let fail = true;
-    let failCount = 0;
-    while (fail && failCount < 1) {
-      let stop = false;
-      while (remainingValue > 0 && !stop) {
-        let distributed = false;
-        for (let i = numColors - 1; i >= 0; i = i - 1) {
-          if (testDistribution[i] < maxPossibleDistribution[i]) {
-            if (remainingValue >= testDenomination[i]) {
-              testDistribution[i] = testDistribution[i] + 1;
-              remainingValue = remainingValue - testDenomination[i];
-              distributed = true;
-            }
-          }
-        }
-        if (distributed == false) {
-          stop = true;
-        }
-      }
-      if (remainingValue !== 0) {
-        const redenominateIndex = failCount % numColors;
-        testDenomination = redenominate(testDenomination, redenominateIndex);
-        failCount += 1;
-        fail = true;
-      } else {
-        fail = false;
-      }
+    const testDistribution: number[] = [];
+    for (let i = 0; i < numColors; ++i) {
+      testDistribution.push(0);
    }

+    // Distribute the chips using the test denomination with a reverse fibbonaci preference
+    // Not optimal, nor correct under all inputs but works for most inputs
+    // Algorithm could be improved with more complexity and optimization (re-tries, redenominating, etc.)
+    let remainingValue = buyInAmount;
+    let stop = false;
+    while (remainingValue > 0 && !stop) {
+      let distributed = false;
+      for (let i = numColors - 1; i >= 0; i = i - 1) {
+        for (
+          let j = reverseFib[i];
+          j > 0 &&
+          remainingValue >= testDenomination[i] &&
+          testDistribution[i] < maxPossibleDistribution[i];
+          j = j - 1
+        ) {
+          testDistribution[i] = testDistribution[i] + 1;
+          remainingValue = round(remainingValue - testDenomination[i]);
+          distributed = true;
+        }
+      }
+      if (distributed == false) {
+        stop = true;
+      }
+    }
    setDenominations(testDenomination);
    setDistributions(testDistribution);
  }, [totalChipsCount, maxDenomination, buyInAmount, playerCount]);

  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Distribution & Denomination</Text>
-      <Text style={styles.subTitle}>${potValue} Pot</Text>
-      <View style={styles.chipContainer}>
-        {totalChipsCount.map((_, index) => (
-          <View style={styles.chipRow} key={index}>
-            <Text
-              style={{
-                ...styles.chipText,
-                color: colors[index],
-                ...(colors[index] === "white" && styles.whiteShadow),
-              }}
-            >
-              {distributions[index]} chips:
-            </Text>
-            <Text
-              style={{
-                ...styles.chipText,
-                color: colors[index],
-                ...(colors[index] === "white" && styles.whiteShadow),
-              }}
-            >
-              ${denominations[index]} each
-            </Text>
-          </View>
-        ))}
+    <>
+      <View style={styles.container}>
+        {distributions.map((distribution, index) => {
+          return (
+            distribution > 0 && (
+              <View style={{ flexDirection: "row" }} key={index}>
+                <Text
+                  style={{
+                    ...styles.h2,
+                    fontWeight: "bold",
+                    color: colors[index],
+                    ...(colors[index] === "white" && styles.shadow),
+                  }}
+                >
+                  {`${distribution} ${i18n.t("chips")}: ${selectedCurrency}${denominations[index]} ${i18n.t("each")}`}
+                </Text>
+              </View>
+            )
+          );
+        })}
      </View>
-      <Text style={styles.chipText}>Total Value:{totalValue}</Text>
-    </View>
+      <View style={{ flexDirection: "row", justifyContent: "space-between" }}>
+        <View style={[styles.container, { flexDirection: "row", gap: 1 }]}>
+          <Text style={styles.p}>
+            {i18n.t("total_value")}: {selectedCurrency} {round(totalValue)}{" "}
+          </Text>
+          {round(totalValue) !== buyInAmount && (
+            <MaterialIcons
+              name="warning"
+              size={20}
+              color={COLORS.WARNING}
+              onPress={showAlert}
+            />
+          )}
+        </View>
+        <Text style={styles.p}>
+          {selectedCurrency} {potValue} {i18n.t("pot")}
+        </Text>
+      </View>
+    </>
  );
 };

-const styles = StyleSheet.create({
-  container: {
-    marginTop: 20,
-    padding: 15,
-    borderRadius: 10,
-    display: "flex",
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
-  subTitle: {
-    fontSize: 16,
-    color: "gray",
-    fontWeight: "bold",
-    marginBottom: 10,
-  },
-  chipContainer: {
-    marginTop: 10,
-  },
-  chipRow: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "center",
-    gap: 10,
-  },
-  chipText: {
-    fontSize: 20,
-    marginVertical: 2,
-    fontWeight: "bold",
-  },
-  whiteShadow: {
-    textShadowColor: "black",
-    textShadowOffset: { width: 0, height: 0 },
-    textShadowRadius: 10,
-  },
-  noDataText: {
-    fontSize: 16,
-    color: "gray",
-  },
-});
-
 export default ChipDistributionSummary;
--- a/components/ChipsSelector.tsx
+++ b/components/ChipsSelector.tsx
@ -4,11 +4,17 @@ import {
  Text,
  TextInput,
  StyleSheet,
-  Button,
  ColorValue,
  Modal,
+  TouchableOpacity,
 } from "react-native";
+import Button from "@/containers/Button";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import styles from "@/styles/styles";
+import i18n from "@/i18n/i18n";
+
 const colors: ColorValue[] = ["white", "red", "green", "blue", "black"];
+const defaults = [100, 50, 50, 50, 50];

 const ChipInputModal = ({
  showModal,
@ -24,23 +30,35 @@ const ChipInputModal = ({
  const color: ColorValue = useMemo(() => showModal[1], [showModal]);
  const colorIdx = useMemo(() => colors.indexOf(color), [color]);

-  const [value, setValue] = useState<number | undefined>(); // value may be undefined initially
+  const [value, setValue] = useState<number | undefined>();

-  // Reset the color value when the specific color this modal is for, changes. The same modal is shared/reused in all cases.
  useEffect(() => {
    setValue(totalChipsCount[colorIdx]);
-  }, [colorIdx]);
+  }, [colorIdx, totalChipsCount]);
+
+  const shadow = useMemo(() => color === "white", [color]);

  return (
    <Modal
      visible={showModal[0]}
      onRequestClose={() => setShowModal([false, color])}
+      style={styles.modal}
+      presentationStyle="fullScreen"
+      animationType="slide"
    >
      {value !== undefined && (
        <>
-          <Text>Number of {showModal[1]?.toString()} chips</Text>
+          <Text style={styles.h2}>
+            {i18n.t("number_of_chips", {
+              color: showModal[1]?.toString(),
+            })}{" "}
+          </Text>
          <TextInput
-            style={{ color: showModal[1] }}
+            style={{
+              ...styles.input,
+              color: showModal[1],
+              ...(shadow ? styles.shadow : {}),
+            }}
            keyboardType="numeric"
            value={value.toString()}
            onChangeText={(v) => {
@ -52,7 +70,7 @@ const ChipInputModal = ({
        </>
      )}
      <Button
-        title="Accept"
+        title={i18n.t("accept")}
        onPress={() => {
          update(showModal[1], Number.isNaN(value) ? 0 : value);
          setShowModal([false, color]);
@ -71,14 +89,25 @@ const Chip = ({
  count: number;
  setShowModal: React.Dispatch<React.SetStateAction<[boolean, ColorValue]>>;
 }) => {
+  const shadow = useMemo(() => color === "white", [color]);
  return (
-    <Text
-      key={color.toString()}
+    <TouchableOpacity
      onPress={() => setShowModal([true, color])}
-      style={[{ color: color }, styles.chip]}
+      style={{ alignItems: "center" }}
    >
-      {count}
-    </Text>
+      <MaterialCommunityIcons
+        name="poker-chip"
+        size={24}
+        color={color}
+        style={shadow ? styles.shadow : {}}
+      />
+      <Text
+        key={color.toString()}
+        style={[{ color: color }, styles.h2, shadow ? styles.shadow : {}]}
+      >
+        {count}
+      </Text>
+    </TouchableOpacity>
  );
 };

@ -97,12 +126,12 @@ const ChipsSelector = ({
    false,
    colors[0],
  ]);
+
  const colorsUsed = useMemo(
-    () => colors.filter((v, i) => i < numberOfChips),
+    () => colors.slice(0, numberOfChips),
    [numberOfChips]
  );

-  // Callback for ChipInputModal to update the chips in the parents state.
  const update = useCallback(
    (color: ColorValue, count: number) => {
      const newTotalChipsCount = totalChipsCount.slice();
@ -110,20 +139,18 @@ const ChipsSelector = ({
      newTotalChipsCount[colorIndex] = count;
      setTotalChipsCount(newTotalChipsCount);
    },
-    [numberOfChips, totalChipsCount, setTotalChipsCount]
+    [totalChipsCount, setTotalChipsCount]
  );

-  // When the number of chips changes (dec or inc), update the array being careful to add in sensible default values where they belong
  useEffect(() => {
    if (numberOfChips !== totalChipsCount.length) {
      let newTotalChipsCount = totalChipsCount.slice();
-
      if (numberOfChips < totalChipsCount.length) {
        newTotalChipsCount = newTotalChipsCount.slice(0, numberOfChips);
      } else if (numberOfChips > totalChipsCount.length) {
        for (let colorIndex = 0; colorIndex < numberOfChips; ++colorIndex) {
          if (colorIndex >= newTotalChipsCount.length) {
-            const defaultTotal = 100 - colorIndex * 20;
+            const defaultTotal = defaults[colorIndex];
            newTotalChipsCount.push(defaultTotal);
          }
        }
@ -134,35 +161,33 @@ const ChipsSelector = ({

  return (
    <>
-      <View style={styles.container}>
-        <Text style={styles.title}>Chips you have</Text>
-        <View style={styles.chipContainer}>
-          {colorsUsed.map((color) => (
+      <Button
+        title="-"
+        onPress={() => {
+          setNumberOfChips(Math.max(1, numberOfChips - 1));
+        }}
+        disabled={numberOfChips === 1}
+      />
+      <View style={[styles.container, { flexDirection: "row" }]}>
+        {colorsUsed.map((color) => {
+          const chipCount = totalChipsCount[colors.indexOf(color)] ?? 0;
+          return (
            <Chip
              key={color.toString()}
              color={color}
-              count={totalChipsCount[colors.indexOf(color)] ?? 0}
+              count={chipCount}
              setShowModal={setShowModal}
            />
-          ))}
-        </View>
-        <View style={styles.buttonContainer}>
-          <Button
-            title="-"
-            onPress={() => {
-              setNumberOfChips(Math.max(1, numberOfChips - 1));
-            }}
-            disabled={numberOfChips == 1}
-          />
-          <Button
-            title="+"
-            onPress={() => {
-              setNumberOfChips(Math.min(5, numberOfChips + 1));
-            }}
-            disabled={numberOfChips == 5}
-          />
-        </View>
+          );
+        })}
      </View>
+      <Button
+        title="+"
+        onPress={() => {
+          setNumberOfChips(Math.min(5, numberOfChips + 1));
+        }}
+        disabled={numberOfChips === 5}
+      />

      <ChipInputModal
        showModal={showModal}
@ -174,34 +199,4 @@ const ChipsSelector = ({
  );
 };

-const styles = StyleSheet.create({
-  container: {
-    marginBottom: 20,
-    gap: 10,
-  },
-  title: {
-    fontWeight: "bold",
-    margin: "auto",
-    fontSize: 18,
-  },
-  chipContainer: {
-    padding: 20,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-evenly",
-    backgroundColor: "#bbb",
-  },
-  chip: {
-    textAlign: "center",
-    fontSize: 16,
-    fontWeight: "bold",
-  },
-  buttonContainer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "space-evenly",
-  },
-  button: {},
-});
 export default ChipsSelector;
--- a/components/CurrencySelector.tsx
+++ b/components/CurrencySelector.tsx
@ -0,0 +1,30 @@
+import React from "react";
+import i18n from "@/i18n/i18n";
+import { Picker, PickerItem } from "@/containers/Picker";
+
+interface CurrencySelectorProps {
+  selectedCurrency: string;
+  setSelectedCurrency: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const CurrencySelector: React.FC<CurrencySelectorProps> = ({
+  selectedCurrency,
+  setSelectedCurrency,
+}) => {
+  return (
+    <>
+      <Picker
+        selectedValue={selectedCurrency}
+        onValueChange={(itemValue) => setSelectedCurrency(itemValue.toString())}
+        testID="currency-picker" // ✅ Add testID here
+      >
+        <PickerItem label={i18n.t("usd")} value="$" />
+        <PickerItem label={i18n.t("euro")} value="€" />
+        <PickerItem label={i18n.t("pound")} value="£" />
+        <PickerItem label={i18n.t("inr")} value="₹" />
+      </Picker>
+    </>
+  );
+};
+
+export default CurrencySelector;
--- a/components/PlayerSelector.tsx
+++ b/components/PlayerSelector.tsx
@ -1,64 +1,49 @@
-import React from "react";
-import { View, Text, Button, Image, StyleSheet } from "react-native";
+import React, { useMemo } from "react";
+import { View, Text, useColorScheme } from "react-native";
+import Button from "@/containers/Button";
+import styles, { COLORS } from "@/styles/styles";

 interface PlayerSelectorProps {
  playerCount: number;
  setPlayerCount: React.Dispatch<React.SetStateAction<number>>;
 }

+const MIN = 2;
+const MAX = 8;
+
 const PlayerSelector: React.FC<PlayerSelectorProps> = ({
  playerCount,
  setPlayerCount,
 }) => {
  const increasePlayers = () => {
-    if (playerCount < 8) setPlayerCount(playerCount + 1);
+    if (playerCount < MAX) setPlayerCount(playerCount + 1);
  };

  const decreasePlayers = () => {
-    if (playerCount > 2) setPlayerCount(playerCount - 1);
+    if (playerCount > MIN) setPlayerCount(playerCount - 1);
  };
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );

  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <Image
-          source={{
-            uri: "https://static.thenounproject.com/png/3890959-200.png",
-          }}
-          style={styles.icon}
-        />
-        <Text style={styles.title}>Select Number of Players:</Text>
-      </View>
-
-      <Text style={styles.playerCount}>{playerCount}</Text>
-      <View style={{ flexDirection: "row" }}>
-        <Button title="-" onPress={decreasePlayers} />
-        <Button title="+" onPress={increasePlayers} />
-      </View>
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+      <Button
+        title="-"
+        onPress={decreasePlayers}
+        disabled={playerCount <= MIN}
+      />
+      <Text style={[styles.h1, { color: colors.TEXT }]}>{playerCount}</Text>
+      <Button
+        title="+"
+        onPress={increasePlayers}
+        disabled={playerCount >= MAX}
+      />
    </View>
  );
 };

-const styles = StyleSheet.create({
-  container: {
-    padding: 20,
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  title: {
-    fontSize: 18,
-    marginLeft: 10, // Spacing between icon and text
-  },
-  icon: {
-    width: 48, // Increased size
-    height: 48, // Increased size
-  },
-  playerCount: {
-    fontSize: 24,
-    marginVertical: 10,
-  },
-});
-
 export default PlayerSelector;
--- a/components/tests/BuyInSelector.test.tsx
+++ b/components/tests/BuyInSelector.test.tsx
@ -2,6 +2,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react-native";
 import BuyInSelector from "@/components/BuyInSelector";

+// Mocking vector icons to prevent errors
 jest.mock("@expo/vector-icons", () => {
  const { Text } = require("react-native");
  return {
@ -10,82 +11,144 @@ jest.mock("@expo/vector-icons", () => {
 });

 describe("BuyInSelector Component", () => {
-  let setBuyInAmount;
-  let getByText;
-  let getByPlaceholderText;
+  let setBuyInAmount: jest.Mock;

-  const renderComponent = () => {
-    const result = render(<BuyInSelector setBuyInAmount={setBuyInAmount} />);
-    getByText = result.getByText;
-    getByPlaceholderText = result.getByPlaceholderText;
+  // Render the component and return query methods
+  const renderComponent = (selectedCurrency = "$") => {
+    const utils = render(
+      <BuyInSelector
+        setBuyInAmount={setBuyInAmount}
+        selectedCurrency={selectedCurrency}
+      />
+    );
+    return {
+      ...utils,
+      getByText: utils.getByText,
+      getByPlaceholderText: utils.getByPlaceholderText,
+      queryByText: utils.queryByText,
+    };
  };

  beforeEach(() => {
    setBuyInAmount = jest.fn();
-    renderComponent();
  });

  it("renders the buy-in options and input correctly", () => {
-    expect(getByText("Select Buy-in Amount:")).toBeTruthy();
-    expect(getByText("10")).toBeTruthy();
-    expect(getByText("25")).toBeTruthy();
-    expect(getByText("50")).toBeTruthy();
-    expect(getByPlaceholderText("Enter custom buy-in")).toBeTruthy();
-    expect(getByText("Selected Buy-in: None")).toBeTruthy(); // Check default selection
+    const { getByText, getByPlaceholderText, queryByText } = renderComponent();
+
+    expect(getByText("$ 10")).toBeTruthy();
+    expect(getByText("$ 25")).toBeTruthy();
+    expect(getByText("$ 50")).toBeTruthy();
+    expect(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200")
+    ).toBeTruthy();
+    expect(queryByText(/Selected Buy-in:.*None/i)).toBeTruthy();
  });

  it("sets a predefined buy-in amount correctly", () => {
-    fireEvent.press(getByText("25"));
+    const { getByText } = renderComponent();
+
+    fireEvent.press(getByText("$ 25"));
    expect(setBuyInAmount).toHaveBeenCalledWith(25);
  });

  it("sets a custom buy-in amount correctly", () => {
-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
+    const { getByPlaceholderText } = renderComponent();
+
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "100"
+    );
    expect(setBuyInAmount).toHaveBeenCalledWith(100);
  });

-  it("resets custom amount if invalid input is entered", () => {
-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-10");
-    expect(setBuyInAmount).toHaveBeenCalledWith(25); // Assuming 25 is the default
-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "abc");
-    expect(setBuyInAmount).toHaveBeenCalledWith(25); // Reset to default
+  it("bound and validate custom amount if invalid input is entered", () => {
+    const { getByPlaceholderText } = renderComponent();
+
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "-10"
+    );
+    expect(setBuyInAmount).toHaveBeenCalledWith(1); // Min value
+
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "abc"
+    );
+    expect(setBuyInAmount).toHaveBeenCalledWith(1);
  });

  it("clears the custom amount when selecting a predefined option", () => {
-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "100");
-    fireEvent.press(getByText("50"));
+    const { getByPlaceholderText, getByText } = renderComponent();
+
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "100"
+    );
+    fireEvent.press(getByText("$ 50"));
    expect(setBuyInAmount).toHaveBeenCalledWith(50);
  });

  it("handles valid and invalid input for custom amount correctly", () => {
-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "75");
+    const { getByPlaceholderText } = renderComponent();
+
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "75"
+    );
    expect(setBuyInAmount).toHaveBeenCalledWith(75);

-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "-5");
-    expect(setBuyInAmount).toHaveBeenCalledWith(25);
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "-5"
+    );
+    expect(setBuyInAmount).toHaveBeenCalledWith(1);

-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "abc");
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "abc"
+    );
    expect(setBuyInAmount).toHaveBeenCalledWith(25);
  });

  it("triggers state update every time a buy-in option is clicked, even if it's the same", () => {
-    fireEvent.press(getByText("25")); // First click
-    fireEvent.press(getByText("25")); // Clicking the same option again
-    expect(setBuyInAmount).toHaveBeenCalledTimes(2); // Expect it to be called twice
+    const { getByText } = renderComponent();
+
+    fireEvent.press(getByText("$ 25"));
+    fireEvent.press(getByText("$ 25"));
+    expect(setBuyInAmount).toHaveBeenCalledTimes(2);
  });

  it("resets to default buy-in when custom input is cleared", () => {
-    const input = getByPlaceholderText("Enter custom buy-in");
+    const { getByPlaceholderText } = renderComponent();
+    const input = getByPlaceholderText("Or, enter a custom amount: 1 - 200");
+
    fireEvent.changeText(input, "75");
    expect(setBuyInAmount).toHaveBeenCalledWith(75);
+
    fireEvent.changeText(input, "");
-    expect(setBuyInAmount).toHaveBeenCalledWith(25); // Assuming 25 is the default
+    expect(setBuyInAmount).toHaveBeenCalledWith(25);
  });

  it("updates state correctly when selecting predefined buy-in after entering a custom amount", () => {
-    fireEvent.changeText(getByPlaceholderText("Enter custom buy-in"), "200");
+    const { getByPlaceholderText, getByText } = renderComponent();
+
+    fireEvent.changeText(
+      getByPlaceholderText("Or, enter a custom amount: 1 - 200"),
+      "200"
+    );
    expect(setBuyInAmount).toHaveBeenCalledWith(200);
-    fireEvent.press(getByText("10"));
+
+    fireEvent.press(getByText("$ 10"));
    expect(setBuyInAmount).toHaveBeenCalledWith(10);
  });
+
+  it("displays selected currency correctly", () => {
+    const { getByText, queryByText } = renderComponent("€");
+
+    expect(getByText("€ 10")).toBeTruthy();
+    expect(getByText("€ 25")).toBeTruthy();
+    expect(getByText("€ 50")).toBeTruthy();
+    expect(queryByText(/Selected Buy-in:.*None/i)).toBeTruthy();
+  });
 });
--- a/components/tests/ChipDetection.test.tsx
+++ b/components/tests/ChipDetection.test.tsx
@ -17,11 +17,134 @@ jest.mock("expo-image-picker", () => ({
 describe("ChipDetection", () => {
  beforeEach(() => {
    jest.clearAllMocks();
-    global.fetch = jest.fn(() =>
-      Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve({
+    jest.spyOn(global, "fetch").mockImplementation(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({
+            choices: [
+              {
+                message: {
+                  content: JSON.stringify({
+                    red: 5,
+                    green: 3,
+                    blue: 0,
+                  }),
+                },
+              },
+            ],
+          }),
+          { status: 200, headers: { "Content-Type": "application/json" } }
+        )
+      )
+    );
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("renders correctly", () => {
+    const { getByText } = render(
+      <ChipDetection updateChipCount={mockUpdateChipCount} />
+    );
+
+    expect(getByText(/pick an image/i)).toBeTruthy();
+    expect(getByText(/take a photo/i)).toBeTruthy();
+  });
+
+  it("picks an image from the library", async () => {
+    (ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
+      canceled: false,
+      assets: [{ uri: "test-uri", base64: "test-base64" }],
+    });
+
+    const { getByText } = render(
+      <ChipDetection updateChipCount={mockUpdateChipCount} />
+    );
+    fireEvent.press(getByText(/pick an image/i));
+
+    await waitFor(() => expect(mockUpdateChipCount).toHaveBeenCalled());
+  });
+
+  it("takes a photo with the camera", async () => {
+    (
+      ImagePicker.requestCameraPermissionsAsync as jest.Mock
+    ).mockResolvedValueOnce({
+      granted: true,
+    });
+    (ImagePicker.launchCameraAsync as jest.Mock).mockResolvedValueOnce({
+      canceled: false,
+      assets: [{ uri: "test-camera-uri", base64: "test-camera-base64" }],
+    });
+
+    const { getByText } = render(
+      <ChipDetection updateChipCount={mockUpdateChipCount} />
+    );
+    fireEvent.press(getByText(/take a photo/i));
+
+    await waitFor(() =>
+      expect(mockUpdateChipCount).toHaveBeenCalledWith({
+        red: 5,
+        green: 3,
+        blue: 0,
+      })
+    );
+  });
+
+  it("handles camera permission denied", async () => {
+    (
+      ImagePicker.requestCameraPermissionsAsync as jest.Mock
+    ).mockResolvedValueOnce({
+      granted: false,
+    });
+
+    const { getByText } = render(
+      <ChipDetection updateChipCount={mockUpdateChipCount} />
+    );
+    fireEvent.press(getByText(/take a photo/i));
+
+    await waitFor(() =>
+      expect(
+        getByText(/camera permission is required to take a photo/i)
+      ).toBeTruthy()
+    );
+  });
+
+  it("displays error message on image processing failure", async () => {
+    (ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
+      canceled: false,
+      assets: [{ uri: "test-uri", base64: "test-base64" }],
+    });
+
+    jest.spyOn(global, "fetch").mockImplementationOnce(() =>
+      Promise.resolve(
+        new Response(JSON.stringify({ choices: [] }), {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        })
+      )
+    );
+
+    const { getByText } = render(
+      <ChipDetection updateChipCount={mockUpdateChipCount} />
+    );
+    fireEvent.press(getByText(/pick an image/i));
+
+    await waitFor(() =>
+      expect(getByText(/failed to analyze the image/i)).toBeTruthy()
+    );
+  });
+
+  it("handles valid API response correctly", async () => {
+    (ImagePicker.launchImageLibraryAsync as jest.Mock).mockResolvedValueOnce({
+      canceled: false,
+      assets: [{ uri: "test-uri", base64: "test-base64" }],
+    });
+
+    jest.spyOn(global, "fetch").mockImplementationOnce(() =>
+      Promise.resolve(
+        new Response(
+          JSON.stringify({
            choices: [
              {
                message: {
@ -30,120 +153,21 @@ describe("ChipDetection", () => {
              },
            ],
          }),
-      })
-    );
-  });
-
-  it("renders correctly", () => {
-    const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
-    );
-    expect(getByText("Pick an Image")).toBeTruthy();
-    expect(getByText("Take a Photo")).toBeTruthy();
-  });
-
-  it("picks an image from the library", async () => {
-    ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
-      canceled: false,
-      assets: [{ uri: "test-uri", base64: "test-base64" }],
-    });
-
-    const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
-    );
-    fireEvent.press(getByText("Pick an Image"));
-
-    await waitFor(() => expect(mockUpdateChipCount).toHaveBeenCalled());
-  });
-
-  it("takes a photo with the camera", async () => {
-    ImagePicker.requestCameraPermissionsAsync.mockResolvedValueOnce({
-      granted: true,
-    });
-    ImagePicker.launchCameraAsync.mockResolvedValueOnce({
-      canceled: false,
-      assets: [{ uri: "test-camera-uri", base64: "test-camera-base64" }],
-    });
-
-    const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
-    );
-    fireEvent.press(getByText("Take a Photo"));
-
-    await waitFor(() => expect(mockUpdateChipCount).toHaveBeenCalled());
-  });
-
-  it("handles camera permission denied", async () => {
-    ImagePicker.requestCameraPermissionsAsync.mockResolvedValueOnce({
-      granted: false,
-    });
-
-    const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
-    );
-    fireEvent.press(getByText("Take a Photo"));
-
-    await waitFor(() =>
-      expect(
-        getByText("Camera permission is required to take a photo.")
-      ).toBeTruthy()
-    );
-  });
-
-  it("displays error message on image processing failure", async () => {
-    ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
-      canceled: false,
-      assets: [{ uri: "test-uri", base64: "test-base64" }],
-    });
-
-    global.fetch.mockImplementationOnce(() =>
-      Promise.resolve({
-        ok: false,
-        json: () => Promise.resolve({ choices: [] }),
-      })
+          { status: 200, headers: { "Content-Type": "application/json" } }
+        )
+      )
    );

    const { getByText } = render(
      <ChipDetection updateChipCount={mockUpdateChipCount} />
    );
-    fireEvent.press(getByText("Pick an Image"));
-
-    await waitFor(() =>
-      expect(getByText("Failed to analyze the image.")).toBeTruthy()
-    );
-  });
-
-  it("handles valid API response correctly", async () => {
-    ImagePicker.launchImageLibraryAsync.mockResolvedValueOnce({
-      canceled: false,
-      assets: [{ uri: "test-uri", base64: "test-base64" }],
-    });
-
-    global.fetch.mockImplementationOnce(() =>
-      Promise.resolve({
-        ok: true,
-        json: () =>
-          Promise.resolve({
-            choices: [
-              {
-                message: {
-                  content: JSON.stringify({ red: 5, green: 3 }),
-                },
-              },
-            ],
-          }),
-      })
-    );
-
-    const { getByText } = render(
-      <ChipDetection updateChipCount={mockUpdateChipCount} />
-    );
-    fireEvent.press(getByText("Pick an Image"));
+    fireEvent.press(getByText(/pick an image/i));

    await waitFor(() =>
      expect(mockUpdateChipCount).toHaveBeenCalledWith({
        red: 5,
        green: 3,
+        blue: 0,
      })
    );
  });
--- a/components/tests/ChipDistributionSummary.test.tsx
+++ b/components/tests/ChipDistributionSummary.test.tsx
@ -1,76 +1,59 @@
 import React from "react";
-import { render } from "@testing-library/react-native";
+import { Alert } from "react-native";
+
+import { fireEvent, render } from "@testing-library/react-native";
 import ChipDistributionSummary from "../ChipDistributionSummary";

+jest.mock("@expo/vector-icons", () => {
+  const { Text } = require("react-native");
+  return {
+    MaterialIcons: () => <Text>TestIcon</Text>,
+  };
+});
+
 describe("ChipDistributionSummary Component", () => {
  test("renders correctly with valid data", () => {
    const playerCount = 4;
    const totalChipsCount = [100, 80, 60, 40, 20];
-    const colors = ["WHITE", "RED", "GREEN", "BLUE", "BLACK"];
    const buyInAmount = 20;
+    const expectedDistribution = [16, 12, 8, 6, 2];
+    const expectedDenominations = [0.05, 0.1, 0.25, 1, 5];

-    const expectedDistribution = [2, 2, 1, 2, 2];
-    const expectedDenominations = [0.5, 1, 2, 2.5, 5];
-
-    const { getByText, getAllByText } = render(
+    const { getByText } = render(
      <ChipDistributionSummary
        playerCount={playerCount}
        buyInAmount={buyInAmount}
        totalChipsCount={totalChipsCount}
+        selectedCurrency={"$"}
      />
    );

-    expect(getByText("Distribution & Denomination")).toBeTruthy();
-
    expectedDistribution.forEach((count, index) => {
-      expect(getAllByText(new RegExp(`${count} chips:`, "i"))).toBeTruthy();
-      expect(
-        getByText(new RegExp(`\\$${expectedDenominations[index]} each`, "i"))
-      ).toBeTruthy();
-    });
-  });
-
-  // Case not currently supported
-  test.skip("renders fallback message when no valid distribution", () => {
-    const { getByText } = render(
-      <ChipDistributionSummary
-        playerCount={0}
-        buyInAmount={20}
-        totalChipsCount={[]}
-      />
-    );
-    expect(getByText("No valid distribution calculated yet.")).toBeTruthy();
-  });
-
-  // Case not currently supported
-  test.skip("scales down chips if exceeding MAX_CHIPS", () => {
-    const playerCount = 2;
-    let totalChipsCount = [300, 400, 500, 600, 700];
-    const MAX_CHIPS = 500;
-    const totalChips = totalChipsCount.reduce((sum, count) => sum + count, 0);
-
-    if (totalChips > MAX_CHIPS) {
-      const scaleFactor = MAX_CHIPS / totalChips;
-      totalChipsCount = totalChipsCount.map((count) =>
-        Math.round(count * scaleFactor)
+      const regex = new RegExp(
+        `^${count}\\s+chips:\\s+\\$${expectedDenominations[index]}\\s+Each$`,
+        "i"
      );
-    }
-
-    const expectedDistribution = [30, 40, 50, 60, 70]; // Adjust to match actual component calculations
+      expect(getByText(regex)).toBeTruthy();
+    });
+  });

+  test("renders warning message when needed", async () => {
    const { getByText } = render(
      <ChipDistributionSummary
-        playerCount={playerCount}
-        buyInAmount={100}
-        totalChipsCount={totalChipsCount}
+        playerCount={6}
+        buyInAmount={25}
+        selectedCurrency={"$"}
+        totalChipsCount={[100, 50]}
      />
    );
+    const warning = getByText("TestIcon");
+    expect(warning).toBeTruthy();

-    expect(getByText("Distribution & Denomination")).toBeTruthy();
-
-    expectedDistribution.forEach((count, index) => {
-      expect(getByText(new RegExp(`${count} chips:`, "i"))).toBeTruthy();
-      // expect(getByText(new RegExp(`$${count} each`, "i"))).toBeTruthy();
-    });
+    jest.spyOn(Alert, "alert");
+    fireEvent.press(warning);
+    expect(Alert.alert).toHaveBeenCalledWith(
+      "Warning",
+      `Be advised that the value of the distributed chips does not equal the buy-in for these inputs.\n\nHowever, results shown are fair to all players`
+    );
  });
 });
--- a/components/tests/ChipsSelector.test.tsx
+++ b/components/tests/ChipsSelector.test.tsx
@ -3,13 +3,19 @@ import {
  userEvent,
  render,
  screen,
-  waitForElementToBeRemoved,
  fireEvent,
 } from "@testing-library/react-native";
 import ChipsSelector from "@/components/ChipsSelector";

 const TOTAL_CHIPS_COUNT = [100, 80, 60, 40, 20];

+jest.mock("@expo/vector-icons", () => {
+  const { Text } = require("react-native");
+  return {
+    MaterialCommunityIcons: () => <Text>TestIcon</Text>,
+  };
+});
+
 const mocktTotalChipsCount = jest.fn();
 const mockSetNumberOfChips = jest.fn();

@ -48,7 +54,8 @@ describe("tests for ChipsSelector", () => {
    const green = screen.getByText("60");
    expect(green).toHaveStyle({ color: "green" });

-    userEvent.press(green);
+    fireEvent.press(green);
+
    const modalLabel = await screen.findByText(/number of green chips/i);
    expect(modalLabel).toBeDefined();

@ -73,27 +80,16 @@ describe("tests for ChipsSelector", () => {
      TOTAL_CHIPS_COUNT[4],
    ]);
  });
-  // skip: There is a jest/DOM issue with the button interaction, despite working correctly in-app. Documented to resolve.
-  it.skip("test dec/inc buttons", async () => {
-    rend();

-    const blue = screen.getByText(TOTAL_CHIPS_COUNT[3].toString());
-    const black = screen.getByText(TOTAL_CHIPS_COUNT[4].toString());
+  it("test dec/inc buttons", async () => {
+    rend();
    const decrement = screen.getByRole("button", { name: /-/i });
    const increment = screen.getByRole("button", { name: /\+/i });

    fireEvent.press(decrement);
-    fireEvent.press(decrement);
-
-    // Test that elements are removed after fireEvent
-    await waitForElementToBeRemoved(() => blue);
-    await waitForElementToBeRemoved(() => black);
+    expect(mockSetNumberOfChips).toHaveBeenCalledWith(4);

    fireEvent.press(increment);
-    fireEvent.press(increment);
-
-    // Test that new elements re-appear, correctly
-    const blue1 = screen.getByText(TOTAL_CHIPS_COUNT[3].toString());
-    const black1 = screen.getByText(TOTAL_CHIPS_COUNT[4].toString());
+    expect(mockSetNumberOfChips).toHaveBeenCalledWith(4);
  });
 });
--- a/components/tests/CurrencySelector.test.tsx
+++ b/components/tests/CurrencySelector.test.tsx
@ -0,0 +1,48 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react-native";
+import CurrencySelector from "@/components/CurrencySelector";
+
+describe("CurrencySelector Component", () => {
+  const mockSetSelectedCurrency = jest.fn();
+
+  test("renders CurrencySelector component correctly", () => {
+    const { getByText, getByTestId } = render(
+      <CurrencySelector
+        selectedCurrency="$"
+        setSelectedCurrency={mockSetSelectedCurrency}
+      />
+    );
+
+    expect(getByTestId("currency-picker")).toBeTruthy(); // Check Picker exists
+  });
+
+  test("calls setSelectedCurrency when a new currency is selected", () => {
+    const { getByTestId } = render(
+      <CurrencySelector
+        selectedCurrency="$"
+        setSelectedCurrency={mockSetSelectedCurrency}
+      />
+    );
+
+    const picker = getByTestId("currency-picker"); // Get Picker
+
+    fireEvent(picker, "onValueChange", "€"); // Simulate selecting Euro (€)
+
+    expect(mockSetSelectedCurrency).toHaveBeenCalledWith("€");
+  });
+
+  test("updates selected currency when Picker value changes", () => {
+    const { getByTestId } = render(
+      <CurrencySelector
+        selectedCurrency="€"
+        setSelectedCurrency={mockSetSelectedCurrency}
+      />
+    );
+
+    const picker = getByTestId("currency-picker");
+
+    fireEvent(picker, "onValueChange", "$"); // Simulate selecting USD ($)
+
+    expect(mockSetSelectedCurrency).toHaveBeenCalledWith("$");
+  });
+});
--- a/components/tests/PlayerSelector.test.tsx
+++ b/components/tests/PlayerSelector.test.tsx
@ -9,7 +9,6 @@ describe("PlayerSelector Component", () => {
      <PlayerSelector playerCount={4} setPlayerCount={setPlayerCount} />
    );

-    expect(getByText("Select Number of Players:")).toBeTruthy();
    expect(getByText("4")).toBeTruthy();
    expect(getByRole("button", { name: "-" })).toBeTruthy();
    expect(getByRole("button", { name: "+" })).toBeTruthy();
--- a/containers/Button.tsx
+++ b/containers/Button.tsx
@ -0,0 +1,82 @@
+import { COLORS } from "@/styles/styles";
+import React, { useMemo } from "react";
+import {
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  useColorScheme,
+} from "react-native";
+
+interface ButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  size?: "normal" | "small";
+}
+
+const Button: React.FC<ButtonProps> = ({
+  title,
+  onPress,
+  disabled,
+  size = "normal",
+}) => {
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="button"
+      style={[
+        size == "normal" ? styles.button : styles.buttonSmall,
+        { backgroundColor: colors.PRIMARY },
+        disabled && styles.disabled,
+      ]}
+    >
+      <Text
+        style={[
+          size == "normal" ? styles.buttonText : styles.buttonTextSmall,
+          { color: colors.TEXT },
+        ]}
+      >
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 10,
+    paddingHorizontal: 20,
+    borderRadius: 8,
+    marginHorizontal: 5,
+    marginVertical: 5,
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  buttonSmall: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 8,
+    marginHorizontal: 2,
+    marginVertical: 2,
+  },
+  buttonTextSmall: {
+    fontSize: 12,
+    fontWeight: "bold",
+    textAlign: "center",
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export default Button;
--- a/containers/Picker.tsx
+++ b/containers/Picker.tsx
@ -0,0 +1,49 @@
+import styles, { COLORS } from "@/styles/styles";
+import { PickerItemProps, PickerProps } from "@react-native-picker/picker";
+import { useMemo } from "react";
+import { useColorScheme, View } from "react-native";
+import { Picker as RNPicker } from "@react-native-picker/picker";
+
+export const PickerItem: React.FC<PickerItemProps> = (props) => {
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+
+  return (
+    <RNPicker.Item
+      style={[
+        styles.pickerItem,
+        { color: colors.TEXT, backgroundColor: colors.PRIMARY },
+      ]}
+      {...props}
+    />
+  );
+};
+
+export const Picker: React.FC<PickerProps> = (props) => {
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+
+  return (
+    <View style={styles.pickerWrapper}>
+      <RNPicker
+        style={[
+          styles.picker,
+          {
+            color: colors.TEXT,
+            backgroundColor: colors.PRIMARY,
+          },
+        ]}
+        dropdownIconColor={colors.TEXT}
+        {...props}
+      />
+    </View>
+  );
+};
--- a/containers/Section.tsx
+++ b/containers/Section.tsx
@ -0,0 +1,83 @@
+import { View, Text, StyleSheet, useColorScheme } from "react-native";
+import React, { useMemo } from "react";
+import { MaterialIcons } from "@expo/vector-icons";
+import globalStyles, { COLORS } from "@/styles/styles";
+
+const titleCase = (input: string) =>
+  input
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+
+// Wrapper container for styling purposes
+const Section = ({
+  title,
+  iconName,
+  children,
+  orientation = "column",
+  contentStyle = {},
+}: {
+  title: string;
+  iconName: string | any;
+  children: React.JSX.Element;
+  orientation?: "row" | "column";
+  contentStyle?: object;
+}) => {
+  const colorScheme = useColorScheme();
+  const darkMode = useMemo(() => colorScheme === "dark", [colorScheme]);
+  const colors = useMemo(
+    () => (darkMode ? COLORS.DARK : COLORS.LIGHT),
+    [darkMode]
+  );
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <MaterialIcons
+          style={styles.icon}
+          name={iconName}
+          size={30}
+          color={colors.TEXT}
+        />
+        <Text style={[styles.title, { color: colors.TEXT }]}>
+          {titleCase(title)}
+        </Text>
+      </View>
+      <View
+        style={{
+          ...styles.content,
+          ...contentStyle,
+          flexDirection: orientation,
+        }}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 20,
+    display: "flex",
+    alignContent: "center",
+    justifyContent: "center",
+  },
+  header: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 5,
+    marginBottom: 10,
+  },
+  icon: {},
+  title: {
+    ...globalStyles.h1,
+  },
+  content: {
+    display: "flex",
+    justifyContent: "space-evenly",
+    gap: 5,
+  },
+});
+
+export default Section;
--- a/containers/tests/Section.test.tsx
+++ b/containers/tests/Section.test.tsx
@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react-native";
+import Section from "../Section";
+import { Text } from "react-native";
+import React from "react";
+
+jest.mock("@expo/vector-icons", () => {
+  const { Text } = require("react-native");
+  return {
+    MaterialIcons: () => <Text testID={"test-icon"}>TestIcon</Text>,
+  };
+});
+
+const TITLE = "Select the weather";
+const rend = () =>
+  render(
+    <Section title={TITLE} iconName={"test-icon"}>
+      <Text>child</Text>
+    </Section>
+  );
+describe("tests for the Section HOC Component", () => {
+  it("everything expected appears", () => {
+    rend();
+    const title = screen.getByText(/select the weather/i);
+    expect(title).toBeTruthy();
+
+    const child = screen.getByText("child");
+    expect(child).toBeTruthy();
+
+    const icon = screen.getByTestId("test-icon");
+    expect(icon).toBeTruthy();
+  });
+});
--- a/i18n/en.json
+++ b/i18n/en.json
@ -0,0 +1,54 @@
+{
+  "translation": {
+    "poker_chips_helper": "Poker Chips Helper",
+    "select_currency": "Select Currency",
+    "usd": "USD ($)",
+    "euro": "Euro (€)",
+    "pound": "Pound (£)",
+    "inr": "INR (₹)",
+    "select_number_of_players": "Select the Number of Players:",
+    "select_buyin_amount": "Select Buy-in Amount:",
+    "custom_buy_in": "Or, enter a custom amount:",
+    "selected_buy_in": "Selected Buy-in:",
+    "none": "None",
+    "pick_an_image": "Pick an image",
+    "take_a_photo": "Take a photo",
+    "chips": "chips",
+    "number_of_chips": "Number of {{color}} chips",
+    "accept": "Accept",
+    "distribution_and_denomination": "Distribution & Denomination",
+    "pot": "Pot",
+    "total_value": "Total Value",
+    "each": "Each",
+    "select_language": "Select Language",
+    "english": "English",
+    "spanish": "Spanish",
+    "settings": "Settings",
+    "camera_permission_required": "Camera permission is required to take a photo.",
+    "how_many_chips_by_color": "How many poker chips are there for each color? Return structured JSON.",
+    "invalid_response": "Invalid response from API.",
+    "failed_to_analyze_image": "Failed to analyze the image.",
+    "state_saved_successfully": "State saved successfully",
+    "state_saved": "State saved to {{slot}}",
+    "state_save_failed": "Failed to save state",
+    "success": "Success",
+    "error": "Error",
+    "failed_to_save_state": "Failed to save state.",
+    "state_loaded_from": "State loaded from",
+    "info": "Info",
+    "warning": "Warning",
+    "no_saved_state_found": "No saved state found.",
+    "automatic_chip_detection": "Automatic Chip Detection",
+    "manual_chip_adjustment": "Manual Chip Adjustment",
+    "save_and_load": "Save & Load",
+    "save_slot_1": "Save\nSlot 1",
+    "save_slot_2": "Save\nSlot 2",
+    "load_slot_1": "Load\nSlot 1",
+    "load_slot_2": "Load\nSlot 2",
+    "please_select_valid_buyin": "Please select a valid buy-in amount",
+    "chip_value_warn": "Be advised that the value of the distributed chips does not equal the buy-in for these inputs.\n\nHowever, results shown are fair to all players",
+    "appearance": "Appearance",
+    "switch_to_dark_mode": "Switch to Dark Mode",
+    "switch_to_light_mode": "Switch to Light Mode"
+  }
+}
--- a/i18n/es.json
+++ b/i18n/es.json
@ -0,0 +1,55 @@
+{
+  "translation": {
+    "poker_chips_helper": "Ayudante de Fichas de Póker",
+    "select_currency": "Seleccionar moneda",
+    "usd": "USD ($)",
+    "euro": "Euro (€)",
+    "pound": "Libra (£)",
+    "inr": "INR (₹)",
+    "select_number_of_players": "Seleccionar número de jugadores:",
+    "select_buyin_amount": "Seleccionar cantidad de buy-in:",
+    "custom_buy_in": "O, ingresa una cantidad personalizada:",
+    "selected_buy_in": "Buy-in seleccionado:",
+    "none": "Ninguno",
+    "pick_an_image": "Elige una imagen",
+    "take_a_photo": "Tomar una foto",
+    "chips": "fichas",
+    "number_of_chips": "Número de {{color}} fichas",
+    "accept": "Aceptar",
+    "distribution_and_denomination": "Distribución y Denominación",
+    "pot": "Olla",
+    "total_value": "Valor total",
+    "each": "Cada",
+    "select_language": "Seleccionar idioma",
+    "english": "Inglés",
+    "spanish": "Español",
+    "settings": "Configuraciones",
+    "camera_permission_required": "Se requiere permiso de cámara para tomar una foto.",
+    "how_many_chips_by_color": "¿Cuántas fichas de póker hay de cada color? Devuelve JSON estructurado.",
+    "invalid_response": "Respuesta no válida de la API.",
+    "failed_to_analyze_image": "No se pudo analizar la imagen",
+    "state_saved_successfully": "Estado guardado con éxito",
+    "state_saved": "Estado guardado en {{slot}}",
+    "state_save_failed": "Error al guardar el estado",
+    "success": "Éxito",
+    "state_saved_to": "Estado guardado en",
+    "error": "Error",
+    "failed_to_save_state": "No se pudo guardar el estado.",
+    "state_loaded_from": "Estado cargado desde",
+    "info": "Información",
+    "warning": "Advertencia",
+    "no_saved_state_found": "No se encontró estado guardado.",
+    "automatic_chip_detection": "Detección automática de fichas",
+    "manual_chip_adjustment": "Ajuste manual de fichas",
+    "save_and_load": "Guardar & Cargar",
+    "save_slot_1": "Guardar\nSlot 1",
+    "save_slot_2": "Guardar\nSlot 2",
+    "load_slot_1": "Cargar\nSlot 1",
+    "load_slot_2": "Cargar\nSlot 2",
+    "please_select_valid_buyin": "Por favor seleccione una cantidad de buy-in válida",
+    "chip_value_warn": "Tenga en cuenta que el valor de las fichas distribuidas no es igual al buy-in para estas entradas.\n\nSin embargo, los resultados que se muestran son justos para todos los jugadores.",
+    "appearance": "Apariencia",
+    "switch_to_dark_mode": "Cambiar a Modo Oscuro",
+    "switch_to_light_mode": "Cambiar a Modo Claro"
+  }
+}
--- a/i18n/i18n.ts
+++ b/i18n/i18n.ts
@ -0,0 +1,22 @@
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import * as Localization from "expo-localization";
+import en from "./en.json";
+import es from "./es.json";
+const resources = {
+  en,
+  es,
+};
+
+const detectedLanguage = Localization.locale.split("-")[0] || "en";
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: detectedLanguage,
+  fallbackLng: "en",
+  interpolation: {
+    escapeValue: false,
+  },
+});
+
+export default i18n;
--- a/package-lock.json
+++ b/package-lock.json
@ -9,9 +9,11 @@
      "version": "1.0.0",
      "dependencies": {
        "@expo/vector-icons": "14.0.4",
+        "@react-native-async-storage/async-storage": "^2.1.1",
+        "@react-native-picker/picker": "^2.11.0",
        "@react-navigation/bottom-tabs": "7.2.0",
        "@react-navigation/native": "7.0.14",
-        "expo": "52.0.37",
+        "expo": "^52.0.37",
        "expo-blur": "14.0.3",
        "expo-constants": "17.0.7",
        "expo-file-system": "18.0.11",
@ -19,14 +21,17 @@
        "expo-haptics": "14.0.1",
        "expo-image-picker": "16.0.6",
        "expo-linking": "7.0.5",
+        "expo-localization": "~16.0.1",
        "expo-router": "4.0.17",
        "expo-splash-screen": "0.29.22",
        "expo-status-bar": "2.0.1",
        "expo-symbols": "0.2.2",
        "expo-system-ui": "4.0.8",
        "expo-web-browser": "14.0.2",
+        "i18next": "^24.2.2",
        "react": "18.3.1",
        "react-dom": "18.3.1",
+        "react-i18next": "^15.4.1",
        "react-native": "0.76.7",
        "react-native-gesture-handler": "2.20.2",
        "react-native-reanimated": "3.16.7",
@ -57,8 +62,7 @@
        "typescript": "5.7.3"
      },
      "engines": {
-        "node": ">=22.0.0 <23.0.0",
-        "npm": ">=8.0.0"
+        "node": ">=22.0.0 <23.0.0"
      }
    },
    "node_modules/@0no-co/graphql.web": {
@ -3914,6 +3918,31 @@
        "react": "^16.8 || ^17.0 || ^18.0"
      }
    },
+    "node_modules/@react-native-async-storage/async-storage": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-2.1.1.tgz",
+      "integrity": "sha512-UqlnxddwM3rlCHvteFz+HpIXjqhQM7GkBgVQ9sMvMdl8QVOJQDjG7BODCUvabysMDw+9QfMFlLiOI8U6c0VzzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "merge-options": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react-native": "^0.0.0-0 || >=0.65 <1.0"
+      }
+    },
+    "node_modules/@react-native-picker/picker": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/@react-native-picker/picker/-/picker-2.11.0.tgz",
+      "integrity": "sha512-QuZU6gbxmOID5zZgd/H90NgBnbJ3VV6qVzp6c7/dDrmWdX8S0X5YFYgDcQFjE3dRen9wB9FWnj2VVdPU64adSg==",
+      "license": "MIT",
+      "workspaces": [
+        "example"
+      ],
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/@react-native/assets-registry": {
      "version": "0.76.7",
      "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.76.7.tgz",
@ -8211,6 +8240,19 @@
        "react-native": "*"
      }
    },
+    "node_modules/expo-localization": {
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/expo-localization/-/expo-localization-16.0.1.tgz",
+      "integrity": "sha512-kUrXiV/Pq9r7cG+TMt+Qa49IUQ9Y/czVwen4hmiboTclTopcWdIeCzYZv6JGtufoPpjEO9vVx1QJrXYl9V2u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "rtl-detect": "^1.0.2"
+      },
+      "peerDependencies": {
+        "expo": "*",
+        "react": "*"
+      }
+    },
    "node_modules/expo-modules-autolinking": {
      "version": "2.0.8",
      "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-2.0.8.tgz",
@ -9310,6 +9352,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
    "node_modules/http-errors": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
@ -9379,6 +9430,37 @@
      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
      "license": "BSD-3-Clause"
    },
+    "node_modules/i18next": {
+      "version": "24.2.2",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-24.2.2.tgz",
+      "integrity": "sha512-NE6i86lBCKRYZa5TaUDkU5S4HFgLIEJRLr3Whf2psgaxBleQ2LC1YW1Vc+SCgkAW7VEzndT6al6+CzegSUHcTQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/iconv-lite": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@ -9905,6 +9987,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-plain-obj": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+      "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-plain-object": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@ -12268,6 +12359,18 @@
      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
      "license": "MIT"
    },
+    "node_modules/merge-options": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/merge-options/-/merge-options-3.0.4.tgz",
+      "integrity": "sha512-2Sug1+knBjkaMsMgf1ctR1Ujx+Ayku4EdJN4Z+C2+JzoeF7A3OZ9KM2GY0CpQS51NR61LTurMJrRKPhSs3ZRTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-obj": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
    "node_modules/merge-stream": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@ -14243,6 +14346,28 @@
        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0"
      }
    },
+    "node_modules/react-i18next": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.4.1.tgz",
+      "integrity": "sha512-ahGab+IaSgZmNPYXdV1n+OYky95TGpFwnKRflX/16dY04DsYYKHtVLjeny7sBSCREEcoMbAgSkFiGLF5g5Oofw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.0",
+        "html-parse-stringify": "^3.0.1"
+      },
+      "peerDependencies": {
+        "i18next": ">= 23.2.3",
+        "react": ">= 16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-is": {
      "version": "18.3.1",
      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@ -14957,6 +15082,12 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/rtl-detect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/rtl-detect/-/rtl-detect-1.1.2.tgz",
+      "integrity": "sha512-PGMBq03+TTG/p/cRB7HCLKJ1MgDIi07+QU1faSjiYRfmY5UsAttV9Hs08jDAHVwcOwmVLcSJkpwyfXszVjWfIQ==",
+      "license": "BSD-3-Clause"
+    },
    "node_modules/run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@ -17086,6 +17217,15 @@
      "integrity": "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==",
      "license": "MIT"
    },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/w3c-xmlserializer": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
--- a/package.json
+++ b/package.json
@ -5,8 +5,8 @@
  "scripts": {
    "start": "expo start",
    "reset-project": "node ./scripts/reset-project.js",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios",
    "web": "expo start --web",
    "test": "jest --watchAll",
    "lint": "expo lint"
@ -19,9 +19,11 @@
  },
  "dependencies": {
    "@expo/vector-icons": "14.0.4",
+    "@react-native-async-storage/async-storage": "^2.1.1",
+    "@react-native-picker/picker": "^2.11.0",
    "@react-navigation/bottom-tabs": "7.2.0",
    "@react-navigation/native": "7.0.14",
-    "expo": "52.0.37",
+    "expo": "^52.0.37",
    "expo-blur": "14.0.3",
    "expo-constants": "17.0.7",
    "expo-file-system": "18.0.11",
@ -29,14 +31,17 @@
    "expo-haptics": "14.0.1",
    "expo-image-picker": "16.0.6",
    "expo-linking": "7.0.5",
+    "expo-localization": "~16.0.1",
    "expo-router": "4.0.17",
    "expo-splash-screen": "0.29.22",
    "expo-status-bar": "2.0.1",
    "expo-symbols": "0.2.2",
    "expo-system-ui": "4.0.8",
    "expo-web-browser": "14.0.2",
+    "i18next": "^24.2.2",
    "react": "18.3.1",
    "react-dom": "18.3.1",
+    "react-i18next": "^15.4.1",
    "react-native": "0.76.7",
    "react-native-gesture-handler": "2.20.2",
    "react-native-reanimated": "3.16.7",
--- a/styles/styles.ts
+++ b/styles/styles.ts
@ -0,0 +1,72 @@
+import { StyleSheet } from "react-native";
+
+export const COLORS = {
+  WARNING: "#c79c28",
+  LIGHT: {
+    TEXT: "black",
+    PRIMARY: "lightgrey",
+    SECONDARY: "azure",
+    BACKGROUND: "ghostwhite",
+    DISABLED: "gray",
+  },
+  DARK: {
+    TEXT: "white",
+    PRIMARY: "black",
+    SECONDARY: "teal",
+    BACKGROUND: "dimgrey",
+    DISABLED: "gray",
+  },
+};
+
+const GlobalStyles = StyleSheet.create({
+  scrollView: {},
+  scrollViewContent: {
+    padding: 15,
+  },
+
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    gap: 10,
+  },
+
+  h1: { fontSize: 19, fontWeight: "bold" },
+  h2: { fontSize: 18, fontWeight: "normal" },
+  p: {
+    fontSize: 16,
+    color: "#333",
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ccc",
+    padding: 8,
+    marginVertical: 10,
+    borderRadius: 5,
+  },
+  modal: {},
+
+  button: {
+    backgroundColor: "#007bff",
+    padding: 10,
+    borderRadius: 5,
+  },
+  shadow: {
+    textShadowColor: "black",
+    textShadowOffset: { width: 0, height: 0 },
+    textShadowRadius: 10,
+  },
+  picker: {
+    borderRadius: 10,
+    height: 55,
+    width: 150,
+  },
+  pickerItem: {},
+  pickerWrapper: {
+    borderRadius: 10,
+    overflow: "hidden",
+  },
+});
+
+export default GlobalStyles;
--- a/util/CalculatorState.ts
+++ b/util/CalculatorState.ts
@ -0,0 +1,37 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORAGE_KEYS = {
+  SLOT1: "@poker_state_slot1",
+  SLOT2: "@poker_state_slot2",
+};
+
+export interface PokerState {
+  playerCount: number;
+  buyInAmount: number | null;
+  numberOfChips: number;
+  totalChipsCount: number[];
+  selectedCurrency: string;
+}
+
+export const saveState = async (
+  slot: keyof typeof STORAGE_KEYS,
+  state: PokerState
+) => {
+  try {
+    await AsyncStorage.setItem(STORAGE_KEYS[slot], JSON.stringify(state));
+    return { success: true, message: `State saved to ${slot}` };
+  } catch (error) {
+    return { success: false, message: "Failed to save state" };
+  }
+};
+
+export const loadState = async (
+  slot: keyof typeof STORAGE_KEYS
+): Promise<PokerState | null> => {
+  try {
+    const storedState = await AsyncStorage.getItem(STORAGE_KEYS[slot]);
+    return storedState ? JSON.parse(storedState) : null;
+  } catch (error) {
+    return null;
+  }
+};
--- a/util/PersistentState.ts
+++ b/util/PersistentState.ts
@ -0,0 +1,39 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const STORAGE_KEY = "@poker_calculator_state";
+
+export interface PokerState {
+  playerCount: number;
+  buyInAmount: number | null;
+  numberOfChips: number;
+  totalChipsCount: number[];
+  selectedCurrency: string;
+}
+
+const DEFAULT_STATE: PokerState = {
+  playerCount: 0,
+  buyInAmount: null,
+  numberOfChips: 0,
+  totalChipsCount: [],
+  selectedCurrency: "$",
+};
+
+// 🔹 Save state with currency
+export const savePersistentState = async (state: PokerState) => {
+  try {
+    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    return { success: true, message: "State saved successfully" };
+  } catch (error) {
+    return { success: false, message: "Failed to save state" };
+  }
+};
+
+// 🔹 Load state with currency
+export const loadPersistentState = async (): Promise<PokerState> => {
+  try {
+    const storedState = await AsyncStorage.getItem(STORAGE_KEY);
+    return storedState ? JSON.parse(storedState) : DEFAULT_STATE; // Ensure default values
+  } catch (error) {
+    return DEFAULT_STATE;
+  }
+};
--- a/util/context.ts
+++ b/util/context.ts
@ -0,0 +1,13 @@
+import React, { createContext } from "react";
+
+export interface IAppContext {
+  showSettings: boolean;
+}
+
+const defaultContext: IAppContext = {
+  showSettings: false,
+};
+
+const AppContext = createContext<IAppContext>(defaultContext);
+
+export default AppContext;
--- a/util/tests/CalculatorState.test.ts
+++ b/util/tests/CalculatorState.test.ts
@ -0,0 +1,86 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { saveState, loadState, PokerState } from "@/util/CalculatorState";
+
+// Mock AsyncStorage
+jest.mock("@react-native-async-storage/async-storage", () =>
+  require("@react-native-async-storage/async-storage/jest/async-storage-mock")
+);
+
+describe("CalculatorState.ts", () => {
+  const mockState: PokerState = {
+    playerCount: 4,
+    buyInAmount: 50,
+    numberOfChips: 5,
+    totalChipsCount: [100, 200, 150, 50, 75],
+    selectedCurrency: "$", // Including selectedCurrency in mockState
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should save state successfully to SLOT1", async () => {
+    await saveState("SLOT1", mockState);
+    expect(AsyncStorage.setItem).toHaveBeenCalledWith(
+      "@poker_state_slot1",
+      JSON.stringify(mockState)
+    );
+  });
+
+  it("should save state successfully to SLOT2", async () => {
+    await saveState("SLOT2", mockState);
+    expect(AsyncStorage.setItem).toHaveBeenCalledWith(
+      "@poker_state_slot2",
+      JSON.stringify(mockState)
+    );
+  });
+
+  it("should fail to save state if an error occurs", async () => {
+    jest
+      .spyOn(AsyncStorage, "setItem")
+      .mockRejectedValueOnce(new Error("Failed to save"));
+    const result = await saveState("SLOT1", mockState);
+    expect(result.success).toBe(false);
+    expect(result.message).toBe("Failed to save state");
+  });
+
+  it("should load state successfully from SLOT1", async () => {
+    await AsyncStorage.setItem("@poker_state_slot1", JSON.stringify(mockState));
+    const result = await loadState("SLOT1");
+    expect(result).toEqual(mockState);
+  });
+
+  it("should load state successfully from SLOT2", async () => {
+    await AsyncStorage.setItem("@poker_state_slot2", JSON.stringify(mockState));
+    const result = await loadState("SLOT2");
+    expect(result).toEqual(mockState);
+  });
+
+  it("should return null if no state is found in SLOT1", async () => {
+    jest.spyOn(AsyncStorage, "getItem").mockResolvedValueOnce(null);
+    const result = await loadState("SLOT1");
+    expect(result).toBeNull();
+  });
+
+  it("should return null if no state is found in SLOT2", async () => {
+    jest.spyOn(AsyncStorage, "getItem").mockResolvedValueOnce(null);
+    const result = await loadState("SLOT2");
+    expect(result).toBeNull();
+  });
+
+  it("should return null if an error occurs while loading state from SLOT1", async () => {
+    jest
+      .spyOn(AsyncStorage, "getItem")
+      .mockRejectedValueOnce(new Error("Failed to load"));
+    const result = await loadState("SLOT1");
+    expect(result).toBeNull();
+  });
+
+  it("should return null if an error occurs while loading state from SLOT2", async () => {
+    jest
+      .spyOn(AsyncStorage, "getItem")
+      .mockRejectedValueOnce(new Error("Failed to load"));
+    const result = await loadState("SLOT2");
+    expect(result).toBeNull();
+  });
+});
--- a/util/tests/PersistentState.test.ts
+++ b/util/tests/PersistentState.test.ts
@ -0,0 +1,101 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {
+  savePersistentState,
+  loadPersistentState,
+  PokerState,
+} from "@/util/PersistentState";
+
+jest.mock("@react-native-async-storage/async-storage", () => ({
+  setItem: jest.fn(),
+  getItem: jest.fn(),
+}));
+
+describe("PersistentState.ts", () => {
+  const mockState: PokerState = {
+    playerCount: 4,
+    buyInAmount: 50,
+    numberOfChips: 5,
+    totalChipsCount: [100, 200, 150, 50, 75],
+    selectedCurrency: "$", // Including selectedCurrency in mockState
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should save state successfully", async () => {
+    // Mocking AsyncStorage.setItem to resolve successfully
+    (AsyncStorage.setItem as jest.Mock).mockResolvedValueOnce(undefined);
+
+    const result = await savePersistentState(mockState);
+
+    // Check that the success flag is true and message is as expected
+    expect(result.success).toBe(true);
+    expect(result.message).toBe("State saved successfully");
+
+    // Check that AsyncStorage.setItem was called with the correct parameters
+    expect(AsyncStorage.setItem).toHaveBeenCalledWith(
+      "@poker_calculator_state",
+      JSON.stringify(mockState)
+    );
+  });
+
+  it("should fail to save state if an error occurs", async () => {
+    // Mocking AsyncStorage.setItem to reject with an error
+    (AsyncStorage.setItem as jest.Mock).mockRejectedValueOnce(
+      new Error("Failed to save")
+    );
+
+    const result = await savePersistentState(mockState);
+
+    // Check that the success flag is false and message is as expected
+    expect(result.success).toBe(false);
+    expect(result.message).toBe("Failed to save state");
+  });
+
+  it("should load state successfully", async () => {
+    // Mocking AsyncStorage.getItem to resolve with the mockState
+    (AsyncStorage.getItem as jest.Mock).mockResolvedValueOnce(
+      JSON.stringify(mockState)
+    );
+
+    const result = await loadPersistentState();
+
+    // Check that the loaded state matches the mockState
+    expect(result).toEqual(mockState);
+  });
+
+  it("should load default state if no saved state is found", async () => {
+    // Mocking AsyncStorage.getItem to return null (no saved state)
+    (AsyncStorage.getItem as jest.Mock).mockResolvedValueOnce(null);
+
+    const result = await loadPersistentState();
+
+    // Check that the default state is returned
+    expect(result).toEqual({
+      playerCount: 0,
+      buyInAmount: null,
+      numberOfChips: 0,
+      totalChipsCount: [],
+      selectedCurrency: "$",
+    });
+  });
+
+  it("should return default state if an error occurs while loading", async () => {
+    // Mocking AsyncStorage.getItem to reject with an error
+    (AsyncStorage.getItem as jest.Mock).mockRejectedValueOnce(
+      new Error("Failed to load")
+    );
+
+    const result = await loadPersistentState();
+
+    // Check that the default state is returned on error
+    expect(result).toEqual({
+      playerCount: 0,
+      buyInAmount: null,
+      numberOfChips: 0,
+      totalChipsCount: [],
+      selectedCurrency: "$",
+    });
+  });
+});
Author	SHA1	Message	Date
David Westgate	2b7a9be089	Merge pull request #61 from djwesty/djwesty/60 Address skipped tests	2025-03-18 16:05:34 -07:00
David Westgate	b98d0035d8	remove unused imports	2025-03-18 15:23:25 -07:00
David Westgate	cf0b0332a4	remove uneeded test; fix other skipped tests	2025-03-18 15:21:06 -07:00
Mantasha Altab Noyela	e8898d8a60	Merge pull request #59 from djwesty/MantashaNoyela/22 Changed Styles and Screen Size for Mobile Device	2025-03-18 15:11:30 -07:00
David Westgate	2e5efda69a	abstract picker component; added small buttons; visual tweaks	2025-03-17 23:48:31 -07:00
David Westgate	e720e2e010	global darkmode hook usage; use style abstractions; remove ui wrapper causing issues	2025-03-17 23:10:31 -07:00
MantashaNoyela	68a91a32ad	Moved the dark mode to settings bar	2025-03-17 06:42:59 -07:00
MantashaNoyela	28addf53a5	Fixed issues	2025-03-16 16:08:07 -07:00
MantashaNoyela	533356117a	Changed styles	2025-03-11 06:40:52 -07:00
Vutukuri15	da695be36d	Merge pull request #58 from djwesty/vutukuri15/57 Fixed issue with extra colors of image input # 57	2025-03-10 12:08:51 -07:00
vutukuri15	63ecde6c99	Fixed test code	2025-03-10 12:01:36 -07:00
vutukuri15	430750e3d4	Fixed issue with extra colors of image input	2025-03-09 20:54:47 -07:00
David Westgate	84a77ebb58	Merge pull request #56 from djwesty/djwesty/45 Bug Fix: Image Detection setting chip colors (Issue #45)	2025-03-09 20:19:42 -07:00
David Westgate	a07e0df947	fix	2025-03-09 18:35:35 -07:00
David Westgate	292cd7b797	Merge pull request #55 from djwesty/djwesty/40 Improve Chip Distribution (Issue #40)	2025-03-09 17:55:22 -07:00
David Westgate	de723a5d8a	add warning mechanism	2025-03-09 16:35:02 -07:00
David Westgate	32ce2f9169	change default chip selections	2025-03-09 16:04:20 -07:00
David Westgate	648d815647	fix tests	2025-03-09 15:53:13 -07:00
David Westgate	abdffcef71	fix rounding issue	2025-03-09 15:45:20 -07:00
David Westgate	01303b625a	stop rendering 0 dist chips	2025-03-09 15:10:14 -07:00
David Westgate	ca042b3afb	update buyin label	2025-03-09 15:05:48 -07:00
David Westgate	bfa66d5856	limit ranges for buy in selector	2025-03-09 14:59:08 -07:00
David Westgate	f04496bf24	better distribution with fibbonachi	2025-03-09 14:30:45 -07:00
David Westgate	1216e76381	add back comments	2025-03-09 12:54:39 -07:00
Vutukuri15	31e0a7a995	Merge pull request #54 from djwesty/vutukuri15/53 Fixed text input box for white chips # 53	2025-03-08 12:16:06 -08:00
vutukuri15	c41db0db8b	Fixed text input box for white chips	2025-03-07 11:37:48 -08:00
David Westgate	5265730c0c	Merge pull request #52 from djwesty/djwesty/51 Improve layout of decrement+increment buttons (Issue #51)	2025-03-07 10:39:36 -08:00
David Westgate	07cbfe7172	move buttons around; add optional style prop to section container	2025-03-07 09:18:25 -08:00
Vutukuri15	8b17649e96	Merge pull request #50 from djwesty/vutukuri15/47 Fixed typescript errors # 47	2025-03-05 19:10:36 -08:00
vutukuri15	868d9aec54	Fixed typescript errors	2025-03-05 12:47:51 -08:00
Vutukuri15	b7238d11d4	Merge pull request #49 from djwesty/vutukuri15/35 Implemented Language Selector # 35	2025-03-04 09:11:25 -08:00
vutukuri15	56ce3c9bc2	Implemented changes	2025-03-04 00:35:50 -08:00
vutukuri15	d27743017c	Implemented Language Selector	2025-03-03 16:35:46 -08:00
David Westgate	93cc07c28c	Merge pull request #48 from djwesty/djwesty/39 Consistent Application Styling #39	2025-03-02 16:53:49 -08:00
David Westgate	4b27aea688	style refactor	2025-03-02 16:21:33 -08:00
Vutukuri15	8cc8f006df	Merge pull request #46 from djwesty/vutukuri15/34 Implemented Currency Selector # 34	2025-03-01 12:08:46 -08:00
vutukuri15	624d8b0b1d	Updated index file	2025-02-28 20:58:36 -08:00
vutukuri15	2a3ffc8ca2	Removed unnecessary package	2025-02-28 19:59:29 -08:00
vutukuri15	29abd384d8	Modified requested changes	2025-02-28 19:33:46 -08:00
vutukuri15	297b0fc026	Implementd Currency Selector	2025-02-28 11:19:22 -08:00
Vutukuri15	41791516f7	Merge pull request #44 from djwesty/vutukuri15/43 Fixing icon #43	2025-02-27 18:37:10 -08:00
vutukuri15	a6c0c5c2d3	Fixing icon	2025-02-27 18:13:10 -08:00
David Westgate	ec5521c542	Merge pull request #42 from djwesty/djwesty/41 Added instructions to build APK	2025-02-27 14:50:10 -08:00
Vutukuri15	f7d97cc1c1	Merge pull request #36 from djwesty/vutukuri15/HWtest Update Unit Tests for BuyInSelector Component	2025-02-27 14:47:23 -08:00
David Westgate	c65a3506bd	fix typo	2025-02-27 12:26:15 -08:00
David Westgate	96fe517c6a	added instructions to build APK	2025-02-26 22:38:49 -08:00
Mantasha Altab Noyela	25dc61006b	Merge pull request #38 from djwesty/MantashaNoyela/27 Restores the previous state when reopened	2025-02-26 22:01:48 -08:00
Mantasha Altab Noyela	1ebdaf5c9f	Merge branch 'main' into MantashaNoyela/27	2025-02-25 23:54:00 -08:00
Mantasha Altab Noyela	077f314f20	Merge pull request #37 from djwesty/MantashaNoyela/26 Ability to save and load calculator states into two slots	2025-02-25 23:28:55 -08:00
Mantasha Altab Noyela	9512d92448	Update package.json	2025-02-25 23:21:05 -08:00
Mantasha Altab Noyela	cb44965e30	Update index.tsx I have updated the index file	2025-02-25 23:13:57 -08:00
Mantasha Altab Noyela	a3288e2a31	Update index.tsx	2025-02-25 22:20:02 -08:00
MantashaNoyela	d878e93eb4	Restores the previous state when reopened	2025-02-25 20:46:59 -08:00
MantashaNoyela	9952ea3687	Ability to save and load calculator states into two slots	2025-02-25 20:33:33 -08:00