Feat/external txs

package.json

@@ -26,7 +26,7 @@
   "dependencies": {
     "@aragon/templates-tokens": "^1.2.1",
     "@aragon/ui": "^1.0.0-alpha.15",
-    "@aragon/wrapper": "^5.0.0-rc.14",
+    "@aragon/wrapper": "^5.0.0-rc.15",
     "@babel/polyfill": "^7.0.0",
     "@sentry/browser": "^5.5.0",
     "@ungap/event-target": "^0.1.0",

src/components/SignerPanel/ActionPathsContent.js

@@ -13,6 +13,8 @@ class ActionPathsContent extends React.Component {
   static propTypes = {
     dao: PropTypes.string.isRequired,
     direct: PropTypes.bool.isRequired,
+    installed: PropTypes.bool.isRequired,
+    external: PropTypes.bool.isRequired,
     intent: PropTypes.object.isRequired,
     paths: PropTypes.array.isRequired,
     pretransaction: PropTypes.object,
@@ -173,8 +175,10 @@ class ActionPathsContent extends React.Component {
   }
   render() {
     const {
+      installed,
       intent,
       direct,
+      external,
       paths,
       pretransaction,
       signingEnabled,
@@ -241,6 +245,33 @@ class ActionPathsContent extends React.Component {
         <Info mode="description" title="Action to be triggered">
           {this.renderDescription(showPaths, intent)}
         </Info>
+        {external && (
+          <div
+            css={`
+              margin-top: ${3 * GU}px;
+            `}
+          >
+            <Info mode="warning" title="Warning">
+              {installed ? (
+                `Be aware that this is an attempt to execute a transaction on
+                 another app that is installed in this organization. You may
+                 want to double check that app’s functionality before
+                 proceeding.`
+              ) : (
+                <span>
+                  Be aware that this is an attempt to execute a transaction on
+                  an <strong css="font-weight: 800">external contract</strong>{' '}
+                  that has not been reviewed or audited. This means that it
+                  might behave unexpectedly. Please{' '}
+                  <strong css="font-weight: 800">
+                    be sure you trust this contract
+                  </strong>{' '}
+                  before proceeding.
+                </span>
+              )}
+            </Info>
+          </div>
+        )}
         {pretransaction && (
           <Info
             title="Two transactions required"

src/components/SignerPanel/ConfirmTransaction.js

@@ -6,6 +6,8 @@ import ImpossibleAction from './ImpossibleAction'
 const ConfirmTransaction = ({
   direct,
   intent,
+  installed,
+  external,
   dao,
   onClose,
   onSign,
@@ -20,9 +22,11 @@ const ConfirmTransaction = ({
 
   return possible ? (
     <ActionPathsContent
-      intent={intent}
       direct={direct}
       dao={dao}
+      external={external}
+      installed={installed}
+      intent={intent}
       onSign={onSign}
       paths={paths}
       pretransaction={pretransaction}
@@ -36,7 +40,9 @@ const ConfirmTransaction = ({
 
 ConfirmTransaction.propTypes = {
   direct: PropTypes.bool.isRequired,
+  installed: PropTypes.bool.isRequired,
   intent: PropTypes.object.isRequired,
+  external: PropTypes.bool.isRequired,
   dao: PropTypes.string,
   onClose: PropTypes.func.isRequired,
   onSign: PropTypes.func.isRequired,

src/components/SignerPanel/SignerPanel.js

@@ -107,14 +107,19 @@ class SignerPanel extends React.PureComponent {
   // This is a temporary method to reshape the transaction bag
   // to the future format we expect from Aragon.js
   stateFromTransactionBag(bag) {
-    const { path, transaction } = bag
+    const { apps } = this.props
+    const { external, path, transaction } = bag
     const decoratedPaths = path.map(path => ({
       ...path,
-      name: getAppName(this.props.apps, path.to),
+      name: getAppName(apps, path.to),
     }))
 
     return {
       intent: (transaction && this.transactionIntent(bag)) || {},
+      external: Boolean(external),
+      installed: apps.some(
+        ({ proxyAddress }) => proxyAddress === transaction.to
+      ),
       directPath: decoratedPaths.length === 1,
       actionPaths: decoratedPaths.length ? [decoratedPaths] : [],
       pretransaction: (transaction && transaction.pretransaction) || null,
@@ -297,6 +302,8 @@ class SignerPanel extends React.PureComponent {
       actionPaths,
       pretransaction,
       status,
+      external,
+      installed,
     } = this.state
 
     const isTransaction = isTxSignerStatus(status)
@@ -344,6 +351,8 @@ class SignerPanel extends React.PureComponent {
                             <ConfirmTransaction
                               dao={dao}
                               direct={directPath}
+                              external={external}
+                              installed={installed}
                               intent={intent}
                               onClose={this.handleSignerClose}
                               onSign={this.handleSign}