Refactor send funds token select field to surpress mui warnings

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

@@ -1,5 +1,5 @@
 // @flow
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import MenuItem from '@material-ui/core/MenuItem'
@@ -22,11 +22,15 @@ type SelectFieldProps = {
 }
 
 type SelectedTokenProps = {
-  token?: Token,
+  tokenAddress?: string,
   classes: Object,
+  tokens: List<Token>,
 }
 
-const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
+const SelectedToken = ({ tokenAddress, tokens, classes }: SelectedTokenProps) => {
+  const token = tokens.find(({ address }) => address === tokenAddress)
+
+  return (
     <MenuItem className={classes.container}>
       {token ? (
         <>
@@ -45,32 +49,23 @@ const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
         </Paragraph>
       )}
     </MenuItem>
-)
+  )
+}
 
 const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
 
-type InitialTokenType = Token | string
-
-const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => {
-  const [initialToken, setInitialToken] = useState<InitialTokenType>('')
-
-  useEffect(() => {
-    const selectedToken = tokens.find((token) => token.name === initialValue)
-    setInitialToken(selectedToken || '')
-  }, [initialValue])
-
-  return (
+const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => (
   <Field
     name="token"
     component={SelectField}
     classes={{ selectMenu: classes.selectMenu }}
     validate={required}
-      renderValue={(token) => <SelectedTokenStyled token={token} />}
-      initialValue={initialToken}
+    renderValue={(tokenAddress) => <SelectedTokenStyled tokenAddress={tokenAddress} tokens={tokens} />}
+    initialValue={initialValue}
     displayEmpty
   >
     {tokens.map((token) => (
-        <MenuItem key={token.address} value={token}>
+      <MenuItem key={token.address} value={token.address}>
         <ListItemIcon>
           <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
         </ListItemIcon>
@@ -78,7 +73,6 @@ const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) =
       </MenuItem>
     ))}
   </Field>
-  )
-}
+)
 
 export default withStyles(selectStyles)(TokenSelectField)

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

@@ -96,7 +96,8 @@ const SendFunds = ({
         {(...args) => {
           const formState = args[2]
           const mutators = args[3]
-          const { token } = formState.values
+          const { token: tokenAddress } = formState.values
+          const selectedTokenRecord = tokens.find((token) => token.address === tokenAddress)
 
           const handleScan = (value) => {
             let scannedAddress = value
@@ -170,14 +171,14 @@ const SendFunds = ({
                         required,
                         mustBeFloat,
                         greaterThan(0),
-                        maxValue(token && token.balance),
+                        maxValue(selectedTokenRecord && selectedTokenRecord.balance),
                       )}
                       placeholder="Amount*"
                       text="Amount*"
                       className={classes.addressInput}
                       inputAdornment={
-                        token && {
-                          endAdornment: <InputAdornment position="end">{token.symbol}</InputAdornment>,
+                        selectedTokenRecord && {
+                          endAdornment: <InputAdornment position="end">{selectedTokenRecord.symbol}</InputAdornment>,
                         }
                       }
                     />

src/routes/safe/components/Balances/dataFetcher.js

@@ -18,7 +18,7 @@ export type BalanceRow = SortRow<BalanceData>
 
 export const getBalanceData = (activeTokens: List<Token>): List<BalanceRow> => {
   const rows = activeTokens.map((token: Token) => ({
-    [BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri },
+    [BALANCE_TABLE_ASSET_ID]: { name: token.name, logoUri: token.logoUri, address: token.address },
     [buildOrderFieldFrom(BALANCE_TABLE_ASSET_ID)]: token.name,
     [BALANCE_TABLE_BALANCE_ID]: `${formatAmount(token.balance)} ${token.symbol}`,
     [buildOrderFieldFrom(BALANCE_TABLE_BALANCE_ID)]: Number(token.balance),

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

@@ -71,11 +71,11 @@ class Balances extends React.Component<Props, State> {
     this.setState(() => ({ [`show${action}`]: false }))
   }
 
-  showSendFunds = (token: Token) => {
+  showSendFunds = (tokenAddress: string) => {
     this.setState({
       sendFunds: {
         isOpen: true,
-        selectedToken: token,
+        selectedToken: tokenAddress,
       },
     })
   }
@@ -174,7 +174,7 @@ class Balances extends React.Component<Props, State> {
                       size="small"
                       color="primary"
                       className={classes.send}
-                      onClick={() => this.showSendFunds(row.asset.name)}
+                      onClick={() => this.showSendFunds(row.asset.address)}
                       testId="balance-send-btn"
                     >
                       <CallMade alt="Send Transaction" className={classNames(classes.leftIcon, classes.iconSmall)} />

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/Review/index.jsx

@@ -90,7 +90,8 @@ const ReviewRemoveOwner = ({
           </Row>
           <Hairline />
           {owners.map(
-            (owner) => owner.address !== ownerAddress && (
+            (owner) =>
+              owner.address !== ownerAddress && (
                 <React.Fragment key={owner.address}>
                   <Row className={classes.owner}>
                     <Col xs={1} align="center">
@@ -170,6 +171,10 @@ const ReviewRemoveOwner = ({
       </Row>
     </Block>
     <Hairline />
+    <Row>
+      <Paragraph>Yooo</Paragraph>
+    </Row>
+    <Hairline />
     <Row align="center" className={classes.buttonRow}>
       <Button minWidth={140} minHeight={42} onClick={onClickBack}>
         Back