diff --git a/ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap b/ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap new file mode 100644 index 000000000..58642cc3e --- /dev/null +++ b/ui/components/app/signature-request-header/__snapshots__/signature-request-header.test.js.snap @@ -0,0 +1,102 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`SignatureRequestHeader should match snapshot 1`] = ` +
+
+
+
+
+
+
+ + + + + +
+
+
+ +
+
+
+ Unknown private network +
+
+ Test Account +
+
+
+
+
+ Balance +
+
+ 966.987986 + + ETH +
+
+
+
+`; diff --git a/ui/components/app/signature-request-header/index.js b/ui/components/app/signature-request-header/index.js new file mode 100644 index 000000000..e154c42e9 --- /dev/null +++ b/ui/components/app/signature-request-header/index.js @@ -0,0 +1 @@ +export { default } from './signature-request-header'; diff --git a/ui/components/app/signature-request-header/signature-request-header.js b/ui/components/app/signature-request-header/signature-request-header.js new file mode 100644 index 000000000..6fb3149dc --- /dev/null +++ b/ui/components/app/signature-request-header/signature-request-header.js @@ -0,0 +1,91 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useSelector } from 'react-redux'; +import { useI18nContext } from '../../../hooks/useI18nContext'; + +import { + getNativeCurrency, + getProviderConfig, +} from '../../../ducks/metamask/metamask'; +import { + accountsWithSendEtherInfoSelector, + conversionRateSelector, + getCurrentChainId, + getCurrentCurrency, + getPreferences, +} from '../../../selectors'; +import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'; +import { + getAccountByAddress, + getNetworkNameFromProviderType, +} from '../../../helpers/utils/util'; +import { EtherDenomination } from '../../../../shared/constants/common'; +import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils'; +import { Numeric } from '../../../../shared/modules/Numeric'; + +import NetworkAccountBalanceHeader from '../network-account-balance-header'; + +const SignatureRequestHeader = ({ txData }) => { + const t = useI18nContext(); + const { + msgParams: { from }, + } = txData; + const allAccounts = useSelector(accountsWithSendEtherInfoSelector); + const fromAccount = getAccountByAddress(allAccounts, from); + const nativeCurrency = useSelector(getNativeCurrency); + const currentCurrency = useSelector(getCurrentCurrency); + const currentChainId = useSelector(getCurrentChainId); + + const providerConfig = useSelector(getProviderConfig); + const networkName = getNetworkNameFromProviderType(providerConfig.type); + const { useNativeCurrencyAsPrimaryCurrency } = useSelector(getPreferences); + const conversionRateFromSelector = useSelector(conversionRateSelector); + const conversionRate = useNativeCurrencyAsPrimaryCurrency + ? null + : conversionRateFromSelector; + + const currentNetwork = + networkName === '' + ? providerConfig.nickname || t('unknownNetwork') + : t(networkName); + + const balanceInBaseAsset = conversionRate + ? formatCurrency( + getValueFromWeiHex({ + value: fromAccount.balance, + fromCurrency: nativeCurrency, + toCurrency: currentCurrency, + conversionRate, + numberOfDecimals: 6, + toDenomination: EtherDenomination.ETH, + }), + currentCurrency, + ) + : new Numeric(fromAccount.balance, 16, EtherDenomination.WEI) + .toDenomination(EtherDenomination.ETH) + .round(6) + .toBase(10) + .toString(); + + return ( + + ); +}; + +SignatureRequestHeader.propTypes = { + /** + * The display content of transaction data + */ + txData: PropTypes.object.isRequired, +}; + +export default SignatureRequestHeader; diff --git a/ui/components/app/signature-request-header/signature-request-header.stories.js b/ui/components/app/signature-request-header/signature-request-header.stories.js new file mode 100644 index 000000000..129ef31ab --- /dev/null +++ b/ui/components/app/signature-request-header/signature-request-header.stories.js @@ -0,0 +1,54 @@ +import React from 'react'; +import SignatureRequestHeader from './signature-request-header'; + +export default { + title: 'Components/App/SignatureRequestHeader', + argTypes: { + txData: { control: 'object' }, + }, + args: { + txData: { + msgParams: { + from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', + data: JSON.stringify({ + domain: { + name: 'happydapp.website', + }, + message: { + string: 'haay wuurl', + number: 42, + }, + primaryType: 'Mail', + types: { + EIP712Domain: [ + { name: 'name', type: 'string' }, + { name: 'version', type: 'string' }, + { name: 'chainId', type: 'uint256' }, + { name: 'verifyingContract', type: 'address' }, + ], + Group: [ + { name: 'name', type: 'string' }, + { name: 'members', type: 'Person[]' }, + ], + Mail: [ + { name: 'from', type: 'Person' }, + { name: 'to', type: 'Person[]' }, + { name: 'contents', type: 'string' }, + ], + Person: [ + { name: 'name', type: 'string' }, + { name: 'wallets', type: 'address[]' }, + ], + }, + }), + origin: 'https://happydapp.website/', + }, + }, + }, +}; + +export const DefaultStory = (args) => { + return ; +}; + +DefaultStory.storyName = 'Default'; diff --git a/ui/components/app/signature-request-header/signature-request-header.test.js b/ui/components/app/signature-request-header/signature-request-header.test.js new file mode 100644 index 000000000..a8956273c --- /dev/null +++ b/ui/components/app/signature-request-header/signature-request-header.test.js @@ -0,0 +1,27 @@ +import React from 'react'; +import configureMockStore from 'redux-mock-store'; +import mockState from '../../../../test/data/mock-state.json'; +import { renderWithProvider } from '../../../../test/lib/render-helpers'; + +import SignatureRequestHeader from '.'; + +const props = { + txData: { + msgParams: { + from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc', + }, + }, +}; + +describe('SignatureRequestHeader', () => { + const store = configureMockStore()(mockState); + + it('should match snapshot', () => { + const { container } = renderWithProvider( + , + store, + ); + + expect(container).toMatchSnapshot(); + }); +}); diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js index fe20b8adb..b9a130c19 100644 --- a/ui/components/app/signature-request-original/signature-request-original.component.js +++ b/ui/components/app/signature-request-original/signature-request-original.component.js @@ -5,7 +5,6 @@ import { ObjectInspector } from 'react-inspector'; import LedgerInstructionField from '../ledger-instruction-field'; import { MESSAGE_TYPE } from '../../../../shared/constants/app'; import { - getNetworkNameFromProviderType, getURLHostName, sanitizeString, ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) @@ -15,7 +14,6 @@ import { import { stripHexPrefix } from '../../../../shared/modules/hexstring-utils'; import Button from '../../ui/button'; import SiteOrigin from '../../ui/site-origin'; -import NetworkAccountBalanceHeader from '../network-account-balance-header'; import Typography from '../../ui/typography/typography'; import { PageContainerFooter } from '../../ui/page-container'; import { @@ -31,17 +29,14 @@ import { BackgroundColor, ///: END:ONLY_INCLUDE_IN } from '../../../helpers/constants/design-system'; -import { Numeric } from '../../../../shared/modules/Numeric'; -import { EtherDenomination } from '../../../../shared/constants/common'; import ConfirmPageContainerNavigation from '../confirm-page-container/confirm-page-container-navigation'; import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message'; import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants'; -import { formatCurrency } from '../../../helpers/utils/confirm-tx.util'; -import { getValueFromWeiHex } from '../../../../shared/modules/conversion.utils'; ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) import { Icon, IconName, Text } from '../../component-library'; import Box from '../../ui/box/box'; ///: END:ONLY_INCLUDE_IN +import SignatureRequestHeader from '../signature-request-header'; import SignatureRequestOriginalWarning from './signature-request-original-warning'; export default class SignatureRequestOriginal extends Component { @@ -52,7 +47,6 @@ export default class SignatureRequestOriginal extends Component { static propTypes = { fromAccount: PropTypes.shape({ address: PropTypes.string.isRequired, - balance: PropTypes.string, name: PropTypes.string, }).isRequired, cancel: PropTypes.func.isRequired, @@ -64,13 +58,9 @@ export default class SignatureRequestOriginal extends Component { subjectMetadata: PropTypes.object, hardwareWalletRequiresConnection: PropTypes.bool, isLedgerWallet: PropTypes.bool, - nativeCurrency: PropTypes.string.isRequired, - currentCurrency: PropTypes.string.isRequired, - conversionRate: PropTypes.number, messagesCount: PropTypes.number, showRejectTransactionsConfirmationModal: PropTypes.func.isRequired, cancelAll: PropTypes.func.isRequired, - providerConfig: PropTypes.object, ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) selectedAccount: PropTypes.object, ///: END:ONLY_INCLUDE_IN @@ -316,40 +306,14 @@ export default class SignatureRequestOriginal extends Component { render = () => { const { - providerConfig, messagesCount, - nativeCurrency, - currentCurrency, - fromAccount: { address, balance, name }, - conversionRate, + fromAccount: { address, name }, + txData, } = this.props; const { showSignatureRequestWarning } = this.state; const { t } = this.context; const rejectNText = t('rejectRequestsN', [messagesCount]); - const networkName = getNetworkNameFromProviderType(providerConfig.type); - const currentNetwork = - networkName === '' - ? providerConfig.nickname || t('unknownNetwork') - : t(networkName); - - const balanceInBaseAsset = conversionRate - ? formatCurrency( - getValueFromWeiHex({ - value: balance, - fromCurrency: nativeCurrency, - toCurrency: currentCurrency, - conversionRate, - numberOfDecimals: 6, - toDenomination: EtherDenomination.ETH, - }), - currentCurrency, - ) - : new Numeric(balance, 16, EtherDenomination.WEI) - .toDenomination(EtherDenomination.ETH) - .round(6) - .toBase(10) - .toString(); return (
@@ -357,15 +321,7 @@ export default class SignatureRequestOriginal extends Component {
- +
{this.renderBody()} {this.props.isLedgerWallet ? ( diff --git a/ui/components/app/signature-request-original/signature-request-original.container.js b/ui/components/app/signature-request-original/signature-request-original.container.js index 7ab93113a..a9b9c9096 100644 --- a/ui/components/app/signature-request-original/signature-request-original.container.js +++ b/ui/components/app/signature-request-original/signature-request-original.container.js @@ -6,13 +6,10 @@ import { MESSAGE_TYPE } from '../../../../shared/constants/app'; import { goHome, cancelMsgs, showModal } from '../../../store/actions'; import { accountsWithSendEtherInfoSelector, - conversionRateSelector, getSubjectMetadata, doesAddressRequireLedgerHidConnection, unconfirmedMessagesHashSelector, getTotalUnapprovedMessagesCount, - getPreferences, - getCurrentCurrency, ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) getSelectedAccount, ///: END:ONLY_INCLUDE_IN @@ -20,25 +17,19 @@ import { import { getAccountByAddress, valuesFor } from '../../../helpers/utils/util'; import { clearConfirmTransaction } from '../../../ducks/confirm-transaction/confirm-transaction.duck'; import { getMostRecentOverviewPage } from '../../../ducks/history/history'; -import { - isAddressLedger, - getNativeCurrency, - getProviderConfig, -} from '../../../ducks/metamask/metamask'; +import { isAddressLedger } from '../../../ducks/metamask/metamask'; import SignatureRequestOriginal from './signature-request-original.component'; function mapStateToProps(state, ownProps) { const { msgParams: { from }, } = ownProps.txData; - const providerConfig = getProviderConfig(state); const hardwareWalletRequiresConnection = doesAddressRequireLedgerHidConnection(state, from); const isLedgerWallet = isAddressLedger(state, from); const messagesList = unconfirmedMessagesHashSelector(state); const messagesCount = getTotalUnapprovedMessagesCount(state); - const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state); return { requester: null, @@ -46,17 +37,11 @@ function mapStateToProps(state, ownProps) { mostRecentOverviewPage: getMostRecentOverviewPage(state), hardwareWalletRequiresConnection, isLedgerWallet, - nativeCurrency: getNativeCurrency(state), - currentCurrency: getCurrentCurrency(state), - conversionRate: useNativeCurrencyAsPrimaryCurrency - ? null - : conversionRateSelector(state), // not passed to component allAccounts: accountsWithSendEtherInfoSelector(state), subjectMetadata: getSubjectMetadata(state), messagesList, messagesCount, - providerConfig, ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) selectedAccount: getSelectedAccount(state), ///: END:ONLY_INCLUDE_IN diff --git a/ui/components/app/signature-request-original/signature-request-original.stories.js b/ui/components/app/signature-request-original/signature-request-original.stories.js index df8d450cc..3e1346d34 100644 --- a/ui/components/app/signature-request-original/signature-request-original.stories.js +++ b/ui/components/app/signature-request-original/signature-request-original.stories.js @@ -89,6 +89,7 @@ DefaultStory.storyName = 'personal_sign Type'; DefaultStory.args = { txData: { msgParams: { + from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: MOCK_SIGN_DATA, origin: 'https://happydapp.website/governance?futarchy=true', }, @@ -103,6 +104,7 @@ ETHSignStory.storyName = 'eth_sign Type'; ETHSignStory.args = { txData: { msgParams: { + from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: MOCK_SIGN_DATA, origin: 'https://happydapp.website/governance?futarchy=true', }, @@ -117,6 +119,7 @@ ETHSignTypedStory.storyName = 'eth_signTypedData Type'; ETHSignTypedStory.args = { txData: { msgParams: { + from: '0xb19ac54efa18cc3a14a5b821bfec73d284bf0c5e', data: [ { type: 'string', @@ -142,6 +145,7 @@ AccountMismatchStory.storyName = 'Account Mismatch warning'; AccountMismatchStory.args = { txData: { msgParams: { + from: '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4', data: MOCK_SIGN_DATA, origin: 'https://happydapp.website/governance?futarchy=true', }, diff --git a/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap index d7106d17d..5fe93e511 100644 --- a/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap +++ b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap @@ -5,6 +5,102 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`]
+
diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe.js b/ui/components/app/signature-request-siwe/signature-request-siwe.js index 82f46e746..a100ea93b 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe.js +++ b/ui/components/app/signature-request-siwe/signature-request-siwe.js @@ -15,6 +15,7 @@ import { } from '../../../selectors'; import { getAccountByAddress } from '../../../helpers/utils/util'; import { formatMessageParams } from '../../../../shared/modules/siwe'; + import { SEVERITIES, TextVariant, @@ -23,6 +24,8 @@ import { import SecurityProviderBannerMessage from '../security-provider-banner-message/security-provider-banner-message'; import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../security-provider-banner-message/security-provider-banner-message.constants'; import LedgerInstructionField from '../ledger-instruction-field'; + +import SignatureRequestHeader from '../signature-request-header'; import Header from './signature-request-siwe-header'; import Message from './signature-request-siwe-message'; @@ -31,6 +34,8 @@ export default function SignatureRequestSIWE({ cancelPersonalMessage, signPersonalMessage, }) { + const t = useContext(I18nContext); + const allAccounts = useSelector(accountsWithSendEtherInfoSelector); const subjectMetadata = useSelector(getSubjectMetadata); @@ -47,8 +52,6 @@ export default function SignatureRequestSIWE({ const fromAccount = getAccountByAddress(allAccounts, from); const targetSubjectMetadata = subjectMetadata[origin]; - const t = useContext(I18nContext); - const isMatchingAddress = from.toLowerCase() === parsedMessage.address.toLowerCase(); @@ -89,6 +92,7 @@ export default function SignatureRequestSIWE({ return (
+