From d5fbf2f49ffd876ecb33074db7d01e39940d5c20 Mon Sep 17 00:00:00 2001 From: Samuel Siegart Date: Wed, 16 Aug 2023 17:28:24 -0700 Subject: [PATCH 1/4] Create README.md --- README.md | 127 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..5212de3 --- /dev/null +++ b/README.md @@ -0,0 +1,127 @@ +# 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. + +*package.json:* +``` +"@agoric/rpc": "^0.4.1-dev-7cf64bb.0" +``` + + +*app.ts:* +```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( + [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( + [Kind.Data, 'published.agoricNames.brand', + brands => { + console.log('Do something the brands'); + } +) +``` + +## Connecting to User's Account (Keplr) + +*package.json:* +``` +"@agoric/notifier": "^0.6.2", +"@agoric/rpc": "^0.4.1-dev-7cf64bb.0", +"@agoric/web-components": "0.10.1-dev-7cf64bb.0" +``` + +*app.ts:* +```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 + +*package.json:* +``` +"@agoric/rpc": "^0.4.1-dev-7cf64bb.0", +"@agoric/web-components": "0.10.1-dev-7cf64bb.0" +``` + +*app.ts:* +```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'); + } + }, +); +``` + + + From fc95590b0f5e2d0ff612c35661967dabb934396a Mon Sep 17 00:00:00 2001 From: Samuel Siegart Date: Wed, 16 Aug 2023 17:30:29 -0700 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5212de3..2724b5c 100644 --- a/README.md +++ b/README.md @@ -44,7 +44,7 @@ stopWatching(); watcher.watchLatest( [Kind.Data, 'published.agoricNames.brand', brands => { - console.log('Do something the brands'); + console.log('Do something with the brands'); } ) ``` From bace87956a748caa52860c964b441b699c7443fc Mon Sep 17 00:00:00 2001 From: Samuel Siegart Date: Wed, 16 Aug 2023 17:31:13 -0700 Subject: [PATCH 3/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2724b5c..b0c1e5c 100644 --- a/README.md +++ b/README.md @@ -66,7 +66,7 @@ import { makeAgoricWalletConnection } from '@agoric/web-components'; const watcher = makeAgoricChainStorageWatcher(rpc, chainName); const connection = await makeAgoricWalletConnection(watcher); -const [pursesNotifier, publicSubscribersNotifier] = chainConnection; +const {pursesNotifier, publicSubscribersNotifier} = chainConnection; for await (const purses of subscribeLatest(pursesNotifier)) { console.log('Got purses:', purses); From cb711adf5cb06f6344df392dee2e08b44fab2e32 Mon Sep 17 00:00:00 2001 From: Samuel Siegart Date: Sat, 19 Aug 2023 10:06:51 -0700 Subject: [PATCH 4/4] Update README.md --- README.md | 29 ++++---------------------- packages/rpc/README.md | 21 +++++++++++++++++++ packages/web-components/MAINTAINERS.md | 18 ++++++++++++++++ packages/web-components/README.md | 27 ++++++++++++------------ 4 files changed, 57 insertions(+), 38 deletions(-) create mode 100644 packages/rpc/README.md create mode 100644 packages/web-components/MAINTAINERS.md diff --git a/README.md b/README.md index b0c1e5c..058f104 100644 --- a/README.md +++ b/README.md @@ -14,13 +14,6 @@ It polls the RPC periodically, automatically batching and de-duping requests for See https://github.com/p2p-org/p2p-agoric-vstorage-viewer to explore vstorage more. -*package.json:* -``` -"@agoric/rpc": "^0.4.1-dev-7cf64bb.0" -``` - - -*app.ts:* ```ts import { makeAgoricChainStorageWatcher, @@ -31,7 +24,7 @@ const watcher = makeAgoricChainStorageWatcher(rpc, chainName); // Watch vstorage children at a given node. const stopWatching = watcher.watchLatest( - [Kind.Children, 'published.vaultFactory.managers', + [Kind.Children, 'published.vaultFactory.managers'], managerIds => { console.log('Got vault manager IDs:', managerIds); } @@ -42,7 +35,7 @@ stopWatching(); // Watch vstorage data at a given node. watcher.watchLatest( - [Kind.Data, 'published.agoricNames.brand', + [Kind.Data, 'published.agoricNames.brand'], brands => { console.log('Do something with the brands'); } @@ -51,14 +44,6 @@ watcher.watchLatest( ## Connecting to User's Account (Keplr) -*package.json:* -``` -"@agoric/notifier": "^0.6.2", -"@agoric/rpc": "^0.4.1-dev-7cf64bb.0", -"@agoric/web-components": "0.10.1-dev-7cf64bb.0" -``` - -*app.ts:* ```ts import { subscribeLatest } from '@agoric/notifier'; import { makeAgoricChainStorageWatcher } from '@agoric/rpc'; @@ -75,13 +60,6 @@ for await (const purses of subscribeLatest(pursesNotifier)) { ## Executing Offers -*package.json:* -``` -"@agoric/rpc": "^0.4.1-dev-7cf64bb.0", -"@agoric/web-components": "0.10.1-dev-7cf64bb.0" -``` - -*app.ts:* ```ts import { makeAgoricChainStorageWatcher } from '@agoric/rpc'; import { makeAgoricWalletConnection } from '@agoric/web-components'; @@ -99,6 +77,7 @@ connection.makeOffer( callPipe: [ ['getSwapManagerForBrand', [amountToGive.brand]], ['makeSwapOffer'] + ] }, { give: { In: amountToGive }, @@ -113,7 +92,7 @@ connection.makeOffer( console.log('Transaction submitted:', data.txn); console.log('Offer id:', data.offerId); } - if (status === 'refunded') + if (status === 'refunded') { console.log('Offer refunded'); } if (status === 'accepted') { diff --git a/packages/rpc/README.md b/packages/rpc/README.md new file mode 100644 index 0000000..3018413 --- /dev/null +++ b/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( + [Kind.Children, 'published.vaultFactory.managers'], + managerIds => { + console.log('Got vault manager IDs:', managerIds); + } +) + +// Stop watching. +stopWatching(); +``` diff --git a/packages/web-components/MAINTAINERS.md b/packages/web-components/MAINTAINERS.md new file mode 100644 index 0000000..51cb38a --- /dev/null +++ b/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. diff --git a/packages/web-components/README.md b/packages/web-components/README.md index 51cb38a..d43290e 100644 --- a/packages/web-components/README.md +++ b/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.