prepopulate send funds modal value with clicked token

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

@@ -17,6 +17,7 @@ type Props = {
   safeName: string,
   ethBalance: string,
   tokens: List<Token>,
+  selectedToken: string,
 }
 type ActiveScreen = 'chooseTxType' | 'sendFunds'
 
@@ -28,7 +29,7 @@ const styles = () => ({
 })
 
 const Send = ({
-  onClose, isOpen, classes, safeAddress, etherScanLink, safeName, ethBalance, tokens,
+  onClose, isOpen, classes, safeAddress, etherScanLink, safeName, ethBalance, tokens, selectedToken,
 }: Props) => {
   const [activeScreen, setActiveScreen] = useState<ActiveScreen>('sendFunds')
   const smallerModalSize = activeScreen === 'chooseTxType'
@@ -60,6 +61,7 @@ const Send = ({
             safeName={safeName}
             ethBalance={ethBalance}
             tokens={tokens}
+            selectedToken={selectedToken}
           />
         )}
       </React.Fragment>

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

@@ -17,6 +17,7 @@ import { selectedTokenStyles, selectStyles } from './style'
 type SelectFieldProps = {
   tokens: List<Token>,
   classes: Object,
+  initialValue: string,
 }
 
 type SelectedTokenProps = {
@@ -47,14 +48,14 @@ const SelectedToken = ({ token, classes }: SelectedTokenProps) => (
 
 const SelectedTokenStyled = withStyles(selectedTokenStyles)(SelectedToken)
 
-const TokenSelectField = ({ tokens, classes }: SelectFieldProps) => (
+const TokenSelectField = ({ tokens, classes, initialValue }: SelectFieldProps) => (
   <Field
     name="token"
     component={SelectField}
     classes={{ selectMenu: classes.selectMenu }}
     validate={required}
     renderValue={token => <SelectedTokenStyled token={token} />}
-    initialValue=""
+    initialValue={tokens.find(token => token.name === initialValue) || ''}
     displayEmpty
   >
     {tokens.map(token => (

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

@@ -36,11 +36,12 @@ type Props = {
   etherScanLink: string,
   safeName: string,
   ethBalance: string,
+  selectedToken: string,
   tokens: List<Token>,
 }
 
 const SendFunds = ({
-  classes, onClose, safeAddress, etherScanLink, safeName, ethBalance, tokens,
+  classes, onClose, safeAddress, etherScanLink, safeName, ethBalance, tokens, selectedToken,
 }: Props) => {
   const handleSubmit = () => {}
   const formMutators = {
@@ -98,7 +99,7 @@ const SendFunds = ({
                 </Row>
                 <Row margin="sm">
                   <Col>
-                    <TokenSelectField tokens={tokens} />
+                    <TokenSelectField tokens={tokens} initialValue={selectedToken} />
                   </Col>
                 </Row>
                 <Row margin="xs">

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

@@ -29,7 +29,7 @@ type State = {
   hideZero: boolean,
   showToken: boolean,
   showReceive: boolean,
-  showSend: boolean,
+  sendFunds: Object,
 }
 
 type Props = {
@@ -49,7 +49,10 @@ class Balances extends React.Component<Props, State> {
   state = {
     hideZero: false,
     showToken: false,
-    showSend: false,
+    sendFunds: {
+      isOpen: false,
+      selectedToken: undefined,
+    },
     showReceive: false,
   }
 
@@ -61,6 +64,24 @@ class Balances extends React.Component<Props, State> {
     this.setState(() => ({ [`show${action}`]: false }))
   }
 
+  showSendFunds = (token: Token) => {
+    this.setState({
+      sendFunds: {
+        isOpen: true,
+        selectedToken: token,
+      },
+    })
+  }
+
+  hideSendFunds = () => {
+    this.setState({
+      sendFunds: {
+        isOpen: false,
+        selectedToken: undefined,
+      },
+    })
+  } 
+
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     const { checked } = e.target
 
@@ -69,7 +90,7 @@ class Balances extends React.Component<Props, State> {
 
   render() {
     const {
-      hideZero, showToken, showReceive, showSend,
+      hideZero, showToken, showReceive, sendFunds,
     } = this.state
     const {
       classes, granted, tokens, safeAddress, activeTokens, safeName, etherScanLink, ethBalance,
@@ -138,7 +159,7 @@ class Balances extends React.Component<Props, State> {
                       size="small"
                       color="secondary"
                       className={classes.send}
-                      onClick={this.onShow('Send')}
+                      onClick={() => this.showSendFunds(row.asset.name)}
                     >
                       <CallMade className={classNames(classes.leftIcon, classes.iconSmall)} />
                         Send
@@ -161,13 +182,14 @@ class Balances extends React.Component<Props, State> {
           }
         </Table>
         <SendModal
-          onClose={this.onHide('Send')}
-          isOpen={showSend}
+          onClose={this.hideSendFunds}
+          isOpen={sendFunds.isOpen}
           etherScanLink={etherScanLink}
           safeAddress={safeAddress}
           safeName={safeName}
           ethBalance={ethBalance}
           tokens={activeTokens}
+          selectedToken={sendFunds.selectedToken} 
         />
         <Modal
           title="Receive Tokens"