Clear deprecated WAGMI storage via localStorageRecycler to improve extension boot performance

[BrodyHughes]

Problem / Background

During performance investigations, we discovered that old installations of the browser extension are carrying unnecessary storage weight from deprecated WAGMI data (8-11MB) that was left behind after our migration to Wagmi v2 in May. This legacy data primarily consists of RPC logs and token metadata that is no longer accessed or needed.

While recent installations don't have this overhead, older installations are experiencing slower boot times, potentially exacerbated by Chrome 131's handling of chrome.storage.local bootstrapping. The combination of:

• Deprecated rainbow.wagmi storage (8-11MB)
• Active rainbow.react-query storage (2-4MB)

Is likely contributing to startup performance issues.

Solution

I've implemented a localStorageRecycler utility that:

• Runs during extension initialization to clean up obsolete storage keys
• Currently targets the deprecated rainbow.wagmi key
• Includes proper error handling and logging via our existing logger/Sentry setup
• Is extensible for future storage cleanup needs

Screen recordings / screenshots

To test I just changed the sentry logs to console.log statements and tested that way. Prod logs will ingest to Sentry. I did not have rainbow.wagmi storage on my bx at the time of recording so i pushed some dummy data. In the video below you can see me:

1. Check for the data on the current bx
2. Refresh the bx so it wipes the data
3. Refresh the bx so it shows no data is found

Screen.Recording.2025-01-07.at.12.51.13.PM.mov

What to test

This runs on install / startup and can be seen in the service worker logs. To test this whole flow:

• replace the logger.x statements in src/core/storage/localStorageRecycler.ts with console.log statements
• run await chrome.storage.local.get('rainbow.wagmi') in your rainbow console to see if you have wagmi storage
• if not, push some dummy data via await chrome.storage.local.set({ 'rainbow.wagmi': { someTestData: 'test', moreData: { foo: 'bar' } } });
• visit href="chrome://extensions/
• go to the rainbow bx details
• click on "Inspect views: service worker" and go to console
• refresh the bx and watch the logs flow in!!!

WIP

[brunobar79]

Can you fill out the PR description, explaining the rationale and adding a screenshot / video of the logs that you have added showing it's working correctly?

[BrodyHughes]

Can you fill out the PR description, explaining the rationale and adding a screenshot / video of the logs that you have added showing it's working correctly?

done!

[brunobar79]

Nice!