-
-
-
- {this.context.t('decryptRequest')}
-
-
-
-
-
+const Header = () => {
+ const t = useI18nContext();
+ return (
+
+
+
+ );
+};
- renderAccount = () => {
- const { fromAccount } = this.props;
- const { t } = this.context;
+const Account = ({ fromAccount, nativeCurrency }) => {
+ const t = useI18nContext();
- return (
+ const nativeCurrencyBalance = new Numeric(
+ fromAccount.balance,
+ 16,
+ EtherDenomination.WEI,
+ )
+ .toDenomination(EtherDenomination.ETH)
+ .round(6)
+ .toBase(10)
+ .toString();
+
+ return (
+
+ {t('decryptRequest')}
- );
- };
+
+
+
+
{`${t('account')}:`}
-
{`${t('balance')}:`}
- {`${nativeCurrencyBalance} ${
- conversionRate ? currentCurrency?.toUpperCase() : nativeCurrency
- }`}
+ {`${nativeCurrencyBalance} ${nativeCurrency}`}
-
- );
- };
+const VisualSection = ({ name, notice, targetSubjectMetadata }) => (
+
+
+ {targetSubjectMetadata?.iconUrl ? (
+ 
+ ) : (
+
+ {name.charAt(0).toUpperCase()}
+
+ )}
+
+
+);
- renderAccountInfo = () => {
- return (
- {notice}
+
- {this.renderAccount()}
- {this.renderRequestIcon()}
- {this.renderBalance()}
-
- );
- };
+VisualSection.propTypes = {
+ name: PropTypes.string.isRequired,
+ notice: PropTypes.string.isRequired,
+ targetSubjectMetadata: PropTypes.shape({
+ iconUrl: PropTypes.string,
+ }),
+};
+
+const ScrollToBottomButton = ({
+ isScrollable,
+ isScrolledToBottom,
+ hasDecrypted,
+ hasError,
+ scrollToBottom,
+}) => {
+ const t = useI18nContext();
+
+ const isScrollToBottomVisible =
+ hasDecrypted && !hasError && isScrollable && !isScrolledToBottom;
+
+ if (!isScrollToBottomVisible) {
+ return null;
+ }
- renderBody = () => {
- const { decryptMessageInline, subjectMetadata, txData } = this.props;
- const { t } = this.context;
+ return (
+
- {this.renderAccountInfo()}
-
-
- {targetSubjectMetadata?.iconUrl ? (
-
- ) : (
-
- {name.charAt(0).toUpperCase()}
-
- )}
-
-
+ {notice}
-
-
- {!hasDecrypted && !hasError ? txData.msgParams.data : rawMessage}
+
+
+ {!hasDecrypted && !hasError
+ ? messageData.msgParams.data
+ : rawMessage}
{hasError ? errorMessage : ''}
{
- decryptMessageInline(txData, event).then((result) => {
- if (result.error) {
- this.setState({
- hasError: true,
- errorMessage: this.context.t('decryptInlineError', [
- result.error,
- ]),
- });
- } else {
- this.setState({
- hasDecrypted: true,
- rawMessage: result.rawSig,
- });
- }
- });
- }}
+ data-testid="message-lock"
+ onClick={onDecryptMessage}
>
@@ -236,6 +256,13 @@ export default class ConfirmDecryptMessage extends Component {
this.copyMessage()}
- onMouseDown={() => this.setState({ copyToClipboardPressed: true })}
- onMouseUp={() => this.setState({ copyToClipboardPressed: false })}
+ onClick={copyMessage}
+ onMouseDown={() => setCopyToClipboardPressed(true)}
+ onMouseUp={() => setCopyToClipboardPressed(false)}
+ data-testid="message-copy"
>
);
+ },
+);
+MessageBody.displayName = 'MessageBody';
+
+MessageBody.propTypes = {
+ isScrollable: PropTypes.bool.isRequired,
+ isScrolledToBottom: PropTypes.bool.isRequired,
+ onScroll: PropTypes.func.isRequired,
+ rawMessage: PropTypes.string.isRequired,
+ scrollToBottom: PropTypes.func.isRequired,
+ setRawMessage: PropTypes.func.isRequired,
+ messageData: PropTypes.shape({
+ msgParams: PropTypes.shape({
+ data: PropTypes.string.isRequired,
+ from: PropTypes.string.isRequired,
+ origin: PropTypes.string.isRequired,
+ }).isRequired,
+ id: PropTypes.string.isRequired,
+ }).isRequired,
+};
+
+const Footer = ({
+ hasScrolledToBottom,
+ isScrollable,
+ mostRecentOverviewPage,
+ messageData,
+}) => {
+ const dispatch = useDispatch();
+ const history = useHistory();
+ const t = useI18nContext();
+ const trackEvent = useContext(MetaMetricsContext);
+
+ const onCancelClick = async (event) => {
+ event.stopPropagation(event);
+
+ await dispatch(cancelDecryptMsg(messageData));
+ trackEvent({
+ category: MetaMetricsEventCategory.Messages,
+ event: 'Cancel',
+ properties: {
+ action: 'Decrypt Message Request',
+ legacy_event: true,
+ },
+ });
+ dispatch(clearConfirmTransaction());
+ history.push(mostRecentOverviewPage);
};
- renderFooter = () => {
- const {
- cancelDecryptMessage,
- clearConfirmTransaction,
- decryptMessage,
- history,
- mostRecentOverviewPage,
- txData,
- } = this.props;
- const { trackEvent, t } = this.context;
+ const onSubmitClick = async (event) => {
+ event.stopPropagation(event);
+ const params = messageData.msgParams;
+ params.metamaskId = messageData.id;
- return (
- {
- await cancelDecryptMessage(txData, event);
- trackEvent({
- category: MetaMetricsEventCategory.Messages,
- event: 'Cancel',
- properties: {
- action: 'Decrypt Message Request',
- legacy_event: true,
- },
- });
- clearConfirmTransaction();
- history.push(mostRecentOverviewPage);
- }}
- onSubmit={async (event) => {
- await decryptMessage(txData, event);
- trackEvent({
- category: MetaMetricsEventCategory.Messages,
- event: 'Confirm',
- properties: {
- action: 'Decrypt Message Request',
- legacy_event: true,
- },
- });
- clearConfirmTransaction();
- history.push(mostRecentOverviewPage);
- }}
- />
- );
+ await dispatch(decryptMsg(params));
+ trackEvent({
+ category: MetaMetricsEventCategory.Messages,
+ event: 'Confirm',
+ properties: {
+ action: 'Decrypt Message Request',
+ legacy_event: true,
+ },
+ });
+ dispatch(clearConfirmTransaction());
+ history.push(mostRecentOverviewPage);
};
- render = () => {
- if (!this.props.txData) {
- log.warn('ConfirmDecryptMessage Page: Missing txData prop.');
- return null;
- }
+ return (
+
- {this.renderHeader()}
- {this.renderBody()}
- {this.renderFooter()}
+Footer.propTypes = {
+ hasScrolledToBottom: PropTypes.bool.isRequired,
+ isScrollable: PropTypes.bool.isRequired,
+ mostRecentOverviewPage: PropTypes.string.isRequired,
+ messageData: PropTypes.shape({
+ msgParams: PropTypes.shape({
+ data: PropTypes.string.isRequired,
+ from: PropTypes.string.isRequired,
+ origin: PropTypes.string.isRequired,
+ }).isRequired,
+ id: PropTypes.string.isRequired,
+ }).isRequired,
+};
+
+const ConfirmDecryptMessage = () => {
+ const t = useI18nContext();
+ const [rawMessage, setRawMessage] = useState('');
+ const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
+ const nativeCurrency = useSelector(getNativeCurrency);
+
+ const unconfirmedTransactions = useSelector(
+ unconfirmedTransactionsListSelector,
+ );
+ const messageData = cloneDeep(unconfirmedTransactions[0]);
+
+ const fromAccount = useSelector((state) =>
+ getTargetAccountWithSendEtherInfo(state, messageData?.msgParams?.from),
+ );
+
+ const subjectMetadata = useSelector(
+ (state) => state.metamask.subjectMetadata || {},
+ );
+
+ const {
+ hasScrolledToBottom,
+ isScrollable,
+ isScrolledToBottom,
+ onScroll,
+ scrollToBottom,
+ ref,
+ } = useScrollRequired([rawMessage], {
+ offsetPxFromBottom: 0,
+ });
+
+ if (!messageData) {
+ log.warn('ConfirmDecryptMessage Page: Missing messageData prop.');
+ return null;
+ }
+
+ const targetSubjectMetadata = subjectMetadata[messageData.msgParams.origin];
+ const name = targetSubjectMetadata?.name || messageData.msgParams.origin;
+ const notice = t('decryptMessageNotice', [messageData.msgParams.origin]);
+
+ return (
+
+ ,
store,
);
+ const unlockButton = result.getByTestId('message-lock');
+ unlockButton.click();
+ await flushPromises();
+ return result;
+ };
+
+ it('matches snapshot', () => {
+ const { container } = renderWithProvider(
+ ,
store,
);
- expect(
- container.querySelector('.request-decrypt-message__container'),
- ).toBeNull();
+ const confirmButton = getByText('Decrypt');
+ confirmButton.click();
+ await flushPromises();
+
+ expect(mockDecryptMsg).toHaveBeenCalled();
+ expect(mockTrackEvent).toHaveBeenCalled();
+ });
+
+ it('cancel button calls cancel action and calls metric event', async () => {
+ const { getByText } = renderWithProvider(
+
+ ,
+ store,
+ );
+
+ const confirmButton = getByText('Cancel');
+ confirmButton.click();
+ await flushPromises();
+
+ expect(mockCancelDecryptMsg).toHaveBeenCalled();
+ expect(mockTrackEvent).toHaveBeenCalled();
+ });
+
+ it('shows the correct message data', async () => {
+ const { container, getByText } = await renderAndUnlockMessage();
+
+ expect(container).toMatchSnapshot();
+ expect(getByText(mockRawSignatureMessage)).toBeInTheDocument();
+ });
+
+ it('shows the copy button after decrypting inline and calls copy to clipboard on click', async () => {
+ const { getByTestId } = await renderAndUnlockMessage();
+
+ const copyButton = getByTestId('message-copy');
+ expect(copyButton).toBeInTheDocument();
+
+ copyButton.click();
+ expect(mockCopyToClipboard).toHaveBeenCalled();
+ expect(mockTrackEvent).toHaveBeenCalled();
+ });
+
+ describe('on long message', () => {
+ beforeEach(() => {
+ mockDecryptMsgInline.mockReturnValue({
+ rawSig: mockRawSignatureLongMessage,
+ type: 'DECRYPT_MESSAGE_INLINE',
+ });
+ });
+
+ it('shows scroll to bottom button', async () => {
+ mockUseScrollRequired.mockReturnValue(
+ merge({}, mockUseScrollRequiredResult, { isScrollable: true }),
+ );
+
+ const { getByTestId } = await renderAndUnlockMessage();
+
+ const scrollToBottomButton = getByTestId('scroll-to-bottom');
+ expect(scrollToBottomButton).toBeInTheDocument();
+ });
+
+ it('confirm action is disabled if scroll not finished', async () => {
+ mockUseScrollRequired.mockReturnValue(
+ merge({}, mockUseScrollRequiredResult, { isScrollable: true }),
+ );
+
+ const { getByText } = await renderAndUnlockMessage();
+
+ const confirmButton = getByText('Decrypt');
+ expect(confirmButton).toBeDisabled();
+ });
+
+ it('scroll to bottom button click calls scroll to bottom action', async () => {
+ const spyScrollToBottomAction = jest.fn();
+ mockUseScrollRequired.mockReturnValue(
+ merge({}, mockUseScrollRequiredResult, {
+ isScrollable: true,
+ scrollToBottom: spyScrollToBottomAction,
+ }),
+ );
+
+ const { getByTestId } = await renderAndUnlockMessage();
+
+ const scrollToBottomButton = getByTestId('scroll-to-bottom');
+ scrollToBottomButton.click();
+
+ expect(spyScrollToBottomAction).toHaveBeenCalled();
+ });
+
+ it('enables confirm action if scrolled to bottom', async () => {
+ mockUseScrollRequired.mockReturnValue(
+ merge({}, mockUseScrollRequiredResult, {
+ isScrollable: true,
+ hasScrolledToBottom: true,
+ isScrolledToBottom: true,
+ }),
+ );
+
+ const { getByText } = await renderAndUnlockMessage();
+
+ const confirmButton = getByText('Decrypt');
+ expect(confirmButton).not.toBeDisabled();
+ });
});
});
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js
deleted file mode 100644
index 88d7c8deb40b..000000000000
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.container.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { withRouter } from 'react-router-dom';
-import { cloneDeep } from 'lodash';
-
-import {
- goHome,
- decryptMsg,
- cancelDecryptMsg,
- decryptMsgInline,
-} from '../../store/actions';
-import {
- getCurrentCurrency,
- getTargetAccountWithSendEtherInfo,
- unconfirmedTransactionsListSelector,
-} from '../../selectors';
-import { clearConfirmTransaction } from '../../ducks/confirm-transaction/confirm-transaction.duck';
-import { getMostRecentOverviewPage } from '../../ducks/history/history';
-import { getNativeCurrency } from '../../ducks/metamask/metamask';
-import ConfirmDecryptMessage from './confirm-decrypt-message.component';
-
-// ConfirmDecryptMessage component is not used in codebase, removing usage of useNativeCurrencyAsPrimaryCurrency
-function mapStateToProps(state) {
- const {
- metamask: { subjectMetadata = {} },
- } = state;
-
- const unconfirmedTransactions = unconfirmedTransactionsListSelector(state);
-
- const txData = cloneDeep(unconfirmedTransactions[0]);
-
- const fromAccount = getTargetAccountWithSendEtherInfo(
- state,
- txData?.msgParams?.from,
- );
-
- return {
- txData,
- subjectMetadata,
- fromAccount,
- requester: null,
- requesterAddress: null,
- conversionRate: null,
- mostRecentOverviewPage: getMostRecentOverviewPage(state),
- nativeCurrency: getNativeCurrency(state),
- currentCurrency: getCurrentCurrency(state),
- };
-}
-
-function mapDispatchToProps(dispatch) {
- return {
- goHome: () => dispatch(goHome()),
- clearConfirmTransaction: () => dispatch(clearConfirmTransaction()),
- decryptMessage: (msgData, event) => {
- const params = msgData.msgParams;
- params.metamaskId = msgData.id;
- event.stopPropagation(event);
- return dispatch(decryptMsg(params));
- },
- cancelDecryptMessage: (msgData, event) => {
- event.stopPropagation(event);
- return dispatch(cancelDecryptMsg(msgData));
- },
- decryptMessageInline: (msgData, event) => {
- const params = msgData.msgParams;
- params.metamaskId = msgData.id;
- event.stopPropagation(event);
- return dispatch(decryptMsgInline(params));
- },
- };
-}
-
-export default compose(
- withRouter,
- connect(mapStateToProps, mapDispatchToProps),
-)(ConfirmDecryptMessage);
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
index b1d74b6be9cb..ac33ae6afc8c 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.scss
@@ -1,4 +1,4 @@
-@use "design-system";
+@use 'design-system';
.request-decrypt-message {
&__container {
@@ -164,19 +164,37 @@
width: 100%;
}
+ &__message-container {
+ position: relative;
+
+ .scroll-to-bottom__button {
+ position: absolute;
+ margin-left: auto;
+ margin-right: auto;
+ left: 0;
+ right: 0;
+ bottom: 28px;
+
+ &:hover {
+ background-color: var(--color-primary-default);
+ }
+ }
+ }
+
&__message {
overflow-wrap: break-word;
margin: 20px;
overflow: hidden;
- border: 1px solid var(--color-border-alternative);
- padding: 5px;
border-radius: 5px;
position: relative;
+ border: 1px solid var(--color-border-muted);
+ padding: 13px 16px;
&-text {
@include design-system.H7;
height: 115px;
+ overflow-y: scroll;
}
&-cover {
@@ -193,6 +211,7 @@
height: 100%;
width: 100%;
top: 0;
+ left: 0;
cursor: pointer;
&__container {
@@ -208,7 +227,6 @@
align-items: center;
justify-content: center;
-
&__icon {
color: var(--color-icon-default);
display: flex;
@@ -231,6 +249,7 @@
justify-content: space-evenly;
margin-left: 20px;
margin-right: 20px;
+ margin-top: 24px;
display: flex;
cursor: pointer;
}
@@ -238,6 +257,7 @@
&-copy-text {
margin-right: 10px;
display: inline;
+ color: var(--color-primary-default);
}
&-copy-tooltip {
diff --git a/ui/pages/confirm-decrypt-message/index.js b/ui/pages/confirm-decrypt-message/index.js
index c375f08a6fb5..3fbb921b8dce 100644
--- a/ui/pages/confirm-decrypt-message/index.js
+++ b/ui/pages/confirm-decrypt-message/index.js
@@ -1 +1 @@
-export { default } from './confirm-decrypt-message.container';
+export { default } from './confirm-decrypt-message.component';
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts
index 911cdb20118c..17c8ab8dd8f6 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.test.ts
@@ -22,13 +22,13 @@ describe('useFeeCalculations', () => {
expect(result.current).toMatchInlineSnapshot(`
{
"estimatedFeeFiat": "$0.00",
- "estimatedFeeNative": "0 WEI",
+ "estimatedFeeNative": "0 ETH",
"l1FeeFiat": "",
"l1FeeNative": "",
"l2FeeFiat": "",
"l2FeeNative": "",
"maxFeeFiat": "$0.00",
- "maxFeeNative": "0 WEI",
+ "maxFeeNative": "0 ETH",
}
`);
});
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
index 587d70c9c9ef..70bd2c0e3af2 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useFeeCalculations.ts
@@ -8,7 +8,6 @@ import {
addHexes,
decGWEIToHexWEI,
decimalToHex,
- getEthConversionFromWeiHex,
getValueFromWeiHex,
multiplyHexes,
} from '../../../../../../../shared/modules/conversion.utils';
@@ -17,6 +16,7 @@ import { getConversionRate } from '../../../../../../ducks/metamask/metamask';
import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter';
import { useGasFeeEstimates } from '../../../../../../hooks/useGasFeeEstimates';
import { getCurrentCurrency } from '../../../../../../selectors';
+import { getMultichainNetwork } from '../../../../../../selectors/multichain';
import { HEX_ZERO } from '../shared/constants';
import { useEIP1559TxFees } from './useEIP1559TxFees';
import { useSupportsEIP1559 } from './useSupportsEIP1559';
@@ -33,14 +33,18 @@ export function useFeeCalculations(transactionMeta: TransactionMeta) {
const conversionRate = useSelector(getConversionRate);
const fiatFormatter = useFiatFormatter();
+ const multichainNetwork = useSelector(getMultichainNetwork);
+ const ticker = multichainNetwork?.network?.ticker;
+
const getFeesFromHex = useCallback(
(hexFee: string) => {
- const nativeCurrencyFee =
- getEthConversionFromWeiHex({
+ const nativeCurrencyFee = `${
+ getValueFromWeiHex({
value: hexFee,
fromCurrency: EtherDenomination.GWEI,
numberOfDecimals: 4,
- }) || `0 ${EtherDenomination.ETH}`;
+ }) || 0
+ } ${ticker}`;
const currentCurrencyFee = fiatFormatter(
Number(
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts
similarity index 73%
rename from ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts
rename to ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts
index 23e4cc3c1bda..efdf2b66ac56 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts
@@ -2,9 +2,9 @@ import { TransactionMeta } from '@metamask/transaction-controller';
import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer';
import mockState from '../../../../../../../test/data/mock-state.json';
import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers';
-import { useTokenImage } from './use-token-image';
+import { useTokenDetails } from './useTokenDetails';
-describe('useTokenImage', () => {
+describe('useTokenDetails', () => {
it('returns iconUrl from selected token if it exists', () => {
const transactionMeta = genUnapprovedTokenTransferConfirmation(
{},
@@ -19,11 +19,14 @@ describe('useTokenImage', () => {
};
const { result } = renderHookWithProvider(
- () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+ () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
mockState,
);
- expect(result.current).toEqual({ tokenImage: 'iconUrl' });
+ expect(result.current).toEqual({
+ tokenImage: 'iconUrl',
+ tokenSymbol: 'symbol',
+ });
});
it('returns selected token image if no iconUrl is included', () => {
@@ -39,11 +42,14 @@ describe('useTokenImage', () => {
};
const { result } = renderHookWithProvider(
- () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+ () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
mockState,
);
- expect(result.current).toEqual({ tokenImage: 'image' });
+ expect(result.current).toEqual({
+ tokenImage: 'image',
+ tokenSymbol: 'symbol',
+ });
});
it('returns token list icon url if no image is included in the token', () => {
@@ -58,7 +64,7 @@ describe('useTokenImage', () => {
};
const { result } = renderHookWithProvider(
- () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+ () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
{
...mockState,
metamask: {
@@ -72,7 +78,10 @@ describe('useTokenImage', () => {
},
);
- expect(result.current).toEqual({ tokenImage: 'tokenListIconUrl' });
+ expect(result.current).toEqual({
+ tokenImage: 'tokenListIconUrl',
+ tokenSymbol: 'symbol',
+ });
});
it('returns undefined if no image is found', () => {
@@ -87,10 +96,13 @@ describe('useTokenImage', () => {
};
const { result } = renderHookWithProvider(
- () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN),
+ () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN),
mockState,
);
- expect(result.current).toEqual({ tokenImage: undefined });
+ expect(result.current).toEqual({
+ tokenImage: undefined,
+ tokenSymbol: 'symbol',
+ });
});
});
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts
similarity index 65%
rename from ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts
rename to ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts
index 5817d08028ab..be9578496205 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts
@@ -1,20 +1,27 @@
import { TokenListMap } from '@metamask/assets-controllers';
import { TransactionMeta } from '@metamask/transaction-controller';
import { useSelector } from 'react-redux';
+import { useI18nContext } from '../../../../../../hooks/useI18nContext';
import { getTokenList } from '../../../../../../selectors';
import { SelectedToken } from '../shared/selected-token';
-export const useTokenImage = (
+export const useTokenDetails = (
transactionMeta: TransactionMeta,
selectedToken: SelectedToken,
) => {
+ const t = useI18nContext();
+
const tokenList = useSelector(getTokenList) as TokenListMap;
- // TODO: Add support for NFT images in one of the following tasks
const tokenImage =
selectedToken?.iconUrl ||
selectedToken?.image ||
tokenList[transactionMeta?.txParams?.to as string]?.iconUrl;
- return { tokenImage };
+ const tokenSymbol =
+ selectedToken?.symbol ||
+ tokenList[transactionMeta?.txParams?.to as string]?.symbol ||
+ t('unknown');
+
+ return { tokenImage, tokenSymbol };
};
diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx
index 2806c33936c0..40c571d4bc75 100644
--- a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx
+++ b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx
@@ -16,22 +16,23 @@ import {
TextColor,
TextVariant,
} from '../../../../../../../helpers/constants/design-system';
-import { useI18nContext } from '../../../../../../../hooks/useI18nContext';
import { getWatchedToken } from '../../../../../../../selectors';
import { MultichainState } from '../../../../../../../selectors/multichain';
import { useConfirmContext } from '../../../../../context/confirm';
-import { useTokenImage } from '../../hooks/use-token-image';
+import { useTokenDetails } from '../../hooks/useTokenDetails';
import { useTokenValues } from '../../hooks/use-token-values';
import { ConfirmLoader } from '../confirm-loader/confirm-loader';
const SendHeading = () => {
- const t = useI18nContext();
const { currentConfirmation: transactionMeta } =
useConfirmContext();
const selectedToken = useSelector((state: MultichainState) =>
getWatchedToken(transactionMeta)(state),
);
- const { tokenImage } = useTokenImage(transactionMeta, selectedToken);
+ const { tokenImage, tokenSymbol } = useTokenDetails(
+ transactionMeta,
+ selectedToken,
+ );
const { decodedTransferValue, fiatDisplayValue, pending } =
useTokenValues(transactionMeta);
@@ -57,9 +58,7 @@ const SendHeading = () => {
variant={TextVariant.headingLg}
color={TextColor.inherit}
marginTop={3}
- >{`${decodedTransferValue || ''} ${
- selectedToken?.symbol || t('unknown')
- }`}
+ >{`${decodedTransferValue || ''} ${tokenSymbol}`}
{fiatDisplayValue && (
{fiatDisplayValue}
diff --git a/ui/pages/notifications-settings/notifications-settings.tsx b/ui/pages/notifications-settings/notifications-settings.tsx
index 7261daeed02f..d929f048a793 100644
--- a/ui/pages/notifications-settings/notifications-settings.tsx
+++ b/ui/pages/notifications-settings/notifications-settings.tsx
@@ -1,6 +1,6 @@
import React, { useMemo, useState } from 'react';
import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useHistory, useLocation } from 'react-router-dom';
import type { InternalAccount } from '@metamask/keyring-api';
import { useI18nContext } from '../../hooks/useI18nContext';
import { NOTIFICATIONS_ROUTE } from '../../helpers/constants/routes';
@@ -47,6 +47,7 @@ type AccountType = InternalAccount & {
export default function NotificationsSettings() {
const history = useHistory();
+ const location = useLocation();
const t = useI18nContext();
// Selectors
@@ -74,6 +75,9 @@ export default function NotificationsSettings() {
await accountSettingsProps.update(accountAddresses);
};
+ // Previous page
+ const previousPage = location.state?.fromPage;
+
return (
history.push(NOTIFICATIONS_ROUTE)}
+ onClick={() =>
+ previousPage
+ ? history.push(previousPage)
+ : history.push(NOTIFICATIONS_ROUTE)
+ }
/>
}
endAccessory={null}
diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js
index 2f33cd78f2e1..119b01257802 100644
--- a/ui/pages/settings/settings.component.js
+++ b/ui/pages/settings/settings.component.js
@@ -20,6 +20,7 @@ import {
ADD_NETWORK_ROUTE,
ADD_POPULAR_CUSTOM_NETWORK,
DEFAULT_ROUTE,
+ NOTIFICATIONS_SETTINGS_ROUTE,
} from '../../helpers/constants/routes';
import { getSettingsRoutes } from '../../helpers/utils/settings-search';
@@ -69,6 +70,7 @@ class SettingsPage extends PureComponent {
mostRecentOverviewPage: PropTypes.string.isRequired,
pathnameI18nKey: PropTypes.string,
toggleNetworkMenu: PropTypes.func.isRequired,
+ useExternalServices: PropTypes.bool,
};
static contextTypes = {
@@ -290,7 +292,7 @@ class SettingsPage extends PureComponent {
}
renderTabs() {
- const { history, currentPath } = this.props;
+ const { history, currentPath, useExternalServices } = this.props;
const { t } = this.context;
const tabs = [
@@ -326,6 +328,14 @@ class SettingsPage extends PureComponent {
},
];
+ if (useExternalServices) {
+ tabs.splice(4, 0, {
+ content: t('notifications'),
+ icon:
+
+ );
+};
+
+export default ConfirmDecryptMessage;
diff --git a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js
index e073474d79fe..7884cb22e4bb 100644
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js
@@ -1,9 +1,17 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
-import { EthAccountType } from '@metamask/keyring-api';
+import { merge } from 'lodash';
+import copyToClipboard from 'copy-to-clipboard';
import mockState from '../../../test/data/mock-state.json';
import { renderWithProvider } from '../../../test/lib/render-helpers';
-import { ETH_EOA_METHODS } from '../../../shared/constants/eth-methods';
+import { flushPromises } from '../../../test/lib/timer-helpers';
+import {
+ decryptMsg,
+ decryptMsgInline,
+ cancelDecryptMsg,
+} from '../../store/actions';
+import { useScrollRequired } from '../../hooks/useScrollRequired';
+import { MetaMetricsContext } from '../../contexts/metametrics';
import ConfirmDecryptMessage from './confirm-decrypt-message.component';
const messageData = {
@@ -13,129 +21,245 @@ const messageData = {
verifyingContract: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC',
version: '1',
},
- message: {
- contents: 'Hello, Bob!',
- from: {
- name: 'Cow',
- wallets: [
- '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826',
- '0xDeaDbeefdEAdbeefdEadbEEFdeadbeEFdEaDbeeF',
- ],
- },
- to: [
- {
- name: 'Bob',
- wallets: [
- '0xbBbBBBBbbBBBbbbBbbBbbbbBBbBbbbbBbBbbBBbB',
- '0xB0BdaBea57B0BDABeA57b0bdABEA57b0BDabEa57',
- '0xB0B0b0b0b0b0B000000000000000000000000000',
- ],
- },
- ],
- },
- primaryType: 'Mail',
- types: {
- EIP712Domain: [
- { name: 'name', type: 'string' },
- { name: 'version', type: 'string' },
- { name: 'chainId', type: 'uint256' },
- { name: 'verifyingContract', type: 'address' },
- ],
- Mail: [
- { name: 'from', type: 'Person' },
- { name: 'to', type: 'Person[]' },
- { name: 'contents', type: 'string' },
- ],
- Person: [
- { name: 'name', type: 'string' },
- { name: 'wallets', type: 'address[]' },
- ],
+};
+const messageIdMock = '12345';
+const messageMock = {
+ id: messageIdMock,
+ time: 123,
+ status: 'unapproved',
+ type: 'testType',
+ rawSig: undefined,
+ data: JSON.stringify(messageData),
+ chainId: '0x5',
+ msgParams: {
+ data: JSON.stringify(messageData),
+ from: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+ version: 'V4',
+ origin: 'test',
},
};
-const baseProps = {
- clearConfirmTransaction: () => undefined,
- cancelDecryptMessage: () => undefined,
- decryptMessage: () => undefined,
- decryptMessageInline: () => undefined,
- mostRecentOverviewPage: '/',
- history: { push: '/' },
- requesterAddress: '0x123456789abcdef',
- txData: {
- msgParams: {
- data: JSON.stringify(messageData),
- version: 'V4',
- origin: 'test',
- },
+const mockRawSignatureMessage = 'raw message';
+const mockRawSignatureLongMessage = 'raw message '.repeat(100);
+const mockUseScrollRequiredResult = {
+ hasScrolledToBottom: false,
+ isScrollable: false,
+ isScrolledToBottom: false,
+ onScroll: jest.fn(),
+ scrollToBottom: jest.fn(),
+ setHasScrolledToBottom: jest.fn(),
+ ref: {
+ current: {},
},
- subjectMetadata: {
- 'peepeth.com': {
- iconUrl: 'https://peepeth.com/favicon-32x32.png',
- name: 'Peepeth',
- },
- 'https://remix.ethereum.org': {
- iconUrl: 'https://remix.ethereum.org/icon.png',
- name: 'Remix - Ethereum IDE',
- },
+};
+
+jest.mock('../../hooks/useScrollRequired', () => ({
+ useScrollRequired: jest.fn(),
+}));
+
+jest.mock('../../store/actions', () => ({
+ cancelDecryptMsg: jest.fn(),
+ decryptMsg: jest.fn(),
+ decryptMsgInline: jest.fn(),
+}));
+
+jest.mock('copy-to-clipboard', () => ({
+ __esModule: true,
+ default: jest.fn(),
+}));
+
+const state = merge({}, mockState, {
+ history: {
+ mostRecentOverviewPage: '/',
},
- nativeCurrency: 'ABC',
- currentCurrency: 'def',
- fromAccount: {
- address: '0x123456789abcdef',
- balance: '0x346ba7725f412cbfdb',
- id: 'cf8dace4-9439-4bd4-b3a8-88c821c8fcb3',
- metadata: {
- name: 'Antonio',
- keyring: {
- type: 'HD Key Tree',
- },
- },
- options: {},
- methods: ETH_EOA_METHODS,
- type: EthAccountType.Eoa,
+ metamask: {
+ unapprovedDecryptMsgs: [messageMock],
},
-};
+});
describe('ConfirmDecryptMessage Component', () => {
- const store = configureMockStore()(mockState);
+ const mockCopyToClipboard = jest.mocked(copyToClipboard);
+ const mockCancelDecryptMsg = jest.mocked(cancelDecryptMsg);
+ const mockDecryptMsgInline = jest.mocked(decryptMsgInline);
+ const mockDecryptMsg = jest.mocked(decryptMsg);
+ const mockUseScrollRequired = jest.mocked(useScrollRequired);
+ const mockTrackEvent = jest.fn();
- it('should match snapshot when preference is ETH currency', () => {
- const { container } = renderWithProvider(
-
+
- );
- };
-}
+
+