Print error message below passkey creation

0xsend · Jul 19, 2024 · 419d44a · 419d44a
1 parent beed294
commit 419d44a
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 72 deletions.
diff --git a/packages/app/features/auth/layout.web.tsx b/packages/app/features/auth/layout.web.tsx
@@ -25,13 +25,13 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <Container height={'100%'} f={1} safeAreaPadding={isPwa && 'vertical'}>
-      <YStack ai="center" f={1} pt="$7" pb="$10">
+      <YStack ai="center" f={1} pt="$7">
         <Anchor {...useLink({ href: '/' })} mx="auto" position="absolute" top={'$6'}>
           <Theme inverse={true}>
             <IconSendLogo size={'$6'} color={'$background'} />
           </Theme>
         </Anchor>
-        <YStack pb="$10" pt="$14" mt="$10">
+        <YStack pt="$14" mt="$10">
           {children}
         </YStack>
       </YStack>

diff --git a/packages/app/features/auth/onboarding/__snapshots__/screen.test.tsx.snap b/packages/app/features/auth/onboarding/__snapshots__/screen.test.tsx.snap
@@ -83,21 +83,6 @@ exports[`OnboardingScreen 1`] = `
           }
         }
       >
-        <Text
-          style={
-            {
-              "color": "#081619",
-              "fontFamily": "System",
-              "fontSize": 13.2,
-              "fontWeight": "500",
-              "lineHeight": 16,
-              "userSelect": "auto",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          Passkey Name
-        </Text>
         <View
           style={
             {
@@ -342,6 +327,28 @@ exports[`OnboardingScreen 1`] = `
           >
             Why Passkey?
           </Text>
+          <View
+            style={
+              {
+                "maxWidth": 382,
+              }
+            }
+          >
+            <Text
+              style={
+                {
+                  "color": "hsl(358, 100%, 69.5%)",
+                  "flexWrap": "wrap",
+                  "fontFamily": "System",
+                  "fontSize": 16.8,
+                  "fontWeight": "400",
+                  "lineHeight": 19,
+                  "userSelect": "auto",
+                }
+              }
+              suppressHighlighting={true}
+            />
+          </View>
         </View>
       </View>
     </View>

diff --git a/packages/app/features/auth/onboarding/onboarding-form.tsx b/packages/app/features/auth/onboarding/onboarding-form.tsx
@@ -5,6 +5,7 @@ import {
   ButtonText,
   H3,
   Paragraph,
+  Stack,
   SubmitButton,
   Theme,
   XStack,
@@ -39,7 +40,7 @@ export const OnboardingForm = () => {
     ? Device.deviceName
     : `My ${Device.modelName ?? 'Send Account'}`
 
-  const [attempts, setAttempts] = useState(0)
+  const [errorMessage, setErrorMessage] = useState<string>()
 
   async function createAccount({ accountName }: z.infer<typeof OnboardingSchema>) {
     try {
@@ -78,12 +79,13 @@ export const OnboardingForm = () => {
             replace('/')
             return
           }
-          setAttempts((a) => a + 1)
+          setErrorMessage('Account not created. Please try again.')
           form.setError('accountName', { type: 'custom' })
         })
     } catch (error) {
       console.error('Error creating account', error)
-      setAttempts((a) => a + 1)
+      const message = error?.message.split('.')[0] ?? 'Unknown error'
+      setErrorMessage(message)
       form.setError('accountName', { type: 'custom' })
     }
   }
@@ -124,56 +126,58 @@ export const OnboardingForm = () => {
           },
         }}
         renderAfter={({ submit }) => (
-          <XStack
-            jc="space-between"
-            ai="center"
-            w="100%"
-            px="$2"
-            $sm={{ jc: 'center', height: '100%' }}
-          >
-            <Anchor
-              $theme-dark={{
-                col: '$background',
-              }}
-              $theme-light={{ col: '$black' }}
-              href="https://help.send.app/what-are-passkeys/"
-              target="_blank"
-              dsp="none"
-              $gtMd={{ dsp: 'block' }}
-            >
-              Why Passkey?
-            </Anchor>
-
-            <SubmitButton
-              onPress={submit}
-              theme={attempts > 0 ? 'yellow_active' : 'green'}
-              mb="auto"
-              als="auto"
-              r
-              br="$4"
-              mx="auto"
+          <>
+            <XStack
+              jc="space-between"
+              ai="center"
               w="100%"
-              $gtMd={{
-                mt: '0',
-                als: 'flex-end',
-                mx: 0,
-                ml: 'auto',
-                maw: '$12',
-                h: '$3.5',
-              }}
+              px="$2"
+              $sm={{ jc: 'center', height: '100%' }}
             >
-              <ButtonText
-                size={'$2'}
-                padding={'unset'}
-                textTransform="uppercase"
-                ta="center"
-                margin={'unset'}
-                col="black"
+              <Anchor
+                $theme-dark={{
+                  col: '$background',
+                }}
+                $theme-light={{ col: '$black' }}
+                href="https://help.send.app/what-are-passkeys/"
+                target="_blank"
+                dsp="none"
+                $gtMd={{ dsp: 'block' }}
               >
-                {attempts > 0 ? 'Try again' : 'CREATE PASSKEY'}
-              </ButtonText>
-            </SubmitButton>
-          </XStack>
+                Why Passkey?
+              </Anchor>
+
+              <SubmitButton
+                onPress={submit}
+                theme={errorMessage ? 'yellow_active' : 'green'}
+                mb="auto"
+                als="auto"
+                r
+                br="$4"
+                mx="auto"
+                w="100%"
+                $gtMd={{
+                  mt: '0',
+                  als: 'flex-end',
+                  mx: 0,
+                  ml: 'auto',
+                  maw: '$12',
+                  h: '$3.5',
+                }}
+              >
+                <ButtonText
+                  size={'$2'}
+                  padding={'unset'}
+                  textTransform="uppercase"
+                  ta="center"
+                  margin={'unset'}
+                  col="black"
+                >
+                  {errorMessage ? 'Try again' : 'CREATE PASSKEY'}
+                </ButtonText>
+              </SubmitButton>
+            </XStack>
+          </>
         )}
       >
         {(fields) => (
@@ -193,11 +197,6 @@ export const OnboardingForm = () => {
               time
             </H3>
             <YStack gap="$4">
-              <Theme inverse={true}>
-                <Paragraph col="$background" size={'$1'} fontWeight={'500'}>
-                  Passkey Name
-                </Paragraph>
-              </Theme>
               <YStack gap="$4" f={1}>
                 {Object.values(fields)}
                 <Anchor
@@ -213,6 +212,11 @@ export const OnboardingForm = () => {
                 >
                   Why Passkey?
                 </Anchor>
+                <Stack maw={382}>
+                  <Paragraph theme="red" color="$color9" flexWrap="wrap">
+                    {errorMessage}
+                  </Paragraph>
+                </Stack>
               </YStack>
             </YStack>
           </YStack>