Little bit performance improvement for SafeOwnersForm in safe creation, still has to be improved

src/components/Table/index.jsx

@@ -2,12 +2,12 @@
 import * as React from 'react'
 import classNames from 'classnames'
 import { List } from 'immutable'
-import Row from '~/components/layout/Row'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import { withStyles } from '@material-ui/core/styles'
 import CircularProgress from '@material-ui/core/CircularProgress'
 import TablePagination from '@material-ui/core/TablePagination'
+import Row from '~/components/layout/Row'
 import { type Order, stableSort, getSorting } from '~/components/Table/sorting'
 import TableHead, { type Column } from '~/components/Table/TableHead'
 import { xl } from '~/theme/variables'
@@ -31,7 +31,6 @@ type State = {
   orderProp: boolean,
   rowsPerPage: number,
   fixed?: boolean,
-  noBorder: boolean,
 }
 
 const styles = {
@@ -134,13 +133,16 @@ class GnoTable<K> extends React.Component<Props<K>, State> {
     return (
       <React.Fragment>
         {!isEmpty && (
-          <Table aria-labelledby={label} className={!noBorder && classes.root}>
+          <Table aria-labelledby={label} className={noBorder ? '' : classes.root}>
             <TableHead columns={columns} order={order} orderBy={orderByParam} onSort={this.onSort} />
             <TableBody>{children(sortedData)}</TableBody>
           </Table>
         )}
         {isEmpty && (
-          <Row className={classNames(classes.loader, !noBorder && classes.root)} style={this.getEmptyStyle(emptyRows + 1)}>
+          <Row
+            className={classNames(classes.loader, !noBorder && classes.root)}
+            style={this.getEmptyStyle(emptyRows + 1)}
+          >
             <CircularProgress size={60} />
           </Row>
         )}

src/routes/open/components/SafeOwnersForm/index.jsx

@@ -1,6 +1,8 @@
 // @flow
 import * as React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import InputAdornment from '@material-ui/core/InputAdornment'
+import CheckCircle from '@material-ui/icons/CheckCircle'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import {
@@ -15,8 +17,6 @@ import Button from '~/components/layout/Button'
 import Row from '~/components/layout/Row'
 import Img from '~/components/layout/Img'
 import Col from '~/components/layout/Col'
-import InputAdornment from '@material-ui/core/InputAdornment'
-import CheckCircle from '@material-ui/icons/CheckCircle'
 import { getOwnerNameBy, getOwnerAddressBy } from '~/routes/open/components/fields'
 import Paragraph from '~/components/layout/Paragraph'
 import OpenPaper from '~/components/Stepper/OpenPaper'
@@ -74,8 +74,11 @@ const styles = () => ({
 })
 
 const getAddressValidators = (addresses: string[], position: number) => {
+  // thanks Rich Harris
+  // https://twitter.com/Rich_Harris/status/1125850391155965952
   const copy = addresses.slice()
-  copy.splice(position, 1)
+  copy[position] = copy[copy.length - 1]
+  copy.pop()
 
   return composeValidators(required, mustBeEthereumAddress, uniqueAddress(copy))
 }
@@ -97,7 +100,7 @@ export const calculateValuesAfterRemoving = (index: number, notRemovedOwners: nu
   return initialValues
 }
 
-class SafeOwners extends React.Component<Props, State> {
+class SafeOwners extends React.PureComponent<Props, State> {
   state = {
     numOwners: 1,
   }

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -2,16 +2,17 @@
 import React from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Table from '~/components/Table'
 import { type Column, cellWidth } from '~/components/Table/TableHead'
-import TableRow from '@material-ui/core/TableRow'
-import TableCell from '@material-ui/core/TableCell'
 import Row from '~/components/layout/Row'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
 import Button from '~/components/layout/Button'
+import Img from '~/components/layout/Img'
 import AddOwnerModal from './AddOwnerModal'
 import RemoveOwnerModal from './RemoveOwnerModal'
 import ReplaceOwnerModal from './ReplaceOwnerModal'
@@ -48,6 +49,15 @@ type Props = {
   createTransaction: Function,
 }
 
+type State = {
+  selectedOwnerAddress?: string,
+  selectedOwnerName?: string,
+  showAddOwner: boolean,
+  showRemoveOwner: boolean,
+  showReplaceOwner: boolean,
+  showEditOwner: boolean,
+}
+
 type Action = 'AddOwner' | 'EditOwner' | 'ReplaceOwner' | 'RemoveOwner'
 
 class ManageOwners extends React.Component<Props, State> {
@@ -78,14 +88,7 @@ class ManageOwners extends React.Component<Props, State> {
 
   render() {
     const {
-      classes,
+      classes, safeAddress, safeName, owners, threshold, network, userAddress, createTransaction,
-      safeAddress,
-      safeName,
-      owners,
-      threshold,
-      network,
-      userAddress,
-      createTransaction,
     } = this.props
     const {
       showAddOwner,
@@ -106,36 +109,33 @@ class ManageOwners extends React.Component<Props, State> {
           <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
             Manage Safe Owners
           </Paragraph>
-          <Table
+          <Table label="owners" columns={columns} data={ownerData} size={ownerData.size} defaultFixed noBorder>
-            label="owners"
-            columns={columns}
-            data={ownerData}
-            size={ownerData.size}
-            defaultFixed
-            noBorder
-          >
             {(sortedData: Array<OwnerRow>) => sortedData.map((row: any, index: number) => (
               <TableRow tabIndex={-1} key={index} className={classes.hide}>
                 {autoColumns.map((column: Column) => (
                   <TableCell key={column.id} style={cellWidth(column.width)} align={column.align} component="td">
-                    {column.id === OWNERS_TABLE_ADDRESS_ID ? <OwnerAddressTableCell address={row[column.id]} /> : row[column.id]}
+                    {column.id === OWNERS_TABLE_ADDRESS_ID ? (
+                      <OwnerAddressTableCell address={row[column.id]} />
+                    ) : (
+                      row[column.id]
+                    )}
                   </TableCell>
                 ))}
                 <TableCell component="td">
                   <Row align="end" className={classes.actions}>
-                    <img
+                    <Img
                       alt="Edit owner"
                       className={classes.editOwnerIcon}
                       src={RenameOwnerIcon}
                       onClick={this.onShow('EditOwner', row)}
                     />
-                    <img
+                    <Img
                       alt="Replace owner"
                       className={classes.replaceOwnerIcon}
                       src={ReplaceOwnerIcon}
                       onClick={this.onShow('ReplaceOwner', row)}
                     />
-                    <img
+                    <Img
                       alt="Remove owner"
                       className={classes.removeOwnerIcon}
                       src={RemoveOwnerIcon}
@@ -144,7 +144,8 @@ class ManageOwners extends React.Component<Props, State> {
                   </Row>
                 </TableCell>
               </TableRow>
-            ))}
+            ))
+            }
           </Table>
         </Block>
         <Hairline />

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -1,7 +1,5 @@
 // @flow
-import {
+import { lg } from '~/theme/variables'
-  sm, xs, md, lg, border,
-} from '~/theme/variables'
 
 export const styles = () => ({
   title: {

src/routes/safe/components/Settings/index.jsx

@@ -7,6 +7,8 @@ import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Col from '~/components/layout/Col'
 import Row from '~/components/layout/Row'
+import Span from '~/components/layout/Span'
+import Img from '~/components/layout/Img'
 import RemoveSafeModal from './RemoveSafeModal'
 import Paragraph from '~/components/layout/Paragraph'
 import Hairline from '~/components/layout/Hairline'
@@ -83,10 +85,10 @@ class Settings extends React.Component<Props, State> {
           </Col>
           <Col xs={6} end="sm">
             <Paragraph noMargin size="md" color="error" onClick={this.onShow('RemoveSafe')}>
-              <Paragraph noMargin className={cn(classes.links, classes.removeSafeText)}>
+              <Span className={cn(classes.links, classes.removeSafeText)}>
                 Remove Safe
-              </Paragraph>
+              </Span>
-              <img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
+              <Img alt="Trash Icon" className={classes.removeSafeIcon} src={RemoveSafeIcon} />
             </Paragraph>
             <RemoveSafeModal
               onClose={this.onHide('RemoveSafe')}