diff --git a/src/renderer/src/@types/i18next-resources.d.ts b/src/renderer/src/@types/i18next-resources.d.ts index 852b9fb7b..2f146ef18 100644 --- a/src/renderer/src/@types/i18next-resources.d.ts +++ b/src/renderer/src/@types/i18next-resources.d.ts @@ -402,13 +402,13 @@ interface Resources { inputAmount: { title: 'Amount you want to send' enterTokenAmount: 'Enter token amount:' - fiatValue: 'Fiat value (USD estimated)' + fiatValue: 'Fiat value ({{currencyType}} estimated)' balanceAfterTransaction: 'Balance after transaction' insufficientBalanceAvailable: 'Insufficient balance available' max: 'Max' or: 'OR' inputPlaceholder: '0,000.00' - enterUsdAmount: 'Enter a USD amount:' + enterAmount: 'Enter a {{currencyType}} amount:' roundDown: 'Round down' selectAmountSend: 'Select amount to send' tokenValue: 'Token value' @@ -731,7 +731,7 @@ interface Resources { sourceAccount: 'Source account' inputAmount: 'Input amount...' amount: 'Amount' - fiatValue: 'Fiat value (USD estimated)' + fiatValue: 'Fiat value ({{currencyType}} estimated)' recipientAddress: 'Recipient address' contacts: 'Contacts' addressInputHint: 'Enter recipient address...' @@ -910,6 +910,9 @@ interface Resources { subtitle: 'Your NEON 3 password has been successfully changed!' } } + settingsCurrency: { + title: 'Currency' + } } receive: { title: 'Receive Tokens' diff --git a/src/renderer/src/@types/store.ts b/src/renderer/src/@types/store.ts index 40b8a11d1..12a5dd7bd 100644 --- a/src/renderer/src/@types/store.ts +++ b/src/renderer/src/@types/store.ts @@ -22,11 +22,17 @@ export interface IWalletState { } export type TSecurityType = 'none' | 'password' +export type TAvailableCurrency = 'USD' | 'BRL' | 'EUR' | 'GBP' | 'CNY' +export type TCurrency = { + symbol: string + label: TAvailableCurrency +} export interface ISettingsState { encryptedPassword?: string isFirstTime: boolean securityType: TSecurityType networkType: TNetworkType + currency: TCurrency } export type TContactAddress = { address: string; blockchain: TBlockchainServiceKey } diff --git a/src/renderer/src/components/BalanceChart.tsx b/src/renderer/src/components/BalanceChart.tsx index 59ac15be4..0a6f1a7ae 100644 --- a/src/renderer/src/components/BalanceChart.tsx +++ b/src/renderer/src/components/BalanceChart.tsx @@ -2,8 +2,9 @@ import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { UseMultipleBalanceAndExchangeResult } from '@renderer/@types/query' import { BalanceConvertedToExchange, BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { UtilsHelper } from '@renderer/helpers/UtilsHelper' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { Loader } from './Loader' @@ -20,6 +21,7 @@ type TBar = { export const BalanceChart = ({ balanceExchange }: TProps) => { const { t } = useTranslation('components', { keyPrefix: 'balanceChart' }) + const { currency } = useCurrencySelector() const totalTokensBalances = useMemo( () => BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data), @@ -33,7 +35,9 @@ export const BalanceChart = ({ balanceExchange }: TProps) => { balanceExchange.exchange.data ) if (!totalTokensBalances || totalTokensBalances <= 0 || !convertedBalances) - return [{ color: '#676767', name: t('noAssets'), value: FilterHelper.currency(0), widthPercent: 100 }] + return [ + { color: '#676767', name: t('noAssets'), value: NumberHelper.currency(0, currency.label), widthPercent: 100 }, + ] const filteredBalances = convertedBalances .filter(balance => balance.convertedAmount > 0) @@ -56,7 +60,7 @@ export const BalanceChart = ({ balanceExchange }: TProps) => { const widthPercent = (balance.convertedAmount * 100) / totalTokensBalances return { name: balance.token.name, - value: FilterHelper.currency(balance.convertedAmount), + value: NumberHelper.currency(balance.convertedAmount, currency.label), color, widthPercent, } @@ -69,13 +73,20 @@ export const BalanceChart = ({ balanceExchange }: TProps) => { const othersAmount = filteredBalances.slice(4).reduce((acc, balance) => acc + balance.convertedAmount, 0) const otherBar: TBar = { color: '#47BEFF', - value: FilterHelper.currency(othersAmount), + value: NumberHelper.currency(othersAmount, currency.label), name: t('othersTokens'), widthPercent: (othersAmount * 100) / totalTokensBalances, } return [...firstFourBars, otherBar] - }, [balanceExchange.balance.data, balanceExchange.exchange.data, balanceExchange.isLoading, t, totalTokensBalances]) + }, [ + balanceExchange.balance.data, + balanceExchange.exchange.data, + balanceExchange.isLoading, + currency.label, + t, + totalTokensBalances, + ]) if (bars === undefined) { return diff --git a/src/renderer/src/components/TokensTable.tsx b/src/renderer/src/components/TokensTable.tsx index 6480a9edf..498d6aea2 100644 --- a/src/renderer/src/components/TokensTable.tsx +++ b/src/renderer/src/components/TokensTable.tsx @@ -2,8 +2,9 @@ import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'reac import { Balance, TokenBalance, UseMultipleBalanceAndExchangeResult } from '@renderer/@types/query' import { BlockchainIcon } from '@renderer/components/BlockchainIcon' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { StyleHelper } from '@renderer/helpers/StyleHelper' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { getI18next } from '@renderer/libs/i18next' import { createColumnHelper, @@ -37,6 +38,8 @@ const columnHelper = createColumnHelper() export const TokensTable = forwardRef( ({ balanceExchange, showSimplified, className, onTokenSelected, selectedToken, containerClassName }, ref) => { + const { currency } = useCurrencySelector() + const filteredTokenBalance = useMemo(() => { const groupedTokens = new Map() @@ -103,11 +106,11 @@ export const TokensTable = forwardRef( header: t('components:tokensTable.holdings'), }), columnHelper.accessor('exchangeRatio', { - cell: info => FilterHelper.currency(info.getValue()), + cell: info => NumberHelper.currency(info.getValue(), currency.label), header: t('components:tokensTable.price'), }), columnHelper.accessor('convertedAmount', { - cell: info => FilterHelper.currency(info.getValue()), + cell: info => NumberHelper.currency(info.getValue(), currency.label), header: t('components:tokensTable.value'), }), ] @@ -135,11 +138,11 @@ export const TokensTable = forwardRef( header: t('components:tokensTable.holdings'), }), columnHelper.accessor('exchangeRatio', { - cell: info => FilterHelper.currency(info.getValue()), + cell: info => NumberHelper.currency(info.getValue(), currency.label), header: t('components:tokensTable.price'), }), ], - [showSimplified] + [currency.label, showSimplified] ) const table = useReactTable({ diff --git a/src/renderer/src/constants/currency.ts b/src/renderer/src/constants/currency.ts new file mode 100644 index 000000000..5d957d328 --- /dev/null +++ b/src/renderer/src/constants/currency.ts @@ -0,0 +1,9 @@ +import { TCurrency } from '@renderer/@types/store' + +export const availableCurrencies: TCurrency[] = [ + { symbol: 'U$', label: 'USD' }, + { symbol: '€', label: 'EUR' }, + { symbol: '£', label: 'GBP' }, + { symbol: 'R$', label: 'BRL' }, + { symbol: '¥', label: 'CNY' }, +] diff --git a/src/renderer/src/helpers/NumberHelper.ts b/src/renderer/src/helpers/NumberHelper.ts index 6dc9a3612..999d9f71e 100644 --- a/src/renderer/src/helpers/NumberHelper.ts +++ b/src/renderer/src/helpers/NumberHelper.ts @@ -12,13 +12,13 @@ export class NumberHelper { return decimals?.length ?? 0 } - static currency(input: string | number, minimumFractionDigits = 2, maximumFractionDigits = 2) { + static currency(input: string | number, currencyName: string, minimumFractionDigits = 2, maximumFractionDigits = 2) { const num = Number(input) try { return new Intl.NumberFormat('en-US', { style: 'currency', - currency: 'USD', + currency: currencyName, minimumFractionDigits, maximumFractionDigits, }) diff --git a/src/renderer/src/hooks/useExchange.ts b/src/renderer/src/hooks/useExchange.ts index 8944fbb0f..0975a6ef9 100644 --- a/src/renderer/src/hooks/useExchange.ts +++ b/src/renderer/src/hooks/useExchange.ts @@ -5,7 +5,7 @@ import { bsAggregator } from '@renderer/libs/blockchainService' import { useQuery, UseQueryOptions } from '@tanstack/react-query' import lodash from 'lodash' -import { useNetworkTypeSelector } from './useSettingsSelector' +import { useCurrencySelector, useNetworkTypeSelector } from './useSettingsSelector' type ExchangeInfoByKey = Record @@ -13,10 +13,11 @@ export function useExchange( queryOptions?: Omit, 'queryKey' | 'queryFn'> ): UseExchangeResult { const { networkType } = useNetworkTypeSelector() + const { currency } = useCurrencySelector() const fetchExchanges = useCallback(async (): Promise => { const promises = Object.values(bsAggregator.blockchainServicesByName).map( async (service): Promise => ({ - [service.blockchainName]: await service.exchangeDataService.getTokenPrices('USD'), + [service.blockchainName]: await service.exchangeDataService.getTokenPrices(currency.label as any), }) ) @@ -26,7 +27,7 @@ export function useExchange( .map(exchange => exchange.value) return lodash.merge({}, ...exchangesFiltered) - }, []) + }, [currency.label]) const [isRefetchingByUser, setIsRefetchingByUser] = useState(false) diff --git a/src/renderer/src/hooks/useSettingsSelector.ts b/src/renderer/src/hooks/useSettingsSelector.ts index adde649e4..c602dde94 100644 --- a/src/renderer/src/hooks/useSettingsSelector.ts +++ b/src/renderer/src/hooks/useSettingsSelector.ts @@ -15,3 +15,11 @@ export const useNetworkTypeSelector = () => { networkTypeRef: ref, } } + +export const useCurrencySelector = () => { + const { ref, value } = useAppSelector(state => state.settings.currency) + return { + currency: value, + currencyRef: ref, + } +} diff --git a/src/renderer/src/locales/en/modals.json b/src/renderer/src/locales/en/modals.json index edf43fe16..f1f92ba8d 100644 --- a/src/renderer/src/locales/en/modals.json +++ b/src/renderer/src/locales/en/modals.json @@ -218,13 +218,13 @@ "inputAmount": { "title": "Amount you want to send", "enterTokenAmount": "Enter token amount:", - "fiatValue": "Fiat value (USD estimated)", + "fiatValue": "Fiat value ({{currencyType}} estimated)", "balanceAfterTransaction": "Balance after transaction", "insufficientBalanceAvailable": "Insufficient balance available", "max": "Max", "or": "OR", "inputPlaceholder": "0,000.00", - "enterUsdAmount": "Enter a USD amount:", + "enterAmount": "Enter a {{currencyType}} amount:", "roundDown": "Round down", "selectAmountSend": "Select amount to send", "tokenValue": "Token value" @@ -444,4 +444,4 @@ } } } -} \ No newline at end of file +} diff --git a/src/renderer/src/locales/en/pages.json b/src/renderer/src/locales/en/pages.json index 198946452..18e06392a 100644 --- a/src/renderer/src/locales/en/pages.json +++ b/src/renderer/src/locales/en/pages.json @@ -21,11 +21,7 @@ }, "welcomeSecuritySetup": { "title": "Securing your new wallet", - "steps": [ - "Create Password", - "Confirm Password", - "Complete" - ], + "steps": ["Create Password", "Confirm Password", "Complete"], "step1": { "formTitle": "Please create a password to secure your wallet", "passwordPlaceholder": "Create a password...", @@ -43,13 +39,7 @@ }, "welcomeImportWallet": { "title": "Import a wallet", - "steps": [ - "Create Password", - "Confirm Password", - "Enter address or key", - "Import", - "Complete" - ], + "steps": ["Create Password", "Confirm Password", "Enter address or key", "Import", "Complete"], "step3": { "formTitle": "Enter an address, encrypted key, private key or mnemonic", "inputPlaceholder": "Enter an address, key or mnemonic...", @@ -110,7 +100,7 @@ "sourceAccount": "Source account", "inputAmount": "Input amount...", "amount": "Amount", - "fiatValue": "Fiat value (USD estimated)", + "fiatValue": "Fiat value ({{currencyType}} estimated)", "recipientAddress": "Recipient address", "contacts": "Contacts", "addressInputHint": "Enter recipient address...", @@ -288,6 +278,9 @@ "step3": { "subtitle": "Your NEON 3 password has been successfully changed!" } + }, + "settingsCurrency": { + "title": "Currency" } }, "receive": { @@ -305,4 +298,4 @@ "selectReceivingAccount": "Select receiving account" } } -} \ No newline at end of file +} diff --git a/src/renderer/src/routes/modals/InputAmount/FiatAmountInput.tsx b/src/renderer/src/routes/modals/InputAmount/FiatAmountInput.tsx index 2e9890c9c..09ba799fd 100644 --- a/src/renderer/src/routes/modals/InputAmount/FiatAmountInput.tsx +++ b/src/renderer/src/routes/modals/InputAmount/FiatAmountInput.tsx @@ -5,6 +5,7 @@ import { Input } from '@renderer/components/Input' import { NumberHelper } from '@renderer/helpers/NumberHelper' import { StringHelper } from '@renderer/helpers/StringHelper' import { StyleHelper } from '@renderer/helpers/StyleHelper' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' type TProps = { value: string @@ -16,6 +17,7 @@ type TProps = { export const FiatAmountInput = ({ onChange, value, exchangeRatio, tokenBalance, error }: TProps) => { const { t } = useTranslation('modals', { keyPrefix: 'inputAmount' }) + const { currency } = useCurrencySelector() const valueNumber = NumberHelper.number(value) const estimatedToken = valueNumber > 0 && exchangeRatio > 0 ? valueNumber / exchangeRatio : 0 @@ -27,7 +29,7 @@ export const FiatAmountInput = ({ onChange, value, exchangeRatio, tokenBalance, })} > { const { t } = useTranslation('modals', { keyPrefix: 'inputAmount' }) + const { currency } = useCurrencySelector() const estimatedFiat = NumberHelper.number(value) * exchangeRatio @@ -52,8 +54,10 @@ export const TokenAmountInput = ({ onChange, onMaxClick, value, exchangeRatio, e 'opacity-50': exchangeRatio === 0, })} > - {t('fiatValue')} - {NumberHelper.currency(estimatedFiat)} + {t('fiatValue', { currencyType: currency.label })} + + {NumberHelper.currency(estimatedFiat, currency.label)} + ) diff --git a/src/renderer/src/routes/pages/Portfolio/Activity/index.tsx b/src/renderer/src/routes/pages/Portfolio/Activity/index.tsx index cf1be90ba..89cb4f2a1 100644 --- a/src/renderer/src/routes/pages/Portfolio/Activity/index.tsx +++ b/src/renderer/src/routes/pages/Portfolio/Activity/index.tsx @@ -3,23 +3,26 @@ import { useTranslation } from 'react-i18next' import { Separator } from '@renderer/components/Separator' import { TransactionsTable } from '@renderer/components/TransactionsTable' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { useAccountsSelector } from '@renderer/hooks/useAccountSelector' import { useBalancesAndExchange } from '@renderer/hooks/useBalancesAndExchange' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { useWalletsSelector } from '@renderer/hooks/useWalletSelector' export const PortfolioActivityPage = () => { const { t } = useTranslation('pages', { keyPrefix: 'portfolio.portfolioActivity' }) const { accounts } = useAccountsSelector() const { wallets } = useWalletsSelector() + const { currency } = useCurrencySelector() const balanceExchange = useBalancesAndExchange(accounts) const formattedTotalTokensBalances = useMemo( () => - FilterHelper.currency( - BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) + NumberHelper.currency( + BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) || 0, + currency.label ), - [balanceExchange.balance.data, balanceExchange.exchange.data] + [balanceExchange.balance.data, balanceExchange.exchange.data, currency.label] ) return ( diff --git a/src/renderer/src/routes/pages/Portfolio/Overview/index.tsx b/src/renderer/src/routes/pages/Portfolio/Overview/index.tsx index 3423472c8..9c51c0889 100644 --- a/src/renderer/src/routes/pages/Portfolio/Overview/index.tsx +++ b/src/renderer/src/routes/pages/Portfolio/Overview/index.tsx @@ -3,23 +3,26 @@ import { useTranslation } from 'react-i18next' import { BalanceChart } from '@renderer/components/BalanceChart' import { Separator } from '@renderer/components/Separator' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { useAccountsSelector } from '@renderer/hooks/useAccountSelector' import { useBalancesAndExchange } from '@renderer/hooks/useBalancesAndExchange' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { useWalletsSelector } from '@renderer/hooks/useWalletSelector' export const PortfolioOverviewPage = () => { const { t } = useTranslation('pages', { keyPrefix: 'portfolio.portfolioOverview' }) const { accounts } = useAccountsSelector() const { wallets } = useWalletsSelector() + const { currency } = useCurrencySelector() const balanceExchange = useBalancesAndExchange(accounts) const formattedTotalTokensBalances = useMemo( () => - FilterHelper.currency( - BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) + NumberHelper.currency( + BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) || 0, + currency.label ), - [balanceExchange.balance.data, balanceExchange.exchange.data] + [balanceExchange.balance.data, balanceExchange.exchange.data, currency.label] ) return (
diff --git a/src/renderer/src/routes/pages/Send/SendAmount.tsx b/src/renderer/src/routes/pages/Send/SendAmount.tsx index 33ee2a690..64eef53c2 100644 --- a/src/renderer/src/routes/pages/Send/SendAmount.tsx +++ b/src/renderer/src/routes/pages/Send/SendAmount.tsx @@ -6,11 +6,11 @@ import { TokenBalance } from '@renderer/@types/query' import { IAccountState } from '@renderer/@types/store' import { Button } from '@renderer/components/Button' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' import { NumberHelper } from '@renderer/helpers/NumberHelper' import { StyleHelper } from '@renderer/helpers/StyleHelper' import { useBalancesAndExchange } from '@renderer/hooks/useBalancesAndExchange' import { useModalNavigate } from '@renderer/hooks/useModalRouter' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' type TAmountParams = { selectedAccount?: IAccountState @@ -29,10 +29,11 @@ export const SendAmount = ({ }: TAmountParams) => { const { t } = useTranslation('pages', { keyPrefix: 'send' }) const { modalNavigateWrapper } = useModalNavigate() + const { currency } = useCurrencySelector() const balanceExchange = useBalancesAndExchange(selectedAccount ? [selectedAccount] : []) const estimatedFee = useMemo(() => { - if (!selectedToken || !selectedAmount) return FilterHelper.currency(0) + if (!selectedToken || !selectedAmount) return NumberHelper.currency(0, currency.label) const pricePerToken = BalanceHelper.getExchangeRatio( selectedToken.token.hash, @@ -40,8 +41,8 @@ export const SendAmount = ({ balanceExchange.exchange.data ) - return FilterHelper.currency(NumberHelper.number(selectedAmount) * pricePerToken) - }, [selectedToken, selectedAmount, balanceExchange]) + return NumberHelper.currency(NumberHelper.number(selectedAmount) * pricePerToken, currency.label) + }, [selectedToken, selectedAmount, currency.label, balanceExchange.exchange.data]) return (
@@ -81,7 +82,7 @@ export const SendAmount = ({
- {t('fiatValue')} + {t('fiatValue', { currencyType: currency.label })} {estimatedFee}
diff --git a/src/renderer/src/routes/pages/Send/TotalFee.tsx b/src/renderer/src/routes/pages/Send/TotalFee.tsx index df124b681..9fefca6f4 100644 --- a/src/renderer/src/routes/pages/Send/TotalFee.tsx +++ b/src/renderer/src/routes/pages/Send/TotalFee.tsx @@ -6,6 +6,7 @@ import { Loader } from '@renderer/components/Loader' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' import { NumberHelper } from '@renderer/helpers/NumberHelper' import { useExchange } from '@renderer/hooks/useExchange' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { TSendServiceResponse } from '.' @@ -18,6 +19,7 @@ type TTotalFeeParams = { export const TotalFee = ({ getSendFields, onFeeChange, fee }: TTotalFeeParams) => { const { t } = useTranslation('pages', { keyPrefix: 'send' }) const exchange = useExchange() + const { currency } = useCurrencySelector() const [fiatFee, setFiatFee] = useState() const [loading, setLoading] = useState(false) @@ -71,7 +73,7 @@ export const TotalFee = ({ getSendFields, onFeeChange, fee }: TTotalFeeParams) = ) : (
{fee} - {NumberHelper.currency(fiatFee ?? 0)} + {NumberHelper.currency(fiatFee ?? 0, currency.label)}
)} diff --git a/src/renderer/src/routes/pages/Settings/SettingsCurrency/index.tsx b/src/renderer/src/routes/pages/Settings/SettingsCurrency/index.tsx new file mode 100644 index 000000000..e5ee1dc27 --- /dev/null +++ b/src/renderer/src/routes/pages/Settings/SettingsCurrency/index.tsx @@ -0,0 +1,42 @@ +import { useState } from 'react' +import { useTranslation } from 'react-i18next' +import { TCurrency } from '@renderer/@types/store' +import { RadioGroup } from '@renderer/components/RadioGroup' +import { availableCurrencies } from '@renderer/constants/currency' +import { useAppDispatch } from '@renderer/hooks/useRedux' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' +import { SettingsLayout } from '@renderer/layouts/Settings' +import { settingsReducerActions } from '@renderer/store/reducers/SettingsReducer' + +export const SettingsCurrency = () => { + const { t } = useTranslation('pages', { keyPrefix: 'settings.settingsCurrency' }) + const { currency } = useCurrencySelector() + const dispatch = useAppDispatch() + + const [selectedCurrency, setSelectedCurrency] = useState(currency) + + const onSelectRadioItem = (selectedValue: string) => { + const selectedCurrency = availableCurrencies.find(currency => currency.symbol === selectedValue) + + if (!selectedCurrency) return + + setSelectedCurrency(selectedCurrency) + dispatch(settingsReducerActions.setCurrency(selectedCurrency)) + } + + return ( + + + {availableCurrencies.map(currency => ( + +
+
{currency.symbol}
+ +
+ + + ))} + + + ) +} diff --git a/src/renderer/src/routes/pages/Wallets/AccountList.tsx b/src/renderer/src/routes/pages/Wallets/AccountList.tsx index 1ac22dfc5..828a0c22c 100644 --- a/src/renderer/src/routes/pages/Wallets/AccountList.tsx +++ b/src/renderer/src/routes/pages/Wallets/AccountList.tsx @@ -5,9 +5,10 @@ import { AccountIcon } from '@renderer/components/AccountIcon' import { Separator } from '@renderer/components/Separator' import { Tooltip } from '@renderer/components/Tooltip' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { UtilsHelper } from '@renderer/helpers/UtilsHelper' import { useAccountsByWalletIdSelector } from '@renderer/hooks/useAccountSelector' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' type TProps = { onSelect: (account: IAccountState) => void @@ -24,6 +25,8 @@ type TAccountItemProps = { } const AccountItem = ({ account, balanceExchange, onClick, active }: TAccountItemProps) => { + const { currency } = useCurrencySelector() + const totalTokensBalances = useMemo( () => BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data, [ @@ -32,7 +35,10 @@ const AccountItem = ({ account, balanceExchange, onClick, active }: TAccountItem [balanceExchange, account] ) - const formattedTotalTokensBalances = useMemo(() => FilterHelper.currency(totalTokensBalances), [totalTokensBalances]) + const formattedTotalTokensBalances = useMemo( + () => NumberHelper.currency(totalTokensBalances || 0, currency.label), + [currency.label, totalTokensBalances] + ) return (
  • diff --git a/src/renderer/src/routes/pages/Wallets/AccountOverview/index.tsx b/src/renderer/src/routes/pages/Wallets/AccountOverview/index.tsx index d0d38df5b..d1d3894dd 100644 --- a/src/renderer/src/routes/pages/Wallets/AccountOverview/index.tsx +++ b/src/renderer/src/routes/pages/Wallets/AccountOverview/index.tsx @@ -4,8 +4,9 @@ import { useOutletContext } from 'react-router-dom' import { IAccountState } from '@renderer/@types/store' import { BalanceChart } from '@renderer/components/BalanceChart' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { useBalancesAndExchange } from '@renderer/hooks/useBalancesAndExchange' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { AccountDetailsLayout } from '@renderer/layouts/AccountDetailsLayout' import { CommonAccountActions } from '../CommonAccountActions' @@ -19,14 +20,17 @@ export const AccountOverview = () => { const { account } = useOutletContext() + const { currency } = useCurrencySelector() + const balanceExchange = useBalancesAndExchange(account ? [account] : []) const formattedTotalTokensBalances = useMemo( () => - FilterHelper.currency( - BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) + NumberHelper.currency( + BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) || 0, + currency.label ), - [balanceExchange.balance.data, balanceExchange.exchange.data] + [balanceExchange.balance.data, balanceExchange.exchange.data, currency.label] ) return ( diff --git a/src/renderer/src/routes/pages/Wallets/AccountTokensList/index.tsx b/src/renderer/src/routes/pages/Wallets/AccountTokensList/index.tsx index 1d281ea74..18093c116 100644 --- a/src/renderer/src/routes/pages/Wallets/AccountTokensList/index.tsx +++ b/src/renderer/src/routes/pages/Wallets/AccountTokensList/index.tsx @@ -4,8 +4,9 @@ import { useOutletContext } from 'react-router-dom' import { IAccountState } from '@renderer/@types/store' import { TokensTable } from '@renderer/components/TokensTable' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { useBalancesAndExchange } from '@renderer/hooks/useBalancesAndExchange' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' import { AccountDetailsLayout } from '@renderer/layouts/AccountDetailsLayout' import { CommonAccountActions } from '../CommonAccountActions' @@ -18,15 +19,17 @@ export const AccountTokensList = () => { const { t } = useTranslation('pages', { keyPrefix: 'wallets.accountTokensList' }) const { account } = useOutletContext() + const { currency } = useCurrencySelector() const balanceExchange = useBalancesAndExchange(account ? [account] : []) const formattedTotalTokensBalances = useMemo( () => - FilterHelper.currency( - BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) + NumberHelper.currency( + BalanceHelper.calculateTotalBalances(balanceExchange.balance.data, balanceExchange.exchange.data) || 0, + currency.label ), - [balanceExchange.balance.data, balanceExchange.exchange.data] + [balanceExchange.balance.data, balanceExchange.exchange.data, currency.label] ) return ( diff --git a/src/renderer/src/routes/pages/Wallets/WalletSelectItem.tsx b/src/renderer/src/routes/pages/Wallets/WalletSelectItem.tsx index 48cdbfaaa..7dc747fa4 100644 --- a/src/renderer/src/routes/pages/Wallets/WalletSelectItem.tsx +++ b/src/renderer/src/routes/pages/Wallets/WalletSelectItem.tsx @@ -5,9 +5,10 @@ import { Select } from '@renderer/components/Select' import { Tooltip } from '@renderer/components/Tooltip' import { WalletIcon } from '@renderer/components/WalletIcon' import { BalanceHelper } from '@renderer/helpers/BalanceHelper' -import { FilterHelper } from '@renderer/helpers/FilterHelper' +import { NumberHelper } from '@renderer/helpers/NumberHelper' import { StyleHelper } from '@renderer/helpers/StyleHelper' import { useAccountsByWalletIdSelector } from '@renderer/hooks/useAccountSelector' +import { useCurrencySelector } from '@renderer/hooks/useSettingsSelector' type TProps = { balanceExchange: UseMultipleBalanceAndExchangeResult @@ -16,6 +17,7 @@ type TProps = { export const WalletSelectItem = ({ balanceExchange, wallet }: TProps) => { const { accountsByWalletId } = useAccountsByWalletIdSelector(wallet.id) + const { currency } = useCurrencySelector() const totalTokensBalances = useMemo( () => @@ -27,7 +29,10 @@ export const WalletSelectItem = ({ balanceExchange, wallet }: TProps) => { [balanceExchange, accountsByWalletId] ) - const formattedTotalTokensBalances = useMemo(() => FilterHelper.currency(totalTokensBalances), [totalTokensBalances]) + const formattedTotalTokensBalances = useMemo( + () => NumberHelper.currency(totalTokensBalances || 0, currency.label), + [currency.label, totalTokensBalances] + ) return ( , + element: , }, { path: 'release-notes', diff --git a/src/renderer/src/store/reducers/SettingsReducer.ts b/src/renderer/src/store/reducers/SettingsReducer.ts index 844d2668c..535738018 100644 --- a/src/renderer/src/store/reducers/SettingsReducer.ts +++ b/src/renderer/src/store/reducers/SettingsReducer.ts @@ -1,6 +1,7 @@ import { CaseReducer, createSlice, PayloadAction } from '@reduxjs/toolkit' import { TNetworkType } from '@renderer/@types/blockchain' -import { ISettingsState, TSecurityType } from '@renderer/@types/store' +import { ISettingsState, TCurrency, TSecurityType } from '@renderer/@types/store' +import { availableCurrencies } from '@renderer/constants/currency' export const settingsReducerName = 'settingsReducer' @@ -9,6 +10,7 @@ const initialState: ISettingsState = { securityType: 'none', isFirstTime: true, networkType: 'mainnet', + currency: availableCurrencies[0], } const setEncryptedPassword: CaseReducer> = (state, action) => { @@ -27,6 +29,10 @@ const setNetworkType: CaseReducer> = state.networkType = action.payload } +const setCurrency: CaseReducer> = (state, action) => { + state.currency = action.payload +} + const SettingsReducer = createSlice({ name: settingsReducerName, initialState, @@ -35,6 +41,7 @@ const SettingsReducer = createSlice({ setSecurityType, setEncryptedPassword, setNetworkType, + setCurrency, }, })