Add account data deletion functionality

locales/en.json

@@ -323,6 +323,17 @@
     },
     "bodyUndeployedToken": "Account not verified"
   },
+  "RemoveYourData": {
+    "titleText": "Do you want to delete your personal profile data?",
+    "bodyText": "This action will delete your personal avatar, username and email from our databases.",
+    "bodyText2": "This action will not delete any transaction data or trust interactions. Such data is stored on Gnosis Chain blockchain and cannot be deleted by anyone. However, your blockchain transactions will no longer be traceable or linked to your username or avatar.",
+    "bodyText3": "Upon deletion you can chose to log out. You may still recover your account in the future by using your magic words and edit your profile with a new profile data. If you do not log in within 90 days, your UBI payouts will be stopped forever. It is also possible to continue to use circles.garden without an alias, avatar or email.",
+    "bodyText4": "Please note that data deletion will not happen across wallets. You will have to do profile data deletion for your personal wallet and any shared wallets separately before logging out.",
+    "btnText": "I would like to proceed with my account data deletion",
+    "confirmationText": "You have successfully deleted your profile data",
+    "confirmationDelete": "Delete",
+    "confirmationCancel": "Cancel"
+  },
   "QRCodeScanner": {
     "notificationError": "Could not open QR code scanner: {error}."
   },

src/components/RemoveYourData.js

@@ -0,0 +1,118 @@
+import { Box, Typography } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+
+import Button from '~/components/Button';
+import DialogInfo from '~/components/DialogInfo';
+import translate from '~/services/locale';
+import notify, { NotificationsTypes } from '~/store/notifications/actions';
+import logError, { translateErrorForUser } from '~/utils/debug';
+
+const useStyles = makeStyles(() => ({
+  textContainer: {
+    maxWidth: '250px',
+    margin: '0 auto',
+    marginBottom: '20px',
+  },
+  btnContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    marginTop: '32px',
+  },
+}));
+
+const RemoveYourData = () => {
+  const classes = useStyles();
+  const dispatch = useDispatch();
+
+  const [isOpenDialogCloseInfo, setIsOpenDialogCloseInfo] = useState(false);
+
+  const dialogCloseInfoHandler = () => {
+    setIsOpenDialogCloseInfo(false);
+    try {
+      // TODO add delete logic
+
+      dispatch(
+        notify({
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translate('RemoveYourData.confirmationText')}
+            </Typography>
+          ),
+          type: NotificationsTypes.SUCCESS,
+        }),
+      );
+    } catch (error) {
+      logError(error);
+      dispatch(
+        notify({
+          text: (
+            <Typography classes={{ root: 'body4_white' }} variant="body4">
+              {translateErrorForUser(error)}
+            </Typography>
+          ),
+          type: NotificationsTypes.ERROR,
+        }),
+      );
+    }
+  };
+
+  const dialogOpenInfoHandler = () => {
+    setIsOpenDialogCloseInfo(true);
+  };
+
+  const dialogContentClose = (
+    <Box className={classes.dialogContentContainer}>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText')}
+      </Typography>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText2')}
+      </Typography>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText3')}
+      </Typography>
+      <Typography align="center" mb={2}>
+        {translate('RemoveYourData.bodyText4')}
+      </Typography>
+      <Box className={classes.btnContainer}>
+        <Button
+          className={classes.continueButton}
+          fullWidth
+          onClick={dialogCloseInfoHandler}
+        >
+          {translate('RemoveYourData.confirmationDelete')}
+        </Button>
+        <Button
+          fullWidth
+          isText
+          onClick={() => setIsOpenDialogCloseInfo(false)}
+        >
+          {translate('RemoveYourData.confirmationCancel')}
+        </Button>
+      </Box>
+    </Box>
+  );
+
+  return (
+    <Box>
+      <DialogInfo
+        dialogContent={dialogContentClose}
+        fullWidth
+        handleClose={() => setIsOpenDialogCloseInfo(false)}
+        isBtnClose={false}
+        isOpen={isOpenDialogCloseInfo}
+        maxWidth={'xs'}
+        title={translate('RemoveYourData.titleText')}
+      />
+      <Button fullWidth isText onClick={dialogOpenInfoHandler}>
+        {translate('RemoveYourData.btnText')}
+      </Button>
+    </Box>
+  );
+};
+
+export default RemoveYourData;

src/views/EditProfile.js

@@ -17,6 +17,7 @@ import CheckboxTerms from '~/components/CheckboxTerms';
 import DialogInfo from '~/components/DialogInfo';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
+import RemoveYourData from '~/components/RemoveYourData';
 import UploadFromCamera from '~/components/UploadFromCamera';
 import VerifiedEmailInput from '~/components/VerifiedEmailInput';
 import VerifiedUsernameInput from '~/components/VerifiedUsernameInput';
@@ -510,6 +511,7 @@ const EditProfile = () => {
                 </>
               )}
             </Box>
+            <RemoveYourData />
           </Box>
         </Container>
       </View>

src/views/Settings.js

@@ -11,6 +11,7 @@ import CenteredHeading from '~/components/CenteredHeading';
 import DialogBurn from '~/components/DialogBurn';
 import ExternalLink from '~/components/ExternalLink';
 import Header from '~/components/Header';
+import RemoveYourData from '~/components/RemoveYourData';
 import View from '~/components/View';
 import translate from '~/services/locale';
 
@@ -79,6 +80,13 @@ const Settings = () => {
                 </Box>
               </Paper>
             </Grid>
+            <Grid item xs={12}>
+              <Paper>
+                <Box p={2}>
+                  <RemoveYourData />
+                </Box>
+              </Paper>
+            </Grid>
             <Grid item xs={12}>
               <Paper>
                 <Box p={2}>