Build on Agoric
User Interface
Understanding VStorage in Agoric
What is VStorage?
VStorage (Virtual Storage) is a specialized key-value store that enables communication between smart contracts and user interfaces in Agoric.
Key Characteristics
Contracts (Write-Only)
- Can write data to storage nodes
- Cannot read their own writes
- Used for publishing updates
Clients/UI (Read-Only)
- Can read data through queries
- Cannot modify stored data
- Receives automatic updates
Usage Example
Writing Data
Reading Data
1. Using CLI command agd query to get the data at the storage path
agd query vstorage data 'published.agoricNames'
2. Querying for children of the node at that path
agd query vstorage children 'published.agoricNames'
children:
- Brand
- Installation
- Instance
3. Can also be read via RPC with curl or a javascript fetch(...)
Agoric UI Kit
Agoric UI Kit provides components and tools for building graphical user interfaces for Agoric dApps. It simplifies the process of creating React-based applications that interact with Agoric smart contracts.
Key Components Include:
1. Contract Data Reading
- VStorage integration
- Real-time data updates
- Blockchain state monitoring
2. Wallet Integration
- Compatible wallet connection
- Custom signer support
- Transaction management
3. React Components
- Wallet Connect Button
- Amount Input
- Chain Selector
- Transaction Display
- Purse Management
- For more, you check this link: https://github.com/Agoric/ui-kit/tree/main/packages/react-components
4. Transaction Handling
- Offer creation
- Status tracking
- Response management
Visit the repository to check the code examples out: https://github.com/Agoric/ui-kit
Comments
You need to enroll in the course to be able to comment!