Fix switching network and opening a second tab

Wait for tabs to sync, and only skipUnlocking if tabs don't sync.

ValidatorList test relied on skipUnlocking being called immediately and
triggering selectNetwork.

src/app/pages/StakingPage/Features/ValidatorList/__tests__/__snapshots__/index.test.tsx.snap

@@ -746,7 +746,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 <span
                   class="c19"
                 >
-                  TEST
+                  ROSE
                 </span>
               </span>
             </div>
@@ -808,7 +808,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 <span
                   class="c19"
                 >
-                  TEST
+                  ROSE
                 </span>
               </span>
             </div>
@@ -870,7 +870,7 @@ exports[`<ValidatorList  /> list should match snapshot 1`] = `
                 <span
                   class="c19"
                 >
-                  TEST
+                  ROSE
                 </span>
               </span>
             </div>

src/app/pages/StakingPage/Features/ValidatorList/__tests__/index.test.tsx

@@ -58,7 +58,15 @@ describe('<ValidatorList  />', () => {
   let store: ReturnType<typeof configureAppStore>
 
   beforeEach(() => {
-    store = configureAppStore()
+    store = configureAppStore({
+      network: {
+        chainContext: '',
+        epoch: 300,
+        selectedNetwork: 'mainnet',
+        ticker: 'ROSE',
+        minimumStakingAmount: 100,
+      },
+    })
 
     jest.mocked(NodeInternal).mockReturnValue({
       async stakingAccount(query: any) {

src/app/state/network/saga.ts

@@ -1,9 +1,10 @@
 import * as oasis from '@oasisprotocol/client'
 import { PayloadAction } from '@reduxjs/toolkit'
 import { persistActions } from 'app/state/persist'
-import { selectNeedsPassword } from 'app/state/persist/selectors'
+import { selectSkipUnlockingOnInit } from 'app/state/persist/selectors'
 import { config } from 'config'
-import { all, call, put, select, takeLatest } from 'typed-redux-saga'
+import { RECEIVE_INIT_STATE } from 'redux-state-sync'
+import { all, call, delay, put, race, select, take, takeLatest } from 'typed-redux-saga'
 import { backend, backendApi } from 'vendors/backend'
 
 import { networkActions } from '.'
@@ -59,14 +60,19 @@ export function* networkSaga() {
     put(networkActions.selectNetwork(process.env.REACT_APP_LOCALNET ? 'local' : 'mainnet')),
   )
   yield* takeLatest(persistActions.resetRootState, function* () {
-    const needsPassword = yield* select(selectNeedsPassword)
-    if (!needsPassword) {
+    const skipUnlockOnInit = yield* select(selectSkipUnlockingOnInit)
+    if (skipUnlockOnInit) {
       yield* put(persistActions.skipUnlocking())
     }
   })
 
-  const needsPassword = yield* select(selectNeedsPassword)
-  if (!needsPassword) {
+  // Wait for tabs to sync state. >5ms should be enough.
+  const maybeSynced = yield* race({
+    tabsSynced: take(RECEIVE_INIT_STATE),
+    thereAreNoOtherTabs: delay(50),
+  })
+  const skipUnlockOnInit = yield* select(selectSkipUnlockingOnInit)
+  if (!maybeSynced.tabsSynced && skipUnlockOnInit) {
     yield* put(persistActions.skipUnlocking())
   }
 }

src/app/state/persist/index.ts

@@ -26,7 +26,7 @@ export function getInitialState(): PersistState {
     // Disable persistence if tabs would override each other.
     isPersistenceUnsupported: needsSyncingTabs && !isSyncingTabsSupported,
     loading: false,
-    stringifiedEncryptionKey: localStorage.getItem(STORAGE_FIELD) ? undefined : 'skipped',
+    stringifiedEncryptionKey: undefined,
     enteredWrongPassword: false,
   }
 }

src/app/state/persist/selectors.ts

@@ -11,6 +11,10 @@ export const selectNeedsPassword = createSelector(
   [selectSlice],
   state => state.hasPersistedProfiles && !state.stringifiedEncryptionKey,
 )
+export const selectSkipUnlockingOnInit = createSelector(
+  [selectSlice],
+  state => !state.hasPersistedProfiles && !state.stringifiedEncryptionKey,
+)
 export const selectHasPersistedProfiles = createSelector([selectSlice], state => state.hasPersistedProfiles)
 export const selectIsPersistenceUnsupported = createSelector(
   [selectSlice],