Tokens: new style (aragon#918)

ConsiderItDone · Sep 2, 2019 · 9e8897c · 9e8897c
1 parent 5b283e1
commit 9e8897c
Show file tree

Hide file tree

Showing 21 changed files with 1,721 additions and 1,824 deletions.
diff --git a/apps/token-manager/app/now.json b/apps/token-manager/app/now.json
@@ -0,0 +1,10 @@
+{
+  "version": 2,
+  "public": true,
+  "scope": "aragon",
+  "name": "token-manager",
+  "alias": "nightly-token-manager.aragon.org",
+  "builds": [
+    { "src": "package.json", "use": "@now/static-build", "config": { "distDir": "build" } }
+  ]
+}
diff --git a/apps/token-manager/app/package.json b/apps/token-manager/app/package.json
@@ -6,7 +6,7 @@
   "dependencies": {
     "@aragon/api": "^2.0.0-beta.4",
     "@aragon/api-react": "^2.0.0-beta.4",
-    "@aragon/ui": "^0.40.1",
+    "@aragon/ui": "^1.0.0-alpha.11",
     "bn.js": "^4.11.6",
     "prop-types": "^15.7.2",
     "react": "^16.8.4",
@@ -45,9 +45,10 @@
     "lint": "eslint ./src",
     "start": "npm run sync-assets && npm run watch:script & parcel serve index.html -p 3003 --out-dir build/",
     "build": "npm run sync-assets && npm run build:script && parcel build index.html --out-dir build/ --public-url \".\"",
-    "watch:script": "parcel watch src/script.js --out-dir build/ --no-hmr",
     "build:script": "parcel build src/script.js --out-dir build/",
-    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build"
+    "watch:script": "parcel watch src/script.js --out-dir build/ --no-hmr",
+    "sync-assets": "copy-aragon-ui-assets -n aragon-ui ./build && rsync -rtu ./public/ ./build",
+    "now-build": "npm run build"
   },
   "browserslist": [
     ">2%",

diff --git a/apps/token-manager/app/src/App.js b/apps/token-manager/app/src/App.js
@@ -1,15 +1,24 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import BN from 'bn.js'
-import { Badge, Main, SidePanel, SyncIndicator } from '@aragon/ui'
+import {
+  Button,
+  GU,
+  Header,
+  IconPlus,
+  SidePanel,
+  SyncIndicator,
+  Tag,
+  textStyle,
+  useLayout,
+  useTheme,
+} from '@aragon/ui'
 import { useAragonApi } from '@aragon/api-react'
+import { IdentityProvider } from './components/IdentityManager/IdentityManager'
+import TokenPanelContent from './components/Panels/TokenPanelContent'
 import EmptyState from './screens/EmptyState'
 import Holders from './screens/Holders'
-import AssignVotePanelContent from './components/Panels/AssignVotePanelContent'
-import AssignTokensIcon from './components/AssignTokensIcon'
-import AppLayout from './components/AppLayout'
 import { addressesEqual } from './web3-utils'
-import { IdentityProvider } from './components/IdentityManager/IdentityManager'
 
 const initialAssignTokensConfig = {
   mode: null,
@@ -86,100 +95,123 @@ class App extends React.PureComponent {
   render() {
     const {
       appStateReady,
+      connectedAccount,
       groupMode,
       holders,
       isSyncing,
+      layoutName,
       maxAccountTokens,
       numData,
+      theme,
       tokenAddress,
       tokenDecimalsBase,
       tokenName,
       tokenSupply,
       tokenSymbol,
       tokenTransfersEnabled,
-      connectedAccount,
-      requestMenu,
     } = this.props
+
     const { assignTokensConfig, sidepanelOpened } = this.state
 
     return (
-      <Main assetsUrl="./aragon-ui">
-        <div css="min-width: 320px">
-          <IdentityProvider
-            onResolve={this.handleResolveLocalIdentity}
-            onShowLocalIdentityModal={this.handleShowLocalIdentityModal}
-          >
-            <SyncIndicator visible={isSyncing} />
-            <AppLayout
-              title="Tokens"
-              afterTitle={tokenSymbol && <Badge.App>{tokenSymbol}</Badge.App>}
-              onMenuOpen={requestMenu}
-              mainButton={{
-                label: 'Add tokens',
-                icon: <AssignTokensIcon />,
-                onClick: this.handleLaunchAssignTokensNoHolder,
-              }}
-              smallViewPadding={0}
-            >
-              {appStateReady && holders.length > 0 ? (
-                <Holders
-                  holders={holders}
-                  groupMode={groupMode}
-                  maxAccountTokens={maxAccountTokens}
-                  tokenAddress={tokenAddress}
-                  tokenDecimalsBase={tokenDecimalsBase}
-                  tokenName={tokenName}
-                  tokenSupply={tokenSupply}
-                  tokenSymbol={tokenSymbol}
-                  tokenTransfersEnabled={tokenTransfersEnabled}
-                  userAccount={connectedAccount}
-                  onAssignTokens={this.handleLaunchAssignTokens}
-                  onRemoveTokens={this.handleLaunchRemoveTokens}
+      <IdentityProvider
+        onResolve={this.handleResolveLocalIdentity}
+        onShowLocalIdentityModal={this.handleShowLocalIdentityModal}
+      >
+        <SyncIndicator visible={isSyncing} />
+
+        {!isSyncing && appStateReady && holders.length === 0 && (
+          <EmptyState onAssignHolder={this.handleLaunchAssignTokensNoHolder} />
+        )}
+        {appStateReady && holders.length && (
+          <React.Fragment>
+            <Header
+              primary={
+                <div
+                  css={`
+                    display: flex;
+                    align-items: center;
+                  `}
+                >
+                  <h1
+                    css={`
+                      ${textStyle(
+                        layoutName === 'small' ? 'title3' : 'title2'
+                      )};
+                      color: ${theme.content};
+                      margin-right: ${1 * GU}px;
+                    `}
+                  >
+                    Tokens
+                  </h1>
+                  {tokenSymbol && <Tag>{tokenSymbol}</Tag>}
+                </div>
+              }
+              secondary={
+                <Button
+                  mode="strong"
+                  onClick={this.handleLaunchAssignTokensNoHolder}
+                  label="Add tokens"
+                  icon={<IconPlus />}
+                  display={layoutName === 'small' ? 'icon' : 'label'}
                 />
-              ) : (
-                !isSyncing && (
-                  <EmptyState
-                    onActivate={this.handleLaunchAssignTokensNoHolder}
-                  />
-                )
-              )}
-            </AppLayout>
-            <SidePanel
-              title={
-                assignTokensConfig.mode === 'assign'
-                  ? 'Add tokens'
-                  : 'Remove tokens'
               }
+            />
+            <Holders
+              holders={holders}
+              groupMode={groupMode}
+              maxAccountTokens={maxAccountTokens}
+              tokenAddress={tokenAddress}
+              tokenDecimalsBase={tokenDecimalsBase}
+              tokenName={tokenName}
+              tokenSupply={tokenSupply}
+              tokenSymbol={tokenSymbol}
+              tokenTransfersEnabled={tokenTransfersEnabled}
+              userAccount={connectedAccount}
+              onAssignTokens={this.handleLaunchAssignTokens}
+              onRemoveTokens={this.handleLaunchRemoveTokens}
+            />
+          </React.Fragment>
+        )}
+
+        <SidePanel
+          title={
+            assignTokensConfig.mode === 'assign'
+              ? 'Add tokens'
+              : 'Remove tokens'
+          }
+          opened={sidepanelOpened}
+          onClose={this.handleSidepanelClose}
+          onTransitionEnd={this.handleSidepanelTransitionEnd}
+        >
+          {appStateReady && (
+            <TokenPanelContent
               opened={sidepanelOpened}
-              onClose={this.handleSidepanelClose}
-              onTransitionEnd={this.handleSidepanelTransitionEnd}
-            >
-              {appStateReady && (
-                <AssignVotePanelContent
-                  opened={sidepanelOpened}
-                  tokenDecimals={numData.tokenDecimals}
-                  tokenDecimalsBase={tokenDecimalsBase}
-                  onUpdateTokens={this.handleUpdateTokens}
-                  getHolderBalance={this.getHolderBalance}
-                  maxAccountTokens={maxAccountTokens}
-                  {...assignTokensConfig}
-                />
-              )}
-            </SidePanel>
-          </IdentityProvider>
-        </div>
-      </Main>
+              tokenDecimals={numData.tokenDecimals}
+              tokenDecimalsBase={tokenDecimalsBase}
+              onUpdateTokens={this.handleUpdateTokens}
+              getHolderBalance={this.getHolderBalance}
+              maxAccountTokens={maxAccountTokens}
+              {...assignTokensConfig}
+            />
+          )}
+        </SidePanel>
+      </IdentityProvider>
     )
   }
 }
 
 export default () => {
-  const { api, appState, connectedAccount, requestMenu } = useAragonApi()
+  const { api, appState, connectedAccount } = useAragonApi()
+  const theme = useTheme()
+  const { layoutName } = useLayout()
+
   return (
     <App
       api={api}
       connectedAccount={connectedAccount}
-      requestMenu={requestMenu}
+      layoutName={layoutName}
+      theme={theme}
       {...appState}
     />
   )

diff --git a/apps/token-manager/app/src/components/AppLayout.js b/apps/token-manager/app/src/components/AppLayout.js
diff --git a/apps/token-manager/app/src/components/AssignTokensIcon.js b/apps/token-manager/app/src/components/AssignTokensIcon.js