Better Radspec descriptions (#523)

aragon · Dec 18, 2018 · 59808f4 · 59808f4
1 parent e48119b
commit 59808f4
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 69 deletions.
diff --git a/src/Wrapper.js b/src/Wrapper.js
@@ -126,10 +126,10 @@ class Wrapper extends React.Component {
       appsStatus,
       banner,
       connected,
-      locator: { instanceId, params },
+      daoAddress,
+      locator,
       onRequestAppsReload,
       onRequestEnable,
-      daoAddress,
       transactionBag,
       walletNetwork,
       walletProviderId,
@@ -144,25 +144,28 @@ class Wrapper extends React.Component {
           <MenuPanel
             apps={apps.filter(app => app.hasWebApp)}
             appsStatus={appsStatus}
-            activeInstanceId={instanceId}
+            activeInstanceId={locator.instanceId}
             connected={connected}
+            daoAddress={daoAddress}
             notificationsObservable={wrapper && wrapper.notifications}
             onOpenApp={this.openApp}
             onClearAllNotifications={this.handleNotificationsClearAll}
             onOpenNotification={this.handleNotificationNavigation}
             onRequestAppsReload={onRequestAppsReload}
-            daoAddress={daoAddress}
           />
-          <AppScreen>{this.renderApp(instanceId, params)}</AppScreen>
+          <AppScreen>
+            {this.renderApp(locator.instanceId, locator.params)}
+          </AppScreen>
         </Container>
         <SignerPanel
-          walletWeb3={walletWeb3}
-          walletNetwork={walletNetwork}
-          walletProviderId={walletProviderId}
-          transactionBag={transactionBag}
-          apps={apps}
           account={account}
+          apps={apps}
+          locator={locator}
           onRequestEnable={onRequestEnable}
+          transactionBag={transactionBag}
+          walletNetwork={walletNetwork}
+          walletProviderId={walletProviderId}
+          walletWeb3={walletWeb3}
         />
       </Main>
     )

diff --git a/src/components/Identicon.js b/src/components/Identicon.js
@@ -19,7 +19,7 @@ class Identicon extends React.Component {
     return (
       <Main size={BLOCKIES_SQUARES * scale}>
         <Blockies
-          seed={address}
+          seed={address.toLowerCase()}
           size={BLOCKIES_SQUARES}
           scale={scale * PX_RATIO}
         />

diff --git a/src/components/IdentityBadge.js b/src/components/IdentityBadge.js
@@ -1,33 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import Blockies from 'react-blockies'
+import Identicon from './Identicon'
 import { isAddress, shortenAddress } from '../web3-utils'
 
-const IDENTICON_SCALE = 3
-const IDENTICON_SQUARES = 8
-const IDENTICON_SIZE = IDENTICON_SQUARES * IDENTICON_SCALE
-const PX_RATIO = typeof devicePixelRatio === 'undefined' ? 2 : devicePixelRatio
-
 class IdentityBadge extends React.PureComponent {
   static propTypes = {
+    className: PropTypes.string,
     entity: PropTypes.string.isRequired,
+    shorten: PropTypes.bool,
+  }
+  static defaultProps = {
+    shorten: true,
   }
 
   render() {
-    const { entity, shorten = true } = this.props
+    const { className, entity, shorten } = this.props
     const address = isAddress(entity) ? entity : null
     return (
-      <Main title={address} onClick={this.handleClick}>
-        {address && (
-          <Identicon>
-            <Blockies
-              seed={address}
-              size={IDENTICON_SQUARES}
-              scale={IDENTICON_SCALE * PX_RATIO}
-            />
-          </Identicon>
-        )}
+      <Main title={address} onClick={this.handleClick} className={className}>
+        {address && <Identicon address={address} />}
         <Label>{address && shorten ? shortenAddress(address) : entity}</Label>
       </Main>
     )
@@ -36,38 +28,20 @@ class IdentityBadge extends React.PureComponent {
 
 const Main = styled.div`
   overflow: hidden;
-  display: flex;
+  height: auto;
+  display: inline-flex;
+  vertical-align: middle;
   align-items: center;
-  height: ${IDENTICON_SIZE}px;
   background: #daeaef;
   border-radius: 3px;
   cursor: default;
 `
 
-const Identicon = styled.div`
-  position: relative;
-  width: ${IDENTICON_SIZE}px;
-  height: ${IDENTICON_SIZE}px;
-  transform: scale(${1 / PX_RATIO});
-  transform-origin: 0 0;
-  &:after {
-    content: '';
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #fff;
-    opacity: 0.3;
-  }
-`
-
 const Label = styled.span`
   padding: 0 8px;
   white-space: nowrap;
   font-size: 15px;
-  ${Identicon} + & {
+  :not(:first-child) {
     padding: 0 8px 0 5px;
   }
 `

diff --git a/src/components/SignerPanel/ActionPathsContent.js b/src/components/SignerPanel/ActionPathsContent.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Info, RadioList } from '@aragon/ui'
-import providerString from '../../provider-strings'
+import { Info, RadioList, SafeLink } from '@aragon/ui'
 import SignerButton from './SignerButton'
 import AddressLink from './AddressLink'
+import IdentityBadge from '../IdentityBadge'
+import providerString from '../../provider-strings'
 
 const RADIO_ITEM_TITLE_LENGTH = 30
 
@@ -25,13 +26,57 @@ class ActionPathsContent extends React.Component {
       pretransaction
     )
   }
-  renderDescription(showPaths, { description, name, to }) {
+  renderDescription(
+    showPaths,
+    { description, name, to, annotatedDescription }
+  ) {
     return (
       <React.Fragment>
-        <p>This transaction will {showPaths && 'eventually'} perform:</p>
-        <p style={{ margin: '10px 0' }}>
-          {description ? `"${description}"` : 'an action'}
-        </p>
+        <p>This transaction will {showPaths && 'eventually'} perform</p>
+        <div style={{ margin: '10px 0 10px 15px' }}>
+          {annotatedDescription
+            ? annotatedDescription.map(({ type, value }, index) => {
+                if (type === 'address') {
+                  return (
+                    <IdentityBadge
+                      key={index}
+                      entity={value}
+                      fontSize="small"
+                      style={{ marginRight: '4px' }}
+                    />
+                  )
+                } else if (type === 'app') {
+                  return (
+                    <SafeLink
+                      key={index}
+                      href={`/#/${
+                        this.props.locator.dao
+                      }/permissions/?params=app.${value.proxyAddress}`}
+                      target="_blank"
+                      style={{ marginRight: '2px' }}
+                    >
+                      {value.name}
+                    </SafeLink>
+                  )
+                } else if (type === 'role') {
+                  return (
+                    <span
+                      key={index}
+                      style={{ marginRight: '4px', fontStyle: 'italic' }}
+                    >
+                      {value.name}
+                    </span>
+                  )
+                } else if (type === 'text') {
+                  return (
+                    <span key={index} style={{ marginRight: '4px' }}>
+                      {value}
+                    </span>
+                  )
+                }
+              })
+            : description || 'an action'}
+        </div>
         <p>
           {' on '}
           <AddressLink to={to}>{name}</AddressLink>.

diff --git a/src/components/SignerPanel/ConfirmTransaction.js b/src/components/SignerPanel/ConfirmTransaction.js
@@ -39,16 +39,17 @@ class ConfirmTransaction extends React.Component {
       hasAccount,
       hasWeb3,
       intent,
+      locator,
       networkType,
       onClose,
+      onRequestEnable,
       onSign,
       paths,
       pretransaction,
       signError,
       signingEnabled,
       walletNetworkType,
       walletProviderId,
-      onRequestEnable,
     } = this.props
 
     if (!hasWeb3) {
@@ -110,10 +111,11 @@ class ConfirmTransaction extends React.Component {
       <ActionPathsContent
         intent={intent}
         direct={direct}
+        locator={locator}
+        onSign={onSign}
         paths={paths}
         pretransaction={pretransaction}
         signingEnabled={signingEnabled}
-        onSign={onSign}
         walletProviderId={walletProviderId}
       />
     ) : (

diff --git a/src/components/SignerPanel/SignerPanel.js b/src/components/SignerPanel/SignerPanel.js
@@ -83,19 +83,20 @@ class SignerPanel extends React.Component {
   }
 
   transactionIntent({ path, transaction = {} }) {
-    // If the path includes forwarders, the intent is always the last node
     if (path.length > 1) {
-      const { description, name, to } = path[path.length - 1]
-      return { description, name, to, transaction }
+      // If the path includes forwarders, the intent is always the last node
+      const lastNode = path[path.length - 1]
+      const { description, name, to, annotatedDescription } = lastNode
+      return { annotatedDescription, description, name, to, transaction }
     }
 
     // Direct path
     const { apps } = this.props
-    const { description, to } = transaction
+    const { annotatedDescription, description, to } = transaction
     const toApp = apps.find(app => addressesEqual(app.proxyAddress, to))
     const name = (toApp && toApp.name) || ''
 
-    return { description, name, to, transaction }
+    return { annotatedDescription, description, name, to, transaction }
   }
 
   async signTransaction(transaction, intent) {
@@ -154,11 +155,12 @@ class SignerPanel extends React.Component {
 
   render() {
     const {
-      walletWeb3,
-      walletNetwork,
-      walletProviderId,
       account,
+      locator,
       onRequestEnable,
+      walletNetwork,
+      walletProviderId,
+      walletWeb3,
     } = this.props
 
     const {
@@ -202,15 +204,16 @@ class SignerPanel extends React.Component {
                           hasAccount={Boolean(account)}
                           hasWeb3={Boolean(walletWeb3)}
                           intent={intent}
+                          locator={locator}
+                          networkType={network.type}
                           onClose={this.handleSignerClose}
+                          onRequestEnable={onRequestEnable}
                           onSign={this.handleSign}
                           paths={actionPaths}
                           pretransaction={pretransaction}
                           signingEnabled={status === STATUS_CONFIRMING}
-                          networkType={network.type}
                           walletNetworkType={walletNetwork}
                           walletProviderId={walletProviderId}
-                          onRequestEnable={onRequestEnable}
                         />
                       </Screen>
                     </ScreenWrapper>