WA-238 Decoupling storage of names in a separate step in local host

src/routes/safe/component/AddOwner/index.jsx

@@ -4,8 +4,9 @@ import { List } from 'immutable'
 import Stepper from '~/components/Stepper'
 import { connect } from 'react-redux'
 import { type Safe } from '~/routes/safe/store/model/safe'
-import { type Owner } from '~/routes/safe/store/model/owner'
+import { type Owner, makeOwner } from '~/routes/safe/store/model/owner'
 import { getSafeEthereumInstance, createTransaction } from '~/routes/safe/component/AddTransaction/createTransactions'
+import { setOwners } from '~/utils/localStorage'
 import AddOwnerForm, { NAME_PARAM, OWNER_ADDRESS_PARAM, INCREASE_PARAM } from './AddOwnerForm'
 import Review from './Review'
 import selector, { type SelectorProps } from './selector'
@@ -52,6 +53,7 @@ class AddOwner extends React.Component<Props, State> {
       const gnosisSafe = await getSafeEthereumInstance(safeAddress)
       const data = gnosisSafe.contract.addOwnerWithThreshold.getData(newOwnerAddress, newThreshold)
       await createTransaction(safe, `Add Owner ${newOwnerName}`, safeAddress, 0, nonce, userAddress, data)
+      setOwners(safeAddress, safe.get('owners').push(makeOwner({ name: newOwnerName, address: newOwnerAddress })))
       fetchTransactions()
       this.setState({ done: true })
     } catch (error) {

src/routes/safe/store/actions/fetchSafe.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Dispatch as ReduxDispatch } from 'redux'
-import { List } from 'immutable'
+import { List, Map } from 'immutable'
 import { type GlobalState } from '~/store/index'
 import { makeOwner } from '~/routes/safe/store/model/owner'
 import { type SafeProps, type Safe, makeSafe } from '~/routes/safe/store/model/safe'
@@ -8,11 +8,12 @@ import { makeDailyLimit } from '~/routes/safe/store/model/dailyLimit'
 import { getDailyLimitFrom } from '~/routes/safe/component/Withdrawn/withdrawn'
 import { getGnosisSafeInstanceAt } from '~/wallets/safeContracts'
 import updateSafe from '~/routes/safe/store/actions/updateSafe'
+import { getOwners } from '~/utils/localStorage'
 
-const buildOwnersFrom = (safeOwners: string[], storedOwners: Object[]) => (
+const buildOwnersFrom = (safeOwners: string[], storedOwners: Map<string, string>) => (
   safeOwners.map((ownerAddress: string) => {
-    const foundOwner = storedOwners.find(owner => owner.address === ownerAddress)
-    return makeOwner(foundOwner || { name: 'UNKNOWN', address: ownerAddress })
+    const ownerName = storedOwners.get(ownerAddress.toLowerCase()) || 'UNKNOWN'
+    return makeOwner({ name: ownerName, address: ownerAddress })
   })
 )
 
@@ -22,7 +23,7 @@ export const buildSafe = async (storedSafe: Object) => {
 
   const dailyLimit = makeDailyLimit(await getDailyLimitFrom(safeAddress, 0))
   const threshold = Number(await gnosisSafe.getThreshold())
-  const owners = List(buildOwnersFrom(await gnosisSafe.getOwners(), storedSafe.owners))
+  const owners = List(buildOwnersFrom(await gnosisSafe.getOwners(), getOwners(safeAddress)))
 
   const safe: SafeProps = {
     address: safeAddress,

src/routes/safe/store/reducer/safe.js

@@ -3,7 +3,7 @@ import { Map } from 'immutable'
 import { handleActions, type ActionType } from 'redux-actions'
 import addSafe, { ADD_SAFE } from '~/routes/safe/store/actions/addSafe'
 import { type Safe, makeSafe } from '~/routes/safe/store/model/safe'
-import { saveSafes } from '~/utils/localStorage'
+import { saveSafes, setOwners } from '~/utils/localStorage'
 import updateSafes, { UPDATE_SAFES } from '~/routes/safe/store/actions/updateSafes'
 import updateSafe, { UPDATE_SAFE } from '~/routes/safe/store/actions/updateSafe'
 
@@ -28,7 +28,10 @@ export default handleActions({
   [UPDATE_SAFES]: (state: State, action: ActionType<typeof updateSafes>): State =>
     action.payload,
   [ADD_SAFE]: (state: State, action: ActionType<typeof addSafe>): State => {
-    const safes = state.set(action.payload.address, makeSafe(action.payload))
+    const safe: Safe = makeSafe(action.payload)
+    setOwners(safe.get('address'), safe.get('owners'))
+
+    const safes = state.set(action.payload.address, safe)
     saveSafes(safes.toJSON())
     return safes
   },

src/utils/localStorage.js

@@ -1,6 +1,10 @@
 // @flow
+import { List, Map } from 'immutable'
+import { type Owner } from '~/routes/safe/store/model/owner'
+
 export const SAFES_KEY = 'SAFES'
 export const TX_KEY = 'TX'
+export const OWNERS_KEY = 'OWNERS'
 
 export const load = (key: string) => {
   try {
@@ -27,3 +31,19 @@ export const saveSafes = (safes: Object) => {
     // Ignore write errors
   }
 }
+
+export const setOwners = (safeAddress: string, owners: List<Owner>) => {
+  try {
+    const ownersAsMap = Map(owners.map((owner: Owner) => [owner.get('address').toLowerCase(), owner.get('name')]))
+    const serializedState = JSON.stringify(ownersAsMap)
+    localStorage.setItem(`${OWNERS_KEY}-${safeAddress}`, serializedState)
+  } catch (err) {
+    // Ignore write errors
+  }
+}
+
+export const getOwners = (safeAddress: string): Map<string, string> => {
+  const data = load(`${OWNERS_KEY}-${safeAddress}`)
+
+  return data ? Map(data) : Map()
+}