Share my address as a QR Code to another wallet

[onvisions]

Add "Share your public address" feature to Account Details to easily share user's currently active account address. Thus another user can scan it in order to add address to the Address Book.

The focus is only on sharing the QR code VS existing feature of Receive modal.

Design:

"Share your public address" prototype:

https://github.com/superhero-com/superhero-wallet/assets/12225410/7a993f23-9cf5-4a3a-88a4-fec254023103

"Single Address book record public address" (may not be of the wallet owner but any supported public blockchain address that has been added to the Address book) prototype:

It shows the difference between modals:

1. Address book record public address display VS
2. "Share your public address" modal displaying the address of one of the wallet accounts.

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

[smaroudasunicorn]

In receive/send area add a button share and then make the modal.

[onvisions]

@smaroudasunicorn @martinkaintas Latest design update of the feature:

DESIGN:

Other UI spots where the "Share" (public address) button should be/should not be displayed:

Multisig vault (button is displayed):

Coin/Token Details screen(button is not displayed):

Not connected status (some buttons are disabled, this one remains among the active buttons):

Testnet (button is displayed):

PROTOTYPE RECORDING:

https://github.com/superhero-com/superhero-wallet/assets/12225410/ae474032-46f5-498d-906c-eed72e5141b8

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

[smaroudasunicorn]

there are cases we might have 5 buttons as we are now?

[onvisions]

@smaroudasunicorn Latest design update (14.06.24)

PROTOTYPE:

https://github.com/superhero-com/superhero-wallet/assets/12225410/f72f49b3-9f4f-42aa-b93d-e37e0d5b85bd

DESIGN:

Share public address modal:

Mainnet - Account Details - 3 buttons:

Mainnet - Account Details - 4 buttons:

Testnet - Account Details - 5 buttons:

Mainnet - Single Asset - 3 buttons:

Testnet - Single Asset - 4 buttons:

Multisig vault - 3 buttons:

Mainnet - not connected - 3 buttons:

Mainnet - not connected - 4 buttons:

Testnet - not connected - 5 buttons:

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

[onvisions]

@smaroudasunicorn

Suggestions:

1. Alternative design version without horizontal scroll for the case of 5 buttons:

2. Horizontal scroll V1

3. Horizontal scroll V2

[smaroudasunicorn]

I believe 2 option seems to be the best fit. option 1 would be great but I think the buttons would be very small in small devices. What do you think @martinkaintas ? @onvisions

[onvisions]

I believe 2 option seems to be the best fit. option 1 would be great but I think the buttons would be very small in small devices. What do you think @martinkaintas ? @onvisions

We can use V1 (with 5 visible buttons) for viewport width down to 360px and make it scrollable horizontally for smaller device screens. However I think most neat solution is

[Liubov-crypto]

I have a question @onvisions @martinkaintas , is here supposed to be 3 buttons on Coin details page? according to the design it should be 4 buttons:

the rest LGTM (haven't tested ios app) tested on android

[martinkaintas]

The Swap button was removed from the AE asset page some time ago in https://github.com/superhero-com/superhero-wallet/commit/a0405e2b6ef9d841502d5fe475ec4b854d3bc9a0