diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 1fae0fd7f..bb7176cbb 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -358,6 +358,9 @@ "message": "Allow $1 to withdraw and spend up to the following amount:", "description": "The url of the site that requested permission to 'withdraw and spend'" }, + "amlCompliance": { + "message": "AML/CFT Compliance" + }, "amount": { "message": "Amount" }, diff --git a/ui/components/institutional/compliance-details-modal/compliance-details-modal.js b/ui/components/institutional/compliance-details-modal/compliance-details-modal.js new file mode 100644 index 000000000..929321f9e --- /dev/null +++ b/ui/components/institutional/compliance-details-modal/compliance-details-modal.js @@ -0,0 +1,36 @@ +import PropTypes from 'prop-types'; +import React, { useContext } from 'react'; +import { useDispatch } from 'react-redux'; +import Modal from '../../app/modal'; +import { hideModal } from '../../../store/actions'; +import ComplianceDetails from '../compliance-details'; +import { I18nContext } from '../../../contexts/i18n'; + +export default function ComplianceDetailsModal({ + onGenerateComplianceReport, + reportAddress, +}) { + const dispatch = useDispatch(); + const handleClose = () => dispatch(hideModal); + const t = useContext(I18nContext); + + return ( + + + + ); +} + +ComplianceDetailsModal.propTypes = { + reportAddress: PropTypes.func.isRequired, + onGenerateComplianceReport: PropTypes.func.isRequired, +}; diff --git a/ui/components/institutional/compliance-details-modal/compliance-details-modal.test.js b/ui/components/institutional/compliance-details-modal/compliance-details-modal.test.js new file mode 100644 index 000000000..ddf7a338a --- /dev/null +++ b/ui/components/institutional/compliance-details-modal/compliance-details-modal.test.js @@ -0,0 +1,31 @@ +import React from 'react'; +import { renderWithProvider } from '../../../../test/jest'; +import configureStore from '../../../store/store'; +import mockState from '../../../../test/data/mock-state.json'; +import ComplianceDetailsModal from './compliance-details-modal'; + +const props = { + hideModal: jest.fn(), + onGenerateComplianceReport: jest.fn(), + reportAddress: '0xAddress', +}; + +const render = () => { + const store = configureStore({ + ...mockState, + metamask: {}, + history: { + mostRecentOverviewPage: 'test', + }, + }); + + return renderWithProvider(, store); +}; + +describe('Compliance Modal', function () { + it('render correctly with the correct header', function () { + const { getByText } = render(); + + expect(getByText('AML/CFT Compliance')).toBeVisible(); + }); +}); diff --git a/ui/components/institutional/compliance-details-modal/index.js b/ui/components/institutional/compliance-details-modal/index.js new file mode 100644 index 000000000..40956b073 --- /dev/null +++ b/ui/components/institutional/compliance-details-modal/index.js @@ -0,0 +1 @@ +export { default } from './compliance-details-modal'; diff --git a/ui/components/institutional/compliance-details-modal/index.scss b/ui/components/institutional/compliance-details-modal/index.scss new file mode 100644 index 000000000..38660498a --- /dev/null +++ b/ui/components/institutional/compliance-details-modal/index.scss @@ -0,0 +1,3 @@ +.compliance-details-modal-content { + padding: 0; +} diff --git a/ui/ducks/institutional/institutional.js b/ui/ducks/institutional/institutional.js index dad39f6b4..c0f5c3c52 100644 --- a/ui/ducks/institutional/institutional.js +++ b/ui/ducks/institutional/institutional.js @@ -29,19 +29,19 @@ const { actions, reducer } = slice; export default reducer; export const getComplianceProjectId = (state) => - state.metamask[name].complianceProjectId; + state.metamask[name]?.complianceProjectId; export const getComplianceClientId = (state) => - state.metamask[name].complianceClientId; + state.metamask[name]?.complianceClientId; export const getComplianceTenantSubdomain = (state) => - state.metamask[name].complianceTenantSubdomain; + state.metamask[name]?.complianceTenantSubdomain; export const getComplianceHistoricalReports = (state) => - state.metamask[name].historicalReports; + state.metamask[name]?.historicalReports; export const getComplianceReportsInProgress = (state) => - state.metamask[name].reportsInProgress; + state.metamask[name]?.reportsInProgress; export const getInstitutionalConnectRequests = (state) => - state.metamask[name].connectRequests; + state.metamask[name]?.connectRequests; export const complianceActivated = (state) => - Boolean(state.metamask[name].complianceProjectId); + Boolean(state.metamask[name]?.complianceProjectId); export const getComplianceHistoricalReportsByAddress = (address) => createSelector(getComplianceHistoricalReports, (reports) =>