Create an Address Book for Contacts

[smaroudasunicorn]

Address Book to be stored locally on Device. Import/Export functionality shall also be present.

[onvisions]

Address Book @smaroudasunicorn

1. Address book main screen (addresses list) mockups:

2. Address book single address record mockups:

3. Address book Add address screen mockups: I was thinking if we can make the top part (with the QR code and account info) updated dynamically according to what's entered in the inputs below.

4. Select from Address book modal (Send funds flow): work in progress...

5. Prototype recording: work in progress...

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

[smaroudasunicorn]

We want to be able to share my address to another address book

[smaroudasunicorn]

You need to be able to filter by name too

[smaroudasunicorn]

Add bookmark star next to all and have blockchains a bit separated in order to support more in the future.

[onvisions]

Address Book Design (updated after feedback 31.05) @smaroudasunicorn @martinkaintas

1. Address book main screen (addresses list) mockups:

Access Address book from the More screen. The "Address book" tab shows the number of address records:

Addresses list, filters, show all, show bookmarked (favourites), filter by blockchain:

No records messages:

Scrolled Address records list (Search by name or address is shown); Multiple filters future proof support (with horizontal scroll of the blockchain filters):

2 Address book - single address record (Edit):

3. Address book - Add address record screen:

Errors:

4. Select address from Address Book modal (Send funds flow):

Select account address from address book modal:

6. Send funds using Address book prototype recording:

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

7. Manage Address book prototype (filter records, add and remove record, add to "bookmarked"):

https://github.com/superhero-com/superhero-wallet/assets/12225410/8397bbc0-bffb-4812-8b3f-1a80c279ddfc

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

[onvisions]

@martinkaintas @smaroudasunicorn Address book default ordering within the address records list.

Alphabetical, with numbers first:

1 Trading Uniswap 2John Doe Alf salary account .....................

Thus the user will have some control over the ordering of address book records in the list through custom naming.

Beyound the MVP we can think of functionality to reorder addresses/accounts in the list by dragging the list items up and down. This will be useful not only for address book but also for the account management as it may change the default order of the account cards in the switcher. IMO we should include it in some user stories for extended "Account management" and "Address book records management". These may also include batch actions such as remove/delete multiple accounts/address records.

[smaroudasunicorn]

a minor comment. Change add address button to add....

[onvisions]

a minor comment. Change add address button to add....

[martinkaintas]

Created a separate task for Address Book: Send to address book record #3104

[Liubov-crypto]

Found minor design discrepancies on this screen, please check it:

• link to the address
• name symbols counter
• additional word "blockchain' in Address field

the rest is LGTM

[martinkaintas]

• additional word "blockchain' in Address field

This is according to the design in Figma, @onvisions please lmk which one should be used

[onvisions]

• In the context of an Address book and adding an address "Enter public blockchain address" bring more clarity to the user than just "Enter public address".

• Character counter is part of the design and should be implemented. 50 characters are too many for name of an Address book record. According to design it's 33 but now I'm thinking if we even need more than 20. @martinkaintas we need to implement some shortening for the names to fit different UI spots so I suggest to use the component with the horizontal animation that we use for .chain names. @Liubov-crypto Can we test with a longer name to see how it's displayed at the moment with the current implementation?

• The Bookmark button is not implemented as designed. Visual discrepancies and button has a fixed width. Only label changes so that it doesn't "jump" when its state is updated.

• The external link icon should be present only with real address not with the dummy example as it should be clickable and lead the user to blockchain explorer.

[Liubov-crypto]

Now it looks better:

https://github.com/superhero-com/superhero-wallet/assets/69896204/509b6a9f-d85c-4a89-b5d4-64184f1fd89c

@onvisions what do you think about Bookmark?

[onvisions]

1. @Liubov-crypto we have synced with Martin the new look of this button. Design reference is in Figma.

2. For the character counter we have design reference:

However I noticed it has not been implemented in this way across the UI so if this is the case (@martinkaintas please confirm) I suggest to create a separate sotry for UX/UI improvement of the feature.

[Liubov-crypto]

LGTM