UI tutorial

[samsiegart]

fixes #922

Link to tutorial page: https://ui-tutorial.documentation-7tp.pages.dev/guides/ui-tutorial/#ui-tutorial

Reference repo https://github.com/agoric-labs/ui-tutorial

In general I need to add some reference images, better linking to other docs and repos, and better layout/indexing of pages (in addition to prose and other content from code review/feedback)

[cloudflare-workers-and-pages]

Deploying documentation with    Cloudflare Pages

Latest commit:	7f1c68f
Status:	✅  Deploy successful!
Preview URL:	https://5bdf4897.documentation-7tp.pages.dev
Branch Preview URL:	https://ui-tutorial.documentation-7tp.pages.dev

View logs

[github-actions]

Cloudflare deployment logs are available here

[otoole-brendan]

This is awesome @samsiegart! I might have missed it but I didn't see it reference the current 'Building Client Dapps' (https://docs.agoric.com/guides/getting-started/contract-rpc.html) page. Should it?

[samsiegart]

This is awesome @samsiegart! I might have missed it but I didn't see it reference the current 'Building Client Dapps' (https://docs.agoric.com/guides/getting-started/contract-rpc.html) page. Should it?

Yea thanks for calling out, just added links in a few places where the context was appropriate

[Jovonni]

we could probably link to more documentation on what this file is doing. Even if we just link to docs on lockdown. As now its just "make a new file, and copy/paste this". There an opportunity to explain lockdown briefly here. Although it isnt a blocker for the dev. More informational

[samsiegart]

Tbh I'm just having a hard time succinctly explaining it. Thinking out loud, it prevents the modification of certain intrinsics in the JS environment, and adds support for harden and assert etc. But that might lead to more questions than answers, as those things aren't really concerns for most UI devs (unless you're using https://github.com/LavaMoat/LavaMoat). It's really just needed so the agoric libraries work, because they're also used in smart contracts where those things actually matter.

We've talking about having a way to use the agoric libraries without hardening, but there hasn't been any movement on that yet. Maybe just linking to endo here is enough for now.

[Jovonni]

My thought here, and this also was a gotcha for me, but this tutorial is showing how you read data from vstorage in general, as the code is using

[Kind.Data, 'published.agoricNames.instance']
...
[Kind.Data, 'published.agoricNames.brand']

But these aren't storage paths set by the contract. I think the wording can improve here so a brand new dev doesn't think they are reading contract data.

I see an opportunity to even combine/link other resources on how the writing of vstorage works, so they can understand the relationship between how writes work and these storage paths they see in this tutorial.

For this specifically, we could even change this to be

- Reading vstorage data with `chainStorageWatcher`

would love thoughts on this

[Jovonni]

i also do understand the brand is from the contract, since its minting. Therefore the contract is still reading brand from the asset being minted by the contract, this seems like we can say this more clear. Maybe its just we don't call it contract data here, but more vstorage data... idk.

So maybe, its just some clarity in the tutorial on how those storage paths are where you store data if you want it to be accessible to the outside world.

[samsiegart]

Yea that's understandable, I wasn't sure if "vstorage" would sound too unfamiliar but I don't think it's a big concern, just changed it from "contract data" to "vstorage" everywhere.

Also added a link to https://docs.agoric.com/guides/zoe/pub-to-storage.html#publishing-to-chainstorage as well

[Jovonni]

LGTM, and i was able to use it to get through building the UI. Aside from my minor comments on clarity of vstorage writing, and reading here, this looks good team 🚀

[samsiegart]

@Jovonni I just made some changes as you suggested and added the tutorial pages to the nav bar, mind taking one more look before I merge?

Also, I realized the AgoricProvider API has changed since Agoric/ui-kit#109. I'll go back and update it here and in the example repo since it's kinda a pain to update all the branches in the example, and this tutorial specifies an older version of @agoric/react-components so it should still work.