diff --git a/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap b/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap deleted file mode 100644 index 749964a79364..000000000000 --- a/ui/components/app/confirm/info/__snapshots__/info.test.tsx.snap +++ /dev/null @@ -1,114 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ConfirmInfo should match snapshot 1`] = ` -
-
-
-
-

- Address -

-
-
-
- -

- 0xCcCCc...ccccC -

-
-
-
-
-
-
-

- Account -

-
-
-

- $834.32 -

-

- 0.05 ETH -

-
-
-
-
-`; diff --git a/ui/components/app/confirm/info/index.ts b/ui/components/app/confirm/info/index.ts deleted file mode 100644 index e23e44f519bb..000000000000 --- a/ui/components/app/confirm/info/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ConfirmInfo } from './info'; diff --git a/ui/components/app/confirm/info/index.tsx b/ui/components/app/confirm/info/index.tsx deleted file mode 100644 index b247e432cc22..000000000000 --- a/ui/components/app/confirm/info/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './info'; diff --git a/ui/components/app/confirm/info/info.stories.tsx b/ui/components/app/confirm/info/info.stories.tsx deleted file mode 100644 index d23726f39104..000000000000 --- a/ui/components/app/confirm/info/info.stories.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import { ConfirmInfoRow } from './row'; -import { ConfirmInfo, ConfirmInfoRowConfig, ConfirmInfoRowType } from './info'; - -const mockRowConfigs: ConfirmInfoRowConfig[] = [ - { - label: 'Address', - type: ConfirmInfoRowType.Address, - rowProps: { - address: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC', - }, - }, - { - type: ConfirmInfoRowType.Divider, - }, - { - label: 'Origin', - type: ConfirmInfoRowType.UrlType, - rowProps: { - url: 'https://metamask.github.io', - }, - }, - { - label: 'Account', - type: ConfirmInfoRowType.ValueDouble, - rowProps: { - left: '$834.32', - right: '0.05 ETH', - }, - }, -]; - -const ConfirmInfoStory = { - title: 'Components/App/Confirm/Info', - component: ConfirmInfoRow, - - args: { rowConfigs: [...mockRowConfigs] }, - argTypes: { - rowConfigs: { - control: { - type: 'object', - }, - }, - }, -}; - -export const DefaultStory = (args) => ; - -DefaultStory.storyName = 'Default'; - -export default ConfirmInfoStory; diff --git a/ui/components/app/confirm/info/info.test.tsx b/ui/components/app/confirm/info/info.test.tsx deleted file mode 100644 index 113d964fd1f6..000000000000 --- a/ui/components/app/confirm/info/info.test.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import mockState from '../../../../../test/data/mock-state.json'; -import { renderWithProvider } from '../../../../../test/lib/render-helpers'; -import configureStore from '../../../../store/store'; -import { ConfirmInfo, ConfirmInfoRowConfig, ConfirmInfoRowType } from './info'; - -const mockRowConfigs: ConfirmInfoRowConfig[] = [ - { - label: 'Address', - type: ConfirmInfoRowType.Address, - rowProps: { - address: '0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC', - }, - }, - { - type: ConfirmInfoRowType.Divider, - }, - { - label: 'Account', - type: ConfirmInfoRowType.ValueDouble, - rowProps: { - left: '$834.32', - right: '0.05 ETH', - }, - }, -]; - -describe('ConfirmInfo', () => { - // TODO: Replace `any` with type - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const render = (storeOverrides: Record = {}) => { - const store = configureStore({ - ...mockState.metamask, - metamask: { ...mockState.metamask }, - ...storeOverrides, - }); - - return renderWithProvider( - , - store, - ); - }; - - it('should match snapshot', () => { - const { container } = render(mockRowConfigs); - expect(container).toMatchSnapshot(); - }); - - it('renders the correct number of rows provided', () => { - const { container } = render(mockRowConfigs); - const numOfDividers = mockRowConfigs.filter( - (rowConfig) => rowConfig.type === ConfirmInfoRowType.Divider, - ).length; - - expect(container.querySelectorAll('.confirm-info-row')).toHaveLength( - mockRowConfigs.length - numOfDividers, - ); - }); -}); diff --git a/ui/components/app/confirm/info/info.tsx b/ui/components/app/confirm/info/info.tsx deleted file mode 100644 index 9edd0a22ec49..000000000000 --- a/ui/components/app/confirm/info/info.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import React from 'react'; - -import { captureException } from '@sentry/browser'; - -import { - BackgroundColor, - BorderRadius, - Display, - FlexDirection, -} from '../../../../helpers/constants/design-system'; -import { Box } from '../../../component-library'; -import { - ConfirmInfoRow, - ConfirmInfoRowAddress, - ConfirmInfoRowAddressProps, - ConfirmInfoRowDivider, - ConfirmInfoRowProps, - ConfirmInfoRowText, - ConfirmInfoRowTextProps, - ConfirmInfoRowUrl, - ConfirmInfoRowUrlProps, - ConfirmInfoRowValueDouble, - ConfirmInfoRowValueDoubleProps, - ConfirmInfoRowVariant, -} from './row'; - -export enum ConfirmInfoRowType { - Address = 'address', - Divider = 'divider', - Text = 'text', - UrlType = 'url', - ValueDouble = 'value-double', -} - -type ConfirmInfoTypeProps = - | ConfirmInfoRowAddressProps - | ConfirmInfoRowTextProps - | ConfirmInfoRowUrlProps - | ConfirmInfoRowValueDoubleProps; - -// TODO: Replace `any` with type -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const TYPE_TO_COMPONENT: Record = { - [ConfirmInfoRowType.Address]: ({ address }: ConfirmInfoRowAddressProps) => { - return ; - }, - [ConfirmInfoRowType.Divider]: () => { - return ; - }, - [ConfirmInfoRowType.Text]: ({ text }: ConfirmInfoRowTextProps) => { - return ; - }, - [ConfirmInfoRowType.UrlType]: ({ url }: ConfirmInfoRowUrlProps) => { - return ; - }, - [ConfirmInfoRowType.ValueDouble]: ({ - left, - right, - }: ConfirmInfoRowValueDoubleProps) => { - return ; - }, -}; - -export type ConfirmInfoRowConfig = { - /** The display label text. This should be required unless it is a 'divider' variant */ - label?: ConfirmInfoRowProps['label']; - - /** Optional, and likely needed, props passed to the row */ - rowProps?: ConfirmInfoTypeProps; - - /** The type of the row e.g. address, divider, value-double */ - type: ConfirmInfoRowType; - - /** Optional row variant */ - variant?: ConfirmInfoRowVariant; -}; - -type ConfirmInfoProps = { - rowConfigs: ConfirmInfoRowConfig[]; -}; - -/** - * ConfirmInfo receives a custom config object and displays a list of ConfirmInfoRow components - * - * @param options - * @param options.rowConfigs - */ -export const ConfirmInfo: React.FC = ({ - rowConfigs = [], -}) => ( - - {rowConfigs.map((rowConfig: ConfirmInfoRowConfig, index) => { - const { label, rowProps, type, variant } = rowConfig; - const component = TYPE_TO_COMPONENT[type]; - - if (!component) { - const error = new Error(`ConfirmInfo: Unknown row type: ${type}`); - console.error(error); - captureException(error); - return null; - } - - if (type === ConfirmInfoRowType.Divider) { - const key = `confirm-info-divider-${rowConfigs - .map(({ label: _label }) => _label) - .concat('-')}-${index}`; - - return ( - - - - ); - } - - const key = `confirm-info-row-${label}-${index}`; - - return ( - - - {component(rowProps)} - - - ); - })} - -); diff --git a/ui/pages/confirmations/components/confirm/signature-message/index.ts b/ui/pages/confirmations/components/confirm/signature-message/index.ts deleted file mode 100644 index e95d7f64485a..000000000000 --- a/ui/pages/confirmations/components/confirm/signature-message/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as SignatureMessage } from './signature-message'; diff --git a/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx b/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx deleted file mode 100644 index a9741d41c1f7..000000000000 --- a/ui/pages/confirmations/components/confirm/signature-message/signature-message.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React, { memo } from 'react'; - -import { hexToText } from '../../../../../helpers/utils/util'; -import { useI18nContext } from '../../../../../hooks/useI18nContext'; -import { - ConfirmInfoRow, - ConfirmInfoRowText, -} from '../../../../../components/app/confirm/info/row'; -import { SignatureRequestType } from '../../../types/confirm'; -import { ConfirmInfoSection } from '../../../../../components/app/confirm/info/row/section'; -import { useConfirmContext } from '../../../context/confirm'; - -const SignatureMessage: React.FC = memo(() => { - const t = useI18nContext(); - const { currentConfirmation } = useConfirmContext(); - - if (!currentConfirmation?.msgParams?.data) { - return null; - } - - return ( - - - - - - ); -}); - -export default SignatureMessage;