1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-29 23:58:06 +01:00
metamask-extension/ui/components/institutional/compliance-settings/compliance-settings.js
António Regadas 9f89d71c6f
[MMI] compliance settings component (#18274)
* MMI-2657 adds the compliance settings screen

* MMI-2657 adds stories file

* review fixes

* review fixes

* lint fix

* clean up

* Update ui/components/institutional/compliance-settings/compliance-settings.stories.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* lint fix

* snaps update

* Button update

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>
2023-03-30 12:40:37 +02:00

115 lines
3.0 KiB
JavaScript

import React, { useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import {
JustifyContent,
DISPLAY,
TextColor,
FLEX_DIRECTION,
TextVariant,
BorderStyle,
BorderColor,
} from '../../../helpers/constants/design-system';
import { I18nContext } from '../../../contexts/i18n';
import { mmiActionsFactory } from '../../../store/institutional/institution-background';
import {
Text,
Button,
BUTTON_TYPES,
BUTTON_SIZES,
} from '../../component-library';
import Box from '../../ui/box';
const ComplianceSettings = () => {
const t = useContext(I18nContext);
const dispatch = useDispatch();
const mmiActions = mmiActionsFactory();
const complianceActivated = useSelector((state) =>
Boolean(state.metamask.institutionalFeatures?.complianceProjectId),
);
const linkButton = (
<Button
type={BUTTON_TYPES.LINK}
size={BUTTON_SIZES.LG}
data-testid="start-compliance"
onClick={() => {
global.platform.openTab({
url: 'https://start.compliance.codefi.network/',
});
}}
>
{t('openCodefiCompliance')}
</Button>
);
return complianceActivated ? (
<Box>
<Text
variant={TextVariant.bodySm}
as="h6"
className="institutional-feature__content"
>
{t('complianceSettingsExplanation')}
</Text>
<Box
padding={[4, 6]}
borderWidth={1}
borderStyle={BorderStyle.solid}
borderColor={BorderColor.borderMuted}
className="institutional-feature__footer"
>
<Button
size={BUTTON_SIZES.LG}
onClick={() => {
dispatch(mmiActions.deleteComplianceAuthData());
}}
data-testid="disconnect-compliance"
>
{t('disconnect')}
</Button>
{linkButton}
</Box>
</Box>
) : (
<Box
padding={[0, 6]}
color={TextColor.textAlternative}
data-testid="institutional-content"
>
<Box
variant={TextVariant.bodySm}
className="institutional-feature__content"
>
<Text paddingBottom={3}>{t('complianceBlurb0')}</Text>
<Text paddingBottom={3}>{t('complianceBlurb1')}</Text>
<Text paddingBottom={3}>{t('complianceBlurpStep0')}</Text>
<ol>
<li>{t('complianceBlurbStep1')}</li>
<li>{t('complianceBlurbStep2')}</li>
<li>{t('complianceBlurbStep3')}</li>
<li>{t('complianceBlurbStep4')}</li>
<li>{t('complianceBlurbStep5')}</li>
</ol>
</Box>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JustifyContent.center}
>
<Box
padding={[4, 6]}
borderWidth={1}
borderStyle={BorderStyle.solid}
borderColor={BorderColor.borderMuted}
className="institutional-feature__footer"
>
{linkButton}
</Box>
</Box>
</Box>
);
};
export default ComplianceSettings;