(
+ messageManager: AbstractMessageManager<
+ AbstractMessage,
+ P,
+ AbstractMessageParamsMetamask
+ >,
+ methodName: string,
+ msgParams: AbstractMessageParamsMetamask,
+ getSignature: (cleanMessageParams: P) => Promise
- Each box -
+ Each box on this page represents a file in the codebase. Gray boxes
+
-
- on this page represents a file that either we want to convert or
- we've already converted to TypeScript (hover over a box to see the
- filename). Boxes that are
-
+
+ represent files that need to be converted to TypeScript. Green boxes
+
-
- greyed out are test or Storybook files.
+
+ are files that have already been converted. Faded boxes
+
+
+
+
+
+
+ are test or Storybook files.
+
+
+ + You can hover over a box to see the name of the file that it + represents. You can also click on a box to see connections between + other files;{' '} + red lines + lead to dependencies (other files that import the file);{' '} + blue lines + lead to dependents (other files that are imported by the file).
@@ -103,36 +192,25 @@ export default function App() {
level {partition.level}
- {partition.children.map(({ name, hasBeenConverted }) => {
- const isTest = /\.test\.(?:js|tsx?)/u.test(name);
- const isStorybookModule = /\.stories\.(?:js|tsx?)/u.test(
- name,
- );
+ {partition.children.map((module) => {
+ const areConnectionsVisible = activeBoxRectId === module.id;
return (
-
-
-
+
Assigned to a random value if not provided. | `"f81f5c8a-33bb-4f31-a4e2-52f8b94c393b"` | +| opts.origin | The origin of the request.
Either the dApp host or "metamask" if internal. | `"metamask.github.io"` | +| opts.type | An arbitrary string identifying the type of request. | `"eth_signTypedData"` | +| opts.requestData | Additional fixed data for the request.
Must be a JSON compatible object.| `{ transactionId: '123' }` | +| opts.requestState | Additional mutable data for the request.
Must be a JSON compatible object.
Can be updated using the `ApprovalController.updateRequestState` action. | `{ status: 'pending' }` | +| shouldShowRequest | A boolean indicating whether the popup should be displayed. | `true` | + +#### Example + +``` +await this.messagingSystem.call( + 'ApprovalController:addRequest', + { + id, + origin, + type, + requestData, + }, + true, +); +``` + +### 3. Update Approval Request + +If you wish to provide additional state to the confirmation while it is visible, send an `updateRequestState` message to the `ApprovalController`. + +This requires you to have provided the `id` when creating the approval request, so it can be passed to the update message. + +The available message arguments are: + +| Name | Description | Example Value | +| -- | -- | -- | +| opts.id | The ID of the approval request to update. | `"f81f5c8a-33bb-4f31-a4e2-52f8b94c393b"` | +| opts.requestState | The updated mutable data for the request.
Must be a JSON compatible object. | `{ status: 'pending' }` | + +#### Example + +``` +await this.messagingSystem.call( + 'ApprovalController:updateRequestState', + { + id, + requestState: { counter }, + }, +); +``` + +## Frontend + +### 1. Create Template File + +The `ConfirmationPage` component is already configured to display any approval requests generated by the `ApprovalController` and the associated `pendingApprovals` state. + +In order to configure how the resulting confirmation is rendered, an **Approval Template** is required. + +Create a new JavaScript file in `ui/pages/confirmation/templates` with the name matching the `type` used in the background approval request. + +### 2. Update Approval Templates + +Add your imported file to the `APPROVAL_TEMPLATES` constant in: +[ui/pages/confirmation/templates/index.js](../ui/pages/confirmation/templates/index.js) + +### 3. Define Values + +Inside the template file, define a `getValues` function that returns an object with the following properties: + +| Name | Description | Example Value | +| -- | -- | -- | +| content | An array of objects defining the components to be rendered in the confirmation.
Processed by the [MetaMaskTemplateRenderer](../ui/components/app/metamask-template-renderer/metamask-template-renderer.js). | See example below. | +| onSubmit | A callback to execute when the user approves the confirmation. | `actions.resolvePendingApproval(...)` | +| onCancel | A callback to execute when the user rejects the confirmation. | `actions.rejectPendingApproval(...)` | +| submitText | Text shown for the accept button. | `t('approveButtonText')` | +| cancelText | Text shown on the reject button. | `t('cancel')` | +| loadingText | Text shown while waiting for the onSubmit callback to complete. | `t('addingCustomNetwork')` | +| networkDisplay | A boolean indicating whether to show the current network at the top of the confirmation. | `true` | + +#### Example + +``` +function getValues(pendingApproval, t, actions, _history) { + return { + content: [ + { + element: 'Typography', + key: 'title', + children: 'Example', + props: { + variant: TypographyVariant.H3, + align: 'center', + fontWeight: 'bold', + boxProps: { + margin: [0, 0, 4], + }, + }, + }, + ... + ], + cancelText: t('cancel'), + submitText: t('approveButtonText'), + loadingText: t('addingCustomNetwork'), + onSubmit: () => + actions.resolvePendingApproval( + pendingApproval.id, + pendingApproval.requestData, + ), + onCancel: () => + actions.rejectPendingApproval( + pendingApproval.id, + ethErrors.provider.userRejectedRequest().serialize(), + ), + networkDisplay: true, + }; +} +``` + +### 4. Define Alerts + +If any alerts are required in the confirmation, define the `getAlerts` function in the template file. + +This needs to return an array of any required alerts, based on the current pending approval. + +Each alert is an object with the following properties: + +| Name | Description | Example Value | +| -- | -- | -- | +| id | A unique string to identify the alert. | `"MISMATCHED_NETWORK_RPC"` | +| severity | The severity of the alert.
Use the constants from the design system. | `SEVERITIES.DANGER` | +| content | The component to be rendered inside the alert.
Uses the same format as the `content` returned from `getValues`.
The component can have nested components via the `children` property. | See example below. | + +#### Example + +``` +function getAlerts(_pendingApproval) { + return [ + { + id: 'EXAMPLE_ALERT', + severity: SEVERITIES.WARNING, + content: { + element: 'span', + children: { + element: 'MetaMaskTranslation', + props: { + translationKey: 'exampleMessage', + }, + }, + }, + }, + ]; +} +``` + +### 5. Export Functions + +Ensure the `getValues` and `getAlerts` functions are exported from the template file. + +#### Example + +``` +const example = { + getAlerts, + getValues, +}; + +export default example; +``` + +## Example Branch + +See [this branch](https://github.com/MetaMask/metamask-extension/compare/develop...example/confirmation) as an example of the full code needed to add a confirmation. + +The confirmation can be tested using the [E2E Test dApp](https://metamask.github.io/test-dapp/) and selecting `Request Permissions`. + +## Glossary + +### ApprovalController + +The [ApprovalController](https://github.com/MetaMask/core/blob/main/packages/approval-controller/src/ApprovalController.ts) is a controller defined in the core repository which is responsible for creating and tracking approvals and confirmations in both the MetaMask extension and MetaMask mobile. + +The `pendingApprovals` state used by the `ApprovalController` is not currently persisted, meaning any confirmations created by it will not persist after restarting the browser for example. + +### ConfirmationPage + +The [ConfirmationPage](../ui/pages/confirmation/confirmation.js) is a React component that aims to provide a generic confirmation window which can be configured using templates, each implementing a consistent interface. + +This avoids the need for additional React components when creating confirmations, as additional templates with less logic, and less duplication, can be created instead. + +## Screenshots + +### Confirmation Window + +[
](assets/confirmation.png)
diff --git a/jest.config.js b/jest.config.js
index 94daa4971..ba0c5219e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,6 +3,7 @@ module.exports = {
'
+
+
+`;
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
index c27788402..e11980489 100644
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@@ -6,9 +6,10 @@ import InputAdornment from '@material-ui/core/InputAdornment';
import classnames from 'classnames';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
import {
- EVENT,
- EVENT_NAMES,
- CONTEXT_PROPS,
+ MetaMetricsContextProp,
+ MetaMetricsEventAccountType,
+ MetaMetricsEventCategory,
+ MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import Identicon from '../../ui/identicon';
@@ -36,7 +37,11 @@ import Button from '../../ui/button';
import SearchIcon from '../../ui/icon/search-icon';
import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
import { IconColor } from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+ Icon,
+ ICON_NAMES,
+ ICON_SIZES,
+} from '../../component-library/icon/deprecated';
import KeyRingLabel from './keyring-label';
export function AccountMenuItem(props) {
@@ -209,8 +214,8 @@ export default class AccountMenu extends Component {
className="account-menu__account account-menu__item--clickable"
onClick={() => {
this.context.trackEvent({
- category: EVENT.CATEGORIES.NAVIGATION,
- event: EVENT_NAMES.NAV_ACCOUNT_SWITCHED,
+ category: MetaMetricsEventCategory.Navigation,
+ event: MetaMetricsEventName.NavAccountSwitched,
properties: {
location: 'Main Menu',
},
@@ -360,10 +365,10 @@ export default class AccountMenu extends Component {
onClick={() => {
toggleAccountMenu();
trackEvent({
- category: EVENT.CATEGORIES.NAVIGATION,
- event: EVENT_NAMES.ACCOUNT_ADD_SELECTED,
+ category: MetaMetricsEventCategory.Navigation,
+ event: MetaMetricsEventName.AccountAddSelected,
properties: {
- account_type: EVENT.ACCOUNT_TYPES.DEFAULT,
+ account_type: MetaMetricsEventAccountType.Default,
location: 'Main Menu',
},
});
@@ -378,10 +383,10 @@ export default class AccountMenu extends Component {
onClick={() => {
toggleAccountMenu();
trackEvent({
- category: EVENT.CATEGORIES.NAVIGATION,
- event: EVENT_NAMES.ACCOUNT_ADD_SELECTED,
+ category: MetaMetricsEventCategory.Navigation,
+ event: MetaMetricsEventName.AccountAddSelected,
properties: {
- account_type: EVENT.ACCOUNT_TYPES.IMPORTED,
+ account_type: MetaMetricsEventAccountType.Imported,
location: 'Main Menu',
},
});
@@ -396,10 +401,10 @@ export default class AccountMenu extends Component {
onClick={() => {
toggleAccountMenu();
trackEvent({
- category: EVENT.CATEGORIES.NAVIGATION,
- event: EVENT_NAMES.ACCOUNT_ADD_SELECTED,
+ category: MetaMetricsEventCategory.Navigation,
+ event: MetaMetricsEventName.AccountAddSelected,
properties: {
- account_type: EVENT.ACCOUNT_TYPES.HARDWARE,
+ account_type: MetaMetricsEventAccountType.Hardware,
location: 'Main Menu',
},
});
@@ -446,14 +451,16 @@ export default class AccountMenu extends Component {
onClick={() => {
trackEvent(
{
- category: EVENT.CATEGORIES.NAVIGATION,
- event: EVENT_NAMES.SUPPORT_LINK_CLICKED,
+ category: MetaMetricsEventCategory.Navigation,
+ event: MetaMetricsEventName.SupportLinkClicked,
properties: {
url: supportLink,
},
},
{
- contextPropsIntoEventProperties: [CONTEXT_PROPS.PAGE_TITLE],
+ contextPropsIntoEventProperties: [
+ MetaMetricsContextProp.PageTitle,
+ ],
},
);
global.platform.openTab({ url: supportLink });
@@ -472,8 +479,8 @@ export default class AccountMenu extends Component {
toggleAccountMenu();
history.push(SETTINGS_ROUTE);
this.context.trackEvent({
- category: EVENT.CATEGORIES.NAVIGATION,
- event: EVENT_NAMES.NAV_SETTINGS_OPENED,
+ category: MetaMetricsEventCategory.Navigation,
+ event: MetaMetricsEventName.NavSettingsOpened,
properties: {
location: 'Main Menu',
},
diff --git a/ui/components/app/account-menu/account-menu.test.js b/ui/components/app/account-menu/account-menu.test.js
index 494171fa0..504631350 100644
--- a/ui/components/app/account-menu/account-menu.test.js
+++ b/ui/components/app/account-menu/account-menu.test.js
@@ -3,65 +3,66 @@ import sinon from 'sinon';
import configureMockStore from 'redux-mock-store';
import { fireEvent, screen } from '@testing-library/react';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import { HardwareKeyringTypes } from '../../../../shared/constants/hardware-wallets';
+import { KeyringType } from '../../../../shared/constants/keyring';
import AccountMenu from '.';
-describe('Account Menu', () => {
- const mockStore = {
- metamask: {
- provider: {
- type: 'test',
- },
- preferences: {
- useNativeCurrencyAsPrimaryCurrency: true,
- },
+const initialProps = {
+ isAccountMenuOpen: true,
+ addressConnectedSubjectMap: {},
+ accounts: [
+ {
+ address: '0x00',
+ name: 'Account 1',
+ balance: '0x0',
},
- };
+ {
+ address: '0x1',
+ name: 'Imported Account 1',
+ balance: '0x0',
+ },
+ ],
+ keyrings: [
+ {
+ type: KeyringType.hdKeyTree,
+ accounts: ['0xAdress'],
+ },
+ {
+ type: KeyringType.imported,
+ accounts: ['0x1'],
+ },
+ ],
+ prevIsAccountMenuOpen: false,
+ lockMetamask: sinon.spy(),
+ setSelectedAccount: sinon.spy(),
+ showRemoveAccountConfirmationModal: sinon.spy(),
+ toggleAccountMenu: sinon.spy(),
+ history: {
+ push: sinon.spy(),
+ },
+};
+const mockStore = {
+ metamask: {
+ provider: {
+ type: 'test',
+ },
+ preferences: {
+ useNativeCurrencyAsPrimaryCurrency: true,
+ },
+ },
+};
+
+const renderComponent = ({ props = initialProps } = {}) => {
const store = configureMockStore()(mockStore);
+ return renderWithProvider(
-
-
+ +{t('addEthereumChainWarningModalListPointOne')} - -
-
+ +{t('addEthereumChainWarningModalListPointTwo')} - -
-
+ +{t('addEthereumChainWarningModalListPointThree')} -
+
+`;
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
index 6d1792fdc..b9113b2c1 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js
@@ -8,7 +8,11 @@ import {
DISPLAY,
TypographyVariant,
} from '../../../helpers/constants/design-system';
-import { Icon, ICON_NAMES, ICON_SIZES } from '../../component-library';
+import {
+ Icon,
+ ICON_NAMES,
+ ICON_SIZES,
+} from '../../component-library/icon/deprecated';
export const CustomSpendingCapTooltip = ({
tooltipContentText,
diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap.js b/ui/components/app/custom-spending-cap/custom-spending-cap.js
index be49b0409..23e8d16ee 100644
--- a/ui/components/app/custom-spending-cap/custom-spending-cap.js
+++ b/ui/components/app/custom-spending-cap/custom-spending-cap.js
@@ -1,20 +1,21 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useContext, useEffect, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import BigNumber from 'bignumber.js';
+import { addHexPrefix } from 'ethereumjs-util';
+
import { I18nContext } from '../../../contexts/i18n';
import Box from '../../ui/box';
import FormField from '../../ui/form-field';
-import Typography from '../../ui/typography';
-import { ButtonLink, Icon, ICON_NAMES } from '../../component-library';
+import { Text, ButtonLink } from '../../component-library';
+import { Icon, ICON_NAMES } from '../../component-library/icon/deprecated';
import {
AlignItems,
DISPLAY,
FLEX_DIRECTION,
TEXT_ALIGN,
- FONT_WEIGHT,
- TypographyVariant,
+ TextVariant,
JustifyContent,
Size,
BLOCK_SIZES,
@@ -24,24 +25,32 @@ import {
import { getCustomTokenAmount } from '../../../selectors';
import { setCustomTokenAmount } from '../../../ducks/app/app';
import { calcTokenAmount } from '../../../../shared/lib/transactions-controller-utils';
+import { hexToDecimal } from '../../../../shared/modules/conversion.utils';
import {
MAX_TOKEN_ALLOWANCE_AMOUNT,
NUM_W_OPT_DECIMAL_COMMA_OR_DOT_REGEX,
DECIMAL_REGEX,
} from '../../../../shared/constants/tokens';
import { Numeric } from '../../../../shared/modules/Numeric';
+import { estimateGas } from '../../../store/actions';
+import { getCustomTxParamsData } from '../../../pages/confirm-approve/confirm-approve.util';
+import { useGasFeeContext } from '../../../contexts/gasFee';
import { CustomSpendingCapTooltip } from './custom-spending-cap-tooltip';
export default function CustomSpendingCap({
+ txParams,
tokenName,
currentTokenBalance,
dappProposedValue,
siteOrigin,
passTheErrorText,
decimals,
+ setInputChangeInProgress,
}) {
const t = useContext(I18nContext);
const dispatch = useDispatch();
+ const { updateTransaction } = useGasFeeContext();
+ const inputRef = useRef(null);
const value = useSelector(getCustomTokenAmount);
@@ -71,14 +80,14 @@ export default function CustomSpendingCap({
return {
className: 'custom-spending-cap__lowerValue',
description: t('inputLogicEqualOrSmallerNumber', [
-
+
+
+
+
+
-
{t('speedUpTooltipText')}{' '}
@@ -107,16 +108,17 @@ export default function EditGasDisplay({
position="top"
contentText={t('speedUpExplanation')}
/>
-
+
)}
-