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,63 +22,57 @@ type SelectFieldProps = {
 }
 
 type SelectedTokenProps = {
-  token?: Token,
+  tokenAddress?: string,
   classes: Object,
+  tokens: List<Token>,
 }
 
-const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
-  <MenuItem className={classes.container}>
-    {token ? (
-      <>
-        <ListItemIcon className={classes.tokenImage}>
-          <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
-        </ListItemIcon>
-        <ListItemText
-          className={classes.tokenData}
-          primary={token.name}
-          secondary={`${formatAmount(token.balance)} ${token.symbol}`}
-        />
-      </>
-    ) : (
-      <Paragraph color="disabled" size="lg" weight="light" style={{ opacity: 0.5 }}>
-        Select an asset*
-      </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])
+const SelectedToken = ({ tokenAddress, tokens, classes }: SelectedTokenProps) => {
+  const token = tokens.find(({ address }) => address === tokenAddress)
 
   return (
-    <Field
-      name="token"
-      component={SelectField}
-      classes={{ selectMenu: classes.selectMenu }}
-      validate={required}
-      renderValue={(token) => <SelectedTokenStyled token={token} />}
-      initialValue={initialToken}
-      displayEmpty
-    >
-      {tokens.map((token) => (
-        <MenuItem key={token.address} value={token}>
-          <ListItemIcon>
+    <MenuItem className={classes.container}>
+      {token ? (
+        <>
+          <ListItemIcon className={classes.tokenImage}>
             <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
           </ListItemIcon>
-          <ListItemText primary={token.name} secondary={`${formatAmount(token.balance)} ${token.symbol}`} />
-        </MenuItem>
-      ))}
-    </Field>
+          <ListItemText
+            className={classes.tokenData}
+            primary={token.name}
+            secondary={`${formatAmount(token.balance)} ${token.symbol}`}
+          />
+        </>
+      ) : (
+        <Paragraph color="disabled" size="lg" weight="light" style={{ opacity: 0.5 }}>
+          Select an asset*
+        </Paragraph>
+      )}
+    </MenuItem>
   )
 }
 
+const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
+
+const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => (
+  <Field
+    name="token"
+    component={SelectField}
+    classes={{ selectMenu: classes.selectMenu }}
+    validate={required}
+    renderValue={(tokenAddress) => <SelectedTokenStyled tokenAddress={tokenAddress} tokens={tokens} />}
+    initialValue={initialValue}
+    displayEmpty
+  >
+    {tokens.map((token) => (
+      <MenuItem key={token.address} value={token.address}>
+        <ListItemIcon>
+          <Img src={token.logoUri} height={28} alt={token.name} onError={setImageToPlaceholder} />
+        </ListItemIcon>
+        <ListItemText primary={token.name} secondary={`${formatAmount(token.balance)} ${token.symbol}`} />
+      </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

@@ -47,7 +47,7 @@ const ReviewRemoveOwner = ({
   <>
     <Row align="center" grow className={classes.heading}>
       <Paragraph weight="bolder" className={classes.manage} noMargin>
-          Replace owner
+        Replace owner
       </Paragraph>
       <Paragraph className={classes.annotation}>2 of 2</Paragraph>
       <IconButton onClick={onClose} disableRipple>
@@ -61,12 +61,12 @@ const ReviewRemoveOwner = ({
           <Block className={classes.details}>
             <Block margin="lg">
               <Paragraph size="lg" color="primary" noMargin>
-                  Details
+                Details
               </Paragraph>
             </Block>
             <Block margin="lg">
               <Paragraph size="sm" color="disabled" noMargin>
-                  Safe name
+                Safe name
               </Paragraph>
               <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
                 {safeName}
@@ -74,7 +74,7 @@ const ReviewRemoveOwner = ({
             </Block>
             <Block margin="lg">
               <Paragraph size="sm" color="disabled" noMargin>
-                  Any transaction requires the confirmation of:
+                Any transaction requires the confirmation of:
               </Paragraph>
               <Paragraph size="lg" color="primary" noMargin weight="bolder" className={classes.name}>
                 {`${threshold} out of ${owners.size} owner(s)`}
@@ -90,34 +90,35 @@ const ReviewRemoveOwner = ({
           </Row>
           <Hairline />
           {owners.map(
-            (owner) => owner.address !== ownerAddress && (
-              <React.Fragment key={owner.address}>
-                <Row className={classes.owner}>
-                  <Col xs={1} align="center">
-                    <Identicon address={owner.address} diameter={32} />
-                  </Col>
-                  <Col xs={11}>
-                    <Block className={classNames(classes.name, classes.userName)}>
-                      <Paragraph weight="bolder" size="lg" noMargin>
-                        {owner.name}
-                      </Paragraph>
-                      <Block justify="center" className={classes.user}>
-                        <Paragraph size="md" color="disabled" className={classes.address} noMargin>
-                          {owner.address}
+            (owner) =>
+              owner.address !== ownerAddress && (
+                <React.Fragment key={owner.address}>
+                  <Row className={classes.owner}>
+                    <Col xs={1} align="center">
+                      <Identicon address={owner.address} diameter={32} />
+                    </Col>
+                    <Col xs={11}>
+                      <Block className={classNames(classes.name, classes.userName)}>
+                        <Paragraph weight="bolder" size="lg" noMargin>
+                          {owner.name}
                         </Paragraph>
-                        <CopyBtn content={owner.address} />
-                        <EtherscanBtn type="address" value={owner.address} />
+                        <Block justify="center" className={classes.user}>
+                          <Paragraph size="md" color="disabled" className={classes.address} noMargin>
+                            {owner.address}
+                          </Paragraph>
+                          <CopyBtn content={owner.address} />
+                          <EtherscanBtn type="address" value={owner.address} />
+                        </Block>
                       </Block>
-                    </Block>
-                  </Col>
-                </Row>
-                <Hairline />
-              </React.Fragment>
-            ),
+                    </Col>
+                  </Row>
+                  <Hairline />
+                </React.Fragment>
+              ),
           )}
           <Row className={classes.info} align="center">
             <Paragraph weight="bolder" noMargin color="primary" size="md">
-                REMOVING OWNER &darr;
+              REMOVING OWNER &darr;
             </Paragraph>
           </Row>
           <Hairline />
@@ -142,7 +143,7 @@ const ReviewRemoveOwner = ({
           </Row>
           <Row className={classes.info} align="center">
             <Paragraph weight="bolder" noMargin color="primary" size="md">
-                ADDING NEW OWNER &darr;
+              ADDING NEW OWNER &darr;
             </Paragraph>
           </Row>
           <Hairline />
@@ -170,9 +171,13 @@ 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
+        Back
       </Button>
       <Button
         type="submit"
@@ -183,7 +188,7 @@ const ReviewRemoveOwner = ({
         color="primary"
         testId={REPLACE_OWNER_SUBMIT_BTN_TEST_ID}
       >
-          Submit
+        Submit
       </Button>
     </Row>
   </>