Web3 credentials UI library

[jaytoday]

web3-credentials library

I'd like to propose a simple UI library for assisting users of dApps with credential verification requirements, and specifically with assisting users with setting up credentials and verifying they are ready to proceed with a transaction that requires a credential.

A helper library of this type would make credential integration easier for app developers and provide app users with a more standardized experience.

A more formal proposal will be forthcoming, but for any initial feedback here is a quick overview of what this library would initially include:

Javascript API

The API will likely look somewhat like this:

 import Web3Credentials from "web3-credentials"

const web3Credentials = new Web3Credentials();
web3Credentials.requestCredential(registry=REGISTRY_ADDRESS, chain=web3Credentials.chainId.Ethereum, **options)

Web3Credentials

The following can be modified in the Web3Credentials constructor by passing in a config parameter or by directly modifying the config property of a Web3Credentials instance:

• web3 - configuration properties for the web3 client used to call the registry address to verify that credential setup has been completed.

requestCredential

This method is used in the application business logic to gate a transaction requiring a credential.

Required Parameters:

• registry - the address of the verification registry
• chain - the chain (Ethereum, Solana, etc.) hosting the registry.

Optional Parameters:

• registryFormat - "verite" or something similar would be specified here for a registry implementing Verite. A specific version could also be specified.
• dialogTitleText - overwrites default dialog title text
• dialogBodyText - overwrites default dialog body text
• onContinue - A method called once the user has been verified to have the requested credential setup. A transaction that requires the corresponding credential can be initiated here.
• onCancel - a method called when the user has closed the dialog without verifying the credential has been setup.
• Additional options for theme and styling customizations

It is suggested that registries specify their own provided metadata to explain more regarding the credential and supported issuers, providing the Web3 credentials library a convenient method of looking up this information.

Web3 Credential Request Dialog

This is the dialog interface that appears when the requestCredential method is called via the Javascript API. It utilizes the options passed as parameters to customize its content, behavior and appearance.

The Credential Request Dialog will include the following:

• Brief overview of what credentials are, and links to resources for learning more.
• Overview of the requested credential
• Which issuers can be used to set up the credential and brief instructions for completing this setup
• An on-chain check of the verification record registry to confirm the user is ready to proceed

The full proposal for this project will include detailed mockups of the Credential Request Dialog.

[jaytoday]

Here is a brief live video demo of how the credentials library would appear to an application user: https://www.youtube.com/watch?v=ADBlwLQospg

Screenshots:

[kimdhamilton]

Thanks @jaytoday, this is looking really nice, and I agree this is a helpful way to standardize UI/UX around verification registry actions. Eager to keep going down this web3-credentials path in general.

[alstjd4153]

go