From 2599446e5a37bbf777f26d343e1f01b5ff7c3bf1 Mon Sep 17 00:00:00 2001
From: Pierre Bertet <hello@pierre.world>
Date: Sat, 13 Oct 2018 00:43:23 +0100
Subject: [PATCH] Display the token name and symbol (fixes #273)

---
 apps/token-manager/app/src/App.js             | 14 +++++--
 .../app/src/components/SideBar.js             | 14 ++++++-
 .../app/src/components/TokenBadge.js          | 40 +++++++++++++++++++
 apps/token-manager/app/src/screens/Holders.js |  4 ++
 apps/token-manager/app/src/token-settings.js  |  3 +-
 5 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 apps/token-manager/app/src/components/TokenBadge.js

diff --git a/apps/token-manager/app/src/App.js b/apps/token-manager/app/src/App.js
index 3567904a2e..2d503d3f3f 100644
--- a/apps/token-manager/app/src/App.js
+++ b/apps/token-manager/app/src/App.js
@@ -8,6 +8,7 @@ import {
   Button,
   Badge,
   SidePanel,
+  font,
   observe,
 } from '@aragon/ui'
 import EmptyState from './screens/EmptyState'
@@ -64,6 +65,7 @@ class App extends React.Component {
   render() {
     const {
       tokenSymbol,
+      tokenName,
       tokenSupply,
       tokenDecimalsBase,
       tokenTransfersEnabled,
@@ -82,7 +84,7 @@ class App extends React.Component {
             <AppBar
               title={
                 <Title>
-                  <span>Token</span>
+                  <TitleLabel>Token</TitleLabel>
                   {tokenSymbol && <Badge.App>{tokenSymbol}</Badge.App>}
                 </Title>
               }
@@ -103,7 +105,9 @@ class App extends React.Component {
                   holders={holders}
                   onAssignTokens={this.handleLaunchAssignTokens}
                   tokenDecimalsBase={tokenDecimalsBase}
+                  tokenName={tokenName}
                   tokenSupply={tokenSupply}
+                  tokenSymbol={tokenSymbol}
                   tokenTransfersEnabled={tokenTransfersEnabled}
                   userAccount={userAccount}
                 />
@@ -133,9 +137,11 @@ class App extends React.Component {
 const Title = styled.span`
   display: flex;
   align-items: center;
-  & > span:first-child {
-    margin-right: 10px;
-  }
+`
+
+const TitleLabel = styled.span`
+  margin-right: 10px;
+  ${font({ size: 'xxlarge' })};
 `
 
 export default observe(
diff --git a/apps/token-manager/app/src/components/SideBar.js b/apps/token-manager/app/src/components/SideBar.js
index 0ee025c953..8e34e0276d 100644
--- a/apps/token-manager/app/src/components/SideBar.js
+++ b/apps/token-manager/app/src/components/SideBar.js
@@ -2,6 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import { Text, theme } from '@aragon/ui'
 import { formatBalance, stakesPercentages } from '../utils'
+import TokenBadge from './TokenBadge'
 
 const DISTRIBUTION_ITEMS_MAX = 7
 const DISTRIBUTION_COLORS = [
@@ -38,7 +39,13 @@ class SideBar extends React.Component {
     return tokenTransfersEnabled ? 'Yes' : 'No'
   }
   render() {
-    const { holders, tokenDecimalsBase, tokenSupply } = this.props
+    const {
+      holders,
+      tokenDecimalsBase,
+      tokenName,
+      tokenSupply,
+      tokenSymbol,
+    } = this.props
     const stakes = displayedStakes(holders, tokenSupply)
     return (
       <Main>
@@ -59,6 +66,11 @@ class SideBar extends React.Component {
               <span>:</span>
               <strong>{this.transferableLabel()}</strong>
             </InfoRow>
+            <InfoRow>
+              <span>Token</span>
+              <span>:</span>
+              <TokenBadge name={tokenName} symbol={tokenSymbol} />
+            </InfoRow>
           </ul>
         </Part>
         <Part>
diff --git a/apps/token-manager/app/src/components/TokenBadge.js b/apps/token-manager/app/src/components/TokenBadge.js
new file mode 100644
index 0000000000..14c443b393
--- /dev/null
+++ b/apps/token-manager/app/src/components/TokenBadge.js
@@ -0,0 +1,40 @@
+import React from 'react'
+import styled from 'styled-components'
+
+class TokenBadge extends React.PureComponent {
+  render() {
+    const { name, symbol } = this.props
+    return (
+      <Main>
+        <Label>
+          <Icon src={`https://chasing-coins.com/coin/logo/${symbol}`} />
+          {name === symbol ? name : `${name} (${symbol})`}
+        </Label>
+      </Main>
+    )
+  }
+}
+
+const Main = styled.div`
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  background: #daeaef;
+  border-radius: 3px;
+  cursor: default;
+`
+
+const Label = styled.span`
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  white-space: nowrap;
+  font-size: 15px;
+`
+
+const Icon = styled.img.attrs({ alt: '', width: '16', height: '16' })`
+  margin-right: 10px;
+`
+
+export default TokenBadge
diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
index 275a02a26b..e76431b9f4 100644
--- a/apps/token-manager/app/src/screens/Holders.js
+++ b/apps/token-manager/app/src/screens/Holders.js
@@ -13,7 +13,9 @@ class Holders extends React.Component {
       holders,
       onAssignTokens,
       tokenDecimalsBase,
+      tokenName,
       tokenSupply,
+      tokenSymbol,
       tokenTransfersEnabled,
       userAccount,
     } = this.props
@@ -55,7 +57,9 @@ class Holders extends React.Component {
           groupMode={groupMode}
           holders={holders}
           tokenDecimalsBase={tokenDecimalsBase}
+          tokenName={tokenName}
           tokenSupply={tokenSupply}
+          tokenSymbol={tokenSymbol}
           tokenTransfersEnabled={tokenTransfersEnabled}
         />
       </TwoPanels>
diff --git a/apps/token-manager/app/src/token-settings.js b/apps/token-manager/app/src/token-settings.js
index 28c1842d80..b0f3533723 100644
--- a/apps/token-manager/app/src/token-settings.js
+++ b/apps/token-manager/app/src/token-settings.js
@@ -1,6 +1,7 @@
 const tokenSettings = [
   ['decimals', 'tokenDecimals', 'number'],
-  ['symbol', 'tokenSymbol'],
+  ['symbol', 'tokenSymbol', 'string'],
+  ['name', 'tokenName', 'string'],
   ['totalSupply', 'tokenSupply', 'number'],
   ['transfersEnabled', 'tokenTransfersEnabled', 'bool'],
 ]