dapp-docs: added source code documentation (#438)

TEST_SETUP.md

@@ -10,7 +10,7 @@
 - [Hedera accounts](https://docs.hedera.com/hedera/getting-started/introduction#create-hedera-portal-profile-faucet)
 - [prettier pluggin](https://prettier.io/) (recommended)
 
-**_Notes_**: If your IDE does not support the Prettier plugin, please follow the [code formatter guidelines](GUIDELINES.md#code-formatter) to maintain the consistent code format.
+**_Notes_**: If your IDE does not support the Prettier plugin, please follow the [code formatter guidelines](TEST_SETUP.md#code-formatter) to maintain the consistent code format.
 
 ## Building and Running the Project
 
@@ -80,4 +80,3 @@ Before committing your new changes, please run command below to format all files
 ```
 
 **_Notes_**: This is applicable only in cases where you haven't configured prettier within your IDE.
-

system-contract-dapp-playground/README.md

@@ -7,7 +7,7 @@
 
 ## Overview
 
-TBD
+An intuitive low-code playground that eliminates the complexities, reduces learning curves, and allows developers to effortlessly interact with the Hedera’s powerful system contracts.
 
 ## Getting started
 
@@ -143,13 +143,3 @@ Congratulations! You are now ready to execute the project!
 ```
 
 **_important_**: must [build the project](README.md#building-the-project) first.
-
-## Config
-
-| Config files                             | Purpose                                                                                                                                                                                                                                     |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [next-env.d.ts](next-env.d.ts)           | a declaration file that allows to extend the global TypeScript types and declare custom types specific to Next.js project. This file ensures that TypeScript correctly recognizes Next.js-specific types and prevents type-checking errors. |
-| [next.config.js](next.config.js)         | allows to customize the Next.js configuration, including settings for features, plugins, environment variables, and webpack behavior.                                                                                                       |
-| [postcss.config.js](postcss.config.js)   | specifies the PostCSS plugins and their settings used to process and transform CSS code during the build process.                                                                                                                           |
-| [tailwind.config.js](tailwind.config.js) | allows to customize Tailwind CSS by providing options to modify colors, fonts, breakpoints, variants, and more, tailoring the framework to specific project requirements.                                                                   |
-| [tsconfig.json](tsconfig.json)           | configures the TypeScript compiler settings, enabling to specify target environments, module systems, and other options, ensuring type-checking and compilation of TypeScript code for the project.                                         |

system-contract-dapp-playground/docs/source-code-document/README.md

@@ -0,0 +1,79 @@
+# Source code documentation
+
+## Overview
+
+The `System Contract DApp Playground` project, often referred to as the DApp or DApp Playground, has been developed using a stack comprising the `React library`, `Next.js framework`, `Tailwind CSS`, and the `Chakra UI component library`. The primary objective behind this project is to provide developers with a seamless and user-friendly platform for interacting with Hedera's system contracts. The project's core purpose is to simplify the process, minimize complexities, shorten learning curves, and ultimately save valuable time for developers.
+
+## Purpose
+
+This document is intended to offer a thorough and elucidating account of the code components encompassed within the DApp, facilitating a deeper understanding of its inner workings.
+
+## Goals
+
+Offers a concise and accessible overview of the code components as well as provides a clear understanding of the codebase. This serves as a valuable resource for individuals interested in contributing to the project, enabling them to quickly grasp its structure and functionalities.
+
+### Table of contents
+
+##### Codebase Structure
+
+- [Folder tree](./codebase-structure/1.folder-tree/index.md)
+
+- Codebase Walkthrough
+
+  - [\_\_tests\_\_/](./codebase-structure/2.codebase-walkthrough/__tests__/index.md)
+  - [prerequisite-check/](./codebase-structure/2.codebase-walkthrough/preprequisite-check/index.md)
+  - [public/](./codebase-structure/2.codebase-walkthrough/public/index.md)
+  - src/
+
+    - [api/](./codebase-structure/2.codebase-walkthrough/src/api/index.md)
+    - [app/](./codebase-structure/2.codebase-walkthrough/src/app/index.md)
+    - components/
+
+      - [activity/](./codebase-structure/2.codebase-walkthrough/src/components/activity/index.md)
+      - [background-gradients/](./codebase-structure/2.codebase-walkthrough/src/components/background-gradients/index.md)
+      - [common/](./codebase-structure/2.codebase-walkthrough/src/components/common/index.md)
+      - [contract-interactions/](./codebase-structure/2.codebase-walkthrough/src/components/contract-interactions/index.md)
+      - [footer/](./codebase-structure/2.codebase-walkthrough/src/components/footer/index.md)
+      - [navbar/](./codebase-structure/2.codebase-walkthrough/src/components/navbar/index.md)
+      - [sidebar/](./codebase-structure/2.codebase-walkthrough/src/components/sidebar/index.md)
+      - [toast/](./codebase-structure/2.codebase-walkthrough/src/components/toast/index.md)
+      - [wallet-popup/](./codebase-structure/2.codebase-walkthrough/src/components/wallet-popup/index.md)
+
+    - [fonts/](./codebase-structure/2.codebase-walkthrough/src/fonts/index.md)
+    - [hooks/](./codebase-structure/2.codebase-walkthrough/src/hooks/index.md)
+    - [libs/](./codebase-structure/2.codebase-walkthrough/src/libs/index.md)
+    - [sections/](./codebase-structure/2.codebase-walkthrough/src/sections/index.md)
+    - [styles/](./codebase-structure/2.codebase-walkthrough/src/styles/index.md)
+    - [types/](./codebase-structure/2.codebase-walkthrough/src/types/index.md)
+    - [utils/](./codebase-structure/2.codebase-walkthrough/src/utils/index.md)
+    - [middleware.ts/](./codebase-structure/2.codebase-walkthrough/src/middleware.md)
+
+  - [config-files](./codebase-structure/2.codebase-walkthrough/config-files/index.md)
+
+#### Tutorials on How to Add a New System Contract to the DApp
+
+Here is a step-by-step guide for adding a new contract to the DApp:
+
+1. **Prerequisite Check**
+
+   Begin by ensuring that the contract assets are available in the `prerequisite-check` directory. Follow the tutorial [here](./codebase-structure/2.codebase-walkthrough/preprequisite-check/index.md#b-adding-new-system-contracts-to-the-dapp) for detailed instructions.
+
+2. **New Dedicated Route**
+
+   Create a dedicated route for the new system contract. Learn how to do this by following the guide [here](./codebase-structure/2.codebase-walkthrough/src/app/index.md#b-adding-new-system-contracts-to-the-dapp).
+
+3. **Add the Dedicated Route to `PROTECTED_ROUTES`**
+
+   As the new route is considered a protected route, you need to add it to the `PROTECTED_ROUTES` constant variable. Find out how to do this [here](./codebase-structure/2.codebase-walkthrough/src/middleware.md#adding-new-system-contracts-to-the-dapp).
+
+4. **Contract Section UI Component**
+
+   Create a client-side section-level UI component to showcase the new contract. Follow the instructions provided [here](./codebase-structure/2.codebase-walkthrough/src/sections/index.md#b-adding-new-system-contracts-to-the-dapp).
+
+5. **Method APIs**
+
+   Implement the method APIs for the new system contract. Learn how to add these APIs [here](./codebase-structure/2.codebase-walkthrough/src/api/index.md#b-adding-new-system-contracts-to-the-dapp).
+
+6. **Contract-Interaction UI Component**
+
+   Design the contract-interaction UI component that allows users to interact with the smart contract. Note that this component's layout may vary depending on the specific method APIs. Detailed instructions can be found [here](./codebase-structure/2.codebase-walkthrough/src/components/contract-interactions/index.md#b-adding-new-system-contracts-to-the-dapp).

system-contract-dapp-playground/docs/source-code-document/codebase-structure/1.folder-tree/index.md

@@ -0,0 +1,196 @@
+# Source code documentation
+
+## Codebase structure (folder tree)
+
+    .
+    ├── __tests__/
+    │   ├──ethers/
+    │   ├──hedera/
+    │   │  ├── erc20-interactions/
+    │   │  ├── erc721-interactions/
+    │   │  ├── exchange-rate-interactions/
+    │   │  ├── helper/
+    │   │  ├── ihrc-interactions
+    │   │  ├── prng-interactions
+    │   │  └── hts-interactions/
+    │   │      └── token-create-custom/
+    │   │      └── token-management-contract/
+    │   │      └── token-transfer-contract/
+    │   │      └── token-query-contract/
+    │   ├──mirror-node/
+    │   │  └── erc20-interactions/
+    │   └──utils/
+    │      └── common/
+    │
+    ├── preprequisite-check/
+    │   └──contracts-info/
+    │   └──scripts/
+    │
+    ├── docs/
+    │
+    ├── public/
+    │   ├── assets
+    │   │   └── docs/
+    │   │   └── icons/
+    │   │   └── socials/
+    │   └── brandings/
+    │
+    ├── src/
+    │   ├── api/
+    │   │   ├── cookies/
+    │   │   ├── ethers/
+    │   │   ├── localStorage/
+    │   │   ├── mirror-node/
+    │   │   ├── wallet/
+    │   │   └─ hedera/
+    │   │       ├── erc20-interactions/
+    │   │       ├── erc721-interactions/
+    │   │       ├── exchange-rate-interactions/
+    │   │       ├── ihrc-interactions/
+    │   │       ├── prng-interactions/
+    │   │       └── hts-interactions/
+    │   │           └── tokenCreateCustom-interactions/
+    │   │           └── tokenManagement-interactions/
+    │   │           └── tokenQuery-interactions/
+    │   │           └── tokenTransfer-interactions/
+    │   ├── app/
+    │   │   ├── activity/
+    │   │   └── hedera/
+    │   │       └── erc-20/
+    │   │       └── erc-721/
+    │   │       └── exchange-rate-hip-475/
+    │   │       └── hrc-719/
+    │   │       └── hts-hip-206/
+    │   │       └── overview/
+    │   │       └── prng-hip-351/
+    │   │
+    │   ├── component/
+    │   │   ├── background-gradients/
+    │   │   ├── common/
+    │   │   │   └── components/
+    │   │   │   └── methods/
+    │   │   ├── contract-interaction/
+    │   │   │   ├── erc/
+    │   │   │   │   ├── deployment/
+    │   │   │   │   ├── erc-20/
+    │   │   │   │   │   ├── methods/
+    │   │   │   │   │   │   └── balance-of/
+    │   │   │   │   │   │   └── mint/
+    │   │   │   │   │   │   └── token-information/
+    │   │   │   │   │   │   └── token-permission/
+    │   │   │   │   │   │   └── token-transfer/
+    │   │   │   │   └── erc-721/
+    │   │   │   │       └── methods/
+    │   │   │   │           └── approve/
+    │   │   │   │           └── balance-of/
+    │   │   │   │           └── mint/
+    │   │   │   │           └── operator-approve/
+    │   │   │   │           └── owner-of/
+    │   │   │   │           └── token-information/
+    │   │   │   │           └── token-transfer/
+    │   │   │   │           └── token-uri/
+    │   │   │   │
+    │   │   │   ├── exchange-rate/
+    │   │   │   │   ├── deployment/
+    │   │   │   │   └── methods/
+    │   │   │   │
+    │   │   │   ├── hts/
+    │   │   │   │   ├── shared/
+    │   │   │   │   │   └── components/
+    │   │   │   │   │   └── methods/
+    │   │   │   │   │   └── states/
+    │   │   │   │   │
+    │   │   │   │   ├── token-create-custom/
+    │   │   │   │   │   └── methods/
+    │   │   │   │   │       └── AssociateHederaToken/
+    │   │   │   │   │       └── FungibleTokenCreate/
+    │   │   │   │   │       └── GrantTokenKYC/
+    │   │   │   │   │       └── MintHederaToken/
+    │   │   │   │   │       └── NonFungibleTokenCreate/
+    │   │   │   │   │
+    │   │   │   │   ├── token-management-contract/
+    │   │   │   │   │   └── methods/
+    │   │   │   │   │       └── manageTokenDelete/
+    │   │   │   │   │       └── manageTokenInfo/
+    │   │   │   │   │       └── manageTokenPermission/
+    │   │   │   │   │       └── manageTokenRelation/
+    │   │   │   │   │       └── manageTokenStatus/
+    │   │   │   │   │       └── manageTokenSupplyReduction/
+    │   │   │   │   │
+    │   │   │   │   ├── token-query-contract/
+    │   │   │   │   │   └── methods/
+    │   │   │   │   │       └── querySpecificToken/
+    │   │   │   │   │       └── queryTokenGeneralInfo/
+    │   │   │   │   │       └── queryTokenPermission/
+    │   │   │   │   │       └── queryTokenStatus/
+    │   │   │   │   │       └── queryTokenValidity/
+    │   │   │   │   │
+    │   │   │   │   └── token-transfer-contract
+    │   │   │   │       └── methods/
+    │   │   │   │           └── transferCrypto/
+    │   │   │   │           └── transferMultipleTokens/
+    │   │   │   │           └── transferSingleToken/
+    │   │   │   │
+    │   │   │   ├── ihrc/
+    │   │   │   │   └── methods/
+    │   │   │   │
+    │   │   │   └── prng/
+    │   │   │       └── methods/
+    │   │   │
+    │   │   ├── footer/
+    │   │   │
+    │   │   ├── navbar/
+    │   │   │
+    │   │   ├── sidebar/
+    │   │   │
+    │   │   └── toast/
+    │   │
+    │   ├── fonts/
+    │   │
+    │   ├── hooks/
+    │   │
+    │   ├── libs/
+    │   │   ├── chakra/
+    │   │   └── framer-motion/
+    │   │
+    │   ├── sections/
+    │   │   ├── activity/
+    │   │   ├── erc-20/
+    │   │   ├── erc-721/
+    │   │   ├── exchange-rate-hip-475/
+    │   │   ├── hrc-719/
+    │   │   ├── hts-hip-206/
+    │   │   ├── landing/
+    │   │   ├── overview/
+    │   │   └── prng-hip-351/
+    │   │
+    │   ├── styles/
+    │   │
+    │   ├── types/
+    │   │   ├── common/
+    │   │   └── contract-interactions/
+    │   │       ├── erc/
+    │   │       ├── HTS/
+    │   │       └── shared/
+    │   │
+    │   ├── utils/
+    │   │   ├── common/
+    │   │   └── contract-interactions/
+    │   │       ├── erc/
+    │   │       └── HTS/
+    │   └── middleware.ts
+    │
+    │
+    ├── .eslintrc.json
+    ├── .gitignore
+    ├── .prettierrc
+    ├── jest.config.mjs
+    ├── Makefile
+    ├── next-env.d.ts
+    ├── next.config.js
+    ├── package-lock.json
+    ├── package.json
+    ├── postcss.config.js
+    ├── README.md
+    ├── tailwind.config.js
+    └── tsconfig