@luxexchange/lx 1.0.0

package/src/features/favorites/slice.ts

@@ -0,0 +1,87 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit'
+import { Ether } from '@uniswap/sdk-core'
+import { WBTC } from '@luxexchange/lx/src/constants/tokens'
+import { normalizeCurrencyIdForMapLookup } from '@luxexchange/lx/src/data/cache'
+import { UniverseChainId } from '@luxexchange/lx/src/features/chains/types'
+import { type CurrencyId } from '@luxexchange/lx/src/types/currency'
+import { currencyId as idFromCurrency } from '@luxexchange/lx/src/utils/currencyId'
+import { logger } from '@luxfi/utilities/src/logger/logger'
+
+export interface FavoritesState {
+  tokens: CurrencyId[]
+  watchedAddresses: Address[]
+}
+
+// Default currency ids, need to be normalized to match slice add and remove behavior
+const WBTC_CURRENCY_ID = normalizeCurrencyIdForMapLookup(idFromCurrency(WBTC))
+const ETH_CURRENCY_ID = normalizeCurrencyIdForMapLookup(idFromCurrency(Ether.onChain(UniverseChainId.Mainnet)))
+
+export const initialFavoritesState: FavoritesState = {
+  tokens: [ETH_CURRENCY_ID, WBTC_CURRENCY_ID],
+  watchedAddresses: [],
+}
+
+export const slice = createSlice({
+  name: 'favorites',
+  initialState: initialFavoritesState,
+  reducers: {
+    addFavoriteToken: (state, { payload: { currencyId } }: PayloadAction<{ currencyId: string }>) => {
+      if (state.tokens.indexOf(currencyId) === -1) {
+        state.tokens.push(normalizeCurrencyIdForMapLookup(currencyId)) // normalize all IDs
+      } else {
+        logger.warn('slice', 'addFavoriteToken', `Attempting to favorite a token twice (${currencyId})`)
+      }
+    },
+    removeFavoriteToken: (state, { payload: { currencyId } }: PayloadAction<{ currencyId: string }>) => {
+      const newTokens = state.tokens.filter((c) => {
+        return c.toLocaleLowerCase() !== currencyId.toLocaleLowerCase()
+      })
+
+      if (newTokens.length === state.tokens.length) {
+        logger.warn(
+          'slice',
+          'removeFavoriteToken',
+          `Attempting to un-favorite a token that was not in favorites (${currencyId})`,
+        )
+      }
+
+      state.tokens = newTokens
+    },
+    setFavoriteTokens: (state, { payload: { currencyIds } }: PayloadAction<{ currencyIds: string[] }>) => {
+      state.tokens = currencyIds
+    },
+    addWatchedAddress: (state, { payload: { address } }: PayloadAction<{ address: Address }>) => {
+      if (!state.watchedAddresses.includes(address)) {
+        state.watchedAddresses.push(address)
+      } else {
+        logger.warn('slice', 'addWatchedAddress', `Attempting to watch an address twice (${address})`)
+      }
+    },
+    removeWatchedAddress: (state, { payload: { address } }: PayloadAction<{ address: Address }>) => {
+      const newWatched = state.watchedAddresses.filter((a) => a !== address)
+      if (newWatched.length === state.watchedAddresses.length) {
+        logger.warn(
+          'slice',
+          'removeWatchedAddress',
+          `Attempting to remove an address not found in watched list (${address})`,
+        )
+      }
+      state.watchedAddresses = newWatched
+    },
+    setFavoriteWallets: (state, { payload: { addresses } }: PayloadAction<{ addresses: Address[] }>) => {
+      state.watchedAddresses = addresses
+    },
+    resetFavorites: () => initialFavoritesState,
+  },
+})
+
+export const {
+  addFavoriteToken,
+  removeFavoriteToken,
+  setFavoriteTokens,
+  addWatchedAddress,
+  removeWatchedAddress,
+  setFavoriteWallets,
+  resetFavorites,
+} = slice.actions
+export const { reducer: favoritesReducer } = slice

package/src/features/favorites/useSelectHasTokenFavorited.ts

@@ -0,0 +1,12 @@
+import { useMemo } from 'react'
+import { useSelector } from 'react-redux'
+import { normalizeCurrencyIdForMapLookup } from '@luxexchange/lx/src/data/cache'
+import { makeSelectHasTokenFavorited } from '@luxexchange/lx/src/features/favorites/selectors'
+import { LuxState } from '@luxexchange/lx/src/state/luxReducer'
+
+export function useSelectHasTokenFavorited(currencyId: string): boolean {
+  const selectHasTokenFavorited = useMemo(makeSelectHasTokenFavorited, [])
+  return useSelector((state: LuxState) =>
+    selectHasTokenFavorited(state, normalizeCurrencyIdForMapLookup(currencyId)),
+  )
+}

package/src/features/favorites/useToggleFavoriteCallback.tsx

@@ -0,0 +1,34 @@
+import { useCallback } from 'react'
+import { useDispatch } from 'react-redux'
+import { normalizeCurrencyIdForMapLookup } from '@luxexchange/lx/src/data/cache'
+import { addFavoriteToken, removeFavoriteToken } from '@luxexchange/lx/src/features/favorites/slice'
+import { MobileEventName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { sendAnalyticsEvent } from '@luxexchange/lx/src/features/telemetry/send'
+import { CurrencyId } from '@luxexchange/lx/src/types/currency'
+import { currencyIdToAddress, currencyIdToChain } from '@luxexchange/lx/src/utils/currencyId'
+
+export function useToggleFavoriteCallback({
+  id,
+  tokenName,
+  isFavoriteToken,
+}: {
+  id: CurrencyId
+  tokenName?: string
+  isFavoriteToken: boolean
+}): () => void {
+  const dispatch = useDispatch()
+
+  return useCallback(() => {
+    if (isFavoriteToken) {
+      dispatch(removeFavoriteToken({ currencyId: normalizeCurrencyIdForMapLookup(id) }))
+    } else {
+      sendAnalyticsEvent(MobileEventName.FavoriteItem, {
+        address: currencyIdToAddress(normalizeCurrencyIdForMapLookup(id)),
+        chain: currencyIdToChain(id) as number,
+        type: 'token',
+        name: tokenName,
+      })
+      dispatch(addFavoriteToken({ currencyId: normalizeCurrencyIdForMapLookup(id) }))
+    }
+  }, [dispatch, id, isFavoriteToken, tokenName])
+}

package/src/features/favorites/useToggleWatchedWalletCallback.ts

@@ -0,0 +1,26 @@
+import { useCallback } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useOnchainDisplayName } from '@luxexchange/lx/src/features/accounts/useOnchainDisplayName'
+import { selectWatchedAddressSet } from '@luxexchange/lx/src/features/favorites/selectors'
+import { addWatchedAddress, removeWatchedAddress } from '@luxexchange/lx/src/features/favorites/slice'
+import { MobileEventName } from '@luxexchange/lx/src/features/telemetry/constants'
+import { sendAnalyticsEvent } from '@luxexchange/lx/src/features/telemetry/send'
+
+export function useToggleWatchedWalletCallback(address: Address): () => void {
+  const dispatch = useDispatch()
+  const isFavoriteWallet = useSelector(selectWatchedAddressSet).has(address)
+  const displayName = useOnchainDisplayName(address)
+
+  return useCallback(() => {
+    if (isFavoriteWallet) {
+      dispatch(removeWatchedAddress({ address }))
+    } else {
+      sendAnalyticsEvent(MobileEventName.FavoriteItem, {
+        address,
+        type: 'wallet',
+        name: displayName?.name,
+      })
+      dispatch(addWatchedAddress({ address }))
+    }
+  }, [address, dispatch, displayName?.name, isFavoriteWallet])
+}

package/src/features/fiatCurrency/constants.ts

@@ -0,0 +1,53 @@
+export enum FiatCurrency {
+  ArgentinePeso = 'ARS',
+  AustralianDollar = 'AUD',
+  BrazilianReal = 'BRL',
+  CanadianDollar = 'CAD',
+  ChineseYuan = 'CNY',
+  ColombianPeso = 'COP',
+  Euro = 'EUR',
+  BritishPound = 'GBP',
+  HongKongDollar = 'HKD',
+  IndonesianRupiah = 'IDR',
+  IndianRupee = 'INR',
+  JapaneseYen = 'JPY',
+  MexicanPeso = 'MXN',
+  NewZealandDollar = 'NZD',
+  NigerianNaira = 'NGN',
+  PakistaniRupee = 'PKR',
+  RussianRuble = 'RUB',
+  SingaporeDollar = 'SGD',
+  SouthKoreanWon = 'KRW',
+  TurkishLira = 'TRY',
+  UkrainianHryvnia = 'UAH',
+  UnitedStatesDollar = 'USD',
+  VietnameseDong = 'VND',
+}
+
+export const DEFAULT_LOCAL_CURRENCY: FiatCurrency = FiatCurrency.UnitedStatesDollar
+
+export const ORDERED_CURRENCIES: FiatCurrency[] = [
+  FiatCurrency.UnitedStatesDollar,
+  FiatCurrency.ArgentinePeso,
+  FiatCurrency.AustralianDollar,
+  FiatCurrency.BrazilianReal,
+  FiatCurrency.CanadianDollar,
+  FiatCurrency.ChineseYuan,
+  FiatCurrency.ColombianPeso,
+  FiatCurrency.Euro,
+  FiatCurrency.BritishPound,
+  FiatCurrency.HongKongDollar,
+  FiatCurrency.IndonesianRupiah,
+  FiatCurrency.IndianRupee,
+  FiatCurrency.JapaneseYen,
+  FiatCurrency.SouthKoreanWon,
+  FiatCurrency.MexicanPeso,
+  FiatCurrency.NewZealandDollar,
+  FiatCurrency.NigerianNaira,
+  FiatCurrency.PakistaniRupee,
+  FiatCurrency.RussianRuble,
+  FiatCurrency.SingaporeDollar,
+  FiatCurrency.TurkishLira,
+  FiatCurrency.UkrainianHryvnia,
+  FiatCurrency.VietnameseDong,
+]

package/src/features/fiatCurrency/conversion.ts

@@ -0,0 +1,172 @@
+import { GraphQLApi } from '@luxfi/api'
+import { useCallback, useMemo } from 'react'
+import { PollingInterval } from '@luxexchange/lx/src/constants/misc'
+import { FiatCurrency } from '@luxexchange/lx/src/features/fiatCurrency/constants'
+import { getFiatCurrencyCode, useAppFiatCurrency } from '@luxexchange/lx/src/features/fiatCurrency/hooks'
+import { LocalizationContextState } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { FiatNumberType } from '@luxfi/utilities/src/format/types'
+
+type SupportedServerCurrency = Extract<
+  GraphQLApi.Currency,
+  | GraphQLApi.Currency.Ars
+  | GraphQLApi.Currency.Aud
+  | GraphQLApi.Currency.Brl
+  | GraphQLApi.Currency.Cad
+  | GraphQLApi.Currency.Cny
+  | GraphQLApi.Currency.Cop
+  | GraphQLApi.Currency.Eur
+  | GraphQLApi.Currency.Gbp
+  | GraphQLApi.Currency.Hkd
+  | GraphQLApi.Currency.Idr
+  | GraphQLApi.Currency.Inr
+  | GraphQLApi.Currency.Jpy
+  | GraphQLApi.Currency.Krw
+  | GraphQLApi.Currency.Mxn
+  | GraphQLApi.Currency.Ngn
+  | GraphQLApi.Currency.Nzd
+  | GraphQLApi.Currency.Pkr
+  | GraphQLApi.Currency.Rub
+  | GraphQLApi.Currency.Sgd
+  | GraphQLApi.Currency.Try
+  | GraphQLApi.Currency.Uah
+  | GraphQLApi.Currency.Usd
+  | GraphQLApi.Currency.Vnd
+>
+const mapServerCurrencyToFiatCurrency: Record<GraphQLApi.Currency, FiatCurrency | undefined> = {
+  [GraphQLApi.Currency.Ars]: FiatCurrency.ArgentinePeso,
+  [GraphQLApi.Currency.Aud]: FiatCurrency.AustralianDollar,
+  [GraphQLApi.Currency.Brl]: FiatCurrency.BrazilianReal,
+  [GraphQLApi.Currency.Cad]: FiatCurrency.CanadianDollar,
+  [GraphQLApi.Currency.Cny]: FiatCurrency.ChineseYuan,
+  [GraphQLApi.Currency.Cop]: FiatCurrency.ColombianPeso,
+  [GraphQLApi.Currency.Eur]: FiatCurrency.Euro,
+  [GraphQLApi.Currency.Gbp]: FiatCurrency.BritishPound,
+  [GraphQLApi.Currency.Hkd]: FiatCurrency.HongKongDollar,
+  [GraphQLApi.Currency.Idr]: FiatCurrency.IndonesianRupiah,
+  [GraphQLApi.Currency.Inr]: FiatCurrency.IndianRupee,
+  [GraphQLApi.Currency.Jpy]: FiatCurrency.JapaneseYen,
+  [GraphQLApi.Currency.Krw]: FiatCurrency.SouthKoreanWon,
+  [GraphQLApi.Currency.Mxn]: FiatCurrency.MexicanPeso,
+  [GraphQLApi.Currency.Ngn]: FiatCurrency.NigerianNaira,
+  [GraphQLApi.Currency.Pkr]: FiatCurrency.PakistaniRupee,
+  [GraphQLApi.Currency.Rub]: FiatCurrency.RussianRuble,
+  [GraphQLApi.Currency.Sgd]: FiatCurrency.SingaporeDollar,
+  [GraphQLApi.Currency.Try]: FiatCurrency.TurkishLira,
+  [GraphQLApi.Currency.Uah]: FiatCurrency.UkrainianHryvnia,
+  [GraphQLApi.Currency.Usd]: FiatCurrency.UnitedStatesDollar,
+  [GraphQLApi.Currency.Vnd]: FiatCurrency.VietnameseDong,
+  [GraphQLApi.Currency.Eth]: undefined,
+  [GraphQLApi.Currency.Matic]: undefined,
+  [GraphQLApi.Currency.Nzd]: FiatCurrency.NewZealandDollar,
+  [GraphQLApi.Currency.Thb]: undefined,
+}
+export const mapFiatCurrencyToServerCurrency: Record<FiatCurrency, SupportedServerCurrency> = {
+  [FiatCurrency.ArgentinePeso]: GraphQLApi.Currency.Ars,
+  [FiatCurrency.AustralianDollar]: GraphQLApi.Currency.Aud,
+  [FiatCurrency.BrazilianReal]: GraphQLApi.Currency.Brl,
+  [FiatCurrency.CanadianDollar]: GraphQLApi.Currency.Cad,
+  [FiatCurrency.ChineseYuan]: GraphQLApi.Currency.Cny,
+  [FiatCurrency.ColombianPeso]: GraphQLApi.Currency.Cop,
+  [FiatCurrency.Euro]: GraphQLApi.Currency.Eur,
+  [FiatCurrency.BritishPound]: GraphQLApi.Currency.Gbp,
+  [FiatCurrency.HongKongDollar]: GraphQLApi.Currency.Hkd,
+  [FiatCurrency.IndonesianRupiah]: GraphQLApi.Currency.Idr,
+  [FiatCurrency.IndianRupee]: GraphQLApi.Currency.Inr,
+  [FiatCurrency.JapaneseYen]: GraphQLApi.Currency.Jpy,
+  [FiatCurrency.MexicanPeso]: GraphQLApi.Currency.Mxn,
+  [FiatCurrency.NewZealandDollar]: GraphQLApi.Currency.Nzd,
+  [FiatCurrency.SouthKoreanWon]: GraphQLApi.Currency.Krw,
+  [FiatCurrency.NigerianNaira]: GraphQLApi.Currency.Ngn,
+  [FiatCurrency.PakistaniRupee]: GraphQLApi.Currency.Pkr,
+  [FiatCurrency.RussianRuble]: GraphQLApi.Currency.Rub,
+  [FiatCurrency.SingaporeDollar]: GraphQLApi.Currency.Sgd,
+  [FiatCurrency.TurkishLira]: GraphQLApi.Currency.Try,
+  [FiatCurrency.UkrainianHryvnia]: GraphQLApi.Currency.Uah,
+  [FiatCurrency.UnitedStatesDollar]: GraphQLApi.Currency.Usd,
+  [FiatCurrency.VietnameseDong]: GraphQLApi.Currency.Vnd,
+}
+
+export interface FiatConverter {
+  convertFiatAmount: (amount: number) => { amount: number; currency: FiatCurrency }
+  convertFiatAmountFormatted: (
+    fromAmount: Maybe<number | string>,
+    numberType: FiatNumberType,
+    placeholder?: string,
+  ) => string
+  conversionRate?: number
+}
+
+const SOURCE_CURRENCY = GraphQLApi.Currency.Usd // Assuming all currency data comes from USD
+
+/**
+ * Hook used to return a converter with a set of all necessary conversion logic needed for
+ * fiat currency. This is based off of the currently selected language and fiat currency
+ * in settings, using a graphql endpoint to retrieve the conversion rate.
+ * This ensures that the converted and formatted values are properly localized. If any additional
+ * conversion logic is needed, please add them here.
+ * @returns set of localized fiat currency conversion functions
+ */
+export function useFiatConverter({
+  formatNumberOrString,
+}: Pick<LocalizationContextState, 'formatNumberOrString'>): FiatConverter {
+  const appCurrency = useAppFiatCurrency()
+  const toCurrency = mapFiatCurrencyToServerCurrency[appCurrency]
+
+  const { data: latestConversion, previousData: prevConversion } = GraphQLApi.useConvertQuery({
+    variables: {
+      fromCurrency: SOURCE_CURRENCY,
+      toCurrency,
+    },
+    pollInterval: PollingInterval.Slow,
+  })
+
+  const conversion = latestConversion || prevConversion
+  const conversionRate = conversion?.convert?.value
+  const conversionCurrency = conversion?.convert?.currency
+  const outputCurrency = conversionCurrency ? mapServerCurrencyToFiatCurrency[conversionCurrency] : undefined
+
+  const convertFiatAmountInner = useCallback(
+    (amount: number): { amount: number; currency: FiatCurrency } => {
+      const defaultResult = { amount, currency: FiatCurrency.UnitedStatesDollar }
+
+      if (SOURCE_CURRENCY === toCurrency || !conversionRate || !outputCurrency) {
+        return defaultResult
+      }
+
+      return {
+        amount: amount * conversionRate,
+        currency: outputCurrency,
+      }
+    },
+    [conversionRate, outputCurrency, toCurrency],
+  )
+  const convertFiatAmountFormattedInner = useCallback(
+    // eslint-disable-next-line max-params
+    (fromAmount: Maybe<number | string>, numberType: FiatNumberType, placeholder = '-'): string => {
+      if (fromAmount === undefined || fromAmount === null) {
+        return placeholder
+      }
+
+      const amountNumber = typeof fromAmount === 'string' ? parseFloat(fromAmount) : fromAmount
+      const converted = convertFiatAmountInner(amountNumber)
+      const currencyCode = getFiatCurrencyCode(converted.currency)
+
+      return formatNumberOrString({
+        value: converted.amount,
+        type: numberType,
+        currencyCode,
+        placeholder,
+      })
+    },
+    [convertFiatAmountInner, formatNumberOrString],
+  )
+
+  return useMemo(
+    () => ({
+      conversionRate,
+      convertFiatAmount: convertFiatAmountInner,
+      convertFiatAmountFormatted: convertFiatAmountFormattedInner,
+    }),
+    [conversionRate, convertFiatAmountFormattedInner, convertFiatAmountInner],
+  )
+}

package/src/features/fiatCurrency/hooks/useFormatChartFiatDelta.ts

@@ -0,0 +1,31 @@
+import { useMemo } from 'react'
+import { useAppFiatCurrency } from '@luxexchange/lx/src/features/fiatCurrency/hooks'
+import {
+  FiatDeltaFormatOptions,
+  FormattedFiatDelta,
+} from '@luxexchange/lx/src/features/fiatCurrency/priceChart/formatters/shared/types'
+import { formatChartFiatDelta } from '@luxexchange/lx/src/features/fiatCurrency/priceChart/priceChartConversion'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+
+/**
+ * Hook for formatting chart fiat delta values using the app's current fiat currency
+ */
+export function useFormatChartFiatDelta(): {
+  formatChartFiatDelta: (
+    options: Omit<FiatDeltaFormatOptions, 'currency' | 'formatNumberOrString'>,
+  ) => FormattedFiatDelta
+} {
+  const currency = useAppFiatCurrency()
+  const { formatNumberOrString } = useLocalizationContext()
+
+  return useMemo(
+    () => ({
+      formatChartFiatDelta: (
+        options: Omit<FiatDeltaFormatOptions, 'currency' | 'formatNumberOrString'>,
+      ): FormattedFiatDelta => {
+        return formatChartFiatDelta({ ...options, currency, formatNumberOrString })
+      },
+    }),
+    [currency, formatNumberOrString],
+  )
+}

package/src/features/fiatCurrency/hooks.ts

@@ -0,0 +1,167 @@
+import { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+import { AppTFunction } from '@luxfi/ui/src/i18n/types'
+import { useUrlContext } from '@luxexchange/lx/src/contexts/UrlContext'
+import { FiatCurrency, ORDERED_CURRENCIES } from '@luxexchange/lx/src/features/fiatCurrency/constants'
+import { FiatCurrencyInfo } from '@luxexchange/lx/src/features/fiatOnRamp/types'
+import { useCurrentLocale } from '@luxexchange/lx/src/features/language/hooks'
+import { useLocalizationContext } from '@luxexchange/lx/src/features/language/LocalizationContext'
+import { LuxState } from '@luxexchange/lx/src/state/luxReducer'
+// biome-ignore lint/style/noRestrictedImports: legacy import will be migrated
+import { FiatCurrencyComponents, getFiatCurrencyComponents } from '@luxfi/utilities/src/format/localeBased'
+
+/**
+ * Helper function for getting the ISO currency code from our internal enum
+ * @param currency target currency
+ * @returns ISO currency code
+ */
+// ISO currency code is only in English and cannot be translated
+export function getFiatCurrencyCode(currency: FiatCurrency): string {
+  return currency.toString()
+}
+
+/**
+ * Hook to get the currency symbol based on the fiat currency in the current
+ * language/locale, which is why it's a hook
+ * @param currency target currency
+ * @returns currency symbol
+ */
+export function useFiatCurrencyComponents(currency: FiatCurrency): FiatCurrencyComponents {
+  const locale = useCurrentLocale()
+  const currencyCode = getFiatCurrencyCode(currency)
+
+  const components = getFiatCurrencyComponents(locale, currencyCode)
+  return components
+}
+
+/**
+ * Helper used to get the fiat currency name in the current app language
+ * @param currency target currency
+ * @returns currency name
+ */
+export function getFiatCurrencyName(t: AppTFunction, currency: FiatCurrency): { name: string; shortName: string } {
+  const currencyToCurrencyName: Record<FiatCurrency, string> = {
+    [FiatCurrency.AustralianDollar]: t('currency.aud'),
+    [FiatCurrency.ArgentinePeso]: t('currency.ars'),
+    [FiatCurrency.BrazilianReal]: t('currency.brl'),
+    [FiatCurrency.CanadianDollar]: t('currency.cad'),
+    [FiatCurrency.ChineseYuan]: t('currency.cny'),
+    [FiatCurrency.ColombianPeso]: t('currency.cop'),
+    [FiatCurrency.Euro]: t('currency.eur'),
+    [FiatCurrency.BritishPound]: t('currency.gbp'),
+    [FiatCurrency.HongKongDollar]: t('currency.hkd'),
+    [FiatCurrency.IndonesianRupiah]: t('currency.idr'),
+    [FiatCurrency.IndianRupee]: t('currency.inr'),
+    [FiatCurrency.JapaneseYen]: t('currency.jpy'),
+    [FiatCurrency.SouthKoreanWon]: t('currency.krw'),
+    [FiatCurrency.MexicanPeso]: t('currency.mxn'),
+    [FiatCurrency.NewZealandDollar]: t('currency.nzd'),
+    [FiatCurrency.NigerianNaira]: t('currency.ngn'),
+    [FiatCurrency.PakistaniRupee]: t('currency.pkr'),
+    [FiatCurrency.RussianRuble]: t('currency.rub'),
+    [FiatCurrency.SingaporeDollar]: t('currency.sgd'),
+    [FiatCurrency.TurkishLira]: t('currency.try'),
+    [FiatCurrency.UkrainianHryvnia]: t('currency.uah'),
+    [FiatCurrency.UnitedStatesDollar]: t('currency.usd'),
+    [FiatCurrency.VietnameseDong]: t('currency.vnd'),
+  }
+  const currencyToGlobalSymbol: Record<FiatCurrency, string> = {
+    [FiatCurrency.AustralianDollar]: '$',
+    [FiatCurrency.ArgentinePeso]: '$',
+    [FiatCurrency.BrazilianReal]: 'R$',
+    [FiatCurrency.CanadianDollar]: '$',
+    [FiatCurrency.ChineseYuan]: '¥',
+    [FiatCurrency.ColombianPeso]: '$',
+    [FiatCurrency.Euro]: '€',
+    [FiatCurrency.BritishPound]: '£',
+    [FiatCurrency.HongKongDollar]: '$',
+    [FiatCurrency.IndonesianRupiah]: 'Rp',
+    [FiatCurrency.IndianRupee]: '₹',
+    [FiatCurrency.JapaneseYen]: '¥',
+    [FiatCurrency.SouthKoreanWon]: '₩',
+    [FiatCurrency.MexicanPeso]: '$',
+    [FiatCurrency.NewZealandDollar]: '$',
+    [FiatCurrency.NigerianNaira]: '₦',
+    [FiatCurrency.PakistaniRupee]: 'Rs',
+    [FiatCurrency.RussianRuble]: '₽',
+    [FiatCurrency.SingaporeDollar]: '$',
+    [FiatCurrency.TurkishLira]: '₺',
+    [FiatCurrency.UkrainianHryvnia]: '₴',
+    [FiatCurrency.UnitedStatesDollar]: '$',
+    [FiatCurrency.VietnameseDong]: '₫',
+  }
+
+  const code = getFiatCurrencyCode(currency)
+  const symbol = currencyToGlobalSymbol[currency]
+  return { name: currencyToCurrencyName[currency], shortName: `${code} (${symbol})` }
+}
+
+/**
+ * Hook used to get fiat currency info (name, code, symbol, etc.) in the current app language
+ * @param currency target currency
+ * @returns all relevant currency info
+ */
+export function useFiatCurrencyInfo(currency: FiatCurrency): FiatCurrencyInfo {
+  const { t } = useTranslation()
+  const components = useFiatCurrencyComponents(currency)
+  const { name, shortName } = getFiatCurrencyName(t, currency)
+  const code = getFiatCurrencyCode(currency)
+
+  return {
+    ...components,
+    name,
+    shortName,
+    code,
+  }
+}
+
+function useUrlLocalCurrency(): FiatCurrency | undefined {
+  const { useParsedQueryString } = useUrlContext()
+  const parsed = useParsedQueryString()
+  const parsedLocalCurrency = parsed['cur']
+
+  if (typeof parsedLocalCurrency !== 'string') {
+    return undefined
+  }
+
+  const lowerCaseSupportedLocalCurrency = parsedLocalCurrency.toLowerCase()
+  return ORDERED_CURRENCIES.find((localCurrency) => localCurrency.toLowerCase() === lowerCaseSupportedLocalCurrency)
+}
+
+/**
+ * Hook used to return the current selected fiat currency in the app
+ * @returns currently selected fiat currency
+ */
+export function useAppFiatCurrency(): FiatCurrency {
+  const storeFiatCurrency = useSelector((state: LuxState) => state.userSettings.currentCurrency)
+  const urlFiatCurrency = useUrlLocalCurrency()
+
+  return useMemo(() => urlFiatCurrency ?? storeFiatCurrency, [storeFiatCurrency, urlFiatCurrency])
+}
+
+/**
+ * Hook used to return all relevant currency info (name, code, symbol, etc)
+ * for the currently selected fiat currency in the app
+ * @returns all relevant info for the currently selected fiat currency
+ */
+export function useAppFiatCurrencyInfo(): FiatCurrencyInfo {
+  const currency = useAppFiatCurrency()
+
+  return useFiatCurrencyInfo(currency)
+}
+
+/**
+ * Hook to convert local fiat currency amount to USD amount
+ * @returns USD amount
+ */
+export const useLocalFiatToUSDConverter = (): ((fiatAmount: number) => number | undefined) => {
+  const { convertFiatAmount } = useLocalizationContext()
+  return useCallback(
+    (fiatAmount: number): number | undefined => {
+      const { amount: USDInLocalCurrency } = convertFiatAmount(1)
+      return USDInLocalCurrency ? fiatAmount / USDInLocalCurrency : undefined
+    },
+    [convertFiatAmount],
+  )
+}

package/src/features/fiatCurrency/priceChart/formatters/shared/types.ts

@@ -0,0 +1,37 @@
+import { FiatCurrency } from '@luxexchange/lx/src/features/fiatCurrency/constants'
+import { FormatNumberOrStringInput } from '@luxexchange/lx/src/features/language/formatter'
+
+export type DecimalPlaceNumber = number | 'threshold' | 'zero'
+
+export interface TrimTrailingZerosParams {
+  formatted: string
+  decimals: number
+  roundedValue?: number // Optional - only used by stablecoin formatter
+}
+
+export interface FiatDeltaFormatter {
+  getDecimalPlaces: (absValue: number) => DecimalPlaceNumber
+  trimTrailingZeros: (params: TrimTrailingZerosParams) => string
+  shouldShowBelowThreshold: (absValue: number) => boolean
+  format: (params: FormatParams) => string
+}
+
+export interface FormatParams {
+  value: number
+  currency: FiatCurrency
+  formatNumberOrString: (input: FormatNumberOrStringInput) => string
+}
+
+export interface FiatDeltaFormatOptions {
+  startingPrice: number
+  endingPrice: number
+  isStablecoin?: boolean
+  currency?: FiatCurrency
+  formatNumberOrString: (input: FormatNumberOrStringInput) => string
+}
+
+export interface FormattedFiatDelta {
+  formatted: string
+  rawDelta: number
+  belowThreshold?: boolean
+}