It's example of simple DAPP frontend of DEX, made from scracth for TON contest.
The interface was based on Uniswap, Pancakeswap, Sushiswap and TON assets.
It contains:
- UI for exchanging one token for another token
- UI for creating a pool with two tokens
- UI with a list of pools
- UI with a pool statistics
- UI for adding and removing liquidity from a pool (wallet should be connected)
As mentioned in contest requirements, app should be made with Typescript, React, Redux.
Extra dependencies and extra code are not welcome.
We took these technologies as a basis but decided to use tools that simplify the development process. The main idea was to use well-known and well-documented packages.
-
NextJS - React with SSR, out-of-box solid webpack configuration, built-in routing solution, and lot more useful features.
-
Redux Toolkit - Toolbox, that simplifies interaction with Redux (especially with async).
-
Lodash - Utility functions for common programming tasks. Almost every complex and future-rich project uses lodash.
-
clsx - Utility for constructing className strings conditionally.
-
Tailwind - Easy to customize, well-documented, feature-rich CSS Framework, that's simplifies styling and reduces build size.
-
Heroicons - Just a simple SVG Icons. Recommended by Tailwind.
We decided not to use ready-made UI packages, due to flexibility and bundle size. In future versions, it is likely that it will have to use a third-party library for graphs, that more suitable for financial and crypto data.
- Token picker allows adding custom contract address (if contract address is valid)
- Token picker form validation (invalid tokens, insufficient balance, etc.)
- Different behavior when wallet is not provided
- Pagination for items, that can be a lot
- Skeleton for loading components
- Balance of multiple tokens showed (and mocked as interaction directly with contract)
- Table supports ordering by column (thanks to lodash)
- Mobile freindly* (except tables, but with some extra code it should be ok)
yarn install
yarn build
yarn start
- Hardcoded form validation (and other places).
We know, that require a more elegant solution, than the one that exists now. We differently fix it in the future, when all validation requirements will be known.
- Redux store architecture
Real world requirements for app can significantly change it. We understand, that it can be changed in the future, but for now it's fits all contest requirements.
- Incorrect representation of the contract
Real specification of TON's like ERC-20 is not presented. Main idea was just mock async call to external source. In the future it will hugely refactored.
- reselect beta instead built-in redux-toolkit
Typescript issues. It should be fixed in future update. To learn more check reselect's github issue.
- Glitches
We admit that they may be. And there can be many of them. Unfortunately, there was not enough time to write tests.