Finance, Token Manager: fix panels

apps/finance/app/src/components/NewTransfer/Deposit.js

@@ -63,6 +63,12 @@ class Deposit extends React.Component {
   state = {
     ...initialState,
   }
+  componentWillReceiveProps({ opened }) {
+    if (!opened && this.props.opened) {
+      // Panel closing; reset state
+      this.setState({ ...initialState })
+    }
+  }
   handleAmountUpdate = event => {
     this.validateInputs({
       amount: {
@@ -250,10 +256,14 @@ class Deposit extends React.Component {
     const selectedTokenIsAddress = isAddress(selectedToken.value)
     const showTokenBadge = selectedTokenIsAddress && selectedToken.coerced
     const tokenBalanceMessage = selectedToken.data.userBalance
-      ? `You have ${fromDecimals(
-          selectedToken.data.userBalance,
-          selectedToken.data.decimals
-        )} ${selectedToken.data.symbol} available`
+      ? `You have ${
+          selectedToken.data.userBalance === '0'
+            ? 'no'
+            : fromDecimals(
+                selectedToken.data.userBalance,
+                selectedToken.data.decimals
+              )
+        } ${selectedToken.data.symbol} available`
       : ''
 
     const ethSelected =

apps/finance/app/src/components/NewTransfer/PanelContent.js

@@ -15,18 +15,19 @@ class PanelContent extends React.Component {
     onDeposit: () => {},
     proxyAddress: null,
   }
+
   state = {
     ...initialState,
   }
 
   componentWillReceiveProps({ opened }) {
-    if (!opened && this.props.opened) {
-      // Panel closed: reset the state
+    if (opened && !this.props.opened) {
+      // Reset the state on the panel re-opening, to avoid flickering when it's still closing
       this.setState({ ...initialState })
     }
   }
 
-  handleSelect = screenIndex => {
+  handleChange = screenIndex => {
     this.setState({ screenIndex })
   }
 
@@ -39,12 +40,13 @@ class PanelContent extends React.Component {
           <TabBar
             items={['Deposit', 'Withdrawal']}
             selected={screenIndex}
-            onSelect={this.handleSelect}
+            onChange={this.handleChange}
           />
         </TabBarWrapper>
 
         {screenIndex === 0 && (
           <Deposit
+            opened={opened}
             tokens={tokens}
             proxyAddress={proxyAddress}
             onDeposit={onDeposit}

apps/finance/app/src/components/NewTransfer/Withdrawal.js

@@ -40,7 +40,19 @@ class Withdrawal extends React.Component {
   state = {
     ...initialState,
   }
-
+  _recipientInput = React.createRef()
+  componentDidMount() {
+    // setTimeout is needed as a small hack to wait until the input is
+    // on-screen before we call focus
+    this._recipientInput.current &&
+      setTimeout(() => this._recipientInput.current.focus(), 0)
+  }
+  componentWillReceiveProps({ opened }) {
+    if (!opened && this.props.opened) {
+      // Panel closing; reset state
+      this.setState({ ...initialState })
+    }
+  }
   nonZeroTokens() {
     return this.props.tokens.filter(({ amount }) => amount > 0)
   }
@@ -127,7 +139,7 @@ class Withdrawal extends React.Component {
         <h1>{title}</h1>
         <Field label="Recipient (must be a valid Ethereum address)">
           <TextInput
-            ref={recipient => (this.recipientInput = recipient)}
+            ref={this._recipientInput}
             onChange={this.handleRecipientUpdate}
             pattern={
               // Allow spaces to be trimmable

apps/token-manager/app/src/components/Panels/AssignVotePanelContent.js

@@ -29,11 +29,13 @@ class AssignVotePanelContent extends React.Component {
   state = {
     ...initialState,
   }
+  _holderInput = React.createRef()
   componentWillReceiveProps({ opened, mode, holderAddress }) {
     if (opened && !this.props.opened) {
       // setTimeout is needed as a small hack to wait until the input is
       // on-screen before we call focus
-      this.holderInput && setTimeout(() => this.holderInput.focus(), 0)
+      this._holderInput.current &&
+        setTimeout(() => this._holderInput.current.focus(), 0)
 
       // Upadte holder address from the props
       this.updateHolderAddress(mode, holderAddress)
@@ -149,7 +151,7 @@ class AssignVotePanelContent extends React.Component {
             `}
           >
             <TextInput
-              ref={element => (this.holderInput = element)}
+              ref={this._holderInput}
               value={holderField.value}
               onChange={this.handleHolderChange}
               wide