Technical and Architecture proposal to be engage and build up a community and provide easier access to DeFi

[MitkoTschimev]

Community-Driven DeFi Toolkit: Empowering Decentralization with Modular Web Components

Executive Summary

In the rapidly evolving DeFi landscape, accessibility and customization are key to fostering an engaged and innovative community. This proposal outlines a project aimed at developing a suite of reusable, highly customizable web components, such as a swap interface and gas price calculator, using lit.js. These components will be integrated into a cohesive application built with Angular, offering a seamless user experience. The project will leverage a monorepo approach to streamline development, maintenance, and scalability. By providing core functionalities as a foundational package and facilitating extensive customization through adapters and configurations, this project aims to lower the barrier to entry for DeFi development and encourage community-driven innovation.

Introduction

The DeFi sector is at a critical juncture where the need for more accessible and customizable development tools has never been greater. As the ecosystem grows, so does the complexity of services and the demand for user-friendly, adaptable solutions. This project seeks to address these challenges by providing a toolkit that not only simplifies DeFi application development but also empowers the community to contribute, adapt, and extend functionalities according to their unique needs.

Objectives

1. Develop Reusable DeFi Web Components: Create a set of DeFi web components using lit.js, focusing on performance, ease of integration, and user experience.
2. Build an Angular-based Application: Utilize Angular to develop a comprehensive application that integrates the developed web components into a cohesive platform.
3. Facilitate High Customization and Flexibility: Ensure the system is highly customizable through configurations and adaptable to various APIs via adapters, catering to diverse community needs.
4. Foster Community Engagement and Contribution: Establish an open-source model that encourages community contributions, feedback, and collaboration.

Technology Stack

• Lit.js for Web Components: Chosen for its lightweight nature and adherence to web standards, lit.js is ideal for creating fast, interoperable web components that can be easily integrated into various DeFi platforms.
• Angular for Application Development: Selected for its robustness, Angular provides a comprehensive framework for building scalable web applications, ensuring that the application utilizing the web components is maintainable and extensible.
• Monorepo with NX DevTools: A monorepo approach simplifies dependency management, streamlines the development process, and facilitates the sharing of libraries and tools across the project, ensuring consistency and quality.

Architecture

• Core Package: At the heart of the project lies the core package, providing essential functionalities and serving as the foundation for all web components and features.
• Web Components: Key components such as the swap interface and gas price calculator will be developed, with a focus on modularity and interoperability, enabling seamless integration into the Angular application and beyond.
• Adapters: Adapters will be implemented to allow for easy integration with various APIs, with initial examples like the 1inch adapter for fusion, showcasing the system's adaptability and customization potential.
• Configuration System: A robust configuration system will enable users to tailor the components to their specific needs, enhancing the toolkit's flexibility and user-friendliness.

Theming Capabilities

To ensure that our toolkit caters to a wide array of aesthetic preferences and branding requirements, we will incorporate comprehensive theming capabilities into our system. This feature will allow developers and end-users to customize the look and feel of the DeFi components and application, aligning with their visual identity and enhancing user experience.

Objectives

• Customizable Themes: Implement a theming system that supports customizable color schemes, typography, and component styling to accommodate diverse branding and aesthetic preferences.
• Easy Integration: Ensure that the theming system is straightforward to integrate, allowing developers to apply custom themes with minimal effort.
• Dynamic Theming Support: Provide support for dynamic theme switching, enabling applications to offer theme customization options directly to their users.

Implementation Strategy

• CSS Variables: Utilize CSS variables for theming, facilitating easy customization of colors, font sizes, and other style properties across all web components.
• Theming API: Develop a theming API within the core package, offering a standardized method for defining and applying themes.
• Predefined Themes: Offer a set of predefined themes that can be used out-of-the-box or as a foundation for custom themes.
• Documentation and Examples: Provide detailed documentation and examples on creating, applying, and switching themes to guide developers through the theming process.

Integrating theming capabilities will not only enhance the visual appeal of the toolkit but also empower the community to tailor the components to their unique branding and design standards, fostering a more inclusive and versatile ecosystem.

Community Engagement and Contribution

• Open Source Model: The project will be open-source, inviting developers and enthusiasts to contribute code, suggest features, and participate in the project's evolution.
• Documentation and Guidelines: Comprehensive documentation, including development guides, API references, and contribution guidelines, will be provided to support community members in using and contributing to the project.
• Adaptation and Extension: The project will encourage community members to extend the provided tools, create new adapters, and share their customizations, fostering a vibrant ecosystem of DeFi solutions.

Development Roadmap

1. Initial Setup and Core Development: Establish the monorepo structure, set up the core package, and begin development of the key web components.
2. Component Development and Testing: Develop, test, and refine individual web components, ensuring they meet performance and usability standards.
3. Angular Application Development: Start the development of the Angular application, integrating the developed web components and ensuring a seamless user experience.
4. Community Engagement and Beta Testing: Engage with the community for beta testing, gather feedback, and iterate on the toolkit based on user input.
5. Launch and Ongoing Development: Officially launch the toolkit, continue to develop new features, and support community-driven enhancements and contributions.

Conclusion

This project represents a significant step towards democratizing DeFi development, lowering the barrier to entry, and fostering a community of innovators. By providing a modular, customizable toolkit, we aim to empower developers and users alike to explore new possibilities in the DeFi space, driving forward the vision of truly decentralized finance.

Appendices

Appendix A: Technical Specifications

(Detailed technical descriptions of each component, API endpoints, configuration options, etc.)

Appendix B: Contribution Guidelines

To ensure a welcoming and productive environment for all contributors, we have established a set of guidelines and a code of conduct. These policies are designed to foster an inclusive community and streamline the contribution process.

Getting Started

1. Familiarize Yourself with the Project: Begin by reading the documentation, understanding the project structure, and setting up the development environment.
2. Review Open Issues: Check the issue tracker for open issues that need help. Look for issues tagged with "good first issue" if you're new to the project.

Making Contributions

1. Fork the Repository: Create your own fork of the repository to start working on your contributions.
2. Create a Branch: For each new feature or fix, create a new branch in your forked repository. Use a descriptive name that reflects the contribution, e.g., feature/swap-interface-enhancement.
3. Follow Coding Standards: Adhere to the coding standards and guidelines provided in the project documentation to maintain code quality and consistency.
4. Write Meaningful Commit Messages: Use clear and descriptive commit messages to explain the changes made in each commit.

Submitting Contributions

1. Test Your Changes: Ensure that your changes do not break any existing functionality and that all tests pass.
2. Submit a Pull Request (PR): Once your changes are ready and tested, submit a pull request to the main repository. Provide a detailed description of the changes and reference any related issues.
3. Participate in the Review Process: Be responsive to feedback and questions from the project maintainers during the PR review process. Make any requested adjustments to your contributions.

Code of Conduct

• Be Respectful: Treat everyone involved in the project with respect. Harassment, derogatory comments, and personal attacks are not tolerated.
• Collaborate Openly: Be open to collaboration, accepting of constructive criticism, and supportive of others' contributions.
• Contribute Positively: Aim to improve the project with each contribution, whether it's adding new features, fixing bugs, or improving documentation.

By following these guidelines, you help to create a positive and productive environment for everyone involved in the project. We look forward to your contributions and thank you for your support!

[DKotsyuba]

Thank you very much for your interest in the project and your contribution to it. I have a few questions about your proposal.

I didn't quite understand why we need to use lit.js + Angular. What problem will this solve?

[MitkoTschimev]

Creating and contributing to open-source and community-driven projects can be a great opportunity to build something together and share it with others. While I appreciate the idea of a new swapping dapp, I believe that we could make it even more successful and beneficial for the community by expanding the scope of the project. To achieve this, I would like to propose using a different framework, such as Lit, that is specifically designed for creating lightweight web components that are flexible and easy to implement. By using Lit, we can ensure that the web components we create can be used across different platforms, including in our case with Angular. I believe this approach can help us achieve our goals more efficiently and create a more valuable product for the community.

Angular elements have been proven to be not suitable because the output is too heavy.

[DKotsyuba]

As I understand it, the main idea is to create a modular solution based on web components so that various DeFi service providers can integrate a cryptocurrency exchange form directly into their website or application.

But I don't quite understand why Angular is used in this scheme.

Angular is an enterprise solution for developing large applications.

Lit.js is a lightweight library that implements the standard of web components and inherits the ideas of Polymer.

By combining these two solutions, we lose the lightweight nature of Lit.js and the power of Angular.

Could you provide a specific example of how you envision such a combination?

Moreover, in most Web3 projects, extremely heavyweight libraries such as web3.js and Ethers.js are used. In turn, I plan to use viem, which is a more modern and lightweight solution that will significantly reduce the weight of the final build.

Furthermore, abandoning RxJS in favor of signals will help reduce the final package size.

[DKotsyuba]

Additionally, I believe that directly integrating the exchange form into third-party applications may not be safe for the end user, as we cannot fully control the execution environment of our exchange form. Integrating via an iframe maintains isolation at the browser level, which is a safer solution.

[MitkoTschimev]

Honestly, I feel you don't have a lot of experience and a different perspective precisely what it means to build up a community and build up the motivation that others contribute. You have to create a system that others can reuse. Nobody is contributing for free. That is not how this world works, which is why my proposal goes toward building up a community like it was proposed in the initial draft on Snapshot. Angular is the wrong tool to provide web components and just providing angular modules/components is not community friendly. You need an adaptive system.

Regarding security, there are possibilities to secure them, but that's also not the idea. The idea is to provide components with adaptive integrations. e.g., a swap form that can use fusion as an exchange adapter or some custom integration by other contributors.

So, if you seriously want to do what you mentioned in your snapshot proposal, you have to rethink the way how this will be built.

[DKotsyuba]

Honestly, I feel you don't have a lot of experience since you suggest using a lesser-known solution (lit.js) for implementing a community project instead of proposing a widely used solution like React.

Additionally, if you had opened the code of my MVP, presented in this repository, you would have seen that Fusion Swap is already presented as a replaceable adapter, and if necessary, this code can be expanded to write alternative swap solutions such as classic swap.

From the above, I see that you have not familiarized yourself with my proposal and code, and I do not see the point in continuing this debate. Also, I notice that this issue, from a discussion on improving the project, is turning into a collection of subjective assessments. For this reason, this issue will be closed within the next 24 hours. Moreover, you are always welcome to create your own project repository and conduct your own development.

Wishing you all the best!

[MitkoTschimev]

I am curious how many contributors you will find!

I am happy to be convinced that this is the right approach ;)