[Explorer] Updates UI for Addresses displaying packages

[apburnie]

The below demo shows how this works at different screensizes:

https://user-images.githubusercontent.com/11377188/200658898-83c77dab-54ee-438b-8ef1-6b80ecce6b95.mp4

Updated 8/11/22

[apburnie]

@Andrew47 i see deltas from mobile & tablet breakpoints? https://www.figma.com/file/kSD0qXCIDZA4KQVNepA5hR/02-Explorer?node-id=211%3A48503

@mystie711 , It might be that some of these features are to be implemented in subsequent PRs. The list I have is as follows:

1. Display modules in a paned section (this PR)
2. Add search functionality (next PR)
3. Display public functions - this is where I'll add the Simulate & Execute section
4. Support executing transactions within module view - this is where I'll add the buttons you see in the Simulate & Execute section

[mystie711]

@Andrew47 good to know we have more PRs coming. I was specifically referring to spacing and ui component details for mobile/tablet sections,

• selection state of items in Modules list
• selection bg color
• module list height on mobile, tablet

If it is easier to talk through over a Slack huddle let's do that.

[apburnie]

Just to keep all reviewers in the loop; I'm going to change the plan and add the search functionality part to this PR. This matches with there being one JIRA task for both pieces of functionality. It should also simplify getting the padding/spacing right.

[apburnie]

@mystie711 --> I've updated the PR:

• The cut-off from the 'mobile' look to the 'desktop' look has been reduced to 768vw.
• There is now a search bar.
• The borders were indeed > 1px; this has been fixed.
• The space on the right of the buttons has been reduced.
• Only 5.5 items are shown on mobile screen sizes.
• I've checked the colours match those specified in Figma.

The video at the top of the page has been updated to reflect the new look.

[Jordan-Mysten]

Looks like there's some weird breakpoints:

[apburnie]

Looks like there's some weird breakpoints:

This is strange. I've tested the PR on Chrome, Firefox and Safari on macOS and could not replicate this screenshot. Could you provide some further details on where this was seen?

Further update: I've also rebased on main and this did not make a difference either.

[Jordan-Mysten]

It happens for me at window width of 1544px.

[apburnie]

1544px

Excellent - I see now.

[github-actions[bot]]

💳 Wallet Extension has been built, you can download the packaged extension here: https://github.com/MystenLabs/sui/actions/runs/3481149651#artifacts

[apburnie]

@mystie711 / @Jordan-Mysten , I've updated the PR to use the new search function UX as detailed in Figma

[vercel[bot]]

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

Name	Status	Preview	Updated
explorer	✅ Ready (Inspect)	Visit Preview	Nov 16, 2022 at 4:22PM (UTC)