Rainbow - 🌈the Ethereum wallet that lives in your pocket

Fixes: RNBW-47 Designs: https://www.figma.com/file/ltTsiWrgEbHvuqeDucwSiM/Hide-NFTs?node-id=3%3A389

What changed (plus any additional context for devs)

Adds the ability to hide an NFT from the overflow menu on the single token expanded view. This PR contains code that's essentially a copy of our Showcase functionality.

TODO

• [x] if a token is hidden but was previously in the showcase, make sure it's removed from showcase too
• [x] analytics

PoW (screenshots / screen recordings)

Wallet owner interactions: https://user-images.githubusercontent.com/4732330/179275050-16e7015f-2605-459f-9d7d-a30404b33d1b.mp4

Read-only wallet interactions: https://user-images.githubusercontent.com/4732330/179275087-06d868e6-1744-439b-9916-01cb7df5b7da.mp4

Dev checklist for QA: what to test

• [x] make sure showcase still works as it has been
• [x] ensure showcased tokens are hidden as described above

How to test locally

API is live, so you can test this without running Firebase emulators locally.

Final checklist

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

Fixes TEAM2-247, TEAM2-78, TEAM2-77, TEAM2-79

Figma link (if any): https://www.figma.com/file/Xc4Pq3CLJNVG52z1K0URvP/notifications?node-id=647:4924

What changed (plus any additional context for devs)

• settings redesign on all settings pages
• typescript everything
• foundation for notification settings
• replaced all existing components with design system equivalents, including screens that weren't explicitly redesigned

Screen recordings / screenshots

https://www.loom.com/share/ec325c353a5743ce9f00ecc06d7b6879

What to test

• make sure all settings screens are still there
• make sure no functionality has changed
• make sure the implementation matches the figma designs (see above)
• go to src/components/settings-menu/SettingsSection.tsx and enable + test all the settings that may be hidden for various reasons. should be as easy as replacing something like {conditional + <Component />} with {true + <Component />}

Final checklist

• [ ] Assigned individual reviewers?
• [ ] Added labels? (team1/team2, critical path, release, dev QA)
• [ ] Did you test both iOS and Android?
• [ ] If your changes are visual, did you check both the light and dark themes?
• [ ] Added e2e tests? If not, please specify why
• [ ] If you added new critical path files, did you update the CODEOWNERS file?
• [ ] If no dev QA label, did you add the PR to the QA Queue?

Fixes RNBW-2832 Fixes RNBW-3140 Fixes RNBW-2840 Fixes RNBW-3203

What changed (plus any additional context for devs)

• Added conversion from floating point number that was a timestamp in seconds to a formatted date string for display_type: "date" attribute from OpenSea API.
• Added shortening and lower casing urls (strings starting with https://)
• Added support for Boost display type from OpenSea API (display_type: "boost_number" and display_type: "boost_percentage")
• Added additional sorting by display type precedence, similar to OpenSea display type grouping
• add filtering for traits without values or without trait_type

PoW (screenshots / screen recordings)

Before: https://streamable.com/fa6lby

After: https://streamable.com/0wy2fz

Dev checklist for QA: what to test

• Preferably check, Companion-in-a-box NFT attributes that return this attribute type (you can grab jkadamczyk.eth to watch)
• Check if date is properly formatted
• Check if the dates are last in the list
• Clicking shouldn't open a context menu for date, long-press should do nothing
• check links on a POAP for example (jkadamczyk.eth has POAP from dame.news)
• check boosts formatting on a wallet like 0x9bD086DadfCA695B59E7bf9F4626f58900400eBF for Best Creature NFT
• Boosts should have + at the beginning and if it's percent boost it should have % at the end
• check sorting, precedence is like follows undefined display_type | null display_type | number display_type -> boost_percentage | boost_number display_type -> date display_type
• Check link traits, these should have one or two context menu options and allow to open the URL in the web browser showing a confirmation modal before actually opening

Final checklist

• [x] Assigned individual reviewers?
• [x] Added labels?
• [x] Added e2e tests? if not please specify why – too small for e2e test it was a bug
• [x] If you added new files, did you update the CODEOWNERS file?

still a few issues:

• [x] modals are getting stuck and jumping around
• [x] need to disable swiping forward from ExchangeModal to CurrencySelectModal

https://www.dropbox.com/s/7ur70l9epmfw2ai/rpreplay_final1595018130.mp4?dl=0

Fixes RNBW-3390

What changed (plus any additional context for devs)

• Rewrote files I worked on to TypeScript + fixed some JS files to play better with typescript
• Rewrote class component to function component to be able to use Reanimated 2
• Rewrote Reanimated 1 animations to Reanimated 2

PoW (screenshots / screen recordings)

Before: https://streamable.com/6uzmyj After light: https://streamable.com/7mpc1x After dark: https://streamable.com/zhe4cp

Dev checklist for QA: what to test

• Try sending a transaction on iOS phone with face id
• Hold the button to authorise and watch the loading progress animation

Final checklist

• [x] Assigned individual reviewers?
• [x] Added labels?
• [x] Added e2e tests? if not please specify why – animations, and there wasn't any in the first place
• [x] If you added new files, did you update the CODEOWNERS file?

This branch adds the capability to view or listen to rich media stored inside NFTs.

3D

• The ability to detect whether an asset has a valid 3D .glb animation_url.
  • Unique assets which are detected in this format are represented alongside an additional icon in the <AssetRecylerList />.
  • The ability to render a 3D Model using <model-viewer/> using a <WebView />.
  • If the asset can be loaded successfully, it will be rendered.
  • If it possesses animation parameters, it will by default autoplay the animation.
  • Orbital controls are enabled to allow spherical rotation about the rendered scene.
  • Props are passed into the webpage using JSON.stringify to damage injection exploit vectors.

Testing

1. Watch address 0x3b24804587a841c11b4e5baac8a6211671672ce0
2. Navigate to SuperRare collectibles.
3. Tap on Bernie Sanders and watch him shiver. Zoom in closely to check out his comfy gloves.

Video

• If an asset possesses an .mp4 animation_url, we’ll render the video content using react-native-video.
  • Does not autoplay.
  • Currently depends on a hack to manually stop the video when unmounted (likely the current native lib is getting confused when presenting within a BottomSheet).

Testing

1. Watch address 0x188bd32f4c3b5ffaee22c2ec653f5d32ed27d844
2. Navigate to GeniusCorp collectibles.
3. Watch the Mighty33 video.

Audio

• If an asset possesses an .mp3 animation_url, it’ll be detected as part of the user’s Playlist.
• If the user has a non-empty Playlist, the <EphemeralAudioPlayerFab /> will be displayed on the WalletScreen alongside the other FABs.
  • When no sound is currently playing, pressing play will load a random sound.
  • When a sound is playing, it can be paused, or the next track in the queue can be played by pressing fast forward.
  • When tracks end, it is configured to autoplay the next track in the queue.
  • Clicking on the title of the song will reopen the content in the UniqueTokenExpandedView.
• Audio tokens also possess a Play/Pause button which is rendered within the UniqueTokenExpandedView. This can be used to configure runtime audio within the scope of the token itself.
  • Tokens are sensitive to their playback state; the Play/Pause button is expected to respond appropriately.
• You can also listen to playing songs whilst the app is backgrounded.

Testing

1. Watch address 0x188bd32f4c3b5ffaee22c2ec653f5d32ed27d844
2. Open up the sound FAB and hit play. Try cycling through tracks.
3. Click on a selected track's title.
4. Attempt to interact with the current playback.

Added libraries

• Added use-debounce to help streamline the state transition between different pieces of audio content and prevent the user from downloading excessive audio content when cycling through their playlist.
• Introduced react-native-sound to permit native level control of sound playback.
• Introduced react-native-video to enable performant video downloading/caching.

Fixes TEAM1-36

Based on Michał's PR #3367. Unfortunately due to conflicts and some differences in implementation between changes made by Terry and Michał roughly around the same time, I decided it's much easier to just manually pick relevant changes and start a new branch (I tried rebasing but I gave up after 30 mins of picking between sets of changes irrelevant to the PR).

What changed (plus any additional context for devs)

Uniswap pool row got a new implementation.

PoW (screenshots / screen recordings)

See comments for most up to date screenshots.

Dev checklist for QA: what to test

Check that uniswap pools work the same way as they did.

Final checklist

• [x] Assigned individual reviewers?
• [x] Added labels?
• [x] Added e2e tests? if not please specify why Reimplementation of existing functionality which is either covered by tests or out of scope of this PR
• [x] If you added new files, did you update the CODEOWNERS file?

Fixes RNBW-3460

What changed (plus any additional context for devs)

A lot of optimizations and TypeScript migrations for transaction and request row components.

PoW (screenshots / screen recordings)

||Light|Dark| |--|--|--| |iOS||| |Android|| |

Dev checklist for QA: what to test

Verify that profile screen works the same way, meaning:

• transactions look and feel the same in the list
• requests (the ones that appear over the transaction list) look and feel the same

Final checklist

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

Fixes RNBW-3350

What changed (plus any additional context for devs)

Refactored BalanceCoinRow into its own family of components - Fast components - FastBalanceCoinRow. Fast components are meant to be used in Lists, especially in Recyclable lists.

Also here I made some optimizations to hooks and selectors that build the wallet screen asset list. Now it's called only when it receives new data. But also it's created on the WalletScreen only and we pass data to the next screens so we don't call the same hook 3 times in different places.

Another change - I removed stagging for the assets list since we don't need it anymore. The render of the asset list items is fast enough.

What "FastComponent" means

The "Fast" part means that the component is as fast to render/update as it can be. We are trying to use as less of dynamic and heavy stuff as possible. Because of that, we don't use the Design System for layout except for Text.

So in order to make a Fast Component, you should make sure that:

• we don't use selectors inside of the component
• we receive data from the props
• we calculate data before the render
• we use as less views as possible to achieve the design
• we don't render things that are not visible and hiding them with opacity
• we use raw views and StyleSheet API
• we don't use useContext (useTheme. useNavigation etc) for these
• we pass props down
• the component is as flat as possible
• the component is as simple as possible
• the component is not "reusable" - if you need to reuse it in a different place - make a new one
• we don't waste any CPU time

Before doing any refactoring - measure the mount and update time with RenderProfiler. Also, I noticed that refactoring old stuff that is used in many places and "reusable" is not worth it and it's easier to just create a brand new component instead.

We're using RenderProfiler to measure mount and update time. Since it's RecyclerViewList the mount - is when we show a full list of assets, the update is when we scroll since it's passing new props instead of remounting the items.

All the tests were done on Samsung A12 2021 in Release but with the Profiling version of RN (a tiny bit slower).

Before results:

[10:40:56] I | ReactNativeJS ▶︎ mount: BalanceCoinRow (5) - 52.28ms (max: 67.51ms; min: 46.45ms)

[10:40:59] I | ReactNativeJS ▶︎ update: BalanceCoinRow (1) - 4.94ms (max: 4.94ms; min: 4.94ms)

[10:41:00] I | ReactNativeJS ▶︎ update: BalanceCoinRow (1) - 0.57ms (max: 0.57ms; min: 0.57ms)

[10:41:08] I | ReactNativeJS ▶︎ update: BalanceCoinRow (44) - 4.89ms (max: 40.48ms; min: 0.04ms)

[10:41:09] I | ReactNativeJS ▶︎ update: BalanceCoinRow (1) - 0.56ms (max: 0.56ms; min: 0.56ms)

[10:41:10] I | ReactNativeJS ▶︎ update: BalanceCoinRow (5) - 0.04ms (max: 0.05ms; min: 0.04ms)

[10:41:12] I | ReactNativeJS ▶︎ mount: BalanceCoinRow (11) - 45.42ms (max: 58.86ms; min: 40.19ms)

[10:41:14] I | ReactNativeJS ▶︎ mount: BalanceCoinRow (11) - 44.99ms (max: 59.23ms; min: 40.02ms)

[10:41:14] I | ReactNativeJS ▶︎ update: BalanceCoinRow (85) - 2.82ms (max: 30.92ms; min: 0.04ms)

[10:41:16] I | ReactNativeJS ▶︎ update: BalanceCoinRow (27) - 5.94ms (max: 18.02ms; min: 3.56ms)

[10:41:23] I | ReactNativeJS ▶︎ mount: BalanceCoinRow (11) - 61.14ms (max: 155.05ms; min: 48.26ms)

[10:41:30] I | ReactNativeJS ▶︎ update: BalanceCoinRow (197) - 21.88ms (max: 267.78ms; min: 0.60ms)

[10:41:30] I | ReactNativeJS ▶︎ update: BalanceCoinRow (1) - 3.47ms (max: 3.47ms; min: 3.47ms)

[10:41:36] I | ReactNativeJS ▶︎ update: BalanceCoinRow (64) - 24.34ms (max: 47.29ms; min: 3.83ms)

[10:41:41] I | ReactNativeJS ▶︎ update: BalanceCoinRow (106) - 25.81ms (max: 161.06ms; min: 0.58ms)

[10:41:44] I | ReactNativeJS ▶︎ update: BalanceCoinRow (90) - 24.23ms (max: 57.63ms; min: 5.63ms)

[10:42:01] I | ReactNativeJS ▶︎ update: BalanceCoinRow (76) - 0.12ms (max: 1.57ms; min: 0.04ms)

[10:42:51] I | ReactNativeJS ▶︎ update: BalanceCoinRow (6) - 1.49ms (max: 1.71ms; min: 1.12ms)

[10:42:54] I | ReactNativeJS ▶︎ update: BalanceCoinRow (83) - 21.03ms (max: 54.97ms; min: 0.61ms)

[10:42:55] I | ReactNativeJS ▶︎ update: BalanceCoinRow (1) - 6.29ms (max: 6.29ms; min: 6.29ms)

[10:42:59] I | ReactNativeJS ▶︎ update: BalanceCoinRow (79) - 24.52ms (max: 46.80ms; min: 5.60ms)

[10:43:01] I | ReactNativeJS ▶︎ update: BalanceCoinRow (38) - 0.47ms (max: 10.31ms; min: 0.04ms)

[17:59:48] I | ReactNativeJS ▶︎ mount: CoinIcon (5) - 14.55ms (max: 24.36ms; min: 10.97ms)

[17:59:51] I | ReactNativeJS ▶︎ mount: CoinIcon (4) - 13.82ms (max: 21.50ms; min: 10.52ms)

[17:59:51] I | ReactNativeJS ▶︎ mount: CoinIcon (11) - 11.30ms (max: 13.12ms; min: 9.77ms)

[17:59:59] I | ReactNativeJS ▶︎ mount: CoinIcon (17) - 10.64ms (max: 12.88ms; min: 9.19ms)

[18:00:00] I | ReactNativeJS ▶︎ update: CoinIcon (62) - 1.34ms (max: 6.08ms; min: 0.04ms)

After results:

[10:29:52] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (5) - 20.35ms (max: 21.94ms; min: 18.41ms)

[10:29:55] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (3) - 1.71ms (max: 1.78ms; min: 1.63ms)

[10:30:02] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (17) - 2.80ms (max: 7.70ms; min: 0.23ms)

[10:30:07] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (15) - 1.81ms (max: 6.59ms; min: 0.03ms)

[10:30:07] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (11) - 15.98ms (max: 18.47ms; min: 12.98ms)

[10:30:07] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (10) - 1.87ms (max: 2.47ms; min: 0.83ms)

[10:30:08] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (16) - 0.04ms (max: 0.05ms; min: 0.03ms)

[10:30:08] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (17) - 17.18ms (max: 34.08ms; min: 14.58ms)

[10:30:09] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (17) - 1.70ms (max: 1.83ms; min: 0.68ms)

[10:30:12] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (7) - 20.42ms (max: 22.80ms; min: 17.99ms)

[10:30:12] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (1) - 18.73ms (max: 18.73ms; min: 18.73ms)

[10:30:13] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (8) - 1.87ms (max: 2.28ms; min: 0.89ms)

[10:30:13] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (6) - 21.32ms (max: 22.47ms; min: 19.77ms)

[10:30:14] I | ReactNativeJS ▶︎ mount: FastBalanceCoinRow (1) - 19.15ms (max: 19.15ms; min: 19.15ms)

[10:30:15] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (81) - 5.83ms (max: 14.57ms; min: 0.63ms)

[10:30:17] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (68) - 6.99ms (max: 28.48ms; min: 1.68ms)

[10:30:20] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (137) - 6.64ms (max: 32.52ms; min: 1.59ms)

[10:30:23] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (125) - 6.65ms (max: 26.71ms; min: 1.66ms)

[10:30:25] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (57) - 7.17ms (max: 23.26ms; min: 1.60ms)

[10:30:28] I | ReactNativeJS ▶︎ update: FastBalanceCoinRow (68) - 6.07ms (max: 12.95ms; min: 1.51ms)

[18:08:16] I | ReactNativeJS ▶︎ mount: FastCoinIcon (5) - 6.01ms (max: 7.19ms; min: 4.98ms)

[18:08:18] I | ReactNativeJS ▶︎ update: FastCoinIcon (3) - 1.43ms (max: 1.44ms; min: 1.43ms)

[18:08:26] I | ReactNativeJS ▶︎ update: FastCoinIcon (8) - 0.05ms (max: 0.06ms; min: 0.05ms)

[18:08:29] I | ReactNativeJS ▶︎ update: FastCoinIcon (4) - 0.04ms (max: 0.04ms; min: 0.04ms)

[18:08:35] I | ReactNativeJS ▶︎ mount: FastCoinIcon (11) - 5.29ms (max: 6.39ms; min: 4.78ms)

[18:08:35] I | ReactNativeJS ▶︎ update: FastCoinIcon (1) - 1.72ms (max: 1.72ms; min: 1.72ms)

[18:08:36] I | ReactNativeJS ▶︎ update: FastCoinIcon (4) - 1.37ms (max: 1.78ms; min: 0.43ms)

[18:08:36] I | ReactNativeJS ▶︎ mount: FastCoinIcon (17) - 5.25ms (max: 8.48ms; min: 4.37ms)

[18:08:36] I | ReactNativeJS ▶︎ update: FastCoinIcon (6) - 1.51ms (max: 1.59ms; min: 1.44ms)

[18:08:36] I | ReactNativeJS ▶︎ update: FastCoinIcon (2) - 1.96ms (max: 2.16ms; min: 1.77ms)

[18:08:36] I | ReactNativeJS ▶︎ update: FastCoinIcon (4) - 2.22ms (max: 2.65ms; min: 1.70ms)

[18:08:37] I | ReactNativeJS ▶︎ update: FastCoinIcon (1) - 2.50ms (max: 2.50ms; min: 2.50ms)

[18:08:37] I | ReactNativeJS ▶︎ update: FastCoinIcon (9) - 1.88ms (max: 3.19ms; min: 0.52ms)

PoW (screenshots / screen recordings)

Before:

https://user-images.githubusercontent.com/7809008/169124744-78cb7637-6bc9-4a08-a7f1-1f59ab3d34d8.mp4

After:

https://user-images.githubusercontent.com/7809008/169125479-bc58f8e8-10e2-4ba8-b84d-7a186cfdb3ae.mp4

Dev checklist for QA: what to test

Final checklist

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

Fixes RNBW-####

What changed (plus any additional context for devs)

Created a new (default) branch on the assets repo where all the addresses are lowercased so we don't have to call the expensive function toChecksumAddress

PoW (screenshots / screen recordings)

Before (checksummed): https://raw.githubusercontent.com/rainbow-me/assets/master/blockchains/ethereum/assets/0x6B175474E89094C44Da98b954EedeAC495271d0F/logo.png

After (lowercase): https://raw.githubusercontent.com/rainbow-me/assets/lowercase/blockchains/ethereum/assets/0x6b175474e89094c44da98b954eedeac495271d0f/logo.png

Dev checklist for QA: what to test

Final checklist

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

Fixes RNBW-2646 Fixes RNBW-1255 Fixes RNBW-3778

What changed (plus any additional context for devs)

In addition to the bug described on linear,

• When creating new accounts, we are not sending an accountSymbol param to the backend, this case is not handled correctly by backend so the profile is not created, then every time the emoji or color is being updated in the app, we try to update it on the backend as well but is rejected from since there was nothing to update in the first place. I was able to repro this in the testflight app
• when creating or watching new addresses we aren't looking to the backend for symbol and colors, making the original linear ticket to happen, now we check for backend first

Additionally I changed the default avatar color to gray, which is going to appear while waiting for the web profile, if any. Let me know what you think about it

PoW (screenshots / screen recordings)

https://www.loom.com/share/f4fd793eca4d41dd85967e15897718a9

Dev checklist for QA: what to test

Final checklist

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

Fixes APP-####

What changed (plus any additional context for devs)

This is to remove outdated or unused code related to charts as I was doing the last chart price overrides work.

Screen recordings / screenshots

What to test

• Charts across all timelines should still behave as expected

I disabled the fingerprint security on my phone (Android 10) for a few hours and then enabled it again. The problem is that now my Rainbow wallet (version 1.0.155) prompts me for a fingerprint but then complains that I need to turn on biometrics. It doesn't let me sign transactions or see my backup key.

I also tried to enter the wallet diagnostics by tapping on the version number on the settings page. It prompts me for my fingerprint and when I provide it just shows a blank page. No prompts or messages.

The weird thing about this is that if I provide a wrong fingerprint I get a "Not recognized" message (as I'm supposed to). So it knows my correct fingerprint. But the app just believes that biometrics are not turned on in the system, even though they are.

This problem also happened with other apps, but I simply reinstalled them and they are now working.

I don't want to reinstall my Rainbow wallet because then I'll lose access to it, and I don't have the backup key.

Fixes APP-####

What changed (plus any additional context for devs)

The main purpose of this PR is to unify every flow involving adding a new wallet under AddWalletNavigator. This includes:

• renaming ImportSeedPhraseSheet to ImportOrWatchWalletSheet
• getting rid of AddFirstWalletStep and instead encompassing that logic in AddWalletSheet, thereby removing that logic/UI from RestoreSheet (why was it there in the first place???)

Screen recordings / screenshots

What to test

• add/restore wallet flows

Fixes APP-30

What changed (plus any additional context for devs)

• Implemented sheet headers
• Backport speed up and cancel pending transaction options menu
• Add Context menu to from/to rows
• Code Cleanup
• Various fixes I found along the way that were small enough to include in this PR