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:
parent
b5184db620
commit
9f89d71c6f
@ -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>
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -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',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user