Extract out confirm-data and confirm-hex-data components from confirm…

…-transaction-base.component.js (#17822)

test/e2e/metamask-ui.spec.js

@@ -308,29 +308,21 @@ describe('MetaMask', function () {
       await driver.clickElement({ text: 'Hex', tag: 'button' });
       await driver.delay(regularDelayMs);
 
-      const functionType = await driver.findElement(
-        '.confirm-page-container-content__function-type',
-      );
-      const functionTypeText = await functionType.getText();
-      assert(functionTypeText.match('Transfer'));
+      await driver.findElement({
+        tag: 'span',
+        text: 'Transfer',
+      });
 
       const tokenAmount = await driver.findElement(
         '.confirm-page-container-summary__title-text',
       );
       const tokenAmountText = await tokenAmount.getText();
       assert.equal(tokenAmountText, '1 TST');
 
-      const confirmDataDiv = await driver.findElement(
-        '.confirm-page-container-content__data-box',
-      );
-      const confirmDataText = await confirmDataDiv.getText();
-
-      await driver.delay(regularDelayMs);
-      assert(
-        confirmDataText.match(
-          /0xa9059cbb0000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c97/u,
-        ),
-      );
+      await driver.waitForSelector({
+        tag: 'p',
+        text: '0xa9059cbb0000000000000000000000002f318c334780961fb129d2a6c30d0763d9a5c97',
+      });
 
       await driver.clickElement({ text: 'Details', tag: 'button' });
       await driver.delay(regularDelayMs);

test/lib/render-helpers.js

@@ -1,10 +1,12 @@
 import React, { useMemo, useState } from 'react';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import userEvent from '@testing-library/user-event';
 import { Router } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { createMemoryHistory } from 'history';
+import configureStore from '../../ui/store/store';
 import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
 import { LegacyMetaMetricsProvider } from '../../ui/contexts/metametrics';
 import { getMessage } from '../../ui/helpers/utils/i18n-helper';
@@ -35,7 +37,7 @@ I18nProvider.defaultProps = {
   children: undefined,
 };
 
-export function renderWithProvider(component, store, pathname = '/') {
+const createProviderWrapper = (store, pathname = '/') => {
   const history = createMemoryHistory({ initialEntries: [pathname] });
   const Wrapper = ({ children }) =>
     store ? (
@@ -59,12 +61,29 @@ export function renderWithProvider(component, store, pathname = '/') {
   Wrapper.propTypes = {
     children: PropTypes.node,
   };
+  return {
+    Wrapper,
+    history,
+  };
+};
+
+export function renderWithProvider(component, store, pathname = '/') {
+  const { history, Wrapper } = createProviderWrapper(store, pathname);
   return {
     ...render(component, { wrapper: Wrapper }),
     history,
   };
 }
 
+export function renderHookWithProvider(hook, state, pathname = '/') {
+  const store = state ? configureStore(state) : undefined;
+  const { history, Wrapper } = createProviderWrapper(store, pathname);
+  return {
+    ...renderHook(hook, { wrapper: Wrapper }),
+    history,
+  };
+}
+
 export function renderWithLocalization(component) {
   const Wrapper = ({ children }) => (
     <I18nProvider currentLocale="en" current={en} en={en}>

ui/components/app/app-components.scss

@@ -12,6 +12,7 @@
 @import 'beta-header/index';
 @import 'cancel-speedup-popover/index';
 @import 'confirm-page-container/index';
+@import 'confirm-data/index';
 @import 'confirmation-warning-modal/index';
 @import 'nfts-items/index';
 @import 'nfts-tab/index';

ui/components/app/confirm-data/README.mdx

@@ -0,0 +1,10 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { ConfirmData } from '.';
+
+# Confirm Data
+
+Confirm Data is used on confirmation screen to display transaction data.
+
+<Canvas>
+  <Story id="components-app-ConfirmData--default-story" />
+</Canvas>

ui/components/app/confirm-data/confirm-data.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+
+import {
+  Color,
+  TextVariant,
+  TEXT_TRANSFORM,
+} from '../../../helpers/constants/design-system';
+import { getKnownMethodData } from '../../../selectors';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { useTransactionFunctionType } from '../../../hooks/useTransactionFunctionType';
+
+import Box from '../../ui/box/box';
+import Disclosure from '../../ui/disclosure';
+import TransactionDecoding from '../transaction-decoding';
+import { Text } from '../../component-library';
+
+const ConfirmData = ({ txData, dataComponent }) => {
+  const t = useI18nContext();
+  const { txParams = {} } = txData;
+  const methodData = useSelector(
+    (state) => getKnownMethodData(state, txParams.data) || {},
+  );
+  const { functionType } = useTransactionFunctionType(txData);
+
+  if (dataComponent) {
+    return dataComponent;
+  }
+
+  if (!txParams.data) {
+    return null;
+  }
+
+  const { params } = methodData;
+  const functionParams = params?.length
+    ? `(${params.map(({ type }) => type).join(', ')})`
+    : '';
+
+  return (
+    <Box color={Color.textAlternative} className="confirm-data" padding={4}>
+      <Box paddingBottom={3} paddingTop={2}>
+        <Text
+          as="span"
+          textTransform={TEXT_TRANSFORM.UPPERCASE}
+          variant={TextVariant.bodySm}
+        >
+          {`${t('functionType')}:`}
+        </Text>
+        <Text
+          as="span"
+          color={Color.textDefault}
+          paddingLeft={1}
+          textTransform={TEXT_TRANSFORM.CAPITALIZE}
+          variant={TextVariant.bodySmBold}
+        >
+          {`${functionType} ${functionParams}`}
+        </Text>
+      </Box>
+      <Disclosure>
+        <TransactionDecoding to={txParams?.to} inputData={txParams?.data} />
+      </Disclosure>
+    </Box>
+  );
+};
+
+ConfirmData.propTypes = {
+  txData: PropTypes.object,
+  dataComponent: PropTypes.element,
+};
+
+export default ConfirmData;

ui/components/app/confirm-data/confirm-data.stories.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import README from './README.mdx';
+import ConfirmData from './confirm-data';
+
+export default {
+  title: 'Components/App/ConfirmData',
+
+  component: ConfirmData,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argTypes: {
+    txData: {
+      control: 'object',
+    },
+    dataHexComponent: {
+      control: 'element',
+    },
+  },
+  args: {
+    txData: {
+      txParams: {
+        data: '0xa9059cbb000000000000000000000000b19ac54efa18cc3a14a5b821bfec73d284bf0c5e0000000000000000000000000000000000000000000000003782dace9d900000',
+      },
+      origin: 'https://metamask.github.io',
+      type: 'transfer',
+    },
+  },
+};
+
+export const DefaultStory = (args) => {
+  return <ConfirmData {...args} />;
+};
+
+DefaultStory.storyName = 'Default';
+
+export const DataComponentStory = (args) => {
+  return <ConfirmData {...args} />;
+};
+
+DataComponentStory.storyName = 'DataComponent';
+DataComponentStory.args = {
+  dataComponent: <div>Any custom component passed in props</div>,
+};

ui/components/app/confirm-data/confirm-data.test.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import mockState from '../../../../test/data/mock-state.json';
+import { renderWithProvider } from '../../../../test/jest';
+
+import configureStore from '../../../store/store';
+import ConfirmData from './confirm-data';
+
+jest.mock('../../../../shared/lib/fetch-with-cache');
+
+describe('ConfirmData', () => {
+  const store = configureStore(mockState);
+
+  it('should render function type', async () => {
+    const { findByText } = renderWithProvider(
+      <ConfirmData
+        txData={{
+          txParams: {
+            data: '0x608060405234801',
+          },
+          origin: 'https://metamask.github.io',
+          type: 'transfer',
+        }}
+      />,
+      store,
+    );
+    expect(await findByText('Transfer')).toBeInTheDocument();
+  });
+
+  it('should return null if transaction has no data', () => {
+    const { container } = renderWithProvider(
+      <ConfirmData
+        txData={{
+          txParams: {},
+          origin: 'https://metamask.github.io',
+          type: 'transfer',
+        }}
+      />,
+      store,
+    );
+    expect(container.firstChild).toStrictEqual(null);
+  });
+
+  it('should render dataComponent if passed', () => {
+    const { getByText } = renderWithProvider(
+      <ConfirmData
+        txData={{
+          txParams: {},
+          origin: 'https://metamask.github.io',
+          type: 'transfer',
+        }}
+        dataComponent={<span>Data Component</span>}
+      />,
+      store,
+    );
+    expect(getByText('Data Component')).toBeInTheDocument();
+  });
+});

ui/components/app/confirm-data/index.js

@@ -0,0 +1 @@
+export { default as ConfirmData } from './confirm-data';

ui/components/app/confirm-data/index.scss

@@ -0,0 +1,5 @@
+.confirm-data {
+  & > .disclosure {
+    margin-top: 0;
+  }
+}

ui/components/app/confirm-hexdata/README.mdx

@@ -0,0 +1,10 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { ConfirmHexData } from '.';
+
+# Confirm Data
+
+Confirm Hex Data is used on confirmation screen to display transaction data.
+
+<Canvas>
+  <Story id="components-app-ConfirmHexData--default-story" />
+</Canvas>