[Affiliate] Update banner closed state across tabs

[ramirotw]

Summary

Closes #1818 #1812

This PR handles the case where the user has multiple tabs of the app and the Affiliate banner is closed in one tab. The state now is reflected across all the tabs.

There was a race condition happening as seen in Elena's recording due to how the redux state is updated and also because of the redux-localstorage-simple middleware. Background: the global state in memory is persisted in local storage within each second when there's an action dispatched, if the user has multiple tabs opened, it can happen than one tab updates its global state and hence local storage after 1 second, then the user switch tabs and the other app instance had an old state in memory, which after another second updates local storage overriding the previous (and newer) state.

To Test

1. Paste an affiliate link into the url
2. Wait for the Affiliate banner to appear and duplicate the tab
3. Close the banner in one tab, the banner state should be reflected in the other tab

[github-actions]

• 🔭 GP Swap: Gnosis Protocol v2 Swap UI

[alfetopito]

Working like a charm.
Only 1 minor comment

[elena-zh]

Hey @ramirotw , great job!
I have not encountered any issues except this one: Banners do not appear when 2 app tabs are already opened. See the video: https://watch.screencastify.com/v/cQIXwF7ixs8AGdGvmyOy

1. I have 2 opened tabs with the app
2. in one of these tabs I share a referral link and see the banner (and affiliate core id displayed in the local storage)
3. when I open the 2nd tab, banner is not displayed, referral data disappears from the local storage.

Could you please take a look into this issue?
Btw, if it needed, I can create a separate issue for this. Let me know please.

[ramirotw]

Hey @ramirotw , great job! I have not encountered any issues except this one: Banners do not appear when 2 app tabs are already opened. See the video: https://watch.screencastify.com/v/cQIXwF7ixs8AGdGvmyOy

1. I have 2 opened tabs with the app
2. in one of these tabs I share a referral link and see the banner (and affiliate core id displayed in the local storage)
3. when I open the 2nd tab, banner is not displayed, referral data disappears from the local storage.

Could you please take a look into this issue? Btw, if it needed, I can create a separate issue for this. Let me know please.

@elena-zh please re-test, that case should be handled.

Thanks!

[elena-zh]

Hey @ramirotw , changes LGTM!
The only thing is that currently it is almost impossible to delete affiliate data from the local storage: it appears again and again after I clear all site data.
The only way to remove it is to delete redux_localstorage_simple_affiliate data.
https://watch.screencastify.com/v/6WWbCuLG3VWE0u3wrqEM

I'm not sure if it is an issue, though... 🙃
But it seems to me that app data should be removed when I clear all site data..

[ramirotw]

Hey @ramirotw , changes LGTM! The only thing is that currently it is almost impossible to delete affiliate data from the local storage: it appears again and again after I clear all site data. The only way to remove it is to delete redux_localstorage_simple_affiliate data. https://watch.screencastify.com/v/6WWbCuLG3VWE0u3wrqEM

I'm not sure if it is an issue, though... 🙃 But it seems to me that app data should be removed when I clear all site data..

Good to point that out. That's because of redux and the middleware that saves redux state in local storage. When you clear the app data through the Clear site data button, that's not clearing the redux store in memory (and hence the affiliate data), so any redux action that's get triggered within 1 second will persist that memory state in local storage. If you want to prevent the memory state to be persisted, after clearing the site's data, refresh the app immediately

[elena-zh]

Thanks!