feat: documentation of donation tutorials (#372)

* feat: WIP - donation-dapp

* fix: updated steps number

* feat: added withdrawal step in run application of frontend integration step

* added smart contract build instructions

* hygiene fixes

* added unit testing examples

---------

Co-authored-by: tanuj-aelf <[email protected]>

docs/index.md

@@ -30,6 +30,7 @@ aelf is a high-performance, cloud-native, layer-1 blockchain with Mainnet nodes
   - [Staking](/quick-start/developers/single-pool-staking-dapp/) dApp
   - [Dice Game](/quick-start/developers/dice-game-dapp/) dApp
   - [NFT Indexer](/quick-start/advance-tutorials/nft-indexer/) dApp
+  - [Donation](/quick-start/developers/donation-dapp/) dApp
 
 - For node operators
   - [Simulate](/quick-start/node-operators/simulating-a-bp-node/) a BP node

docs/quick-start/developers/_deploy_donation.md

@@ -0,0 +1,124 @@
+#### Create A Wallet
+
+To send transactions on the aelf blockchain, you must have a wallet.
+
+- Run this command to create aelf wallet.
+
+```bash title="Terminal"
+aelf-command create
+```
+
+![result](/img/create_wallet_output.png)
+
+- You will be prompted to save your account, please do **save** your account as shown below:
+
+```bash title="Terminal"
+? Save account info into a file? (Y/n) Y
+```
+
+**Make sure to choose Y to save your account information.**
+
+:::tip
+ℹ️ Note: If you do not save your account information (by selecting n or N), do not export the wallet password. Only **proceed to the next** step if you have saved your account information.
+:::
+
+- Next, enter and confirm your password. Then export your wallet address and password as shown below:
+
+<Tabs>
+<TabItem value="Linux and macOs" label="Linux and macOs" default>
+```bash title="Terminal"
+export WALLET_ADDRESS="YOUR_WALLET_ADDRESS"
+```
+</TabItem>
+
+<TabItem value="Windows" label="Windows">
+```bash title="Command Prompt"
+$env:WALLET_ADDRESS = "YOUR_WALLET_ADDRESS"
+```
+</TabItem>
+</Tabs>
+
+<Tabs>
+<TabItem value="Linux and macOs" label="Linux and macOs" default>
+```bash title="Terminal"
+export WALLET_PASSWORD="YOUR_WALLET_PASSWORD"
+```
+</TabItem>
+
+<TabItem value="Windows" label="Windows">
+```bash title="Command Prompt"
+$env:WALLET_PASSWORD = "YOUR_WALLET_PASSWORD"
+```
+</TabItem>
+</Tabs>
+
+#### Acquire Testnet Tokens (Faucet) for Development
+
+To deploy smart contracts or execute on-chain transactions on aelf, you'll require testnet ELF tokens.
+
+**Get ELF Tokens**
+
+Go to https://faucet-ui.aelf.dev Enter your address and click `Get Tokens`.
+
+![result](/img/get-token-ui.png)
+
+**Deploy Smart Contract:**
+
+The smart contract needs to be deployed on the chain before users can interact with it.
+
+Run the following command to deploy a contract. Remember to export the path of DonationApp.dll.patched to CONTRACT_PATH.
+
+<Tabs>
+<TabItem value="Linux and macOs" label="Linux and macOs" default>
+```bash title="Terminal"
+export CONTRACT_PATH=$(find ~+ . -path "*patched*" | head -n 1)
+```
+
+```bash title="Terminal"
+aelf-deploy -a $WALLET_ADDRESS -p $WALLET_PASSWORD -c $CONTRACT_PATH -e https://tdvw-test-node.aelf.io/
+```
+
+</TabItem>
+
+<TabItem value="Windows" label="Windows">
+```bash title="Command Prompt"
+$CONTRACT_PATH = Get-ChildItem -Recurse -Filter "*patched*" | Select-Object -First 1 -ExpandProperty FullName
+$env:CONTRACT_PATH = $CONTRACT_PATH
+```
+
+```bash title="Command Prompt"
+aelf-deploy -a $env:WALLET_ADDRESS -p $env:WALLET_PASSWORD -c $env:CONTRACT_PATH -e https://tdvw-test-node.aelf.io/
+```
+
+</TabItem>
+</Tabs>
+
+- Please wait for approximately 1 to 2 minutes. If the deployment is successful, it will provide you with the contract address.
+  ![result](/img/deploy-result.png)
+
+- Copy the smart contract address from the `address` field
+  ![result](/img/Contract_Address.png)
+
+- Export your smart contract address:
+
+<Tabs>
+<TabItem value="Linux and macOs" label="Linux and macOs" default>
+  ```bash title="Terminal"
+  export CONTRACT_ADDRESS="YOUR_SMART_CONTRACT_ADDRESS e.g. 2LUmicHyH4RXrMjG4beDwuDsiWJESyLkgkwPdGTR8kahRzq5XS"
+  ```
+</TabItem>
+
+<TabItem value="Windows" label="Windows">
+  ```bash title="Command Prompt"
+  $env:CONTRACT_ADDRESS="YOUR_SMART_CONTRACT_ADDRESS e.g. 2LUmicHyH4RXrMjG4beDwuDsiWJESyLkgkwPdGTR8kahRzq5XS"
+  ```
+</TabItem>
+</Tabs>
+
+:::tip
+ℹ️ Note: You are to copy the smart contract address as we will be referencing it in the next steps!
+:::
+
+:::info
+🎉 You have successfully deployed your Donation dApp smart contract on the aelf testnet! In the next steps, we will be building the frontend components that allow us to interact with our deployed smart contract!
+:::

docs/quick-start/developers/donation-dapp/_conclusion.md

@@ -0,0 +1,39 @@
+## 🎯 Conclusion
+
+🎉 Congratulations on completing the **Donation dApp** tutorial! 🎉 You've taken a significant leap into blockchain development by creating a fully functional Donation dApp on the aelf blockchain. 🌟
+
+**📚 What You've Learned**
+
+Throughout this tutorial, you've gained expertise in:
+
+  - **🛠️ Setting Up Your Development Environment**: Preparing your workspace with all the tools and configurations needed for your blockchain journey.
+
+  - **💻 Developing Your Smart Contract**: Writing and deploying a smart contract that handles campaign creation, donations, and fund management.
+
+  - **🚀 Deploying the Smart Contract**: Bringing your smart contract to life on the aelf blockchain, making it ready for real-world use.
+
+  - **🔧 Building a Fully Interactive dApp**: Integrating wallet connectivity, creating and managing campaigns, processing donations, and ensuring a seamless user experience.
+
+
+**🔍 Final Output**
+
+By the end of this tutorial, you've achieved:
+
+  - **📜 A Deployed Donation Smart Contract**: Capable of managing campaigns with features like creation, editing, deletion, and fund withdrawal.
+
+  - **💻 An Operational Donation dApp**: Empowering users to donate, view campaign details, and manage profiles effortlessly.
+
+
+**➡️ What's Next?**
+
+Now that you've mastered the basics, here are some advanced ideas to explore:
+
+  - **📈 Advanced Features**: Add functionalities like recurring donations, donor recognition, or campaign performance analytics.
+
+  - **🔒 Enhancing Security**: Implement additional measures to secure user funds and protect sensitive data.
+
+  - **🌍 Cross-Chain Interoperability**: Leverage aelf’s cross-chain capabilities to expand your Donation dApp to other blockchain ecosystems.
+
+The world of decentralized applications holds limitless possibilities. With your newfound skills, you're ready to innovate, build, and make a meaningful impact with blockchain technology. 🚀
+
+Happy coding and scaling your **Donation dApp!** 😊