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 this if (!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/SSO let ctx = await globalLoginFunction(this.CONTEXT_NAME); setVeridaContext(ctx); } } }, []); dataUpdated = async function () { // and grab the profile data profileData = 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.json setPublicProfile(profileData) } connectPublicProfile = async function () { // we want to get our own public profile // we can get our own DID like this const did = veridaContext.account.accountDid // we want a client object const client = await veridaContext.getClient() // get a connection to the profile this.profileConnection = await client.openPublicProfile( did, "Verida: Vault", "basicProfile" ) // call dataUpdated to grab the data dataUpdated() } // 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 datastore connectListener = async function () { // display the public profile as we have done previously await connectPublicProfile() // connect the listener to this.profileConnection to call dataUpdated whenever // the data changes this.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 in if (veridaContext) { // user is logged in profileDisplay = ( <button onClick={this.connectListener}>Connect a Listener</button> ) if (publicProfile) { profileDisplay = ( <div> <h3> Now inside your Vault go and change your name, description or avatar. </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> ) } }

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 this
    if (!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/SSO
        let ctx = await globalLoginFunction(this.CONTEXT_NAME);
        setVeridaContext(ctx);
      }
    }
  }, []);

  dataUpdated = async function () {
    // and grab the profile data
    profileData = 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.json
    setPublicProfile(profileData)
  }

  connectPublicProfile = async function () {
    // we want to get our own public profile

    // we can get our own DID like this
    const did = veridaContext.account.accountDid

    // we want a client object
    const client = await veridaContext.getClient()

    // get a connection to the profile
    this.profileConnection = await client.openPublicProfile(
      did,
      "Verida: Vault",
      "basicProfile"
    )

    // call dataUpdated to grab the data
    dataUpdated()
  }

  // 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 datastore
  connectListener = async function () {
    // display the public profile as we have done previously
    await connectPublicProfile()

    // connect the listener to this.profileConnection to call dataUpdated whenever
    // the data changes
    this.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 in
  if (veridaContext) {
    // user is logged in

    profileDisplay = (
      <button onClick={this.connectListener}>Connect a Listener</button>
    )    
    if (publicProfile) {
      profileDisplay = (
        <div>
          <h3>
            Now inside your Vault go and change your name, description or
            avatar.
          </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.