Merge pull request #140 from horuslabsio/refactor-frontend

chore refactor frontend

docs/src/chapter_3.md

@@ -3,10 +3,9 @@
 An overview of the different UI components available on Starknet Scaffold.
 Starknet Scaffold provides a set of pre-built components for common web3 use cases. You can make use of them to accelerate and simplify your dapp development.
 
-1. [Connect button & Custom Wallet Modal](./chapter_3/subchapter_1.md)
-2. [Address bar (Displays StarknetID)](./chapter_3/subchapter_2.md)
-3. [Transactions List](./chapter_3/subchapter_3.md)
-4. [User modal](./chapter_3/subchapter_4.md)
-5. [Display account balance](./chapter_3/subchapter_5.md)
-6. [Switch/display network](./chapter_3/subchapter_6.md)
-7. [App Light/Dark mode](./chapter_3/subchapter_7.md)
+1. [Connect Button & Connect Wallet Modal](./chapter_3/subchapter_1.md)
+2. [Address Bar & User Modal](./chapter_3/subchapter_2.md)
+3. [Transaction History](./chapter_3/subchapter_3.md)
+4. [Add Token](./chapter_3/subchapter_4.md)
+5. [Account Balance](./chapter_3/subchapter_5.md)
+6. [Network Switcher](./chapter_3/subchapter_6.md)

docs/src/chapter_3/subchapter_1.md

@@ -1,39 +1,41 @@
 # Connect Button
 
-A custom connect button is located in the header of the page, facilitating the connection of a user's Starknet wallet to the dapp. When clicked, a custom wallet modal appears at the center of the screen.
+The custom connect button is located in the header of the page and facilitates the connection of a user's Starknet wallet to the dapp. When clicked, it triggers a custom wallet modal that appears at the center of the screen.
 
 ## Connect Wallet Modal
 
-The connect wallet modal is a UI component that appears when the connect button is clicked. This component consists of an overlay that spans across the screen and a modal positioned at the center of the overlay. Its primary function is to allow users to select the wallet they wish to use to connect to the dapp.
+The connect wallet modal is a UI component that appears when the connect button is clicked. Its primary function is to allow users to select the wallet they wish to use to connect to the dapp.
 
-The modal is divided into two parts. The left side lists some popular Starknet wallets available for use, such as:
+The modal is divided in to sections:
 
-1. Argent X
-2. Braavos
-3. Argent Web Wallet
-4. Argent (mobile)
-5. Bitget
-6. OKX
+- Left side: Lists popular Starknet wallets available for connection, including:
 
-When any of these options are clicked, a modal from the selected wallet (if installed) opens, allowing the user to unlock their wallet and initiate the connection. If the connection is successful, the user is then redirected to the dapp.
+  1. Argent X
+  2. Braavos
+  3. Argent Web Wallet
+  4. Argent (mobile)
+  5. Bitget
+  6. OKX
 
-The right side of the modal serves to educate the user on how wallet connections work.
+When an option is clicked, the corresponding wallet's modal (if installed) opens, allowing the user to unlock their wallet and connect. Once connected, the user is redirected to the dapp.
+
+- Right side: Provides information to educate users on how wallet connections work.
 
 ## Import
 
 ```
-import ConnectModal from "~/ui_components/ConnectModal";
+import ConnectButton from "~/app/components/lib/Connect";
 ```
 
 ## Usage
 
 ```
-<ConnectModal isOpen={true} onClose={setIsOpen} />
+<ConnectButton />
 ```
 
 ## Props
 
-| Prop    | Type     | Description                                                  |
-| :------ | :------- | :----------------------------------------------------------- |
-| isOpen  | boolean  | State value prop to monitor whether the modal is open or not |
-| onClose | function | Function to handle closing the modal                         |
+| Prop       | Type   | Description                     |
+| :--------- | :----- | :------------------------------ |
+| text?      | string | Name of the button (optional)   |
+| className? | string | CSS class for button (optional) |

docs/src/chapter_3/subchapter_2.md

@@ -1,21 +1,26 @@
-# Address bar (Displays StarknetID)
+# Address Bar & User Modal
 
-The Address bar displays the address of the connected account. If the connected wallet has a Starknet.id, the Address bar will display the Starknet.id profile picture and name. Otherwise, it shows a Blockies-generated image representation of the connected address along with a shortened version of the address.
+## Address Bar
+
+The Address Bar displays the address of the connected account. If the connected wallet has a Starknet.id, the Address Bar will show the Starknet.id profile picture and name. If not, a Blockies-generated image representation of the connected address is displayed alongside a shortened version of the address.
+
+## User Modal
+
+The User Modal is a component that is triggered from the Address Bar. It provides the following details about the connected account:
+
+- Profile Picture & Address: Displays either the user's Starknet.id profile picture or a Blockies-generated image representing the connected address.
+- Wallet Address: Shows the wallet address, which can be copied by the user.
+- Account Balance: Displays the current ETH and STRK balance of the connected wallet.
+- Disconnect Button: Provides an option for the user to disconnect their wallet from the dapp.
 
 ## Import
 
 ```
-import AddressBar from "~/ui_components/AddressBar";
+import AddressBar from "~/app/components/lib/AddressBar";
 ```
 
 ## Usage
 
 ```
-<AddressBar setOpenConnectedModal={setOpenConnectedModal} />
+<AddressBar />
 ```
-
-## Props
-
-| Prop                  | Type     | Description                                               |
-| :-------------------- | :------- | :-------------------------------------------------------- |
-| setOpenConnectedModal | Function | State changing function to control the user modal display |

docs/src/chapter_3/subchapter_3.md

@@ -1,30 +1,29 @@
-# Transactions List
+# Transactions History
 
 This component displays the list of transactions performed by the connected wallet.
 
 Each transaction item shows the following:
 
-1. Transaction status: represented by icons. The status of a transaction can be one of the following: completed, pending, or failed.
-2. Transaction ID
-3. Transaction description
-4. Transaction time and date
-5. "See transaction": redirects the user to view the transaction on the Starkscan block explorer, where they can access more information about the transaction.
+- Transaction status: represented by icons. The status of a transaction can be one of the following: completed, pending, or failed.
+- User address
+- Transaction time and date
+- "See transaction": redirects the user to view the transaction on the Starkscan block explorer.
 
 ## Import
 
 ```
-import TransactionModal from "~/TranscationList/TransactionModal";
+import TransactionsButton from "~/app/components/lib/Transactions";
 ```
 
 ## Usage
 
 ```
-<TransactionModal isOpen={true} onClose={setIsOpen} />
+ <TransactionsButton />
 ```
 
 ## Props
 
-| Prop    | Type     | Description                                                  |
-| :------ | :------- | :----------------------------------------------------------- |
-| isOpen  | boolean  | State value prop to monitor whether the modal is open or not |
-| onClose | function | Function to handle closing the modal                         |
+| Prop       | Type   | Description                     |
+| :--------- | :----- | :------------------------------ |
+| text?      | string | Name of the button (optional)   |
+| className? | string | CSS class for button (optional) |

docs/src/chapter_3/subchapter_4.md

@@ -1,23 +1,29 @@
-# User modal
+# Add Token
 
-This modal contains a copy button for copying the address of the connected wallet, a disconnect button for disconnecting the wallet, and displays the ETH/STRK balance of the connected wallet. You can access this modal by clicking on the address bar component.
+The Add Token component enables users to add a custom token to their wallet. To successfully add a token, users need to provide the following information:
+
+- Contract Address: The contract address of the token.
+- Token Name: The name of the token.
+- Token Symbol: The token's symbol.
+- Decimals: The decimal for the token.
+
+Once all fields are filled out, users can click the Add Token button to add the custom token to their wallet.
 
 ## Import
 
 ```
-import {UserModal} from "~/ui_components/AddressBar";
+import AddTokenButton from "~/app/components/lib/AddToken";
 ```
 
 ## Usage
 
 ```
-<UserModal openConnectedModal={openConnectedModal} address="0x34aA3F359A9D614239015126635CE7732c18fDF3" closeConnectedModal={closeConnectedModal} />
+<AddTokenButton />
 ```
 
 ## Props
 
-| Prop                | Type     | Description                                                   |
-| :------------------ | :------- | :------------------------------------------------------------ |
-| openConnectedModal  | boolean  | State value prop to monitor whether the modal is open or not. |
-| address             | string   | Address in 0x\_\_\_ format.                                   |
-| closeConnectedModal | function | Function to handle the closing of the modal.                  |
+| Prop       | Type   | Description                     |
+| :--------- | :----- | :------------------------------ |
+| text?      | string | Name of the button (optional)   |
+| className? | string | CSS class for button (optional) |

docs/src/chapter_3/subchapter_5.md

@@ -1,17 +1,17 @@
-# Display account balance
+# Account Balance
 
 This component shows the STRK and ETH balance of the connected wallet address.
 
 ## Import
 
 ```
-import AccountBalance from "~/ui_components/AccountBalance";
+import AccountBalance from "~/app/component/AccountBalance";
 ```
 
 ## Usage
 
 ```
-<AccountBalance address="0x34aA3F359A9D614239015126635CE7732c18fDF3" />
+<AccountBalance address="0x34aA3F359A9D614239015126635CE7732c18fDF3"/>
 ```
 
 ## Props

docs/src/chapter_3/subchapter_6.md

@@ -1,11 +1,11 @@
-# Switch/display network
+# Network Switcher
 
-This is a dropdown component used to switch between Starknet networks (mainnet/sepolia).
+This component allows users to switch between Starknet networks (mainnet/sepolia).
 
 ## Import
 
 ```
-import NetworkSwitcher from "~/ui_components/NetworkSwitcher";
+import NetworkSwitcher from "~/app/components/lib/NetworkSwitcher";
 ```
 
 ## Usage