fix mnemonic validation & navbar route (#733)

.changeset/mighty-deers-poke.md

@@ -0,0 +1,6 @@
+---
+"@status-im/wallet": patch
+"wallet": patch
+---
+
+fix mnemonic validation & navbar route

apps/wallet/src/routes/__root.tsx

@@ -7,8 +7,8 @@ import { Navbar } from '@status-im/wallet/components'
 import {
   createRootRouteWithContext,
   HeadContent,
-  // Link,
   // Navigate,
+  Link,
   Outlet,
   redirect,
   useRouterState,
@@ -108,6 +108,7 @@ function RootComponent() {
                 hasFeedback={/^\/portfolio\/(assets|collectibles)\/[^/]+$/.test(
                   pathname ?? '',
                 )}
+                linkComponent={Link}
               />
             </div>
             <div className="px-1">

packages/wallet/src/components/import-recovery-phrase-form/index.tsx

@@ -9,9 +9,12 @@ import { z } from 'zod'
 import { RecoveryPhraseTextarea } from '../recovery-phrase-textarea'
 
 const mnemonicSchema = z.object({
-  mnemonic: z.string().refine(value => validateMnemonic(value, english), {
-    message: 'Invalid phrase. Check word count and spelling.',
-  }),
+  mnemonic: z
+    .string()
+    .trim()
+    .refine(value => validateMnemonic(value, english), {
+      message: 'Invalid phrase. Check word count and spelling.',
+    }),
 })
 
 type FormValues = z.infer<typeof mnemonicSchema>

packages/wallet/src/components/nav-bar/index.tsx

@@ -3,23 +3,33 @@
 import { FeedbackPopover } from '../feedback'
 import { Logo } from '../logo'
 
+import type { ReactNode } from 'react'
+
+type LinkComponentProps = {
+  href: string
+  children: ReactNode
+}
+
 type Props = {
   hasFeedback?: boolean
+  linkComponent?: React.ComponentType<LinkComponentProps>
 }
 
 const Navbar = (props: Props) => {
+  const { linkComponent: LinkComponent = 'a' } = props
+
   return (
     <div
       data-theme="dark"
       className="sticky top-0 z-20 flex h-14 flex-1 items-center justify-between bg-neutral-100 pr-1"
     >
       <div className="flex items-center pl-3 lg:pl-6">
-        <a
+        <LinkComponent
           href="/"
           className="flex w-[32px] min-w-[32px] overflow-hidden lg:w-auto"
         >
           <Logo isTopbarDesktop />
-        </a>
+        </LinkComponent>
       </div>
       {props.hasFeedback && <FeedbackPopover />}
     </div>