diff --git a/src/components/dashboard/CreationDialog/index.tsx b/src/components/dashboard/CreationDialog/index.tsx index 07a417f4e5..9133386e14 100644 --- a/src/components/dashboard/CreationDialog/index.tsx +++ b/src/components/dashboard/CreationDialog/index.tsx @@ -1,5 +1,10 @@ +import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice' +import useChainId from '@/hooks/useChainId' +import useSafeInfo from '@/hooks/useSafeInfo' +import { useAppSelector } from '@/store' +import type { PredictedSafeProps } from '@safe-global/protocol-kit' import React, { type ElementType } from 'react' -import { Box, Button, Dialog, DialogContent, Grid, SvgIcon, Typography } from '@mui/material' +import { Alert, Box, Button, Dialog, DialogContent, Grid, Link, SvgIcon, Typography } from '@mui/material' import { useRouter } from 'next/router' import HomeIcon from '@/public/images/sidebar/home.svg' @@ -27,11 +32,34 @@ const HintItem = ({ Icon, title, description }: { Icon: ElementType; title: stri ) } +const getExportFileName = () => { + const today = new Date().toISOString().slice(0, 10) + return `safe-backup-${today}.json` +} + +const backupSafe = (chainId: string, safeAddress: string, undeployedSafe: PredictedSafeProps) => { + const data = JSON.stringify({ chainId, safeAddress, safeProps: undeployedSafe }, null, 2) + + const blob = new Blob([data], { type: 'text/json' }) + const link = document.createElement('a') + + link.download = getExportFileName() + link.href = window.URL.createObjectURL(blob) + link.dataset.downloadurl = ['text/json', link.download, link.href].join(':') + link.dispatchEvent(new MouseEvent('click')) + + // TODO: Track this as an event + // trackEvent(COUNTERFACTUAL_EVENTS.EXPORT_SAFE) +} + const CreationDialog = () => { const router = useRouter() const [open, setOpen] = React.useState(true) const [remoteSafeApps = []] = useRemoteSafeApps() const chain = useCurrentChain() + const chainId = useChainId() + const { safeAddress } = useSafeInfo() + const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, safeAddress)) const onClose = () => { const { [CREATION_MODAL_QUERY_PARM]: _, ...query } = router.query @@ -49,7 +77,8 @@ const CreationDialog = () => { Congratulations on your first step to truly unlock ownership. Enjoy the experience and discover our app. - + + { description="Have any questions? Check out our collection of articles." /> + + {undeployedSafe && ( + + We recommend{' '} + { + e.preventDefault() + backupSafe(chainId, safeAddress, undeployedSafe) + }} + > + backing up your Safe Account + {' '} + in case you lose access to this device. + + )} +