feat: redesign connection flow

[kyranjamie]

Try out Leather build 371ceeb — Extension build, Test report, Storybook, Chromatic

Closes leather-io/issues#283

This PR implements the redesigned getAddresses flow. Using the Approver UX that's now in the design system. I've also added a warning in the inpage.ts to alert app devs they should upgrade.

Screenshots

Light	Dark	Switch account

Demo

2024-09-25-000296.mp4

Requested by link

This opens the page that requested the action, not a new page.

2024-10-02-000307.mp4

[pete-watters]

Nice work 👍 LGTM on initial glance

[fbwoolf]

Lgtm ...should the icon you are adding here be shared form the UI lib?

[kyranjamie]

should the icon you are adding here be shared form the UI lib?

It's not really an icon like the others, just an illustration

[fbwoolf]

It's not really an icon like the others, just an illustration

We do have an assets-web folder in the UI lib so that is confusing?

[kyranjamie]

What's the purpose of that folder exactly? For assets that belong in the ui library? Is it supposed to be that all image assets go there, even if they don't correspond to a given ui component?

[fbwoolf]

What's the purpose of that folder exactly? For assets that belong in the ui library? Is it supposed to be that all image assets go there, even if they don't correspond to a given ui component?

Tbh, I don't know. @pete-watters I believe you created it? It was part of the build when I started working on icons.

[pete-watters]

What's the purpose of that folder exactly? For assets that belong in the ui library? Is it supposed to be that all image assets go there, even if they don't correspond to a given ui component?

Tbh, I don't know. @pete-watters I believe you created it? It was part of the build when I started working on icons.

@edgarkhanzadian added it when first building the UI package. It's similar to public/assets in the extension, containing web only static assets .png images, font files etc.

There are both an icons and illustration folder there. I would put this asset in assets/icons along with the other .svg files if it was being shared with native but as it's just used on web, I think it's OK where it is now

[alter-eggo]

lgtm, great to see that animations 💪
I only feel like we can do them a little bit faster when show connection page?

[kyranjamie]

I only feel like we can do them a little bit faster when show connection page?

Agree, we can tune up a tad in mono

[markmhendrickson]

Looking good! Should we integrate Crowdin here as a first extension-side integration, for the copy?

[kyranjamie]

@markmhendrickson @fabric-8 ready for re-review

feedback resolved

[fabric-8]

looking good! 2 more minor questions which I think should not be regarded as blockers:

• Some minor alignment issues within the "select account" header bar, but we should prob. handle as a separate issue? (It's a general issue and not specific to how it's being display within connect)
• use the first/last 3 instead of 4 digits of the account addresses? I think it would help with giving the layout a bit more space and improve scan-ability. Or is there a very strong preference for the first/last 4 digits? @markmhendrickson @314159265359879 ?

[markmhendrickson]

is there a very strong preference for the first/last 4 digits?

I don't have a strong preference either way, though 4 digits does seem more common generally.

[markmhendrickson]

Some minor alignment issues within the "select account" header bar, but we should prob. handle as a separate issue?

I'm seeing that as well. It's indeed in production as well, though, so let's split out into its own issue: https://github.com/leather-io/issues/issues/375

[markmhendrickson]

@fabric-8 should we have the same padding for the account component below the hover effect for an account as on the sides? Or is the smaller bottom padding inevitable so that everything lines up in the non-hover state?

It appears we may have more bottom padding for this component in general.

Forgive the photo (I wasn't able to capture as a screenshot for some reason without the hover effect going away)

[kyranjamie]

• I've migrated from position: sticky to position: fixed per your comment @markmhendrickson. I don't necessarily think one is more correct than the other, as the latter adds a few additional complexities/assumptions to deal with and bounce is just an OS feature, but adjusted here. There's a lot more to it, we now need a "listener" to get the action bar height so we can pad the scroll sufficiently. Also required fixes in Storybook to prevent it going outside the bounds
• I've padded the bottom so the hover doesn't look so tight, Ginny agrees it looks better, so its been design reviewed 🙃
• If the user navigates away from the tab, we'll focus them back when they confirm the connection

feedback resolved

feedback resolved

[markmhendrickson]

🚀