1Hive · fabriziovigevani · Oct 7, 2019 · Oct 1, 2019 · Oct 1, 2019 · Oct 3, 2019
diff --git a/app/index.html b/app/index.html
@@ -1,10 +1,19 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <title>Aragon App</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script src="src/index.js"></script>
-    </body>
-</html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>Voting</title>
+</head>
+
+<body>
+    <noscript>
+        You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script src="./src/index.js"></script>
+</body>
+
+</html>
diff --git a/app/package.json b/app/package.json
@@ -10,6 +10,7 @@
     "core-js": "^3.1.4",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-linkify": "^0.2.2",
     "react-spring": "^8.0.27",
     "rxjs": "^6.5.2",
     "styled-components": "^4.3.2"

diff --git a/app/public/meta/details.md b/app/public/meta/details.md
@@ -1,6 +1,5 @@
-An application for Aragon.
+The delay app enables Aragon organizations to require a configurable delay between when an intent is sent and when it is executed.
 
-**Features**
-- Feature \#1.
-- Feature \#2.
-- Feature \#3.
+**WARNING**
+
+The code in this repo has not been audited.
diff --git a/app/public/meta/icon.svg b/app/public/meta/icon.svg
diff --git a/app/public/meta/screenshot-1.png b/app/public/meta/screenshot-1.png
diff --git a/app/src/App.js b/app/src/App.js
@@ -1,29 +1,60 @@
 import React from 'react'
+import styled from 'styled-components'
 import { useAragonApi, useAppState } from '@aragon/api-react'
-import { Main, Header, Button, SyncIndicator, SidePanel } from '@aragon/ui'
-import { useAppLogic } from './hooks/app-hooks'
+import { Main, Header, Button, SyncIndicator, SidePanel, GU } from '@aragon/ui'
+
+import { IdentityProvider } from './identity-manager'
+import { AppLogicProvider, useAppLogic } from './hooks/app-logic'
 
+import NoScripts from './screens/NoScripts'
 import Delays from './components/Delays'
 import Title from './components/Title'
-import styled from 'styled-components'
 
-function App() {
+const App = React.memo(function App() {
   const { delayedScripts, panelState, isSyncing, actions } = useAppLogic()
 
+  // TODO: (Gabi) Add filter Scripts
+
   return (
-    <Main>
+    <React.Fragment>
       <SyncIndicator visible={isSyncing} />
-      <Header primary={<Title text="Delay" />} />
-      {delayedScripts && delayedScripts.length > 0 ? <Delays scripts={delayedScripts} actions={actions}/> : null}
-
+      {!delayedScripts.length && (
+        <div
+          css={`
+            height: calc(100vh - ${8 * GU}px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+          `}
+        >
+          <NoScripts isSyncing={isSyncing} />
+        </div>
+      )}
+      {!!delayedScripts.length && (
+        <React.Fragment>
+          <Header primary={<Title text="Delay" />} />
+          <Delays scripts={delayedScripts} actions={actions} />
+        </React.Fragment>
+      )}
       <SidePanel
-        title="Withdraw"
         opened={panelState.visible}
         onClose={panelState.requestClose}
         onTransitionEnd={panelState.endTransition}
       />
+    </React.Fragment>
+  )
+})
+
+export default function Delay() {
+  return (
+    <Main assetsUrl="./aragon-ui">
+      <AppLogicProvider>
+        <IdentityProvider>
+          {/* <SettingsProvider> */}
+          <App />
+          {/* </SettingsProvider> */}
+        </IdentityProvider>
+      </AppLogicProvider>
     </Main>
   )
 }
-
-export default App
diff --git a/app/src/app-state-reducer.js b/app/src/app-state-reducer.js
@@ -1,22 +1,21 @@
-import { hasLoadedDelaySettings } from './lib/delay-settings'
-
 function appStateReducer(state) {
-  const ready = hasLoadedDelaySettings(state)
+  const ready = state && state.executionDelay //has loaded settings
 
   if (!ready) {
     return { ...state, ready }
   }
 
   const { delayedScripts } = state
 
+  console.log('scripts in reducer', delayedScripts)
+
   return {
     ...state,
     ready,
     delayedScripts: delayedScripts
       ? delayedScripts.map(script => ({
           ...script,
           executionTime: new Date(script.executionTime),
-          pausedAt: new Date(script.pausedAt),
         }))
       : [],
   }

diff --git a/app/src/assets/icono.svg b/app/src/assets/icono.svg
diff --git a/app/src/components/AutoLink.js b/app/src/components/AutoLink.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import Linkify from 'react-linkify'
+import { Link } from '@aragon/ui'
+
+const AutoLink = ({ children }) => (
+  <Linkify component={Link}>{children}</Linkify>
+)
+
+export default AutoLink
diff --git a/app/src/components/Delays.js b/app/src/components/Delays.js
@@ -1,15 +1,142 @@
 import React from 'react'
-import { Card } from "@aragon/ui"
+import styled from 'styled-components'
+import {
+  Card,
+  Button,
+  Countdown,
+  CardLayout,
+  textStyle,
+  GU,
+  useTheme,
+} from '@aragon/ui'
 
-function Delays({ scripts }) {
+import LocalLabelAppBadge from './/LocalIdentityBadge/LocalLabelAppBadge'
+import ScriptText from './ScriptText'
+
+function Delays({ scripts, actions }) {
+  const { purple } = useTheme()
   return (
-    <div>
-      {scripts.map((script, index) => {
-        return <Card key={index}><div>{script.executionTime.toString()}</div></Card>
-      })}
-    </div>
+    <CardLayout columnWidthMin={30 * GU} rowHeight={294}>
+      {scripts.map(
+        (
+          {
+            scriptId,
+            executionTime,
+            executionDescription,
+            executionTargetData,
+            pausedAt,
+            canExecute,
+            ...script
+          },
+          index
+        ) => {
+          return (
+            <CardItem
+              key={index}
+              css={`
+                display: grid;
+                grid-template-columns: 100%;
+                grid-template-rows: auto 1fr auto auto;
+                grid-gap: ${1 * GU}px;
+                padding: ${3 * GU}px;
+              `}
+            >
+              <div
+                css={`
+                  display: flex;
+                  justify-content: space-between;
+                  margin-bottom: ${1 * GU}px;
+                `}
+              >
+                <LocalLabelAppBadge
+                  appAddress={executionTargetData.address}
+                  iconSrc={executionTargetData.iconSrc}
+                  identifier={executionTargetData.identifier}
+                  label={executionTargetData.name}
+                />
+                {!canExecute && !pausedAt && (
+                  <Countdown removeDaysAndHours end={executionTime} />
+                )}
+              </div>
+              <div
+                css={`
+                  ${textStyle('body1')};
+                  /* lines per font size per line height */
+                  /* shorter texts align to the top */
+                  height: 84px;
+                  display: -webkit-box;
+                  -webkit-box-orient: vertical;
+                  -webkit-line-clamp: 3;
+                  overflow: hidden;
+                `}
+              >
+                <span css="font-weight: bold;">#{scriptId}:</span>{' '}
+                <ScriptText disabled={false} text={executionDescription} />
+              </div>
+              <Options>
+                {canExecute ? (
+                  <Button
+                    wide
+                    mode={'strong'}
+                    onClick={() => actions.execute(scriptId)}
+                  >
+                    Execute
+                  </Button>
+                ) : (
+                  <>
+                    {!pausedAt ? (
+                      <DelayButton
+                        wide
+                        css={`
+                          marginright: '10px';
+                          color: white;
+                          background-color: #${purple.hexColor};
+                        `}
+                        onClick={() => actions.pause(scriptId)}
+                      >
+                        Pause
+                      </DelayButton>
+                    ) : (
+                      <DelayButton
+                        wide
+                        css={{ marginright: '10px' }}
+                        mode="positive"
+                        onClick={() => actions.resume(scriptId)}
+                      >
+                        Resume
+                      </DelayButton>
+                    )}
+
+                    <DelayButton wide onClick={() => actions.cancel(scriptId)}>
+                      Cancel
+                    </DelayButton>
+                  </>
+                )}
+              </Options>
+            </CardItem>
+          )
+        }
+      )}
+    </CardLayout>
   )
 }
 
-export default  Delays
+const CardItem = styled(Card)`
+  padding: 16px;
+`
+
+const Options = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+`
+
+const DelayButton = styled(Button)`
+  ${textStyle('body2')};
+  width: 50%;
+  &:first-child {
+    margin-right: ${1 * GU}px;
+  }
+`
 
+export default Delays
diff --git a/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js b/app/src/components/LocalIdentityBadge/LocalIdentityBadge.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { useNetwork } from '@aragon/api-react'
+import { IdentityBadge } from '@aragon/ui'
+import { useIdentity } from '../../identity-manager'
+import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
+import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
+
+const LocalIdentityBadge = ({ entity, ...props }) => {
+  const network = useNetwork()
+  const [label, showLocalIdentityModal] = useIdentity(entity)
+  const handleClick = () => showLocalIdentityModal(entity)
+  return (
+    <IdentityBadge
+      label={label || ''}
+      entity={entity}
+      networkType={network && network.type}
+      popoverAction={{
+        label: <LocalLabelPopoverActionLabel hasLabel={Boolean(label)} />,
+        onClick: handleClick,
+      }}
+      popoverTitle={
+        label ? <LocalLabelPopoverTitle label={label} /> : undefined
+      }
+      {...props}
+    />
+  )
+}
+
+LocalIdentityBadge.propTypes = {
+  ...IdentityBadge.propTypes,
+}
+
+export default LocalIdentityBadge
diff --git a/app/src/components/LocalIdentityBadge/LocalLabelAppBadge.js b/app/src/components/LocalIdentityBadge/LocalLabelAppBadge.js
@@ -0,0 +1,33 @@
+import React from 'react'
+import { useNetwork } from '@aragon/api-react'
+import { AppBadge } from '@aragon/ui'
+import { useIdentity } from '../../identity-manager'
+import LocalLabelPopoverTitle from './LocalLabelPopoverTitle'
+import LocalLabelPopoverActionLabel from './LocalLabelPopoverActionLabel'
+
+const LocalLabelAppBadge = ({ appAddress, label, ...props }) => {
+  const network = useNetwork()
+  const [localLabel, showLocalLabelAppModal] = useIdentity(appAddress)
+  const handleClick = () => showLocalLabelAppModal(appAddress)
+  return (
+    <AppBadge
+      appAddress={appAddress}
+      label={localLabel || label}
+      networkType={network && network.type}
+      popoverAction={{
+        label: <LocalLabelPopoverActionLabel hasLabel={Boolean(localLabel)} />,
+        onClick: handleClick,
+      }}
+      popoverTitle={
+        localLabel ? <LocalLabelPopoverTitle label={localLabel} /> : undefined
+      }
+      {...props}
+    />
+  )
+}
+
+LocalLabelAppBadge.propTypes = {
+  ...AppBadge.propTypes,
+}
+
+export default LocalLabelAppBadge