Skip to content

Added DotUI application #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 120 additions & 0 deletions applications/dotui.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# DOT UI

## Project Overview

- A scaffolding UI kit for Polkadot
- Pre-built UI components for interacting with Polkadot and Kusama parachains.
- Leverage existing Polkadot.js, the many libraries and tools available in the ecosystem to build robust UI components for dapp developers to leverage and ship faster.
- I have a lot of experience in building UI components and have a deep understanding of the Polkadot ecosystem.

### Project Details

- Technology stack
- [Next.js](https://nextjs.org/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Lucide icons](https://lucide.dev/)
- [ShadCN UI](https://ui.shadcn.com/)
- [RainbowKit](https://www.rainbowkit.com/)
- [Wagmi](https://wagmi.sh/)
- [Viem](https://viem.sh/)
- [Polkadot API](https://github.com/polkadot-api/polkadot-api)
- [Jotai](https://jotai.org/)
- [Tanstack React Query](https://tanstack.com/query)
- [Vaul](https://vaul.fun/)
- [Zod](https://zod.dev/)
- [React Hook Form](https://react-hook-form.com/)
- [DotUI Github](https://github.com/buildstationorg/dotui)
- [DotUI Website](https://dotui.buildstation.org/)
- The project will implement components for common dapp use cases like connect wallet, swap, portfolio sidebar, transaction history, staking, cross chain transfer/bridge, AI interface, blink interface for X card, etc. Also aiming to support various parachains.
- The project will not be released as a package on NPM. Developers will get access to the full code of the components with full control to customize and extend the components to their needs.

### Ecosystem Fit

- The project aims to help polkadot dapp developers to get started with sensible default UI components, reducing the time to market for dapps.
- It aims to serve primarily dapp developers serving users rather than infrastructure developers.
- Provide a templates, examples, documentation as well as reference for AI generated code for Polkadot dapp developers. Plus a significant focus on pushing the boundaries of UI/UX in the Polkadot ecosystem.
- The closest in Polkadot ecosystem is [Reactive Dot](https://reactivedot.dev/) but Reactive Dot is more react hooks rather than pre-built UI components. Other similar projects are [Onchainkit](https://onchainkit.xyz/) from Base team but DotUI is more like [Shadcn UI](https://ui.shadcn.com) (pre-built UI components that you can copy and paste into your project).

## Team


### Team name
- ZxStim

### Team members

- Ngoc Thang Luong (also known as zxstim)

### Contact email
- [email protected]

### Website
- https://zxstim.com

### X
- https://x.com/zxstim

### Team Code Repos

- https://github.com/zxstim
- https://github.com/buildstationorg

### Team's experience

- Contributed to OpenGuild DotUI kit

## Development Status

- [OpenGuild Frontend kit challenge](https://app.openguild.wtf/missions/51)
- [DotUI Github](https://github.com/buildstationorg/dotui)
- [DotUI Website](https://dotui.buildstation.org/)

## Development Roadmap

### Overview

- **Estimated Duration:** 3 months
- **Full-Time Equivalent (FTE):** 2 staffs
- **Total Costs:** 21,000 USD


| Number | Deliverable | Specification |
| -----: | ----------- | ------------- |
| 0a. | License | MIT License |
| 0b. | Documentation | We will provide **inline documentation**, detailed documentation of the code, basic **tutorials**, AI friendly markdown context files |
| 0c. | Testing and Testing Guide | Core functions will be fully covered by comprehensive unit tests to ensure functionality and robustness. |
| 0d. | CLI | We will provide a CLI that can be used to automatically install the components or developers can manually copy and paste the components into their project. |
| 0e. | Workshop | We will run regular workshops/livestreams in English that explains the components and how to use them. |
| 1. | Connect Wallet component | We will deliver a Connect Wallet component that allows users to connect their wallet (supporting both substrate and evm wallets) |
| 2. | Send transaction component | We will deliver a Send transaction component that allows users to send transactions to another address |
| 3. | Swap component | We will deliver a Swap component that allows users to swap tokens |
| 4. | Portfolio Sidebar component | We will deliver a Portfolio Sidebar component that allows users to view their portfolio |
| 5. | Transaction History component | We will deliver a Transaction History component that allows users to view their transaction history |
| 6. | Liquid Staking component | We will deliver a Liquid Staking component that allows users to mint LST and redeem LST |
| 7. | Cross Chain Transfer/Bridge component | We will deliver a Cross Chain Transfer/Bridge component that allows users to transfer/bridge tokens to/from other chains |
| 8. | AI agent Chat interface | We will deliver an AI agent chat interface component based on Vercel AI SDK that allows developers to build workflows |

### Budget Breakdown (Example, please adapt)

| Category | Item | Cost | Amount | Total | Description |
| --- | ---- | --- | --- | --- | ---|
| Personel | Lead Full-Stack Developer | 4,000 USD | 3 months | 12,000 USD | Leading the project with architecture, implementation and community coordination |
| Personel | Full-Stack Developer | 3,000 USD | 3 months | 9,000 USD | Supporting the Lead Full-stack developer |
| --- | --- | --- | **Total** | **21,000 USD** | --- |


## Future Plans

Please include here

- Long term, the project will aim to monetize with the following:
- Paid support and consulting for dapps
- Donations from Polkadot parachains
- Alternative frontend fee for users when they use DotUI
- Custom Liquid Staking Token and use the yield to fund the project

## Additional Information

Here you can also add any additional information that you think is relevant to this application but isn't part of it already, such as:

- Currently working as DevRel for [Bifrost](https://bifrost.io/)