[UX] Design a state for the copy link having worked

[setch-l]

In onboarding users to Nos, multiple people have indicated that the Copy button for the Private Key on settings has no indication that the link has been copied.

AC -

• Design a ux affordance to let users know they have copied their private key
• If possible make this affordance work across the app for these types of buttons.

[Chardot]

Design

Here's a link to these designs on Figma.

I improved the interaction with the Copy button by adding an icon to the default state and generating a new label for the tapped/clicked state.

Current button

The Copy button looks like this:

Default state

I added an icon to the default state, which now looks lie this:

Tapped/Clicked state

A longer label in the default state gives us more room for a longer "Copied!" label on this state:

Haptics

On button press, a Selection haptic feedback is triggered as detailed in Apple's HIG: https://developer.apple.com/design/human-interface-guidelines/playing-haptics#Selection

Button width

The button must keep its same width between both states. On button press, the copy icon is hidden and the text label is centered for the next state.

Copy icon

Here's the SVG file for the copy icon: