fix: remove PersistGate and fix e2e tests

cypress/support/commands.ts

@@ -3,7 +3,7 @@ import 'cypress-hardhat/lib/browser'
 import { Eip1193Bridge } from '@ethersproject/experimental/lib/eip1193-bridge'
 
 import { FeatureFlag } from '../../src/featureFlags'
-import { UserState } from '../../src/state/user/reducer'
+import { initialState, UserState } from '../../src/state/user/reducer'
 import { CONNECTED_WALLET_USER_STATE } from '../utils/user-state'
 
 declare global {
@@ -54,18 +54,31 @@ Cypress.Commands.overwrite(
           onBeforeLoad(win) {
             options?.onBeforeLoad?.(win)
 
-            // We want to test from a clean state, so we clear the persisted state.
             win.indexedDB.deleteDatabase('redux')
 
-            // Since the IndexedDB state is clear, the first migration will run and pick up this legacy state from localStorage.
-            win.localStorage.setItem(
-              'redux_localstorage_simple_user', // storage key for the user reducer using 'redux-localstorage-simple'
-              JSON.stringify({
-                hideUniswapWalletBanner: true,
-                ...CONNECTED_WALLET_USER_STATE,
-                ...(options?.userState ?? {}),
-              })
-            )
+            const dbRequest = win.indexedDB.open('redux')
+
+            dbRequest.onsuccess = function () {
+              const db = dbRequest.result
+              const transaction = db.transaction('keyvaluepairs', 'readwrite')
+              const store = transaction.objectStore('keyvaluepairs')
+              store.put(
+                {
+                  user: {
+                    ...initialState,
+                    hideUniswapWalletBanner: true,
+                    ...CONNECTED_WALLET_USER_STATE,
+                    ...(options?.userState ?? {}),
+                  },
+                },
+                'persist:interface'
+              )
+            }
+
+            dbRequest.onupgradeneeded = function () {
+              const db = dbRequest.result
+              db.createObjectStore('keyvaluepairs')
+            }
 
             // Set feature flags, if configured.
             if (options?.featureFlags) {

src/hooks/useEagerlyConnect.ts

@@ -1,7 +1,6 @@
 import { Connector } from '@web3-react/types'
 import { gnosisSafeConnection, networkConnection } from 'connection'
 import { getConnection } from 'connection'
-import { Connection } from 'connection/types'
 import { useEffect } from 'react'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { updateSelectedWallet } from 'state/user/reducer'
@@ -22,22 +21,24 @@ export default function useEagerlyConnect() {
   const dispatch = useAppDispatch()
 
   const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
+  const rehydrated = useAppSelector((state) => state._persist.rehydrated)
 
-  let selectedConnection: Connection | undefined
-  if (selectedWallet) {
+  useEffect(() => {
+    if (!selectedWallet) return
     try {
-      selectedConnection = getConnection(selectedWallet)
+      const selectedConnection = getConnection(selectedWallet)
+      connect(gnosisSafeConnection.connector)
+      connect(networkConnection.connector)
+
+      if (selectedConnection) {
+        connect(selectedConnection.connector)
+      }
     } catch {
-      dispatch(updateSelectedWallet({ wallet: undefined }))
+      // only clear the persisted wallet type if it failed to connect.
+      if (rehydrated) {
+        dispatch(updateSelectedWallet({ wallet: undefined }))
+      }
+      return
     }
-  }
-
-  useEffect(() => {
-    connect(gnosisSafeConnection.connector)
-    connect(networkConnection.connector)
-
-    if (selectedConnection) {
-      connect(selectedConnection.connector)
-    } // The dependency list is empty so this is only run once on mount
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [dispatch, rehydrated, selectedWallet])
 }

src/index.tsx

@@ -13,15 +13,14 @@ import { createRoot } from 'react-dom/client'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { Provider } from 'react-redux'
 import { BrowserRouter, HashRouter } from 'react-router-dom'
-import { PersistGate } from 'redux-persist/integration/react'
 import { SystemThemeUpdater } from 'theme/components/ThemeToggle'
 import { isBrowserRouterEnabled } from 'utils/env'
 
 import Web3Provider from './components/Web3Provider'
 import { LanguageProvider } from './i18n'
 import App from './pages/App'
 import * as serviceWorkerRegistration from './serviceWorkerRegistration'
-import store, { persistor } from './state'
+import store from './state'
 import ApplicationUpdater from './state/application/updater'
 import ListsUpdater from './state/lists/updater'
 import LogsUpdater from './state/logs/updater'
@@ -58,27 +57,25 @@ const Router = isBrowserRouterEnabled() ? BrowserRouter : HashRouter
 createRoot(container).render(
   <StrictMode>
     <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <FeatureFlagsProvider>
-          <QueryClientProvider client={queryClient}>
-            <Router>
-              <LanguageProvider>
-                <Web3Provider>
-                  <ApolloProvider client={apolloClient}>
-                    <BlockNumberProvider>
-                      <Updaters />
-                      <ThemeProvider>
-                        <ThemedGlobalStyle />
-                        <App />
-                      </ThemeProvider>
-                    </BlockNumberProvider>
-                  </ApolloProvider>
-                </Web3Provider>
-              </LanguageProvider>
-            </Router>
-          </QueryClientProvider>
-        </FeatureFlagsProvider>
-      </PersistGate>
+      <FeatureFlagsProvider>
+        <QueryClientProvider client={queryClient}>
+          <Router>
+            <LanguageProvider>
+              <Web3Provider>
+                <ApolloProvider client={apolloClient}>
+                  <BlockNumberProvider>
+                    <Updaters />
+                    <ThemeProvider>
+                      <ThemedGlobalStyle />
+                      <App />
+                    </ThemeProvider>
+                  </BlockNumberProvider>
+                </ApolloProvider>
+              </Web3Provider>
+            </LanguageProvider>
+          </Router>
+        </QueryClientProvider>
+      </FeatureFlagsProvider>
     </Provider>
   </StrictMode>
 )

src/state/migrations.ts

@@ -26,8 +26,7 @@ export function customCreateMigrate(migrations: MigrationManifest, options: Migr
   return async (state: PersistedState, currentVersion: number) => {
     if (state === undefined) {
       // If no state exists, run the legacy migration to set initial state
-      const initialState = await legacyLocalStorageMigration()
-      return defaultMigrate(initialState, currentVersion)
+      state = await legacyLocalStorageMigration()
     }
 
     // Otherwise, use the default migration process

src/state/migrations/0.ts

@@ -1,5 +1,10 @@
 import { PersistedState } from 'redux-persist'
 
+/**
+ * Initial migration as a proof of concept.
+ *
+ * Legacy migration from redux-localstorage-simple happens in legacy.ts
+ */
 export const migration0 = (state: PersistedState) => {
   return state
 }

src/state/reducer.ts

@@ -51,6 +51,7 @@ const persistConfig: PersistConfig<AppState> = {
   throttle: 1000, // ms
   serialize: false,
   // The typescript definitions are wrong - we need this to be false for unserialized storage to work.
+  // We need unserialized storage for inspectable db entries for debugging.
   // @ts-ignore
   deserialize: false,
   debug: isDevelopmentEnv(),