Incubator Proposal – Shared JS Components

Reuben · December 6, 2022, 9:34pm

Benri | TBD Incubator Proposal – Shared JS Components

Proposal Mission and Scope

Statement of value to the TBD ecosystem (Web5, TDEX, etc)

The mission of this project is to help with the edification and adoption of web5/SSI standards. Today, there are building blocks necessary to expand the adoption of Web5 and support the developer community. This project proposal aims to develop a fundamental building block for utilization across several future Web5 projects.

This particular project is to build a set of reusable frontend components, built in vanilla javascript/typescript ( tbd ), that can interop across different web frameworks: vue, react, angular ( also tbd ) and provide the basic building block for a frontend ui for future developers.

In the scope of this project, Benri is to work with TBD to define components as reusable. Some of the focuses for the components will be:

Ensuring compatibility and reusability across projects
Ensuring efforts are not duplicated across projects

Context

Benri’s original idea was to design a solution around the SSI services that serves as a teaching mechanicsm to Web5 and the various data models in the SSI community, such as Verifiable Credentials, Wallets, and DID’s. We realized that before we build any UI, the core building blocks could be shared across repos, and should be addressed first. This would also help simplify the developer experience and speed up the roadmap for new projects by TBD and the web5 developer community at large.

Current Status

Link to more details on HackMD: https://hackmd.io/RnJzfJ7EQtu4sJyjgqPU5Q

The current state is : STRAWMAN . Proposals to change scope and/or re-think approach are welcome on this version.

Version Tag: 0.0.1-SM

Flow chart

Flow charts to be finalized after further conversations with TBD to finalize scoping.

Success Critieria

1 npm compliant library for reusable web5 components

done in vanilla js/typescript to ensure reuability in different frameworks (vue, react, etc.)

A set of components (written in a UI framework such as Vue)

Installable via. yarn

Constraints and Considerations

Design Goals

Simple
Reusable
Composability
Extendable
Customizable

Component Selection

Benri will work with TBD to determine useful components based upon the User Stories. Complete scoping of user stories and how they relate to Alpha are to be determined. Post acceptance, we will iterate and bring forth a more concrete perspective on which components we will focus on first and why.

User Stories

As a developer, I want to make an app that does basic SSI operations using the service-libs . These operations include but are not limited to:
- did module:
  - creating a did ( with method flexibility )
  - selecting from an existing did
- vc module:
  - creating a vc
  - creating a template for a VC
  - issuing a new vc
- kms module:
  - key creation
  - key deletion
- wallet rendering:
  - view presentation request
  - send verifiable presentation
  - prepare presentation

Areas of Risk

Making sure we can use things cross builds.
Duplication of efforts

Testing

Testing harnesses TBD later in scoping, but most likely the following two ways:

CICD with Github Actions
Test Suite (Jest/Yarn) etc.

Code Monitoring

We will probably have the following CICD services running on the repo.

FOSSA checks
CodeCov ( are minimum coverage metrics required for this project? )
Possibly some embedded contributor metrics on the README

alr · December 9, 2022, 9:43pm

Thank you, Reuben!

Team’s reviewing over here and we’ll get back to you shortly. High-level early thoughts - these ideas open up a lot of opportunity for the ecosystem. We’re working through how we set things up best for success.

Talk soon!

S,
ALR

alr · December 15, 2022, 7:06pm

Hi, Benri!

The team and I enjoyed reading through your proposal - it sparked some grander discussions about where Web5 is and can go with reusable UI components. We’ve got some early thoughts we’d love to work through with you to scope this a bit more tightly and talk through how we’d all like to see the project managed and find success.

Are y’all available next week to sync and work through these together? If you let me know your availability I’ll set up a session for us.

Related: I’d love to try this as a public-facing session on a Discord voice channel; you up for that?

S,
ALR

Reuben · December 15, 2022, 9:08pm

Hi ALR!

Thanks so much. We are glad to hear the proposal inspired some grander discussions about Web5. We see a grander vision of the proposed components as building blocks to empower the Web5 community as well! Very excited to learn more about TBDs ideas and discussions.

We can certainly meet next week to discuss scope, project management, success criteria, etc. A public-facing session on a Discord voice channel works for us!
The second half of next week is pretty booked but we can make ourselves available Mon-Tue at whatever times work best on your end.

Monday 12/19
8:30am - 9:30am pt or after 12pm pt works best for us

Tuesday 12/20
We can make ourselves available anytime

Looking forward to connecting early next week!
Thanks!

alr · December 19, 2022, 8:36pm

Brilliant!

Sent invites to your inbox. For all others following, we’ll give this a shot tomorrow, Tuesday 20 December, at 11:30am Pacific. In the “tbdiscussions” Discord channel, which I believe is linked here:

I’ll follow up with a Meet link if that doesn’t work out

S,
ALR

alr · December 20, 2022, 8:14pm

Really enjoyable call. I’ll note the TL;DRs I walked away with, and invite the others to amend/append:

We’re all looking for more defined scope here. We discussed a few ideas:
1. Self-issued credentials UI for end users to pick a domain object (ie. “address”) from a store of schemas, input data, and acquire a VC
1. UI widget for web/app developers to accept VCs instead of form data
1. Display editor easing visual presentation of VCs, conforming to Wallet Rendering spec
We’ll take a couple days; Benri will to think about the options and propose a refined scope with clearly-defined “wins”
Small scope is best! This is a beachhead into greater opportunity and we’re eager to get moving on an easily achievable thing that advances VC on the frontend
Benri may throw their evolving thoughts here or link here to a HackMD for collaborative editing.
When established, we’ll run the project w/ TBD advising in public on a cadence - Weekly Progress checkins, Monthly scope setting, and TBD’s public infrastructure w/ Benri as project leads.

As always, here for follow-ups!

S,
ALR

andor · December 21, 2022, 6:57am

Hey guys,

I’m tracking this over a hackmd here: https://hackmd.io/@andorsk/BkG-9QxKo/edit

Added some notes around headings and direction. Feel free to comment and take a look. Here’s the render:

I’m leaning toward either the WR or Self-issued credentials UI, but there are a few question marks here that I need to think longer about.

Heading

The direction of the project. The exact details need to be firmed up after we’ve chosen the heading.

Format is: pros, cons, considerations, and rankings

Self-issued credentials UI for end users to pick a domain object (ie. “address”) from a store of schemas, input data, and acquire a VC
- example: https://verifiablecredentials.dev/
- Pros:
  - clean scope
  - referencable implementation
  - clean
  - probably the quickest win
  - schema store could be a collabe work with the schema registry WG in DIF
- Cons:
  - pretty limited starting point.
- Considerations:
  - vanilla vs. framework. time to finish vs. generalizability
- Andor’s Ranking (/5): 4/5
UI widget for web/app developers to accept VCs instead of form data
- Pro:
  - already have some referencable implemntations from Dan and Andor
  - widget is also small scoped.
  - generating the VC could be aligned with some WASM stuff (which Andor’s implemementation does)
- Cons:
  - JSON Forms is weird and the libraries don’t always do well cross frameworks (i.e vue and angular support differently than react if you go to the website)
  - Some scoping clarity issues.
  - Slightly more niche (today), but could have big impace later on.
- Considerations:
  - What’s an MVP look like?
- Andor’s Ranking (/5): 3/5
Display editor easing visual presentation of VCs, conforming to Wallet Rendering spec
- Pros:
  - Uses the Wallet Rending spec from DIF, which we are actively participating in (both Benri and TBD)
  - There’s no implementation of Wallet Rendering out today.
  - It helps Benri contribute to the WR specs, b/c we can add insight there.
  - Could be very powerful
  - Easily funnels into larger projects
- Cons:
  - Needs to be tightly scoped.
  - Not a lot of VC’s out yet, so limited usability.
- Andor’s Ranking (/5): 3.9/5

Reuben · December 22, 2022, 2:04am

Thanks ALR and team,

We will share some updates shortly. As mentioned via email, It might make sense to put a tentative scope sync on the calendar some time next week if you/team will be online. We are available Wed at 10am or Thu/Fri at 9:30am pt. Let us know if that works on your end! Thanks!

alr · December 22, 2022, 8:05pm

Let’s do Wednesday, the 28th! Likely just me on the TBD side, due to holidays.

Same place as above for anyone following along - the tbdiscussions voice channel on Discord.

andor · December 22, 2022, 8:06pm

Hey guys,

I’m tracking this over a hackmd here: https://hackmd.io/@andorsk/BkG-9QxKo/edit

Added some notes around headings and direction. Feel free to comment and take a look. Here’s the render:

I’m leaning toward either the WR or Self-issued credentials UI, but there are a few question marks here that I need to think longer about.

Heading

The direction of the project. The exact details need to be firmed up after we’ve chosen the heading.

Format is: pros, cons, considerations, and rankings

Self-issued credentials UI for end users to pick a domain object (ie. “address”) from a store of schemas, input data, and acquire a VC
- example: https://verifiablecredentials.dev/
- Pros:
  - clean scope
  - referencable implementation
  - clean
  - probably the quickest win
  - schema store could be a collabe work with the schema registry WG in DIF
- Cons:
  - pretty limited starting point.
- Considerations:
  - vanilla vs. framework. time to finish vs. generalizability
- Andor’s Ranking (/5): 4/5
UI widget for web/app developers to accept VCs instead of form data
- Pro:
  - already have some referencable implemntations from Dan and Andor
  - widget is also small scoped.
  - generating the VC could be aligned with some WASM stuff (which Andor’s implemementation does)
- Cons:
  - JSON Forms is weird and the libraries don’t always do well cross frameworks (i.e vue and angular support differently than react if you go to the website)
  - Some scoping clarity issues.
  - Slightly more niche (today), but could have big impact later on.
- Considerations:
  - What’s an MVP look like?
- Andor’s Ranking (/5): 3/5
Display editor easing visual presentation of VCs, conforming to Wallet Rendering spec
- Pros:
  - Uses the Wallet Rending spec from DIF, which we are actively participating in (both Benri and TBD)
  - There’s no implementation of Wallet Rendering out today.
  - It helps Benri contribute to the WR specs, b/c we can add insight there.
  - Could be very powerful
  - Easily funnels into larger projects
  - Could help get wallet rending specs from DIF into adoption.
- Cons:
  - Needs to be tightly scoped.
  - Not a lot of VC’s out yet, so limited usability.
- Considerations:
  - Wallet rending might go under a big update with objects and some other parts of the spec. Luckily, this might be an excuse for @Andor to finish out this issue (see issue #4):
- Andor’s Ranking (/5): 3.9/5

andor · December 23, 2022, 3:46am

I’ve been thinking a little more about this. I’ll draw up a little more clarity on #1 and #3 in terms of an actual spec. And we can decide from there what to do? Both could be cool. WR is a huge topic right now in DIF and OWF, so could be more relevant to the current timing. I also recently wrote a start of an implementation for trust establishment wg in DIF. Could be an item already in the cooker that we toss up for the fast win.

alr · December 27, 2022, 8:36pm

Great stuff. TL;DR hot takes from me: Option 1. " Self-issued credentials UI for end users to pick a domain object (ie. “address”) from a store of schemas, input data, and acquire a VC"

I like it because it’s:

Bootstrapping the VC ecosystem before issuers are onboarded
Putting control in the end users’ hands

I have some questions about how “small scoped” you think it may be for a quick win.

Slight edge over the Wallet Rendering stuff for me because I like that this delivers function before we work on form.

Open call again tomorrow, 10am Pacific, in the tbdiscussions voice channel on Discord.

See y’all then!

S,
ALR

andor · December 28, 2022, 1:56am

Thanks ALR! We’ll have a little more color/details for the call tomorrow that I think will help. We’ve been discussing internally as well and think the WR is “edging” out as well after more thought. We’ll catch you guys tomorrow!

andor · December 28, 2022, 4:02am

@alr we did some more discussions around this internally, and after hashing things out a little more, think the WR is probably a more prudent direction to start off with, with the VC work possibly the
next step:

https://hackmd.io/pnKr3Y5pRKiOI8rRtX0oBA?both

There’s a few diagrams here, so need to send it over HackMD rather than the forum.

I can’t upload the md or html files for the hackmd, so please go onto the hackmd to review. From our conversations, I was told this was fine but lmk if that doesn’t work and we can move it over to a google doc or something.

alr · December 28, 2022, 4:30am

Word. Looking forward to hearing the story tomorrow.

Visibility on the HackMD?

andor · December 28, 2022, 4:43am

@alr you had to be signed in to hackmd access the page. I’ve changed the permissions to completely public so you don’t require a sign in anymore:

link here: TBD Incubator Proposal 1c -- Display editor easing visual presentation of VCs, conforming to Wallet Rendering spec - HackMD

andor · December 28, 2022, 4:45am

@alr also a random tangential heads up: hackmd is blocked by the forums on the initial post. I have to go and edit an existing post to push the link.

alr · January 3, 2023, 7:42pm

Happy New Year, all!

Was a great call last week; we should have a decision on the proposal this week for Display editor easing visual presentation of VCs, conforming to Wallet Rendering spec.

hackmd is blocked by the forums on the initial post

Spam filter didn’t like it; I’ve cleared the post

Will ping back here!

S,
ALR

alr · January 11, 2023, 6:33am

Folks, congratulations, we’re thrilled to welcome this project into the TBD Incubator Program.

Reuben and Andor, our colleagues at Benri, will be leading this effort. More to come on getting involved - meeting schedules and routines, guides, etc. But first!

As part of the TBD Ecosystem, Incubation projects are open to our infrastructure. Which of the following can I set up for you?

GitHub repository in TBDev · GitHub?
- Would you like to propose a name? (We prefix these with incubation-; perhaps incubation-vc-presentation or similar?
- Send along the GitHub usernames you’d like to have admin access and write access to that repo.
Discord Channel for Development discussions?
Forums Category here on forums.tbd.website?

Let me know and I’ll get that spun up for you; welcome!

S,
ALR

andor · January 12, 2023, 3:57am

Hey ALR,

Fantastic news!

Repo Name And Permissions
My proposal is incubation-wallet-rendering, as this is an implementation of the wallet rendering spec in DIF, and we can put in the description the focus of Verifiable Credential rendering. If the spec expands, we should be in good position to accommodate it without a name change.

I’m actually already a part of TBDDev ( was added during my work with the ssi-sdk ) @andorsk. But yes, please make sure we have the correct perms and add Reuben @reubenmb

Here’s the links just in case:

Discord Channel: Sounds good. We can call it : incubation: wallet rendering.

Tags: Additionally, a tag wallet-rendering or wr would be great for the forums.

Forums Category: Incubation: Wallet Rendering Library -- Dev ← using as precedence. LMK if that works or we can do something else.

Calendar Sync: We talked about a cadence for syncing with Dan (weekly) and you (monthly). Can we move forward on this? We’ve gone and done some research and would love to further some discussions about it to make sure everyone is on the same page.

Additional Considerations: As of now, the plan would be to eventually support a npm install, so just want to ask if we need to put anything in place to get that going. TBD would need an npm account. No rush here, but just wanted to put it on your radar.