diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx
index 2db6dd3b89..f182fa11ec 100644
--- a/src/components/AppLayout/index.tsx
+++ b/src/components/AppLayout/index.tsx
@@ -95,7 +95,7 @@ const ContentWrapper = styled.div`
flex-direction: column;
overflow-x: auto;
- padding: 0 16px;
+ padding: 24px 40px;
> :nth-child(1) {
flex-grow: 1;
diff --git a/src/components/Dashboard/CreateSafe.tsx b/src/components/Dashboard/CreateSafe.tsx
index 163a0921df..64712656ad 100644
--- a/src/components/Dashboard/CreateSafe.tsx
+++ b/src/components/Dashboard/CreateSafe.tsx
@@ -1,10 +1,11 @@
import { ReactElement } from 'react'
import styled from 'styled-components'
-import { Button, Title, Text } from '@gnosis.pm/safe-react-components'
+import { Button, Text } from '@gnosis.pm/safe-react-components'
import Link from 'src/components/layout/Link'
import Track from 'src/components/Track'
import { OPEN_SAFE_ROUTE } from 'src/routes/routes'
import { CREATE_SAFE_EVENTS } from 'src/utils/events/createLoadSafe'
+import { Card, WidgetBody, WidgetContainer, WidgetTitle } from 'src/components/Dashboard/styled'
export const CardContentContainer = styled.div`
display: flex;
@@ -19,24 +20,25 @@ export const CardDescriptionContainer = styled.div`
const CreateSafeWidget = (): ReactElement => {
return (
-
-
- Create Safe
-
+
+ Create Safe
+
+
+
+ Create a new Safe that is controlled by one or multiple owners.
+ You will be required to pay a network fee for creating your new Safe.
+
-
- Create a new Safe that is controlled by one or multiple owners.
- You will be required to pay a network fee for creating your new Safe.
-
-
-
-
+
+
+
+
)
}
diff --git a/src/components/Dashboard/FeaturedApps/FeaturedApps.tsx b/src/components/Dashboard/FeaturedApps/FeaturedApps.tsx
index 0f3e4ede25..a4055f5386 100644
--- a/src/components/Dashboard/FeaturedApps/FeaturedApps.tsx
+++ b/src/components/Dashboard/FeaturedApps/FeaturedApps.tsx
@@ -1,20 +1,21 @@
+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)`
@@ -22,15 +23,10 @@ const StyledLink = styled(Link)`
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(),
@@ -38,27 +34,32 @@ export const FeaturedApps = (): ReactElement => {
}
return (
- <>
- {featuredApps.map((app) => {
- const appRoute = getSafeAppUrl(app.url, routesSlug)
- return (
-
-
-
-
-
-
- {app.description}
-
-
-
- Use {app.name}
-
-
-
-
- )
- })}
-
+
+ Safe Apps
+
+ {featuredApps.map((app) => {
+ const appRoute = getSafeAppUrl(app.url, routesSlug)
+ return (
+
+
+
+
+
+
+
+ {app.description}
+
+
+
+ Use {app.name}
+
+
+
+
+
+ )
+ })}
+
+
)
}
diff --git a/src/components/Dashboard/Overview/Overview.tsx b/src/components/Dashboard/Overview/Overview.tsx
index d72e1bf091..00d94d99b7 100644
--- a/src/components/Dashboard/Overview/Overview.tsx
+++ b/src/components/Dashboard/Overview/Overview.tsx
@@ -2,15 +2,21 @@ import { ReactElement } from 'react'
import { useSelector } from 'react-redux'
import styled from 'styled-components'
import { Text, Identicon } from '@gnosis.pm/safe-react-components'
+import { useHistory } from 'react-router-dom'
+import { Box, Grid } from '@material-ui/core'
+import { Skeleton } from '@material-ui/lab'
import { currentSafeLoaded, currentSafeWithNames } from 'src/logic/safe/store/selectors'
import PrefixedEthHashInfo from 'src/components/PrefixedEthHashInfo'
-import Row from 'src/components/layout/Row'
-import Col from 'src/components/layout/Col'
-import { primaryLite, primaryActive, smallFontSize, md } from 'src/theme/variables'
+import { primaryLite, primaryActive, smallFontSize, md, lg } from 'src/theme/variables'
import NetworkLabel from 'src/components/NetworkLabel/NetworkLabel'
import { nftLoadedSelector, nftTokensSelector } from 'src/logic/collectibles/store/selectors'
-import { Skeleton } from '@material-ui/lab'
+import { Card, DashboardTitle } from 'src/components/Dashboard/styled'
+import { WidgetBody, WidgetContainer } from 'src/components/Dashboard/styled'
+import Button from 'src/components/layout/Button'
+import { generateSafeRoute, SAFE_ROUTES } from 'src/routes/routes'
+import { currentChainId } from 'src/logic/config/store/selectors'
+import { getChainById } from 'src/config'
const IdenticonContainer = styled.div`
position: relative;
@@ -34,79 +40,124 @@ const SafeThreshold = styled.div`
`
const StyledText = styled(Text)`
- margin-top: 4px;
+ margin-top: 8px;
font-size: 24px;
font-weight: bold;
`
const NetworkLabelContainer = styled.div`
position: absolute;
- top: 0;
- right: 0;
+ top: ${lg};
+ right: ${lg};
& span {
bottom: auto;
}
`
-const Container = styled.div`
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 100%;
- position: relative;
-`
-
const ValueSkeleton =
+const SkeletonOverview = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tokens
+
+ {ValueSkeleton}
+
+
+
+ NFTs
+
+ {ValueSkeleton}
+
+
+
+)
+
const Overview = (): ReactElement => {
const { address, name, owners, threshold, balances } = useSelector(currentSafeWithNames)
+ const chainId = useSelector(currentChainId)
+ const { shortName } = getChainById(chainId)
const loaded = useSelector(currentSafeLoaded)
const nftTokens = useSelector(nftTokensSelector)
const nftLoaded = useSelector(nftLoadedSelector)
+ const history = useHistory()
+
+ const handleOpenAssets = (): void => {
+ history.push(generateSafeRoute(SAFE_ROUTES.ASSETS_BALANCES, { safeAddress: address, shortName }))
+ }
return (
-
-
-
-
- {loaded ? (
- <>
-
- {threshold}/{owners.length}
-
-
-
- ) : (
-
- )}
-
-
- {loaded ? name : }
-
- {loaded ? : }
-
-
-
-
-
-
-
-
-
-
- Tokens
-
- {loaded ? balances.length : ValueSkeleton}
-
-
-
- NFTs
-
- {nftTokens && {nftLoaded ? nftTokens.length : ValueSkeleton}}
-
-
-
+
+ Dashboard
+
+ {!loaded ? (
+ SkeletonOverview
+ ) : (
+
+
+
+
+
+ {threshold}/{owners.length}
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+
+
+
+ Tokens
+
+ {balances.length}
+
+
+
+ NFTs
+
+ {nftTokens && {nftLoaded ? nftTokens.length : ValueSkeleton}}
+
+
+
+
+
+
+
+
+ )}
+
+
)
}
diff --git a/src/components/Dashboard/PendingTxs/PendingTxListItem.tsx b/src/components/Dashboard/PendingTxs/PendingTxListItem.tsx
index 9f01e86d73..52c1b71652 100644
--- a/src/components/Dashboard/PendingTxs/PendingTxListItem.tsx
+++ b/src/components/Dashboard/PendingTxs/PendingTxListItem.tsx
@@ -9,7 +9,7 @@ import { useAssetInfo } from 'src/routes/safe/components/Transactions/TxList/hoo
import { useKnownAddress } from 'src/routes/safe/components/Transactions/TxList/hooks/useKnownAddress'
import { useTransactionType } from 'src/routes/safe/components/Transactions/TxList/hooks/useTransactionType'
import { getTxTo } from 'src/routes/safe/components/Transactions/TxList/utils'
-import { boldFont, grey400, primary200, sm, smallFontSize } from 'src/theme/variables'
+import { boldFont, grey400, primary200, smallFontSize } from 'src/theme/variables'
import { isMultisigExecutionInfo } from 'src/logic/safe/store/models/types/gateway.d'
import Spacer from 'src/components/Spacer'
import { CustomIconText } from 'src/components/CustomIconText'
@@ -17,19 +17,19 @@ import { TxInfo } from 'src/routes/safe/components/Transactions/TxList/TxCollaps
import { EMPTY_DATA } from 'src/logic/wallets/ethTransactions'
const TransactionToConfirm = styled(Link)`
- min-width: 270px;
- height: 40px;
+ width: 100%;
display: grid;
align-items: center;
- grid-template-columns: 25px 1fr 1fr auto;
+ grid-template-columns: 36px 1fr 1fr auto;
gap: 4px;
- margin: ${sm} auto;
- padding: 4px 16px;
+ margin: 0 auto;
+ padding: 8px 24px;
text-decoration: none;
background-color: ${({ theme }) => theme.colors.white};
border: 2px solid ${grey400};
color: ${({ theme }) => theme.colors.text};
border-radius: 8px;
+ box-sizing: border-box;
`
const StyledConfirmationsCount = styled.div`
@@ -44,6 +44,10 @@ const TxConfirmations = styled.div`
display: flex;
align-items: center;
margin-left: auto;
+
+ & svg {
+ margin-left: 8px;
+ }
`
type PendingTxType = {
diff --git a/src/components/Dashboard/PendingTxs/PendingTxsList.tsx b/src/components/Dashboard/PendingTxs/PendingTxsList.tsx
index 8655490500..f909772b19 100644
--- a/src/components/Dashboard/PendingTxs/PendingTxsList.tsx
+++ b/src/components/Dashboard/PendingTxs/PendingTxsList.tsx
@@ -1,66 +1,118 @@
-import { ReactElement, useMemo } from 'react'
-import { List } from '@material-ui/core'
+import { ReactElement, useMemo, useState } from 'react'
import styled from 'styled-components'
import { useSelector } from 'react-redux'
import Skeleton from '@material-ui/lab/Skeleton/Skeleton'
+import { Link } from 'react-router-dom'
+import { Text } from '@gnosis.pm/safe-react-components'
+import ChevronRightIcon from '@material-ui/icons/ChevronRight'
import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
-import { sm } from 'src/theme/variables'
import { currentChainId } from 'src/logic/config/store/selectors'
import { generateSafeRoute, SAFE_ROUTES } from 'src/routes/routes'
import { getChainById } from 'src/config'
import PendingTxListItem from 'src/components/Dashboard/PendingTxs/PendingTxListItem'
import { currentSafe } from 'src/logic/safe/store/selectors'
import { pendingTransactions } from 'src/logic/safe/store/selectors/gatewayTransactions'
+import { Card, WidgetBody, WidgetContainer, WidgetTitle } from 'src/components/Dashboard/styled'
+import { xs } from 'src/theme/variables'
const SkeletonWrapper = styled.div`
- margin: ${sm} auto;
border-radius: 8px;
overflow: hidden;
`
+const StyledList = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ width: 100%;
+`
+
+const StyledWidgetTitle = styled.div`
+ display: flex;
+ justify-content: space-between;
+`
+
+const StyledLink = styled(Link)`
+ text-decoration: none;
+ color: ${({ theme }) => theme.colors.primary};
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ gap: ${xs};
+ margin-bottom: 10px;
+ padding-right: 26px;
+`
+
+const EmptyState = (
+
+ This Safe has no queued transactions
+
+)
+
const PendingTxsList = ({ size = 5 }: { size?: number }): ReactElement | null => {
const { address } = useSelector(currentSafe)
const chainId = useSelector(currentChainId)
-
const queueTxns = useSelector(pendingTransactions)
+ const { shortName } = getChainById(chainId)
+ const url = generateSafeRoute(SAFE_ROUTES.TRANSACTIONS_QUEUE, { safeAddress: address, shortName })
+ const [totalQueuedTxs, setTotalQueuedTxs] = useState()
const queuedTxsToDisplay: Transaction[] = useMemo(() => {
if (!queueTxns) return []
+ const allQueuedTransactions = Object.values(queueTxns.next).concat(Object.values(queueTxns.queued))
+ setTotalQueuedTxs(allQueuedTransactions.length)
+
return (
- Object.values(queueTxns.next)
- .concat(Object.values(queueTxns.queued))
+ allQueuedTransactions
// take the first (i.e. newest) tx in a group of txns with the same nonce
.map((group: Transaction[]) => group[0])
.slice(0, size)
)
}, [queueTxns, size])
- if (!queueTxns) {
- return (
-
+ const LoadingState = useMemo(
+ () => (
+
{Array.from(Array(size).keys()).map((key) => (
))}
-
- )
- }
+
+ ),
+ [size],
+ )
- if (!queuedTxsToDisplay?.length) {
- return This Safe has no queued transactions
+ const ResultState = useMemo(
+ () => (
+
+ {queuedTxsToDisplay?.map((transaction) => (
+
+ ))}
+
+ ),
+ [queuedTxsToDisplay, url],
+ )
+
+ const getWidgetBody = () => {
+ if (!queueTxns) return LoadingState
+ if (!queuedTxsToDisplay?.length) return EmptyState
+ return ResultState
}
- const { shortName } = getChainById(chainId)
- const url = generateSafeRoute(SAFE_ROUTES.TRANSACTIONS_QUEUE, { safeAddress: address, shortName })
return (
-
- {queuedTxsToDisplay?.map((transaction) => (
-
- ))}
-
+
+
+ Transactions to Sign{totalQueuedTxs ? ` (${totalQueuedTxs})` : ''}
+
+ View All
+
+
+
+ {getWidgetBody()}
+
)
}
diff --git a/src/components/Dashboard/SafeApps/Card.tsx b/src/components/Dashboard/SafeApps/Card.tsx
index 425b82fb5c..bbdb1445c7 100644
--- a/src/components/Dashboard/SafeApps/Card.tsx
+++ b/src/components/Dashboard/SafeApps/Card.tsx
@@ -1,40 +1,40 @@
import { ReactElement, useCallback, useEffect, useState } from 'react'
import styled from 'styled-components'
-import { Text, Title } from '@gnosis.pm/safe-react-components'
+import { Text } from '@gnosis.pm/safe-react-components'
import { Bookmark, BookmarkBorder } from '@material-ui/icons'
-import { IconButton } from '@material-ui/core'
+import { Box, IconButton } from '@material-ui/core'
import { Link, generatePath } from 'react-router-dom'
-import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
-const StyledLink = styled(Link)`
- text-decoration: none;
- color: black;
-`
+import { GENERIC_APPS_ROUTE } from 'src/routes/routes'
+import { md, lg } from 'src/theme/variables'
-export const CARD_WIDTH = 260
export const CARD_HEIGHT = 200
export const CARD_PADDING = 24
-const StyledCard = styled.div`
+const StyledLink = styled(Link)`
+ display: block;
+ text-decoration: none;
+ color: black;
+ height: 100%;
position: relative;
- width: ${CARD_WIDTH}px;
- height: ${CARD_HEIGHT}px;
background-color: white;
border-radius: 8px;
padding: ${CARD_PADDING}px;
+ box-sizing: border-box;
`
const StyledLogo = styled.img`
display: block;
width: auto;
height: 60px;
+ margin-bottom: ${md};
`
const IconBtn = styled(IconButton)`
&.MuiButtonBase-root {
position: absolute;
- top: 10px;
- right: 10px;
+ top: ${lg};
+ right: ${lg};
z-index: 10;
padding: 5px;
}
@@ -77,18 +77,19 @@ const Card = (props: CardProps): ReactElement => {
return (
-
-
-
- {props.name}
+
-
- {props.description}
+
+
+ {props.name}
+
+
+
+ {props.description}
+
- {/* Bookmark button */}
- {localPinned ? : }
-
+ {localPinned ? : }
)
}
diff --git a/src/components/Dashboard/SafeApps/Grid.tsx b/src/components/Dashboard/SafeApps/Grid.tsx
index 8d1f0c1bc9..e43b4c146e 100644
--- a/src/components/Dashboard/SafeApps/Grid.tsx
+++ b/src/components/Dashboard/SafeApps/Grid.tsx
@@ -3,20 +3,18 @@ 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, CARD_WIDTH } from 'src/components/Dashboard/SafeApps/Card'
+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'
-
-const StyledGrid = styled.div`
- display: flex;
- align-items: center;
- gap: 20px;
- flex-wrap: wrap;
-`
+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;
@@ -24,8 +22,6 @@ const SkeletonWrapper = styled.div`
`
const StyledExplorerButton = styled.div`
- width: 260px;
- height: 200px;
background-color: white;
border-radius: 8px;
padding: 24px;
@@ -45,36 +41,29 @@ const StyledLink = styled(Link)`
}
`
-// Transactions Builder && Wallet connect
-const featuredAppsId = ['29', '11']
-
-const getRandomApps = (nonRankedApps: SafeApp[], size: number) => {
- const randomIndexes: string[] = []
- for (let i = 1; randomIndexes.length < size; i++) {
- const randomAppIndex = Math.floor(Math.random() * nonRankedApps.length).toString()
- const randomAppId = nonRankedApps[randomAppIndex].id
+const StyledGrid = styled.div`
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ grid-template-rows: repeat(2, 1fr);
+ gap: 24px;
- // Do not repeat random apps or featured apps
- if (!randomIndexes.includes(randomAppIndex) && !featuredAppsId.includes(randomAppId)) {
- randomIndexes.push(randomAppIndex)
- }
+ @media (max-width: ${screenMd}px) {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
}
- const randomSafeApps: SafeApp[] = []
- randomIndexes.forEach((index) => {
- randomSafeApps.push(nonRankedApps[index])
- })
-
- return randomSafeApps
-}
+ @media (max-width: ${screenSm}px) {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+ }
+`
-const Grid = ({ size = 6 }: { size?: number }): ReactElement => {
+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 topRankedSafeApps: SafeApp[] = []
rankedSafeAppIds.forEach((id) => {
@@ -82,9 +71,12 @@ const Grid = ({ size = 6 }: { size?: number }): ReactElement => {
if (sortedApp) topRankedSafeApps.push(sortedApp)
})
- const nonRankedApps = allApps.filter((app) => !rankedSafeAppIds.includes(app.id))
- // Get random apps that are not ranked
- const randomApps = getRandomApps(nonRankedApps, size - 1 - rankedSafeAppIds.length)
+ const nonRankedApps = allApps.filter(
+ (app) => !rankedSafeAppIds.includes(app.id) && !featuredSafeAppIds.includes(app.id),
+ )
+
+ // 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)
@@ -92,18 +84,27 @@ const Grid = ({ size = 6 }: { size?: number }): ReactElement => {
const path = generatePath(GENERIC_APPS_ROUTE)
- return (
-
-
Safe Apps
- {isLoading ? (
-
- {Array.from(Array(size).keys()).map((key) => (
-
-
+ const LoadingState = useMemo(
+ () => (
+
+ {Array.from(Array(size).keys()).map((key) => (
+
+
+
- ))}
-
- ) : (
+
+ ))}
+
+ ),
+ [size],
+ )
+
+ if (isLoading) return LoadingState
+
+ return (
+
+ Explore our DApp Ecosystem
+
{displayedApps.map((safeApp) => (
{
- )}
-
+
+
)
}
-export default Grid
+export default SafeAppsGrid
diff --git a/src/components/Dashboard/styled.tsx b/src/components/Dashboard/styled.tsx
new file mode 100644
index 0000000000..427a91b14a
--- /dev/null
+++ b/src/components/Dashboard/styled.tsx
@@ -0,0 +1,39 @@
+import { lg, black500, extraLargeFontSize, largeFontSize } from 'src/theme/variables'
+import styled from 'styled-components'
+
+export const WidgetContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+`
+
+export const DashboardTitle = styled.h1`
+ color: ${black500};
+ font-size: ${extraLargeFontSize};
+ margin-top: 0;
+`
+
+export const WidgetTitle = styled.h2`
+ color: ${black500};
+ font-size: ${largeFontSize};
+ margin-top: 0;
+`
+
+export const WidgetBody = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ height: 100%;
+`
+
+export const Card = styled.div`
+ background: #fff;
+ padding: ${lg};
+ border-radius: 8px;
+ flex-grow: 1;
+ position: relative;
+
+ & > h2 {
+ margin-top: 0;
+ }
+`
diff --git a/src/components/NetworkLabel/NetworkLabel.tsx b/src/components/NetworkLabel/NetworkLabel.tsx
index 903272dc85..8930c4eb81 100644
--- a/src/components/NetworkLabel/NetworkLabel.tsx
+++ b/src/components/NetworkLabel/NetworkLabel.tsx
@@ -42,7 +42,7 @@ const StyledLabel = styled.span`
color: ${({ textColor }) => textColor ?? fontColor};
cursor: ${({ onClick }) => (onClick ? 'pointer' : 'inherit')};
text-align: center;
- border-radius: 3px;
+ border-radius: 4px;
text-transform: capitalize;
flex-grow: ${({ flexGrow }) => (flexGrow ? 1 : 'initial')};
`
diff --git a/src/routes/Home/index.tsx b/src/routes/Home/index.tsx
index d61b2cbb15..0ba0190203 100644
--- a/src/routes/Home/index.tsx
+++ b/src/routes/Home/index.tsx
@@ -1,55 +1,34 @@
import { ReactElement } from 'react'
-import styled from 'styled-components'
import Page from 'src/components/layout/Page'
import PendingTxsList from 'src/components/Dashboard/PendingTxs/PendingTxsList'
-import CreateSafeWidget from 'src/components/Dashboard/CreateSafe'
import Overview from 'src/components/Dashboard/Overview/Overview'
-import { lg } from 'src/theme/variables'
import SafeAppsGrid from 'src/components/Dashboard/SafeApps/Grid'
-import Row from 'src/components/layout/Row'
import { FeaturedApps } from 'src/components/Dashboard/FeaturedApps/FeaturedApps'
-
-const Card = styled.div`
- background: #fff;
- padding: ${lg};
- border-radius: 8px;
- flex: 1;
- margin: 10px;
-
- & > h2 {
- margin-top: 0;
- }
-`
+import { Grid } from '@material-ui/core'
function Home(): ReactElement {
return (
-
-
+
+
-
+
-
-
-
-
+
-
-
- Safe Apps
+
-
+
-
- Transactions to Sign
-
-
-
+
+
+
-
-
-
+
+
+
+
)
}
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
index 56a12545ed..6c421fa08f 100644
--- a/src/routes/routes.ts
+++ b/src/routes/routes.ts
@@ -50,7 +50,7 @@ export const LOAD_SAFE_ROUTE = generatePath(LOAD_SPECIFIC_SAFE_ROUTE) // By prov
export const SAFE_ROUTES = {
DASHBOARD: `${ADDRESSED_ROUTE}/home`,
ASSETS_BALANCES: `${ADDRESSED_ROUTE}/balances`, // [SAFE_SECTION_SLUG] === 'balances'
- ASSETS_BALANCES_COLLECTIBLES: `${ADDRESSED_ROUTE}/balances/collectibles`, // [SAFE_SUBSECTION_SLUG] === 'collectibles'
+ ASSETS_BALANCES_COLLECTIBLES: `${ADDRESSED_ROUTE}/balances/nfts`, // [SAFE_SUBSECTION_SLUG] === 'nfts'
LEGACY_COLLECTIBLES: `${ADDRESSED_ROUTE}/balances/collectibles`,
TRANSACTIONS: `${ADDRESSED_ROUTE}/transactions`,
TRANSACTIONS_HISTORY: `${ADDRESSED_ROUTE}/transactions/history`,
diff --git a/src/routes/safe/container/index.tsx b/src/routes/safe/container/index.tsx
index 37007a6e09..ccf9612ee5 100644
--- a/src/routes/safe/container/index.tsx
+++ b/src/routes/safe/container/index.tsx
@@ -101,7 +101,6 @@ const Container = (): React.ReactElement => {
)}
/>
- wrapInSuspense()} />