Update the UI to include a list of Stewards for each collective

[benefacto]

Business Description

The focus of this enhancement is to provide users with detailed, up-to-date information about Stewards associated with specific collectives. This feature aims to foster a deeper understanding and engagement among users regarding the stewardship and contributions within each collective.

Key Features and Benefits

1. Comprehensive Steward Information: Users will be able to view a list of Stewards for each collective, including essential details like their names and NFT icons. This provides a more complete picture of the individuals contributing to each collective.

2. Interactive and Expandable List: The feature will display a list of Stewards that is expandable, allowing users to see the full list if there are more than five Stewards. This expandability ensures that users can access comprehensive information without overwhelming the initial view.

3. Direct Access to Steward Profiles: Each Steward's name will be clickable, leading users directly to their individual profiles. This direct link enhances user interaction and allows for deeper exploration of each Steward’s contributions and involvement.

4. Dynamic and Real-Time Data: The information displayed will be dynamic, reflecting the latest updates from the subgraph. This ensures that users are viewing the most current information about Stewards and their association with the collectives.

5. Visual Representation with NFT Icons: Utilizing NFT icons to represent Stewards adds a visual and personalized element to the information, making it more engaging and relatable for users.

6. Seamless Integration and Design Consideration: The design of this feature will align with the overall aesthetic of the platform, ensuring a cohesive and enhanced user experience.

Technical Implementation

• Extract and display a list of Stewards associated with specific collectives.
• The information should include the number of Stewards, their names, and their NFT icons.
• It should be expandable to see the full list of stewards if there's more than five.
• Each steward's name should be clickable to view their steward profile
• The data displayed should be dynamic, reflecting the latest information from the subgraph. Example query to get steward data (not filtered by a given collective):

  query StewardsQuery {
  stewards {
  id
  nft {
    id
  }
  }
  }

  Example query to filtered by a collective:

  query MyQuery {
  collective(id: "0x11f18e8f2a27d54a605cf10486b3d4c5aeeba81f") {
  stewards {
    id
    nft {
      id
    }
  }
  }
  }

• The nft.id should be used to call the tokenURI function here to retrieve the image URI to render the NFT or a default placeholder if unavailable
• Dependencies: Access to the subgraph data and proper integration is essential for accurate data representation.
• Design Consideration: Ensure the design aligns with the overall aesthetic of the platform and enhances the user experience.

Estimate

1. Requirements Clarification and Initial Setup (4-6 hours): Resolve ambiguities with where a single profile picture and name can be obtained from, given that stewards can have zero to many NFTs.

2. Implementation (16-24 hours):

   • Extracting and displaying the list of Stewards: Requires querying the data (using the provided example queries), handling the data appropriately, and implementing the logic for expandability.
   • Making each steward's name clickable and linking to their profiles.
   • Ensuring dynamic data update from the subgraph.
   • Incorporating NFT icons, including the logic to handle default placeholders if the NFT image is unavailable.

3. Integration and Testing (8-12 hours): Integrating the new feature into the existing system, ensuring seamless operation, and conducting basic functional testing. This step includes handling any edge cases, such as handling more than five Stewards, and ensuring responsiveness on different devices.

4. Review and Refinement (4-6 hours): Addressing any feedback and making necessary refinements.

Given these steps, the total estimated time could range from approximately 34-48 hours. This estimate assumes developer working efficiently and does not encounter significant obstacles. It's essential to note that actual time may vary based on the developer's expertise, the complexity of the task, and any unforeseen challenges that arise during development. Additionally, collaboration with other team members, might affect the timeline.

[sirpy]

The nft usage here seems incorrect. a steward can be part of multiple NFTs in a collective. nfts are minted when stewards do actions.

[decentralauren]

Hi @benefacto!

• The business description sounds mostly accurate - there is nothing in there that looks new or incongruent with the prototype and requirements shared prior save for the next point:
• The point @sirpy raises above is correct - the only NFT being displayed is a list of NFTs associated with a Steward's wallet, NOT their profile image / icon. This is the "78 measurements" in the below image, which when clicked launches the Celo explorer page for the wallet. These are the NFT specifically minted by the partner organization (the GoodCollective admin) that triggers the G$ payment via their smart contract. So it is the NFT that triggers the SC payment that belongs to the wallet holder and should be displayed here.
• The profile image is not an NFT, just an image randomly assigned from a database of images.
• Is there another requirement drafted for the Donor view per GoodCollective (list of people who have contributed to each GoodCollective), or is that already built / not needed?
• I do not have the technical expertise to otherwise comment on the Technical Implementation or Estimates so I defer to @sirpy to provide feedback on these items (looks like you were discussing already).

[krisbitney]

This is mostly implemented except for a bug on the desktop version

[decentralauren]

Thanks @krisbitney - @vldkhh moving into QA so you can test :)

[krisbitney]

Thanks @krisbitney - @vldkhh moving into QA so you can test :)

Sorry, to clarify, the update has not yet been merged

[vldkhh]

verified