Init Contacts Redux store

src/app/state/contacts/index.ts

@@ -0,0 +1,25 @@
+import { PayloadAction } from '@reduxjs/toolkit'
+import { createSlice } from 'utils/@reduxjs/toolkit'
+import { ContactsState, Contact } from './types'
+
+export const initialState: ContactsState = {}
+
+const slice = createSlice({
+  name: 'contacts',
+  initialState,
+  reducers: {
+    add(state, action: PayloadAction<Contact>) {
+      state[action.payload.address] = action.payload
+    },
+    update(state, action: PayloadAction<Contact>) {
+      state[action.payload.address] = action.payload
+    },
+    delete(state, action: PayloadAction<string>) {
+      delete state[action.payload]
+    },
+  },
+})
+
+export const { actions: contactsActions } = slice
+
+export default slice.reducer

src/app/state/contacts/selectors.ts

@@ -0,0 +1,15 @@
+import { createSelector } from '@reduxjs/toolkit'
+
+import { RootState } from 'types'
+import { initialState } from '.'
+
+const selectSlice = (state: RootState) => state.contacts || initialState
+
+export const selectContactsList = createSelector([selectSlice], contacts =>
+  Object.keys(contacts).map(contact => ({
+    address: contacts[contact].address,
+    name: contacts[contact].name,
+  })),
+)
+
+export const selectContact = (address: string) => createSelector([selectSlice], contacts => contacts[address])

src/app/state/contacts/types.ts

@@ -0,0 +1,9 @@
+export interface Contact {
+  address: string
+  name: string
+}
+
+/* --- STATE --- */
+export interface ContactsState {
+  [key: string]: Contact
+}

src/app/state/persist/index.ts

@@ -101,6 +101,7 @@ export function receivePersistedRootState(
 ): RootState {
   return {
     ...prevState,
+    contacts: persistedRootState.contacts,
     theme: persistedRootState.theme,
     wallet: persistedRootState.wallet,
     network: persistedRootState.network,

src/app/state/persist/saga.ts

@@ -116,6 +116,7 @@ function* resetRootState(action: ReturnType<typeof persistActions.resetRootState
 // Encrypting
 async function encryptState(state: RootState, keyWithSalt: KeyWithSalt): Promise<EncryptedString> {
   const persistedRootState: PersistedRootState = {
+    contacts: state.contacts,
     theme: state.theme,
     wallet: state.wallet,
     network: state.network,

src/app/state/persist/syncTabs.ts

@@ -9,6 +9,7 @@ import {
 import { networkActions } from 'app/state/network'
 import { isSyncingTabsSupported, needsSyncingTabs, persistActions } from 'app/state/persist'
 import { walletActions } from 'app/state/wallet'
+import { contactsActions } from 'app/state/contacts'
 import { themeActions } from 'styles/theme/slice'
 import {
   createStateSyncMiddleware,
@@ -42,6 +43,9 @@ export function receiveInitialTabSyncState(
  * before {@link receiveInitialTabSyncState}!
  */
 export const whitelistTabSyncActions = [
+  contactsActions.add.type,
+  contactsActions.update.type,
+  contactsActions.delete.type,
   themeActions.changeTheme.type,
   walletActions.walletOpened.type,
   walletActions.updateBalance.type,
@@ -59,7 +63,13 @@ const stateSyncConfig: StateSyncConfig = {
   },
   whitelist: whitelistTabSyncActions,
   prepareState: (state: RootState): SyncedRootState => {
-    return { theme: state.theme, wallet: state.wallet, network: state.network, persist: state.persist }
+    return {
+      contacts: state.contacts,
+      theme: state.theme,
+      wallet: state.wallet,
+      network: state.network,
+      persist: state.persist,
+    }
   },
 }
 

src/app/state/persist/types.ts

@@ -33,5 +33,6 @@ export interface PersistState {
   enteredWrongPassword: boolean
 }
 
-export interface PersistedRootState extends Pick<RootState, 'theme' | 'wallet' | 'network'> {}
-export interface SyncedRootState extends Pick<RootState, 'theme' | 'wallet' | 'network' | 'persist'> {}
+export interface PersistedRootState extends Pick<RootState, 'contacts' | 'theme' | 'wallet' | 'network'> {}
+export interface SyncedRootState
+  extends Pick<RootState, 'contacts' | 'theme' | 'wallet' | 'network' | 'persist'> {}

src/store/reducers.ts

@@ -11,6 +11,7 @@ import importAccountsReducer from 'app/state/importaccounts'
 import networkReducer from 'app/state/network'
 import paraTimesReducer from 'app/state/paratimes'
 import stakingReducer from 'app/state/staking'
+import contactsReducer from 'app/state/contacts'
 import transactionReducer from 'app/state/transaction'
 import walletReducer from 'app/state/wallet'
 import themeReducer from 'styles/theme/slice'
@@ -20,6 +21,7 @@ import { RootState } from 'types'
 function createRootReducer() {
   const rootReducer = combineReducers({
     account: accountReducer,
+    contacts: contactsReducer,
     createWallet: createWalletReducer,
     fiatOnramp: fiatOnrampReducer,
     fatalError: fatalErrorReducer,

src/types/RootState.ts

@@ -4,6 +4,7 @@ import { WalletState } from 'app/state/wallet/types'
 import { CreateWalletState } from 'app/pages/CreateWalletPage/slice/types'
 import { FiatOnrampState } from 'app/pages/FiatOnrampPage/slice/types'
 import { AccountState } from 'app/state/account/types'
+import { ContactsState } from 'app/state/contacts/types'
 import { NetworkState } from 'app/state/network/types'
 import { TransactionState } from 'app/state/transaction/types'
 import { ImportAccountsState } from 'app/state/importaccounts/types'
@@ -20,6 +21,7 @@ import { receiveInitialTabSyncState, whitelistTabSyncActions } from 'app/state/p
 
 export interface RootState {
   /** Stored slices, see {@link receivePersistedRootState} */
+  contacts: ContactsState
   theme: ThemeState
   wallet: WalletState
   network: NetworkState