From ce2702a17bc8d1963cd42219332c367d66e0bf2a Mon Sep 17 00:00:00 2001 From: Aaron Cook Date: Mon, 20 Nov 2023 10:33:43 +0100 Subject: [PATCH] feat: recovery dashboard widget (#2768) * feat: recovery dashboard widget * fix: remove relaying widget * fix: `tx-builder.spec` test * fix: badge colour * fix: test --- public/images/common/recovery.svg | 11 +++ src/components/dashboard/Recovery/index.tsx | 48 +++++++++++ .../dashboard/Recovery/styles.module.css | 32 ++++++++ src/components/dashboard/Relaying/index.tsx | 80 ------------------- .../dashboard/Relaying/styles.module.css | 33 -------- src/components/dashboard/index.tsx | 12 +-- src/hooks/__tests__/useLoadRecovery.test.ts | 6 ++ 7 files changed, 103 insertions(+), 119 deletions(-) create mode 100644 public/images/common/recovery.svg create mode 100644 src/components/dashboard/Recovery/index.tsx create mode 100644 src/components/dashboard/Recovery/styles.module.css delete mode 100644 src/components/dashboard/Relaying/index.tsx delete mode 100644 src/components/dashboard/Relaying/styles.module.css diff --git a/public/images/common/recovery.svg b/public/images/common/recovery.svg new file mode 100644 index 0000000000..70e4d13a9e --- /dev/null +++ b/public/images/common/recovery.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/components/dashboard/Recovery/index.tsx b/src/components/dashboard/Recovery/index.tsx new file mode 100644 index 0000000000..ec5e5faa8d --- /dev/null +++ b/src/components/dashboard/Recovery/index.tsx @@ -0,0 +1,48 @@ +import { Box, Button, Card, Chip, Grid, Typography } from '@mui/material' +import type { ReactElement } from 'react' + +import RecoveryLogo from '@/public/images/common/recovery.svg' +import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled' +import { useDarkMode } from '@/hooks/useDarkMode' + +import css from './styles.module.css' + +export function Recovery(): ReactElement { + const isDarkMode = useDarkMode() + + const onClick = () => { + // TODO: Open enable recovery flow + } + + return ( + + + New in {'Safe{Wallet}'} + + + + + + + + + + + + Introducing account recovery{' '} + + + + + Ensure that you never lose access to your funds by choosing a guardian to recover your account. + + + + + + + + ) +} diff --git a/src/components/dashboard/Recovery/styles.module.css b/src/components/dashboard/Recovery/styles.module.css new file mode 100644 index 0000000000..df21b43216 --- /dev/null +++ b/src/components/dashboard/Recovery/styles.module.css @@ -0,0 +1,32 @@ +.label { + font-weight: 700; + margin-bottom: var(--space-2); +} + +.card { + padding: var(--space-4); + height: inherit; +} + +.grid { + display: flex; + align-items: center; + height: inherit; + gap: var(--space-3); +} + +.wrapper { + display: flex; + align-items: center; + gap: var(--space-1); +} + +.title { + font-weight: 700; + display: inline; +} + +.chip { + border-radius: 4px; + font-size: 12px; +} diff --git a/src/components/dashboard/Relaying/index.tsx b/src/components/dashboard/Relaying/index.tsx deleted file mode 100644 index 345b42b651..0000000000 --- a/src/components/dashboard/Relaying/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { WidgetBody, WidgetContainer } from '@/components/dashboard/styled' -import { Box, Card, Divider, Skeleton, Stack, SvgIcon, Typography } from '@mui/material' -import { MAX_HOUR_RELAYS, useRelaysBySafe } from '@/hooks/useRemainingRelays' -import { OVERVIEW_EVENTS } from '@/services/analytics' -import Track from '@/components/common/Track' -import InfoIcon from '@/public/images/notifications/info.svg' -import GasStationIcon from '@/public/images/common/gas-station.svg' -import ExternalLink from '@/components/common/ExternalLink' -import classnames from 'classnames' -import css from './styles.module.css' -import { HelpCenterArticle } from '@/config/constants' -import { useCurrentChain } from '@/hooks/useChains' -import { SPONSOR_LOGOS } from '@/components/tx/SponsoredBy' - -const Relaying = () => { - const chain = useCurrentChain() - const [relays, relaysError] = useRelaysBySafe() - - const limit = relays?.limit || MAX_HOUR_RELAYS - - return ( - - - New in {'Safe{Wallet}'} - - - - - - - - - - - Gas fees sponsored by - - {chain?.chainName} - - {chain?.chainName} - - - - Benefit from a gasless experience powered by Gelato and Safe. Experience gasless UX for the next - month! - - - Read more - - - - - - Transactions per hour - - {relays !== undefined ? ( - - - {relaysError ? ( - {limit} per hour - ) : ( - - {relays.remaining} of {limit} - - )} - - ) : ( - - )} - - - - - ) -} - -export default Relaying diff --git a/src/components/dashboard/Relaying/styles.module.css b/src/components/dashboard/Relaying/styles.module.css deleted file mode 100644 index cc02616d25..0000000000 --- a/src/components/dashboard/Relaying/styles.module.css +++ /dev/null @@ -1,33 +0,0 @@ -.relayingChip { - padding: var(--space-1); - border-radius: 6px; - height: 30px; - background-color: var(--color-secondary-light); - color: var(--color-static-main); - display: flex; - align-items: center; - gap: var(--space-1); -} - -.relayingChip.unavailable { - background-color: var(--color-error-light); -} - -.chipSkeleton { - height: 30px; - width: 80px; -} - -.icon { - padding: 4px; - border-radius: 6px; - border: 1.3px solid var(--color-text-primary); - width: 34px; - height: 34px; - margin-right: 12px; -} - -.gcLogo { - width: 16px; - height: 16px; -} diff --git a/src/components/dashboard/index.tsx b/src/components/dashboard/index.tsx index 497aed2b7e..6d30bb0bac 100644 --- a/src/components/dashboard/index.tsx +++ b/src/components/dashboard/index.tsx @@ -7,14 +7,14 @@ import SafeAppsDashboardSection from '@/components/dashboard/SafeAppsDashboardSe import GovernanceSection from '@/components/dashboard/GovernanceSection/GovernanceSection' import CreationDialog from '@/components/dashboard/CreationDialog' import { useRouter } from 'next/router' -import Relaying from '@/components/dashboard/Relaying' +import { Recovery } from './Recovery' import { FEATURES } from '@/utils/chains' import { useHasFeature } from '@/hooks/useChains' import { CREATION_MODAL_QUERY_PARM } from '../new-safe/create/logic' const Dashboard = (): ReactElement => { const router = useRouter() - const supportsRelaying = useHasFeature(FEATURES.RELAYING) + const supportsRecovery = useHasFeature(FEATURES.RECOVERY) const { [CREATION_MODAL_QUERY_PARM]: showCreationModal = '' } = router.query return ( @@ -28,13 +28,13 @@ const Dashboard = (): ReactElement => { - - + + - {supportsRelaying ? ( + {supportsRecovery ? ( - + ) : null} diff --git a/src/hooks/__tests__/useLoadRecovery.test.ts b/src/hooks/__tests__/useLoadRecovery.test.ts index fb77e655c7..f4b693b873 100644 --- a/src/hooks/__tests__/useLoadRecovery.test.ts +++ b/src/hooks/__tests__/useLoadRecovery.test.ts @@ -127,6 +127,12 @@ describe('useLoadRecovery', () => { txNonce, queueNonce, queue: [ + { + ...transactionsAdded[0], + timestamp: 69, + validFrom: BigNumber.from(69).add(txCooldown), + expiresAt: null, + }, { ...transactionsAdded[1], timestamp: 420,