IPFS hash to link and creator address

app/src/App.js

@@ -32,8 +32,6 @@ const App = React.memo(() => {
 
   const { appearance } = useGuiStyle()
 
-  console.log('appearance', appearance)
-
   const handleBack = useCallback(() => {
     selectDelay(-1)
   }, [selectDelay])

app/src/components/DelayCard.js

@@ -32,7 +32,7 @@ const DelayCard = React.memo(({ delay, selectDelay }) => {
       </div>
       <Description>
         <span css="font-weight: bold;">#{delay.scriptId}:</span>{' '}
-        <ScriptText disabled={false} text={delay.executionDescription} />
+        <ScriptText text={delay.executionDescription} disabled />
       </Description>
       <div>
         {status === STATUS.PENDING_EXECUTION ? (

app/src/components/ScriptText.js

@@ -1,6 +1,8 @@
 import React from 'react'
+import { Link } from '@aragon/ui'
 import PropTypes from 'prop-types'
 import { transformAddresses } from '../web3-utils'
+import { transformIPFSHash, generateURI } from '../lib/ipfs-utils'
 import AutoLink from './AutoLink'
 import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
 
@@ -34,7 +36,20 @@ const ScriptText = React.memo(
                     <LocalIdentityBadge badgeOnly={disabled} compact entity={part} />
                   </span>
                 ) : (
-                  <span key={index}>{part}</span>
+                  <React.Fragment key={index}>
+                    {transformIPFSHash(part, (word, isIpfsHash, i) => {
+                      if (isIpfsHash) {
+                        const ipfsUrl = generateURI(word)
+                        return (
+                          <Link href={ipfsUrl} key={i} disabled>
+                            {ipfsUrl}{' '}
+                          </Link>
+                        )
+                      }
+
+                      return <span key={i}>{word}</span>
+                    })}
+                  </React.Fragment>
                 )
               )}
               <br />

app/src/lib/ipfs-utils.js

@@ -0,0 +1,14 @@
+const SPLIT_IPFS_REGEX = /(Qm[a-zA-Z0-9]{44})/
+const TEST_IPFS_REGEX = /(Qm[a-zA-Z0-9]{44})/
+
+const IPFS_ENDPOINT = 'https://ipfs.eth.aragon.network/ipfs'
+
+export function transformIPFSHash(str, callback) {
+  return str
+    .split(SPLIT_IPFS_REGEX)
+    .map((part, index) => callback(part, TEST_IPFS_REGEX.test(part), index))
+}
+
+export function generateURI(hash) {
+  return `${IPFS_ENDPOINT}/${hash}`
+}

app/src/screens/DelayDetail.js

@@ -1,6 +1,16 @@
 import React from 'react'
-import { Bar, Box, BackButton, Countdown, GU, Split, textStyle, useTheme } from '@aragon/ui'
-
+import {
+  Bar,
+  Box,
+  BackButton,
+  Countdown,
+  GU,
+  Split,
+  textStyle,
+  useLayout,
+  useTheme,
+} from '@aragon/ui'
+import LocalIdentityBadge from '../components/LocalIdentityBadge/LocalIdentityBadge'
 import DelayActions from '../components/DelayActions'
 import ScriptText from '../components/ScriptText'
 import LocalLabelAppBadge from '../components/LocalIdentityBadge/LocalLabelAppBadge'
@@ -11,8 +21,9 @@ import { formatTime, toHours } from '../lib/math-utils'
 
 const DelayDetail = React.memo(({ delay, onBack, onDelayAction }) => {
   const theme = useTheme()
+  const { layoutName } = useLayout()
 
-  const { executionTargetData, executionDescription } = delay
+  const { executionTargetData, executionDescription, creator } = delay
 
   return (
     <React.Fragment>
@@ -43,22 +54,51 @@ const DelayDetail = React.memo(({ delay, onBack, onDelayAction }) => {
               >
                 <span css="font-weight: bold;">Delay #{delay.scriptId}</span>
               </h1>
-              <div>
-                <h2
-                  css={`
-                    ${textStyle('label2')};
-                    color: ${theme.surfaceContentSecondary};
-                    margin-bottom: ${2 * GU}px;
-                  `}
-                >
-                  Description
-                </h2>
-                <div
-                  css={`
-                    ${textStyle('body2')};
-                  `}
-                >
-                  <ScriptText text={executionDescription} />
+              <div
+                css={`
+                  display: grid;
+                  grid-template-columns: ${layoutName === 'large'
+                    ? '1fr minmax(300px, auto)'
+                    : 'auto'};
+                  grid-gap: ${layoutName === 'large' ? 5 * GU : 2.5 * GU}px;
+                `}
+              >
+                <div>
+                  <h2
+                    css={`
+                      ${textStyle('label2')};
+                      color: ${theme.surfaceContentSecondary};
+                      margin-bottom: ${2 * GU}px;
+                    `}
+                  >
+                    Description
+                  </h2>
+                  <div
+                    css={`
+                      ${textStyle('body2')};
+                    `}
+                  >
+                    <ScriptText text={executionDescription} />
+                  </div>
+                </div>
+                <div>
+                  <h2
+                    css={`
+                      ${textStyle('label2')};
+                      color: ${theme.surfaceContentSecondary};
+                      margin-bottom: ${2 * GU}px;
+                    `}
+                  >
+                    Created By
+                  </h2>
+                  <div
+                    css={`
+                      display: flex;
+                      align-items: flex-start;
+                    `}
+                  >
+                    <LocalIdentityBadge entity={creator} />
+                  </div>
                 </div>
               </div>
               <DelayActions

app/src/script.js

@@ -13,7 +13,7 @@ async function initialize() {
 
 async function createStore() {
   return app.store(
-    (state, { event, returnValues, blockNumber }) => {
+    (state, { event, returnValues, blockNumber, transactionHash }) => {
       const nextState = {
         ...state,
       }
@@ -29,7 +29,7 @@ async function createStore() {
           case 'ExecutionDelaySet':
             return newExecutionDelay(nextState, returnValues)
           case 'DelayedScriptStored':
-            return newDelayedScript(nextState, returnValues, blockNumber)
+            return newDelayedScript(nextState, returnValues, blockNumber, transactionHash)
           case 'ExecutionPaused':
             return updateDelayedScript(nextState, returnValues)
           case 'ExecutionResumed':
@@ -72,18 +72,20 @@ function initializeState() {
 
 async function newExecutionDelay(state, { executionDelay }) {
   app.identify(`Delay ${formatTime(executionDelay)}`)
-
   return { ...state, executionDelay }
 }
 
-async function newDelayedScript(state, { scriptId }, blockNumber) {
+async function newDelayedScript(state, { scriptId }, blockNumber, transactionHash) {
   const { delayedScripts = [] } = state
 
+  const { from: creator } = await app.web3Eth('getTransactionReceipt', transactionHash).toPromise()
+
   const { timestamp } = await getBlock(blockNumber) // TODO: Move to getDelayedScript (keep in mind that updateScript also calls this function)
   const delayedScript = {
     ...(await getDelayedScript(scriptId, blockNumber)),
     timeSubmitted: marshallDate(timestamp),
     totalTimePaused: 0,
+    creator,
   }
 
   return {
@@ -185,7 +187,8 @@ async function getDelayedScript(scriptId) {
  */
 function mergeScripts(oldScript, newScript) {
   // We need to keep the time the script was submitted and the total time it was paused for progress bar
-  const { timeSubmitted, totalTimePaused, executionTime: oldExecutionTime } = oldScript || {}
+  const { timeSubmitted, totalTimePaused, executionTime: oldExecutionTime, creator } =
+    oldScript || {}
 
   // If resumed => timePaused > 0 else timePaused = 0
   const timePaused = newScript.executionTime - oldExecutionTime
@@ -194,6 +197,7 @@ function mergeScripts(oldScript, newScript) {
     ...newScript,
     timeSubmitted,
     totalTimePaused: totalTimePaused + timePaused,
+    creator,
   }
 }
 

app/src/web3-utils.js

@@ -12,9 +12,7 @@ export const EMPTY_ADDRESS = '0x0000000000000000000000000000000000000000'
 export function transformAddresses(str, callback) {
   return str
     .split(ETH_ADDRESS_SPLIT_REGEX)
-    .map((part, index) =>
-      callback(part, ETH_ADDRESS_TEST_REGEX.test(part), index)
-    )
+    .map((part, index) => callback(part, ETH_ADDRESS_TEST_REGEX.test(part), index))
 }
 
 /**