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

Disable fiat conversion in Approve Screen when Show balance and token price checker is OFF (#17443)

Browse Source
This commit is contained in:
Niranjana Binoy 2023-02-03 12:13:19 -05:00 committed by GitHub
parent 0c24448037
commit 769efc9fe3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 102 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/components/app/approve-content-card/approve-content-card.js
View File

@ -45,6 +45,7 @@ export default function ApproveContentCard({
data,
userAcknowledgedGasMissing,
renderSimulationFailureWarning,
useCurrencyRateCheck,
}) {
const t = useContext(I18nContext);
@ -163,15 +164,20 @@ export default function ApproveContentCard({
alignItems={AlignItems.flexEnd}
textAlign={TEXT_ALIGN.RIGHT}
>
<Box>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
color={TextColor.textDefault}
>
{formatCurrency(fiatTransactionTotal, currentCurrency)}
</Typography>
</Box>
{useCurrencyRateCheck && (
<Box>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
color={TextColor.TEXT_DEFAULT}
>
{formatCurrency(
fiatTransactionTotal,
currentCurrency,
)}
</Typography>
</Box>
)}
<Box>
<Typography
variant={TypographyVariant.H6}
@ -320,4 +326,8 @@ ApproveContentCard.propTypes = {
* Render simulation failure warning
*/
renderSimulationFailureWarning: PropTypes.bool,
/**
* Fiat conversion control
*/
useCurrencyRateCheck: PropTypes.bool,
};

5
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
View File

@ -74,6 +74,7 @@ export default class ConfirmApproveContent extends Component {
userAcknowledgedGasMissing: PropTypes.bool,
setUserAcknowledgedGasMissing: PropTypes.func,
renderSimulationFailureWarning: PropTypes.bool,
useCurrencyRateCheck: PropTypes.bool,
};
state = {
@ -159,6 +160,7 @@ export default class ConfirmApproveContent extends Component {
supportsEIP1559,
userAcknowledgedGasMissing,
renderSimulationFailureWarning,
useCurrencyRateCheck,
} = this.props;
if (
!isMultiLayerFeeNetwork &&
@ -193,7 +195,8 @@ export default class ConfirmApproveContent extends Component {
</div>
<div className="confirm-approve-content__transaction-details-content__fee">
<div className="confirm-approve-content__transaction-details-content__primary-fee">
{formatCurrency(fiatTransactionTotal, currentCurrency)}
{useCurrencyRateCheck &&
formatCurrency(fiatTransactionTotal, currentCurrency)}
</div>
<div className="confirm-approve-content__transaction-details-content__secondary-fee">
{`${ethTransactionTotal} ${nativeCurrency}`}

79
ui/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.test.js
View File

@ -21,7 +21,7 @@ const props = {
showCustomizeGasModal: jest.fn(),
data: '0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
toAddress: '0x9bc5baf874d2da8d216ae9f137804184ee5afef4',
currentCurrency: 'TST',
currentCurrency: 'usd',
nativeCurrency: 'ETH',
ethTransactionTotal: '20',
fiatTransactionTotal: '10',
@ -36,6 +36,7 @@ const props = {
chainId: '1337',
rpcPrefs: {},
isContract: true,
useCurrencyRateCheck: true,
};
describe('ConfirmApproveContent Component', () => {
@ -69,6 +70,7 @@ describe('ConfirmApproveContent Component', () => {
queryByText('A fee is associated with this request.'),
).toBeInTheDocument();
expect(queryByText(`${props.ethTransactionTotal} ETH`)).toBeInTheDocument();
expect(queryByText(`$10.00`)).toBeInTheDocument();
fireEvent.click(editButtons[0]);
expect(props.showCustomizeGasModal).toHaveBeenCalledTimes(1);
@ -98,10 +100,12 @@ describe('ConfirmApproveContent Component', () => {
});
it('should render Confirm approve page correctly and simulation error message without I want to procced anyway link', () => {
props.userAcknowledgedGasMissing = true;
props.renderSimulationFailureWarning = true;
const { queryByText, getByText, getAllByText, getByTestId } =
renderComponent(props);
renderComponent({
...props,
userAcknowledgedGasMissing: true,
renderSimulationFailureWarning: true,
});
expect(
queryByText('https://metamask.github.io/test-dapp/'),
).toBeInTheDocument();
@ -158,10 +162,12 @@ describe('ConfirmApproveContent Component', () => {
});
it('should render Confirm approve page correctly and simulation error message with I want to procced anyway link', () => {
props.userAcknowledgedGasMissing = false;
props.renderSimulationFailureWarning = true;
const { queryByText, getByText, getAllByText, getByTestId } =
renderComponent(props);
renderComponent({
...props,
userAcknowledgedGasMissing: false,
renderSimulationFailureWarning: true,
});
expect(
queryByText('https://metamask.github.io/test-dapp/'),
).toBeInTheDocument();
@ -216,4 +222,63 @@ describe('ConfirmApproveContent Component', () => {
),
).toBeInTheDocument();
});
it('should render Confirm approve page correctly when the fiat conversion is OFF', () => {
const { queryByText, getByText, getAllByText, getByTestId } =
renderComponent({ ...props, useCurrencyRateCheck: false });
expect(
queryByText('https://metamask.github.io/test-dapp/'),
).toBeInTheDocument();
expect(getByTestId('confirm-approve-title').textContent).toStrictEqual(
' Allow access to and transfer of your TestDappCollectibles (#1)? ',
);
expect(
queryByText(
'This allows a third party to access and transfer the following NFTs without further notice until you revoke its access.',
),
).toBeInTheDocument();
expect(queryByText('Verify contract details')).toBeInTheDocument();
expect(
queryByText(
'We were not able to estimate gas. There might be an error in the contract and this transaction may fail.',
),
).not.toBeInTheDocument();
expect(queryByText('I want to proceed anyway')).not.toBeInTheDocument();
expect(queryByText('View full transaction details')).toBeInTheDocument();
const editButtons = getAllByText('Edit');
expect(queryByText('Transaction fee')).toBeInTheDocument();
expect(
queryByText('A fee is associated with this request.'),
).toBeInTheDocument();
expect(queryByText(`${props.ethTransactionTotal} ETH`)).toBeInTheDocument();
expect(queryByText(`$10.00`)).not.toBeInTheDocument();
fireEvent.click(editButtons[0]);
expect(props.showCustomizeGasModal).toHaveBeenCalledTimes(4);
expect(queryByText('Nonce')).toBeInTheDocument();
expect(queryByText('2')).toBeInTheDocument();
fireEvent.click(editButtons[1]);
expect(props.showCustomizeNonceModal).toHaveBeenCalledTimes(4);
const showViewTxDetails = getByText('View full transaction details');
expect(queryByText('Permission request')).not.toBeInTheDocument();
expect(queryByText('Approved asset:')).not.toBeInTheDocument();
expect(queryByText('Granted to:')).not.toBeInTheDocument();
expect(queryByText('Data')).not.toBeInTheDocument();
fireEvent.click(showViewTxDetails);
expect(getByText('Hide full transaction details')).toBeInTheDocument();
expect(getByText('Permission request')).toBeInTheDocument();
expect(getByText('Approved asset:')).toBeInTheDocument();
expect(getByText('Granted to:')).toBeInTheDocument();
expect(getByText('Contract (0x9bc5baF8...fEF4)')).toBeInTheDocument();
expect(getByText('Data')).toBeInTheDocument();
expect(getByText('Function: Approve')).toBeInTheDocument();
expect(
getByText(
'0x095ea7b30000000000000000000000009bc5baf874d2da8d216ae9f137804184ee5afef40000000000000000000000000000000000000000000000000000000000011170',
),
).toBeInTheDocument();
});
});

3
ui/pages/confirm-approve/confirm-approve.js
View File

@ -27,6 +27,7 @@ import {
getRpcPrefsForCurrentProvider,
getIsMultiLayerFeeNetwork,
checkNetworkAndAccountSupports1559,
getUseCurrencyRateCheck,
} from '../../selectors';
import { useApproveTransaction } from '../../hooks/useApproveTransaction';
import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning';
@ -81,6 +82,7 @@ export default function ConfirmApprove({
const fromAddressIsLedger = useSelector(
isAddressLedgerByFromAddress(userAddress),
);
const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
const [customPermissionAmount, setCustomPermissionAmount] = useState('');
const [submitWarning, setSubmitWarning] = useState('');
const [isContract, setIsContract] = useState(false);
@ -287,6 +289,7 @@ export default function ConfirmApprove({
isContract={isContract}
isMultiLayerFeeNetwork={isMultiLayerFeeNetwork}
supportsEIP1559={supportsEIP1559}
useCurrencyRateCheck={useCurrencyRateCheck}
/>
{showCustomizeGasPopover && !supportsEIP1559 && (
<EditGasPopover

4
ui/pages/token-allowance/token-allowance.js
View File

@ -34,6 +34,7 @@ import {
getCustomTokenAmount,
getUnapprovedTxCount,
getUnapprovedTransactions,
getUseCurrencyRateCheck,
} from '../../selectors';
import { NETWORK_TO_NAME_MAP } from '../../../shared/constants/network';
import {
@ -109,6 +110,7 @@ export default function TokenAllowance({
const customTokenAmount = useSelector(getCustomTokenAmount);
const unapprovedTxCount = useSelector(getUnapprovedTxCount);
const unapprovedTxs = useSelector(getUnapprovedTransactions);
const useCurrencyRateCheck = useSelector(getUseCurrencyRateCheck);
const replaceCommaToDot = (inputValue) => {
return inputValue.replace(/,/gu, '.');
@ -436,6 +438,7 @@ export default function TokenAllowance({
hexTransactionTotal={hexTransactionTotal}
fiatTransactionTotal={fiatTransactionTotal}
currentCurrency={currentCurrency}
useCurrencyRateCheck={useCurrencyRateCheck}
/>
</Box>
)}
@ -483,6 +486,7 @@ export default function TokenAllowance({
renderSimulationFailureWarning={renderSimulationFailureWarning}
isApprovalOrRejection={isApprovalOrRejection}
data={customTxParamsData || data}
useCurrencyRateCheck={useCurrencyRateCheck}
/>
</Box>
</Box>