Tokens: refactor the side panel as a function component (aragon#1046)

* TokenPanelContent: move to a function component
* UpdateTokenPanel: add more warnings
* Tokens: add warning if amount field is too small or has too much precision

apps/finance/app/src/lib/math-utils.js

@@ -74,7 +74,7 @@ export function fromDecimals(num, decimals, { truncate = true } = {}) {
  */
 export function toDecimals(num, decimals, { truncate = true } = {}) {
   const [whole, dec] = splitDecimalNumber(num)
-  if (!whole && !dec) {
+  if (!whole && (!dec || !decimals)) {
     return '0'
   }
 

apps/token-manager/app/src/App.js

@@ -1,12 +1,11 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import BN from 'bn.js'
 import {
   Button,
   GU,
   Header,
   IconPlus,
-  SidePanel,
   SyncIndicator,
   Tag,
   textStyle,
@@ -15,7 +14,7 @@ import {
 } from '@aragon/ui'
 import { useAragonApi } from '@aragon/api-react'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
-import TokenPanelContent from './components/Panels/TokenPanelContent'
+import UpdateTokenPanel from './components/UpdateTokenPanel/UpdateTokenPanel'
 import EmptyState from './screens/EmptyState'
 import Holders from './screens/Holders'
 import { addressesEqual } from './web3-utils'
@@ -179,28 +178,21 @@ class App extends React.PureComponent {
           </React.Fragment>
         )}
 
-        <SidePanel
-          title={
-            assignTokensConfig.mode === 'assign'
-              ? 'Add tokens'
-              : 'Remove tokens'
-          }
-          opened={sidepanelOpened}
-          onClose={this.handleSidepanelClose}
-          onTransitionEnd={this.handleSidepanelTransitionEnd}
-        >
-          {appStateReady && (
-            <TokenPanelContent
-              opened={sidepanelOpened}
-              tokenDecimals={numData.tokenDecimals}
-              tokenDecimalsBase={tokenDecimalsBase}
-              onUpdateTokens={this.handleUpdateTokens}
-              getHolderBalance={this.getHolderBalance}
-              maxAccountTokens={maxAccountTokens}
-              {...assignTokensConfig}
-            />
-          )}
-        </SidePanel>
+        {appStateReady && (
+          <UpdateTokenPanel
+            getHolderBalance={this.getHolderBalance}
+            holderAddress={assignTokensConfig.holderAddress}
+            maxAccountTokens={maxAccountTokens}
+            mode={assignTokensConfig.mode}
+            onClose={this.handleSidepanelClose}
+            onTransitionEnd={this.handleSidepanelTransitionEnd}
+            onUpdateTokens={this.handleUpdateTokens}
+            opened={sidepanelOpened}
+            tokenDecimals={numData.tokenDecimals}
+            tokenDecimalsBase={tokenDecimalsBase}
+            tokenSymbol={tokenSymbol}
+          />
+        )}
       </IdentityProvider>
     )
   }