app auth fixes and cleanup (#469)

* app: fix recovery link on sign in

* app: auth sign in form UI tweaks

also refactors

* fix type error, more ui clean up

UX feedback on success

* app: clean up sidebars

* fix spec

Author: 0xBigBoss

packages/api/src/routers/account-recovery/router.ts

@@ -172,7 +172,7 @@ const verifyRecoverySignature = async (
   if (recoveryType === RecoveryOptions.EOA) {
     verified = await verifyMessage({
       address: identifier as `0x${string}`,
-      message: RecoveryEOAPreamble + byteaToHex(challengeData.challenge),
+      message: RecoveryEOAPreamble + byteaToHex(challengeData.challenge as `\\x${string}`),
       signature: signature,
     })
   } else if (recoveryType === RecoveryOptions.WEBAUTHN) {

packages/app/components/sidebar/AuthSideBar.tsx

@@ -1,4 +1,4 @@
-import { SideBar, SideBarWrapper, Stack, Theme, YStack, type YStackProps, useMedia } from '@my/ui'
+import { SideBar, Stack, Theme, YStack, useMedia, type YStackProps, XStack } from '@my/ui'
 import { IconSendLogo } from 'app/components/icons'
 import { SignInForm } from 'app/features/auth/sign-in/sign-in-form'
 import { OnboardingForm } from 'app/features/auth/onboarding/onboarding-form'
@@ -27,15 +27,10 @@ const AuthSideBar = ({ ...props }: YStackProps) => {
 
 export const AuthSideBarWrapper = ({ children }: { children?: React.ReactNode }) => {
   const media = useMedia()
-  if (media.gtMd) {
-    return (
-      <SideBarWrapper
-        overflow="hidden"
-        sidebar={<AuthSideBar bc={'$background'} h={'92%'} ml={'$7'} my={'auto'} br={'$8'} />}
-      >
-        {children}
-      </SideBarWrapper>
-    )
-  }
-  return children
+  return (
+    <XStack overflow="hidden" height={'100%'}>
+      {media.gtMd && <AuthSideBar bc={'$background'} h={'92%'} ml={'$7'} my={'auto'} br={'$8'} />}
+      {children}
+    </XStack>
+  )
 }

packages/app/components/sidebar/HomeSideBar.tsx

@@ -7,7 +7,6 @@ import {
   ScrollView,
   Separator,
   SideBar,
-  SideBarWrapper,
   XStack,
   YStack,
   useMedia,
@@ -127,18 +126,13 @@ const HomeBottomSheet = () => {
 export const HomeSideBarWrapper = ({ children }: { children?: React.ReactNode }) => {
   const media = useMedia()
 
-  if (media.gtLg)
-    return (
-      <SideBarWrapper
-        sidebar={<HomeSideBar bc="$color2" width={234} minWidth={234} pt={80} jc="flex-start" />}
-      >
-        {children}
-      </SideBarWrapper>
-    )
   return (
-    <>
-      <HomeBottomSheet />
+    <XStack overflow="hidden" height={'100%'}>
+      {media.gtLg && (
+        <HomeSideBar bc="$color2" width={234} minWidth={234} pt={80} jc="flex-start" />
+      )}
       {children}
-    </>
+      <HomeBottomSheet />
+    </XStack>
   )
 }

packages/app/features/auth/account-recovery/account-recovery.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useCallback } from 'react'
 import RecoverWithEOA from 'app/features/auth/account-recovery/eoa/RecoverWithEOA'
-import { Stack, XStack, YStack, Text, Button, ButtonText } from '@my/ui'
+import { Stack, XStack, YStack, Text, Button, ButtonText, useToastController } from '@my/ui'
 import type {
   ChallengeResponse,
   VerifyChallengeRequest,
@@ -11,7 +11,7 @@ import { api } from 'app/utils/api'
 import { IconError, IconRefresh } from 'app/components/icons'
 import { useRouter } from 'solito/router'
 import RecoverWithPasskey from 'app/features/auth/account-recovery/passkey/RecoverWithPasskey'
-import type { SignMessageErrorType } from 'viem'
+import type { SignMessageErrorType } from '@wagmi/core'
 
 interface Props {
   onClose?: () => void
@@ -24,6 +24,7 @@ export enum SignState {
 }
 
 export default function AccountRecovery(props: Props) {
+  const toast = useToastController()
   const [error, setError] = useState<ErrorWithMessage>()
   // TODO: frontend: implement signing loading state
   const [signState, setSignState] = useState<SignState>(SignState.NOT_COMPLETE)
@@ -55,14 +56,15 @@ export default function AccountRecovery(props: Props) {
         ...verifyChallengeRequest,
       })
         .then(() => {
+          toast.show('Successfully recovered your account')
           // JWT is set via Set-Cookie header
           router.push('/')
         })
         .catch((err) => {
           setError(err)
         })
     },
-    [validateSignatureMutateAsync, router]
+    [validateSignatureMutateAsync, router, toast]
   )
 
   const onSignError = (e: SignMessageErrorType) => {
@@ -122,20 +124,13 @@ export default function AccountRecovery(props: Props) {
   }
 
   return (
-    <YStack mt={'0'} w={'100%'} h={'100%'} jc={'space-between'}>
+    <YStack mt={'0'} w={'100%'} h={'100%'} jc={'space-between'} maxWidth={600} mx="auto" pb="$6">
       <Stack flex={1} jc={'center'} alignItems="center" gap="$2">
         {showHeading()}
         {!error && challengeData && showRecoveryOptions()}
       </Stack>
 
-      <Button
-        w={'100%'}
-        backgroundColor={'$primary'}
-        hoverStyle={{ backgroundColor: '$primary' }}
-        pressStyle={{ backgroundColor: '$primary' }}
-        focusStyle={{ backgroundColor: '$primary' }}
-        onPress={props.onClose}
-      >
+      <Button w={'100%'} theme="accent" onPress={props.onClose}>
         <ButtonText>RETURN</ButtonText>
       </Button>
     </YStack>

packages/app/features/auth/account-recovery/eoa/RecoverWithEOA.tsx

@@ -9,13 +9,14 @@ import {
 } from '@my/api/src/routers/account-recovery/types'
 import type { SignState } from 'app/features/auth/account-recovery/account-recovery'
 import { RecoveryEOAPreamble } from '@my/api/src/routers/account-recovery/types'
+import type { SignMessageErrorType } from '@wagmi/core'
 
 interface Props {
   challengeData: ChallengeResponse
   signState: SignState
 
   onSignSuccess: (args: VerifyChallengeRequest) => Promise<void>
-  onSignError: () => void
+  onSignError: (e: SignMessageErrorType) => void
 }
 
 export default function RecoverWithEOA(props: Props) {
@@ -51,8 +52,8 @@ export default function RecoverWithEOA(props: Props) {
   }
 
   return (
-    <OpenConnectModalWrapper>
-      <Button onPress={isConnected ? onPress : null} width={'$12'}>
+    <OpenConnectModalWrapper width={'50%'}>
+      <Button onPress={isConnected ? onPress : null}>
         <ButtonText testID="account-recovery-eoa-btn">EOA</ButtonText>
       </Button>
     </OpenConnectModalWrapper>

packages/app/features/auth/account-recovery/passkey/RecoverWithPasskey.tsx

@@ -6,12 +6,13 @@ import {
   type VerifyChallengeRequest,
 } from '@my/api/src/routers/account-recovery/types'
 import { bytesToHex, hexToBytes } from 'viem'
+import type { SignMessageErrorType } from '@wagmi/core'
 
 interface Props {
   challengeData: ChallengeResponse
   onSignSuccess: (args: VerifyChallengeRequest) => void
   // https://wagmi.sh/react/api/hooks/useSignMessage#onerror
-  onSignError: () => void
+  onSignError: (e: SignMessageErrorType) => void
 }
 
 export default function RecoverWithPasskey(props: Props) {