ethereum-org-website icon indicating copy to clipboard operation
ethereum-org-website copied to clipboard

feat: Wallet table desktop

Open nhsz opened this issue 1 year ago • 3 comments

This PR makes all the changes requested for wallet's table desktop version, as requested on the design

Description

  • updates wallet table layout
  • updates WalletMoreInfo layout
  • updates WalletMoreInfoCategory component
  • updates useWalletTable hook
  • adds useWalletPersonas hook
  • adds getWalletPersonas util
  • adds getSupportedLanguages util
  • adds formatSupportedLanguages util
  • adds useLanguagesList hook
  • adds supported devices list to table UI
  • adds supported languages list to table UI
  • updates icons used on table
  • adds DevicesIcon, LanguagesIcon
  • updates i18n namespaces used for /find-wallet
  • updates table heading styles
  • updates contants.ts

Note

DO NOT MERGE BEFORE https://github.com/ethereum/ethereum-org-website/pull/12232

Preview

https://deploy-preview-12191--ethereumorg.netlify.app/wallets/find-wallet

nhsz avatar Feb 15 '24 16:02 nhsz

Deploy Preview for ethereumorg ready!

Name Link
Latest commit 256fcadf3d5b724f04dc2917399b467bec0fa18e
Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/65d8d57a5a1c5f00085bd800
Deploy Preview https://deploy-preview-12191--ethereumorg.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Feb 15 '24 16:02 netlify[bot]

Awesome! This looks great @nhsz, nice job!

Started going through testing out the actual preview before diving into the code... First couple things I'll just note:

  1. Keyboard navigation... this works pretty well, but spotting a couple things where a user could get stuck:
  • Unable to navigate within a filter dropdown menu:

https://github.com/ethereum/ethereum-org-website/assets/54227730/1d8b6e8e-e82c-42c5-b64c-f6ced6044cbc

  • Unable to open an accordion; only option is to visit website.

https://github.com/ethereum/ethereum-org-website/assets/54227730/b11c2166-dbcb-44eb-9256-8a1613ed527d

...Once the accordion is open, accessing the socials icons works perfect, but nice-to-have would be the ability to close the accordion as well from keyboard if desired.

  1. Wallet listings... I see updates in the Figma about items to be removed, and items that will be listed as "New to crypto", but I don't see these changes in the PR... assuming this is probably coming, but just wanted to note.

  2. I'm unable to get any of the "Feature filters" to toggle

https://github.com/ethereum/ethereum-org-website/assets/54227730/c03ac211-3ebe-4300-9ac9-c5144a6614b7

In the above recording I'm clicking all over there but nothing opens... oddly, after recording I was able to find a spot that did toggle one of them, but then I couldn't toggle it back or toggle any of the contained checkboxes:

https://github.com/ethereum/ethereum-org-website/assets/54227730/57314629-90d4-4b67-a042-b3351e9535b0

wackerow avatar Feb 16 '24 23:02 wackerow

Awesome! This looks great @nhsz, nice job!

Started going through testing out the actual preview before diving into the code... First couple things I'll just note:

  1. Keyboard navigation... this works pretty well, but spotting a couple things where a user could get stuck:
  • Unable to navigate within a filter dropdown menu:

Screen.Recording.2024-02-16.at.14.56.51.mov

  • Unable to open an accordion; only option is to visit website.

Screen.Recording.2024-02-16.at.14.58.27.mov ...Once the accordion is open, accessing the socials icons works perfect, but nice-to-have would be the ability to close the accordion as well from keyboard if desired.

  1. Wallet listings... I see updates in the Figma about items to be removed, and items that will be listed as "New to crypto", but I don't see these changes in the PR... assuming this is probably coming, but just wanted to note.
  2. I'm unable to get any of the "Feature filters" to toggle

Screen.Recording.2024-02-16.at.15.04.03.mov In the above recording I'm clicking all over there but nothing opens... oddly, after recording I was able to find a spot that did toggle one of them, but then I couldn't toggle it back or toggle any of the contained checkboxes:

Screen.Recording.2024-02-16.at.15.05.32.mov

Thanks @wackerow, 2 comments for clarification

  1. filter dropdowns will be removed if you check the new designs, so shouldnt be considered for the review (opposite case of filter toggles, which I'm fixing)
  2. wallet data updates won't be part of this PR. I've opened this PR to remove the suggested wallets (https://github.com/ethereum/ethereum-org-website/pull/12257).

nhsz avatar Feb 21 '24 15:02 nhsz