Merge branch 'development' into fix/allow-repick

src/logic/wallets/store/selectors/index.ts

@@ -5,23 +5,22 @@ import { PROVIDER_REDUCER_ID } from 'src/logic/wallets/store/reducer/provider'
 
 export const providerSelector = (state) => state[PROVIDER_REDUCER_ID]
 
-export const userAccountSelector = createSelector(providerSelector, (provider) => {
+export const userAccountSelector = createSelector(providerSelector, (provider): string => {
   const account = provider.get('account')
 
   return account || ''
 })
 
-export const providerNameSelector = createSelector(providerSelector, (provider) => {
+export const providerNameSelector = createSelector(providerSelector, (provider): string => {
   const name = provider.get('name')
 
   return name ? name.toLowerCase() : undefined
 })
 
-export const networkSelector = createSelector(providerSelector, (provider) => {
+export const networkSelector = createSelector(providerSelector, (provider): string => {
   const networkId = provider.get('network')
-  const network = ETHEREUM_NETWORK_IDS[networkId] || ETHEREUM_NETWORK.UNKNOWN
 
-  return network
+  return ETHEREUM_NETWORK_IDS[networkId] || ETHEREUM_NETWORK.UNKNOWN
 })
 
 export const loadedSelector = createSelector(providerSelector, (provider) => provider.get('loaded'))

src/routes/load/components/Layout.tsx

@@ -12,6 +12,7 @@ import ReviewInformation from 'src/routes/load/components/ReviewInformation'
 
 import { history } from 'src/store'
 import { secondary, sm } from 'src/theme/variables'
+import { LoadFormValues } from '../container/Load'
 
 const getSteps = () => ['Name and address', 'Owners', 'Review']
 
@@ -33,7 +34,14 @@ const formMutators = {
 
 const buttonLabels = ['Next', 'Review', 'Load']
 
-const Layout = ({ network, onLoadSafeSubmit, provider, userAddress }) => {
+interface ILayout {
+  network: string
+  provider?: string
+  userAddress: string
+  onLoadSafeSubmit: (values: LoadFormValues) => void
+}
+
+const Layout: React.FC<ILayout> = ({ network, onLoadSafeSubmit, provider, userAddress }) => {
   const steps = getSteps()
   const initialValues = {}
 

src/routes/load/container/Load.tsx

@@ -37,15 +37,29 @@ export const loadSafe = async (
   await addSafe(safeProps)
 }
 
-class Load extends React.Component<any> {
+interface ILoad {
-  onLoadSafeSubmit = async (values) => {
+  addSafe: Dispatch<any>
+  network: string
+  provider?: string
+  userAddress: string
+}
+
+export interface LoadFormValues {
+  name: string
+  address: string
+  threshold: string
+}
+
+const Load: React.FC<ILoad> = ({ addSafe, network, provider, userAddress }) => {
+  const onLoadSafeSubmit = async (values: LoadFormValues) => {
     let safeAddress = values[FIELD_LOAD_ADDRESS]
-    if (safeAddress) {
+    // TODO: review this check. It doesn't seems to be necessary at this point
+    if (!safeAddress) {
+      console.error('failed to load Safe address', JSON.stringify(values))
       return
     }
 
     try {
-      const { addSafe } = this.props
       const safeName = values[FIELD_LOAD_NAME]
       safeAddress = checksumAddress(safeAddress)
       const ownerNames = getNamesFrom(values)
@@ -63,20 +77,11 @@ class Load extends React.Component<any> {
     }
   }
 
-  render() {
+  return (
-    const { network, provider, userAddress } = this.props
+    <Page>
-
+      <Layout network={network} onLoadSafeSubmit={onLoadSafeSubmit} provider={provider} userAddress={userAddress} />
-    return (
+    </Page>
-      <Page>
+  )
-        <Layout
-          network={network}
-          onLoadSafeSubmit={this.onLoadSafeSubmit}
-          provider={provider}
-          userAddress={userAddress}
-        />
-      </Page>
-    )
-  }
 }
 
 export default connect(selector, actions)(Load)