feat: add all currencies currently supported on coingecko

src/components/AmountEditable.tsx

@@ -22,9 +22,7 @@ import { useI18n } from "~/i18n/context";
 import { Network } from "~/logic/mutinyWalletSetup";
 import { useMegaStore } from "~/state/megaStore";
 import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";
-import { fiatToSats, satsToFiat } from "~/utils";
-
-import { Currency } from "./ChooseCurrency";
+import { Currency, fiatToSats, satsToFiat } from "~/utils";
 
 // Checks the users locale to determine if decimals should be a "." or a ","
 const decimalDigitDivider = Number(1.0)

src/components/ChooseCurrency.tsx

@@ -1,119 +1,37 @@
 import { createForm } from "@modular-forms/solid";
-import { createSignal, Show } from "solid-js";
+import { createSignal, For, Show } from "solid-js";
 import { useNavigate } from "solid-start";
 
-import {
-    Button,
-    ExternalLink,
-    InfoBox,
-    NiceP,
-    SelectField,
-    VStack
-} from "~/components";
+import { Button, ExternalLink, InfoBox, NiceP, VStack } from "~/components";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
-import { eify, timeout } from "~/utils";
-
-export interface Currency {
-    value: string;
-    label: string;
-    hasSymbol?: string;
-    maxFractionalDigits: number;
-}
+import {
+    BTC_OPTION,
+    Currency,
+    eify,
+    FIAT_OPTIONS,
+    timeout,
+    USD_OPTION
+} from "~/utils";
 
 type ChooseCurrencyForm = {
     fiatCurrency: string;
 };
 
-/**
- *  FIAT_OPTIONS is an array of possible currencies
- *  All available currencies can be found here https://api.coingecko.com/api/v3/simple/supported_vs_currencies
- *  @Currency
- *  @param {string} label - should be in the format {Name} {ISO code}
- *  @param {string} values - are uppercase ISO 4217 currency code
- *  @param {string?} hasSymbol - if the currency has a symbol it should be represented as a string
- *  @param {number} maxFractionalDigits - the standard fractional units used by the currency should be set with maxFractionalDigits
- *
- *  Bitcoin is represented as:
- *  {
- *      label: "bitcoin BTC",
- *      value: "BTC",
- *      hasSymbol: "₿",
- *      maxFractionalDigits: 8
- *  }
- */
-
-export const FIAT_OPTIONS: Currency[] = [
-    {
-        label: "Bitcoin BTC",
-        value: "BTC",
-        hasSymbol: "₿",
-        maxFractionalDigits: 8
-    },
-    {
-        label: "United States Dollar USD",
-        value: "USD",
-        hasSymbol: "$",
-        maxFractionalDigits: 2
-    },
-    { label: "Swiss Franc CHF", value: "CHF", maxFractionalDigits: 2 },
-    {
-        label: "Chinese Yuan CNY",
-        value: "CNY",
-        hasSymbol: "¥",
-        maxFractionalDigits: 2
-    },
-    {
-        label: "Euro EUR",
-        value: "EUR",
-        hasSymbol: "€",
-        maxFractionalDigits: 2
-    },
-    {
-        label: "Brazilian Real BRL",
-        value: "BRL",
-        hasSymbol: "R$",
-        maxFractionalDigits: 2
-    },
-    {
-        label: "British Pound GBP",
-        value: "GBP",
-        hasSymbol: "₤",
-        maxFractionalDigits: 2
-    },
-    {
-        label: "Australia Dollar AUD",
-        value: "AUD",
-        hasSymbol: "$",
-        maxFractionalDigits: 2
-    },
-    {
-        label: "Japanese Yen JPY",
-        value: "JPY",
-        hasSymbol: "¥",
-        maxFractionalDigits: 0
-    },
-    {
-        label: "Korean Won KRW",
-        value: "KRW",
-        hasSymbol: "₩",
-        maxFractionalDigits: 0
-    },
-    { label: "Kuwaiti Dinar KWD", value: "KWD", maxFractionalDigits: 3 }
-].sort((a, b) => (a.value > b.value ? 1 : b.value > a.value ? -1 : 0));
-
-export const USD_INDEX = FIAT_OPTIONS.findIndex((fo) => fo.value === "USD");
-export const BTC_INDEX = FIAT_OPTIONS.findIndex((fo) => fo.value === "BTC");
+const COMBINED_OPTIONS: Currency[] = [USD_OPTION, BTC_OPTION, ...FIAT_OPTIONS];
 
 export function ChooseCurrency() {
     const i18n = useI18n();
     const [error, setError] = createSignal<Error>();
-    const [state, actions] = useMegaStore();
+    const [_state, actions] = useMegaStore();
     const [loading, setLoading] = createSignal(false);
     const navigate = useNavigate();
 
     function findCurrencyByValue(value: string) {
-        return FIAT_OPTIONS.find((currency) => currency.value === value);
+        return (
+            COMBINED_OPTIONS.find((currency) => currency.value === value) ??
+            USD_OPTION
+        );
     }
 
     const [_chooseCurrencyForm, { Form, Field }] =
@@ -135,7 +53,7 @@ export function ChooseCurrency() {
     const handleFormSubmit = async (f: ChooseCurrencyForm) => {
         setLoading(true);
         try {
-            actions.saveFiat(findCurrencyByValue(f.fiatCurrency) || state.fiat);
+            actions.saveFiat(findCurrencyByValue(f.fiatCurrency));
 
             await timeout(1000);
             navigate("/");
@@ -157,16 +75,17 @@ export function ChooseCurrency() {
                 <VStack>
                     <Field name="fiatCurrency">
                         {(field, props) => (
-                            <SelectField
+                            <select
                                 {...props}
                                 value={field.value}
-                                error={field.error}
-                                placeholder={state.fiat.label}
-                                options={FIAT_OPTIONS}
-                                label={i18n.t(
-                                    "settings.currency.select_currency_label"
-                                )}
-                            />
+                                class="w-full rounded-lg bg-m-grey-750 py-2 pl-4 pr-12 text-base font-normal text-white"
+                            >
+                                <For each={COMBINED_OPTIONS}>
+                                    {({ value, label }) => (
+                                        <option value={value}>{label}</option>
+                                    )}
+                                </For>
+                            </select>
                         )}
                     </Field>
                     <Show when={error()}>

src/components/layout/index.ts

@@ -6,7 +6,6 @@ export * from "./Linkify";
 export * from "./Misc";
 export * from "./ProgressBar";
 export * from "./Radio";
-export * from "./SelectField";
 export * from "./TextField";
 export * from "./ExternalLink";
 export * from "./LoadingSpinner";

src/state/megaStore.tsx

@@ -12,12 +12,6 @@ import {
 import { createStore } from "solid-js/store";
 import { useNavigate, useSearchParams } from "solid-start";
 
-import {
-    BTC_INDEX,
-    Currency,
-    FIAT_OPTIONS,
-    USD_INDEX
-} from "~/components/ChooseCurrency";
 import { checkBrowserCompatibility } from "~/logic/browserCompatibility";
 import {
     doubleInitDefense,
@@ -27,7 +21,14 @@ import {
     setupMutinyWallet
 } from "~/logic/mutinyWalletSetup";
 import { ParsedParams, toParsedParams } from "~/logic/waila";
-import { eify, MutinyTagItem, subscriptionValid } from "~/utils";
+import {
+    BTC_OPTION,
+    Currency,
+    eify,
+    MutinyTagItem,
+    subscriptionValid,
+    USD_OPTION
+} from "~/utils";
 
 const MegaStoreContext = createContext<MegaStore>();
 
@@ -97,7 +98,7 @@ export const Provider: ParentComponent = (props) => {
         price: 0,
         fiat: localStorage.getItem("fiat_currency")
             ? (JSON.parse(localStorage.getItem("fiat_currency")!) as Currency)
-            : FIAT_OPTIONS[USD_INDEX],
+            : USD_OPTION,
         has_backed_up: localStorage.getItem("has_backed_up") === "true",
         balance: undefined as MutinyBalance | undefined,
         last_sync: undefined as number | undefined,
@@ -272,7 +273,7 @@ export const Provider: ParentComponent = (props) => {
                             balance: newBalance,
                             last_sync: Date.now(),
                             price: 1,
-                            fiat: FIAT_OPTIONS[BTC_INDEX]
+                            fiat: BTC_OPTION
                         });
                     }
                 }

src/utils/conversions.ts

@@ -1,6 +1,6 @@
 import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 
-import { Currency } from "~/components/ChooseCurrency";
+import { Currency } from "./currencies";
 
 /** satsToFiat
  *  returns a toLocaleString() based on the bitcoin price in the chosen currency