OCT-2230: Antisybil E2E

client/cypress/e2e/_16allocationAWOpen.cy.ts

@@ -384,8 +384,9 @@ Object.values(viewports).forEach(
           .invoke('text')
           .should('eq', 'Personal allocation');
 
-        cy.get('[data-test=TransactionsListItem]').eq(0).click();
         cy.wait(1000);
+        cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist');
+        cy.get('[data-test=TransactionsListItem]').eq(0).click();
         cy.get('[data-test=ModalTransactionDetails]').should('be.visible');
         cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible');
         cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]')
@@ -496,6 +497,8 @@ Object.values(viewports).forEach(
           .invoke('text')
           .should('eq', 'Allocated rewards');
 
+        cy.wait(1000);
+        cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist');
         cy.get('[data-test=TransactionsListItem]').eq(0).click();
         cy.get('[data-test=ModalTransactionDetails]').should('be.visible');
         cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible');
@@ -605,8 +608,9 @@ Object.values(viewports).forEach(
             .invoke('text')
             .should('eq', 'Allocated rewards');
 
-          cy.get('[data-test=TransactionsListItem]').eq(0).click();
           cy.wait(1000);
+          cy.get('[data-test=TransactionsListItem__DoubleValue__primary]').should('exist');
+          cy.get('[data-test=TransactionsListItem]').eq(0).click();
           cy.get('[data-test=ModalTransactionDetails]').should('be.visible');
           cy.get('[data-test=TransactionDetailsAllocation__personal]').should('be.visible');
           cy.get('[data-test=TransactionDetailsAllocation__personal--value__primary]')

client/cypress/e2e/_18antisybil.cy.ts

@@ -0,0 +1,84 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import chaiColors from 'chai-colors';
+
+import { connectWallet, mockCoinPricesServer, visitWithLoader } from 'cypress/utils/e2e';
+import viewports from 'cypress/utils/viewports';
+import {
+  HAS_ONBOARDING_BEEN_CLOSED,
+  IS_ONBOARDING_ALWAYS_VISIBLE,
+  IS_ONBOARDING_DONE,
+} from 'src/constants/localStorageKeys';
+import { ROOT_ROUTES } from 'src/routes/RootRoutes/routes';
+
+chai.use(chaiColors);
+
+Object.values(viewports).forEach(({ device, viewportWidth, viewportHeight }) => {
+  describe(`[AW IS OPEN] Antisybil: ${device}`, { viewportHeight, viewportWidth }, () => {
+    before(() => {
+      cy.clearLocalStorage();
+
+      /**
+       * Global Metamask setup done by Synpress is not always done.
+       * Since Synpress needs to have valid provider to fetch the data from contracts,
+       * setupMetamask is required in each test suite.
+       */
+      cy.setupMetamask();
+    });
+
+    beforeEach(() => {
+      cy.disconnectMetamaskWalletFromAllDapps();
+      mockCoinPricesServer();
+      localStorage.setItem(IS_ONBOARDING_ALWAYS_VISIBLE, 'false');
+      localStorage.setItem(IS_ONBOARDING_DONE, 'true');
+      localStorage.setItem(HAS_ONBOARDING_BEEN_CLOSED, 'true');
+      visitWithLoader(ROOT_ROUTES.home.absolute);
+    });
+
+    it('Sybil user has to accept "no matching fund" rule to close the modal and not to see it anymore. Sybil user sees a badge with `Sybil account` info.', () => {
+      connectWallet({ isPatronModeEnabled: false, isSybil: true });
+      cy.wait(5000);
+
+      cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible');
+      cy.get('[data-test=ModalTimeoutListPresence__overflow]').should('exist');
+      cy.get('[data-test=ModalTimeoutListPresence__overflow]').click({ force: true });
+      cy.wait(500);
+      cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible');
+      cy.reload();
+      cy.wait(1000);
+      cy.get('[data-test=ModalTimeoutListPresence]').should('be.visible');
+      cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').should('not.be.checked');
+      cy.get('[data-test=ModalTimeoutListPresence__Button--form]').should('not.be.disabled');
+      cy.get('[data-test=ModalTimeoutListPresence__Button--form]')
+        .invoke('attr', 'href')
+        .should('eq', 'https://octant.fillout.com/t/wLNsbSGJKWus');
+      cy.get('[data-test=ModalTimeoutListPresence__Button--close]').should('be.disabled');
+      cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').check();
+      cy.get('[data-test=ModalTimeoutListPresence__InputCheckbox]').should('be.checked');
+      cy.get('[data-test=ModalTimeoutListPresence__Button--close]').should('not.be.disabled');
+      cy.get('[data-test=ModalTimeoutListPresence__Button--close]').click();
+      cy.wait(500);
+      cy.get('[data-test=ModalTimeoutListPresence]').should('not.exist');
+      cy.get('[data-test=HomeGridUQScore]').scrollIntoView();
+      cy.get('[data-test=HomeGridUQScoreAddresses]')
+        .then($el => $el.css('backgroundColor'))
+        .should('be.colored', '#fffbf2');
+      cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel]').should('be.visible');
+      cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel__text]')
+        .then($el => $el.css('backgroundColor'))
+        .should('be.colored', '#f6c54b');
+      cy.get('[data-test=HomeGridUQScoreAddresses__TinyLabel__text]')
+        .invoke('text')
+        .should('eq', 'Sybil account');
+      cy.get('[data-test=HomeGridUQScore__Button--form]').should('be.visible');
+      cy.get('[data-test=HomeGridUQScore__Button--form]')
+        .invoke('text')
+        .should('eq', 'Want to dispute sybil status? Please use this form');
+      cy.get('[data-test=HomeGridUQScore__Button--form]')
+        .invoke('attr', 'href')
+        .should('eq', 'https://octant.fillout.com/t/wLNsbSGJKWus');
+      cy.reload();
+      cy.wait(1000);
+      cy.get('[data-test=ModalTimeoutListPresence]').should('not.exist');
+    });
+  });
+});

client/src/components/Home/HomeGridUQScore/HomeGridUQScore.tsx

@@ -264,6 +264,7 @@ const HomeGridUQScore: FC<HomeGridUQScoreProps> = ({ className }) => {
           {antisybilStatusScore?.isOnTimeOutList ? (
             <Button
               className={styles.furtherActions}
+              dataTest="HomeGridUQScore__Button--form"
               href={TIME_OUT_LIST_DISPUTE_FORM}
               label={t('wantToDispute')}
               variant="link6"

client/src/components/Home/HomeGridUQScore/HomeGridUQScoreAddresses/HomeGridUQScoreAddresses.tsx

@@ -98,10 +98,12 @@ const HomeGridUQScoreAddresses: FC<HomeGridUQScoreAddressesProps> = ({
         !isConnected && styles.noWalletConnected,
         isOnTimeOutList && styles.isOnTimeOutList,
       )}
+      data-test="HomeGridUQScoreAddresses"
     >
       {isOnTimeOutList && (
         <TinyLabel
           className={styles.isOnTimeOutListLabel}
+          dataTest="HomeGridUQScoreAddresses__TinyLabel"
           isInTopRightCorner={false}
           text={t('isOnTimeOutListLabel')}
           variant="orange3"

client/src/components/shared/Layout/LayoutTopBar/LayoutTopBar.tsx

@@ -20,6 +20,7 @@ import useNavigationTabs from 'hooks/helpers/useNavigationTabs';
 import useIsPatronMode from 'hooks/queries/useIsPatronMode';
 import { ROOT_ROUTES } from 'routes/RootRoutes/routes';
 import useAllocationsStore from 'store/allocations/store';
+import useDelegationStore from 'store/delegation/store';
 import useLayoutStore from 'store/layout/store';
 import { octant } from 'svg/logo';
 import { chevronBottom } from 'svg/misc';
@@ -51,6 +52,10 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
     setIsSettingsDrawerOpen: state.setIsSettingsDrawerOpen,
     setIsWalletModalOpen: state.setIsWalletModalOpen,
   }));
+
+  const { isTimeoutListPresenceModalOpen } = useDelegationStore(state => ({
+    isTimeoutListPresenceModalOpen: state.data.isTimeoutListPresenceModalOpen,
+  }));
   const isProjectAdminMode = useIsProjectAdminMode();
   const { data: isPatronMode } = useIsPatronMode();
   const { allocations } = useAllocationsStore(state => ({
@@ -239,14 +244,14 @@ const LayoutTopBar: FC<LayoutTopBarProps> = ({ className }) => {
         <>
           <Drawer
             dataTest="SettingsDrawer"
-            isOpen={isSettingsDrawerOpen}
+            isOpen={isSettingsDrawerOpen && !isTimeoutListPresenceModalOpen?.value}
             onClose={() => setIsSettingsDrawerOpen(false)}
           >
             <Settings />
           </Drawer>
           <Drawer
             dataTest="AllocationDrawer"
-            isOpen={isAllocationDrawerOpen}
+            isOpen={isAllocationDrawerOpen && !isTimeoutListPresenceModalOpen?.value}
             onClose={() => setIsAllocationDrawerOpen(false)}
           >
             <Allocation />

client/src/components/shared/ModalTimeoutListPresence/ModalTimeoutListPresence.tsx

@@ -50,6 +50,7 @@ const ModalTimeoutListPresence = (): ReactElement => {
       <BoxRounded className={styles.box} hasPadding={false} isGrey>
         <InputCheckbox
           className={styles.checkbox}
+          dataTest="ModalTimeoutListPresence__InputCheckbox"
           isChecked={isChecked}
           // eslint-disable-next-line  @typescript-eslint/naming-convention
           onChange={() => setIsChecked(prev => !prev)}
@@ -58,11 +59,17 @@ const ModalTimeoutListPresence = (): ReactElement => {
         <label className={styles.checkboxLabel}>{t('checkboxLabel')}</label>
       </BoxRounded>
       <div className={styles.buttonsContainer}>
-        <Button className={styles.button} href={TIME_OUT_LIST_DISPUTE_FORM} target="_blank">
+        <Button
+          className={styles.button}
+          dataTest="ModalTimeoutListPresence__Button--form"
+          href={TIME_OUT_LIST_DISPUTE_FORM}
+          target="_blank"
+        >
           {t('goToDisputeForm')}
         </Button>
         <Button
           className={styles.button}
+          dataTest="ModalTimeoutListPresence__Button--close"
           isDisabled={!isChecked}
           onClick={() => setIsTimeoutListPresenceModalOpen({ address: address!, value: false })}
           variant="cta"

client/src/components/ui/TinyLabel/TinyLabel.tsx

@@ -18,7 +18,12 @@ const TinyLabel: FC<TinyLabelProps> = ({
     data-test={dataTest}
     onClick={onClick}
   >
-    <div className={cx(styles.text, styles[`variant--${variant}`], textClassName)}>{text}</div>
+    <div
+      className={cx(styles.text, styles[`variant--${variant}`], textClassName)}
+      data-test={`${dataTest}__text`}
+    >
+      {text}
+    </div>
   </div>
 );