chore: add a read the terms checkbox (#541)

kadena-community · Oct 16, 2024 · 7a58d83 · 7a58d83
2 parents a3ffd14 + 3d3657c
commit 7a58d83
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 30 deletions.
diff --git a/spirekey/e2e/page-objects/pages/connect.page.ts b/spirekey/e2e/page-objects/pages/connect.page.ts
@@ -11,6 +11,7 @@ export class ConnectPage {
   private createWalletButton: Locator;
   private connectWalletButton: Locator;
   private createAccountButton: Locator;
+  private termsCheckBox: Locator;
   private completeButton: Locator;
   private webauthnHelper: WebAuthNHelper;
 
@@ -26,6 +27,9 @@ export class ConnectPage {
     this.connectWalletButton = page.getByRole('button', { name: 'Connect' });
     this.createAccountButton = page.getByRole('button', { name: 'Create' });
     this.completeButton = page.getByRole('button', { name: 'Complete' });
+    this.termsCheckBox = page.getByRole('checkbox', {
+      name: 'I have read & agree to the',
+    });
 
     this.webauthnHelper = new WebAuthNHelper();
   }
@@ -54,6 +58,8 @@ export class ConnectPage {
   }
 
   async connectWallet() {
+    await this.connectWalletButton.isDisabled();
+    await this.acceptTerms();
     await this.connectWalletButton.click();
   }
 
@@ -73,7 +79,16 @@ export class ConnectPage {
     await this.recoverButton.click();
   }
 
+  async acceptTerms() {
+    await this.termsCheckBox.waitFor();
+    await this.termsCheckBox.click({ force: true });
+  }
+
   async createNewWallet() {
+    await this.createWalletButton.isDisabled();
+
+    await this.acceptTerms();
+    await !this.createWalletButton.isDisabled();
     await this.createWalletButton.click();
   }
 

diff --git a/spirekey/e2e/page-objects/pages/register.page.ts b/spirekey/e2e/page-objects/pages/register.page.ts
@@ -4,11 +4,15 @@ export class RegisterPage {
   private page: Page;
   private continueButton: Locator;
   private createWalletButton: Locator;
+  private termsCheckBox: Locator;
 
   constructor(page: Page) {
     this.page = page;
     this.continueButton = this.page.getByRole('button', { name: 'Create' });
     this.createWalletButton = this.page.getByRole('button', { name: 'Create' });
+    this.termsCheckBox = page.getByRole('checkbox', {
+      name: 'I have read & agree to the',
+    });
   }
 
   async setNetworkTo(
@@ -20,7 +24,15 @@ export class RegisterPage {
       .click();
   }
 
+  async acceptTerms() {
+    await this.termsCheckBox.waitFor();
+    await this.termsCheckBox.click({ force: true });
+  }
+
   async createWallet(): Promise<void> {
+    await this.createWalletButton.isDisabled();
+    await this.acceptTerms();
+    await !this.createWalletButton.isDisabled();
     await this.createWalletButton.click();
   }
 

diff --git a/spirekey/src/components/Registration/components/ConnectWalletStep.tsx b/spirekey/src/components/Registration/components/ConnectWalletStep.tsx
@@ -6,7 +6,7 @@ import { FLOWTYPE } from '@/components/OnBoarding/components/OnBoardingStepper/u
 import { ConnectWalletAnimation } from '@/components/RegistrationAnimations/ConnectWalletAnimation';
 import { WalletAnimation } from '@/components/RegistrationAnimations/WalletAnimation';
 import { useWallet } from '@/hooks/useWallet';
-import { Button, Stack } from '@kadena/kode-ui';
+import { Button, Checkbox, Stack } from '@kadena/kode-ui';
 import { FC, useState } from 'react';
 
 interface IProps {
@@ -27,6 +27,7 @@ export const ConnectWalletStep: FC<IProps> = ({
   steps,
 }) => {
   const [activeStep, setActiveStep] = useState<number | undefined>(undefined);
+  const [hasReadToS, setHasReadTos] = useState(false);
   const [hoveredConnectWallet, setHoveredConnectWallet] = useState(false);
   const [hoveredCreateWallet, setHoveredCreateWallet] = useState(false);
   const { getWallet } = useWallet();
@@ -54,7 +55,8 @@ export const ConnectWalletStep: FC<IProps> = ({
       <OnBoardingStepper step={activeStep} steps={steps} />
       <LayoutContext>
         <WalletAnimation
-          disableCreateButton={hasWallet}
+          disableCreateButton={hasWallet || !hasReadToS}
+          disableImportButton={!hasReadToS}
           animateImport={hoveredConnectWallet}
           animateCreate={hoveredCreateWallet}
           onImportClick={handleImport}
@@ -64,36 +66,57 @@ export const ConnectWalletStep: FC<IProps> = ({
       </LayoutContext>
 
       <LayoutActions>
-        <Stack
-          as="span"
-          onMouseEnter={() => {
-            setHoveredConnectWallet(true);
-          }}
-          onMouseLeave={() => {
-            setHoveredConnectWallet(false);
-          }}
-        >
-          <Button
-            variant={hasWallet ? 'primary' : 'outlined'}
-            onPress={handleImport}
-          >
-            Connect
-          </Button>
-        </Stack>
+        <Stack flexDirection="column" width="100%" gap="md" alignItems="center">
+          <Stack alignItems="center" gap="sm">
+            <Checkbox
+              onChange={() => setHasReadTos((v) => !v)}
+              key="HasReadToS"
+              value="true"
+              aria-label="I have read & agree to the Terms of Service"
+            >
+              I have read & agree to the
+            </Checkbox>
+            <a href="https://www.kadena.io/chainweaver-tos" target="_blank">
+              Terms of Service
+            </a>
+          </Stack>
 
-        {!hasWallet && (
-          <Stack
-            as="span"
-            onMouseEnter={() => {
-              setHoveredCreateWallet(true);
-            }}
-            onMouseLeave={() => {
-              setHoveredCreateWallet(false);
-            }}
-          >
-            <Button onPress={handleCreate}>Create</Button>
+          <Stack width="100%" justifyContent="space-between">
+            <Stack
+              as="span"
+              onMouseEnter={() => {
+                setHoveredConnectWallet(true);
+              }}
+              onMouseLeave={() => {
+                setHoveredConnectWallet(false);
+              }}
+            >
+              <Button
+                isDisabled={!hasReadToS}
+                variant={hasWallet ? 'primary' : 'outlined'}
+                onPress={handleImport}
+              >
+                Connect
+              </Button>
+            </Stack>
+
+            {!hasWallet && (
+              <Stack
+                as="span"
+                onMouseEnter={() => {
+                  setHoveredCreateWallet(true);
+                }}
+                onMouseLeave={() => {
+                  setHoveredCreateWallet(false);
+                }}
+              >
+                <Button isDisabled={!hasReadToS} onPress={handleCreate}>
+                  Create
+                </Button>
+              </Stack>
+            )}
           </Stack>
-        )}
+        </Stack>
       </LayoutActions>
     </Layout>
   );