Wrapto Frontend

Frontend for a Web3 bridge application built with React, TypeScript, Wagmi, and modern wallet integration tools.

Wrapto provides a user-facing bridge interface for connecting wallets, preparing bridge transactions, handling transaction states, and giving users clear feedback during blockchain interactions.

Features

• Wallet connection flow
• Blockchain account state handling
• Bridge transaction UI
• Loading, error, and success states
• Transaction confirmation feedback
• Responsive Web3 interface
• API-driven blockchain data handling
• Clean component-based frontend structure

Tech Stack

• React
• TypeScript
• Vite
• Wagmi
• Viem
• RainbowKit
• TanStack Query
• Framer Motion
• Radix UI

Project Structure

src/
  api/          API and blockchain data helpers
  components/   Reusable UI components
  context/      Shared React context providers
  layout/       App layout components
  pages/        Page-level views
  routes/       Route definitions
  types/        TypeScript types
  wagmi/        Wallet and chain configuration
  

Getting Started

npm install
npm run dev

What I Built

• Built wallet connection and account-aware UI flows.
• Implemented bridge form interactions and transaction state handling.
• Worked with Wagmi/Viem for blockchain interaction flows.
• Created reusable React components for Web3 user journeys.
• Improved UX around loading, errors, and transaction feedback.

Live Demo

https://wrapto.app