Events
We can listen for changed for data that is stored in the Verida database or datastore.
This includes things like your profile which we showed loading in the previous tutorial step.
Live Editor
VeridaEventsExample = () => {const [status, setStatus] = useState(null)const [veridaContext, setVeridaContext] = useState(undefined)const [publicProfile, setPublicProfile] = useState(undefined)this.CONTEXT_NAME = "Verida Tutorial"React.useEffect(async () => {// See the login example for an explaination of thisif (!veridaContext) {if (hasSession(this.CONTEXT_NAME)) {// we know we have a session already// globalLoginFunction is a globally defined version of the login function// See https://developers.verida.io/docs/tutorial/SSOlet ctx = await globalLoginFunction(this.CONTEXT_NAME);setVeridaContext(ctx);}}}, []);dataUpdated = async function () {// and grab the profile dataprofileData = await this.profileConnection.getMany(null, null)// All public profiles have the fields: name, country, description, avatar.uri// see the schema here: https://common.schemas.verida.io/profile/basicProfile/latest/schema.jsonsetPublicProfile(profileData)}connectPublicProfile = async function () {// we want to get our own public profile// we can get our own DID like thisconst did = veridaContext.account.accountDid// we want a client objectconst client = await veridaContext.getClient()// get a connection to the profilethis.profileConnection = await client.openPublicProfile(did,"Verida: Vault","basicProfile")// call dataUpdated to grab the datadataUpdated()}// This is how we connect a data listener// In this case we are listening for changes to the profile// but it can be any database or datastoreconnectListener = async function () {// display the public profile as we have done previouslyawait connectPublicProfile()// connect the listener to this.profileConnection to call dataUpdated whenever// the data changesthis.profileConnection.listen(dataUpdated)}this.dataUpdated = this.dataUpdated.bind(this)this.connectPublicProfile = this.connectPublicProfile.bind(this)this.connectListener = this.connectListener.bind(this)// if we have a veridaContext we are logged inif (veridaContext) {// user is logged inprofileDisplay = (<button onClick={this.connectListener}>Connect a Listener</button>)if (publicProfile) {profileDisplay = (<div><h3>Now inside your Vault go and change your name, description oravatar.</h3><div>Name: {publicProfile.name}</div><div>Description: {publicProfile.description}</div><div>Country: {publicProfile.country}</div>{publicProfile.avatar &&<img width="150px" src={publicProfile.avatar.uri} />}</div>)}return (<div>{profileDisplay}</div>)} else {return (<div className="admonition admonition-danger alert alert--danger"><h2>Please login <a href="/docs/tutorial/SSO#runcode">here</a></h2></div>)}}
Result
Loading...
Events documentation
See the Verida Events documentation for complete documentation.