chore: clean up example

Signed-off-by: Berend Sliedrecht <[email protected]>

example/src/credo/CredoScreen.tsx

@@ -3,7 +3,7 @@ import AgentProvider from '@credo-ts/react-hooks'
 import CredentialProvider from '@credo-ts/react-hooks/build/CredentialProvider'
 import ProofProvider from '@credo-ts/react-hooks/build/ProofProvider'
 import * as React from 'react'
-import { type ReactElement, useEffect, useState } from 'react'
+import { useState } from 'react'
 import { Button, Text } from 'react-native'
 import { Spacer } from '../Spacer'
 import { Prover } from './Prover'
@@ -16,33 +16,41 @@ export const CredoScreen = () => {
   const [role, setRole] = useState<'prover' | 'verifier'>()
   const [agent, setAgent] = useState<AppAgent>()
 
-  useEffect(() => {
-    setupAgent().then(setAgent)
-  }, [])
-
-  let component: ReactElement
-
   if (!role) {
-    component = (
+    return (
       <>
-        <Button title="prover" onPress={() => setRole('prover')} />
+        <Button
+          title="prover"
+          onPress={async () => {
+            setRole('prover')
+            const a = await setupAgent()
+            setAgent(a)
+          }}
+        />
         <Spacer />
-        <Button title="verifier" onPress={() => setRole('verifier')} />
+        <Button
+          title="verifier"
+          onPress={async () => {
+            setRole('verifier')
+            const a = await setupAgent()
+            setAgent(a)
+          }}
+        />
       </>
     )
   }
 
   if (!agent) {
-    component = <Text>Setting up agent...</Text>
+    return <Text>Setting up agent...</Text>
   }
 
   if (role === 'prover' && agent) {
-    component = (
+    return (
       <AgentProvider agent={agent}>
         <CredentialProvider agent={agent}>
           <ProofProvider agent={agent}>
             <CentralProvider central={new Central()}>
-              <Prover agent={agent} serviceUuid={uuid} />
+              <Prover serviceUuid={uuid} />
             </CentralProvider>
           </ProofProvider>
         </CredentialProvider>
@@ -51,16 +59,14 @@ export const CredoScreen = () => {
   }
 
   if (role === 'verifier' && agent) {
-    component = (
+    return (
       <AgentProvider agent={agent}>
         <ProofProvider agent={agent}>
           <PeripheralProvider peripheral={new Peripheral()}>
-            <Verifier agent={agent} serviceUuid={uuid} />
+            <Verifier serviceUuid={uuid} />
           </PeripheralProvider>
         </ProofProvider>
       </AgentProvider>
     )
   }
-
-  return component
 }

example/src/credo/Prover.tsx

@@ -1,15 +1,15 @@
+import { useAgent } from '@credo-ts/react-hooks'
 import { type FunctionComponent, type ReactElement, useState } from 'react'
 import { Button } from 'react-native'
 import { BleProver } from './BleProver'
 import { Camera } from './Camera'
-import type { AppAgent } from './agent'
 
 type ProverProps = {
-  agent: AppAgent
   serviceUuid: string
 }
 
-export const Prover: FunctionComponent<ProverProps> = ({ agent, serviceUuid }) => {
+export const Prover: FunctionComponent<ProverProps> = ({ serviceUuid }) => {
+  const { agent } = useAgent()
   const [showCamera, setShowCamera] = useState(false)
   const [bleFlowInProgress, setBleFlowInProgress] = useState(false)
 

example/src/credo/Verifier.tsx

@@ -1,15 +1,15 @@
+import { useAgent } from '@credo-ts/react-hooks'
 import { type FunctionComponent, type ReactElement, useState } from 'react'
 import { Button, Text } from 'react-native'
 import { BleVerifier } from './BleVerifier'
-import type { AppAgent } from './agent'
 
 type VerifierProps = {
-  agent: AppAgent
   serviceUuid: string
 }
 
-export const Verifier: FunctionComponent<VerifierProps> = ({ agent, serviceUuid }) => {
+export const Verifier: FunctionComponent<VerifierProps> = ({ serviceUuid }) => {
   const [bleFlowInProgress, setBleFlowInProgress] = useState(false)
+  const { agent } = useAgent()
 
   let component: ReactElement