1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +01:00
metamask-extension/ui/hooks/useUserPreferencedCurrency.js
Dan J Miller 09512c7148
Improvements for multi-layer fee UX (#13547)
* Show fiat on confirm screen on multilayer-fee network

* Disable gas editing on optimism

* Fix send max mode on optimism

* Represent layer 2 gas fee as a single value

* Hide gas fee edit UI on optimism

* Improvement multilayer-fee-message styling

* Lint fix

* Fix locales

* Remove unnecessary code change

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
2022-03-29 16:51:45 -02:30

70 lines
2.5 KiB
JavaScript

import { shallowEqual, useSelector } from 'react-redux';
import {
getPreferences,
getShouldShowFiat,
getCurrentCurrency,
} from '../selectors';
import { getNativeCurrency } from '../ducks/metamask/metamask';
import { PRIMARY, SECONDARY, ETH } from '../helpers/constants/common';
/**
* Defines the shape of the options parameter for useUserPreferencedCurrency
*
* @typedef {Object} UseUserPreferencedCurrencyOptions
* @property {number} [numberOfDecimals] - Number of significant decimals to display
* @property {number} [ethNumberOfDecimals] - Number of significant decimals to display
* when using ETH
* @property {number} [fiatNumberOfDecimals] - Number of significant decimals to display
* when using fiat
*/
/**
* Defines the return shape of useUserPreferencedCurrency
*
* @typedef {Object} UserPreferredCurrency
* @property {string} currency - the currency type to use (eg: 'ETH', 'usd')
* @property {number} numberOfDecimals - Number of significant decimals to display
*/
/**
* useUserPreferencedCurrency
*
* returns an object that contains what currency to use for displaying values based
* on the user's preference settings, as well as the significant number of decimals
* to display based on the currency
*
* @param {"PRIMARY" | "SECONDARY"} type - what display type is being rendered
* @param {UseUserPreferencedCurrencyOptions} opts - options to override default values
* @returns {UserPreferredCurrency}
*/
export function useUserPreferencedCurrency(type, opts = {}) {
const nativeCurrency = useSelector(getNativeCurrency);
const { useNativeCurrencyAsPrimaryCurrency } = useSelector(
getPreferences,
shallowEqual,
);
const showFiat = useSelector(getShouldShowFiat) || opts.showFiatOverride;
const currentCurrency = useSelector(getCurrentCurrency);
let currency, numberOfDecimals;
if (
!showFiat ||
(type === PRIMARY && useNativeCurrencyAsPrimaryCurrency) ||
(type === SECONDARY && !useNativeCurrencyAsPrimaryCurrency)
) {
// Display ETH
currency = nativeCurrency || ETH;
numberOfDecimals = opts.numberOfDecimals || opts.ethNumberOfDecimals || 8;
} else if (
(type === SECONDARY && useNativeCurrencyAsPrimaryCurrency) ||
(type === PRIMARY && !useNativeCurrencyAsPrimaryCurrency)
) {
// Display Fiat
currency = currentCurrency;
numberOfDecimals = opts.numberOfDecimals || opts.fiatNumberOfDecimals || 2;
}
return { currency, numberOfDecimals };
}