Michael/agora 1686 copy addresses when clicking on 0x5f4 shorten addresses UI #246

mcgingras · 2024-04-22T18:05:51Z

resolves AGORA-1686.

I implemented two different approaches, as shown in the loom. I'm more of a fan of the second approach, since it offers better visual affordance that the address is copyable, but the first approach is more consistent with the behavior of clicking the discord icon to copy it.

I'm happy to go with either, just let me know!

PR-Codex overview

The focus of this PR is to enhance user experience by adding a copyable feature to addresses and improving click interactions in various components.

Detailed summary

Added copyable feature to addresses in DelegateProfileImage
Updated click interactions in VStack and HStack components
Introduced CopyableHumanAddress component for address copying with visual feedback

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

…delegate address on delegate card.

…is copy-to-clipboard ready.

…ity on voter page

linear · 2024-04-22T18:05:54Z

AGORA-1686 Copy addresses when clicking on 0x...5f4 (shorten addresses), UI-UX improvement

vercel · 2024-04-22T18:05:59Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
agora-next	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 23, 2024 5:03pm
agora-next-ens	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 23, 2024 5:03pm
agora-next-etherfi	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 23, 2024 5:03pm

stepandel · 2024-04-22T18:12:32Z

src/components/shared/CopyableHumanAddress.tsx

mcgingras · 2024-04-22T18:15:14Z

I think I'm getting prettier errors which is causing the failed builds... I'll figure out how to get it such that my code is formatting correctly on save. I have a new computer so it's currently not set up 100% yet.

mcgingras · 2024-04-22T18:19:57Z

src/components/Layout/Stack.tsx

@@ -21,6 +21,7 @@ type Props = {
    | "items-start"
    | "items-end"
    | "items-baseline";
+  onClick?: (e?: any) => void;


I found myself wanting to add onClick to an HStack and was about to wrap it in a div so I could add an onClick to the div wrapping it. But then I figured the HStack is just a div itself... theres no reason it shouldn't just accept an onClick prop. So I'm adding it here... if we don't like this I can take it out!

lol i've been here a thousand times. i've been out of the code base long enough that i've forgotten we don't have a click handler on stack. guess it's to keep it to a positioning only thing

(please don't mind anything i say on this tho, i'm just a tourist in eng lol)

yitongzhang · 2024-04-22T23:46:14Z

my only feedback is that this icon is a little thin! does hero icons have a thicker version? if not feel free to grab a thicker one as an svg here: https://www.figma.com/file/KgDS03VEYPclv3l7lJ3Sfm/Agora-Icons?type=design&node-id=181%3A128951&mode=design&t=lnzGu9Gg45a2PNSP-1

Also i know our icon system is a bit of a mess! file it under the list of design system to dos

andreitr

Before I looked at the code, I couldn't figure out that the address was copyable :) My vote would be to make the icon visible. As for the code—solid work! Congrats on your first commit, Michael

mcgingras · 2024-04-23T15:06:18Z

my only feedback is that this icon is a little thin! does hero icons have a thicker version? if not feel free to grab a thicker one as an svg here: https://www.figma.com/file/KgDS03VEYPclv3l7lJ3Sfm/Agora-Icons?type=design&node-id=181%3A128951&mode=design&t=lnzGu9Gg45a2PNSP-1

Also i know our icon system is a bit of a mess! file it under the list of design system to dos

I don't think heroicons have a thicker icon, they have a solid, filled icon set but I wasn't a big fan of the solid filled clipboard icon. I can try one of yours though, thanks for the link!

…esses UI (#246) * Adds improvement to copy delegate address to clipboard when clicking delegate address on delegate card. * Adds CopyableHumanAddress which shows a human readable address which is copy-to-clipboard ready. * Adds copyable flag to DelegateProfileImage to prevent copy functionality on voter page * Runs prettier on AGORA-1686 code changes * Fixes vercel build issue on copy-pasteable delegate branch * Adds thicker clipboard icon

mcgingras added 3 commits April 22, 2024 10:54

Adds improvement to copy delegate address to clipboard when clicking …

6c6aa3d

…delegate address on delegate card.

Adds CopyableHumanAddress which shows a human readable address which …

edc0681

…is copy-to-clipboard ready.

Adds copyable flag to DelegateProfileImage to prevent copy functional…

67c8703

…ity on voter page

vercel bot had a problem deploying to Preview – agora-next April 22, 2024 18:06 Failure

vercel bot had a problem deploying to Preview – agora-next-ens April 22, 2024 18:06 Failure

vercel bot had a problem deploying to Preview – agora-next-etherfi April 22, 2024 18:06 Failure

stepandel reviewed Apr 22, 2024

View reviewed changes

src/components/shared/CopyableHumanAddress.tsx Outdated

Copy link

Contributor

stepandel Apr 22, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

mcgingras commented Apr 22, 2024

View reviewed changes

Runs prettier on AGORA-1686 code changes

a6f7366

vercel bot had a problem deploying to Preview – agora-next April 22, 2024 18:30 Failure

vercel bot had a problem deploying to Preview – agora-next-ens April 22, 2024 18:30 Failure

vercel bot had a problem deploying to Preview – agora-next-etherfi April 22, 2024 18:30 Failure

Fixes vercel build issue on copy-pasteable delegate branch

6a5dedb

vercel bot deployed to Preview – agora-next-ens April 22, 2024 19:15 View deployment

vercel bot deployed to Preview – agora-next-etherfi April 22, 2024 19:15 View deployment

vercel bot deployed to Preview – agora-next April 22, 2024 19:15 View deployment

stepandel requested a review from andreitr April 22, 2024 21:42

andreitr approved these changes Apr 23, 2024

View reviewed changes

Adds thicker clipboard icon

c84f0cf

vercel bot deployed to Preview – agora-next-etherfi April 23, 2024 17:02 View deployment

vercel bot deployed to Preview – agora-next April 23, 2024 17:03 View deployment

vercel bot deployed to Preview – agora-next-ens April 23, 2024 17:03 View deployment

mcgingras merged commit 7c9df42 into main Apr 23, 2024
6 checks passed

mcgingras deleted the michael/agora-1686-copy-addresses-when-clicking-on-0x5f4-shorten-addresses-ui branch April 23, 2024 22:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Michael/agora 1686 copy addresses when clicking on 0x5f4 shorten addresses UI #246

Michael/agora 1686 copy addresses when clicking on 0x5f4 shorten addresses UI #246

mcgingras commented Apr 22, 2024 •

edited by pr-codex bot

Loading

linear bot commented Apr 22, 2024

vercel bot commented Apr 22, 2024 •

edited

Loading

stepandel Apr 22, 2024

mcgingras commented Apr 22, 2024

mcgingras Apr 22, 2024

yitongzhang Apr 22, 2024 •

edited

Loading

yitongzhang commented Apr 22, 2024

andreitr left a comment

mcgingras commented Apr 23, 2024

Michael/agora 1686 copy addresses when clicking on 0x5f4 shorten addresses UI #246

Michael/agora 1686 copy addresses when clicking on 0x5f4 shorten addresses UI #246

Conversation

mcgingras commented Apr 22, 2024 • edited by pr-codex bot Loading

PR-Codex overview

Detailed summary

linear bot commented Apr 22, 2024

vercel bot commented Apr 22, 2024 • edited Loading

stepandel Apr 22, 2024

Choose a reason for hiding this comment

mcgingras commented Apr 22, 2024

mcgingras Apr 22, 2024

Choose a reason for hiding this comment

yitongzhang Apr 22, 2024 • edited Loading

Choose a reason for hiding this comment

yitongzhang commented Apr 22, 2024

andreitr left a comment

Choose a reason for hiding this comment

mcgingras commented Apr 23, 2024

mcgingras commented Apr 22, 2024 •

edited by pr-codex bot

Loading

vercel bot commented Apr 22, 2024 •

edited

Loading

yitongzhang Apr 22, 2024 •

edited

Loading