docs(readme): added readme changes

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

CONTRIBUTING.md

@@ -0,0 +1,60 @@
+# Contributing
+
+We welcome community support with both pull requests and reporting bugs. Please
+don't hesitate to jump in.
+
+## Review others' work
+
+Check out the list of outstanding pull requests if there is something you might
+be interested in. Maybe somebody is trying to fix that stupid bug that bothers
+you. Review the PR. Do you have any better ideas how to fix this problem? Let us
+know.
+
+## Issues
+
+The issue tracker is the preferred channel for bug reports, features requests
+and submitting pull requests, but please respect the following restrictions:
+
+- Please do not use the issue tracker for personal support requests, contact contributors over github for support.
+- Please do not open issues or pull requests regarding the code in React (open them in their respective repositories).
+
+There are 2 options to open an issue, Bug report - Create a report to help us improve or open a blank issue, you can see all 2 options under the Issues tab after clicking on the new issue button.
+
+_Note: Occasionally issues are opened that are unclear, or we cannot verify them. When the issue author has not responded to our questions for verification within 7 days then we will close the issue._
+
+## Commit
+
+Before making new commit's please check that you have installed and set up commitlint + husky + commitizen and configured them correctly.
+
+## Tests
+
+All commits that fix bugs or add features need a test.
+
+## Code Style
+
+Please adhere to the current code styling. We have included an `.editorconfig`
+at the repo's root to facilitate uniformity regardless of your editor. See the
+[editor config site][editorconfig] for integration details.
+
+We use [ESLint][eslint] for all JavaScript Linting. There should be no linting
+errors and no new warnings for new work. You are welcome to configure your
+editor to use ESLint or the `pnpm run test` command will run unit tests and the
+linter.
+
+## Visual Changes
+
+When making a visual change, please provide screenshots
+and/or screencasts of the proposed change. This will help us to understand the
+desired change easier.
+
+## Docs
+
+Please update the docs with any code logic changes, the code and docs should always be
+in sync.
+
+## Implement additional components and features
+
+When creating new components please follow the atomic design principles we have implemented.
+Check the src/components/(atoms, molecules, organism) structure we follow.
+
+If you are adding any new Library that has a config file please add the config file to the src/app/config folder.

MANUAL_TESTING_GUIDE.md

@@ -0,0 +1,44 @@
+# dotACP: Manual testing guide
+
+Want to test and break dotACP? Awesome! Follow the instructions below to manually test this feature. dotACP is supported on Westend and Rococo, and the steps are identical unless explicitely stated otherwise. 
+- [Westend staging](https://dot-acp-westmint.mvpworkshop.co/)
+- [Rococo staging](https://dot-acp-rococo.mvpworkshop.co/)
+
+## Install some Polkadot browser extension wallet
+
+To test the staging environment, you'll need to have the Polkadot wallet browser extension installed. We've successfully tested it with three wallet options: polkadot.js, Subwallet, and Talisman. These wallets are fully supported.
+
+## Get tokens
+
+For testing on Westend (WND Token) or Rococo (ROC Token) testnet you will need some test tokens. There is a daily limit of 10 WNDs and 100 ROCs that can be issued to one wallet.
+
+- [Westend faucet](https://paritytech.github.io/polkadot-testnet-faucet/westend)
+- [Rococo faucet](https://paritytech.github.io/polkadot-testnet-faucet/)
+
+Once you have tokens on the Westend/Rococo parachains, teleport them to the Asset Hub parachain
+- Sign in / Create your [polkadot.js account](https://polkadot.js.org/)
+- Open the Polkadot substrate portal [account page](https://polkadot.js.org/apps/#/accounts).
+- In the top bar select Accounts / Teleport
+- Transfer your WND/ROC tokens to Asset Hub. Teleport requires some gas fees.
+- In the top left dropdown select TEST WESTEND/ROCOCO & PARACHAINS > AssetHub > Switch to confirm that the tokens are transferred and ready for testing
+
+## Swap your WNDs/ROCs for other tokens
+
+With your WNDs/ROCs, you can cover the gas fees and you can swap your WNDs or ROCs to some of the other tokens we support in dotACP.
+
+## Create your own tokens to test
+
+You can also create your own tokens and import them into dotACP. To do this, you'll need to utilize the Asset Hub. Below, you'll find the steps for creating tokens, and a short video tutorial on how you can create it on Rococo - [here](https://www.loom.com/share/5ddad5dbe2f140debb1f336e02de69d0?sid=d3a0b4b0-519f-4423-9647-ff57020dc9af) (for Westend [here](https://www.loom.com/share/e6bfb71ae193442da01d9f7444294ad9?sid=066baf57-5714-4172-a06f-b33f6b9c32d4)).
+
+- Sign in / Create your [polkadot.js account](https://polkadot.js.org/)
+- Open the Polkadot substrate portal [app](https://polkadot.js.org/apps/#/explorer).
+- For adding assets on <b>Westend choose Westend, Asset Hub</b> as your network. For adding assets on <b>Rococo, choose Rococo, Asset Hub</b> as your network.
+- In the <b>Network</b> dropdown click on <b>Assets</b>. Then click on the <b>top right plus button</b> to create a new asset. Those will be your tokens. <b>(We do not recommend putting high values on a minimal amount field when creating a new asset, 1 will do).</b>
+- Once the asset is created, you need to find it in the <b>Asset list</b> and click on the <b>plus button - mint</b>. Then you set how much you want to mint to your wallet for testing.
+- Once you have your asset, you can check its balance by <b>switching from overview to balance</b>. Then you find your asset to query by the name or ID and check if you have the desired balance.
+
+## Test dotACP with your own tokens
+
+Once you have your own tokens, those will appear in the <b>dotACP interface under the list of tokens</b> you possess and can swap or make liquidity pairs.
+
+Test, play around, and get back to us with comments! 🚀

README.md

@@ -1,24 +1,91 @@
-# Polkadot - Asset Conversion Pallet
+# UI & Front-end for Asset Conversion pallet
 
-This project is intended to be used as a starting point for building a decentralized exchange on Polkadot using the Asset Conversion Pallet.
+## Table of contents
 
-You can find additional documentation on the Asset Conversion Pallet [here](./ASSET_CONVERSION_PALLET.md).
+<ul>
+    <li><a href='#description'>Description</a></li>
+    <li><a href='#useful-links'>Useful links</a></li>
+    <li><a href='#how-to-install'>How to install</a>
+        <ul>
+            <li><a href='#install-all-packages'>Installation</a></li>
+            <li><a href='#run-project'>Basic usage</a></li>
+        </ul>
+    </li>
+    <li href='#how-to-manually-test-the-app'>How to manually test the app</li>
+    <li><a href='#ui-kit'>Contributors</a>
+        <ul>
+            <li><a href='#customizing-styles-with-tailwindcss'>Customizing Styles with Tailwind.css</a></li>
+            <li><a href='#modifying-images-fonts-and-global-scss'>Modifying Images, Fonts, and Global SCSS</a></li>
+            <li><a href='#multilingual-support-with-i18n'>Multilingual Support with i18n</a></li>
+            <li><a href='#adding-new-routes-and-pages'>Adding New Routes and Pages</a></li>
+            <li><a href='#updating-global-state'>Updating Global State</a></li>
+        </ul>
+    </li>
+    <li><a href='#contributions'>Contributions</a></li>
+</ul>
 
-### Install dependencies:
+## Description
 
-`pnpm install`
+This project is part of Polkadot initiative for building front-end and UI for Asset Conversion Pallet on Polkadot's AssetHub. Link to the proposal here. Currently, it is possible to deploy this pallet on [Westend](https://dot-acp-westmint.mvpworkshop.co) and [Rococo](https://dot-acp-rococo.mvpworkshop.co).
+
+
+## Useful links
+
+Link to [Figma file](https://www.figma.com/file/yxVrecZAWQSoHRYvGhBGOm/dotACP-%E2%80%93-UI-KIT?type=design&node-id=15%3A6&mode=design&t=ncMCkhjdQ6WQEz3k-1).
+Link to User story [document](https://docs.google.com/document/d/1EiRS3g4I1bvLaxou3UBr_CLzsnE-Uqp0QaRhNSHoB-o/edit#heading=h.94y7ctthwqt2).
+Link to the [GitHub project](https://github.com/orgs/MVPWorkshop/projects/11).
+All important information regarding the pallet communication is [here](./ASSET_CONVERSION_PALLET.md).
+
+## How to install
+
+### Install All Packages
+
+```sh
+pnpm install
+```
 
 ### Run Project
 
-`pnpm run dev`
+```sh
+pnpm run dev
+```
+
+### Run Tests
+
+```sh
+pnpm run test
+```
+
+## How to manually test the app
+
+If you wish to help us out and manually test the app on one of the two test networks(Westend/Rococo) please follow this [guide](./MANUAL_TESTING_GUIDE.md).
+
+To report any bugs or security vulnerability found please follow the instructions under the issues section [here](./CONTRIBUTING.md).
 
 ## UI Kit
 
-Instructions to edit colors, fonts, images, or text translation of the project:
+### Customizing Styles with Tailwind.css:
+
+The project uses Tailwind.css for styling, making it easy to customize the look and feel of your decentralized exchange. To make style adjustments, you can edit the `tailwind.config.js` file. This file contains configuration options for colors, fonts, spacing, and more. Developers can modify these settings to match their project's branding and design requirements.
+
+### Modifying Images, Fonts, and Global SCSS:
+
+In addition to <b>tailwind.css</b>, you can also customize images, fonts, and global SCSS (Sass) styles. These assets can be found in the `./src/assets/` directory. Developers can replace existing images, add new fonts, or make changes to the global SCSS to tailor the project's visual elements to their needs.
+
+### Multilingual Support with i18n:
+
+For projects with a global audience, multilingual support is crucial. The project uses i18n for translation and dynamic text changes. Developers can configure language support in the `./src/app/config/i18n/index.ts` file and provide translations in different languages in the `./src/app/translations/` directory. This makes it easy to add new languages and ensure that your decentralized exchange is accessible to users from around the world.
+
+### Adding New Routes and Pages:
+
+To expand the functionality of your decentralized exchange, developers can create new routes and pages. This can be done by editing the router configuration and adding new pages to the `./src/pages/` directory. This modular approach allows developers to extend the application with additional features and user interfaces.
+
+### Updating Global State:
+
+The project includes global state management logic that helps maintain shared application state. Developers can update global state properties to reflect changes in the application's data and user interactions. This global state can be accessed and modified as needed to ensure consistent and responsive user experiences.
 
-We are using Tailwind.css, all of the config for the colors and fonts can be found in [./tailwind.config.js](./tailwind.config.js).
+By providing these guidelines, you're offering developers a clear roadmap for customizing and extending your decentralized exchange project. This will help them make the most of your codebase and contribute to the success of the project.
 
-If you want to edit any of the images, imported fonts or global scss you can find that in [./src/assets/..](./src/assets/).
+## Contributions
 
-For translation and dynamic text change we use `i18n`.
-The config can be found in [./src/app/config/i18n/index.ts](./src/app/config/i18n/index.ts) and the translations in [./src/app/translations/en.json](./src/app/translations/en.json).
+Yes please! See the [contributing guidelines](./CONTRIBUTING.md) for details.