From 59808f4c79bc6da4f6ce0bca5954aa2c82984edd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Iv=C3=A1n=20Cuende?= Date: Tue, 18 Dec 2018 18:28:56 +0000 Subject: [PATCH] Better Radspec descriptions (#523) --- src/Wrapper.js | 23 ++++---- src/components/Identicon.js | 2 +- src/components/IdentityBadge.js | 52 ++++------------ .../SignerPanel/ActionPathsContent.js | 59 ++++++++++++++++--- .../SignerPanel/ConfirmTransaction.js | 6 +- src/components/SignerPanel/SignerPanel.js | 23 ++++---- 6 files changed, 96 insertions(+), 69 deletions(-) diff --git a/src/Wrapper.js b/src/Wrapper.js index 837c1dbfe..7008bc957 100644 --- 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 { 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} /> - {this.renderApp(instanceId, params)} + + {this.renderApp(locator.instanceId, locator.params)} + ) diff --git a/src/components/Identicon.js b/src/components/Identicon.js index 7247ac4a6..a4f038c9b 100644 --- a/src/components/Identicon.js +++ b/src/components/Identicon.js @@ -19,7 +19,7 @@ class Identicon extends React.Component { return (
diff --git a/src/components/IdentityBadge.js b/src/components/IdentityBadge.js index 87d1ea982..b4c2554b9 100644 --- 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 ( -
- {address && ( - - - - )} +
+ {address && }
) @@ -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 index 4f8477895..147cdf916 100644 --- 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 ( -

This transaction will {showPaths && 'eventually'} perform:

-

- {description ? `"${description}"` : 'an action'} -

+

This transaction will {showPaths && 'eventually'} perform

+
+ {annotatedDescription + ? annotatedDescription.map(({ type, value }, index) => { + if (type === 'address') { + return ( + + ) + } else if (type === 'app') { + return ( + + {value.name} + + ) + } else if (type === 'role') { + return ( + + {value.name} + + ) + } else if (type === 'text') { + return ( + + {value} + + ) + } + }) + : description || 'an action'} +

{' on '} {name}. diff --git a/src/components/SignerPanel/ConfirmTransaction.js b/src/components/SignerPanel/ConfirmTransaction.js index 2ef098f4b..522d1d7c4 100644 --- a/src/components/SignerPanel/ConfirmTransaction.js +++ b/src/components/SignerPanel/ConfirmTransaction.js @@ -39,8 +39,10 @@ class ConfirmTransaction extends React.Component { hasAccount, hasWeb3, intent, + locator, networkType, onClose, + onRequestEnable, onSign, paths, pretransaction, @@ -48,7 +50,6 @@ class ConfirmTransaction extends React.Component { signingEnabled, walletNetworkType, walletProviderId, - onRequestEnable, } = this.props if (!hasWeb3) { @@ -110,10 +111,11 @@ class ConfirmTransaction extends React.Component { ) : ( diff --git a/src/components/SignerPanel/SignerPanel.js b/src/components/SignerPanel/SignerPanel.js index 43185a659..3e3333e95 100644 --- 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} />