feat: multi currency support

sample.env

@@ -31,6 +31,7 @@ REACT_APP_MIDGARD_URL=https://midgard.thorchain.info/v2
 
 REACT_APP_FRIENDLY_CAPTCHA_SITE_KEY=FCMM7AFC0S6A8NUK
 
+REACT_APP_FEATURE_MULTI_CURRENCY=false
 REACT_APP_FEATURE_OSMOSIS=false
 REACT_APP_FEATURE_WALLETCONNECT_WALLET=false
 REACT_APP_FEATURE_AVALANCHE=false

src/assets/translations/en/main.json

@@ -695,6 +695,7 @@
     "settings": {
       "settings": "Settings",
       "currency": "Currency",
+      "currencyFormat": "Currency Format",
       "language": "Language",
       "balanceThreshold": "Balance Threshold",
       "balanceThresholdTooltip": "Hide balances below this value",

src/components/Amount/Amount.tsx

@@ -10,23 +10,28 @@ type AmountProps = {
   value: number | string
   prefix?: string
   suffix?: string
+  omitDecimalTrailingZeros?: boolean
+  abbreviated?: boolean
+  maximumFractionDigits?: number
 } & TextProps
 
 export function Amount({
   value,
   prefix = '',
   suffix = '',
   maximumFractionDigits,
+  omitDecimalTrailingZeros = false,
+  abbreviated = false,
   ...props
 }: any): React.ReactElement {
   const {
     number: { toString },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
 
   return (
     <RawText {...props}>
       {prefix}
-      {toString(value, { maximumFractionDigits })}
+      {toString(value, { maximumFractionDigits, omitDecimalTrailingZeros, abbreviated })}
       {suffix}
     </RawText>
   )
@@ -56,13 +61,14 @@ const Crypto = ({
   maximumFractionDigits = 8,
   prefix,
   suffix,
+  omitDecimalTrailingZeros = false,
   ...props
 }: CryptoAmountProps) => {
   const {
     number: { toCrypto, toParts },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
 
-  const crypto = toCrypto(value, symbol, { maximumFractionDigits })
+  const crypto = toCrypto(value, symbol, { maximumFractionDigits, omitDecimalTrailingZeros })
 
   if (!cryptoSymbolStyle) {
     return (
@@ -93,12 +99,27 @@ const Crypto = ({
   )
 }
 
-const Fiat = ({ value, fiatSymbolStyle, fiatType, prefix, suffix, ...props }: FiatAmountProps) => {
+const Fiat = ({
+  value,
+  fiatSymbolStyle,
+  fiatType,
+  prefix,
+  suffix,
+  maximumFractionDigits,
+  omitDecimalTrailingZeros = false,
+  abbreviated = false,
+  ...props
+}: FiatAmountProps) => {
   const {
     number: { toFiat, toParts },
-  } = useLocaleFormatter({ fiatType: fiatType || 'USD' })
+  } = useLocaleFormatter({ fiatType })
 
-  const fiat = toFiat(value, { fiatType })
+  const fiat = toFiat(value, {
+    fiatType,
+    omitDecimalTrailingZeros,
+    abbreviated,
+    maximumFractionDigits,
+  })
 
   if (!fiatSymbolStyle) {
     return (
@@ -132,7 +153,7 @@ const Fiat = ({ value, fiatSymbolStyle, fiatType, prefix, suffix, ...props }: Fi
 const Percent = ({ value, autoColor, options, prefix, suffix, ...props }: PercentAmountProps) => {
   const {
     number: { toPercent },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
   const formattedNumber = toPercent(value, options)
 
   const color = useMemo(() => {
@@ -155,17 +176,6 @@ const Percent = ({ value, autoColor, options, prefix, suffix, ...props }: Percen
   )
 }
 
-const Supply = ({ value, ...props }: AmountProps) => {
-  const {
-    number: { toSupply },
-  } = useLocaleFormatter({ fiatType: 'USD' })
-
-  const volume = toSupply(value)
-
-  return <RawText {...props}>{volume}</RawText>
-}
-
 Amount.Crypto = Crypto
 Amount.Fiat = Fiat
 Amount.Percent = Percent
-Amount.Supply = Supply

src/components/Approval/Approval.tsx

@@ -42,7 +42,7 @@ export const Approval = () => {
   const { approveInfinite, checkApprovalNeeded, updateTrade } = useSwapper()
   const {
     number: { toCrypto, toFiat },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
   const {
     state: { isConnected },
     dispatch,

src/components/AssetHeader/AssetChart.tsx

@@ -56,7 +56,7 @@ type AssetChartProps = {
 export const AssetChart = ({ accountId, assetId, isLoaded }: AssetChartProps) => {
   const {
     number: { toFiat },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
   const [percentChange, setPercentChange] = useState(0)
   const alertIconColor = useColorModeValue('blue.500', 'blue.200')
   const [timeframe, setTimeframe] = useState(DEFAULT_HISTORY_TIMEFRAME)

src/components/AssetHeader/AssetMarketData.tsx

@@ -104,7 +104,7 @@ export const AssetMarketData: React.FC<AssetMarketDataProps> = ({ assetId }) =>
                 <Text translation='assets.assetDetails.assetHeader.maxTotalSupply' />
               </StatLabel>
               <StatValue isLoaded={isLoaded}>
-                <Amount.Supply value={marketData?.maxSupply ?? 0} />
+                <Amount value={marketData?.maxSupply ?? 0} abbreviated omitDecimalTrailingZeros />
               </StatValue>
             </StatRow>
           )}
@@ -114,7 +114,11 @@ export const AssetMarketData: React.FC<AssetMarketDataProps> = ({ assetId }) =>
                 <Text translation='assets.assetDetails.assetHeader.availableSupply' />
               </StatLabel>
               <StatValue isLoaded={isLoaded}>
-                <Amount.Supply value={marketData?.supply} />
+                <Amount
+                  value={Math.round(Number(marketData?.supply ?? 0))}
+                  abbreviated
+                  omitDecimalTrailingZeros
+                />
               </StatValue>
             </StatRow>
           )}

src/components/DeFi/components/AssetInput.tsx

@@ -71,7 +71,7 @@ export const AssetInput: React.FC<AssetInputProps> = ({
 }) => {
   const {
     number: { localeParts },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
   const translate = useTranslate()
   const amountRef = useRef<string | null>(null)
   const [isFiat, setIsFiat] = useState<boolean>(false)

src/components/Graph/PrimaryChart/PrimaryChart.tsx

@@ -53,7 +53,7 @@ export const PrimaryChart = ({
 
   const {
     number: { toFiat },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
 
   const [chartColor] = useToken('colors', [color])
   const tooltipBg = useColorModeValue('white', colors.gray[800])

src/components/Modals/Send/Form.tsx

@@ -15,7 +15,7 @@ import {
 import { SelectAssetRoutes } from 'components/SelectAssets/SelectAssetCommon'
 import { SelectAssetRouter } from 'components/SelectAssets/SelectAssetRouter'
 import { AccountSpecifier } from 'state/slices/accountSpecifiersSlice/accountSpecifiersSlice'
-import { selectMarketDataById } from 'state/slices/selectors'
+import { selectMarketDataById, selectSelectedCurrency } from 'state/slices/selectors'
 import { useAppSelector } from 'state/store'
 
 import { useFormSend } from './hooks/useFormSend/useFormSend'
@@ -50,6 +50,7 @@ export const Form = ({ asset: initialAsset, accountId }: SendFormProps) => {
   const location = useLocation()
   const history = useHistory()
   const { handleSend } = useFormSend()
+  const selectedCurrency = useAppSelector(selectSelectedCurrency)
   const marketData = useAppSelector(state => selectMarketDataById(state, initialAsset.assetId))
 
   const methods = useForm<SendInput>({
@@ -63,7 +64,7 @@ export const Form = ({ asset: initialAsset, accountId }: SendFormProps) => {
       cryptoAmount: '',
       cryptoSymbol: initialAsset?.symbol,
       fiatAmount: '',
-      fiatSymbol: 'USD', // TODO: use user preferences to get default fiat currency
+      fiatSymbol: selectedCurrency,
     },
   })
 
@@ -72,7 +73,7 @@ export const Form = ({ asset: initialAsset, accountId }: SendFormProps) => {
     methods.setValue(SendFormFields.CryptoAmount, '')
     methods.setValue(SendFormFields.CryptoSymbol, asset.symbol)
     methods.setValue(SendFormFields.FiatAmount, '')
-    methods.setValue(SendFormFields.FiatSymbol, 'USD')
+    methods.setValue(SendFormFields.FiatSymbol, selectedCurrency)
     methods.setValue(SendFormFields.AccountId, accountId)
 
     history.push(SendRoutes.Address)

src/components/Modals/Settings/BalanceThresholdInput.tsx

@@ -30,7 +30,7 @@ export const BalanceThresholdInput = () => {
   const dispatch = useAppDispatch()
   const {
     number: { localeParts },
-  } = useLocaleFormatter({ fiatType: 'USD' })
+  } = useLocaleFormatter()
   const onChange = (value: string) => {
     dispatch(preferences.actions.setBalanceThreshold({ threshold: value }))
   }

src/components/Modals/Settings/CurrencyFormat.tsx

@@ -0,0 +1,82 @@
+import { ArrowBackIcon } from '@chakra-ui/icons'
+import { Button, Flex, Icon, IconButton, ModalBody, ModalHeader } from '@chakra-ui/react'
+import identity from 'lodash/identity'
+import sortBy from 'lodash/sortBy'
+import { FaCheck } from 'react-icons/fa'
+import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router-dom'
+import { SlideTransition } from 'components/SlideTransition'
+import { RawText } from 'components/Text'
+import { CurrencyFormats, preferences } from 'state/slices/preferencesSlice/preferencesSlice'
+import { selectCurrencyFormat } from 'state/slices/selectors'
+import { useAppDispatch, useAppSelector } from 'state/store'
+
+import { currencyFormatsRepresenter } from './SettingsCommon'
+
+export const CurrencyFormat = () => {
+  const dispatch = useAppDispatch()
+  const currentCurrencyFormat = useAppSelector(selectCurrencyFormat)
+  const translate = useTranslate()
+  const history = useHistory()
+  const { goBack } = history
+  const formats = sortBy(CurrencyFormats, identity)
+  const { setCurrencyFormat } = preferences.actions
+
+  return (
+    <SlideTransition>
+      <IconButton
+        variant='ghost'
+        icon={<ArrowBackIcon />}
+        aria-label={translate('common.back')}
+        position='absolute'
+        top={2}
+        left={3}
+        fontSize='xl'
+        size='sm'
+        isRound
+        onClick={goBack}
+      />
+      <ModalHeader textAlign='center'>{translate('modals.settings.currencyFormat')}</ModalHeader>
+      <>
+        <ModalBody
+          alignItems='center'
+          justifyContent='center'
+          textAlign='center'
+          maxHeight='400'
+          overflowY='auto'
+          overflowX='hidden'
+        >
+          {formats.map(currencyFormat => {
+            const active = currencyFormat === currentCurrencyFormat
+            const buttonProps = active
+              ? {
+                  disabled: true,
+                  _disabled: { opacity: 1 },
+                }
+              : {
+                  pl: 8,
+                  variant: 'ghost',
+                  onClick: () => dispatch(setCurrencyFormat({ currencyFormat })),
+                }
+            return (
+              <Button
+                mb={2}
+                width='full'
+                justifyContent='flexStart'
+                key={currencyFormat}
+                {...buttonProps}
+              >
+                <Flex alignItems='center' textAlign='left'>
+                  {active && <Icon as={FaCheck} color='blue.500' />}
+                  <Flex ml={4}>
+                    <RawText>{currencyFormatsRepresenter[currencyFormat]}</RawText>
+                  </Flex>
+                </Flex>
+              </Button>
+            )
+          })}
+        </ModalBody>
+      </>
+    </SlideTransition>
+  )
+}

src/components/Modals/Settings/FiatCurrencies.tsx

@@ -0,0 +1,87 @@
+import { ArrowBackIcon } from '@chakra-ui/icons'
+import { Button, Flex, Icon, IconButton, ModalBody, ModalHeader } from '@chakra-ui/react'
+import { SupportedFiatCurrencies, SupportedFiatCurrenciesList } from '@shapeshiftoss/market-service'
+import identity from 'lodash/identity'
+import sortBy from 'lodash/sortBy'
+import { FaCheck } from 'react-icons/fa'
+import { useTranslate } from 'react-polyglot'
+import { useHistory } from 'react-router-dom'
+import { SlideTransition } from 'components/SlideTransition'
+import { RawText, Text } from 'components/Text'
+import { preferences } from 'state/slices/preferencesSlice/preferencesSlice'
+import { selectSelectedCurrency } from 'state/slices/selectors'
+import { useAppDispatch, useAppSelector } from 'state/store'
+
+export const FiatCurrencies = () => {
+  const dispatch = useAppDispatch()
+  const selectedCurrency = useAppSelector(selectSelectedCurrency)
+  const translate = useTranslate()
+  const history = useHistory()
+  const { goBack } = history
+  const defaultCurrency: SupportedFiatCurrencies = 'USD'
+  const allFiatCurrencies = sortBy(SupportedFiatCurrenciesList, item =>
+    // keep default currency at the top of the list
+    item === defaultCurrency ? defaultCurrency : identity,
+  )
+  const { setSelectedCurrency } = preferences.actions
+
+  return (
+    <SlideTransition>
+      <IconButton
+        variant='ghost'
+        icon={<ArrowBackIcon />}
+        aria-label={translate('common.back')}
+        position='absolute'
+        top={2}
+        left={3}
+        fontSize='xl'
+        size='sm'
+        isRound
+        onClick={goBack}
+      />
+      <ModalHeader textAlign='center'>{translate('modals.settings.currency')}</ModalHeader>
+      <>
+        <ModalBody
+          alignItems='center'
+          justifyContent='center'
+          textAlign='center'
+          maxHeight='400'
+          overflowY='auto'
+          overflowX='hidden'
+        >
+          {allFiatCurrencies.map(currency => {
+            const active = currency === selectedCurrency
+            const buttonProps = active
+              ? {
+                  disabled: true,
+                  _disabled: { opacity: 1 },
+                }
+              : {
+                  pl: 8,
+                  variant: 'ghost',
+                  onClick: () => dispatch(setSelectedCurrency({ currency })),
+                }
+            return (
+              <Button
+                width='full'
+                justifyContent='flexStart'
+                key={currency}
+                mb={2}
+                {...buttonProps}
+              >
+                <Flex alignItems='center' textAlign='left'>
+                  {active && <Icon as={FaCheck} color='blue.500' />}
+                  <Flex ml={4}>
+                    <RawText>{currency}</RawText>
+                    <RawText mx={2}>-</RawText>
+                    <Text translation={`modals.settings.currencies.${currency}`} />
+                  </Flex>
+                </Flex>
+              </Button>
+            )
+          })}
+        </ModalBody>
+      </>
+    </SlideTransition>
+  )
+}