Feat/message signing

src/App.js

@@ -54,6 +54,7 @@ class App extends React.Component {
     ],
     showDeprecatedBanner: false,
     transactionBag: null,
+    signatureBag: null,
     walletNetwork: '',
     walletWeb3: null,
     wrapper: null,
@@ -243,6 +244,10 @@ class App extends React.Component {
         log('transaction bag', transactionBag)
         this.setState({ transactionBag })
       },
+      onSignatures: signatureBag => {
+        log('signature bag', signatureBag)
+        this.setState({ signatureBag })
+      },
       onIdentityIntent: async identityIntent => {
         // set the state for modifying a specific address identity
         let name = null
@@ -336,6 +341,7 @@ class App extends React.Component {
       selectorNetworks,
       showDeprecatedBanner,
       transactionBag,
+      signatureBag,
       walletNetwork,
       walletProviderId,
       walletWeb3,
@@ -392,6 +398,7 @@ class App extends React.Component {
                   onRequestEnable={this.handleRequestEnable}
                   permissionsLoading={permissionsLoading}
                   transactionBag={transactionBag}
+                  signatureBag={signatureBag}
                   walletNetwork={walletNetwork}
                   walletWeb3={walletWeb3}
                   wrapper={wrapper}

src/Wrapper.js

@@ -46,6 +46,7 @@ class Wrapper extends React.PureComponent {
     permissionsLoading: PropTypes.bool.isRequired,
     autoClosingPanel: PropTypes.bool.isRequired,
     transactionBag: PropTypes.object,
+    signatureBag: PropTypes.object,
     walletNetwork: PropTypes.string,
     walletProviderId: PropTypes.string,
     walletWeb3: PropTypes.object,
@@ -57,6 +58,7 @@ class Wrapper extends React.PureComponent {
     banner: false,
     connected: false,
     transactionBag: null,
+    signatureBag: null,
     walletNetwork: '',
     walletProviderId: '',
     walletWeb3: null,
@@ -197,6 +199,7 @@ class Wrapper extends React.PureComponent {
       onRequestAppsReload,
       onRequestEnable,
       transactionBag,
+      signatureBag,
       walletNetwork,
       walletProviderId,
       walletWeb3,
@@ -259,6 +262,7 @@ class Wrapper extends React.PureComponent {
           locator={locator}
           onRequestEnable={onRequestEnable}
           transactionBag={transactionBag}
+          signatureBag={signatureBag}
           walletNetwork={walletNetwork}
           walletProviderId={walletProviderId}
           walletWeb3={walletWeb3}

src/aragonjs-wrapper.js

@@ -222,14 +222,22 @@ export const pollNetwork = pollEvery((provider, onNetwork) => {
 // Subscribe to aragon.js observables
 const subscribe = (
   wrapper,
-  { onApps, onPermissions, onForwarders, onTransaction, onIdentityIntent },
+  {
+    onApps,
+    onPermissions,
+    onForwarders,
+    onTransaction,
+    onSignatures,
+    onIdentityIntent,
+  },
   { ipfsConf }
 ) => {
   const {
     apps,
     permissions,
     forwarders,
     transactions,
+    signatures,
     identityIntents,
   } = wrapper
 
@@ -251,6 +259,7 @@ const subscribe = (
     forwarders: forwarders.subscribe(onForwarders),
     identityIntents: identityIntents.subscribe(onIdentityIntent),
     transactions: transactions.subscribe(onTransaction),
+    signatures: signatures.subscribe(onSignatures),
     workers: apps.subscribe(apps => {
       // Asynchronously launch webworkers for each new app that has a background
       // script defined
@@ -344,6 +353,7 @@ const initWrapper = async (
     onPermissions = noop,
     onForwarders = noop,
     onTransaction = noop,
+    onSignatures = noop,
     onDaoAddress = noop,
     onWeb3 = noop,
     onIdentityIntent = noop,
@@ -405,6 +415,7 @@ const initWrapper = async (
       onPermissions,
       onForwarders,
       onTransaction,
+      onSignatures,
       onIdentityIntent,
     },
     { ipfsConf }

src/components/SignerPanel/ConfirmMsgSign.js

@@ -0,0 +1,84 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { isElectron, noop } from '../../utils'
+
+import { AppType } from '../../prop-types'
+import { NoWeb3Provider, AccountLocked } from './Web3Errors'
+import { ImpossibleContent } from './ImpossibleContent'
+import SignMsgContent from './SignMsgContent'
+
+class ConfirmMsgSign extends React.Component {
+  static propTypes = {
+    account: PropTypes.string,
+    apps: PropTypes.arrayOf(AppType).isRequired,
+    hasAccount: PropTypes.bool.isRequired,
+    hasWeb3: PropTypes.bool.isRequired,
+    intent: PropTypes.object,
+    onClose: PropTypes.func.isRequired,
+    onRequestEnable: PropTypes.func,
+    onSign: PropTypes.func.isRequired,
+    signError: PropTypes.string,
+    signingEnabled: PropTypes.bool.isRequired,
+    walletProviderId: PropTypes.string.isRequired,
+  }
+
+  static defaultProps = {
+    account: '',
+    intent: {},
+    onRequestEnable: noop,
+  }
+  render() {
+    const {
+      account,
+      apps,
+      intent,
+      hasAccount,
+      hasWeb3,
+      onClose,
+      onRequestEnable,
+      onSign,
+      signError,
+      signingEnabled,
+      walletProviderId,
+    } = this.props
+
+    if (!hasWeb3) {
+      return (
+        <NoWeb3Provider
+          intent={intent}
+          isElectron={isElectron()}
+          onClose={onClose}
+        />
+      )
+    }
+
+    if (!hasAccount) {
+      return (
+        <AccountLocked
+          intent={intent}
+          onClose={onClose}
+          onRequestEnable={onRequestEnable}
+          walletProviderId={walletProviderId}
+        />
+      )
+    }
+
+    return !signError ? (
+      <SignMsgContent
+        account={account}
+        apps={apps}
+        intent={intent}
+        onSign={onSign}
+        signingEnabled={signingEnabled}
+      />
+    ) : (
+      <ImpossibleContent
+        error={!!signError}
+        intent={intent}
+        onClose={onClose}
+      />
+    )
+  }
+}
+
+export default ConfirmMsgSign

src/components/SignerPanel/ConfirmTransaction.js

@@ -1,12 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { Info, SafeLink, theme } from '@aragon/ui'
 import { isElectron, noop } from '../../utils'
-import providerString from '../../provider-strings'
 import ActionPathsContent from './ActionPathsContent'
-import SignerButton from './SignerButton'
-import AddressLink from './AddressLink'
+import { NoWeb3Provider, AccountLocked, WrongNetwork } from './Web3Errors'
+import { ImpossibleContent } from './ImpossibleContent'
 
 class ConfirmTransaction extends React.Component {
   static propTypes = {
@@ -51,76 +48,33 @@ class ConfirmTransaction extends React.Component {
     } = this.props
 
     if (!hasWeb3) {
-      if (isElectron()) {
-        return (
-          <Web3ProviderError
-            intent={intent}
-            onClose={onClose}
-            neededText="You need to have Frame installed and enabled"
-            actionText={
-              <span>
-                Please install and enable{' '}
-                <SafeLink href="https://frame.sh/" target="_blank">
-                  Frame
-                </SafeLink>
-                .
-              </span>
-            }
-          />
-        )
-      }
       return (
-        <Web3ProviderError
+        <NoWeb3Provider
           intent={intent}
+          isElectron={isElectron()}
           onClose={onClose}
-          neededText="You need to have an Ethereum provider installed and enabled"
-          actionText={
-            <span>
-              Please install and enable{' '}
-              <SafeLink href="https://metamask.io/" target="_blank">
-                Metamask
-              </SafeLink>
-              .
-            </span>
-          }
         />
       )
     }
 
     if (!hasAccount) {
       return (
-        <Web3ProviderError
+        <AccountLocked
           intent={intent}
           onClose={onClose}
-          neededText={`You need to unlock and enable ${providerString(
-            'your Ethereum provider',
-            walletProviderId
-          )}`}
-          actionText={
-            <span>
-              Please unlock and{' '}
-              <ButtonLink onClick={onRequestEnable}>enable</ButtonLink>{' '}
-              {providerString('your Ethereum provider', walletProviderId)}.
-            </span>
-          }
+          onRequestEnable={onRequestEnable}
+          walletProviderId={walletProviderId}
         />
       )
     }
 
     if (walletNetworkType !== networkType) {
       return (
-        <Web3ProviderError
+        <WrongNetwork
           intent={intent}
           onClose={onClose}
-          neededText={`
-            You need to be connected to the ${networkType} network
-          `}
-          actionText={`
-            Please connect ${providerString(
-              'your Ethereum provider',
-              walletProviderId
-            )} to the ${networkType} network.
-          `}
+          networkType={networkType}
+          walletProviderId={walletProviderId}
         />
       )
     }
@@ -145,76 +99,4 @@ class ConfirmTransaction extends React.Component {
   }
 }
 
-const ImpossibleContent = ({
-  error,
-  intent: { description, name, to },
-  onClose,
-}) => (
-  <React.Fragment>
-    <Info.Permissions title="Action impossible">
-      The action {description && `“${description}”`} failed to execute
-      {name && (
-        <React.Fragment>
-          on <AddressLink to={to}>{name}</AddressLink>}
-        </React.Fragment>
-      )}
-      .{' '}
-      {error
-        ? 'An error occurred when we tried to find a path or send a transaction for this action.'
-        : 'You may not have the required permissions.'}
-    </Info.Permissions>
-    <SignerButton onClick={onClose}>Close</SignerButton>
-  </React.Fragment>
-)
-
-ImpossibleContent.propTypes = {
-  error: PropTypes.bool,
-  intent: PropTypes.object.isRequired,
-  onClose: PropTypes.func.isRequired,
-}
-
-const Web3ProviderError = ({
-  intent: { description, name, to },
-  onClose,
-  neededText = '',
-  actionText = '',
-}) => {
-  return (
-    <React.Fragment>
-      <Info.Action title="You can't perform any action">
-        {neededText} in order to perform{' '}
-        {description ? `"${description}"` : 'this action'}
-        {name && (
-          <React.Fragment>
-            on <AddressLink to={to}>{name}</AddressLink>
-          </React.Fragment>
-        )}
-        .<ActionMessage>{actionText}</ActionMessage>
-      </Info.Action>
-      <SignerButton onClick={onClose}>Close</SignerButton>
-    </React.Fragment>
-  )
-}
-
-Web3ProviderError.propTypes = {
-  actionText: PropTypes.node.isRequired,
-  intent: PropTypes.object.isRequired,
-  neededText: PropTypes.string.isRequired,
-  onClose: PropTypes.func.isRequired,
-}
-
-const ActionMessage = styled.p`
-  margin-top: 15px;
-`
-
-const ButtonLink = styled.button.attrs({ type: 'button' })`
-  padding: 0;
-  font-size: inherit;
-  text-decoration: underline;
-  color: ${theme.textPrimary};
-  cursor: pointer;
-  background: none;
-  border: 0;
-`
-
 export default ConfirmTransaction