diff --git a/src/components/AmountEditable.tsx b/src/components/AmountEditable.tsx index 4f6be05..96632da 100644 --- a/src/components/AmountEditable.tsx +++ b/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) diff --git a/src/components/ChooseCurrency.tsx b/src/components/ChooseCurrency.tsx index db8dc56..b352225 100644 --- a/src/components/ChooseCurrency.tsx +++ b/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(); - 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() { {(field, props) => ( - + class="w-full rounded-lg bg-m-grey-750 py-2 pl-4 pr-12 text-base font-normal text-white" + > + + {({ value, label }) => ( + + )} + + )} diff --git a/src/components/layout/SelectField.tsx b/src/components/layout/SelectField.tsx deleted file mode 100644 index f7598db..0000000 --- a/src/components/layout/SelectField.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { Select as KSelect } from "@kobalte/core"; -import { JSX, Show, splitProps } from "solid-js"; - -import check from "~/assets/icons/check.svg"; -import upDown from "~/assets/icons/up-down.svg"; - -interface IOption { - value: string; - label: string; -} - -type SelectProps = { - options: IOption[]; - multiple?: boolean; - size?: string | number; - caption?: string; - name: string; - label?: string | undefined; - placeholder?: string | undefined; - value: string | undefined; - error: string; - required?: boolean | undefined; - disabled?: boolean | undefined; - ref: (element: HTMLSelectElement) => void; - onInput: JSX.EventHandler; - onChange: JSX.EventHandler; - onBlur: JSX.EventHandler; -}; - -export function SelectField(props: SelectProps) { - // Split select element props - const [rootProps, selectProps] = splitProps( - props, - ["name", "placeholder", "options", "required", "disabled"], - ["placeholder", "ref", "onInput", "onChange", "onBlur"] - ); - - return ( -
- ( - - - - {props.item.rawValue.label} - - - - check - - - )} - > - - - {props.label} - - - - - > - {(state) => state.selectedOption().label} - - - upDown - - - - - {props.caption} - - - - - - - - - {props.error} - - -
- ); -} diff --git a/src/components/layout/index.ts b/src/components/layout/index.ts index 6c52a44..3407fdb 100644 --- a/src/components/layout/index.ts +++ b/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"; diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx index 20822b1..1ede4d8 100644 --- a/src/state/megaStore.tsx +++ b/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(); @@ -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 }); } } diff --git a/src/utils/conversions.ts b/src/utils/conversions.ts index 6ec7c35..7830fbf 100644 --- a/src/utils/conversions.ts +++ b/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 diff --git a/src/utils/currencies.ts b/src/utils/currencies.ts new file mode 100644 index 0000000..6d17c02 --- /dev/null +++ b/src/utils/currencies.ts @@ -0,0 +1,296 @@ +export interface Currency { + value: string; + label: string; + hasSymbol?: string; + maxFractionalDigits: number; +} + +/** + * BTC_USD_OPTIONS is an array of BTC and USD currencies + * These are separated from the rest of the list for ease of access by the user and necessary access in the megaStore + */ + +export const BTC_OPTION: Currency = { + label: "Bitcoin BTC", + value: "BTC", + hasSymbol: "₿", + maxFractionalDigits: 8 +}; + +export const USD_OPTION: Currency = { + label: "United States Dollar USD", + value: "USD", + hasSymbol: "$", + maxFractionalDigits: 2 +}; + +/** + * FIAT_OPTIONS is an array of all available currencies on the coingecko api 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: "United Arab Emirates Dirham AED", + value: "AED", + maxFractionalDigits: 2 + }, + { + label: "Argentine Peso ARS", + value: "ARS", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Australian Dollar AUD", + value: "AUD", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Bangladeshi Taka BDT", + value: "BDT", + hasSymbol: "৳", + maxFractionalDigits: 2 + }, + { + label: "Bahraini Dinar BHD", + value: "BHD", + hasSymbol: "BD", + maxFractionalDigits: 3 + }, + { + label: "Bermuda Dollar BMD", + value: "BMD", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Brazilian Real BRL", + value: "BRL", + hasSymbol: "R$", + maxFractionalDigits: 2 + }, + { + label: "Canadian Dollar CAD", + value: "CAD", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { label: "Swiss Franc CHF", value: "CHF", maxFractionalDigits: 2 }, + { + label: "Chilean Peso CLP", + value: "CLP", + hasSymbol: "$", + maxFractionalDigits: 0 + }, + { + label: "Chinese Yuan CNY", + value: "CNY", + hasSymbol: "¥", + maxFractionalDigits: 2 + }, + { + label: "Czech Koruna CZK", + value: "CZK", + hasSymbol: "Kč", + maxFractionalDigits: 2 + }, + { + label: "Danish Krone DKK", + value: "DKK", + hasSymbol: "kr", + maxFractionalDigits: 2 + }, + { + label: "Euro EUR", + value: "EUR", + hasSymbol: "€", + maxFractionalDigits: 2 + }, + { + label: "British Pound GBP", + value: "GBP", + hasSymbol: "₤", + maxFractionalDigits: 2 + }, + { + label: "Hong Kong Dollar HKD", + value: "HKD", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Hungarian Forint HUF", + value: "HUF", + hasSymbol: "Ft", + maxFractionalDigits: 2 + }, + { + label: "Israeli New Shekel ILS", + value: "ILS", + hasSymbol: "₪", + maxFractionalDigits: 2 + }, + { + label: "Indian Rupee INR", + value: "INR", + 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 + }, + { + label: "Sri Lankan Rupee LKR", + value: "LKR", + hasSymbol: "Rs", + maxFractionalDigits: 2 + }, + { + label: "Myanmar Kyat MMK", + value: "MMK", + hasSymbol: "Ks", + maxFractionalDigits: 2 + }, + { + label: "Mexican Peso MXN", + value: "MXN", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Malaysian Ringgit MYR", + value: "MYR", + hasSymbol: "RM", + maxFractionalDigits: 2 + }, + { + label: "Norwegian Krone NOK", + value: "NOK", + hasSymbol: "kr", + maxFractionalDigits: 2 + }, + { + label: "Nigerian Naira NGN", + value: "NGN", + hasSymbol: "₦", + maxFractionalDigits: 2 + }, + { + label: "New Zealand Dollar NZD", + value: "NZD", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Philippine Peso PHP", + value: "PHP", + hasSymbol: "₱", + maxFractionalDigits: 2 + }, + { + label: "Pakistani Rupee PKR", + value: "PKR", + hasSymbol: "₨", + maxFractionalDigits: 2 + }, + { + label: "Polish Złoty PLN", + value: "PLN", + hasSymbol: "zł", + maxFractionalDigits: 2 + }, + { + label: "Russian Ruble RUB", + value: "RUB", + hasSymbol: "₽", + maxFractionalDigits: 2 + }, + { + label: "Saudi Riyal SAR", + value: "SAR", + hasSymbol: "SR", + maxFractionalDigits: 2 + }, + { + label: "Swedish Krona SEK", + value: "SEK", + hasSymbol: "kr", + maxFractionalDigits: 2 + }, + { + label: "Singapore Dollar SGD", + value: "SGD", + hasSymbol: "$", + maxFractionalDigits: 2 + }, + { + label: "Thai Baht THB", + value: "THB", + hasSymbol: "฿", + maxFractionalDigits: 2 + }, + { + label: "Turkish Lira TRY", + value: "TRY", + hasSymbol: "₺", + maxFractionalDigits: 2 + }, + { + label: "New Taiwan Dollar TWD", + value: "TWD", + hasSymbol: "NT$", + maxFractionalDigits: 2 + }, + { + label: "Ukrainian Hryvnia UAH", + value: "UAH", + hasSymbol: "₴", + maxFractionalDigits: 2 + }, + { + label: "Venezuelan Bolívar VEF", + value: "VEF", + hasSymbol: "Bs", + maxFractionalDigits: 2 + }, + { + label: "Vietnamese Dong VND", + value: "VND", + hasSymbol: "₫", + maxFractionalDigits: 0 + }, + { + label: "South African Rand ZAR", + value: "ZAR", + hasSymbol: "R", + maxFractionalDigits: 2 + } +]; diff --git a/src/utils/index.ts b/src/utils/index.ts index daf031e..3da0de7 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -18,3 +18,4 @@ export * from "./fetchZaps"; export * from "./vibrate"; export * from "./openLinkProgrammatically"; export * from "./nostr"; +export * from "./currencies";