Tokens: refactor the side panel as a function component

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

@@ -1,21 +1,21 @@
-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,
   useLayout,
   useTheme,
+  useThemeMode,
 } 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 +179,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>
     )
   }
@@ -211,5 +204,10 @@ export default () => {
   const theme = useTheme()
   const { layoutName } = useLayout()
 
+  const themeMode = useThemeMode()
+  useEffect(() => {
+    // themeMode.set('dark')
+  }, [themeMode])
+
   return <App api={api} layoutName={layoutName} theme={theme} {...appState} />
 }