SafeApps new layout

package.json

@@ -169,7 +169,7 @@
   "dependencies": {
     "@gnosis.pm/safe-apps-sdk": "https://github.com/gnosis/safe-apps-sdk.git#3f0689f",
     "@gnosis.pm/safe-contracts": "1.1.1-dev.2",
-    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#03ff672d6f73366297986d58631f9582fe2ed4a3",
+    "@gnosis.pm/safe-react-components": "https://github.com/gnosis/safe-react-components.git#ff29c3c",
     "@gnosis.pm/util-contracts": "2.0.6",
     "@ledgerhq/hw-transport-node-hid-singleton": "5.30.0",
     "@material-ui/core": "4.11.0",

src/components/AppLayout/Sidebar/index.tsx

@@ -16,7 +16,7 @@ const HelpContainer = styled.div`
 const HelpCenterLink = styled.a`
   height: 30px;
   width: 166px;
-  padding: 8px 0 8px 16px;
+  padding: 6px 0 8px 16px;
   margin: 14px 0px;
   text-decoration: none;
   display: block;

src/components/AppLayout/Sidebar/useSidebarItems.tsx

@@ -19,7 +19,7 @@ const useSidebarItems = (): ListItemType[] => {
   }
 
   return useMemo((): ListItemType[] => {
-    if (!matchSafe || !matchSafeWithAddress) {
+    if (!matchSafe || !matchSafeWithAddress || !featuresEnabled) {
       return []
     }
 
@@ -63,7 +63,7 @@ const useSidebarItems = (): ListItemType[] => {
       },
       ...safeSidebar,
     ]
-  }, [matchSafe, matchSafeWithAction, matchSafeWithAddress, safeAppsEnabled])
+  }, [matchSafe, matchSafeWithAction, matchSafeWithAddress, safeAppsEnabled, featuresEnabled])
 }
 
 export { useSidebarItems }

src/components/AppLayout/index.tsx

@@ -38,7 +38,7 @@ const SidebarWrapper = styled.aside`
   flex-direction: column;
   z-index: 1;
 
-  padding: 8px;
+  padding: 8px 8px 0 8px;
   background-color: ${({ theme }) => theme.colors.white};
   border-right: 2px solid ${({ theme }) => theme.colors.separator};
 `

src/components/LoaderContainer/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const LoadingContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`

src/logic/safe/utils/safeVersion.ts

@@ -36,17 +36,20 @@ export const safeNeedsUpdate = (currentVersion?: string, latestVersion?: string)
 export const getCurrentSafeVersion = (gnosisSafeInstance: GnosisSafe): Promise<string> =>
   gnosisSafeInstance.methods.VERSION().call()
 
-const checkFeatureEnabledByVersion = (featureConfig: FeatureConfigByVersion, version: string) => {
+const checkFeatureEnabledByVersion = (featureConfig: FeatureConfigByVersion, version?: string) => {
+  if (!version) {
+    return false
+  }
   return featureConfig.validVersion ? semverSatisfies(version, featureConfig.validVersion) : true
 }
 
 export const enabledFeatures = (version?: string): FEATURES[] => {
-  return FEATURES_BY_VERSION.reduce((acc: FEATURES[], feature: Feature) => {
-    if (isFeatureEnabled(feature.name) && version && checkFeatureEnabledByVersion(feature, version)) {
+  return FEATURES_BY_VERSION.reduce((acc, feature: Feature) => {
+    if (isFeatureEnabled(feature.name) && checkFeatureEnabledByVersion(feature, version)) {
       acc.push(feature.name)
     }
     return acc
-  }, [])
+  }, [] as FEATURES[])
 }
 
 interface SafeVersionInfo {

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

@@ -0,0 +1,51 @@
+import { Button, Divider } from '@gnosis.pm/safe-react-components'
+import React, { ReactElement, useMemo } from 'react'
+import { useFormState } from 'react-final-form'
+import styled from 'styled-components'
+
+import GnoButton from 'src/components/layout/Button'
+import { SafeApp } from 'src/routes/safe/components/Apps/types.d'
+import { isAppManifestValid } from 'src/routes/safe/components/Apps/utils'
+
+const StyledDivider = styled(Divider)`
+  margin: 16px -24px;
+`
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+
+interface Props {
+  appInfo: SafeApp
+  onCancel: () => void
+}
+
+const FormButtons = ({ appInfo, onCancel }: Props): ReactElement => {
+  const { valid, validating, visited } = useFormState({
+    subscription: { valid: true, validating: true, visited: true },
+  })
+
+  const isSubmitDisabled = useMemo(() => {
+    // if non visited, fields were not evaluated yet. Then, the default value is considered invalid
+    const fieldsVisited = visited?.agreementAccepted && visited?.appUrl
+
+    return validating || !valid || !fieldsVisited || !isAppManifestValid(appInfo)
+  }, [validating, valid, visited, appInfo])
+
+  return (
+    <>
+      <StyledDivider />
+      <ButtonsContainer>
+        <Button size="md" onClick={onCancel} color="secondary">
+          Cancel
+        </Button>
+        <GnoButton color="primary" variant="contained" type="submit" disabled={isSubmitDisabled}>
+          Add
+        </GnoButton>
+      </ButtonsContainer>
+    </>
+  )
+}
+
+export default FormButtons

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

@@ -1,19 +1,20 @@
-import { Text, TextField } from '@gnosis.pm/safe-react-components'
-import React from 'react'
+import { TextField } from '@gnosis.pm/safe-react-components'
+import React, { useState, ReactElement } from 'react'
 import styled from 'styled-components'
 
-import AppAgreement from './AppAgreement'
-import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
-import SubmitButtonStatus from './SubmitButtonStatus'
-
 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 appsIconSvg from 'src/routes/safe/components/Transactions/TxsTable/TxType/assets/appsIcon.svg'
 
-const StyledText = styled(Text)`
-  margin-bottom: 19px;
-`
+import AppAgreement from './AppAgreement'
+import AppUrl, { AppInfoUpdater, appUrlResolver } from './AppUrl'
+import FormButtons from './FormButtons'
+import { APPS_STORAGE_KEY, getEmptySafeApp } from 'src/routes/safe/components/Apps/utils'
+import { saveToStorage } from 'src/utils/storage'
+import { SAFELIST_ADDRESS } from 'src/routes/routes'
+import { useHistory, useRouteMatch } from 'react-router-dom'
+
+const FORM_ID = 'add-apps-form'
 
 const StyledTextFileAppName = styled(TextField)`
   && {
@@ -39,38 +40,34 @@ const INITIAL_VALUES: AddAppFormValues = {
   agreementAccepted: false,
 }
 
-const APP_INFO: SafeApp = {
-  id: '',
-  url: '',
-  name: '',
-  iconUrl: appsIconSvg,
-  error: false,
-  description: '',
-}
+const APP_INFO = getEmptySafeApp()
 
 interface AddAppProps {
   appList: SafeApp[]
   closeModal: () => void
-  formId: string
-  onAppAdded: (app: SafeApp) => void
-  setIsSubmitDisabled: (disabled: boolean) => void
 }
 
-const AddApp = ({ appList, closeModal, formId, onAppAdded, setIsSubmitDisabled }: AddAppProps): React.ReactElement => {
-  const [appInfo, setAppInfo] = React.useState<SafeApp>(APP_INFO)
+const AddApp = ({ appList, closeModal }: AddAppProps): ReactElement => {
+  const [appInfo, setAppInfo] = useState<SafeApp>(APP_INFO)
+  const history = useHistory()
+  const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
 
   const handleSubmit = () => {
-    closeModal()
-    onAppAdded(appInfo)
+    const newAppList = [
+      { url: appInfo.url, disabled: false },
+      ...appList.map(({ url, disabled }) => ({ url, disabled })),
+    ]
+    saveToStorage(APPS_STORAGE_KEY, newAppList)
+    const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(appInfo.url)}`
+    history.push(goToApp)
   }
 
   return (
-    <GnoForm decorators={[appUrlResolver]} initialValues={INITIAL_VALUES} onSubmit={handleSubmit} testId={formId}>
+    <GnoForm decorators={[appUrlResolver]} initialValues={INITIAL_VALUES} onSubmit={handleSubmit} testId={FORM_ID}>
       {() => (
         <>
-          <StyledText size="xl">Add custom app</StyledText>
-
           <AppUrl appList={appList} />
+
           {/* Fetch app from url and return a SafeApp */}
           <AppInfoUpdater onAppInfo={setAppInfo} />
 
@@ -81,7 +78,7 @@ const AddApp = ({ appList, closeModal, formId, onAppAdded, setIsSubmitDisabled }
 
           <AppAgreement />
 
-          <SubmitButtonStatus onSubmitButtonStatusChange={setIsSubmitDisabled} appInfo={appInfo} />
+          <FormButtons appInfo={appInfo} onCancel={closeModal} />
         </>
       )}
     </GnoForm>

src/routes/safe/components/Apps/components/AppCard/index.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import AppCard from './index'
+
+import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
+
+export default {
+  title: 'Apps/AppCard',
+  component: AppCard,
+}
+
+export const Loading = (): React.ReactElement => <AppCard isLoading />
+
+export const AddCustomApp = (): React.ReactElement => (
+  <AppCard iconUrl={AddAppIcon} onClick={console.log} buttonText="Add custom app" />
+)
+
+export const LoadedApp = (): React.ReactElement => (
+  <AppCard
+    iconUrl="https://cryptologos.cc/logos/versions/gnosis-gno-gno-logo-circle.svg?v=007"
+    name="Gnosis"
+    description="Gnosis safe app"
+    onClick={console.log}
+  />
+)