feat: use redux-persist

app/index.tsx

@@ -5,7 +5,7 @@ import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
 
 import { configureStore, history } from './store/configureStore';
 
-const store = configureStore();
+const { store, persistor } = configureStore();
 
 const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer;
 
@@ -15,7 +15,7 @@ document.addEventListener('DOMContentLoaded', () => {
   render(
     <ThemeProvider theme={theme}>
       <AppContainer>
-        <Root store={store} history={history} />
+        <Root store={store} persistor={persistor} history={history} />
       </AppContainer>
     </ThemeProvider>,
     document.getElementById('root')

app/modals/transaction/sign-tx-with-ledger.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 import { LedgerConnectInstructions } from '../../components/ledger/ledger-connect-instructions';
 import { Box } from '@blockstack/ui';
 import { useLedger } from '../../hooks/use-ledger';

app/pages/root.tsx

@@ -4,6 +4,7 @@ import { ConnectedRouter } from 'connected-react-router';
 import { createGlobalStyle } from 'styled-components';
 import { hot } from 'react-hot-loader/root';
 import { History } from 'history';
+import { PersistGate } from 'redux-persist/integration/react';
 import { CSSReset } from '@blockstack/ui';
 
 import { Store } from '../store';
@@ -33,6 +34,7 @@ const GlobalStyle = createGlobalStyle`
 interface RootProps {
   store: Store;
   history: History;
+  persistor: any;
 }
 
 interface BackContext {
@@ -46,20 +48,22 @@ export const BackContext = createContext<BackContext>({
   setBackUrl: (_url: string) => {},
 });
 
-function Root({ store, history }: RootProps) {
+function Root({ store, history, persistor }: RootProps) {
   const [backUrl, setBackUrl] = useState<string | null>(null);
 
   useEffect(() => void loadFonts(), []);
 
   return (
     <Provider store={store}>
-      <BackContext.Provider value={{ backUrl, setBackUrl }}>
-        <CSSReset />
-        <GlobalStyle />
-        <ConnectedRouter history={history}>
-          <Routes />
-        </ConnectedRouter>
-      </BackContext.Provider>
+      <PersistGate persistor={persistor}>
+        <BackContext.Provider value={{ backUrl, setBackUrl }}>
+          <CSSReset />
+          <GlobalStyle />
+          <ConnectedRouter history={history}>
+            <Routes />
+          </ConnectedRouter>
+        </BackContext.Provider>
+      </PersistGate>
     </Provider>
   );
 }

app/store/configureStore.dev.ts

@@ -2,10 +2,12 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import { createStore, applyMiddleware, compose } from '@reduxjs/toolkit';
 import thunk from 'redux-thunk';
+import { persistStore, persistReducer } from 'redux-persist';
 import { createHashHistory } from 'history';
 import { routerMiddleware, routerActions } from 'connected-react-router';
 import { createLogger } from 'redux-logger';
-import { RootState, createRootReducer } from '.';
+
+import { RootState, createRootReducer, persistConfig } from '.';
 import { getInitialStateFromDisk } from '../utils/disk-store';
 
 declare global {
@@ -63,12 +65,16 @@ export const configureStore = (initialState?: RootState) => {
   enhancers.push(applyMiddleware(...middleware));
   const enhancer = composeEnhancers<any>(...enhancers);
 
+  const persistedReducer = persistReducer(persistConfig, rootReducer);
+
   // Create Store
-  const store = createStore(rootReducer, initialState, enhancer);
+  const store = createStore(persistedReducer, initialState, enhancer);
+
+  const persistor = persistStore(store);
 
   if (module.hot) {
     module.hot.accept('./index', () => store.replaceReducer(require('./index').default));
   }
 
-  return store;
+  return { store, persistor };
 };

app/store/configureStore.prod.ts

@@ -2,7 +2,9 @@ import { createStore, applyMiddleware } from '@reduxjs/toolkit';
 import thunk from 'redux-thunk';
 import { createHashHistory } from 'history';
 import { routerMiddleware } from 'connected-react-router';
-import { RootState, createRootReducer } from '.';
+import { persistReducer, persistStore } from 'redux-persist';
+
+import { RootState, createRootReducer, persistConfig } from '.';
 import { getInitialStateFromDisk } from '../utils/disk-store';
 
 export const history = createHashHistory();
@@ -11,5 +13,9 @@ const router = routerMiddleware(history);
 const enhancer = applyMiddleware(thunk, router);
 
 export function configureStore(initialState?: RootState) {
-  return createStore(rootReducer, initialState, enhancer);
+  const persistedReducer = persistReducer(persistConfig, rootReducer);
+  const store = createStore(persistedReducer, initialState, enhancer);
+  const persistor = persistStore(store);
+
+  return { store, persistor };
 }

app/store/index.ts

@@ -1,4 +1,4 @@
-import { Dispatch as ReduxDispatch, Store as ReduxStore, Action } from 'redux';
+import { Dispatch as ReduxDispatch, Store as ReduxStore, Action, Reducer } from 'redux';
 import { combineReducers } from '@reduxjs/toolkit';
 import { connectRouter } from 'connected-react-router';
 
@@ -8,6 +8,8 @@ import { addressReducer, AddressState } from './address';
 import { HomeState, homeSlice } from './home';
 import { pendingTransactionReducer, PendingTransactionState } from './pending-transaction';
 import { stacksNodeReducer, StacksNodeState } from './stacks-node';
+import { reduxPersistElectronStore } from './persist-middleware';
+import { PersistConfig } from 'redux-persist';
 
 export interface RootState {
   router: any;
@@ -17,6 +19,7 @@ export interface RootState {
   address: AddressState;
   home: HomeState;
   stacksNode: StacksNodeState;
+  _persist: any;
 }
 
 export type GetState = () => RootState;
@@ -25,6 +28,12 @@ export type Dispatch = ReduxDispatch<Action<string>>;
 
 export type Store = ReduxStore<RootState, Action<string>>;
 
+export const persistConfig: PersistConfig<RootState> = {
+  key: 'root',
+  storage: reduxPersistElectronStore(),
+  whitelist: ['stacksNode'],
+};
+
 interface RootReducerArgs {
   history: any;
   keys: Partial<KeysState>;

app/store/persist-middleware.ts

@@ -0,0 +1,20 @@
+import Store from 'electron-store';
+
+interface ReduxPersistElectronStore {
+  electronStore?: Store;
+  electronStoreOpts?: Store;
+}
+
+export const reduxPersistElectronStore = (args: ReduxPersistElectronStore = {}) => {
+  const { electronStore, electronStoreOpts } = args;
+
+  const store = electronStore || new Store((electronStoreOpts as any) || {});
+
+  return {
+    getItem: (key: any) => Promise.resolve(store.get(key)),
+
+    setItem: (key: any, item: any) => Promise.resolve(store.set(key, item)),
+
+    removeItem: (key: any) => Promise.resolve(store.delete(key)),
+  };
+};

app/store/transaction/transaction.reducer.ts

@@ -12,7 +12,7 @@ import {
 } from './transaction.actions';
 
 export interface TransactionState extends EntityState<Transaction> {
-  mostRecentBroadcastError: null | string;
+  mostRecentBroadcastError: string | null;
   loading: boolean;
 }
 
@@ -22,7 +22,7 @@ const transactionAdapter = createEntityAdapter<Transaction>({
 });
 
 const initialState = transactionAdapter.getInitialState({
-  mostRecentBroadcastError: null,
+  mostRecentBroadcastError: null as string | null,
   loading: true,
 });
 

package.json

@@ -182,7 +182,6 @@
     "jest": "26.4.2",
     "lint-staged": "10.2.11",
     "mini-css-extract-plugin": "0.10.0",
-    "node-sass": "4.14.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "prettier": "2.1.0",
     "ramda": "0.27.1",
@@ -239,6 +238,7 @@
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "redux": "4.0.5",
+    "redux-persist": "6.0.0",
     "redux-thunk": "2.3.0",
     "rpc-websocket-client": "1.1.4",
     "source-map-support": "0.5.19",