Add owners names to load Safe

src/routes/load/container/Load.jsx

@@ -10,13 +10,21 @@ import { history } from '~/store'
 import selector, { type SelectorProps } from './selector'
 import actions, { type Actions } from './actions'
 import Layout from '../components/Layout'
+import { getNamesFrom, getOwnersFrom } from '~/routes/open/utils/safeDataExtractor'
+import { getWeb3 } from '~/logic/wallets/getWeb3'
+import { getGnosisSafeContract } from '~/logic/contracts/safeContracts'
 import { FIELD_LOAD_NAME, FIELD_LOAD_ADDRESS } from '../components/fields'
 
 type Props = SelectorProps & Actions
 
-export const loadSafe = async (safeName: string, safeAddress: string, addSafe: Function) => {
+export const loadSafe = async (
+  safeName: string,
+  safeAddress: string,
+  owners: Array,
+  addSafe: Function
+) => {
   const safeProps = await buildSafe(safeAddress, safeName)
-
+  safeProps.owners = owners
   await addSafe(safeProps)
 
   const storedSafes = (await loadFromStorage(SAFES_KEY)) || {}
@@ -31,8 +39,15 @@ class Load extends React.Component<Props> {
       const { addSafe } = this.props
       const safeName = values[FIELD_LOAD_NAME]
       const safeAddress = values[FIELD_LOAD_ADDRESS]
+      const ownerNames = getNamesFrom(values)
 
-      await loadSafe(safeName, safeAddress, addSafe)
+      const web3 = getWeb3()
+      const GnosisSafe = getGnosisSafeContract(web3)
+      const gnosisSafe = await GnosisSafe.at(safeAddress)
+      const ownerAddresses = await gnosisSafe.getOwners()
+      const owners = getOwnersFrom(ownerNames, ownerAddresses.sort())
+
+      await loadSafe(safeName, safeAddress, owners, addSafe)
 
       const url = `${SAFELIST_ADDRESS}/${safeAddress}`
       history.push(url)

src/routes/open/utils/safeDataExtractor.js

@@ -1,4 +1,6 @@
 // @flow
+import { makeOwner } from '~/routes/safe/store/models/owner'
+
 export const getAccountsFrom = (values: Object): string[] => {
   const accounts = Object.keys(values)
     .sort()
@@ -15,6 +17,17 @@ export const getNamesFrom = (values: Object): string[] => {
   return accounts.map(account => values[account]).slice(0, values.owners)
 }
 
+export const getOwnersFrom = (
+  names: string[],
+  addresses: string[]
+): Array<string, string> => {
+  const owners = names.map((name: string, index: number) => makeOwner(
+    { name, address: addresses[index] }
+  ))
+
+  return owners
+}
+
 export const getThresholdFrom = (values: Object): number => Number(values.confirmations)
 
 export const getSafeNameFrom = (values: Object): string => values.name