https://github.com/complexlity/simple-swap-ui

A crypto swap ui for trading tokens
https://github.com/complexlity/simple-swap-ui

jotai nextjs shadcn-ui tanstack-react-query

Last synced: 11 days ago
JSON representation

A crypto swap ui for trading tokens

• Host: GitHub
• URL: https://github.com/complexlity/simple-swap-ui
• Owner: Complexlity
• Created: 2024-07-23T18:54:27.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-09-09T07:43:46.000Z (over 1 year ago)
• Last Synced: 2025-10-09T03:39:21.393Z (7 months ago)
• Topics: jotai, nextjs, shadcn-ui, tanstack-react-query
• Language: TypeScript
• Homepage: https://simple-swap-ui-inky.vercel.app
• Size: 240 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# SIMPLE SWAP UI

A crypto swap ui for trading tokens. 

![swap image](/swapImage.png)

There are two modes

## Dynamic

In this mode, there's all kinds of state handling

1. Input output tokens a loaded  (mocked) with loading skeletons

2. The values get set depending on their price

3. The tokens are cached depending on what the user has recently used

4. Error and success toast depending on the swap transaction (mocked)

5. Buttons that set the input value depending on the user's balance

### Tech Stack

- [Shadcn UI](https://ui.shadcn.com/) for ui and form components

- [Tanstack Query](https://tanstack.com/query/latest) for async state management and mutations

- [Jotai](https://jotai.org/) for local state handling and token caching

## Stateless

In this mode there's no state handling just the ui

## Tech Stack

- [Shadcn UI]('https://ui.shadcn.com/) for ui and form components. 

You can copy this one directly in your project if you have different stack and use your stack with it.