Utilize Rainbow web profiles everywhere

[benisgold]

Fixes RNBW-3791

What changed (plus any additional context for devs)

The problem:

Users w/o ENS profiles can change the emoji/color of their avatar, but these changes are only stored locally and will not appear to anyone else.

The solution:

Avatar emoji/color data is now stored in rainbow's web profiles (see useRainbowProfile.ts). If a user changes their avatar, that change will be seen by all other rainbow users (if privacy mode is turned off).

Other changes:

Added a new migration (v18) that:

• strips the emoji from all wallet labels and stores it in a new property, emoji
• strips the emoji from all contact nicknames and removes the color property
• updates the wallet color property to be a hex string instead of an index of colors.avatarBackgrounds

Future work:

• need to coordinate with backend team to include non-ens image avatars in rainbow web profiles

PoW (screenshots / screen recordings)

• not really anything new to show here, these changes shouldn't be evident to our users aside from more consistent usage of non-ens avatars

Dev checklist for QA: what to test

• no crashes when importing/watching wallets
• no crashes when updating avatar emoji/color
• no crashes when viewing any representation of an wallet's avatar
• when you update the emoji/color of a wallet you own, this change should be reflected in every representation of that wallet's avatar (including rainbow web profile) unless an ens avatar is available
• if the user does not have web data enabled (has privacy setting toggled off), when they update their avatar it should only be changed locally. these changes should not appear to anyone else.

Final checklist

• [x] Assigned individual reviewers?
• [x] Added labels?
• [ ] Added e2e tests? if not please specify why
• [ ] If you added new files, did you update the CODEOWNERS file?

[linear[bot]]

RNBW-3791 Import Wallet issues

fun stuff happening when importing a wallet that does not have an ens avatar. for the import modal, it adopts the background color of the current wallet. as it is importing, theres a weird animation glitch with two modals. when it’s imported, it picks a different bg color from the import modal (this one is the correct one associated with the address hash)

729049e5-2217-45f3-9d59-20440efe3788

[estebanmino]

not sure what happened but i built the app and got into thi

https://user-images.githubusercontent.com/12115171/174855822-b01b2dd3-173c-45f5-9809-089e86949f94.mp4

s

[estebanmino]

dev QA list

Importing / watching wallets / profiles

• import wallet from seed phrase ✅

• create new wallet ✅

• shuffle / pick emoji updating web ✅

• importing wallet from public address ❌ in the picture i'm watching the wallet address that i just changed the emoji and color, as you can see is not respecting the updated rainbow profile info even tho is update on web

• importing wallet from "Add existing ... " seed phrase, is taking the current app wallet account emoji and color instead of the imported wallet information ❌

• i saw changes to the suggested ENS names to fetch the emoji and color from rainbow profile but seems to not be working ❌

pressing the profile works as expected tho

Contacts

• i'm seeing some strange behavior https://www.loom.com/share/917ca3365533448f9a8876aaf08e7768 (video has audio)

Profiles

• seems to be ok watching wallets but seeing some related issues from the contacts video https://www.loom.com/share/df2a6ef8b3424ae49099b2ab8fc2a080

[ibrahimtaveras00]

note to QA to check this flow: https://github.com/rainbow-me/rainbow/pull/4227#pullrequestreview-1128827085

[benisgold]

closing this for now, it's too much effort for the upside given our doubled down priorities in q4