Small Grants (Retro-funding): A Nouns.wtf Overhaul and Major Updates

NounsDAO Small Grants
1

Small Grants (Retro-funding): A Nouns.wtf Overhaul and Major Updates

TL;DR

This proposal brings much-needed TLC to the Nouns gateway - the Auction Site. Nouns.wtf has various deprecated components on the brink of being phased out, risking the site’s functionality. By revamping the nouns-webapp codebase, addressing outdated dependencies, enhancing chain calls handling, and implementing various fixes and optimizations, I aim to breathe new life into the platform. This overhaul will not only improve performance and streamline development, but also help onboard more developers and better retain existing contributors, ensuring consistency and quality among derivative projects while captivating and engaging even non-technical users.

Summary

This tech-focused proposal aims to enhance the performance, accessibility, and functionality of the Nouns Monorepo, paving the way for a more efficient and user-friendly platform.

As Nounish builders, we strive to make our core codebase the gold standard, enabling easier custom fork creation and facilitating the growth of Nounish projects. This not only serves the Nouns Flywheel but also fosters positive externalities, educating people about Nouns and crypto in general.

Through a series of optimizations and fixes, this proposal intends to improve chain call handling, performance, documentation, and implement new features like a robust caching system to minimize network traffic. These improvements will lead to a better user experience, attract new contributors, and ensure consistency and quality among derivative projects, all while recognizing and building upon the hard work of existing contributors.

Background

The Nouns Monorepo is an ecosystem comprising of smart contracts and SDKs that support the development of Nouns distributed applications. It includes the primary nouns.wtf site.

The Problem

The current site’s dependencies, including the wallet and chain interaction library web3-react (v6.1.9), are outdated, with some being two years old. To enhance accessibility and performance, the site needs optimization in chain call handling, bug fixes, and UI improvements. For example, implementing a caching system will limit surplus RPC calls, improving network efficiency and allowing better utilization of public resources. This change eases pressure on users’ systems and aids future builders, representing just one of the many fixes implimented.

The Solution

To unlock the full potential of the Nouns gateway, I’ve taken a deep dive into the nouns-webapp codebase, addressing outdated dependencies and fine-tuning it with valuable optimizations. This provides a seamless and enjoyable experience for users of all backgrounds.

To improve blockchain interactions, I’ve focused on performance enhancements that lead to quicker load times and a smoother user experience. I’ve also introduced a smart caching system to minimize network traffic, making the site more efficient and reducing the burden on users’ systems.

To make the development process more efficient and attract new contributors, I’ve improved documentation, streamlined dev onboarding. This leads to a more accessible platform that retains the talents of existing contributors while captivating newcomers.

In summary, this proposal upgrades result in an improved user experience, attract fresh talent, and ensure that the Nouns Monorepo remains a standout platform among its peers. By building upon the hard work of our existing contributors, we elevate the Nouns ecosystem to new heights, fostering growth and prosperity for the entire community.

My Story

Initially, my goal was to set up a development testbed for a Nouns app project. However, the complexity of setting up the simnet and site led me to identify opportunities for improving the Nouns Monorepo ecosystem. I observed that aside from the original builders, few people were contributing to the main site/contracts, despite many derivative projects making improvements. I realized there was a lack of upstream feedback and some dependencies, like web3-react, were outdated.

My motivation shifted to optimizing the Nouns Monorepo by addressing its current issues, providing a better user experience, facilitating onboarding for new contributors, and ensuring consistency and quality among derivative projects. What initially began as a small project to update the site to support web3-react v8 beta and create a tutorial evolved into a comprehensive effort to enhance the ecosystem.

To achieve this goal, I undertook various tasks, including updating dependencies, improving code performance and testing, adding new features, and enhancing documentation. Through these efforts, I aimed to create a more accessible and robust Nouns ecosystem that encourages collaboration and contributions from the community.

Inspiration and Vision

Encountering difficulties while setting up a development testbed for a Nouns app project inspired me to propose improvements to the Nouns Monorepo Dev Experience. I realized opportunities existed to improve the ecosystem and make it more accessible for developers.

My vision is to optimize the Nouns Monorepo by addressing its current issues, providing a better user experience, facilitating onboarding for new contributors, and ensuring consistency and quality among derivative projects. Through updating dependencies, improving code performance and testing, adding new features, and enhancing documentation, I aim to attract more developers to contribute to the main site/contracts and derivative projects, leading to a more vibrant ecosystem with better functionality and user experience. This will also make it easier for new contributors to onboard and improve the ecosystem’s overall quality.

Challenges and Opportunities

The DAO aims to create an inclusive and accessible ecosystem for developers to contribute to its growth. However, current pain points and issues hinder onboarding new contributors and impede the ecosystem’s progress.

Outdated dependencies and insufficient documentation create friction for new contributors, causing delays in the development process and limiting the ecosystem’s growth potential. Moreover, the lack of upstream feedback from derivative projects built from the Nouns Monorepo results in a disconnect between the main site/contracts and the broader ecosystem, leading to a less cohesive and less efficient ecosystem.

These issues also impact the DAO’s operations, making it difficult to implement changes and updates to the current site/contracts.

Conclusion

In conclusion, optimizing the Nouns Monorepo will lead to improved performance, easier development, and better contributions from the community. It will also ensure consistency and quality among derivatives and projects built using the monorepo.

Details

The Repository and Change Quantification

318 files changed, 26213 insertions(+), 7976 deletions(-)

git diff --stat 2f16e256aa0b12e8ad23768a3ae9384f6140f75d 01417bb4469ac98866dac12db142e471e9781f0a  'packages/nouns-webapp/**/*.ts*'

Nouns-Monorepo.png

Pain Points and Improvement Opportunities

  • Dependency Updates: Address outdated dependencies, particularly web3-react.
  • Component Optimization: Enhance site components by optimizing chain calls and performance.
  • Documentation Expansion: Improve API documentation within the monorepo to ease new contributor onboarding.
  • Support for Derivative Projects: Increase upstream kickback for projects built from the Nouns Monorepo.
  • Debugging and RPC Provider Optimization: Implement a debugging tracker for optimizing on-chain calls and RPC provider usage.
  • Local Development Setup: Add a docker-compose config and associated shell script for quick Nouns simnet instance dev testing.
  • Caching Enhancements: Implement additional caching to minimize RPC query and fetch rates.
  • Loading State Management: Improve settlement handling and associated button actions by refining async/loader/spinner handling.
  • Custom Auctions Guide: Document adding and starting auctions with custom assets.
  • Dark Mode: Implement dark mode and related UI elements.
  • Test Coverage Expansion: Add more unit tests for improved coverage.
  • WalletConnect Upgrade: Replace Web3React’s WalletConnect with WalletConnectV2 and port over Uniswap’s latest updates.
  • Name Service Optimization: Enhance Ethereum/Nouns Name Service calls and cache handling, or reintroduce react-countdown for NNS and ENS call fetching.

Summary of Outstanding GitHub Issues

  • UI Enhancements: Visual indicators for voting time left, vote reasons visualization, displaying all voting nouns, mobile auction page arrow size increase, lighthouse test color updates, and improved design/copy of Noun auction winner experience.
  • Auction Page Fixes: Correct URL paths, data on just settled Noun profile, etherscan link, and introduce keyboard controls and direct navigation between proposals.
  • New Feature Suggestions: Loading placeholders, warnings for self-rebidding, localization support exploration, and adding proposal execution ETA to the proposal page.
  • Auction House Protocol Changes: Reducing bidders’ ability to increase gas costs for the next bidder and displaying the entire timestamp on mobile view in “ends at” auction countdown view.
  • Nouns Profile Updates: Adding delegate/voting address info to vote rows and hiding the delegate view for non-Noun holders.

Changelog Summary

Updates
  • React and React-Router-Dom: Updated to React v18 and migrated from react-router-dom v5 to v6. Refactored the router and associate routes to support the latest version of react-router-domv6
  • Web3 React: Refactored the wallet and associated calls to support the latest version of Uniswaps web3-react library.
  • Package Updates: Updated the NounsPic API package, various dependencies and reconciled common packages across workspaces
Adds
  • Vite Integration: Set up Vite for build tooling and added associated polyfills.
  • Blockchain Call Caching: Implemented lru-cache, created a provider and useCall/useCalls wrappers for caching and minimizing RPC traffic.
  • On-chain Call Optimization: Implemented a “dev mode” and debugging tracker for optimizing and minimizing on-chain calls using wrappers around @usedapp/core useCall and useCalls hooks and an lru-cache provider.
  • Local Development Setup: Adding a docker-compose config and shell script for quick Nouns simnet instance dev testing.
  • CoinGecko API Optimization: Created a cache to minimize the rate of CoinGecko Eth conversion rate fetches.
  • Dark Mode: Adding dark mode with associated toggles.
  • GraphQL Handling: Integrated tanstack/react-query and associated prefetchers for handling GraphQL calls and added wrappers and state handlers for query prefetching on both the react-query and apollo clients.
  • React-Countdown: Added react-countdown for handling timers/spinners/countdown on wallet connect and auction modals.
  • Environment Configuration: Added contexts and hooks for consuming envVars, configs, and contract addresses.
  • Type Safety: Created object interfaces, typeguards, and improved typing.
  • Goerli Testnet Nouns Name Service: Added support for querying Nouns Name Service on Goerli testnet.
  • Import Structure: Implemented absolute imports “@/” for internal components.
  • Accessibility: Added keyboard listeners and touch accessibility features.
Fixes
  • Goerli Testnet Support: Fixed support for Goerli testnet.
  • Unit Test and Vite Compatibility: Fixed principal app unit test and ensured compatibility with Vite.
  • Auction Page: Fixed the Collapse toggle on the Auction page.
  • Alert Modal: Fixed alertModal persistence and behavior inconsistencies.
  • Auction Settlement: Fixed spinner not stopping on auction settlement.
  • Address Handling: Replaced 0x with the address.ZeroAddress constants to stop various invalid address errors.
Changes
  • Documentation Improvement: Improving and adding docs for the Nouns monorepo to ease dev onboarding and ensure consistency among projects.
  • Loading State Management: Refined the handling of async/loader/spinners, settlement and button actions, and fetching Nouns and Ethereum name service identities.
  • Custom Auctions Guide: Documenting how to add and start auctions with custom assets.
  • GraphQL Client Evaluation: Utilize the Apollo and React-Query wrappers to Determine which client is better for making GraphQL calls at the application and component level.
  • Test Coverage Expansion: Adding more unit tests for better coverage.
  • WalletConnect V2 Integration: Replaced Web3React’s WalletConnect with WalletConnectV2 and ported over Uniswap’s latest updates.
  • Name Service Optimization: Improved Ethereum/Nouns Name Service calls and network utilization via cache handling.
  • Address/Name Display Refinement: Compartmentalized address/name displays by creating separate components for handling the display of addresses and name rendering separately.
  • Memoization: Improved the usage of memoization hooks and optimized chain calls and state reporting with memoization techniques.
  • Component Reorganization: Broke apart and reorganized App root, index, Providers, and Router components.
  • RPC Providers: Optimized the usage of useWeb3React, useEthers, and ReadOnlyProviders.
  • Typing and Typeguarding: Improved typing, replaced usage of the catch-all any type with unknown and created interfaces for typeguarding it and various other functions.
  • ReactToolkit Update: Updated components to support the latest version of ReactToolkit.
  • Configuration Management: Centralized config/env loading into a set of config files and created associated hooks for consuming the variables.
  • Log Processing Optimization: Optimized the log processing/reduction algorithm.
  • ETH Constants: Replaced hardcoded ETH constants with ethers library constants.
  • Text Formatting: Improved text formatting by replacing “'” with ‘&apos’, and other similar changes.
Removals
  • React-Scripts: Moved away from react-scripts to Vite and reconfigured/adapted the monorepo and other packages.

Suggested Metrics and KPIs to Track:

  • Onboarding Time for New Contributors: Assess the duration required for new contributors to become familiar with the Nouns Monorepo to gauge the effectiveness of proposed improvements in easing the onboarding process.
  • Forks and Contributors Count: Monitor the number of forks and contributors over time to evaluate if the proposed changes generate increased interest and support from the community.
  • Developer Satisfaction: Gather feedback through surveys or other methods from developers using the Nouns Monorepo to measure satisfaction and pinpoint areas for further enhancements.
  • Error Rates: Observe error rates and user-reported issues to determine if the proposed optimizations enhance platform stability and reliability.
  • Performance Metrics: Track page load times, API response times, and server resource usage to evaluate the success of proposed optimizations in improving platform performance and scalability.
  • Unit Test Coverage: Measure code coverage by unit tests to identify areas needing more tests and ensure that code modifications do not introduce new bugs or regressions.
  • Documentation Completeness: Assess documentation completeness and accuracy to pinpoint areas that need more information and guarantee that new contributors can quickly acclimate.
  • New Feature Adoption: Measure the adoption rate of features introduced with the proposed changes to evaluate if they meet user needs and inform future development priorities.
  • Community Engagement: Gauge community engagement through forum posts, issue reports, and pull requests to determine if the proposed changes foster increased participation and collaboration.
  • Chain Calls Reduction: Track the number and reduction of chain calls made by the platform using the debugging tracker and cache to assess the success of proposed optimizations in minimizing on-chain calls and improving performance.

External Parnters and Stakeholders:

  • Lil’nouns and other Nounish DAOs and their forks

Value Add to the Ecosystem:

  1. Enhanced Developer Experience: The improved monorepo will offer a better experience for developers contributing to NOUNS DAO projects, increasing engagement and participation, leading to a more robust ecosystem.
  2. Faster Time-to-Market: A streamlined and efficient development process facilitated by the enhanced monorepo will accelerate time-to-market for new products and services, providing the NOUNS DAO with a competitive advantage.
  3. Attraction of New Talent and Resources: A stronger, more vibrant NOUNS DAO community, fostered by the improved monorepo, will draw new talent and resources, boosting innovation, growth, and adoption of NOUNS DAO products and services.

The NOUNS DAO monorepo improvements will reinforce the ecosystem, elevate developer and user engagement, and bolster the NOUNS DAO’s competitive position within the broader crypto landscape.

Proposal Technical Requirements

  • Technology and Framework Expertise: Familiarity with Vite, GraphQL clients (Apollo client and react-query), Web3React, ethers/usedapp library, and caching libraries/tools (lru-cache, @msgpack/msgpack).
  • Web Development Tools and Techniques: Proficiency in React, TypeScript, and CSS for implementation, optimization, and debugging and knowledge of memoization, React hooks, handling async calls, Ethereum/Nouns Name Service calls, and caching.
  • Software Testing and Containerization: Familiarity with testing practices, tools, and containerization technologies such as Docker and docker-compose.

Team/Qualifications

I’m Philip Strefling, also known as Pips, an experienced software developer leading the tech teams at two Web3 businesses. My background in Data Science and Process Science equips me with a unique skill set that includes performance optimization, documentation, and guidance of research associates and junior developers.

As a Technical Lead at multiple Web3 organizations, I have honed my technical expertise and experience in the software development industry by assisting top brands and companies in establishing their Web3 presence through innovative solutions.

I am confident in my ability to apply my skills to enhance the functionality of the Nouns Monorepo, making it a more appealing platform for developers.

My passion for creating positive change and educating others about the potential of Nouns and Web3, combined with my experience and skills, makes me a strong candidate for this project. I am eager to contribute and collaborate with the community to improve the functionality and accessibility of the Nouns Monorepo.

To build trust in the community, I am including my Social handles:

Budget

  • This proposal aims to be funded through NSFW/small grants pool.
  • The total retro funding request for this proposal is 10 Eth.

Detailed budget breakdown:

  • Development: 8 ETH
    • Developer retro compensation: 8 ETH
  • Maintenance: 1 ETH
    • Three months commitment towards maintaining upstream parity and package upadates* : 1 ETH
  • Documentation, Strategy and Planning: 1 ETH
    • Consultation (w/ @nonodynamo) on development roadmap, community outreach and draft editing : 1 ETH

Transaction Information

9 Eth => circlenaut.eth
1 Eth => @nonodynamo

1 Like
2

Corrected link to the video, ordering of git diff command and improved structure and flow.