Skip to content

Commit

Permalink
Formatting, some capitalization nits
Browse files Browse the repository at this point in the history
  • Loading branch information
briwylde08 committed Jun 20, 2024
1 parent 27bbe49 commit 4dc235c
Showing 1 changed file with 66 additions and 66 deletions.
132 changes: 66 additions & 66 deletions docs/smart-contracts/guides/dapps/Terminal-UI-Guide.mdx
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
# Guide: Building Functional User Interfaces for Dapps using Terminal User Interface (TUI)
---
title: Build functional user interfaces for dapps using a Terminal User Interface (TUI)
---

## Table of Contents

- [Guide: Building Functional User Interfaces for Dapps using Terminal User Interface (TUI)](#guide-building-functional-user-interfaces-for-dapps-using-terminal-user-interface-tui)
- [Table of Contents](#table-of-contents)
- [Introduction](#introduction)
- [Prerequisites](#prerequisites)
- [Project Setup](#project-setup)
- [Directory Structure](#directory-structure)
- [Installing Dependencies](#installing-dependencies)
- [Configuration](#configuration)
- [Code Breakdown](#code-breakdown)
- [LP_CLI.ts](#lp_clits)
- [Comet.ts](#cometts)
- [Detailed Explanation](#detailed-explanation)
- [Utility Functions](#utility-functions)
- [CometClient Class](#cometclient-class)
- [Introduction](#introduction)
- [Prerequisites](#prerequisites)
- [Project Setup](#project-setup)
- [Directory Structure](#directory-structure)
- [Installing Dependencies](#installing-dependencies)
- [Configuration](#configuration)
- [Code Breakdown](#code-breakdown)
- [LP_CLI.ts](#lp_clits)
- [Comet.ts](#cometts)
- [Detailed Explanation](#detailed-explanation)
- [Utility Functions](#utility-functions)
- [CometClient Class](#cometclient-class)
- [AddressBook.ts](#addressbookts)
- [tsconfig.json](#tsconfigjson)
- [package.json](#packagejson)
Expand Down Expand Up @@ -56,16 +56,16 @@ This guide provides a comprehensive walkthrough for building a functional user i

Before you start, ensure you have the following:

- Basic knowledge of JavaScript/TypeScript.
- Familiarity with Node.js.
- Understanding of blockchain and dapps concepts.
- Basic knowledge of JavaScript/TypeScript,
- Familiarity with Node.js,
- Understanding of blockchain and dapps-related concepts,
- Node.js > 18 and npm installed on your machine.

## Project Setup
## Project setup

### Directory Structure
### Directory structure

The easiest way to get started is to clone the starter repository I made at https://www.github.com/silence48/Comet-TUI But if you like doing things from scratch, I'll try to walk through all of the code in this guide.
The easiest way to get started is to clone the starter repository I made at https://www.github.com/silence48/Comet-TUI. However, if you like doing things from scratch, this guide will attempt to walk through all of the code.

Organize your project directory as follows:

Expand All @@ -85,7 +85,7 @@ project-root/
└── .env
```

### Installing Dependencies
### Installing dependencies

Run the following command to install the necessary dependencies:

Expand All @@ -102,7 +102,7 @@ RPC_URL=https://horizon-testnet.stellar.org
NETWORK_PASSPHRASE="Test SDF Network ; September 2015"
```

## Code Breakdown
## Code breakdown

### LP_CLI.ts

Expand Down Expand Up @@ -586,9 +586,9 @@ export class CometClient {
}
```

### Detailed Explanation
### Detailed explanation

#### Utility Functions
#### Utility functions

**`estJoinPool`**

Expand All @@ -605,7 +605,7 @@ export class CometClient {
- This function estimates the amounts of BLND and USDC that will be received upon exiting the pool by burning a specified amount of LP tokens (`toBurn`) with a maximum slippage.
- It calculates the ratio of burned shares to total shares and uses it to estimate the amounts of BLND and USDC to be withdrawn.

#### CometClient Class
#### CometClient class

**`CometClient`**

Expand All @@ -632,7 +632,7 @@ export class CometClient {

### AddressBook.ts

This file manages contract addresses and their corresponding wasm hashes in files called network.address.json such as `testnet.address.json`.
This file manages contract addresses and their corresponding Wasm hashes in files called network.address.json such as `testnet.address.json`.

```typescript
import { readFileSync, writeFileSync } from "fs";
Expand Down Expand Up @@ -818,17 +818,17 @@ Define the project's dependencies and scripts.
}
```

## Utility Functions
## Utility functions

The utility functions play a crucial role in managing the environment configuration, handling transactions, and parsing ledger entries. Here's a detailed look at what each utility function does:

### env_config.ts

This file loads the environment configuration from a `.env` file and provides utility functions to get user Keypairs.
This file loads the environment configuration from a `.env` file and provides utility functions to get user keypairs.

- **EnvConfig Class**: Loads the environment configuration.
- **loadFromFile()**: Reads the environment variables and initializes the configuration.
- **getUser(userKey: string)**: Retrieves the Keypair for a user from the environment variables.
- **getUser(userKey: string)**: Retrieves the keypair for a user from the environment variables.

```typescript
import { Keypair, SorobanRpc } from "@stellar/stellar-sdk";
Expand Down Expand Up @@ -893,7 +893,7 @@ export const config = EnvConfig.loadFromFile();

This file contains functions for handling Stellar transactions.

- **signWithKeypair(txXdr: string, passphrase: string, source: Keypair)**: Signs a Stellar transaction with a given Keypair.
- **signWithKeypair(txXdr: string, passphrase: string, source: Keypair)**: Signs a Stellar transaction with a given keypair.
- **TxParams Type**: Defines the parameters required for building and signing transactions.

```typescript
Expand Down Expand Up @@ -940,15 +940,15 @@ export async function signWithKeypair(

### address-book.ts

Manages contract addresses and their corresponding wasm hashes in a JSON file.
Manages contract addresses and their corresponding Wasm hashes in a JSON file.

- **AddressBook Class**: Manages the contract addresses and hashes.
- **loadFromFile(network: string)**: Loads the address book from a file based on the specified network.
- **writeToFile()**: Writes the current address book to a file.
- **getContractId(contractKey: string)**: Retrieves the contract ID for a given contract key.
- **setContractId(contractKey: string, contractId: string)**: Sets the contract ID for a given contract key.
- **getWasmHash(contractKey: string)**: Retrieves the wasm hash for a given contract key.
- **setWasmHash(contractKey: string, wasmHash: string)**: Sets the wasm hash for a given contract key.
- **getWasmHash(contractKey: string)**: Retrieves the Wasm hash for a given contract key.
- **setWasmHash(contractKey: string, wasmHash: string)**: Sets the Wasm hash for a given contract key.

```typescript
import { readFileSync, writeFileSync } from "fs";
Expand Down Expand Up @@ -1072,11 +1072,11 @@ export class AddressBook {
}
```

## Comet.ts Functions
## Comet.ts functions

The functions in `comet.ts` are used to interact with the Comet contract. These functions return operation XDRs, which are then used to build transactions. Here’s how they work:

#### Utility Functions
#### Utility functions

**`estJoinPool`**

Expand Down Expand Up @@ -1279,11 +1279,11 @@ export class CometClient {
}
```

### Example: Building and Submitting a Transaction
### Example: building and submitting a transaction

To illustrate how these functions are used, let’s walk through the process of creating and submitting a transaction to join a liquidity pool.

1. **Create the Join Operation**:
1. **Create the join operation**:

- The `join` method of the `CometClient` class is used to create a join operation.
- This operation is represented as an XDR object.
Expand All @@ -1297,7 +1297,7 @@ To illustrate how these functions are used, let’s walk through the process of
});
```

2. **Build the Transaction**:
2. **Build the transaction**:

- The `TransactionBuilder` is used to create a transaction that includes the join operation.
- The transaction is built with a specified fee, timebounds, and network passphrase.
Expand All @@ -1312,7 +1312,7 @@ To illustrate how these functions are used, let’s walk through the process of
.build();
```

3. **Simulate the Transaction**:
3. **Simulate the transaction**:

- Before submitting, the transaction is simulated to ensure it will succeed.
- The simulation response is checked for errors.
Expand All @@ -1326,7 +1326,7 @@ To illustrate how these functions are used, let’s walk through the process of
}
```

4. **Assemble and Submit the Transaction**:
4. **Assemble and submit the transaction**:

- The user is prompted to confirm the transaction.
- If confirmed, the transaction is signed and submitted to the network.
Expand Down Expand Up @@ -1378,17 +1378,17 @@ To illustrate how these functions are used, let’s walk through the process of
}
```

## Inquirer.js Overview
## Inquirer.js overview

### What is Inquirer.js?

Inquirer.js is a collection of common interactive command-line user interfaces. It helps you create interactive command-line applications that can prompt the user with questions and receive input.

### How Does Inquirer.js Work?
### How does Inquirer.js Work?

Inquirer.js provides several types of prompts, such as input, confirm, list, checkbox, etc. You can define a series of questions, each specifying the type of prompt and how the user's response should be handled.

### Setting Up Inquirer.js
### Setting up Inquirer.js

To start using Inquirer.js, you first need to install it via npm:

Expand All @@ -1402,11 +1402,11 @@ Then, import it into your project:
import inquirer from "inquirer";
```

### Creating Prompts
### Creating prompts

Here are some common types of prompts you can use with Inquirer.js:

#### 1. List Prompt
#### 1. List prompt

The list prompt allows the user to select one option from a list of choices.

Expand All @@ -1421,7 +1421,7 @@ const { network } = await inquirer.prompt([
]);
```

#### 2. Input Prompt
#### 2. Input prompt

The input prompt asks the user to enter a string value.

Expand All @@ -1437,7 +1437,7 @@ const { mintAmount } = await inquirer.prompt([
]);
```

#### 3. Confirm Prompt
#### 3. Confirm prompt

The confirm prompt asks the user to confirm a yes/no question.

Expand All @@ -1451,40 +1451,40 @@ const { confirm } = await inquirer.prompt([
]);
```

### Handling User Input
### Handling user input

After defining the prompts, Inquirer.js returns a promise that resolves with an object containing the user's answers. You can then use these answers in your application logic.

### Example Usage
### Example usage

Below is a step-by-step explanation of how the LP_CLI.ts file uses Inquirer.js to interact with the user:

1. **Prompt the User for Network Selection**:
1. **Prompt the user for network selection**:

- The user is presented with a list of networks to choose from (`testnet`, `mainnet`, `futurenet`).
- The selected network is stored in the `network` variable.

2. **Load the Address Book**:
2. **Load the address book**:

- Based on the selected network, the address book is loaded, which contains the contract addresses.

3. **Prompt the User for Mint Amount and Slippage**:
3. **Prompt the user for mint amount and slippage**:

- The user is asked to enter the amount of LP tokens to mint.
- The user is also asked to specify the maximum slippage percentage.

4. **Mint LP Tokens**:
4. **Mint LP tokens**:

- The `mintLPTokens` function is called with the address book, mint amount, and slippage.
- This function handles the logic of estimating the required BLND and USDC amounts, building the transaction, simulating it, and finally submitting it.

5. **Transaction Confirmation**:
5. **Transaction confirmation**:
- Before submitting the transaction, the user is asked to confirm if they want to proceed.
- If the user confirms, the transaction is signed and submitted.

## Running the CLI

### Install and Build the Project
### Install and build the project

Run the following commands to install dependencies and build the project:

Expand All @@ -1501,24 +1501,24 @@ Execute the following command to run the CLI:
yarn run CLI
```

## Example Usage
## Example usage

An example interaction with the CLI:

1. **Select the Network**: Choose between testnet, mainnet, and futurenet.
2. **Enter the Mint Amount**: Specify the amount of LP tokens to mint.
3. **Enter the Maximum Slippage Percentage**: Provide the maximum allowable slippage percentage.
4. **Confirm the Transaction**: Review and confirm the transaction details before submission.
1. **Select the network**: Choose between testnet, mainnet, and futurenet.
2. **Enter the mint amount**: Specify the amount of LP tokens to mint.
3. **Enter the maximum slippage percentage**: Provide the maximum allowable slippage percentage.
4. **Confirm the transaction**: Review and confirm the transaction details before submission.

## Next Steps
## Next steps

### User Assignment: Accepting Custom Input for Tokens and Pool
### User assignment: accepting custom input for tokens and pool

In the current implementation, the CLI adds liquidity to a single predefined pool. To make the CLI more flexible, extend it to allow users to specify the token symbols, token addresses, and the pool contract address they wish to add liquidity to.

### Steps to Implement:
### Steps to implement:

1. **Extend User Prompts**:
1. **Extend user prompts**:

- Add prompts in the `main` function to gather the following information from the user:
- First token symbol and address
Expand Down Expand Up @@ -1561,7 +1561,7 @@ In the current implementation, the CLI adds liquidity to a single predefined poo
]);
```

2. **Modify the `mintLPTokens` Function**:
2. **Modify the `mintLPTokens` function**:

- Update the function to use the user inputs for the pool address, first token address, and second token address.

Expand Down

0 comments on commit 4dc235c

Please sign in to comment.