feat: change checkboxes on signup mnemonic phrase screen (#581)

FuelLabs · Feb 22, 2023 · 6cad6a3 · 6cad6a3
1 parent 83ccac3
commit 6cad6a3
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 26 deletions.
diff --git a/packages/app/playwright/crx/crx.test.ts b/packages/app/playwright/crx/crx.test.ts
@@ -116,7 +116,10 @@ test.describe('FuelWallet Extension', () => {
 
       /** Copy Mnemonic */
       await getButtonByText(page, /Copy/i).click();
-      await page.getByRole('checkbox').click();
+      const savedCheckbox = await getByAriaLabel(page, 'Confirm Saved');
+      await savedCheckbox.click();
+      const accessCheckbox = await getByAriaLabel(page, 'Confirm Access');
+      await accessCheckbox.click();
       await getButtonByText(page, /Next/i).click();
 
       /** Confirm Mnemonic */

diff --git a/packages/app/playwright/e2e/CreateWallet.test.ts b/packages/app/playwright/e2e/CreateWallet.test.ts
@@ -32,7 +32,10 @@ test.describe('CreateWallet', () => {
 
     /** Copy Mnemonic */
     await getButtonByText(page, /Copy/i).click();
-    await page.getByRole('checkbox').click();
+    const savedCheckbox = await getByAriaLabel(page, 'Confirm Saved');
+    await savedCheckbox.click();
+    const accessCheckbox = await getByAriaLabel(page, 'Confirm Access');
+    await accessCheckbox.click();
     await getButtonByText(page, /Next/i).click();
 
     /** Confirm Mnemonic */

diff --git a/packages/app/src/systems/SignUp/components/MnemonicRead/MnemonicRead.test.tsx b/packages/app/src/systems/SignUp/components/MnemonicRead/MnemonicRead.test.tsx
@@ -50,19 +50,26 @@ describe('MnemonicRead', () => {
     expect(btn).toHaveAttribute('aria-disabled');
   });
 
-  it('should next be enable when confirm checkbox', async () => {
-    const checkbox = screen.getByLabelText(/Confirm saved/i);
-    expect(checkbox).toBeInTheDocument();
-    await user.click(checkbox);
+  it('should next be enable when confirm checkboxes', async () => {
+    const saveCheckbox = screen.getByLabelText(/Confirm Saved/i);
+    expect(saveCheckbox).toBeInTheDocument();
+    await user.click(saveCheckbox);
+    const accessCheckbox = screen.getByLabelText(/Confirm Access/i);
+    expect(accessCheckbox).toBeInTheDocument();
+    await user.click(accessCheckbox);
     await waitFor(() => {
       const btn = screen.getByText('Next');
       expect(btn).toBeEnabled();
     });
   });
 
   it('should trigger onCancel and onNext', async () => {
-    const checkbox = screen.getByLabelText(/Confirm saved/i);
-    await user.click(checkbox);
+    const saveCheckbox = screen.getByLabelText(/Confirm Saved/i);
+    expect(saveCheckbox).toBeInTheDocument();
+    await user.click(saveCheckbox);
+    const accessCheckbox = screen.getByLabelText(/Confirm Access/i);
+    expect(accessCheckbox).toBeInTheDocument();
+    await user.click(accessCheckbox);
 
     await waitFor(async () => {
       const btnNext = screen.getByText('Next');

diff --git a/packages/app/src/systems/SignUp/components/MnemonicRead/MnemonicRead.tsx b/packages/app/src/systems/SignUp/components/MnemonicRead/MnemonicRead.tsx
@@ -1,4 +1,5 @@
-import { Stack, Form, Checkbox, Flex, Button, Box } from '@fuel-ui/react';
+import { cssObj } from '@fuel-ui/css';
+import { Stack, Form, Checkbox, Flex, Button, Alert } from '@fuel-ui/react';
 import { useState } from 'react';
 
 import { Header } from '../Header';
@@ -12,7 +13,8 @@ export type MnemonicReadProps = {
 };
 
 export function MnemonicRead({ words, onCancel, onNext }: MnemonicReadProps) {
-  const [isChecked, setChecked] = useState(() => false);
+  const [isSavedChecked, setSavedChecked] = useState(false);
+  const [isAccessChecked, setAccessChecked] = useState(false);
 
   return (
     <Stack gap="$6" align="center">
@@ -26,22 +28,37 @@ export function MnemonicRead({ words, onCancel, onNext }: MnemonicReadProps) {
         title="Write down your Recovery Phrase"
         subtitle="You will need it on the next step"
       />
-      <Box css={{ width: 400 }}>
+      <Stack css={styles.content} gap="$4">
         <Mnemonic value={words} type="read" />
-      </Box>
-      <Form.Control css={{ flexDirection: 'row' }}>
-        <Checkbox
-          id="confirmSaved"
-          aria-label="Confirm Saved"
-          checked={isChecked}
-          onCheckedChange={(e) => {
-            setChecked(e as boolean);
-          }}
-        />
-        <Form.Label htmlFor="confirmSaved">
-          I saved my passphrase in some secure place
-        </Form.Label>
-      </Form.Control>
+        <Alert status="warning">
+          <Form.Control css={{ flexDirection: 'row' }}>
+            <Checkbox
+              id="confirmSaved"
+              aria-label="Confirm Saved"
+              checked={isSavedChecked}
+              onCheckedChange={(e) => {
+                setSavedChecked(e as boolean);
+              }}
+            />
+            <Form.Label htmlFor="confirmSaved">
+              I saved my Recovery Phrase in a safe place
+            </Form.Label>
+          </Form.Control>
+          <Form.Control css={{ flexDirection: 'row' }}>
+            <Checkbox
+              id="confirmAccess"
+              aria-label="Confirm Access"
+              checked={isAccessChecked}
+              onCheckedChange={(e) => {
+                setAccessChecked(e as boolean);
+              }}
+            />
+            <Form.Label htmlFor="confirmAccess">
+              I have continuous access to where I did save
+            </Form.Label>
+          </Form.Control>
+        </Alert>
+      </Stack>
       <Flex gap="$4">
         <Button
           color="gray"
@@ -55,11 +72,27 @@ export function MnemonicRead({ words, onCancel, onNext }: MnemonicReadProps) {
           color="accent"
           css={{ width: 130 }}
           onPress={onNext}
-          isDisabled={!isChecked}
+          isDisabled={!isSavedChecked || !isAccessChecked}
         >
           Next
         </Button>
       </Flex>
     </Stack>
   );
 }
+
+const styles = {
+  content: cssObj({
+    width: 400,
+
+    '.fuel_alert--icon': {
+      display: 'none',
+    },
+    '.fuel_alert--content': {
+      gap: '$4',
+    },
+    '.fuel_checkbox:focus-within::after': {
+      borderColor: '$yellow5 !important',
+    },
+  }),
+};