Merge branch 'develop' into opensea_approve_fix

ui/components/institutional/compliance-modal/__snapshots__/compliance-modal.test.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComplianceModal should render the correct content 1`] = `
+<div>
+  <div
+    class="modal-container"
+  >
+    <div
+      class="modal-container__content"
+    >
+      <div
+        class="box box--flex-direction-row"
+      >
+        <header
+          class="box box--display-flex box--flex-direction-row box--justify-content-space-between"
+        >
+          <div
+            class="box box--display-flex box--flex-direction-row box--justify-content-flex-start box--align-items-center"
+          >
+            <img
+              alt="Codefi Compliance"
+              height="32"
+              src="images/compliance-logo-small.svg"
+              width="32"
+            />
+            <h4
+              class="box mm-text mm-text--body-md box--margin-left-2 box--flex-direction-row box--color-text-default"
+            >
+              [codefiCompliance]
+            </h4>
+          </div>
+          <button
+            aria-label="[close]"
+            class="box mm-button-icon mm-button-icon--size-sm box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg"
+            data-testid="compliance-modal-close"
+          >
+            <span
+              class="box mm-icon mm-icon--size-sm box--display-inline-block box--flex-direction-row box--color-inherit"
+              style="mask-image: url('./images/icons/close.svg');"
+            />
+          </button>
+        </header>
+        <p
+          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+          data-testid="compliance-info"
+        >
+          [complianceBlurb0]
+        </p>
+        <p
+          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+        >
+          [complianceBlurb1]
+        </p>
+        <p
+          class="box mm-text mm-text--body-md box--padding-bottom-3 box--flex-direction-row box--color-text-alternative"
+        >
+          [complianceBlurpStep0]
+        </p>
+        <ol
+          data-testid="compliance-bullets"
+        >
+          <li>
+            [complianceBlurbStep1]
+          </li>
+          <li>
+            [complianceBlurbStep2]
+          </li>
+          <li>
+            [complianceBlurbStep3]
+          </li>
+          <li>
+            [complianceBlurbStep4]
+          </li>
+          <li>
+            [complianceBlurbStep5]
+          </li>
+        </ol>
+      </div>
+    </div>
+    <div
+      class="modal-container__footer"
+    >
+      <button
+        class="button btn--rounded btn-primary modal-container__footer-button"
+        role="button"
+        tabindex="0"
+      >
+        [openCodefiCompliance]
+      </button>
+    </div>
+  </div>
+</div>
+`;

ui/components/institutional/compliance-modal/compliance-modal.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { hideModal } from '../../../store/actions';
+import Modal from '../../app/modal';
+import Box from '../../ui/box';
+import { Text, ButtonIcon, IconSize, IconName } from '../../component-library';
+import {
+  AlignItems,
+  JustifyContent,
+  TextColor,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
+
+const ComplianceModal = () => {
+  const dispatch = useDispatch();
+  const t = useI18nContext();
+
+  const handleSubmit = () => {
+    global.platform.openTab({
+      url: 'https://start.compliance.codefi.network/',
+    });
+  };
+
+  const handleClose = () => dispatch(hideModal());
+
+  return (
+    <Modal
+      onClose={handleClose}
+      onSubmit={handleSubmit}
+      submitText={t('openCodefiCompliance')}
+      submitType="primary"
+    >
+      <Box>
+        <Box
+          as="header"
+          display={DISPLAY.FLEX}
+          justifyContent={JustifyContent.spaceBetween}
+        >
+          <Box
+            display={DISPLAY.FLEX}
+            justifyContent={JustifyContent.flexStart}
+            alignItems={AlignItems.center}
+          >
+            <img
+              height={32}
+              width={32}
+              src="images/compliance-logo-small.svg"
+              alt="Codefi Compliance"
+            />
+            <Text as="h4" marginLeft={2} color={TextColor.textDefault}>
+              {t('codefiCompliance')}
+            </Text>
+          </Box>
+          <ButtonIcon
+            data-testid="compliance-modal-close"
+            iconName={IconName.Close}
+            size={IconSize.Sm}
+            ariaLabel={t('close')}
+            onClick={handleClose}
+          />
+        </Box>
+        <Text
+          data-testid="compliance-info"
+          paddingBottom={3}
+          color={TextColor.textAlternative}
+        >
+          {t('complianceBlurb0')}
+        </Text>
+        <Text paddingBottom={3} color={TextColor.textAlternative}>
+          {t('complianceBlurb1')}
+        </Text>
+        <Text paddingBottom={3} color={TextColor.textAlternative}>
+          {t('complianceBlurpStep0')}
+        </Text>
+        <ol data-testid="compliance-bullets">
+          <li>{t('complianceBlurbStep1')}</li>
+          <li>{t('complianceBlurbStep2')}</li>
+          <li>{t('complianceBlurbStep3')}</li>
+          <li>{t('complianceBlurbStep4')}</li>
+          <li>{t('complianceBlurbStep5')}</li>
+        </ol>
+      </Box>
+    </Modal>
+  );
+};
+
+export default ComplianceModal;

ui/components/institutional/compliance-modal/compliance-modal.scss

@@ -0,0 +1,6 @@
+.compliance-modal {
+  ol {
+    list-style: decimal;
+    list-style-position: inside;
+  }
+}

ui/components/institutional/compliance-modal/compliance-modal.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureStore from '../../../store/store';
+import testData from '../../../../.storybook/test-data';
+import ComplianceModal from '.';
+
+const store = configureStore(testData);
+
+export default {
+  title: 'Components/Institutional/ComplianceModal',
+  decorators: [(story) => <Provider store={store}>{story()}</Provider>],
+  component: ComplianceModal,
+  argTypes: {
+    onClick: {
+      action: 'onClick',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <ComplianceModal {...args} />;
+
+DefaultStory.storyName = 'ComplianceModal';

ui/components/institutional/compliance-modal/compliance-modal.test.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { useDispatch } from 'react-redux';
+import sinon from 'sinon';
+import { hideModal } from '../../../store/actions';
+import ComplianceModal from '.';
+
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn(),
+}));
+
+jest.mock('../../../store/actions', () => ({
+  hideModal: jest.fn(),
+}));
+
+describe('ComplianceModal', () => {
+  let dispatchMock;
+
+  beforeEach(() => {
+    dispatchMock = jest.fn();
+    useDispatch.mockReturnValue(dispatchMock);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should render the correct content', () => {
+    const { container, getByTestId } = render(<ComplianceModal />);
+
+    expect(getByTestId('compliance-info')).toBeInTheDocument();
+    expect(getByTestId('compliance-bullets')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('should close the modal when close button is clicked', () => {
+    const { getByTestId } = render(<ComplianceModal />);
+
+    fireEvent.click(getByTestId('compliance-modal-close'));
+
+    expect(hideModal).toHaveBeenCalled();
+    expect(dispatchMock).toHaveBeenCalledWith(hideModal());
+  });
+
+  it('should open the Compliance page when submit button is clicked', () => {
+    global.platform = { openTab: sinon.spy() };
+    const { container } = render(<ComplianceModal />);
+
+    const btn = container.getElementsByClassName('btn-primary')[0];
+
+    fireEvent.click(btn);
+
+    expect(global.platform.openTab.called).toBeTruthy();
+  });
+});

ui/components/institutional/compliance-modal/index.js

@@ -0,0 +1 @@
+export { default } from './compliance-modal';

yarn.lock

@@ -34566,14 +34566,14 @@ __metadata:
   linkType: hard
 
 "vm2@npm:^3.9.3":
-  version: 3.9.15
-  resolution: "vm2@npm:3.9.15"
+  version: 3.9.16
+  resolution: "vm2@npm:3.9.16"
   dependencies:
     acorn: ^8.7.0
     acorn-walk: ^8.2.0
   bin:
     vm2: bin/vm2
-  checksum: 1df70d5a88173651c0062901aba67e5edfeeb3f699fe6c305f5efb6a5a7391e5724cbf98a6516600b65016c6824dc07cc79947ea4222f8537ae1d9ce0b730ad7
+  checksum: 646b45dca721acb3c8e4ae0742129f13612972387911c2475f3c06ac2b4232000cab0bdaaa65d97d6ea8dc70880e039542618b1b3d04adea79cd94803cbc4ab3
   languageName: node
   linkType: hard