fix token pre-population

package.json

@@ -68,6 +68,7 @@
     "@gnosis.pm/util-contracts": "2.0.1",
     "@material-ui/core": "^3.9.3",
     "@material-ui/icons": "^3.0.1",
+    "@welldone-software/why-did-you-render": "^3.0.9",
     "axios": "^0.18.0",
     "bignumber.js": "^8.1.1",
     "connected-react-router": "^6.3.1",

src/index.js

@@ -8,6 +8,12 @@ import { store } from '~/store'
 import loadSafesFromStorage from '~/routes/safe/store/actions/loadSafesFromStorage'
 import loadActiveTokens from '~/logic/tokens/store/actions/loadActiveTokens'
 
+if (process.env.NODE_ENV !== 'production') {
+  // eslint-disable-next-line
+  const whyDidYouRender = require('@welldone-software/why-did-you-render')
+  whyDidYouRender(React)
+}
+
 store.dispatch(loadActiveTokens())
 store.dispatch(loadSafesFromStorage())
 

src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.jsx

@@ -1,5 +1,5 @@
 // @flow
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -48,25 +48,36 @@ const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
 
 const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
 
-const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => (
+type InitialTokenType = Token | string
-  <Field
+
-    name="token"
+const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => {
-    component={SelectField}
+  const [initialToken, setInitialToken] = useState<InitialTokenType>('')
-    classes={{ selectMenu: classes.selectMenu }}
+
-    validate={required}
+  useEffect(() => {
-    renderValue={token => <SelectedTokenStyled token={token} />}
+    const selectedToken = tokens.find(token => token.name === initialValue)
-    initialValue={tokens.find(token => token.name === initialValue) || ''}
+    setInitialToken(selectedToken || '')
-    displayEmpty
+  }, [initialValue])
-  >
+
-    {tokens.map(token => (
+  return (
-      <MenuItem key={token.address} value={token}>
+    <Field
-        <ListItemIcon>
+      name="token"
-          <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
+      component={SelectField}
-        </ListItemIcon>
+      classes={{ selectMenu: classes.selectMenu }}
-        <ListItemText primary={token.name} secondary={`${token.balance} ${token.symbol}`} />
+      validate={required}
-      </MenuItem>
+      renderValue={token => <SelectedTokenStyled token={token} />}
-    ))}
+      initialValue={initialToken}
-  </Field>
+      displayEmpty
-)
+    >
+      {tokens.map(token => (
+        <MenuItem key={token.address} value={token}>
+          <ListItemIcon>
+            <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
+          </ListItemIcon>
+          <ListItemText primary={token.name} secondary={`${token.balance} ${token.symbol}`} />
+        </MenuItem>
+      ))}
+    </Field>
+  )
+}
 
 export default withStyles(selectStyles)(TokenSelectField)

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

@@ -80,7 +80,7 @@ class Balances extends React.Component<Props, State> {
         selectedToken: undefined,
       },
     })
-  } 
+  }
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     const { checked } = e.target
@@ -189,7 +189,7 @@ class Balances extends React.Component<Props, State> {
           safeName={safeName}
           ethBalance={ethBalance}
           tokens={activeTokens}
-          selectedToken={sendFunds.selectedToken} 
+          selectedToken={sendFunds.selectedToken}
         />
         <Modal
           title="Receive Tokens"

yarn.lock

@@ -2709,6 +2709,13 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@welldone-software/why-did-you-render@^3.0.9":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-3.0.9.tgz#c850001f9b94c5e930ddaa29251bb0ae5b78a295"
+  integrity sha512-iSv9vRHxAK1EckGFG6GPNpS25LM4PHbILUvYDziqDtqRMGjCkeVqd/R4KAnkvTk7+9W4CazZa9HwXDBRFC/LnQ==
+  dependencies:
+    lodash "^4"
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -11013,7 +11020,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@4.17.11, lodash@>4.17.4, "lodash@>=3.5 <5", lodash@^4.0.1, lodash@^4.1.0, lodash@^4.11.2, lodash@^4.15.0, lodash@^4.17.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+lodash@4.17.11, lodash@>4.17.4, "lodash@>=3.5 <5", lodash@^4, lodash@^4.0.1, lodash@^4.1.0, lodash@^4.11.2, lodash@^4.15.0, lodash@^4.17.1, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
@@ -13664,7 +13671,7 @@ react-event-listener@^0.6.2:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
-react-fast-compare@^2.0.2:
+react-fast-compare@^2.0.2, react-fast-compare@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
@@ -18364,6 +18371,14 @@ which@^1.2.14, which@^1.2.9, which@^1.3.0, which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+why-did-you-update@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/why-did-you-update/-/why-did-you-update-1.0.6.tgz#2e2c6a04291e715755ecdff1ac8272f721df6f04"
+  integrity sha512-XVrdHhdrPBDuSW8b/uH6DCb1/0984qv8KElpE8NZiRvWZX8nw49av577+ZyIrxSNesi6r2cQEhpxQTKFFHTj8A==
+  dependencies:
+    lodash "^4.17.11"
+    react-fast-compare "^2.0.3"
+
 wide-align@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"