diff --git a/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx b/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx index 52b1af3d..00588442 100644 --- a/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx +++ b/packages/app/src/Components/IntlProvider/IntlProviderUtils.tsx @@ -3,6 +3,15 @@ export const DefaultLocale = "en-US"; export const getLocale = () => { return (navigator.languages && navigator.languages[0]) ?? navigator.language ?? DefaultLocale; }; +export const getCurrency = () => { + const locale = navigator.language || navigator.languages[0]; + const formatter = new Intl.NumberFormat(locale, { + style: "currency", + currency: "USD", + currencyDisplay: "code", + }); + return formatter.formatToParts(1.2345).find(a => a.type === "currency")?.value ?? "USD"; +}; export const AllLanguageCodes = [ "en", "ja", diff --git a/packages/app/src/Pages/Layout/WalletBalance.tsx b/packages/app/src/Pages/Layout/WalletBalance.tsx index c0f48356..a2002343 100644 --- a/packages/app/src/Pages/Layout/WalletBalance.tsx +++ b/packages/app/src/Pages/Layout/WalletBalance.tsx @@ -4,27 +4,23 @@ import { useNavigate } from "react-router-dom"; import Icon from "@/Components/Icons/Icon"; import { useRates } from "@/Hooks/useRates"; -import { Sats, useWallet } from "@/Wallet"; +import { useWallet } from "@/Wallet"; +import { getCurrency, getLocale } from "@/Components/IntlProvider/IntlProviderUtils"; export const WalletBalance = () => { - const [balance, setBalance] = useState(null); + const [balance, setBalance] = useState(); const wallet = useWallet(); - const rates = useRates("BTCUSD"); + const localCurrency = getCurrency(); + const rates = useRates(`BTC${localCurrency}`); const navigate = useNavigate(); useEffect(() => { - setBalance(null); + setBalance(undefined); if (wallet.wallet && wallet.wallet.canGetBalance()) { wallet.wallet.getBalance().then(setBalance); } }, [wallet]); - const msgValues = useMemo(() => { - return { - amount: , - }; - }, [balance, rates]); - return (
navigate("/wallet")}>
@@ -34,8 +30,25 @@ export const WalletBalance = () => {
-
- +
+
+ ~ + +
+
+ +
);