feat: add alert prompt before deleting the account (#376)

Co-authored-by: bigint <69431456+bigint@users.noreply.github.com>

src/components/Settings/Delete/index.tsx

@@ -4,15 +4,18 @@ import { GridItemEight, GridItemFour, GridLayout } from '@components/GridLayout'
 import UserProfile from '@components/Shared/UserProfile';
 import { Button } from '@components/UI/Button';
 import { Card, CardBody } from '@components/UI/Card';
+import { Modal } from '@components/UI/Modal';
 import { Spinner } from '@components/UI/Spinner';
+import { WarningMessage } from '@components/UI/WarningMessage';
 import Seo from '@components/utils/Seo';
 import { CreateBurnProfileBroadcastItemResult } from '@generated/types';
 import { TrashIcon } from '@heroicons/react/outline';
+import { ExclamationIcon } from '@heroicons/react/solid';
 import { Mixpanel } from '@lib/mixpanel';
 import omit from '@lib/omit';
 import splitSignature from '@lib/splitSignature';
 import Cookies from 'js-cookie';
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import toast from 'react-hot-toast';
 import { APP_NAME, ERROR_MESSAGE, LENSHUB_PROXY, SIGN_WALLET } from 'src/constants';
 import Custom404 from 'src/pages/404';
@@ -51,6 +54,7 @@ const CREATE_BURN_PROFILE_TYPED_DATA_MUTATION = gql`
 `;
 
 const DeleteSettings: FC = () => {
+  const [showWarningModal, setShowWarningModal] = useState<boolean>(false);
   const userSigNonce = useAppStore((state) => state.userSigNonce);
   const setUserSigNonce = useAppStore((state) => state.setUserSigNonce);
   const setIsConnected = useAppPersistStore((state) => state.setIsConnected);
@@ -133,6 +137,8 @@ const DeleteSettings: FC = () => {
     });
   };
 
+  const isDeleting = typedDataLoading || signLoading || writeLoading;
+
   if (!currentUser) return <Custom404 />;
 
   return (
@@ -162,17 +168,39 @@ const DeleteSettings: FC = () => {
             </div>
             <Button
               variant="danger"
-              icon={
-                typedDataLoading || signLoading || writeLoading ? (
-                  <Spinner variant="danger" size="xs" />
-                ) : (
-                  <TrashIcon className="w-5 h-5" />
-                )
-              }
-              onClick={handleDelete}
+              icon={isDeleting ? <Spinner variant="danger" size="xs" /> : <TrashIcon className="w-5 h-5" />}
+              disabled={isDeleting}
+              onClick={() => setShowWarningModal(true)}
             >
-              {typedDataLoading || signLoading || writeLoading ? 'Deleting...' : 'Delete your account'}
+              {isDeleting ? 'Deleting...' : 'Delete your account'}
             </Button>
+            <Modal
+              title="Danger Zone"
+              icon={<ExclamationIcon className="w-5 h-5 text-red-500" />}
+              show={showWarningModal}
+              onClose={() => setShowWarningModal(false)}
+            >
+              <div className="p-5 space-y-3">
+                <WarningMessage
+                  title="Are you sure?"
+                  message={
+                    <div className="leading-6">
+                      Confirm that you have read all consequences and want to delete your account anyway
+                    </div>
+                  }
+                />
+                <Button
+                  variant="danger"
+                  icon={<TrashIcon className="w-5 h-5" />}
+                  onClick={() => {
+                    setShowWarningModal(false);
+                    handleDelete();
+                  }}
+                >
+                  Yes, delete my account
+                </Button>
+              </div>
+            </Modal>
           </CardBody>
         </Card>
       </GridItemEight>