1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

[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>
This commit is contained in:
António Regadas 2023-03-30 11:40:37 +01:00 committed by GitHub
parent b5184db620
commit 9f89d71c6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 75 additions and 74 deletions

View File

@ -5,31 +5,27 @@ exports[`Compliance Settings shows disconnect when Compliance is activated 1`] =
<div <div
class="box box--flex-direction-row" class="box box--flex-direction-row"
> >
<div <h6
class="box institutional-feature__content box--flex-direction-row" class="box mm-text institutional-feature__content mm-text--body-sm box--flex-direction-row box--color-text-default"
> >
Change your settings or view reports by opening up Codefi Compliance or disconnect below. Change your settings or view reports by opening up Codefi Compliance or disconnect below.
</div> </h6>
<footer <div
class="institutional-feature__footer" class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
> >
<button <button
class="button btn--rounded btn-default btn--large" class="box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md box--padding-right-4 box--padding-left-4 box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-inverse box--background-color-primary-default box--rounded-pill"
data-testid="disconnect-compliance" data-testid="disconnect-compliance"
role="button"
tabindex="0"
> >
Disconnect Disconnect
</button> </button>
<button <button
class="button btn--rounded btn-primary" class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="start-compliance" data-testid="start-compliance"
role="button"
tabindex="0"
> >
Open Codefi Compliance Open Codefi Compliance
</button> </button>
</footer> </div>
</div> </div>
</div> </div>
`; `;
@ -42,6 +38,7 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
> >
<div <div
class="box institutional-feature__content box--flex-direction-row" class="box institutional-feature__content box--flex-direction-row"
variant="body-sm"
> >
<p <p
class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default" class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-default"
@ -79,19 +76,16 @@ exports[`Compliance Settings shows start btn when Compliance its not activated 1
<div <div
class="box box--display-flex box--flex-direction-row box--justify-content-center" class="box box--display-flex box--flex-direction-row box--justify-content-center"
> >
<footer <div
class="institutional-feature__footer" class="box institutional-feature__footer box--padding-4 box--sm:padding-6 box--flex-direction-row box--border-style-solid box--border-color-border-muted box--border-width-1"
padding="4,6"
> >
<button <button
class="button btn--rounded btn-primary" class="box mm-text mm-button-base mm-button-base--size-lg mm-button-link mm-text--body-md box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-primary-default box--background-color-transparent"
data-testid="start-compliance" data-testid="start-compliance"
role="button"
tabindex="0"
> >
Open Codefi Compliance Open Codefi Compliance
</button> </button>
</footer> </div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -5,12 +5,19 @@ import {
DISPLAY, DISPLAY,
TextColor, TextColor,
FLEX_DIRECTION, FLEX_DIRECTION,
TextVariant,
BorderStyle,
BorderColor,
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import { mmiActionsFactory } from '../../../store/institutional/institution-background'; import { mmiActionsFactory } from '../../../store/institutional/institution-background';
import { Text } from '../../component-library'; import {
Text,
Button,
BUTTON_TYPES,
BUTTON_SIZES,
} from '../../component-library';
import Box from '../../ui/box'; import Box from '../../ui/box';
import Button from '../../ui/button';
const ComplianceSettings = () => { const ComplianceSettings = () => {
const t = useContext(I18nContext); const t = useContext(I18nContext);
@ -21,48 +28,48 @@ const ComplianceSettings = () => {
Boolean(state.metamask.institutionalFeatures?.complianceProjectId), Boolean(state.metamask.institutionalFeatures?.complianceProjectId),
); );
const disconnectFromCompliance = async () => { const linkButton = (
await dispatch(mmiActions.deleteComplianceAuthData()); <Button
}; type={BUTTON_TYPES.LINK}
size={BUTTON_SIZES.LG}
const renderDisconnect = () => { data-testid="start-compliance"
return ( onClick={() => {
<Button global.platform.openTab({
type="default" url: 'https://start.compliance.codefi.network/',
large });
onClick={disconnectFromCompliance} }}
data-testid="disconnect-compliance" >
> {t('openCodefiCompliance')}
{t('disconnect')} </Button>
</Button> );
);
};
const renderLinkButton = () => {
return (
<Button
type="primary"
data-testid="start-compliance"
onClick={() => {
global.platform.openTab({
url: 'https://start.compliance.codefi.network/',
});
}}
>
{t('openCodefiCompliance')}
</Button>
);
};
return complianceActivated ? ( return complianceActivated ? (
<Box> <Box>
<Box className="institutional-feature__content"> <Text
variant={TextVariant.bodySm}
as="h6"
className="institutional-feature__content"
>
{t('complianceSettingsExplanation')} {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>
<footer className="institutional-feature__footer">
{renderDisconnect()}
{renderLinkButton()}
</footer>
</Box> </Box>
) : ( ) : (
<Box <Box
@ -70,7 +77,10 @@ const ComplianceSettings = () => {
color={TextColor.textAlternative} color={TextColor.textAlternative}
data-testid="institutional-content" data-testid="institutional-content"
> >
<Box className="institutional-feature__content"> <Box
variant={TextVariant.bodySm}
className="institutional-feature__content"
>
<Text paddingBottom={3}>{t('complianceBlurb0')}</Text> <Text paddingBottom={3}>{t('complianceBlurb0')}</Text>
<Text paddingBottom={3}>{t('complianceBlurb1')}</Text> <Text paddingBottom={3}>{t('complianceBlurb1')}</Text>
<Text paddingBottom={3}>{t('complianceBlurpStep0')}</Text> <Text paddingBottom={3}>{t('complianceBlurpStep0')}</Text>
@ -87,9 +97,15 @@ const ComplianceSettings = () => {
flexDirection={FLEX_DIRECTION.ROW} flexDirection={FLEX_DIRECTION.ROW}
justifyContent={JustifyContent.center} justifyContent={JustifyContent.center}
> >
<footer padding={[4, 6]} className="institutional-feature__footer"> <Box
{renderLinkButton()} padding={[4, 6]}
</footer> borderWidth={1}
borderStyle={BorderStyle.solid}
borderColor={BorderColor.borderMuted}
className="institutional-feature__footer"
>
{linkButton}
</Box>
</Box> </Box>
</Box> </Box>
); );

View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { action } from '@storybook/addon-actions';
import configureStore from '../../../store/store'; import configureStore from '../../../store/store';
import testData from '../../../../.storybook/test-data'; import testData from '../../../../.storybook/test-data';
import ComplianceSettings from '.'; import ComplianceSettings from '.';
@ -23,9 +22,9 @@ export default {
title: 'Components/Institutional/ComplianceSettings', title: 'Components/Institutional/ComplianceSettings',
decorators: [(story) => <Provider store={store}>{story()}</Provider>], decorators: [(story) => <Provider store={store}>{story()}</Provider>],
component: ComplianceSettings, component: ComplianceSettings,
args: { argTypes: {
onClick: () => { onClick: {
action('onClick'); action: 'onClick',
}, },
}, },
}; };

View File

@ -1,9 +1,5 @@
.institutional-feature { .institutional-feature {
&__footer { &__footer {
border-top: 1px solid var(--color-text-muted);
padding: 16px 30px;
flex: 0 0 auto;
button { button {
min-width: 0; min-width: 0;
margin-right: 16px; margin-right: 16px;
@ -15,10 +11,6 @@
} }
&__content { &__content {
@include H6;
line-height: 22px;
ol { ol {
list-style: decimal; list-style: decimal;
list-style-position: inside; list-style-position: inside;