Create README.md

README.md

@@ -0,0 +1,106 @@
+# UI Kit
+Components and tools for building graphical UIs for Agoric dapps
+
+## Setup
+
+These packages require SES ([learn more](https://github.com/endojs/endo/tree/master/packages/ses)).
+See this [example](https://github.com/Agoric/dapp-inter/blob/main/src/main.tsx#L1) for enabling SES in your application.
+Setup may vary by environment.
+
+## Reading Contract Data (vstorage)
+
+`makeAgoricChainStorageWatcher` can be used to subscribe to updates to vstorage.
+It polls the RPC periodically, automatically batching and de-duping requests for efficiency.
+
+See https://github.com/p2p-org/p2p-agoric-vstorage-viewer to explore vstorage more.
+
+```ts
+import {
+  makeAgoricChainStorageWatcher,
+  AgoricChainStoragePathKind as Kind
+} from '@agoric/rpc';
+
+const watcher = makeAgoricChainStorageWatcher(rpc, chainName);
+
+// Watch vstorage children at a given node.
+const stopWatching = watcher.watchLatest<string[]>(
+  [Kind.Children, 'published.vaultFactory.managers'],
+  managerIds => {
+    console.log('Got vault manager IDs:', managerIds);
+  }
+)
+
+// Stop watching.
+stopWatching();
+
+// Watch vstorage data at a given node.
+watcher.watchLatest<Brands>(
+  [Kind.Data, 'published.agoricNames.brand'],
+  brands => {
+    console.log('Do something with the brands');
+  }
+)
+```
+
+## Connecting to User's Account (Keplr)
+
+```ts
+import { subscribeLatest } from '@agoric/notifier';
+import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
+import { makeAgoricWalletConnection } from '@agoric/web-components';
+
+const watcher = makeAgoricChainStorageWatcher(rpc, chainName);
+const connection = await makeAgoricWalletConnection(watcher);
+const {pursesNotifier, publicSubscribersNotifier} = chainConnection;
+
+for await (const purses of subscribeLatest(pursesNotifier)) {
+  console.log('Got purses:', purses);
+}
+```
+
+## Executing Offers
+
+```ts
+import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
+import { makeAgoricWalletConnection } from '@agoric/web-components';
+
+const watcher = makeAgoricChainStorageWatcher(rpc, chainName);
+const connection = await makeAgoricWalletConnection(watcher);
+
+const amountToGive = {brand: someBrand, value: 123n};
+const amountToWant = {brand: someOtherBrand, value: 456n};
+
+connection.makeOffer(
+  {
+    source: 'agoricContract',
+    instancePath: ['SimpleSwapExampleInstance'],
+    callPipe: [
+      ['getSwapManagerForBrand', [amountToGive.brand]],
+      ['makeSwapOffer']
+    ]
+  },
+  {
+    give: { In: amountToGive },
+    want: { Out: amountToWant },
+  },
+  { exampleArg: 'foo' },
+  ({ status, data }) => {
+    if (status === 'error') {
+      console.error('Offer error', data);
+    }
+    if (status === 'seated') {
+      console.log('Transaction submitted:', data.txn);
+      console.log('Offer id:', data.offerId);
+    }
+    if (status === 'refunded') {
+      console.log('Offer refunded');
+    }
+    if (status === 'accepted') {
+      console.log('Offer accepted');
+    }
+  },
+);
+```
+
+
+

packages/rpc/README.md

@@ -0,0 +1,21 @@
+For more complete examples and setup see [Agoric/ui-kit](https://github.com/Agoric/ui-kit)
+
+```ts
+import {
+  makeAgoricChainStorageWatcher,
+  AgoricChainStoragePathKind as Kind
+} from '@agoric/rpc';
+
+const watcher = makeAgoricChainStorageWatcher(rpc, chainName);
+
+// Watch vstorage children at a given node.
+const stopWatching = watcher.watchLatest<string[]>(
+  [Kind.Children, 'published.vaultFactory.managers'],
+  managerIds => {
+    console.log('Got vault manager IDs:', managerIds);
+  }
+)
+
+// Stop watching.
+stopWatching();
+```

packages/web-components/MAINTAINERS.md

@@ -0,0 +1,18 @@
+## Linting and formatting
+
+To scan the package for linting and formatting errors, run
+
+```bash
+yarn lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+yarn format
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to minimize
+the amount of files in this package.

packages/web-components/README.md

@@ -1,18 +1,19 @@
-## Linting and formatting
+For complete examples and setup see [Agoric/ui-kit](https://github.com/Agoric/ui-kit)
 
-To scan the package for linting and formatting errors, run
+```ts
+import { subscribeLatest } from '@agoric/notifier';
+import { makeAgoricChainStorageWatcher } from '@agoric/rpc';
+import { makeAgoricWalletConnection } from '@agoric/web-components';
 
-```bash
-yarn lint
-```
+const watcher = makeAgoricChainStorageWatcher(rpc, chainName);
+const connection = await makeAgoricWalletConnection(watcher);
+const {pursesNotifier, publicSubscribersNotifier} = chainConnection;
 
-To automatically fix linting and formatting errors, run
+// Sign an on-chain offer transaction.
+connection.makeOffer(...offer);
 
-```bash
-yarn format
+// Read the user's token balances.
+for await (const purses of subscribeLatest(pursesNotifier)) {
+  console.log('Got user purses:', purses);
+}
 ```
-
-## Tooling configs
-
-For most of the tools, the configuration is in the `package.json` to minimize
-the amount of files in this package.