The problem TokenBridge solves

TokenBridge addresses the complexity of transferring tokens on the Ethereum blockchain. While blockchain technology offers security and transparency, interacting with tokens can often feel cumbersome, especially for users who aren't technically inclined.

Here’s what TokenBridge helps solve:

Simplified Token Transfers: Instead of manually interacting with smart contracts or using complex commands, users can now send ERC-20 tokens quickly and easily with a user-friendly interface.

Minimized Errors: By providing clear prompts and feedback, the DApp reduces the likelihood of user mistakes such as sending tokens to the wrong address or transferring incorrect amounts.

Real-Time Feedback: Users receive instant status updates on their transactions, from the moment they initiate a transfer until it’s confirmed on the blockchain.

Decentralization with Ease: While TokenBridge leverages blockchain's decentralized security, it abstracts the complexity, making decentralized token transfers accessible to everyday users without compromising security.

Safe and Secure Transfers: Using MetaMask integration, the DApp ensures that all token transfers are secure, eliminating the risk of third-party interference or security breaches.

With TokenBridge, anyone can confidently engage in token transfers without needing deep technical knowledge or worrying about the complexities of blockchain transactions.

Challenges I ran into

During the development of TokenBridge, I encountered several challenges, each presenting an opportunity to deepen my understanding of blockchain development and user interaction design:

MetaMask Connection Handling: One of the first challenges was handling MetaMask connection requests. Initially, if a user denied the connection, no clear message was shown, leaving users confused. I solved this by adding specific error handling for MetaMask’s eth_requestAccounts request, displaying a clear error message when the user denied the request, ensuring better user experience and transparency.

Formatting Token Balances: The raw token balance from the contract was displayed in an extremely large number (e.g., 1000000000000000000), which was confusing for users. To fix this, I implemented proper formatting using ethers.js's formatUnits function to display the balance in a human-readable format with the correct number of decimals.

Transaction Status Feedback: I wanted to give users real-time feedback during the transaction process, but initially, the DApp didn’t provide any indication of pending or successful transfers. I introduced a loading spinner and status messages, allowing users to track the progress of their transaction, making the experience more intuitive.

Error Handling in Transactions: While sending tokens, handling errors such as insufficient balance or invalid recipient addresses posed another challenge. I implemented error messages that informed users of the specific issue (e.g., “Insufficient balance” or “Invalid address”), guiding them to take corrective action without frustration.

Through these challenges, I improved not only the functionality of the DApp but also its usability, ensuring a smoother experience for all users.