Merge branch 'development' into release/v2.18.0

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

@@ -15,6 +15,7 @@ const StyledAppCard = styled(Card)`
   height: 232px !important;
   box-sizing: border-box;
   cursor: pointer;
+  color: ${({ theme }) => theme.colors.secondary};
 
   :hover {
     box-shadow: 1px 2px 16px 0 ${({ theme }) => fade(theme.colors.shadow.color, 0.35)};

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

@@ -6,7 +6,7 @@ import { GenericModal, IconText, Loader, Menu } from '@gnosis.pm/safe-react-comp
 import { safeParamAddressFromStateSelector } from 'src/logic/safe/store/selectors'
 import AppCard from 'src/routes/safe/components/Apps/components/AppCard'
 import AddAppIcon from 'src/routes/safe/components/Apps/assets/addApp.svg'
-import { useRouteMatch, useHistory } from 'react-router-dom'
+import { useRouteMatch, Link } from 'react-router-dom'
 import { SAFELIST_ADDRESS } from 'src/routes/routes'
 
 import { useAppList } from '../hooks/useAppList'
@@ -19,6 +19,10 @@ const Wrapper = styled.div`
   flex-direction: column;
 `
 
+const StyledLink = styled(Link)`
+  text-decoration: none;
+`
+
 const centerCSS = css`
   display: flex;
   align-items: center;
@@ -53,17 +57,11 @@ const Breadcrumb = styled.div`
 `
 
 const AppsList = (): React.ReactElement => {
-  const history = useHistory()
   const matchSafeWithAddress = useRouteMatch<{ safeAddress: string }>({ path: `${SAFELIST_ADDRESS}/:safeAddress` })
   const safeAddress = useSelector(safeParamAddressFromStateSelector)
   const { appList } = useAppList()
   const [isAddAppModalOpen, setIsAddAppModalOpen] = useState<boolean>(false)
 
-  const onAddAppHandler = (url: string) => () => {
-    const goToApp = `${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(url)}`
-    history.push(goToApp)
-  }
-
   const openAddAppModal = () => setIsAddAppModalOpen(true)
 
   const closeAddAppModal = () => setIsAddAppModalOpen(false)
@@ -92,14 +90,9 @@ const AppsList = (): React.ReactElement => {
           {appList
             .filter((a) => a.fetchStatus !== SAFE_APP_FETCH_STATUS.ERROR)
             .map((a) => (
-              <AppCard
+              <StyledLink key={a.url} to={`${matchSafeWithAddress?.url}/apps?appUrl=${encodeURI(a.url)}`}>
-                isLoading={isAppLoading(a)}
+                <AppCard isLoading={isAppLoading(a)} iconUrl={a.iconUrl} name={a.name} description={a.description} />
-                key={a.url}
+              </StyledLink>
-                iconUrl={a.iconUrl}
-                name={a.name}
-                description={a.description}
-                onClick={onAddAppHandler(a.url)}
-              />
             ))}
         </CardsWrapper>
 

src/types/definitions.d.ts

@@ -1,3 +1,8 @@
+import 'styled-components'
+import { theme } from '@gnosis.pm/safe-react-components'
+
+type Theme = typeof theme
+
 export {}
 declare global {
   interface Window {
@@ -10,3 +15,7 @@ declare global {
 }
 declare module '@openzeppelin/contracts/build/contracts/ERC721'
 declare module 'currency-flags/dist/currency-flags.min.css'
+
+declare module 'styled-components' {
+  export interface DefaultTheme extends Theme {} // eslint-disable-line
+}