/Jetton-Dex-FE

Primary LanguageTypeScriptMIT LicenseMIT

💎Ton DEX Frontend💎

Frontend UI/UX for Ton Fundation DEX.

About

The interface was based on Uniswap, Pancakeswap, Coinbase, Binance 1inch and TON assets.

We really enjoyed working on this project! It has been a difficult task knowing that we only has 2 weeks since we started. But we learned a lot of things triyng to make this works.

We develop some new skills on TypeScript and I we will continue on this path thanks to this challenge.

The main goal for us was to achive a simple solution with a good code and logic structure. UI/UX always on our minds but clean code too.

Our journey started on Figma brainstorming about DEX and new concepts that we dind't knew before. And then we started selecting our stack and coding. But, with only 2 weeks, so we end up doing realtime integrations on both: code and ui designs.

Requirements

UI for exchanging one token for another token, a UI for creating a pool with two tokens, a UI for adding and removing liquidity from a pool, a UI with a list of pools and pool statistics. Required stack: Typescript - React - Redux

Mockup Features:

  • Responsive design.
  • Wallet component.
  • Exchange form.
  • Pool's list.
  • Create pool form.
  • Liquidity form.
  • Ligth / Dark mode.
  • Toncoin realtime price.
  • Tokens APY notification feed.
  • Figma UI Components assets.

Stack

  • Nextjs
  • Redux toolkit
  • Antd
  • TypeScript
  • Sass
  • Framer motion

Installation

yarn install
yarn dev

Resources

UI KIT