Reduce battery usage

[nop33]

Resources:

• https://reactnative.dev/docs/performance
• https://medium.com/@anisurrahmanbup/react-native-ultimate-guide-on-debugging-profiling-performance-optimization-ios-android-7e44b8690cbe
• https://medium.com/@anisurrahmanbup/react-native-app-performance-optimization-ios-android-be-a-sr-react-native-engineer-today-767cfcb0ed70
• https://docs.expo.dev/debugging/tools/
• https://github.com/anisurrahman072/React-Native-Advanced-Guide

Related issues:

• Do some proper profiling in mobile wallet and identify performance issues #522
• Upgrade to Expo 52 | Use React Native New Architecture #743

[nop33]

After some investigation data shows that our app has very high energy impact.

The culprits for these are the following:

1. The display consumes a lot of energy when the light theme is on. It drastically improves when the dark theme is on.
2. The animated backgrounds bring the GPU usage and Overhead usage (device hardware) very high
3. The data polling increases the use of Network

💡 Ideas for optimizations

1. Display

1. Make the dark theme the default one.
2. Auto-switch to dark theme when battery level is low and when battery saving mode is on
3. Update light theme colors to a darker shade
4. Create new unified "gray" theme that does not consume a lot of energy (basically no dark/light anymore. Examples: Revolut, Phantom, Metamask)

2. GPU

1. Investigate how to "freeze" background animations when the focus is not on the screen with the animations
2. Remove animations (👎 not preferred)
3. Freeze animations when battery level low and when battery saving mode is on

3. Network

1. Reduce data polling from 10s to 60s
2. Use Tanstack & caching to reduce number of request and reduce transferred data
3. Do not keep app active when in bg to keep WC session active now that ecosystem screen is integrated
4. dApps should not use the wallet's node & explorer providers through WC to request data and should rely on web3 providers

General

1. Create "Battery saving" mode setting that is "off" by default. Enabling it could apply several of the optimizations above.

Recommendations by Apple (through XCode)

[mvaivre]

Thanks for the report! Main things I have in mind:

• This should come after DW 3.0
• Many of the suggestions I shared aren't here, but I think they are worth trying, so let me take each point one by one quickly!

Display

1. Make the dark theme the default one.

We should make the system theme the default one. Users should be able to choose between readability in all lighting condition vs. battery life (as with all other apps). Changing the system theme on the fly could change the app theme, like we do in DW, and like most of the apps / wallets are doing.

2. Auto-switch to dark theme when battery level is low and when battery saving mode is on

I forsee situations where this could be a huge annoyance. Being forced to use a dark theme (or being forced to do anything btw) can be frustrating in some (sunny) situations. Again, users should be free to choose depending on their needs IMO.

3. Update light theme colors to a darker shade

This is about the design work + contrast constraints + branding, won't get into details, but tldr: I'm sure we shouldn't go that way.

4. Create new unified "gray" theme that does not consume a lot of energy (basically no dark/light anymore. Examples: Revolut, Phantom, Metamask)

This would be a step backward. In the list you shared, Revolut and Phantom offer a light and dark theme. Revolut even adds plenty of style customization on top. Only Phantom offers 1 theme, and tbh I don't think it's cool. Funny enough: I was showing Phantom to a friend 2 weeks ago, we were hiking, we couldn't see a thing. I couldn't change to a light theme, so I ended up quitting!

Conclusion: I would default to the system theme, and continue giving our users the choice between light and dark mode.

GPU

I mentionned that we should reduce the framerate. Capping it & the gyroscope readings to 30fps would drastically reduce the GPU load (some devices runs at 120fps+!)

1. Investigate how to "freeze" background animations when the focus is not on the screen with the animations

Yes!

2. Remove animations (👎 not preferred)

No.

3. Freeze animations when battery level low and when battery saving mode is on

Yes, good idea if easily implementable.

Conclusion: I start with capping to 30fps and freeze when not in view. If easily done, I'd then freeze when battery is low or battery saving mode is on.

Network

1. Reduce data polling from 10s to 60s

Let's try Tanstack first. Ideally we don't want to slow down the perceived experience (for many reasons, including communication / marketing) which would in part cancel the work done on block time reduction etc. We want to showcase our speed.

2. Use Tanstack & caching to reduce number of request and reduce transferred data

Yes!

3. Do not keep app active when in bg to keep WC session active now that ecosystem screen is integrated

Yes!

4. dApps should not use the wallet's node & explorer providers through WC to request data and should rely on web3 providers

Yes.

Conclusion: let's start with not keeping the app active when in bg. This should make a big difference. Then follow up with Tanstack, then revaluate before considering reducing the polling rate.

General

Create "Battery saving" mode setting that is "off" by default. Enabling it could apply several of the optimizations above.

Let's keep our settings simple. I don't think this will be needed if we apply the strategies discussed above.

Overall conclusion

• Let's start optimizing before compromising on UX.
• Let's keep things simple & let our users decide what is important for them.
• Let's keep in mind our high level priorities before getting into rabbit holes. Let's not forget to take into account our need to grow our market share by differentiating from others, and offering accessible, beatiful, easy to use and flexbile apps.

[polarker]

Hey guys, just a quick input—let’s not over-optimize this at the cost of UX or engineering complexity.

For example, if a user only uses our app for a short time each day (e.g. 1% battery use among all apps), battery optimization won’t make a decent difference for them. If they prefer a light theme, forcing a dark theme purely for efficiency wouldn’t be worth it.

Not sure if this is the best example, but it should convey the point I’m making.

[polarker]

Also, I agree that this shouldn't be a priority unless there are parts of the code consuming significantly more battery than expected.

[nop33]

I think we all agree. What sparked the investigation was a message from Reed that 1 minute of using the app consumes more battery than 2h of Netflix, 6 minutes consumed 10% of his battery, and 30min consumed 25%.