Merge pull request #1939 from gnosis/feature/#1682-custom-app

Link to docs from "Add custom app"

src/logic/safe/hooks/useSafeScheduledUpdates.tsx

@@ -28,7 +28,7 @@ export const useSafeScheduledUpdates = (safeLoaded: boolean, safeAddress?: strin
       })
 
       if (mounted) {
-        timer.current = setTimeout(() => {
+        timer.current = window.setTimeout(() => {
           fetchSafeData(address)
         }, TIMEOUT * 3)
       }

src/routes/safe/components/Apps/components/AddAppForm/index.tsx

@@ -5,6 +5,7 @@ import styled from 'styled-components'
 import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
 import GnoForm from 'src/components/forms/GnoForm'
 import Img from 'src/components/layout/Img'
+import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 
 import AppAgreement from './AppAgreement'
 import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
@@ -29,6 +30,16 @@ const AppInfo = styled.div`
     margin-right: 10px;
   }
 `
+const AppDocsInfo = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  flex-direction: column;
+  svg {
+    position: relative;
+    top: 4px;
+    left: 4px;
+  }
+`
 
 export interface AddAppFormValues {
   appUrl: string
@@ -66,6 +77,22 @@ const AddApp = ({ appList, closeModal }: AddAppProps): ReactElement => {
     <GnoForm decorators={[appUrlResolver]} initialValues={INITIAL_VALUES} onSubmit={handleSubmit} testId={FORM_ID}>
       {() => (
         <>
+          <AppDocsInfo>
+            <Text size="xl" as="span" color="secondary">
+              Safe Apps are third-party extensions.
+            </Text>
+            <Link
+              href="https://docs.gnosis.io/safe/docs/sdks_safe_apps/"
+              target="_blank"
+              rel="noreferrer"
+              title="Learn more about building Safe Apps"
+            >
+              <Text size="xl" as="span" color="primary">
+                Learn more about building Safe Apps.
+              </Text>
+              <Icon size="sm" type="externalLink" color="primary" />
+            </Link>
+          </AppDocsInfo>
           <AppUrl appList={appList} />
 
           {/* Fetch app from url and return a SafeApp */}

src/routes/safe/components/Apps/components/AppFrame.tsx

@@ -119,7 +119,7 @@ const AppFrame = ({ appUrl }: Props): React.ReactElement => {
 
   useEffect(() => {
     if (appIsLoading) {
-      timer.current = setTimeout(() => {
+      timer.current = window.setTimeout(() => {
         setAppTimeout(true)
       }, TIMEOUT)
     } else {