feat: persisted store, account state resets to initial state after an…

package.json

@@ -40,6 +40,7 @@
     "react-redux": "^8.1.3",
     "redux": "^4.2.1",
     "redux-persist": "^6.0.0",
+    "redux-persist-expire": "^1.1.1",
     "ts-unused-exports": "^10.0.1",
     "vitest": "^0.34.6"
   },

src/app/store/index.ts

@@ -1,5 +1,8 @@
 import { combineReducers, configureStore } from "@reduxjs/toolkit";
-import { accountSlice } from "@store/slices/account/account.slice";
+import {
+  accountSlice,
+  initialAccountState,
+} from "@store/slices/account/account.slice";
 import { modalSlice } from "@store/slices/modal/modal.slice";
 import { vaultSlice } from "@store/slices/vault/vault.slice";
 import {
@@ -11,7 +14,9 @@ import {
   REGISTER,
   REHYDRATE,
   persistReducer,
+  persistStore,
 } from "redux-persist";
+import expireReducer from "redux-persist-expire";
 import storage from "redux-persist/lib/storage";
 
 export interface RootState {
@@ -28,9 +33,15 @@ const rootReducer = combineReducers({
 
 const persistConfig: PersistConfig<RootState> = {
   key: "root",
-  version: 1,
-  storage,
+  storage: storage,
   whitelist: ["account", "vault"],
+  transforms: [
+    expireReducer("account", {
+      persistedAtKey: "loadedAt",
+      expireSeconds: 3600,
+      expiredState: initialAccountState,
+    }),
+  ],
 };
 
 const persistedReducer = persistReducer(persistConfig, rootReducer);
@@ -44,3 +55,5 @@ export const store = configureStore({
       },
     }),
 });
+
+export const persistor = persistStore(store);

src/app/store/slices/account/account.slice.ts

@@ -1,28 +1,30 @@
-import { createSlice } from "@reduxjs/toolkit";
-
 import { Network } from "@models/network";
 import { WalletType } from "@models/wallet";
+import { createSlice } from "@reduxjs/toolkit";
 
 export interface AccountState {
   address: string | undefined;
   walletType: WalletType | undefined;
   network: Network | undefined;
+  loadedAt: string | undefined;
 }
 
-const initialState: AccountState = {
+export const initialAccountState: AccountState = {
   address: undefined,
   walletType: undefined,
   network: undefined,
+  loadedAt: undefined,
 };
 
 export const accountSlice = createSlice({
   name: "account",
-  initialState: initialState,
+  initialState: initialAccountState,
   reducers: {
     login: (state, action) => {
       state.address = action.payload.address;
       state.walletType = action.payload.walletType;
       state.network = action.payload.network;
+      state.loadedAt = new Date().toJSON();
     },
     logout: (state) => {
       state.address = undefined;

src/app/store/slices/modal/modal.slice.ts

@@ -4,13 +4,13 @@ interface ModalState {
   isSelectWalletModalOpen: boolean;
 }
 
-const initialState: ModalState = {
+const initialModalState: ModalState = {
   isSelectWalletModalOpen: false,
 };
 
 export const modalSlice = createSlice({
   name: "modal",
-  initialState: initialState,
+  initialState: initialModalState,
   reducers: {
     toggleSelectWalletModalVisibility: (state) => {
       state.isSelectWalletModalOpen = !state.isSelectWalletModalOpen;

src/app/store/slices/vault/vault.slice.ts

@@ -6,14 +6,14 @@ interface VaultState {
   error: string | null;
 }
 
-const initialState: VaultState = {
+const initialVaultState: VaultState = {
   vaults: [],
   status: "idle",
   error: null,
 };
 
 export const vaultSlice = createSlice({
   name: "vault",
-  initialState: initialState,
+  initialState: initialVaultState,
   reducers: {},
 });

src/index.tsx

@@ -1,17 +1,20 @@
 import ReactDOM from "react-dom/client";
 import { Provider as ReduxProvider } from "react-redux";
-import "@fontsource/poppins";
 
 import { ChakraProvider } from "@chakra-ui/react";
+import "@fontsource/poppins";
+import { PersistGate } from "redux-persist/integration/react";
 
 import { App } from "./app/app";
-import { store } from "./app/store";
+import { persistor, store } from "./app/store";
 import { appTheme } from "./styles/app-theme";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <ReduxProvider store={store}>
-    <ChakraProvider resetCSS theme={appTheme}>
-      <App />
-    </ChakraProvider>
+    <PersistGate persistor={persistor} loading={null}>
+      <ChakraProvider resetCSS theme={appTheme}>
+        <App />
+      </ChakraProvider>
+    </PersistGate>
   </ReduxProvider>,
 );