Revamp fam page

[JustinDrake]

Goal: Showcase all ~6K fam members on the website.

Inspiration: The cryptopunks explorer on https://www.larvalabs.com/cryptopunks

Possible design: See screenshot. Notice the horizontal scrollbar.

[rakshit087]

I figured CryptoPunk uses https://openseadragon.github.io/ for the zoomable and scrollable canvas. Do we have an API call to get the fam?

[JustinDrake]

For the frontend PoC my suggestion would be to use https://ultrasound.money/api/fam/profiles

It's only 120 profiles but if you reuse each profile 50 times you can simulate having 6,000 profiles.

[rakshit087]

Got it thanks 👍

[jeffgat]

Hey, @JustinDrake mentioned this idea in our chat on Friday and so I thought I'd throw something up for it. Forked the repo at https://github.com/jeffgat/frontend

I didn't quite do it how they have it in cryptopunks. I noticed the screenshot is a bit different than how their navigator works. So, I threw the fam profile pics into react-window, a library that renders as you scroll through. I tried to do this manually and performance was so difficult, so i opted to use a library instead. I have just under 10k users displaying in my example.

On top of that I added the side-by-side card display in the screenshot above, giving the section of bit of a facelift.

A few issues since I did this relatively quickly and is more so a proof of concept:

1. The position of the tooltip shows up in the top left now, because of the way react-window uses position: absolute to achieve the "loading/rendering as you scroll" effect. Perhaps tooltip could have the modal behaviour, maybe there's a "selected fam profile" card section that gives you more details on larger screens rather than a modal taking over the screen. Just an idea.
2. Not quite responsive. The scrolling container needs to be styled in inline styles so I just left it out, not really an issue, just more of an annoyance.

If you guys like it, I'm happy to make any changes, use a real endpoint, and make the PR. If not, that's cool too!

[kylekaplan]

Here is an implementation I built using react-zoom-pan-pinch library. code: https://github.com/ultrasoundmoney/frontend/compare/main...kyle-revamp-fam-page-issue-239 video demo: https://www.loom.com/share/d0020f8aa130414c8f08c51ce0da49c3

@rakshit087 I also looked at the openseadragon (lol that it has opensea in the name) library used by Larva Labs, but I didn't go for this because it's expecting one big image plus some complicated data mapping, instead of simple react code. However, if my implementation has serious performance issues, using one big image may be a decent option. Or something like @jeffgat that has "loading/rendering as you scroll"

[JustinDrake]

@rakshit087, @kylekaplan, @jeffgat: Here is a dump of the fam profiles for initial performance tests.

@alextes: The current Twitter image resolution is too large for the full fam page. Would it be possible to add a column in the fam table with links to lower-res Twitter images?

[jeffgat]

Ran some lighthouse tests on localhost with the real fam count (5895). One with my implementation and then just one where I commented out the TwiiterFam component.

With TwitterFam on the left, without on the right:

The changes are pretty marginal, I think the best practices go down because it initially loads the page and the container that holds the twitter fam profiles extends off the screen.

Short demo: https://www.loom.com/share/91ce82ab2a0d44228e2aac887bb6c145

I think that perfomance isn't much of an issue here. If you scroll too fast it'll start to get a bit delayed/janky because of how the rendering is triggered. I quite like what @kylekaplan did though. If it doesn't affect page speed too much it seems like a better interface.

[alextes]

Hi all 👋

Added a /api/fam/all-profiles these are sorted by firstSeen, which you can now also find in the profile as a date time string. To keep things simple, everything else is the same.

[JustinDrake]

I quite like what @kylekaplan did though.

Agreed!

everything else is the same

To test performance we may need low-res image URLs.

[rakshit087]

That was a real quick implementation @jeffgat & @kylekaplan, great work you two! 🎉

[alextes]

Ah yes @JustinDrake , I forgot to reply to that point. Our application server, the one that serves the frontend is capable of resizing images. So if images are too high-res its up to the frontend to request a lower-res version. This way, the backend only stores the highest res version, and the frontend may go so far as to request a different image depending on screen size or even network speed.

Link to the docs for this component can be found here: https://nextjs.org/docs/api-reference/next/image .

[kylekaplan]

So I'm testing out the performance with all the fam members and I would say it is alright, but definitely not super smooth.

For the Image tag I am setting the quality to 50 and the size to 40px. I didn't see super noticeable improvements when reducing the quality below 50.

Here is a loom demo: https://www.loom.com/share/d9113edfc2484f78a5825b66c608cda0

@jeffgat, Which performance tester did you use?

@alextes @JustinDrake Do you guys have like a test dev environment we can publish to so you guys can play with it and feel the performance?

[jeffgat]

@kylekaplan i just used lighthouse in the dev tools.. which isn't really quite ideal cause the score will be vastly different from the production build vs running it locally.. so you'll have to compare it against itself without the component on localhost.

[kylekaplan]

@jeffgat Good point about the production build. I built the app and served it locally and the performance of the fam area is actually way better.

Check it out: https://www.loom.com/share/83ca49bbe2ae4dd39fa658f0314cfa65

And here is a lighthouse run of the production build (with all fam members):

[JustinDrake]

@alextes @JustinDrake Do you guys have like a test dev environment we can publish to so you guys can play with it and feel the performance?

@alextes is best placed to answer this.

[alextes]

We only have one at the moment which is in use for staging.

I don't think I'll find the time the coming days although I've thought about it and it's not much work if we really need it for something.

Until then running a production build locally should get you all you need except testing performance or auth.

Is it possible to share a branch instead?

[kylekaplan]

@alextes No problem, was just wondering. I can also spin up a dev serve myself, no big deal.

But yeah, right now the code is on a branch called kyle-revamp-fam-page-issue-239

I'll see if I can push a few more updates this weekend.

[kylekaplan]

Pushed some updates regarding the top of the fam page section, to my branch.

In the image of the figma file it looks like the copy button has a gradient border. But I can't quite guess what the colors are. I tried looking on the figma file, but got 404 error.

[JustinDrake]

I tried looking on the figma file, but got 404 error.

Here is our Figma. Sharing is now set to "Anyone with the link can view". I also just sent a Figma invite with editing rights.

[kylekaplan]

Hey, so I deployed my updates to a dev url so you guys can test it out.

https://kyle-frontend-6ljrsr3mm-kyle-ultra-sound-money-frontend.vercel.app

It includes UI updates and full screen mode.

[JustinDrake]

Looks promising as a proof of concept! :) Below is some feedback to help bring it to production.

• [x] 1) Not all images are correctly sized (see screenshot 1).
• [x] 2) For consistency the background colour of the full-screen mode should be blue, not black.
• [x] 3) The controls for the full-screen mode are missing top padding (feels cramped). See screenshot 2.
• [ ] 4) The full-screen mode is buggy (see screenshot 2).
• [x] 5) The tooltip doesn't close on click. (E.g. open a tooltip then drag the fam members.)
• [ ] 6) When resizing the page the ordering of the fam members changes. This leads to some aggressive re-rendering and re-placements. In contrast, CryptoPunks always has the same number of fixed-size rows (and therefore columns). My intuition is that keeping a fixed grid would significantly improve the UX (more stability, predictability; better performance?).
• [x] 7) If you click on a profile, drag, then unclick the tooltip sometimes opens. IMO the tooltip shouldn't open if dragging.
• [x] 8) The CryptoPunks explorer (which may have more elements than us—10,000 punks as I understand) is significantly smoother to drag. Maybe we're missing a low-hanging performance optimisation.
• [x] 9) The styling of the fam count widget is inconsistent with other widgets. (E.g. wrong bottom padding, incorrect font style for number of members.)
• [x] 10) The right side (screenshot 3) seems to have more padding than between images.
• [x] 11) When the tooltip loads, it shows ? as the image for a bit, then the image load. IMO it would be cleaner to show the low-res image first (instead of ?), and then replace that with the higher-res image.
• [x] 12) Clicking outside of the widget (e.g. clicking the "copy" button) doesn't close the tooltip.

Happy to jump on a call to polish the design on Figma and/or share my screen to better explain some of the opportunities for polish.

screenshot 1

screenshot 2

screenshot 3