This repository has been archived by the owner on Nov 10, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 364
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* wip layout * feat: Adjust Dashboard layout * fix: remove leftover prop * fix: NFT route, style container spacings * style: Adjust Overview widget style * style: Remove row, col from featured apps widget, adjust spacings * Add total transactions to sign to the PendingTxs widget title * Add view all Link * tune spacing in TxPendingListItem * fix: Remove hardcoded featured app ids, use lodash sampleSize to get random apps, adjust grid layout * fix: React prop errors * style: Adjust overview skeleton container size * style: Adjust pending txs spacing * tweaks in grid layout * fix: Update comment Co-authored-by: Diogo Soares <[email protected]>
- Loading branch information
1 parent
2686fa6
commit b2836bd
Showing
13 changed files
with
375 additions
and
246 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,64 +1,65 @@ | ||
| import { ReactElement, useMemo } from 'react' | ||
| import { useAppList } from 'src/routes/safe/components/Apps/hooks/appList/useAppList' | ||
| import { Text } from '@gnosis.pm/safe-react-components' | ||
| import { Link } from 'react-router-dom' | ||
| import { getSafeAppUrl, SafeRouteParams } from 'src/routes/routes' | ||
| import { useSelector } from 'react-redux' | ||
| import { Box, Grid } from '@material-ui/core' | ||
|
|
||
| import styled from 'styled-components' | ||
| import { getSafeAppUrl, SafeRouteParams } from 'src/routes/routes' | ||
| import { currentSafe } from 'src/logic/safe/store/selectors' | ||
| import { getShortName } from 'src/config' | ||
| import { ReactElement, useMemo } from 'react' | ||
| import Row from 'src/components/layout/Row' | ||
| import Col from 'src/components/layout/Col' | ||
| import styled from 'styled-components' | ||
| import { Card, WidgetBody, WidgetContainer, WidgetTitle } from 'src/components/Dashboard/styled' | ||
|
|
||
| const FEATURED_APPS_TAGS = 'dashboard-widgets' | ||
| export const FEATURED_APPS_TAG = 'dashboard-widgets' | ||
|
|
||
| const StyledImage = styled.img` | ||
| max-width: 64px; | ||
| max-height: 64px; | ||
| width: 64px; | ||
| height: 64px; | ||
| ` | ||
|
|
||
| const StyledLink = styled(Link)` | ||
| margin-top: 10px; | ||
| text-decoration: none; | ||
| ` | ||
|
|
||
| const StyledRow = styled(Row)` | ||
| gap: 24px; | ||
| flex-wrap: inherit; | ||
| ` | ||
|
|
||
| export const FeaturedApps = (): ReactElement => { | ||
| const { allApps } = useAppList() | ||
| const { address } = useSelector(currentSafe) ?? {} | ||
| const featuredApps = useMemo(() => allApps.filter((app) => app.tags?.includes(FEATURED_APPS_TAGS)), [allApps]) | ||
| const featuredApps = useMemo(() => allApps.filter((app) => app.tags?.includes(FEATURED_APPS_TAG)), [allApps]) | ||
|
|
||
| const routesSlug: SafeRouteParams = { | ||
| shortName: getShortName(), | ||
| safeAddress: address, | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| {featuredApps.map((app) => { | ||
| const appRoute = getSafeAppUrl(app.url, routesSlug) | ||
| return ( | ||
| <StyledRow key={app.id} margin="lg"> | ||
| <Col xs={2}> | ||
| <StyledImage src={app.iconUrl} alt={app.name} /> | ||
| </Col> | ||
| <Col xs={10} layout="column"> | ||
| <Text size="lg" strong> | ||
| {app.description} | ||
| </Text> | ||
| <StyledLink to={appRoute}> | ||
| <Text color="primary" size="lg" strong> | ||
| Use {app.name} | ||
| </Text> | ||
| </StyledLink> | ||
| </Col> | ||
| </StyledRow> | ||
| ) | ||
| })} | ||
| </> | ||
| <WidgetContainer> | ||
| <WidgetTitle>Safe Apps</WidgetTitle> | ||
| <WidgetBody> | ||
| {featuredApps.map((app) => { | ||
| const appRoute = getSafeAppUrl(app.url, routesSlug) | ||
| return ( | ||
| <Card key={app.id}> | ||
| <Grid container alignItems="center" spacing={3}> | ||
| <Grid item xs={3} md={2}> | ||
| <StyledImage src={app.iconUrl} alt={app.name} /> | ||
| </Grid> | ||
| <Grid item xs={9} md={10}> | ||
| <Box mb={1}> | ||
| <Text size="xl">{app.description}</Text> | ||
| </Box> | ||
| <StyledLink to={appRoute}> | ||
| <Text color="primary" size="lg" strong> | ||
| Use {app.name} | ||
| </Text> | ||
| </StyledLink> | ||
| </Grid> | ||
| </Grid> | ||
| </Card> | ||
| ) | ||
| })} | ||
| </WidgetBody> | ||
| </WidgetContainer> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.