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