Agent: update help text (aragon#1169)

ConsiderItDone · Jun 25, 2020 · feef2fe · feef2fe
1 parent 1169d9e
commit feef2fe
Show file tree

Hide file tree

Showing 5 changed files with 246 additions and 125 deletions.
diff --git a/apps/agent/app/src/App.js b/apps/agent/app/src/App.js
@@ -3,7 +3,7 @@ import { useAragonApi } from '@aragon/api-react'
 import { Header, Main, SyncIndicator } from '@aragon/ui'
 import Balances from './components/Balances'
 import { IdentityProvider } from './components/IdentityManager/IdentityManager'
-import InstallFrame from './components/InstallFrame'
+import AgentHelp from './components/AgentHelp'
 import Transactions from './components/Transactions'
 
 function App() {
@@ -33,7 +33,7 @@ function App() {
       >
         <SyncIndicator visible={isSyncing} shift={50} />
         <Header primary="Agent" />
-        <InstallFrame />
+        <AgentHelp />
         <Balances balances={balances} />
         <Transactions
           agentAddress={proxyAddress}

diff --git a/.../agent/app/src/components/InstallFrame.js → apps/agent/app/src/components/AgentHelp.js b/.../agent/app/src/components/InstallFrame.js → apps/agent/app/src/components/AgentHelp.js
@@ -1,16 +1,12 @@
-import React, { useState } from 'react'
-import { GU, Info, Link } from '@aragon/ui'
-import FrameSvg from './FrameSvg'
-import FrameModal from './FrameModal'
+import React from 'react'
+import { GU, Info, Link, useTheme } from '@aragon/ui'
+import AgentSvg from './AgentSvg'
 
-function InstallFrame() {
-  const [opened, setOpened] = useState(false)
-  const handleInstallFrameClick = () => setOpened(true)
-  const handleClose = () => setOpened(false)
+function AgentHelp() {
+  const theme = useTheme()
 
   return (
     <React.Fragment>
-      <FrameModal visible={opened} onClose={handleClose} />
       <Info
         css={`
           margin-bottom: ${2 * GU}px;
@@ -25,19 +21,24 @@ function InstallFrame() {
             align-items: center;
           `}
         >
-          <div>
-            <FrameSvg />
+          <div
+            css={`
+              width: ${6 * GU}px;
+              height: ${6 * GU}px;
+            `}
+          >
+            <AgentSvg />
           </div>
           <div>
             <div
               css={`
                 margin-bottom: ${0.5 * GU}px;
               `}
             >
-              To interact with the Agent app you must install Frame.
+              The Agent app can be used to interact with external contracts.
             </div>
             <div>
-              <Link onClick={handleInstallFrameClick}>Install Frame</Link>
+              <Link href="https://help.aragon.org/article/37-agent">Learn More</Link>
             </div>
           </div>
         </div>
@@ -46,4 +47,4 @@ function InstallFrame() {
   )
 }
 
-export default InstallFrame
+export default AgentHelp