Update: Mint LST Interface – Built with DOTUI

[lou1svuong]

Description
Following up on the initial proposal DeFi Yield Dashboard & Onboarding Guide (#24), the next milestone is the development of the Mint LST (Liquid Staking Token) interface. This feature will enable users to easily stake base tokens (e.g., DOT) and receive vTokens (e.g., vDOT) directly through the Bifrost protocol.

The UI will be built using the DOT UI Kit — an open-source, modern, opinionated scaffolding kit tailored for the Polkadot ecosystem. DOT UI Kit is built on a powerful stack, including:

• Next.js, Tailwind CSS
• Lucide Icons, ShadCN UI
• RainbowKit, Wagmi, Viem
• React Hook Form, Zod, Jotai, TanStack React Query

🔧 Key Features

• Powered by DOT UI Kit

• Reusing modular UI components such as Button, Dialog, StatusToast, and WalletConnectModal.

• Utilizing built-in Web3 hooks for wallet connections, transaction submission, and real-time feedback.

• Complete Mint Flow

• Users input the amount of DOT to stake.

• UI displays:

  • Estimated vToken to be received (e.g., vDOT)
  • Current exchange rate (if applicable)
  • Network/transaction fee

• On submission:

  • Triggers wallet connect via RainbowKit
  • Executes onchain transaction using wagmi and viem
  • Shows live status updates (pending / success / failure) with DOTUI components

• Fully Responsive

• Designed to perform seamlessly on mobile devices and smaller screens — ideal for onboarding flows coming from social links or embedded apps.

• Integration-Ready

• Can be embedded into the existing onboarding wizard.

• Supports callbacks or hooks for follow-up actions after a successful mint (e.g., yield tracking, education modules).

🧰 Tech Stack Summary

• Frontend: Next.js, Tailwind CSS, ShadCN UI, Lucide
• Wallet & Web3: RainbowKit, Wagmi, Viem
• Form Handling: React Hook Form, Zod
• State & Data: Jotai, TanStack Query

---

Reference Issue
#24