Merge branch 'develop' into 17191/onboarding-unit-tests

development/states/navigate-txs.json

@@ -1,6 +1,5 @@
 {
   "appState": {
-    "shouldClose": false,
     "menuOpen": false,
     "modal": {
       "open": false,

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",

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;
+}

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,
 };

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()),
 }));
 

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(),
 }));
 

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,
   };

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,

ui/components/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(),

ui/ducks/app/app.test.js

@@ -42,7 +42,7 @@ describe('App State', () => {
   it('opens alert', () => {
     const state = reduceApp(metamaskState, {
       type: actions.ALERT_OPEN,
-      value: 'test message',
+      payload: 'test message',
     });
 
     expect(state.alertOpen).toStrictEqual(true);
@@ -243,7 +243,7 @@ describe('App State', () => {
     };
     const state = reduceApp(metamaskState, {
       type: actions.SET_HARDWARE_WALLET_DEFAULT_HD_PATH,
-      value: {
+      payload: {
         device: HardwareDeviceNames.ledger,
         path: "m/44'/60'/0'",
       },
@@ -255,7 +255,7 @@ describe('App State', () => {
   it('shows loading message', () => {
     const state = reduceApp(metamaskState, {
       type: actions.SHOW_LOADING,
-      value: 'loading',
+      payload: 'loading',
     });
 
     expect(state.isLoading).toStrictEqual(true);
@@ -276,7 +276,7 @@ describe('App State', () => {
   it('displays warning', () => {
     const state = reduceApp(metamaskState, {
       type: actions.DISPLAY_WARNING,
-      value: 'warning',
+      payload: 'warning',
     });
 
     expect(state.isLoading).toStrictEqual(false);
@@ -296,7 +296,7 @@ describe('App State', () => {
   it('shows private key', () => {
     const state = reduceApp(metamaskState, {
       type: actions.SHOW_PRIVATE_KEY,
-      value: 'private key',
+      payload: 'private key',
     });
 
     expect(state.accountDetail.privateKey).toStrictEqual('private key');
@@ -305,7 +305,7 @@ describe('App State', () => {
   it('set mouse user state', () => {
     const state = reduceApp(metamaskState, {
       type: actions.SET_MOUSE_USER_STATE,
-      value: true,
+      payload: true,
     });
 
     expect(state.isMouseUser).toStrictEqual(true);

ui/ducks/app/app.ts

@@ -159,7 +159,7 @@ export default function reduceApp(
       return {
         ...appState,
         alertOpen: true,
-        alertMessage: action.value,
+        alertMessage: action.payload,
       };
 
     case actionConstants.ALERT_CLOSE:
@@ -263,27 +263,10 @@ export default function reduceApp(
       };
 
     case actionConstants.COMPLETED_TX:
-      if (action.value.unconfirmedActionsCount > 0) {
-        return {
-          ...appState,
-          txId: null,
-          warning: null,
-        };
-      }
       return {
         ...appState,
-        // indicate notification should close
-        shouldClose: true,
         warning: null,
         txId: null,
-        accountDetail: {
-          subview: 'transactions',
-        },
-      };
-
-    case actionConstants.TRANSACTION_ERROR:
-      return {
-        ...appState,
       };
 
     case actionConstants.UNLOCK_FAILED:
@@ -299,7 +282,7 @@ export default function reduceApp(
       };
 
     case actionConstants.SET_HARDWARE_WALLET_DEFAULT_HD_PATH: {
-      const { device, path } = action.value;
+      const { device, path } = action.payload;
       const newDefaults = { ...appState.defaultHdPaths } as any;
       newDefaults[device] = path;
 
@@ -313,7 +296,7 @@ export default function reduceApp(
       return {
         ...appState,
         isLoading: true,
-        loadingMessage: action.value,
+        loadingMessage: action.payload,
       };
 
     case actionConstants.HIDE_LOADING:
@@ -325,7 +308,7 @@ export default function reduceApp(
     case actionConstants.DISPLAY_WARNING:
       return {
         ...appState,
-        warning: action.value,
+        warning: action.payload,
         isLoading: false,
       };
 
@@ -339,46 +322,44 @@ export default function reduceApp(
       return {
         ...appState,
         accountDetail: {
-          subview: 'export',
-          accountExport: 'completed',
-          privateKey: action.value,
+          privateKey: action.payload,
         },
       };
 
     case actionConstants.SET_MOUSE_USER_STATE:
       return {
         ...appState,
-        isMouseUser: action.value,
+        isMouseUser: action.payload,
       };
 
     case actionConstants.SET_SELECTED_SETTINGS_RPC_URL:
       return {
         ...appState,
-        networksTabSelectedRpcUrl: action.value,
+        networksTabSelectedRpcUrl: action.payload,
       };
 
     case actionConstants.SET_NEW_NETWORK_ADDED:
       return {
         ...appState,
-        newNetworkAdded: action.value,
+        newNetworkAdded: action.payload,
       };
 
     case actionConstants.SET_NEW_TOKENS_IMPORTED:
       return {
         ...appState,
-        newTokensImported: action.value,
+        newTokensImported: action.payload,
       };
 
     case actionConstants.SET_NEW_COLLECTIBLE_ADDED_MESSAGE:
       return {
         ...appState,
-        newCollectibleAddedMessage: action.value,
+        newCollectibleAddedMessage: action.payload,
       };
 
     case actionConstants.SET_REMOVE_COLLECTIBLE_MESSAGE:
       return {
         ...appState,
-        removeCollectibleMessage: action.value,
+        removeCollectibleMessage: action.payload,
       };
 
     case actionConstants.PORTFOLIO_TOOLTIP_WAS_SHOWN_IN_THIS_SESSION:
@@ -396,13 +377,7 @@ export default function reduceApp(
     case actionConstants.SET_OPEN_METAMASK_TAB_IDS:
       return {
         ...appState,
-        openMetaMaskTabs: action.value,
-      };
-
-    case actionConstants.SET_CURRENT_WINDOW_TAB:
-      return {
-        ...appState,
-        currentWindowTab: action.value,
+        openMetaMaskTabs: action.payload,
       };
 
     case actionConstants.HIDE_WHATS_NEW_POPUP:

ui/ducks/locale/locale.js

@@ -1,12 +1,12 @@
 import * as actionConstants from '../../store/actionConstants';
 
-export default function reduceLocaleMessages(state = {}, { type, value }) {
+export default function reduceLocaleMessages(state = {}, { type, payload }) {
   switch (type) {
     case actionConstants.SET_CURRENT_LOCALE:
       return {
         ...state,
-        current: value.messages,
-        currentLocale: value.locale,
+        current: payload.messages,
+        currentLocale: payload.locale,
       };
     default:
       return state;

ui/ducks/metamask/metamask.js

@@ -162,7 +162,7 @@ export default function reduceMetamask(state = initialState, action) {
     case actionConstants.SET_NEXT_NONCE: {
       return {
         ...metamaskState,
-        nextNonce: action.value,
+        nextNonce: action.payload,
       };
     }
 

ui/ducks/send/send.js

@@ -571,6 +571,8 @@ export const computeEstimatedGasLimit = createAsyncThunk(
  * the send slice. It returns the values that might change from this action and
  * those values are written to the slice in the `initializeSendState.fulfilled`
  * action handler.
+ *
+ * @type {import('@reduxjs/toolkit').AsyncThunk<any, { chainHasChanged: boolean }, {}>}
  */
 export const initializeSendState = createAsyncThunk(
   'send/initializeSendState',

ui/ducks/send/send.test.js

@@ -2308,7 +2308,7 @@ describe('Send Slice', () => {
             },
           };
 
-          jest.mock('../../store/actions.js');
+          jest.mock('../../store/actions.ts');
 
           const store = mockStore(tokenTransferTxState);
 
@@ -2345,7 +2345,7 @@ describe('Send Slice', () => {
           },
         };
 
-        jest.mock('../../store/actions.js');
+        jest.mock('../../store/actions.ts');
 
         const store = mockStore(editStageSignTxState);
 

ui/ducks/swaps/swaps.test.js

@@ -10,7 +10,7 @@ import swapsReducer, * as swaps from './swaps';
 
 const middleware = [thunk];
 
-jest.mock('../../store/actions.js', () => ({
+jest.mock('../../store/actions.ts', () => ({
   setSwapsLiveness: jest.fn(),
   setSwapsFeatureFlags: jest.fn(),
   fetchSmartTransactionsLiveness: jest.fn(),

ui/helpers/utils/tx-helper.ts

@@ -9,8 +9,8 @@ export default function txHelper(
   decryptMsgs: Record<string, any> | null,
   encryptionPublicKeyMsgs: Record<string, any> | null,
   typedMessages: Record<string, any> | null,
-  network: string,
-  chainId: string,
+  network?: string,
+  chainId?: string,
 ): Record<string, any> {
   log.debug('tx-helper called with params:');
   log.debug({