Improve Connect dialog for onboarding flow

[landitus]

Based on the work to be done for https://github.com/hirosystems/stacks-wallet-web/issues/2251. As we tested the onboarding flows, we found some participants (specially the least experienced ones) to be confused around the connect dialog. Most questions came around why is this step necesary as it didn't seem obvious at all. So we re-tested the flow with some modifications:

1. Revisited the copy
2. Added a new option to pass a string that to personalize the main heading
3. Redesigned the post-install state with clearer instructions

Figma

Default connect dialog

• Changed main heading copy: Add Hiro Wallet to {Browser} to continue. The {Browser} variable should be replaced with the name of the browser: Ex. Chrome, Firefox, Brave.
• Changed description copy. [App-name] should be replaced with the actual application name to provide context.
• Changed main button copy
• Changed footer link color and added external link icon

With custom variables

This variant enables developers to customize the header to copy to better communicate what the wallet would be used for. In this example, “to buy NFTs” is the variable portion of the header.

We could provide the following instructions. The action can be customized by passing a string.

Add Hiro Wallet to {Browser} [action]

If the developer doesn’t pass any customization, the copy would default to the Default connect dialog.

Post-installation

This variant is displayed after the user clicks on the main CTA button to dowload the extension.

• Changed the Heading copy
• Changed the description copy. [App-name] should be replaced with the actual application name to provide context.
• Changed footer link to re-launch the extension store in a new tab once again.