Participant Profile

[blueridger]

As a user, I want a shareable link that displays only information about my own contributions and cred/grain, so that I can use my participation in sourcecred-powered organizations to boost my reputation outside of the org.

[blueridger]

show, cred and grain info for a single user

[magwalk]

Design Spec for Issue

Full design Figma file: https://www.figma.com/file/xMwP924MQHR3mA1TvmJLkh/User-Profile?node-id=0%3A1

Things to note:

• Prioritize building the desktop view first, then mobile.
• "Date Activated" is a "nice to have" - if it doesn't fit in easefully then that can be made into a separate issue and "all time cred" and "all time grain" will take up more horizontal space (i.e. "all time cred", "all time grain" and "cred over time" can each take up 1/3 or 33.3% of the space of the parent element)
• The cred timeline (i.e. the line graph next to "cred over time") will need to be pulled out of the "explorer home" component so it can be used both here and on the "explorer home" page.
• If the left border gradient is too tricky to figure out, it can be a solid color. Use #7C6881 (primary.dark in the theme palette)
• On small screens, if the username is so long that it is wider than the parent element, truncate the text with ellipsis.

Component design (both mobile and desktop views)

Component design in context (desktop)

Component design in context (mobile)

[magwalk]

I realized I was missing HTML/CSS and decided to write up a codepen showing how I might code this up in raw html/css (there is some SCSS syntax in the CSS). Feel free to reach out if you have questions about the decisions I made in here: https://codepen.io/magwalk/pen/bGYdywa?editors=1100

[shreyjain13]

@magwalk from a technical lens, it would be nice if users could mint their user profile as an ERC-1155 token with metadata that is updated with the cred data showcased in their profile to put this information on chain.
Happy to hack more on that with you if you want (drop a DM on discord @ shreyjain.eth#3396