|
2 | 2 |
|
3 | 3 | Here, we will walkthrough the components making up the user interface for the Orchestration dApp.
|
4 | 4 |
|
5 |
| -## Orchestration.tsx |
| 5 | +## `Orchestration` |
6 | 6 |
|
7 |
| -The `Orchestration.tsx` component serves as the main controller for the Orchestration dApp's user interface. It manages |
| 7 | +The [`Orchestration`](https://github.com/Agoric/dapp-orchestration-basics/blob/main/ui/src/components/Orchestration/Orchestration.tsx) component serves as the main controller for the Orchestration dApp's user interface. It manages |
8 | 8 | the state and interactions required for users to create accounts, manage their balances, and perform various blockchain
|
9 | 9 | transactions such as deposits, withdrawals, staking, and unstaking.
|
10 | 10 |
|
11 |
| -## AccountList.tsx |
| 11 | +## `AccountList` |
12 | 12 |
|
13 |
| -The `AccountList.tsx` component is responsible for displaying the list of user accounts and their associated balances in |
| 13 | +The [`AccountList`](https://github.com/Agoric/dapp-orchestration-basics/blob/main/ui/src/components/Orchestration/AccountList.tsx) component is responsible for displaying the list of user accounts and their associated balances in |
14 | 14 | various native denoms. It presents account information in a structured and user-friendly format, allowing users to view
|
15 | 15 | and interact with their Orchestration Accounts directly.
|
16 | 16 |
|
17 |
| -## FetchBalances.tsx |
| 17 | +## `FetchBalances` |
18 | 18 |
|
19 |
| -The `FetchBalances.tsx` component is responsible for retrieving the balances of user accounts from different |
| 19 | +The [`FetchBalances`](https://github.com/Agoric/dapp-orchestration-basics/blob/main/ui/src/components/Orchestration/FetchBalances.tsx) component is responsible for retrieving the balances of user accounts from different |
20 | 20 | blockchains. It interacts with the local RPC endpoints to fetch balance data for addresses on supported chains (for
|
21 | 21 | Osmosis and Agoric).
|
22 | 22 |
|
23 |
| -## RpcEndpoints.tsx |
| 23 | +## `ChainSelector` |
24 | 24 |
|
25 |
| -The `RpcEndpoints.tsx` component provides a convenient place to manage RPC endpoints for different chains, including |
26 |
| -your local agoric instance, to be used by different components. This component is used by other components, like |
27 |
| -`FetchBalances.tsx`, to interact with the correct blockchain network. |
| 25 | +The [`ChainSelector`](https://github.com/Agoric/dapp-orchestration-basics/blob/main/ui/src/components/Orchestration/ChainSelector.tsx) component provides a basic UI element for users to select the Cosmos chain they want to interact |
| 26 | +with. The selected chain is passed back to the parent component, `Orchestration`, and used in further interactions. |
28 | 27 |
|
29 |
| -## ChainSelector.tsx |
| 28 | +## `MakeAccount` |
30 | 29 |
|
31 |
| -The `ChainSelector.tsx` component provides a basic UI element for users to select the Cosmos chain they want to interact |
32 |
| -with. The selected chain is passed back to the parent component, `Orchestration.tsx`, and used in further interactions. |
33 |
| - |
34 |
| -## `MakeAccount.tsx` |
35 |
| - |
36 |
| -The `MakeAccount.tsx` component provides a user interface for managing interchain accounts on the Agoric blockchain. It |
| 30 | +The [`MakeAccount`](https://github.com/Agoric/dapp-orchestration-basics/blob/main/ui/src/components/Orchestration/MakeAccount.tsx) component provides a user interface for managing interchain accounts on the Agoric blockchain. It |
37 | 31 | allows users to create new accounts on selected chains (like Osmosis or Agoric), fetch and display balances of these
|
38 | 32 | accounts, and perform actions such as deposit. The component interacts with the Agoric wallet to make offers and uses
|
39 | 33 | RPC endpoints to retrieve account balances, incorporating loading states and notifications to enhance the user
|
40 | 34 | experience.
|
41 | 35 |
|
42 |
| -## `MakeOffer.tsx` |
| 36 | +## `MakeOffer` |
43 | 37 |
|
44 |
| -The `MakeOffer.tsx` component defines an asynchronous function `makeOffer` that facilitates making an offer through the |
| 38 | +The [`MakeOffer`](https://github.com/Agoric/dapp-orchestration-basics/blob/main/ui/src/components/Orchestration/MakeOffer.tsx) component defines an asynchronous function `makeOffer` that facilitates making an offer through the |
45 | 39 | Agoric wallet. It first checks if a `selectedChain` is provided and retrieves the necessary contract instance
|
46 | 40 | (specifically 'orca') and the `BLD` brand from the contract store. The function then constructs an offer where it gives
|
47 | 41 | a deposit of `1000` units of `BLD`. It initiates the offer using the wallet's `makeOffer` method, providing callbacks to
|
|
0 commit comments