Merge branch 'develop' into phishing-warning-metrics

MetaMask · Feb 6, 2023 · 72dad73 · 72dad73
2 parents 7197799 + 68ea3a7
commit 72dad73
Show file tree

Hide file tree

Showing 48 changed files with 2,036 additions and 1,207 deletions.
diff --git a/development/states/navigate-txs.json b/development/states/navigate-txs.json
@@ -1,6 +1,5 @@
 {
   "appState": {
-    "shouldClose": false,
     "menuOpen": false,
     "modal": {
       "open": false,

diff --git a/development/ts-migration-dashboard/files-to-convert.json b/development/ts-migration-dashboard/files-to-convert.json
@@ -896,7 +896,6 @@
   "ui/components/ui/icon/icon-eye.js",
   "ui/components/ui/icon/icon-import.js",
   "ui/components/ui/icon/icon-plus.js",
-  "ui/components/ui/icon/icon-speech-bubbles.js",
   "ui/components/ui/icon/icon-token-search.js",
   "ui/components/ui/icon/icon.stories.js",
   "ui/components/ui/icon/info-icon-inverted.component.js",

diff --git a/package.json b/package.json
@@ -407,6 +407,7 @@
     "@types/react": "^16.9.53",
     "@types/react-dom": "^17.0.11",
     "@types/remote-redux-devtools": "^0.5.5",
+    "@types/w3c-web-hid": "^1.0.3",
     "@types/watchify": "^3.11.1",
     "@types/yargs": "^17.0.8",
     "@typescript-eslint/eslint-plugin": "^5.30.7",

diff --git a/types/global.d.ts b/types/global.d.ts
@@ -0,0 +1,12 @@
+// In order for variables to be considered on the global scope they must be
+// declared using var and not const or let, which is why this rule is disabled
+/* eslint-disable no-var */
+
+declare class Platform {
+  openTab: (opts: { url: string }) => void;
+
+  closeCurrentWindow: () => void;
+}
+export declare global {
+  var platform: Platform;
+}
diff --git a/ui/components/app/account-menu/account-menu.component.js b/ui/components/app/account-menu/account-menu.component.js
@@ -32,7 +32,6 @@ import {
 } from '../../../helpers/constants/routes';
 import TextField from '../../ui/text-field';
 import IconCheck from '../../ui/icon/icon-check';
-import IconSpeechBubbles from '../../ui/icon/icon-speech-bubbles';
 import IconConnect from '../../ui/icon/icon-connect';
 import IconCog from '../../ui/icon/icon-cog';
 import IconPlus from '../../ui/icon/icon-plus';
@@ -41,6 +40,8 @@ import IconImport from '../../ui/icon/icon-import';
 import Button from '../../ui/button';
 import SearchIcon from '../../ui/icon/search-icon';
 import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
+import { Icon, ICON_NAMES } from '../../component-library';
+import { Color } from '../../../helpers/constants/design-system';
 import KeyRingLabel from './keyring-label';
 
 export function AccountMenuItem(props) {
@@ -460,10 +461,7 @@ export default class AccountMenu extends Component {
             global.platform.openTab({ url: supportLink });
           }}
           icon={
-            <IconSpeechBubbles
-              color="var(--color-icon-alternative)"
-              ariaLabel={supportText}
-            />
+            <Icon name={ICON_NAMES.MESSAGES} color={Color.iconAlternative} />
           }
           text={supportText}
         />

diff --git a/ui/components/app/approve-content-card/approve-content-card.js b/ui/components/app/approve-content-card/approve-content-card.js
@@ -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,
 };
diff --git a/ui/components/app/flask/copyable/copyable.js b/ui/components/app/flask/copyable/copyable.js
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../../../ui/box';
-import IconCopied from '../../../ui/icon/icon-copied';
-import IconCopy from '../../../ui/icon/icon-copy';
 import Typography from '../../../ui/typography';
 import {
   AlignItems,
@@ -13,8 +11,10 @@ import {
   TypographyVariant,
   BackgroundColor,
   TextColor,
+  Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
+import { Icon, ICON_NAMES, ICON_SIZES } from '../../../component-library';
 
 export const Copyable = ({ text }) => {
   const [copied, handleCopy] = useCopyToClipboard();
@@ -46,17 +46,17 @@ export const Copyable = ({ text }) => {
         marginBottom={1}
       >
         {copied ? (
-          <IconCopied
-            color="var(--color-icon-alternative)"
-            className="copyable__icon"
-            size={18}
+          <Icon
+            name={ICON_NAMES.COPY_SUCCESS}
+            size={ICON_SIZES.LG}
+            color={Color.iconAlternative}
           />
         ) : (
-          <IconCopy
-            className="copyable__icon"
-            color="var(--color-icon-alternative)"
+          <Icon
+            name={ICON_NAMES.COPY}
+            size={ICON_SIZES.LG}
+            color={Color.iconAlternative}
             onClick={() => handleCopy(text)}
-            size={18}
           />
         )}
       </Box>

diff --git a/ui/components/app/gas-timing/gas-timing.component.test.js b/ui/components/app/gas-timing/gas-timing.component.test.js
@@ -8,7 +8,7 @@ import mockState from '../../../../test/data/mock-state.json';
 
 import GasTiming from '.';
 
-jest.mock('../../../store/actions.js', () => ({
+jest.mock('../../../store/actions.ts', () => ({
   getGasFeeTimeEstimate: jest.fn().mockImplementation(() => Promise.resolve()),
 }));
 

diff --git a/ui/components/app/import-token-link/import-token-link.test.js b/ui/components/app/import-token-link/import-token-link.test.js
@@ -18,7 +18,7 @@ jest.mock('react-router-dom', () => {
   };
 });
 
-jest.mock('../../../store/actions.js', () => ({
+jest.mock('../../../store/actions.ts', () => ({
   detectNewTokens: jest.fn(),
 }));
 

diff --git a/ui/components/app/modals/account-details-modal/account-details-modal.test.js b/ui/components/app/modals/account-details-modal/account-details-modal.test.js
@@ -12,7 +12,7 @@ import AccountDetailsModal from '.';
 
 const mockShowModal = jest.fn();
 
-jest.mock('../../../../store/actions.js', () => {
+jest.mock('../../../../store/actions.ts', () => {
   return {
     showModal: () => mockShowModal,
   };

diff --git a/ui/components/app/modals/cancel-transaction/cancel-transaction.component.test.js b/ui/components/app/modals/cancel-transaction/cancel-transaction.component.test.js
@@ -14,7 +14,7 @@ const mockCreateCancelTransaction = jest.fn();
 const mockShowModal = jest.fn();
 const mockHideModal = jest.fn();
 
-jest.mock('../../../../store/actions.js', () => {
+jest.mock('../../../../store/actions.ts', () => {
   return {
     createCancelTransaction: () => mockCreateCancelTransaction,
     showModal: () => mockShowModal,

diff --git a/ui/components/app/modals/contract-details-modal/contract-details-modal.js b/ui/components/app/modals/contract-details-modal/contract-details-modal.js
@@ -4,7 +4,6 @@ import { getAccountLink } from '@metamask/etherscan-link';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
 import Box from '../../../ui/box';
-import IconCopy from '../../../ui/icon/icon-copy';
 import IconBlockExplorer from '../../../ui/icon/icon-block-explorer';
 import Button from '../../../ui/button/button.component';
 import Tooltip from '../../../ui/tooltip/tooltip';
@@ -22,12 +21,14 @@ import {
   BorderStyle,
   BorderColor,
   TextColor,
+  Color,
 } from '../../../../helpers/constants/design-system';
 import { useCopyToClipboard } from '../../../../hooks/useCopyToClipboard';
 import UrlIcon from '../../../ui/url-icon/url-icon';
 import { getAddressBookEntry } from '../../../../selectors';
 import { TokenStandard } from '../../../../../shared/constants/transaction';
 import NftCollectionImage from '../../../ui/nft-collection-image/nft-collection-image';
+import { ButtonIcon, ICON_NAMES } from '../../../component-library';
 
 export default function ContractDetailsModal({
   onClose,
@@ -146,15 +147,15 @@ export default function ContractDetailsModal({
                         : t('copyToClipboard')
                     }
                   >
-                    <Button
-                      className="contract-details-modal__content__contract__buttons__copy"
-                      type="link"
-                      onClick={() => {
-                        handleCopyTokenAddress(tokenAddress);
-                      }}
-                    >
-                      <IconCopy color="var(--color-icon-muted)" />
-                    </Button>
+                    <ButtonIcon
+                      iconName={
+                        copiedTokenAddress
+                          ? ICON_NAMES.COPY_SUCCESS
+                          : ICON_NAMES.COPY
+                      }
+                      onClick={() => handleCopyTokenAddress(tokenAddress)}
+                      color={Color.iconMuted}
+                    />
                   </Tooltip>
                 </Box>
                 <Box marginTop={5} marginRight={5}>
@@ -264,15 +265,13 @@ export default function ContractDetailsModal({
                     : t('copyToClipboard')
                 }
               >
-                <Button
-                  className="contract-details-modal__content__contract__buttons__copy"
-                  type="link"
-                  onClick={() => {
-                    handleCopyToAddress(toAddress);
-                  }}
-                >
-                  <IconCopy color="var(--color-icon-muted)" />
-                </Button>
+                <ButtonIcon
+                  iconName={
+                    copiedToAddress ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+                  }
+                  onClick={() => handleCopyToAddress(toAddress)}
+                  color={Color.iconMuted}
+                />
               </Tooltip>
             </Box>
             <Box marginTop={5} marginRight={5}>

diff --git a/...ponents/app/transaction-list-item-details/transaction-list-item-details.component.test.js b/...ponents/app/transaction-list-item-details/transaction-list-item-details.component.test.js
@@ -7,7 +7,7 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import mockState from '../../../../test/data/mock-state.json';
 import TransactionListItemDetails from '.';
 
-jest.mock('../../../store/actions.js', () => ({
+jest.mock('../../../store/actions.ts', () => ({
   tryReverseResolveAddress: () => jest.fn(),
   getGasFeeEstimatesAndStartPolling: jest.fn().mockResolvedValue(),
   addPollingTokenToAppState: jest.fn(),

diff --git a/ui/components/ui/contract-token-values/contract-token-values.js b/ui/components/ui/contract-token-values/contract-token-values.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getAccountLink } from '@metamask/etherscan-link';
-import IconCopy from '../icon/icon-copy';
 import IconBlockExplorer from '../icon/icon-block-explorer';
 import Box from '../box/box';
 import Tooltip from '../tooltip/tooltip';
@@ -18,6 +17,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import Button from '../button';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
 
 export default function ContractTokenValues({
   address,
@@ -52,15 +52,11 @@ export default function ContractTokenValues({
           position="top"
           title={copied ? t('copiedExclamation') : t('copyToClipboard')}
         >
-          <Button
-            type="link"
+          <ButtonIcon
+            iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY}
             className="contract-token-values__copy-address__button"
-            onClick={() => {
-              handleCopy(address);
-            }}
-          >
-            <IconCopy size={24} color="var(--color-icon-muted)" />
-          </Button>
+            onClick={() => handleCopy(address)}
+          />
         </Tooltip>
       </Box>
       <Box className="contract-token-values__block-explorer">

diff --git a/ui/components/ui/icon/README.mdx b/ui/components/ui/icon/README.mdx
@@ -11,7 +11,6 @@ import SendIcon from './send-icon.component';
 import Sign from './sign-icon.component';
 import SunCheck from './sun-check-icon.component';
 import Swap from './swap-icon-for-list.component';
-import IconCopy from './icon-copy'
 import IconBlockExplorer from './icon-block-explorer';
 
 
@@ -182,14 +181,6 @@ Use the `className` prop to add an additional class to the icon. This additional
 
 <ArgsTable of={Preloader} />
 
-## IconCopy
-
-<Canvas>
-  <Story id="components-ui-icon--icon-copy-story" />
-</Canvas>
-
-<ArgsTable of={IconCopy} />
-
 ## IconBlockExplorer
 
 <Canvas>

diff --git a/ui/components/ui/icon/icon-copied.js b/ui/components/ui/icon/icon-copied.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ jest.mock('react-router-dom', () => { @@
       };
     });
-    jest.mock('../../../store/actions.js', () => ({
+    jest.mock('../../../store/actions.ts', () => ({
       detectNewTokens: jest.fn(),
     }));
@@ Expand Down @@