2201166130

Build # 2201166130

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/gnosis/safe-react/commit/<a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/gnosis/safe-react/commit/f24948c3144f55b03eb821af84d91d0e0ac5ea30">f24948c31">&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/</a><a class="double-link" href="https://github.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/gnosis/safe-react/commit/f24948c3144f55b03eb821af84d91d0e0ac5ea30">f24948c31</a><a href="https://github.com/gnosis/safe-react/commit/f24948c3144f55b03eb821af84d91d0e0ac5ea30">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/gnosis/safe-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/gnosis/safe-react/commit/f24948c3144f55b03eb821af84d91d0e0ac5ea30&quot;&gt;f24948c31&lt;/a&gt;&lt;a href=&quot;https://github.com/gnosis/safe-react/commit/f24948c3144f55b03eb821af84d91d0e0ac5ea30&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/gnosis/safe-react/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://github.com/gnosis/safe-react/commit/&amp;amp;lt;a class=&amp;amp;quot;double-link&amp;amp;quot; href=&amp;amp;quot;https://git&amp;quot;&amp;gt;&amp;amp;lt;a class=&amp;lt;/a&amp;gt;hub.com/gno... (continued)

Pull Request Pull Request #3806: fix: Dashboard styles

Run Details

1253 of 4522 branches covered (27.71%)

Branch coverage included in aggregate %.

3 of 3 new or added lines in 1 file covered. (100.0%)

3573 of 9190 relevant lines covered (38.88%)

35.51 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/Dashboard/SafeApps/Grid.tsx

import { ReactElement, useMemo } from 'react'
import styled from 'styled-components'
import { Button } from '@gnosis.pm/safe-react-components'
import { generatePath, Link } from 'react-router-dom'
import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
import { Grid } from '@material-ui/core'
import { sampleSize } from 'lodash'

import { screenSm, screenMd } from 'src/theme/variables'
import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
import Card, { CARD_HEIGHT, CARD_PADDING } from 'src/components/Dashboard/SafeApps/Card'
import ExploreIcon from 'src/assets/icons/explore.svg'
import { SafeApp } from 'src/routes/safe/components/Apps/types'
import { getAppsUsageData, rankTrackedSafeApps } from 'src/routes/safe/components/Apps/trackAppUsageCount'
import { FEATURED_APPS_TAG } from 'src/components/Dashboard/FeaturedApps/FeaturedApps'
import { WidgetTitle, WidgetBody, WidgetContainer } from 'src/components/Dashboard/styled'

const SkeletonWrapper = styled.div`
  border-radius: 8px;
  overflow: hidden;
`

const StyledExplorerButton = styled.div`
  background-color: white;
  border-radius: 8px;
  padding: 24px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
`

const StyledLink = styled(Link)`
  text-decoration: none;

  > button {
    width: 200px;
  }
`

const StyledGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;

  @media (max-width: ${screenMd}px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: ${screenSm}px) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
`

const SafeAppsGrid = ({ size = 6 }: { size?: number }): ReactElement => {
  const { allApps, pinnedSafeApps, togglePin, isLoading } = useAppList()

  const displayedApps = useMemo(() => {
    if (!allApps.length) return []
    const trackData = getAppsUsageData()
    const rankedSafeAppIds = rankTrackedSafeApps(trackData)
    const featuredSafeAppIds = allApps.filter((app) => app.tags?.includes(FEATURED_APPS_TAG)).map((app) => app.id)

    const nonFeaturedApps = allApps.filter((app) => !featuredSafeAppIds.includes(app.id))
    const nonRankedApps = nonFeaturedApps.filter((app) => !rankedSafeAppIds.includes(app.id))

    const topRankedSafeApps: SafeApp[] = []
    rankedSafeAppIds.forEach((id) => {
      const sortedApp = nonFeaturedApps.find((app) => app.id === id)
      if (sortedApp) topRankedSafeApps.push(sortedApp)
    })

    // Get random apps that are not ranked and not featured
    const randomApps = sampleSize(nonRankedApps, size - 1 - topRankedSafeApps.length)

    // Display size - 1 in order to always display the "Explore Safe Apps" card
    return topRankedSafeApps.concat(randomApps).slice(0, size - 1)
  }, [allApps, size])

  const path = generatePath(GENERIC_APPS_ROUTE)

  const LoadingState = useMemo(
    () => (
      <Grid container spacing={3}>
        {Array.from(Array(size).keys()).map((key) => (
          <Grid item xs={12} md={4} key={key}>
            <SkeletonWrapper>
              <Skeleton variant="rect" height={CARD_HEIGHT + 2 * CARD_PADDING} />
            </SkeletonWrapper>
          </Grid>
        ))}
      </Grid>
    ),
    [size],
  )

  if (isLoading) return LoadingState

  return (
    <WidgetContainer>
      <WidgetTitle>Explore our DApp Ecosystem</WidgetTitle>
      <WidgetBody>
        <StyledGrid>
          {displayedApps.map((safeApp) => (
            <Card
              key={safeApp.id}
              name={safeApp.name}
              description={safeApp.description}
              logoUri={safeApp.iconUrl}
              appUri={safeApp.url}
              isPinned={pinnedSafeApps.some((app) => app.id === safeApp.id)}
              onPin={() => togglePin(safeApp)}
            />
          ))}
          <StyledExplorerButton>
            <img alt="Explore Safe Apps" src={ExploreIcon} />
            <StyledLink to={path}>
              <Button size="md" color="primary" variant="contained">
                Explore Safe Apps
              </Button>
            </StyledLink>
          </StyledExplorerButton>
        </StyledGrid>
      </WidgetBody>
    </WidgetContainer>
  )
}

export default SafeAppsGrid

1	import { ReactElement, useMemo } from 'react'
2	import styled from 'styled-components'
3	import { Button } from '@gnosis.pm/safe-react-components'
4	import { generatePath, Link } from 'react-router-dom'
5	import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
6	import { Grid } from '@material-ui/core'
7	import { sampleSize } from 'lodash'
8
9	import { screenSm, screenMd } from 'src/theme/variables'
10	import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList'
11	import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
12	import Card, { CARD_HEIGHT, CARD_PADDING } from 'src/components/Dashboard/SafeApps/Card'
13	import ExploreIcon from 'src/assets/icons/explore.svg'
14	import { SafeApp } from 'src/routes/safe/components/Apps/types'
15	import { getAppsUsageData, rankTrackedSafeApps } from 'src/routes/safe/components/Apps/trackAppUsageCount'
16	import { FEATURED_APPS_TAG } from 'src/components/Dashboard/FeaturedApps/FeaturedApps'
17	import { WidgetTitle, WidgetBody, WidgetContainer } from 'src/components/Dashboard/styled'
18
19	const SkeletonWrapper = styled.div`	×
20	border-radius: 8px;
21	overflow: hidden;
22	`
23
24	const StyledExplorerButton = styled.div`	×
25	background-color: white;
26	border-radius: 8px;
27	padding: 24px;
28
29	display: flex;
30	flex-direction: column;
31	align-items: center;
32	justify-content: center;
33	gap: 8px;
34	`
35
36	const StyledLink = styled(Link)`	×
37	text-decoration: none;
38
39	> button {
40	width: 200px;
41	}
42	`
43
44	const StyledGrid = styled.div`	×
45	display: grid;
46	grid-template-columns: repeat(3, minmax(0, 1fr));
47	grid-template-rows: repeat(2, 1fr);
48	gap: 24px;
49
50	@media (max-width: ${screenMd}px) {
51	grid-template-columns: repeat(2, minmax(0, 1fr));
52	}
53
54	@media (max-width: ${screenSm}px) {
55	grid-template-columns: repeat(1, minmax(0, 1fr));
56	}
57	`
58
59	const SafeAppsGrid = ({ size = 6 }: { size?: number }): ReactElement => {	×
60	const { allApps, pinnedSafeApps, togglePin, isLoading } = useAppList()	×
61
62	const displayedApps = useMemo(() => {	×
63	if (!allApps.length) return []	×
64	const trackData = getAppsUsageData()	×
65	const rankedSafeAppIds = rankTrackedSafeApps(trackData)	×
66	const featuredSafeAppIds = allApps.filter((app) => app.tags?.includes(FEATURED_APPS_TAG)).map((app) => app.id)	×
67
68	const nonFeaturedApps = allApps.filter((app) => !featuredSafeAppIds.includes(app.id))	×
69	const nonRankedApps = nonFeaturedApps.filter((app) => !rankedSafeAppIds.includes(app.id))	×
70
71	const topRankedSafeApps: SafeApp[] = []	×
72	rankedSafeAppIds.forEach((id) => {	×
73	const sortedApp = nonFeaturedApps.find((app) => app.id === id)	×
74	if (sortedApp) topRankedSafeApps.push(sortedApp)	×
75	})
76
77	// Get random apps that are not ranked and not featured
78	const randomApps = sampleSize(nonRankedApps, size - 1 - topRankedSafeApps.length)	×
79
80	// Display size - 1 in order to always display the "Explore Safe Apps" card
81	return topRankedSafeApps.concat(randomApps).slice(0, size - 1)	×
82	}, [allApps, size])
83
84	const path = generatePath(GENERIC_APPS_ROUTE)	×
85
86	const LoadingState = useMemo(	×
87	() => (
88	<Grid container spacing={3}>	×
89	{Array.from(Array(size).keys()).map((key) => (
90	<Grid item xs={12} md={4} key={key}>	×
91	<SkeletonWrapper>
92	<Skeleton variant="rect" height={CARD_HEIGHT + 2 * CARD_PADDING} />
93	</SkeletonWrapper>
94	</Grid>
95	))}
96	</Grid>
97	),
98	[size],
99	)
100
101	if (isLoading) return LoadingState	×
102
103	return (	×
104	<WidgetContainer>
105	<WidgetTitle>Explore our DApp Ecosystem</WidgetTitle>
106	<WidgetBody>
107	<StyledGrid>
108	{displayedApps.map((safeApp) => (
109	<Card	×
110	key={safeApp.id}
111	name={safeApp.name}
112	description={safeApp.description}
113	logoUri={safeApp.iconUrl}
114	appUri={safeApp.url}
115	isPinned={pinnedSafeApps.some((app) => app.id === safeApp.id)}	×
116	onPin={() => togglePin(safeApp)}	×
117	/>
118	))}
119	<StyledExplorerButton>
120	<img alt="Explore Safe Apps" src={ExploreIcon} />
121	<StyledLink to={path}>
122	<Button size="md" color="primary" variant="contained">
123	Explore Safe Apps
124	</Button>
125	</StyledLink>
126	</StyledExplorerButton>
127	</StyledGrid>
128	</WidgetBody>
129	</WidgetContainer>
130	)
131	}
132
133	export default SafeAppsGrid

gnosis / safe-react / 2201166130

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous