m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

Update controllers with conversionRate change with minimal required changes in extension (#11361)

Browse Source 
* updating controllers with conversionRate change with minimal required changes in extension

* swapping showFiat selector in places where possible

* adding invalid conversion protection

* lint fixes

* adjusting list-item styling logic
This commit is contained in:
Alex Donesky 2021-06-23 18:28:49 -05:00 committed by GitHub
parent c30cb7d33a
commit a4a5580785
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 133 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -100,7 +100,7 @@
"@lavamoat/preinstall-always-fail": "^1.0.0",
"@material-ui/core": "^4.11.0",
"@metamask/contract-metadata": "^1.26.0",
"@metamask/controllers": "^9.0.0",
"@metamask/controllers": "^10.0.0",
"@metamask/eth-ledger-bridge-keyring": "^0.6.0",
"@metamask/eth-token-tracker": "^3.0.1",
"@metamask/etherscan-link": "^2.1.0",

2
ui/components/app/asset-list-item/asset-list-item.js
View File

@ -112,7 +112,7 @@ const AssetListItem = ({
</button>
}
titleIcon={titleIcon}
subtitle={<h3 title={secondary}>{secondary}</h3>}
subtitle={secondary ? <h3 title={secondary}>{secondary}</h3> : null}
onClick={onClick}
icon={
<Identicon

18
ui/components/app/asset-list/asset-list.js
View File

@ -56,13 +56,13 @@ const AssetList = ({ onClickAsset }) => {
},
);
const [secondaryCurrencyDisplay] = useCurrencyDisplay(
selectedAccountBalance,
{
numberOfDecimals: secondaryNumberOfDecimals,
currency: secondaryCurrency,
},
);
const [
secondaryCurrencyDisplay,
secondaryCurrencyProperties,
] = useCurrencyDisplay(selectedAccountBalance, {
numberOfDecimals: secondaryNumberOfDecimals,
currency: secondaryCurrency,
});
const primaryTokenImage = useSelector(getNativeCurrencyImage);
@ -71,7 +71,9 @@ const AssetList = ({ onClickAsset }) => {
<AssetListItem
onClick={() => onClickAsset(nativeCurrency)}
data-testid="wallet-balance"
primary={primaryCurrencyProperties.value}
primary={
primaryCurrencyProperties.value ?? secondaryCurrencyProperties.value
}
tokenSymbol={primaryCurrencyProperties.suffix}
secondary={showFiat ? secondaryCurrencyDisplay : undefined}
tokenImage={primaryTokenImage}

5
ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
View File

@ -29,7 +29,6 @@ import {
getCurrentCurrency,
getCurrentEthBalance,
getIsMainnet,
getPreferences,
getBasicGasEstimateLoadingStatus,
getCustomGasLimit,
getCustomGasPrice,
@ -39,6 +38,7 @@ import {
getAveragePriceEstimateInHexWEI,
isCustomPriceExcessive,
getIsGasEstimatesFetched,
getShouldShowFiat,
} from '../../../../selectors';
import {
@ -112,9 +112,8 @@ const mapStateToProps = (state, ownProps) => {
const balance = getCurrentEthBalance(state);
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
const showFiat = Boolean(isMainnet || showFiatInTestnets);
const showFiat = getShouldShowFiat(state);
const newTotalEth =
maxModeOn && asset.type === ASSET_TYPES.NATIVE

6
ui/components/app/transaction-breakdown/transaction-breakdown.container.js
View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import { getIsMainnet, getPreferences } from '../../../selectors';
import { getShouldShowFiat } from '../../../selectors';
import { getNativeCurrency } from '../../../ducks/metamask/metamask';
import { getHexGasTotal } from '../../../helpers/utils/confirm-tx.util';
import { sumHexes } from '../../../helpers/utils/transactions.util';
@ -11,8 +11,6 @@ const mapStateToProps = (state, ownProps) => {
txParams: { gas, gasPrice, value } = {},
txReceipt: { gasUsed } = {},
} = transaction;
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas;
@ -22,7 +20,7 @@ const mapStateToProps = (state, ownProps) => {
return {
nativeCurrency: getNativeCurrency(state),
showFiat: isMainnet || Boolean(showFiatInTestnets),
showFiat: getShouldShowFiat(state),
totalInHex,
gas,
gasPrice,

7
ui/components/ui/currency-input/currency-input.container.js
View File

@ -1,20 +1,19 @@
import { connect } from 'react-redux';
import { ETH } from '../../../helpers/constants/common';
import { getIsMainnet, getPreferences } from '../../../selectors';
import { getShouldShowFiat } from '../../../selectors';
import CurrencyInput from './currency-input.component';
const mapStateToProps = (state) => {
const {
metamask: { nativeCurrency, currentCurrency, conversionRate },
} = state;
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
const showFiat = getShouldShowFiat(state);
return {
nativeCurrency,
currentCurrency,
conversionRate,
hideFiat: !isMainnet && !showFiatInTestnets,
hideFiat: !showFiat,
};
};

9
ui/components/ui/list-item/index.scss
View File

@ -110,3 +110,12 @@
'. actions actions actions actions mid mid mid mid right right right';
}
}
.list-item--single-content-row {
grid-template-areas: 'icon head head head head head head head right right right right';
align-items: center;
@media (min-width: 576px) {
grid-template-areas: 'icon head head head head mid mid mid mid right right right';
}
}

6
ui/components/ui/list-item/list-item.component.js
View File

@ -14,7 +14,11 @@ export default function ListItem({
className,
'data-testid': dataTestId,
}) {
const primaryClassName = classnames('list-item', className);
const primaryClassName = classnames(
'list-item',
className,
subtitle || children ? '' : 'list-item--single-content-row',
);
return (
<div

2
ui/components/ui/token-input/token-input.component.test.js
View File

@ -141,6 +141,7 @@ describe('TokenInput Component', () => {
}}
tokenExchangeRates={{ '0x1': 2 }}
showFiat
currentCurrency="usd"
/>
</Provider>,
);
@ -278,6 +279,7 @@ describe('TokenInput Component', () => {
}}
tokenExchangeRates={{ '0x1': 2 }}
showFiat
currentCurrency="usd"
/>
</Provider>,
);

10
ui/components/ui/token-input/token-input.container.js
View File

@ -1,23 +1,17 @@
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import {
getIsMainnet,
getTokenExchangeRates,
getPreferences,
} from '../../../selectors';
import { getTokenExchangeRates, getShouldShowFiat } from '../../../selectors';
import TokenInput from './token-input.component';
const mapStateToProps = (state) => {
const {
metamask: { currentCurrency },
} = state;
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
return {
currentCurrency,
tokenExchangeRates: getTokenExchangeRates(state),
hideConversion: !isMainnet && !showFiatInTestnets,
hideConversion: !getShouldShowFiat(state),
};
};

8
ui/helpers/utils/conversion-util.js
View File

@ -150,8 +150,11 @@ const conversionUtil = (
conversionRate,
invertConversionRate,
},
) =>
converter({
) => {
if (fromCurrency !== toCurrency && !conversionRate) {
return 0;
}
return converter({
fromCurrency,
toCurrency,
fromNumericBase,
@ -163,6 +166,7 @@ const conversionUtil = (
invertConversionRate,
value: value || '0',
});
};
const getBigNumber = (value, base) => {
if (!isValidBase(base)) {

42
ui/hooks/useCurrencyDisplay.js
View File

@ -10,6 +10,8 @@ import {
getNativeCurrency,
} from '../ducks/metamask/metamask';
import { conversionUtil } from '../helpers/utils/conversion-util';
/**
* Defines the shape of the options parameter for useCurrencyDisplay
* @typedef {Object} UseCurrencyOptions
@ -45,24 +47,37 @@ export function useCurrencyDisplay(
const currentCurrency = useSelector(getCurrentCurrency);
const nativeCurrency = useSelector(getNativeCurrency);
const conversionRate = useSelector(getConversionRate);
const toCurrency = currency || currentCurrency;
const isUserPreferredCurrency = currency === currentCurrency;
const value = useMemo(() => {
if (displayValue) {
return displayValue;
}
return formatCurrency(
getValueFromWeiHex({
value: inputValue,
fromCurrency: nativeCurrency,
toCurrency,
conversionRate,
if (
currency === nativeCurrency ||
(!isUserPreferredCurrency && !nativeCurrency)
) {
return conversionUtil(inputValue, {
fromNumericBase: 'hex',
toNumericBase: 'dec',
fromDenomination: 'WEI',
numberOfDecimals: numberOfDecimals || 2,
toDenomination: denomination,
}),
toCurrency,
);
});
} else if (isUserPreferredCurrency && conversionRate) {
return formatCurrency(
getValueFromWeiHex({
value: inputValue,
fromCurrency: nativeCurrency,
toCurrency: currency,
conversionRate,
numberOfDecimals: numberOfDecimals || 2,
toDenomination: denomination,
}),
currency,
);
}
return null;
}, [
inputValue,
nativeCurrency,
@ -70,13 +85,14 @@ export function useCurrencyDisplay(
displayValue,
numberOfDecimals,
denomination,
toCurrency,
currency,
isUserPreferredCurrency,
]);
let suffix;
if (!opts.hideLabel) {
suffix = opts.suffix || toCurrency.toUpperCase();
suffix = opts.suffix || currency?.toUpperCase();
}
return [

8
ui/hooks/useUserPreferencedCurrency.js
View File

@ -1,5 +1,9 @@
import { useSelector } from 'react-redux';
import { getPreferences, getShouldShowFiat } from '../selectors';
import {
getPreferences,
getShouldShowFiat,
getCurrentCurrency,
} from '../selectors';
import { getNativeCurrency } from '../ducks/metamask/metamask';
import { PRIMARY, SECONDARY, ETH } from '../helpers/constants/common';
@ -35,6 +39,7 @@ export function useUserPreferencedCurrency(type, opts = {}) {
const nativeCurrency = useSelector(getNativeCurrency);
const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences);
const showFiat = useSelector(getShouldShowFiat);
const currentCurrency = useSelector(getCurrentCurrency);
let currency, numberOfDecimals;
if (
@ -50,6 +55,7 @@ export function useUserPreferencedCurrency(type, opts = {}) {
(type === PRIMARY && !useNativeCurrencyAsPrimaryCurrency)
) {
// Display Fiat
currency = currentCurrency;
numberOfDecimals = opts.numberOfDecimals || opts.fiatNumberOfDecimals || 2;
}

11
ui/hooks/useUserPreferencedCurrency.test.js
View File

@ -1,7 +1,11 @@
import { renderHook } from '@testing-library/react-hooks';
import * as reactRedux from 'react-redux';
import sinon from 'sinon';
import { getPreferences, getShouldShowFiat } from '../selectors';
import {
getCurrentCurrency,
getPreferences,
getShouldShowFiat,
} from '../selectors';
import { useUserPreferencedCurrency } from './useUserPreferencedCurrency';
const tests = [
@ -24,12 +28,13 @@ const tests = [
useNativeCurrencyAsPrimaryCurrency: false,
nativeCurrency: 'ETH',
showFiat: true,
currentCurrency: 'usd',
},
params: {
type: 'PRIMARY',
},
result: {
currency: undefined,
currency: 'usd',
numberOfDecimals: 2,
},
},
@ -116,6 +121,8 @@ function getFakeUseSelector(state) {
return state;
} else if (selector === getShouldShowFiat) {
return state.showFiat;
} else if (selector === getCurrentCurrency) {
return state.currentCurrency;
}
return state.nativeCurrency;
};

7
ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
View File

@ -32,10 +32,10 @@ import {
getKnownMethodData,
getMetaMaskAccounts,
getUseNonceField,
getPreferences,
transactionFeeSelector,
getNoGasPriceFetched,
getIsEthGasPriceFetched,
getShouldShowFiat,
} from '../../selectors';
import { getMostRecentOverviewPage } from '../../ducks/history/history';
import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
@ -65,7 +65,6 @@ const mapStateToProps = (state, ownProps) => {
match: { params = {} },
} = ownProps;
const { id: paramsTransactionId } = params;
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
const { confirmTransaction, metamask } = state;
const {
@ -184,8 +183,8 @@ const mapStateToProps = (state, ownProps) => {
useNonceField: getUseNonceField(state),
customNonceValue,
insufficientBalance,
hideSubtitle: !isMainnet && !showFiatInTestnets,
hideFiatConversion: !isMainnet && !showFiatInTestnets,
hideSubtitle: !getShouldShowFiat(state),
hideFiatConversion: !getShouldShowFiat(state),
metaMetricsSendCount,
type,
nextNonce,

11
ui/selectors/custom-gas.js
View File

@ -12,7 +12,7 @@ import { GAS_ESTIMATE_TYPES } from '../helpers/constants/common';
import { getGasPrice } from '../ducks/send';
import { BASIC_ESTIMATE_STATES, GAS_SOURCE } from '../ducks/gas/gas.duck';
import { GAS_LIMITS } from '../../shared/constants/gas';
import { getCurrentCurrency, getIsMainnet, getPreferences } from '.';
import { getCurrentCurrency, getIsMainnet, getShouldShowFiat } from '.';
const NUMBER_OF_DECIMALS_SM_BTNS = 5;
@ -262,9 +262,7 @@ export function getRenderableBasicEstimateData(state, gasLimit) {
return [];
}
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
const showFiat = isMainnet || Boolean(showFiatInTestnets);
const showFiat = getShouldShowFiat(state);
const { conversionRate } = state.metamask;
const currentCurrency = getCurrentCurrency(state);
@ -287,10 +285,7 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
if (getBasicGasEstimateLoadingStatus(state)) {
return [];
}
const { showFiatInTestnets } = getPreferences(state);
const isMainnet = getIsMainnet(state);
const showFiat = isMainnet || Boolean(showFiatInTestnets);
const showFiat = getShouldShowFiat(state);
const gasLimit =
state.send.gas.gasLimit || getCustomGasLimit(state) || GAS_LIMITS.SIMPLE;
const { conversionRate } = state.metamask;

8
ui/selectors/selectors.js
View File

@ -24,7 +24,10 @@ import { TEMPLATED_CONFIRMATION_MESSAGE_TYPES } from '../pages/confirmation/temp
import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
import { DAY } from '../../shared/constants/time';
import { getNativeCurrency } from '../ducks/metamask/metamask';
import {
getNativeCurrency,
getConversionRate,
} from '../ducks/metamask/metamask';
/**
* One of the only remaining valid uses of selecting the network subkey of the
@ -379,8 +382,9 @@ export function getPreferences({ metamask }) {
export function getShouldShowFiat(state) {
const isMainNet = getIsMainnet(state);
const conversionRate = getConversionRate(state);
const { showFiatInTestnets } = getPreferences(state);
return Boolean(isMainNet || showFiatInTestnets);
return Boolean((isMainNet || showFiatInTestnets) && conversionRate);
}
export function getShouldHideZeroBalanceTokens(state) {

66
yarn.lock
View File

@ -2656,6 +2656,39 @@
resolved "https://registry.yarnpkg.com/@metamask/contract-metadata/-/contract-metadata-1.26.0.tgz#06be4f4dc645da69f6364f75cb2bd47afa642fe6"
integrity sha512-58A8csapIPoc854n6AI+3jwJcQfh75BzVrl6SAySgJ9fWTa1XItm9Tx/ORaqYrwaR/9JqH4SnkbXtqyFwuUL6w==
"@metamask/controllers@^10.0.0":
version "10.1.0"
resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-10.1.0.tgz#ec0a3751fa658966e9818038784ab6b555c95382"
integrity sha512-Me0jzI5CIOdfXkpm3eBOEIxDGlgbKQaW1au0GQdVgbW93ZxDueTqLUg9xSGSfGSJ3i+Alfqi/tnGqT/nwa/5CQ==
dependencies:
"@metamask/contract-metadata" "^1.25.0"
"@types/uuid" "^8.3.0"
async-mutex "^0.2.6"
babel-runtime "^6.26.0"
eth-ens-namehash "^2.0.8"
eth-json-rpc-infura "^5.1.0"
eth-keyring-controller "^6.2.1"
eth-method-registry "1.1.0"
eth-phishing-detect "^1.1.14"
eth-query "^2.1.2"
eth-rpc-errors "^4.0.0"
eth-sig-util "^3.0.0"
ethereumjs-tx "^1.3.7"
ethereumjs-util "^7.0.10"
ethereumjs-wallet "^1.0.1"
ethjs-util "^0.1.6"
human-standard-collectible-abi "^1.0.2"
human-standard-token-abi "^2.0.0"
immer "^8.0.1"
isomorphic-fetch "^3.0.0"
jsonschema "^1.2.4"
nanoid "^3.1.12"
punycode "^2.1.1"
single-call-balance-checker-abi "^1.0.0"
uuid "^8.3.2"
web3 "^0.20.7"
web3-provider-engine "^16.0.1"
"@metamask/controllers@^5.0.0":
version "5.1.0"
resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-5.1.0.tgz#02c1957295bcb6db1655a716d165665d170e7f34"
@ -2684,39 +2717,6 @@
web3 "^0.20.7"
web3-provider-engine "^16.0.1"
"@metamask/controllers@^9.0.0":
version "9.1.0"
resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-9.1.0.tgz#4434f22eba2522889224b35aa08bc7b67d7248b7"
integrity sha512-jn/F0BNbaPsgEevHaPqk0lGAONKom4re1a4yBC67h7Vu6yu26CRi30SJl4xIh3IW4+ySbPhVLaiXFiXr3fESRQ==
dependencies:
"@metamask/contract-metadata" "^1.25.0"
"@types/uuid" "^8.3.0"
async-mutex "^0.2.6"
babel-runtime "^6.26.0"
eth-ens-namehash "^2.0.8"
eth-json-rpc-infura "^5.1.0"
eth-keyring-controller "^6.2.1"
eth-method-registry "1.1.0"
eth-phishing-detect "^1.1.14"
eth-query "^2.1.2"
eth-rpc-errors "^4.0.0"
eth-sig-util "^3.0.0"
ethereumjs-tx "^1.3.7"
ethereumjs-util "^6.1.0"
ethereumjs-wallet "^1.0.1"
ethjs-util "^0.1.6"
human-standard-collectible-abi "^1.0.2"
human-standard-token-abi "^2.0.0"
immer "^8.0.1"
isomorphic-fetch "^3.0.0"
jsonschema "^1.2.4"
nanoid "^3.1.12"
punycode "^2.1.1"
single-call-balance-checker-abi "^1.0.0"
uuid "^8.3.2"
web3 "^0.20.7"
web3-provider-engine "^16.0.1"
"@metamask/eslint-config-jest@^6.0.0":
version "6.0.0"
resolved "https://registry.yarnpkg.com/@metamask/eslint-config-jest/-/eslint-config-jest-6.0.0.tgz#9e10cfbca31236afd7be2058be70365084e540d6"