Visually show progress for deep link interactions forwarded to my phone.

[jacobc-eth]

As a player, I would like to see feedback or visual acknowledgement of transactions sent to my mobile device, so that I know I need to approve a transaction on my mobile device.

description

In addition to the overlay view for the browser extension wallet, we also need to implement an overlay solution for when people are using an external signer (mobile wallet). This view is used to notify the user they have a pending transaction on the external signer, and should be triggered automatically upon transaction/signature request. The mobile itself doesn't need to have the details of the transaction, it just needs to tell the user that a confirmation is pending on their mobile device.

Sample text:

(Title of the confirmation type, see below for titles)

(Logo of connect method user chose)

"A wallet confirmation is pending on your mobile wallet."(This generic copy can be used on all confirmation pending screens, but hide it once the user has submitted)

(loading spinner)

Acceptance criteria

• Trigger on any type of wallet confirmation (transaction, signature, custom network approval, custom token approval, etc).

Connection requestion titles (we can reuse this for reconnection requests too):
"Wallet connection requested"
"Wallet connection approved"

Transaction request titles:

"Transaction request pending"
"Transaction submitted"
"Transaction confirmed"

Signature request:

"Signature request pending"
"Signature submitted"
"Signature confirmed"

Add custom network request:

"Add custom network request pending"
"Add custom network confirmed

Add custom token:

"Add custom token request pending"
"Add custom token confirmed"

[biliesilva]

Here the modals for the mobile transactions feedback:
We need to have some animations in the icons to show feedback that something is loading (using the loading spinner and the gradient color). On Figma you can see the other screens with different titles:

you can find the other modal requests here:
https://www.figma.com/file/GKPELZxk551oVC3EDLgEDA/HyperPlay-Game-Launcher?node-id=614%3A4187&t=cgNp71SbX7YfoUbr-1