Frontend development based on Ethereum Smart Contracts

Key Points

• Web3 frontend (dApp) for lending/borrowing crypto market place.
• Integration with Smart Contract protocol.
• Key components included robust authentication, transaction management, real-time UI updates, meticulous testing, and responsive design.
• Rigorous security measures to uphold the protocol’s permissionless and immutable nature.
• It is an open source project.

Case Study Overview

Ajna is an oracle-less, immutable, and permissionless lending protocol based on Ethereum. It seeks to remove any external risks and dependencies and operate purely through code and incentives. This makes it unique in DeFi, and these properties will likely make it one of the most censorship-resistant protocols in a time of regulatory uncertainty around crypto.

On the other hand, immutability comes with trade-offs: the protocol experienced a potential griefing vector, which required it to be redeployed entirely.

Therefore, Ajna needed a strong team of Web3 developers who were able to understand the complex protocol to implement the frontend.

The development team employed a comprehensive strategy to create a user-friendly frontend for the Ajna Smart Contracts Protocol. They focused on a thorough understanding of the contract’s functions and incentives, ensuring seamless Web3 integration and user interaction with the Ethereum blockchain. Key components included robust authentication, transaction management, real-time UI updates, meticulous testing, and responsive design, all underpinned by rigorous security measures to uphold the protocol’s permissionless and immutable nature.

K&C’s Solution to Implement the Frontend

Implementing the frontend for a smart contract, especially one as complex and feature-rich as Ajna, requires a systematic approach that accommodates its unique attributes. Here’s a high-level overview of how to approach this:

1. Understand the smart contract functions: We developed a deep understanding of the smart contract’s functions and events. This includes understanding how the lending protocol operates without oracles, how it maintains immutability, and the incentive mechanisms it uses.

2. Create Web3 Provider: Utilisation of ethers.js library to interact with the Ethereum blockchain.

3. User Authentication: Integration of the wallet provider.

4. Smart Contract Interaction: Build interfaces that allow users to execute smart contract functions such as lending, borrowing, managing their positions, take part in liquidation auctions and participate in protocol voting and grants. This involves aggregating data from multiple sources, parsing blockchain state, sending transactions and handling confirmations.

5. Event Handling and State Management: Listen for contract events and state to update the UI in real-time. Use async state management libraries like react-query, Apollo and React Context API to manage application state across different components and data sources.

6. Error Handling and Transactions: Implementation of comprehensive error handling to deal with failed transactions or rejected promises, which can occur due to the immutability of the contract or other reasons.

7. UI/UX Design: Design a user-friendly interface that abstracts the complexity of the blockchain. The UI presents information clearly and guide users through each interaction step by step.

8. Testing: Rigorously test the frontend with unit tests, integration tests, and end-to-end tests.

9. Security: Since the protocol is permissionless and aims to be censorship-resistant, security is paramount. Security audits were conducted and incorporate best practices to protect users’ funds and data implemented.

10. Handling Immutability: To avoid issues during redeployment, the frontend handles updates or migrations of the smart contract without significant downtime or user friction.

11. Documentation and Support: Detailed documentation and support channels for users to understand how to interact with the dApp and troubleshoot issues was provided.

12. Responsive Design: Frontend is responsive and accessible across different devices and platforms to reach a wide user base.

Ajna Protocol Tech Stack

• React as UI library
• react-query and Context API as asynchronous state management
• Apollo as Graphql state management for Indexer backend
• Tailwind CSS and styled-components as style systems
• Ethers.js as Web3 Provider library
• web3-onboard as Web3 Connect library
• react-hook-form + zod — for form state management and validation
• jest — testing library
• floating-ui — for positioning floating elements

“As a long-time participant in the DeFi community, finding a team capable of not just meeting, but exceeding expectations was a tall order. K&C’s Web3 development team that worked on our Ajna protocol project was exceptional. They delivered a complex, oracle-less lending platform that is both user-friendly and secure, right on schedule and within the agreed budget.“- Ajna Labs

Why IT Outsourcing Is a Good Strategic Fit for Ajna

Ajna Labs has resolved its blockchain development recruitment challenges with an IT outsourcing strategy. Working with K&C means:

• Access to a much larger, global, Web3 development talent pool.
• The ability to hire more senior talent at a lower cost than domestically recruited compromise candidates.
• Well-qualified candidates recruited and onboarded in weeks, not months.
• Flexibility to scale the team up and down with the project’s cycles without impacting moral and motivation – it’s what everyone has signed up for.
• Ajna now has a highly competent and motivated development team and its blockchain protocol and app are on schedule and in budget.