chore: added documentation for UI components

docs/src/SUMMARY.md

@@ -3,6 +3,14 @@
 - [Chapter 1](./chapter_1.md)
 - [Chapter 2](./chapter_2.md)
 - [Chapter 3](./chapter_3.md)
+  - [Connect button & Custom Wallet Modal](./chapter_3/subchapter_1.md)
+  - [Address bar (Displays StarknetID)](./chapter_3/subchapter_2.md)
+  - [Transactions List](./chapter_3/subchapter_3.md)
+  - [User modal](./chapter_3/subchapter_4.md)
+  - [Display account balance](./chapter_3/subchapter_5.md)
+  - [Switch/display network](./chapter_3/subchapter_6.md)
+  - [App Light/Dark mode](./chapter_3/subchapter_7.md)
+  - [Burner wallet UI](./chapter_3/subchapter_8.md)
 - [Chapter 4](./chapter_4.md)
 - [Chapter 5](./chapter_5.md)
 - [Chapter 6](./chapter_6.md)

docs/src/chapter_3.md

@@ -1,7 +1,13 @@
 # UI Components
 
 An overview of the different UI components available on Starknet Scaffold.
+The 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.
 
-Resources:
-- List of components: https://github.com/argentlabs/Starknet-Scaffold?tab=readme-ov-file#ui-section
-- https://docs.scaffoldeth.io/components
+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)
+8. [Burner wallet UI](./chapter_3/subchapter_8.md)

docs/src/chapter_3/subchapter_1.md

@@ -0,0 +1,43 @@
+# Connect Button
+
+A custom connect button is available and is found at the header of the page which aids in the connection of a users Starknet wallet to the dapp. Once clicked, a custom wallet modal pops up at the center of the screen.
+
+# Connect Wallet Modal
+
+This connect wallet modal is a UI component that only appears once the connect button is clicked. This component consists of an overlay which spans all across the screen and a modal that is located at the center of the overlay. This is component's primary function is to allow users select the wallet they wish to use to connect to the Dapp.
+
+The modal is divided into two parts. The left side of the modal lists some popular starknet wallets available to be used such as;
+
+1. Argent X
+2. Braavos
+3. Argent Web Wallet
+4. Argent(mobile).
+
+When any of these are clicked, a modal from that particular wallet (if installed) is opened and the user then unlocks their wallet and instantiates the connection. If the connection is successful, the user is then redirected to the dapp.
+
+The right side of the modal helps as an aid to educate the user on how wallet connections work.
+
+This modal can be closed by the following ways;
+
+1. By connecting to one of the available wallets
+2. Clicking outside the modal(the overlay).
+3. Clicking the cancel button located at the top right corner of the modal
+
+## Import
+
+```
+import ConnectModal from "~/components/ConnectModal";
+```
+
+## Usage
+
+```
+<ConnectModal isOpen={true} onClose={setIsOpen} />
+```
+
+## 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                         |

docs/src/chapter_3/subchapter_2.md

@@ -0,0 +1,21 @@
+# Address bar (Displays StarknetID)
+
+To indicate that a wallet is connected to the dApp, the header of the page features an Address bar. If the connected wallet has a StarknetID, the Address bar will display the StarknetID profile picture and name. If the wallet does not have a StarknetID, it will instead show a Blockies-generated image representation of the connected address along with a shortened version of the address.
+
+## Import
+
+```
+import AddressBar from "~/components/AddressBar";
+```
+
+## Usage
+
+```
+<AddressBar setOpenConnectedModal={setOpenConnectedModal} />
+```
+
+## Props
+
+| Prop                  | Type     | Description                                               |
+| :-------------------- | :------- | :-------------------------------------------------------- |
+| setOpenConnectedModal | Function | State changing function to control the user modal display |

docs/src/chapter_3/subchapter_3.md

@@ -0,0 +1,30 @@
+# Transactions List
+
+This is a component that shows the list of transactions done by the connected wallet.
+
+Each transaction item shows the:
+
+1. Transaction status: which is represented by icons. The status of a transaction can be one of the following; Completed, pending, Failed.
+2. Transaction ID
+3. Transaction Description
+4. Transaction time and date
+5. "See transaction" button: which redirects the user to view the transaction on StarkScan block explorer where they can get more information of the transaction.
+
+## Import
+
+```
+import TransactionModal from "~/components/TransactionModal";
+```
+
+## Usage
+
+```
+<TransactionModal isOpen={true} onClose={setIsOpen} />
+```
+
+## 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                         |

docs/src/chapter_3/subchapter_4.md

@@ -0,0 +1,27 @@
+# User modal
+
+This modal is used to copy the connected wallet address, disconnect the wallet from the dapp and view connected account. This modal can be accessed by clicking on the address bar component. The modal contains firstly contains an avatar which is either the starknetId profile picture or a blockies image representation of the connected address.
+
+Then it has a component that either displays the StarknetId name or the connected address. This also contains a copy button to help copy the address or name with one click.
+
+Then lastly it has a component that shows the connected [account balance](subchapter_5.md) and disconnect button that once clicked, it disconnects the current connected wallet from the dapp.
+
+## Import
+
+```
+import UserModal from "~/components/UserModal";
+```
+
+## Usage
+
+```
+<UserModal openConnectedModal={openConnectedModal} address="0x34aA3F359A9D614239015126635CE7732c18fDF3" closeConnectedModal={closeConnectedModal} />
+```
+
+## 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.                  |

docs/src/chapter_3/subchapter_5.md

@@ -0,0 +1,21 @@
+# Display account balance
+
+This component shows the STRK and ETH balance of the passed in address.
+
+## Import
+
+```
+import AccountBalance from "~/components/AccountBalance";
+```
+
+## Usage
+
+```
+<AccountBalance address="0x34aA3F359A9D614239015126635CE7732c18fDF3" />
+```
+
+## Props
+
+| Prop    | Type   | Description                 |
+| :------ | :----- | :-------------------------- |
+| address | string | Address in 0x\_\_\_ format. |

docs/src/chapter_3/subchapter_6.md

@@ -0,0 +1,15 @@
+# Switch/display network
+
+This is a dropdown component used to switch between networks of the wallet connected to the dapp. The available networks to be toggled between are Sepolia Network and Mainnet Network.
+
+## Import
+
+```
+import NetworkSwitcher from "~/components/NetworkSwitcher";
+```
+
+## Usage
+
+```
+<NetworkSwitcher />
+```

docs/src/chapter_3/subchapter_7.md

@@ -0,0 +1,24 @@
+# App Light/Dark mode
+
+The theme toggler is used to switch between light and dark modes of the dapp.
+
+## Import
+
+```
+import ThemeSwitch from "./Theme";
+```
+
+## Usage
+
+```
+  <ThemeSwitch className="flex md:hidden dark:transform-none transform dark:translate-none transition-all duration-500 ease-in-out" action={changeTheme} theme={theme} openMenu={openMenu} />
+```
+
+## Props
+
+| Prop      | Type     | Description                                      |
+| :-------- | :------- | :----------------------------------------------- |
+| className | string   | Additional classses to be added to the component |
+| action    | function | function to change the theme of the dapp         |
+| theme     | string   | specify the current theme of the dapp            |
+| openMenu  | boolean  | state value for wether a menu is open or not.    |

docs/src/chapter_3/subchapter_8.md

@@ -0,0 +1,33 @@
+# Burner wallet UI
+
+Burner wallets are temporary wallets that can be generated and used during the course of development. Burner wallets can be generated and connected in the burner page. Burner wallets are only supported on the Sepolia network and a user can only only generate a maximum of 5 wallets at a time.
+
+The burner wallet UI shows the ETH and STRK balance which is 0.000 initially and also shows the address which can be easily copied by clicking the copy button. The wallet can be easily funded. The component also has connect button that connects the burner wallet to the dapp.
+
+Once the burner wallet has been connected, two buttons are exposed, a send button and an execute button. The Send button pops out a modal to help to send either ETH or STRK. While the execute button pops out a modal which has a form that allows the user to type in the contract address, function name and arguments. Once the form is submitted, the function call is executed.
+
+## Import
+
+```
+import BurnerWallet from "~/components/BurnerWallet/BurnerWallet";
+```
+
+## Usage
+
+```
+ <BurnerWallet wallet={wallet} />
+```
+
+## Props
+
+```
+type Wallet = {
+  address: string;
+  publicKey: string;
+  privateKey: string;
+};
+```
+
+| Prop   | Type   | Description                                                              |
+| :----- | :----- | :----------------------------------------------------------------------- |
+| wallet | wallet | Generated burner wallet that holds the address, publicKey and privateKey |