feat(ui): add links to client dapps explainer

main/guides/ui-tutorial/conclusion/index.md

@@ -12,9 +12,9 @@ With these basics in place, the world of Agoric UI development has opened up to
 newly acquired knowledge, consider trying out the following tasks:
 
 - Spruce up your UI with `interchain-ui` components and try customizing the theme.
-- Add automated e2e testing using https://github.com/agoric-labs/synpress
+- Add automated e2e testing using https://github.com/agoric-labs/synpress.
 - Add a new item to the "Offer Up" contract and implement UI support for it.
-- Deploy the contract to a testnet and adding the `NetworkDropdown` component to your dapp to switch between networks.
+- Deploy the contract to a testnet and add the `NetworkDropdown` component to your dapp to switch between networks.
 - Write your own dapp and implement a custom UI for it.
 
 Check out the #dev channel in the Discord with any questions or feedback for future improvements on this guide.

main/guides/ui-tutorial/connect-wallet/index.md

@@ -77,7 +77,10 @@ export const usePurse = (brandPetname: string) => {
 };
 ```
 
-This provides a utility for looking up a user's purse by name.
+This provides a utility for looking up a user's purse by name. Notice how it accesses `purses` from `useAgoric()`.
+The `<AgoricProvider>` handles all the chain queries to fetch the purses, and automatically updates polls and
+updates `purses` whenever the balances change. It also coalesces ERTP purses with [VBank Assets and Cosmos Bank Balances](../../getting-started/contract-rpc.md#vbank-assets-and-cosmos-bank-balances) automatically. See [Smart Wallet VStorage Topics](../../getting-started/contract-rpc.md#smart-wallet-vstorage-topics)
+for more details about where this data comes from.
 
 Next, we'll add a dependency on `@agoric/web-components`, which provides a utility for rendering
 amounts and handling various denoms:

main/guides/ui-tutorial/making-an-offer/index.md

@@ -123,7 +123,6 @@ const Trade = () => {
 As you can see, you're storing `choices` with a `useState` hook. This way, as the user changes the inputs,
 the number of items of each type is updated. Later on you'll use `choices` to specify the offer.
 
-
 Next, you'll add an input to let the user specify the amount of IST they want to give in exchange for the items.
 First, get a reference to the IST purse with the `usePurse` you created earlier, and create a state hook for the IST value:
 
@@ -139,7 +138,7 @@ const Trade = () => {
 Next, use the `<AmountInput>` component to add an input for the IST "give" amount:
 
 ```tsx
-import { AmountInput } from '@agoric/react-components'; 
+import { AmountInput } from '@agoric/react-components';
 
 ...
 
@@ -209,13 +208,16 @@ const submitOffer = () => {
  if (update.status === 'refunded') {
  alert('Offer rejected');
  }
- }
+ },
  );
 };
 ```
 
-This uses the `makeCopyBag` util to construct the Item amount in a way that the contract can understand.
-Add it to your dependencies:
+For specifics on how offers work, see [Specifying Offers](../../getting-started/contract-rpc.md#specifying-offers). The `makeOffer` function allows you to specify an
+`InvitationSpec`, automatically handles the marshalling aspect, and makes it easy to
+handle updates to the offer status.
+
+The function you just wrote uses the `makeCopyBag` util to construct the Item amount in a way that the contract can understand. Add it to your dependencies:
 
 ```
 yarn add -D @agoric/store@0.9.2
@@ -232,9 +234,11 @@ declare module '@agoric/store' {
 Now, simply add a button to submit the offer:
 
 ```tsx
- {!!(brands && instance && makeOffer && istPurse) && (
+{
+ !!(brands && instance && makeOffer && istPurse) && (
  <button onClick={submitOffer}>Make Offer</button>
- )}
+ );
+}
 ```
 
 Upon clicking the offer, you should see a Keplr window pop up to approve the transaction with the "Give" and "Want"

main/guides/ui-tutorial/querying-contract-data/index.md

@@ -38,9 +38,7 @@ export default Trade;
 And add some styling for it in `App.css` while we're at it:
 
 ```css
-...
-
-.trade {
+... .trade {
  display: flex;
  flex-direction: column;
  justify-content: center;
@@ -112,9 +110,14 @@ export const useContract = () => {
 As you can see, this hook makes use of `chainStorageWatcher` to watch two vstorage paths, and logs the results to the console:
 
 - `published.agoricNames.instance` - The list of available contract instances on-chain, keyed by name.
-- `published.agoricNames.brand` - The list of available brands on-chain, keyed by name,
+- `published.agoricNames.brand` - The list of available brands on-chain, keyed by name.
 
-Go ahead and add this hook to the `Trade` component you made before this:
+The `chainStorageWatcher` handles all the vstorage queries and marshalling for you, so
+you get convenient access to the data from your application. It automatically polls
+and emits updates when the data on-chain changes. For more details about vstorage, see
+[Querying VStorage](../../getting-started/contract-rpc.md#querying-vstorage).
+
+Next, go ahead and add this hook to the `Trade` component you made before this:
 
 ```tsx
 import { useContract } from './hooks';
@@ -129,7 +132,6 @@ const Trade = () => {
 };
 
 export default Trade;
-
 ```
 
 You should now see the `brands` and `instances` being logged to the console. See if you