Support displaying fiat values in non-USD currencies

The preferred fiat currency can now be configured
per paratime / network.

src/app/components/Account/index.tsx

@@ -22,7 +22,7 @@ import { AccountAvatar } from '../AccountAvatar'
 import { RuntimeBalanceDisplay } from '../Balance/RuntimeBalanceDisplay'
 import { calculateFiatValue } from '../Balance/hooks'
 import { FiatMoneyAmount } from '../Balance/FiatMoneyAmount'
-import { getTokensForScope } from '../../../config'
+import { getFiatCurrencyForScope, getTokensForScope } from '../../../config'
 
 type AccountProps = {
   account?: RuntimeAccount
@@ -48,7 +48,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
   const nativeTokens = getTokensForScope(account || { network: 'mainnet', layer: 'sapphire' })
   const nativeTickerNames = nativeTokens.map(token => getNameForTicker(t, token.ticker))
   const contract = account?.evm_contract
-  const fiatValueInfo = calculateFiatValue(account?.balances, tokenPrices)
+  const fiatValueInfo = calculateFiatValue(account?.balances, tokenPrices, getFiatCurrencyForScope(account))
 
   return (
     <>

src/app/components/Balance/FiatMoneyAmount.tsx

@@ -16,7 +16,13 @@ export const FiatMoneyAmountBox = styled(Box)(() => ({
   flex: 1,
 }))
 
-export const FiatMoneyAmount: FC<FiatValueInfo> = ({ value, hasUsedCoinGecko, unknownTickers, loading }) => {
+export const FiatMoneyAmount: FC<FiatValueInfo> = ({
+  value,
+  fiatCurrency,
+  hasUsedCoinGecko,
+  unknownTickers,
+  loading,
+}) => {
   const { t } = useTranslation()
   return (
     <FiatMoneyAmountBox>
@@ -25,7 +31,7 @@ export const FiatMoneyAmount: FC<FiatValueInfo> = ({ value, hasUsedCoinGecko, un
           value,
           formatParams: {
             value: {
-              currency: 'USD', // TODO: why are we fixated on USD?
+              currency: fiatCurrency,
             } satisfies Intl.NumberFormatOptions,
           },
         })}

src/app/components/Balance/hooks.ts

@@ -17,6 +17,11 @@ export type FiatValueInfo = {
    */
   value?: string
 
+  /**
+   * The fiat currency used to express the value
+   */
+  fiatCurrency: string
+
   /**
    * Have we used CoinGecko for calculating this value?
    */
@@ -36,6 +41,7 @@ export type FiatValueInfo = {
 export const calculateFiatValue = (
   balances: RuntimeSdkBalance[] = [],
   tokenPrices: AllTokenPrices,
+  fiatCurrency: string,
 ): FiatValueInfo => {
   let hasValue = false
   let value = new BigNumber(0)
@@ -72,5 +78,6 @@ export const calculateFiatValue = (
     loading,
     unknownTickers: unknown,
     value: value.toFixed(),
+    fiatCurrency,
   }
 }

src/app/pages/AccountDetailsPage/index.tsx

@@ -18,6 +18,7 @@ import { AccountDetailsCard } from './AccountDetailsCard'
 import { AccountEventsCard } from './AccountEventsCard'
 import { DappBanner } from '../../components/DappBanner'
 import { AddressLoaderData } from '../../utils/route-utils'
+import { getFiatCurrencyForScope } from '../../../config'
 
 export type AccountDetailsContext = {
   scope: SearchScope
@@ -36,7 +37,7 @@ export const AccountDetailsPage: FC = () => {
   const isContract = !!account?.evm_contract
   const { token, isLoading: isTokenLoading } = useTokenInfo(scope, address, isContract)
 
-  const tokenPrices = useAllTokenPrices()
+  const tokenPrices = useAllTokenPrices(getFiatCurrencyForScope(scope))
 
   const { isLoading: areEventsLoading, isError: isEventsError, events } = useAccountEvents(scope, address)
 

src/app/pages/ParatimeDashboardPage/TokenPriceCard.tsx

@@ -9,23 +9,28 @@ import { COLORS } from '../../../styles/theme/colors'
 import Typography from '@mui/material/Typography'
 import { NativeTokenInfo } from '../../../types/ticker'
 import { SmallTokenLogo } from '../../components/logo/SmallTokenLogo'
+import { getFiatCurrencyForScope } from '../../../config'
+import { useScopeParam } from '../../hooks/useScopeParam'
 
 const StyledBox = styled(Box)(({ theme }) => ({
   position: 'absolute',
   top: `-${theme.spacing(2)}`,
   left: theme.spacing(4),
 }))
 
-const formatFiatParams = {
-  value: {
-    currency: 'USD', // TODO: why are we fixated on USD
-    maximumFractionDigits: 5,
-  } satisfies Intl.NumberFormatOptions,
-}
-
 export const TokenPriceCard: FC<{ token: NativeTokenInfo }> = ({ token }) => {
   const { t } = useTranslation()
-  const priceQuery = useTokenPrice(token.ticker)
+  const scope = useScopeParam()
+  const fiatCurrency = getFiatCurrencyForScope(scope)
+  const priceQuery = useTokenPrice(token.ticker, fiatCurrency)
+
+  const formatFiatParams = {
+    value: {
+      currency: fiatCurrency,
+      maximumFractionDigits: 5,
+    } satisfies Intl.NumberFormatOptions,
+  }
+
   const priceString = priceQuery.price
     ? t('common.fiatValueInUSD', {
         value: priceQuery.price,

src/app/pages/RuntimeTransactionDetailPage/CurrentFiatValue.tsx

@@ -8,11 +8,16 @@ import HelpIcon from '@mui/icons-material/Help'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
 import BigNumber from 'bignumber.js'
 
-type CurrentFiatValueProps = Pick<TokenPriceInfo, 'price' | 'hasUsedCoinGecko'> & {
+type CurrentFiatValueProps = Pick<TokenPriceInfo, 'price' | 'fiatCurrency' | 'hasUsedCoinGecko'> & {
   amount: string
 }
 
-export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({ amount, price, hasUsedCoinGecko }) => {
+export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({
+  amount,
+  price,
+  fiatCurrency,
+  hasUsedCoinGecko,
+}) => {
   const { t } = useTranslation()
   return price === undefined ? null : (
     <FiatMoneyAmountBox>
@@ -21,7 +26,7 @@ export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({ amount, price, has
           value: new BigNumber(amount).multipliedBy(price).toFixed(),
           formatParams: {
             value: {
-              currency: 'USD', // TODO: why are we fixated on USD
+              currency: fiatCurrency,
             } satisfies Intl.NumberFormatOptions,
           },
         })}

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -38,6 +38,7 @@ import { LongDataDisplay } from '../../components/LongDataDisplay'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 import { base64ToHex } from '../../utils/helpers'
 import { DappBanner } from '../../components/DappBanner'
+import { getFiatCurrencyForScope } from '../../../config'
 
 type TransactionSelectionResult = {
   wantedTransaction?: RuntimeTransaction
@@ -102,7 +103,7 @@ export const RuntimeTransactionDetailPage: FC = () => {
     data?.data,
   )
 
-  const tokenPrices = useAllTokenPrices()
+  const tokenPrices = useAllTokenPrices(getFiatCurrencyForScope(scope))
 
   if (!transaction && !isLoading) {
     throw AppErrors.NotFoundTxHash

src/app/pages/RuntimeTransactionsPage/index.tsx

@@ -16,6 +16,7 @@ import { RuntimeTransactionDetailView } from '../RuntimeTransactionDetailPage'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 import { useAllTokenPrices } from '../../../coin-gecko/api'
 import { VerticalList } from '../../components/VerticalList'
+import { getFiatCurrencyForScope } from '../../../config'
 
 const limit = NUMBER_OF_ITEMS_ON_SEPARATE_PAGE
 
@@ -34,7 +35,7 @@ export const RuntimeTransactionsPage: FC = () => {
     // we should call useGetConsensusTransactions()
   }
 
-  const tokenPrices = useAllTokenPrices()
+  const tokenPrices = useAllTokenPrices(getFiatCurrencyForScope(scope))
 
   useEffect(() => {
     if (!isMobile) {

src/app/pages/SearchResultsPage/__tests__/SearchResultsList.test.tsx

@@ -29,6 +29,7 @@ describe('SearchResultsView', () => {
             isLoading: false,
             isFree: false,
             price: 1,
+            fiatCurrency: 'usd',
             hasUsedCoinGecko: true,
           },
           [Ticker.TEST]: {
@@ -40,6 +41,7 @@ describe('SearchResultsView', () => {
             isLoading: false,
             isFree: false,
             price: 1,
+            fiatCurrency: 'usd',
             hasUsedCoinGecko: true,
           },
         }}
@@ -73,6 +75,7 @@ describe('SearchResultsView', () => {
             isLoading: false,
             isFree: false,
             price: 1,
+            fiatCurrency: 'usd',
             hasUsedCoinGecko: true,
           },
           [Ticker.TEST]: {
@@ -84,6 +87,7 @@ describe('SearchResultsView', () => {
             isLoading: false,
             isFree: false,
             price: 1,
+            fiatCurrency: 'usd',
             hasUsedCoinGecko: true,
           },
         }}

src/app/pages/SearchResultsPage/index.tsx

@@ -4,13 +4,14 @@ import { useScopeParam } from '../../hooks/useScopeParam'
 import { useSearch } from './hooks'
 import { SearchResultsView } from './SearchResultsView'
 import { useAllTokenPrices } from '../../../coin-gecko/api'
+import { getFiatCurrencyForScope } from '../../../config'
 
 export const SearchResultsPage: FC = () => {
   const searchParams = useParamSearch()
   const scope = useScopeParam()
   const { results, isLoading } = useSearch(searchParams)
 
-  const tokenPrices = useAllTokenPrices()
+  const tokenPrices = useAllTokenPrices(getFiatCurrencyForScope(scope))
 
   return (
     <SearchResultsView

src/coin-gecko/api.ts

@@ -31,18 +31,20 @@ export const getTokenPricesFromGecko = (
 
 const staleTime = 1000 * 60 * 3 // 3 minutes
 
-export function useGetTokenPricesFromGecko(tokenIds: string[]) {
+export function useGetTokenPricesFromGecko(tokenIds: string[], fiatCurrency: string) {
   return useQuery<AxiosResponse<TokenPriceMap>, AxiosError<unknown>>(
     ['tokenFiatPrices'],
     () =>
       getTokenPricesFromGecko({
         ids: tokenIds.join(','),
-        vs_currencies: 'usd',
+        vs_currencies: fiatCurrency ?? 'usd',
       }),
     {
       select: ({ data }) => {
         const result: TokenPriceMap = {}
-        Object.keys(data).forEach(key => (result[key] = (data as any)[key].usd)) // TODO why are we fixated on USD
+        Object.keys(data).forEach(key => {
+          result[key] = (data as any)[key][fiatCurrency]
+        })
         return result as any
       },
       staleTime,
@@ -52,13 +54,14 @@ export function useGetTokenPricesFromGecko(tokenIds: string[]) {
 
 export type TokenPriceInfo = {
   price?: number
+  fiatCurrency?: string
   isLoading: boolean
   isFree: boolean
   hasUsedCoinGecko: boolean
 }
 
-export const useTokenPrice = (ticker: Ticker): TokenPriceInfo => {
-  const tokenPrices = useAllTokenPrices()
+export const useTokenPrice = (ticker: Ticker, fiatCurrency: string): TokenPriceInfo => {
+  const tokenPrices = useAllTokenPrices(fiatCurrency)
   const price = tokenPrices[ticker]
   if (!price) {
     exhaustedTypeWarning('Checking price of unknown token ticker', ticker as any)
@@ -68,17 +71,18 @@ export const useTokenPrice = (ticker: Ticker): TokenPriceInfo => {
 
 export type AllTokenPrices = Partial<Record<Ticker, TokenPriceInfo>>
 
-export const useAllTokenPrices = (): AllTokenPrices => {
+export const useAllTokenPrices = (fiatCurrency: string): AllTokenPrices => {
   const tokens = uniq(RouteUtils.getEnabledScopes().map(getTokensForScope).flat())
   const geckoIds = tokens.map(token => token.geckoId).filter((id): id is string => !!id)
-  const { isLoading: geckoIsLoading, data: geckoPrices } = useGetTokenPricesFromGecko(geckoIds)
+  const { isLoading: geckoIsLoading, data: geckoPrices } = useGetTokenPricesFromGecko(geckoIds, fiatCurrency)
   const results: AllTokenPrices = {}
   tokens.forEach(token => {
     results[token.ticker] = {
       isLoading: geckoIsLoading,
       isFree: !!token.free,
       hasUsedCoinGecko: !!token.geckoId,
       price: token.geckoId && geckoPrices ? (geckoPrices as any)[token.geckoId] : undefined,
+      fiatCurrency: token.geckoId && geckoPrices ? fiatCurrency : 'xx',
     }
   })
   return results

src/config.ts

@@ -18,6 +18,11 @@ type LayerNetwork = {
    * (If not given, the network's default token will be used.)
    */
   tokens?: NativeTokenInfo[]
+
+  /**
+   * What fiat currency should we use for displaying value?
+   */
+  fiatCurrency?: string
 }
 
 type LayerConfig = {
@@ -132,6 +137,7 @@ const pontusxConfig: LayerConfig = {
     blockGasLimit: 15_000_000,
     runtimeId: '000000000000000000000000000000000000000000000000a6d1e3ebf60dff6c',
     tokens: [NativeToken.EUROe, NativeToken.TEST],
+    fiatCurrency: 'eur',
   },
   local: {
     activeNodes: undefined,
@@ -188,3 +194,6 @@ export const getTokensForScope = (scope: SearchScope | undefined): NativeTokenIn
   }
   return [networkDefault]
 }
+
+export const getFiatCurrencyForScope = (scope: SearchScope | undefined) =>
+  (scope ? paraTimesConfig[scope.layer]?.[scope.network]?.fiatCurrency : undefined) ?? 'usd'