Update document

iotaledger · Sep 18, 2024 · c87c2b5 · c87c2b5
1 parent cde2307
commit c87c2b5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 46 deletions.
diff --git a/docs/build/isc/v1.3/docs/tutorials/defi-lend-borrow-tutorial-part-2.md b/docs/build/isc/v1.3/docs/tutorials/defi-lend-borrow-tutorial-part-2.md
@@ -26,25 +26,24 @@ npm install ethers
 
 ## Creating the UI
 ### Code Structure
-- `Context.js`: Defines the global context for web3 and other account data.
-- `Components`: Contains below components for the UI :
-    - `NavigationBar`
-    - `LendBorrowPlatformDetails`
-      - `AllAssetsList`
-    - `TransactionsCard`
-      - `Tabs`
-      -  `TransactionsForm`
-    - `AccountDetails`
-    - `ConnectWallet`
-    - `TransactionsAlert`
+- [`Context.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/context/Context.js): Defines the global context for web3 and other account data.
+- `Components`: Contains the components listed below for the UI :
+    - [`NavigationBar`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/NavigationBar.js)
+    - [`LendBorrowPlatformDetails`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/LendBorrowPlatformDetails/index.js)
+      - [`AllAssetsList`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/LendBorrowPlatformDetails/AllAssetsList.js)
+    - [`TransactionsCard`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionsCard/index.js)
+      - [`Tabs`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionsCard/Tabs.js)
+      -  [`TransactionsForm`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionsCard/TransactionForm.js)
+    - [`AccountDetails`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/AccountDetails.js)
+    - [`ConnectWallet`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/ConnectWallet.js)
+    - [`TransactionsAlert`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionAlert.js)
 - `Utils`: 
-    - `etherUtils.js`
-    - `contractAbi.js`
-    - `formats.js`
-    - `sendTransactions.js`
-
-### Context
+    - [`etherUtils.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/ethersUtils.js)
+    - [`contractAbi.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/contractAbi.js)
+    - [`formats.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/formats.js)
+    - [`sendTransactions.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/sendTransactions.js)
 
+### `Context`
 Create a directory named `context` and a file `Context.js`inside the app.
 This `Context.js` file sets up a context for managing wallet connection, balance information, and transaction details in a React application. It uses `createContext` to create a `Context` object, and the `WalletProvider` component provides this context to child components.
 
@@ -55,8 +54,9 @@ This setup facilitates easy access to wallet-related data and actions across the
 ```javascript reference
 https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153886e4c0457654a5b/lend-borrow-ui/src/context/Context.js#L1-L82
 ```
+## Components
 
-### Navbar
+### `NavigationBar`
 The `Navbar` component manages wallet connection and user interactions. It displays the connected wallet address, balance, and provides a dropdown menu with options to view the balance or disconnect the wallet. It uses `context` to retrieve wallet details and fetches the user's native token balance. The component also includes a button to navigate to the accounts section of the app. 
 
 ```javascript reference
@@ -66,15 +66,15 @@ https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153
 ### Dashboard 
 the dashboard page consists of two components, `LendBorrowPlatformDetails` and `AllAssetsList` which shows details of all the supported tokens and details about the tokens and platform.
 
-#### LendBorrowPlatformDetails component
+#### `LendBorrowPlatformDetails` 
 The `LendBorrowPlatformDetails` component displays a summary of the total supplies and total borrows on a lending/borrowing platform. It accepts two props: `totalSuppliesSum` and `totalBorrowsSum`, which represent the sum of all supplied and borrowed assets. The component formats and truncates these values to display the first six digits and shows them in a styled card layout. If no borrow amount is provided, it defaults to "$ 0".
 
 ```javascript reference
 https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153886e4c0457654a5b/lend-borrow-ui/src/components/LendBorrowPlatformDetails/index.js#L1-L27
 ```
 
 
-####  AllAssetsList
+####  `AllAssetsList`
 The AllAssetsList component fetches and displays a list of supported assets (tokens) in a decentralized finance (DeFi) application. It retrieves token data, including their supply, borrow amounts, collateral factor, and price, and renders them in a table format. Here's a breakdown:
 
 1. State Management:
@@ -104,13 +104,13 @@ https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153
 ```
 
 
-### TransactionsCard 
+### `TransactionsCard` 
 This component manages and displays a card for performing different types of transactions (like `Supply` or `Borrow`) based on the selected asset. It uses state named `activeTab` to Keeps track of the currently active transaction type (e.g., "Supply", "Withdraw").
 
  - `TabsPanel`: Allows users to switch between different transaction types.
  - `TransactionForm`: Displays the form for performing the selected transaction on the selectedAsset.
 
- #### TransactionForm 
+ #### `TransactionForm` 
  This component facilitates token transactions (`Supply`, `Withdraw`, `Borrow` or `Repay`) based on the selected asset. It:
 
 Manages user input for transaction amounts and tracks token balances.
@@ -127,7 +127,7 @@ https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153
 You can refer this repository for full React UI code : [lend-borrow-ui](https://github.com/iota-community/Defi-lend-borrow/tree/main/lend-borrow-ui)
 :::
 
-### Example usage
+### Usage Example 
 
 - Connect your Metamask wallet: Click the "Connect Wallet" button on the app to open the below metamask popup:
 

diff --git a/docs/build/isc/v1.4/docs/tutorials/defi-lend-borrow-tutorial-part-2.md b/docs/build/isc/v1.4/docs/tutorials/defi-lend-borrow-tutorial-part-2.md
@@ -26,25 +26,24 @@ npm install ethers
 
 ## Creating the UI
 ### Code Structure
-- `Context.js`: Defines the global context for web3 and other account data.
-- `Components`: Contains below components for the UI :
-    - `NavigationBar`
-    - `LendBorrowPlatformDetails`
-      - `AllAssetsList`
-    - `TransactionsCard`
-      - `Tabs`
-      -  `TransactionsForm`
-    - `AccountDetails`
-    - `ConnectWallet`
-    - `TransactionsAlert`
+- [`Context.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/context/Context.js): Defines the global context for web3 and other account data.
+- `Components`: Contains the components listed below for the UI :
+    - [`NavigationBar`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/NavigationBar.js)
+    - [`LendBorrowPlatformDetails`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/LendBorrowPlatformDetails/index.js)
+      - [`AllAssetsList`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/LendBorrowPlatformDetails/AllAssetsList.js)
+    - [`TransactionsCard`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionsCard/index.js)
+      - [`Tabs`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionsCard/Tabs.js)
+      -  [`TransactionsForm`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionsCard/TransactionForm.js)
+    - [`AccountDetails`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/AccountDetails.js)
+    - [`ConnectWallet`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/ConnectWallet.js)
+    - [`TransactionsAlert`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/components/TransactionAlert.js)
 - `Utils`: 
-    - `etherUtils.js`
-    - `contractAbi.js`
-    - `formats.js`
-    - `sendTransactions.js`
-
-### Context
+    - [`etherUtils.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/ethersUtils.js)
+    - [`contractAbi.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/contractAbi.js)
+    - [`formats.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/formats.js)
+    - [`sendTransactions.js`](https://github.com/iota-community/Defi-lend-borrow/blob/main/lend-borrow-ui/src/utils/sendTransactions.js)
 
+### `Context`
 Create a directory named `context` and a file `Context.js`inside the app.
 This `Context.js` file sets up a context for managing wallet connection, balance information, and transaction details in a React application. It uses `createContext` to create a `Context` object, and the `WalletProvider` component provides this context to child components.
 
@@ -55,8 +54,9 @@ This setup facilitates easy access to wallet-related data and actions across the
 ```javascript reference
 https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153886e4c0457654a5b/lend-borrow-ui/src/context/Context.js#L1-L82
 ```
+## Components
 
-### Navbar
+### `NavigationBar`
 The `Navbar` component manages wallet connection and user interactions. It displays the connected wallet address, balance, and provides a dropdown menu with options to view the balance or disconnect the wallet. It uses `context` to retrieve wallet details and fetches the user's native token balance. The component also includes a button to navigate to the accounts section of the app. 
 
 ```javascript reference
@@ -66,15 +66,15 @@ https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153
 ### Dashboard 
 the dashboard page consists of two components, `LendBorrowPlatformDetails` and `AllAssetsList` which shows details of all the supported tokens and details about the tokens and platform.
 
-#### LendBorrowPlatformDetails component
+#### `LendBorrowPlatformDetails` 
 The `LendBorrowPlatformDetails` component displays a summary of the total supplies and total borrows on a lending/borrowing platform. It accepts two props: `totalSuppliesSum` and `totalBorrowsSum`, which represent the sum of all supplied and borrowed assets. The component formats and truncates these values to display the first six digits and shows them in a styled card layout. If no borrow amount is provided, it defaults to "$ 0".
 
 ```javascript reference
 https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153886e4c0457654a5b/lend-borrow-ui/src/components/LendBorrowPlatformDetails/index.js#L1-L27
 ```
 
 
-####  AllAssetsList
+####  `AllAssetsList`
 The AllAssetsList component fetches and displays a list of supported assets (tokens) in a decentralized finance (DeFi) application. It retrieves token data, including their supply, borrow amounts, collateral factor, and price, and renders them in a table format. Here's a breakdown:
 
 1. State Management:
@@ -104,13 +104,13 @@ https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153
 ```
 
 
-### TransactionsCard 
+### `TransactionsCard` 
 This component manages and displays a card for performing different types of transactions (like `Supply` or `Borrow`) based on the selected asset. It uses state named `activeTab` to Keeps track of the currently active transaction type (e.g., "Supply", "Withdraw").
 
  - `TabsPanel`: Allows users to switch between different transaction types.
  - `TransactionForm`: Displays the form for performing the selected transaction on the selectedAsset.
 
- #### TransactionForm 
+ #### `TransactionForm` 
  This component facilitates token transactions (`Supply`, `Withdraw`, `Borrow` or `Repay`) based on the selected asset. It:
 
 Manages user input for transaction amounts and tracks token balances.
@@ -127,7 +127,7 @@ https://github.com/iota-community/Defi-lend-borrow/blob/ee1dd2bd3f94ec594163c153
 You can refer this repository for full React UI code : [lend-borrow-ui](https://github.com/iota-community/Defi-lend-borrow/tree/main/lend-borrow-ui)
 :::
 
-### Example usage
+### Usage Example 
 
 - Connect your Metamask wallet: Click the "Connect Wallet" button on the app to open the below metamask popup: