superhero-com / superhero-wallet

Superhero Wallet – More than just a way to receive, store & send tokens on the æternity blockchain
https://wallet.superhero.com
ISC License
39 stars 42 forks source link

Address Book: Send to address book record #3104

Open martinkaintas opened 2 weeks ago

martinkaintas commented 2 weeks ago

Address Book Design (updated after feedback 31.05) @smaroudasunicorn @martinkaintas 4. Select address from Address Book modal (Send funds flow):

Image

Image

Select account address from address book modal:

Image

Image

Image

Image

Image

  1. Send funds using Address book prototype recording:

https://github.com/superhero-com/superhero-wallet/assets/12225410/a2b96955-fe12-4e49-9bbf-b78d5fcbdd0e

Figma reference: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=31935-180432&t=gZlJbeKQFrjFsfqj-0

Originally posted by @onvisions in #3036

onvisions commented 4 days ago

@smaroudasunicorn After discussion with @martinkaintas we agreed that the design of Select recipient address from Address Book modal can be improved. The thing is we don't need any blockchain filters and we should display only the addresses for the blockchain of the current active account. It totally makes sense as the Send flow is initiated from a specific active account and therefore we already have the given blockchain preselected.

ACCEPTANCE CRITERIA:

  1. Within the Select recipient's address modal remove blockchain filters and leave only All and Bookmarked;
  2. The initially preselected filter is "Bookmarked" (star icon tab) if the user has added addresses to bookmarks list. If there are no bookmarked addresses there is not need for tabs and both "All" and "Bookmarked" (star icon) tabs are not displayed. See design below.
  3. The Search is displayed on both "All" and "Bookmarked" tabs if the address records in All addresses list are more than 9;
  4. If the user is on "Bookmarked" (star icon tab) and the address being typed is not bookmarked the active tab is auto-changed to "All". See design below.

Updated DESIGN:

Image

Image

Image

Image

No Bookmarks:

Without Search feature (short list of records) Image

With Search feature (long list of records)

Image

PROTOTYPE REC:

https://github.com/superhero-com/superhero-wallet/assets/12225410/5a827eba-9486-4243-b1bb-ca430ee6f284

FIGMA REFERENCE: https://www.figma.com/design/3oGLWzSH0oJljo4RETZtur/Superhero-Wallet-UI-(%E2%9C%94%EF%B8%8FUpdated)?node-id=32288-195942&t=cEkFCe9a6iZD1QmJ-0