Fix: debounce fetch apps

package.json

@@ -191,6 +191,7 @@
     "immortal-db": "^1.0.3",
     "immutable": "^4.0.0-rc.12",
     "js-cookie": "^2.2.1",
+    "lodash.debounce": "^4.0.8",
     "lodash.memoize": "^4.1.2",
     "material-ui-search-bar": "^1.0.0-beta.13",
     "notistack": "https://github.com/gnosis/notistack.git#v0.9.4",

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

@@ -0,0 +1,36 @@
+import { Checkbox, Text } from '@gnosis.pm/safe-react-components'
+import React from 'react'
+import { useFormState } from 'react-final-form'
+import styled from 'styled-components'
+
+import { required } from 'src/components/forms/validator'
+import Field from 'src/components/forms/Field'
+
+const StyledCheckbox = styled(Checkbox)`
+  margin: 0;
+`
+
+const AppAgreement = (): React.ReactElement => {
+  const { visited } = useFormState({ subscription: { visited: true } })
+
+  // trick to prevent having the field validated by default. Not sure why this happens in this form
+  const validate = !visited.agreementAccepted ? undefined : required
+
+  return (
+    <Field
+      component={StyledCheckbox}
+      label={
+        <Text size="xl">
+          This app is not a Gnosis product and I agree to use this app
+          <br />
+          at my own risk.
+        </Text>
+      }
+      name="agreementAccepted"
+      type="checkbox"
+      validate={validate}
+    />
+  )
+}
+
+export default AppAgreement

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

@@ -0,0 +1,62 @@
+import { TextField } from '@gnosis.pm/safe-react-components'
+import createDecorator from 'final-form-calculate'
+import React from 'react'
+import { useField, useFormState } from 'react-final-form'
+
+import { SafeApp } from 'src/routes/safe/components/Apps/types'
+import { getAppInfoFromUrl, getIpfsLinkFromEns, uniqueApp } from 'src/routes/safe/components/Apps/utils'
+import { composeValidators, required } from 'src/components/forms/validator'
+import Field from 'src/components/forms/Field'
+import { isValid as isURLValid } from 'src/utils/url'
+import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
+import { useDebounce } from 'src/routes/safe/container/hooks/useDebounce'
+
+const validateUrl = (url: string): string | undefined => (isURLValid(url) ? undefined : 'Invalid URL')
+
+export const appUrlResolver = createDecorator({
+  field: 'appUrl',
+  updates: {
+    appUrl: async (appUrl: string): Promise<string | undefined> => {
+      const ensContent = !isURLValid(appUrl) && isValidEnsName(appUrl) && (await getIpfsLinkFromEns(appUrl))
+
+      if (ensContent) {
+        return ensContent
+      }
+
+      return appUrl
+    },
+  },
+})
+
+export const AppInfoUpdater = ({ onAppInfo }: { onAppInfo: (appInfo: SafeApp) => void }): React.ReactElement => {
+  const {
+    input: { value: appUrl },
+  } = useField('appUrl', { subscription: { value: true } })
+  const debouncedValue = useDebounce(appUrl, 500)
+
+  React.useEffect(() => {
+    const updateAppInfo = async () => {
+      const appInfo = await getAppInfoFromUrl(debouncedValue)
+      onAppInfo({ ...appInfo })
+    }
+
+    if (isURLValid(debouncedValue)) {
+      updateAppInfo()
+    }
+  }, [debouncedValue, onAppInfo])
+
+  return null
+}
+
+const AppUrl = ({ appList }: { appList: SafeApp[] }): React.ReactElement => {
+  const { visited } = useFormState({ subscription: { visited: true } })
+
+  // trick to prevent having the field validated by default. Not sure why this happens in this form
+  const validate = !visited.appUrl ? undefined : composeValidators(required, validateUrl, uniqueApp(appList))
+
+  return (
+    <Field label="App URL" name="appUrl" placeholder="App URL" type="text" component={TextField} validate={validate} />
+  )
+}
+
+export default AppUrl

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useFormState } from 'react-final-form'
+
+import { SafeApp } from 'src/routes/safe/components/Apps/types'
+import { isAppManifestValid } from 'src/routes/safe/components/Apps/utils'
+
+interface SubmitButtonStatusProps {
+  appInfo: SafeApp
+  onSubmitButtonStatusChange: (disabled: boolean) => void
+}
+
+const SubmitButtonStatus = ({ appInfo, onSubmitButtonStatusChange }: SubmitButtonStatusProps): React.ReactElement => {
+  const { valid, validating, visited } = useFormState({
+    subscription: { valid: true, validating: true, visited: true },
+  })
+
+  React.useEffect(() => {
+    // if non visited, fields were not evaluated yet. Then, the default value is considered invalid
+    const fieldsVisited = visited.agreementAccepted && visited.appUrl
+
+    onSubmitButtonStatusChange(validating || !valid || !fieldsVisited || !isAppManifestValid(appInfo))
+  }, [validating, valid, visited, onSubmitButtonStatusChange, appInfo])
+
+  return null
+}
+
+export default SubmitButtonStatus