Add links/buttons so users can add tokens to MetaMask

[helpfulBro]

• [X ] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Now that we have multiple versions of tokens on the same chain, e.g. USDC.e and USDC on Avalanche. Make it easier for users to identify which tokens they have by providing a method to add the token to MetaMask.

Examples 🌈

Perhaps on the asset overview page include a link/links/buttons next to the asset icon, and perhaps also one for the aToken or vToken.

Motivation 🔦

The use cases would be,

1. User visits the token page and wants to add the token to metamask to confirm they have the correct one (many users like to see the token listed in MetaMask as they believe this is where their tokens live).
2. User borrows and wants to add the borrowed token to show in metamask (apply the above modal to the borrow flow)?

[helpfulBro]

Clone of https://github.com/aave/aave-ui/issues/454

[sakulstra]

We have a token add button on all success screens i think. Would be nice though to have it also on the overview page i agree.

[iamanastasia]

Here is design to solve part of the problem described.

Part I — Add token to Metamask to identify token.

Issues:

1. Does it apply only to Metamask? Can we support other wallets? Can we change wallet icon?

Part II — Got feedback that 'Add aToken' button is not clear. Not new user friendly. So probably we can explain it more in the UI.

Issues:

1. If user skipped Success screen he is not able to add aToken to the wallet.

@helpfulBro what do you think of designs?

Meanwhile I'll continue working on next steps:

1. Add ability to add aTokens via dashboard/reserve page.
2. Find a way to really highlight differences for USDC.e and USDC

[helpfulBro]

@iamanastasia this looks good,

1. I believe the feature is only available on Metamask perhaps @defispartan can confirm, if only Metamask then the icon is perfect.

2. This is expected if the user skips this screen, unless the button is added to another area of the UI?

[defispartan]

@iamanastasia this looks good,

1. I believe the feature is only available on Metamask perhaps @defispartan can confirm, if only Metamask then the icon is perfect.

2. This is expected if the user skips this screen, unless the button is added to another area of the UI?

1.) This will work with any injected wallet (0xFrame, xDefi, Tally, etc.), so maybe it would make sense to switch the MetaMask icon with a generic wallet icon.

2.) It's not shown in these screenshots but in the finished design there's a dropdown on the reserve page when you click the add to wallet button which lets you select to add the base token or aToken, so even if you skip this screen you can still add it.

[iamanastasia]

1. That is great. Few issues:

   • Do we know what exact wallet user is connected to? I think it would the best if we can switch wallet icons in the button.
   • If there is a case that this feature is not supported by some wallet we need to hide the button.
   • Need to think of 'failed to connect' message (tooltip?)

2. Yeah, here is how it might look like: