Implemented Default Currencies in Wallet UI

components/brave_wallet_ui/common/actions/wallet_actions.ts

@@ -43,7 +43,8 @@ import {
   GasEstimation1559,
   ApproveERC20Params,
   WalletInfoBase,
-  WalletInfo
+  WalletInfo,
+  DefaultCurrencies
 } from '../../constants/types'
 
 export const initialize = createAction('initialize')
@@ -110,3 +111,4 @@ export const autoLockMinutesChanged = createAction('autoLockMinutesChanged')
 export const retryTransaction = createAction<TransactionInfo>('retryTransaction')
 export const cancelTransaction = createAction<TransactionInfo>('cancelTransaction')
 export const speedupTransaction = createAction<TransactionInfo>('speedupTransaction')
+export const defaultCurrenciesUpdated = createAction<DefaultCurrencies>('defaultCurrenciesUpdated')

components/brave_wallet_ui/common/async/handlers.ts

@@ -16,8 +16,6 @@ import {
   SetUserAssetVisiblePayloadType,
   SwapParamsPayloadType,
   UnlockWalletPayloadType,
-  // DefaultBaseCurrencyChanged,
-  // DefaultBaseCryptocurrencyChanged,
   UpdateUnapprovedTransactionGasFieldsType,
   UpdateUnapprovedTransactionSpendAllowanceType,
   TransactionStatusChanged
@@ -159,8 +157,13 @@ handler.on(WalletActions.defaultWalletChanged.getType(), async (store) => {
   await refreshWalletInfo(store)
 })
 
-// handler.on(WalletActions.defaultBaseCurrencyChanged.getType(), async (store, payload: DefaultBaseCurrencyChanged) => {})
-// handler.on(WalletActions.defaultBaseCryptocurrencyChanged.getType(), async (store, payload: DefaultBaseCryptocurrencyChanged) => {})
+handler.on(WalletActions.defaultBaseCurrencyChanged.getType(), async (store) => {
+  await refreshWalletInfo(store)
+})
+
+handler.on(WalletActions.defaultBaseCryptocurrencyChanged.getType(), async (store) => {
+  await refreshWalletInfo(store)
+})
 
 handler.on(WalletActions.lockWallet.getType(), async (store) => {
   const keyringController = getAPIProxy().keyringController
@@ -208,13 +211,22 @@ handler.on(WalletActions.initialized.getType(), async (store: Store, payload: Wa
   interactionNotifier.beginWatchingForInteraction(50000, state.isWalletLocked, async () => {
     keyringController.notifyUserInteraction()
   })
+  const braveWalletService = getAPIProxy().braveWalletService
+  const defaultFiat = await braveWalletService.getDefaultBaseCurrency()
+  const defualtCrypo = await braveWalletService.getDefaultBaseCryptocurrency()
+  const defaultCurrencies = {
+    fiat: defaultFiat.currency,
+    crypto: defualtCrypo.cryptocurrency
+  }
+  store.dispatch(WalletActions.defaultCurrenciesUpdated(defaultCurrencies))
   // Fetch Balances and Prices
   if (!state.isWalletLocked && state.isWalletCreated) {
     const currentNetwork = await store.dispatch(refreshNetworkInfo())
     await store.dispatch(refreshBalances(currentNetwork))
     await store.dispatch(refreshPrices())
     await store.dispatch(refreshTokenPriceHistory(state.selectedPortfolioTimeline))
   }
+
   // This can be 0 when the wallet is locked
   if (payload.selectedAccount) {
     await store.dispatch(refreshTransactionHistory(payload.selectedAccount))

components/brave_wallet_ui/common/async/lib.ts

@@ -133,7 +133,7 @@ export function refreshBalances (currentNetwork: EthereumChain) {
       return balanceInfo
     }))
     const balancesAndPrice = {
-      usdPrice: '',
+      fiatPrice: '',
       balances: getBalanceReturnInfos
     }
     await dispatch(WalletActions.nativeAssetBalancesUpdated(balancesAndPrice))
@@ -158,13 +158,12 @@ export function refreshBalances (currentNetwork: EthereumChain) {
 export function refreshPrices () {
   return async (dispatch: Dispatch, getState: () => State) => {
     const apiProxy = getAPIProxy()
-    const { wallet: { accounts, selectedPortfolioTimeline, selectedNetwork, userVisibleTokensInfo } } = getState()
-
+    const { wallet: { accounts, selectedPortfolioTimeline, selectedNetwork, userVisibleTokensInfo, defaultCurrencies } } = getState()
     const { assetRatioController } = apiProxy
-
+    const defaultFiatCurrency = defaultCurrencies.fiat.toLowerCase()
     // Update ETH Balances
-    const getNativeAssetPrice = await assetRatioController.getPrice([selectedNetwork.symbol.toLowerCase()], ['usd'], selectedPortfolioTimeline)
-    const nativeAssetPrice = getNativeAssetPrice.success ? getNativeAssetPrice.values.find((i) => i.toAsset === 'usd')?.price ?? '' : ''
+    const getNativeAssetPrice = await assetRatioController.getPrice([selectedNetwork.symbol.toLowerCase()], [defaultFiatCurrency], selectedPortfolioTimeline)
+    const nativeAssetPrice = getNativeAssetPrice.success ? getNativeAssetPrice.values.find((i) => i.toAsset === defaultFiatCurrency)?.price ?? '' : ''
     const getBalanceReturnInfos = accounts.map((account) => {
       const balanceInfo = {
         success: true,
@@ -173,7 +172,7 @@ export function refreshPrices () {
       return balanceInfo
     })
     const balancesAndPrice = {
-      usdPrice: nativeAssetPrice,
+      fiatPrice: nativeAssetPrice,
       balances: getBalanceReturnInfos
     }
 
@@ -189,12 +188,11 @@ export function refreshPrices () {
         assetTimeframeChange: '',
         fromAsset: token.symbol,
         price: '',
-        toAsset: 'usd'
+        toAsset: defaultFiatCurrency
       }
-      const price = await assetRatioController.getPrice([token.symbol.toLowerCase()], ['usd'], selectedPortfolioTimeline)
+      const price = await assetRatioController.getPrice([token.symbol.toLowerCase()], [defaultFiatCurrency], selectedPortfolioTimeline)
       return price.success ? price.values[0] : emptyPrice
     }))
-
     const getERCTokenBalanceReturnInfos = accounts.map((account) => {
       return account.tokens.map((token) => {
         const balanceInfo = {
@@ -219,14 +217,14 @@ export function refreshTokenPriceHistory (selectedPortfolioTimeline: AssetPriceT
     const apiProxy = getAPIProxy()
     const { assetRatioController } = apiProxy
 
-    const { wallet: { accounts } } = getState()
+    const { wallet: { accounts, defaultCurrencies } } = getState()
 
     const result = await Promise.all(accounts.map(async (account) => {
       return Promise.all(account.tokens.filter((t) => !t.asset.isErc721).map(async (token) => {
         return {
           token: token,
           history: await assetRatioController.getPriceHistory(
-            token.asset.symbol.toLowerCase(), 'usd', selectedPortfolioTimeline
+            token.asset.symbol.toLowerCase(), defaultCurrencies.fiat.toLowerCase(), selectedPortfolioTimeline
           )
         }
       }))

components/brave_wallet_ui/common/reducers/wallet_reducer.ts

@@ -24,7 +24,8 @@ import {
   WalletAccountType,
   WalletState,
   WalletInfoBase,
-  WalletInfo
+  WalletInfo,
+  DefaultCurrencies
 } from '../../constants/types'
 import {
   ActiveOriginChanged,
@@ -75,7 +76,11 @@ const defaultState: WalletState = {
   activeOrigin: '',
   gasEstimates: undefined,
   connectedAccounts: [],
-  isMetaMaskInstalled: false
+  isMetaMaskInstalled: false,
+  defaultCurrencies: {
+    fiat: '',
+    crypto: ''
+  }
 }
 
 const reducer = createReducer<WalletState>({}, defaultState)
@@ -165,8 +170,8 @@ reducer.on(WalletActions.nativeAssetBalancesUpdated, (state: any, payload: GetNa
   accounts.forEach((account, index) => {
     if (payload.balances[index].success) {
       accounts[index].balance = payload.balances[index].balance
-      accounts[index].fiatBalance = payload.usdPrice !== ''
-        ? formatFiatBalance(payload.balances[index].balance, state.selectedNetwork.decimals, payload.usdPrice).toString()
+      accounts[index].fiatBalance = payload.fiatPrice !== ''
+        ? formatFiatBalance(payload.balances[index].balance, state.selectedNetwork.decimals, payload.fiatPrice).toString()
         : ''
     }
   })
@@ -434,4 +439,11 @@ reducer.on(WalletActions.refreshAccountInfo, (state: any, payload: WalletInfoBas
   }
 })
 
+reducer.on(WalletActions.defaultCurrenciesUpdated, (state: any, payload: DefaultCurrencies) => {
+  return {
+    ...state,
+    defaultCurrencies: payload
+  }
+})
+
 export default reducer

components/brave_wallet_ui/components/buy-send-swap/buy/index.tsx

@@ -4,7 +4,8 @@ import {
   BuySendSwapViewTypes,
   EthereumChain,
   ToOrFromType,
-  MAINNET_CHAIN_ID
+  MAINNET_CHAIN_ID,
+  DefaultCurrencies
 } from '../../../constants/types'
 import { NavButton } from '../../extension'
 import SwapInputComponent from '../swap-input-component'
@@ -22,6 +23,7 @@ export interface Props {
   selectedNetwork: EthereumChain
   buyAmount: string
   networkList: EthereumChain[]
+  defaultCurrencies: DefaultCurrencies
   onSubmit: () => void
   onInputChange: (value: string, name: string) => void
   onChangeBuyView: (view: BuySendSwapViewTypes, option?: ToOrFromType) => void
@@ -33,6 +35,7 @@ function Buy (props: Props) {
     selectedAsset,
     buyAmount,
     networkList,
+    defaultCurrencies,
     onInputChange,
     onSubmit,
     onChangeBuyView
@@ -50,6 +53,7 @@ function Buy (props: Props) {
     <StyledWrapper>
       {selectedNetwork.chainId === MAINNET_CHAIN_ID ? (
         <SwapInputComponent
+          defaultCurrencies={defaultCurrencies}
           componentType='buyAmount'
           onInputChange={onInputChange}
           selectedAssetInputAmount={buyAmount}

components/brave_wallet_ui/components/buy-send-swap/swap-input-component/index.tsx

@@ -5,8 +5,10 @@ import {
   SlippagePresetObjectType,
   ExpirationPresetObjectType,
   SwapValidationErrorType,
-  AmountPresetTypes
+  AmountPresetTypes,
+  DefaultCurrencies
 } from '../../../constants/types'
+import { CurrencySymbols } from '../../../utils/currency-symbols'
 import { AmountPresetOptions } from '../../../options/amount-preset-options'
 import { SlippagePresetOptions } from '../../../options/slippage-preset-options'
 import { ExpirationPresetOptions } from '../../../options/expiration-preset-options'
@@ -64,6 +66,7 @@ export interface Props {
   orderExpiration?: ExpirationPresetObjectType
   validationError?: SwapValidationErrorType
   customSlippageTolerance?: string
+  defaultCurrencies?: DefaultCurrencies
   onCustomSlippageToleranceChange?: (value: string) => void
   onInputChange?: (value: string, name: string) => void
   onSelectPresetAmount?: (percent: number) => void
@@ -91,6 +94,7 @@ function SwapInputComponent (props: Props) {
     orderExpiration,
     validationError,
     customSlippageTolerance,
+    defaultCurrencies,
     onCustomSlippageToleranceChange,
     onInputChange,
     onPaste,
@@ -241,7 +245,7 @@ function SwapInputComponent (props: Props) {
           }
           <Row componentType={componentType}>
             {componentType === 'buyAmount' &&
-              <AssetTicker>$</AssetTicker>
+              <AssetTicker>{CurrencySymbols[defaultCurrencies?.fiat ?? 'USD']}</AssetTicker>
             }
             {!selectedAsset?.asset.isErc721 &&
               <Input

components/brave_wallet_ui/components/buy-send-swap/tabs/buy-tab.tsx

@@ -3,7 +3,8 @@ import {
   UserAccountType,
   AccountAssetOptionType,
   BuySendSwapViewTypes,
-  EthereumChain
+  EthereumChain,
+  DefaultCurrencies
 } from '../../../constants/types'
 import {
   AccountsAssetsNetworks,
@@ -19,6 +20,7 @@ export interface Props {
   assetOptions: AccountAssetOptionType[]
   buyAmount: string
   showHeader?: boolean
+  defaultCurrencies: DefaultCurrencies
   onSubmit: (asset: AccountAssetOptionType) => void
   onSelectNetwork: (network: EthereumChain) => void
   onSelectAccount: (account: UserAccountType) => void
@@ -34,6 +36,7 @@ function BuyTab (props: Props) {
     buyAmount,
     showHeader,
     assetOptions,
+    defaultCurrencies,
     onSubmit,
     onSelectNetwork,
     onSelectAccount,
@@ -85,6 +88,7 @@ function BuyTab (props: Props) {
             />
           }
           <Buy
+            defaultCurrencies={defaultCurrencies}
             buyAmount={buyAmount}
             selectedAsset={selectedAsset}
             selectedNetwork={selectedNetwork}

components/brave_wallet_ui/components/desktop/portfolio-account-item/index.tsx

@@ -8,7 +8,7 @@ import {
 import { create } from 'ethereum-blockies'
 import { Tooltip } from '../../shared'
 import { getLocale } from '../../../../common/locale'
-import { EthereumChain } from '../../../constants/types'
+import { EthereumChain, DefaultCurrencies } from '../../../constants/types'
 import { TransactionPopup } from '../'
 // Styled Components
 import {
@@ -28,6 +28,7 @@ import {
 import { TransactionPopupItem } from '../transaction-popup'
 
 export interface Props {
+  defaultCurrencies: DefaultCurrencies
   address: string
   fiatBalance: string
   assetBalance: string
@@ -37,7 +38,15 @@ export interface Props {
 }
 
 const PortfolioAccountItem = (props: Props) => {
-  const { address, name, assetBalance, fiatBalance, assetTicker, selectedNetwork } = props
+  const {
+    address,
+    name,
+    assetBalance,
+    fiatBalance,
+    assetTicker,
+    selectedNetwork,
+    defaultCurrencies
+  } = props
   const [showAccountPopup, setShowAccountPopup] = React.useState<boolean>(false)
   const onCopyToClipboard = async () => {
     await copyToClipboard(address)
@@ -80,7 +89,7 @@ const PortfolioAccountItem = (props: Props) => {
       </NameAndIcon>
       <RightSide>
         <BalanceColumn>
-          <FiatBalanceText>{formatFiatAmountWithCommasAndDecimals(fiatBalance)}</FiatBalanceText>
+          <FiatBalanceText>{formatFiatAmountWithCommasAndDecimals(fiatBalance, defaultCurrencies.fiat)}</FiatBalanceText>
           <AssetBalanceText>{formatTokenAmountWithCommasAndDecimals(assetBalance, assetTicker)}</AssetBalanceText>
         </BalanceColumn>
         <MoreButton onClick={onShowTransactionPopup}>

components/brave_wallet_ui/components/desktop/portfolio-asset-item/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 // Options
-import { ERCToken } from '../../../constants/types'
+import { ERCToken, DefaultCurrencies } from '../../../constants/types'
 import { hexToNumber } from '../../../utils/format-balances'
 
 // Styled Components
@@ -25,10 +25,17 @@ export interface Props {
   assetBalance: string
   fiatBalance: string
   token: ERCToken
+  defaultCurrencies: DefaultCurrencies
 }
 
 const PortfolioAssetItem = (props: Props) => {
-  const { assetBalance, fiatBalance, action, token } = props
+  const {
+    assetBalance,
+    fiatBalance,
+    action,
+    token,
+    defaultCurrencies
+  } = props
 
   const AssetIconWithPlaceholder = React.useMemo(() => {
     return withPlaceholderIcon(AssetIcon, { size: 'big', marginLeft: 0, marginRight: 8 })
@@ -47,7 +54,7 @@ const PortfolioAssetItem = (props: Props) => {
           </NameAndIcon>
           <BalanceColumn>
             {!token.isErc721 &&
-              <FiatBalanceText>{formatFiatAmountWithCommasAndDecimals(fiatBalance)}</FiatBalanceText>
+              <FiatBalanceText>{formatFiatAmountWithCommasAndDecimals(fiatBalance, defaultCurrencies.fiat)}</FiatBalanceText>
             }
             <AssetBalanceText>{formatedAssetBalance}</AssetBalanceText>
           </BalanceColumn>