feat: fiat currency picker (#113)

* feat: fiat currency picker

* fix: replace data source with npm package

* fix: remove save button

---------

Co-authored-by: Roland Bewick <roland.bewick@gmail.com>

package.json

@@ -25,6 +25,7 @@
     "buffer": "^6.0.3",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "currency-list": "^1.0.8",
     "dayjs": "^1.11.10",
     "expo": "~51.0.31",
     "expo-camera": "~15.0.15",

pages/settings/FiatCurrency.tsx

@@ -1,52 +1,53 @@
-import { router } from "expo-router";
 import React from "react";
-import { Keyboard, TouchableWithoutFeedback, View } from "react-native";
-import Toast from "react-native-toast-message";
-import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
+import { View, FlatList, TouchableOpacity } from "react-native";
 import { Text } from "~/components/ui/text";
 import { useAppStore } from "~/lib/state/appStore";
 import Screen from "~/components/Screen";
+import { cn } from "~/lib/utils";
+import CurrencyList from 'currency-list';
+import { router } from "expo-router";
+import Toast from "react-native-toast-message";
+
+const currencies: [string, string][] = Object.entries(CurrencyList.getAll("en_US")).map(([code, details]) => [code, details.name]);
 
 export function FiatCurrency() {
   const [fiatCurrency, setFiatCurrency] = React.useState(
     useAppStore.getState().fiatCurrency,
   );
+
+  function select(iso: string) {
+    setFiatCurrency(iso);
+    useAppStore.getState().setFiatCurrency(fiatCurrency);
+    Toast.show({
+      type: "success",
+      text1: "Fiat currency updated",
+    });
+    router.back();
+  }
+
+  const renderCurrencyItem = ({ item }: { item: [string, string] }) => (
+    <TouchableOpacity
+      className={cn("p-4 flex flex-row gap-2 border-b border-input", item[0] === fiatCurrency && "bg-muted")}
+      onPress={() => select(item[0])}
+    >
+      <Text className={cn("text-lg", item[0] === fiatCurrency && "font-bold2")}>
+        {item[1]}
+      </Text>
+      <Text className="text-lg text-muted-foreground">
+        ({item[0]})
+      </Text>
+    </TouchableOpacity>
+  );
+
   return (
-    <View className="flex-1 flex flex-col p-6 gap-3">
-      <Screen
-        title="Units & Currency"
+    <View className="flex-1 flex flex-col p-6">
+      <Screen title="Fiat Currency" />
+      <FlatList
+        data={currencies}
+        renderItem={renderCurrencyItem}
+        keyExtractor={(item) => item[0]}
+        className="flex-1 mb-4"
       />
-      <TouchableWithoutFeedback
-        onPress={() => {
-          Keyboard.dismiss();
-        }}
-      >
-        <View className="flex-1">
-          <Input
-            autoFocus
-            className="w-full text-center"
-            placeholder="USD"
-            value={fiatCurrency}
-            onChangeText={setFiatCurrency}
-            returnKeyType="done"
-          // aria-errormessage="inputError"
-          />
-        </View>
-      </TouchableWithoutFeedback>
-      <Button
-        size="lg"
-        onPress={() => {
-          useAppStore.getState().setFiatCurrency(fiatCurrency);
-          Toast.show({
-            type: "success",
-            text1: "Fiat currency updated",
-          });
-          router.back();
-        }}
-      >
-        <Text>Save</Text>
-      </Button>
     </View>
   );
 }

pages/settings/Settings.tsx

@@ -2,7 +2,7 @@ import { Link, router } from "expo-router";
 import { Alert, TouchableOpacity, View } from "react-native";
 import { Bitcoin, Egg, Palette, Power, Wallet2 } from "~/components/Icons";
 
-import { DEFAULT_WALLET_NAME } from "~/lib/constants";
+import { DEFAULT_CURRENCY, DEFAULT_WALLET_NAME } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
 import { Text } from "~/components/ui/text";
 import React from "react";
@@ -16,6 +16,7 @@ export function Settings() {
   const [developerCounter, setDeveloperCounter] = React.useState(0);
   const [developerMode, setDeveloperMode] = React.useState(false);
   const { colorScheme, toggleColorScheme } = useColorScheme();
+  const fiatCurrency = useAppStore((store) => store.fiatCurrency);
 
   return (
     <View className="flex-1 flex flex-col p-6 gap-6">
@@ -34,7 +35,10 @@ export function Settings() {
         <TouchableOpacity className="flex flex-row gap-4">
           <Bitcoin className="text-foreground" />
           <Text className="text-foreground font-medium2 text-xl">
-            Units & Currency
+            Fiat Currency
+          </Text>
+          <Text className="text-muted-foreground text-xl">
+            ({fiatCurrency || DEFAULT_CURRENCY})
           </Text>
         </TouchableOpacity>
       </Link>

yarn.lock

@@ -3282,6 +3282,11 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+currency-list@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/currency-list/-/currency-list-1.0.8.tgz#544de80a1b64c6192dbd789aefe610371869616e"
+  integrity sha512-KBUtf8AzoP2WYeAKUYFhhNdHRx8Xw2UoOUnBNVir43RxL96T+iSHMtThtT1DFNtYbbVVyD08ETe3aamn+JX7RA==
+
 dag-map@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/dag-map/-/dag-map-1.0.2.tgz#e8379f041000ed561fc515475c1ed2c85eece8d7"