feat: improve animation

client/src/App.tsx

@@ -3,20 +3,9 @@ import { Header } from 'c/Header'
 import { Landing } from 'c/Landing'
 import { Login } from 'c/Login'
 import { X } from 'c/X'
-import { useVerify } from 'h/useVerify'
-import { useEffect } from 'react'
-import { Navigate, Route, Routes, useNavigate } from 'react-router-dom'
+import { Navigate, Route, Routes } from 'react-router-dom'
 
 function App() {
-  const navigate = useNavigate()
-  const { error, valid } = useVerify()
-
-  useEffect(() => {
-    if (valid === true) navigate('/x')
-    if (error)
-      alert('Error')
-  }, [error, navigate, valid])
-
   return (
     <div className='flex flex-col min-h-screen'>
       <Header />

client/src/components/QrCode/OpenPassportQrCode.tsx

@@ -1,10 +1,11 @@
 'use client'
 import { useProofSocket } from 'h/useProofSocket'
 import { useQRCode } from 'h/useQRCode'
-import { useStore } from 'h/useStore'
+import { useVerify } from 'h/useVerify'
 import { ProofStep } from 'l/constants'
 import type { Id } from 'l/types'
-import { type FC, useState } from 'react'
+import { type FC, useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { BounceLoader } from 'react-spinners'
 import LED from './LED'
 import { ProofAnimation } from './ProofAnimation'
@@ -18,17 +19,22 @@ export const OpenPassportQRCode: FC<OpenPassportQRcodeProps> = ({
   userId,
 }) => {
   const [sessionId, setSessionId] = useState(crypto.randomUUID())
-  const { proof } = useStore()
-
+  const { valid, error } = useVerify()
+  const navigate = useNavigate()
   const qrElement = useQRCode({ userId, sessionId })
   const { proofStep, connectionStatus } = useProofSocket(sessionId)
 
   const handleAnimationComplete = () => {
     setSessionId(crypto.randomUUID())
+    navigate('/x')
   }
 
+  useEffect(() => {
+    if (error) alert(error)
+  }, [error])
+
   const renderProofStatus = () => {
-    if (proof !== null) return <ProofAnimation onComplete={handleAnimationComplete} />
+    if (valid) return <ProofAnimation onComplete={handleAnimationComplete} />
 
     switch (proofStep) {
       case ProofStep.WAITING_FOR_MOBILE: