feat [OPE-893]: FE - Implement accessing seed phrase from within Pearl (#1338)

* style: layout implement

* feat: get phrase from password

* feat: remove alerts after first copy

* style: fix alert order on side panel

* feat: enhance Backup Seed Phrase alert and Recovery Modal UI

* feat: improve RecoveryModal functionality with error handling and message feedback

* feat: implement recovery phrase retrieval and enhance RecoveryModal functionality

* refactor: simplify conditionals and parameter names in BackupSeedPhraseAlert and RecoveryModal

* feat: enhance RecoveryPhraseStep with copy handling and unmount backup logic

* feat: add hooks for recovery seed phrase and password validation with error handling

* feat: integrate recovery seed phrase retrieval with improved error handling and UI feedback

* feat: remove recoveryphrase alert and section if no mnemonic

* chore: merge main

* chore: address pr comments and fix for initial signup

---------

Co-authored-by: mohandast52 <mohandast52@gmail.com>
Co-authored-by: Atatakai <densatsu@mail.ru>

Author: 3 people

frontend/components/MainPageV1/BackupSeedPhraseAlert.tsx

@@ -0,0 +1,45 @@
+import { Button, Flex, Typography } from 'antd';
+import { TbShieldHalfFilled } from 'react-icons/tb';
+
+import { Pages } from '@/enums';
+import {
+  useMnemonicExists,
+  usePageState,
+  useRecoveryPhraseBackup,
+} from '@/hooks';
+
+import { Alert } from '../ui';
+
+const { Text } = Typography;
+
+export const BackupSeedPhraseAlert = () => {
+  const { goto: gotoPage } = usePageState();
+  const { isBackedUp } = useRecoveryPhraseBackup();
+  const { mnemonicExists } = useMnemonicExists();
+
+  // Don't show alert if mnemonic doesn't exist or if already backed up
+  if (!mnemonicExists || isBackedUp) return null;
+
+  return (
+    <Alert
+      type="warning"
+      className="mt-auto mb-16"
+      message={
+        <Flex vertical gap={10}>
+          <TbShieldHalfFilled fontSize={20} />
+          <Text className="text-sm">
+            Back up your Secret Recovery Phrase to never lose access.
+          </Text>
+          <Button
+            type="default"
+            size="small"
+            className="w-fit"
+            onClick={() => gotoPage(Pages.Settings)}
+          >
+            Back Up Recovery Phrase
+          </Button>
+        </Flex>
+      }
+    />
+  );
+};

frontend/components/MainPageV1/Sidebar.tsx

@@ -40,6 +40,7 @@ import {
 } from '@/hooks';
 import { AgentConfig } from '@/types/Agent';
 
+import { BackupSeedPhraseAlert } from './BackupSeedPhraseAlert';
 import { UpdateAvailableAlert } from './UpdateAvailableAlert/UpdateAvailableAlert';
 import { UpdateAvailableModal } from './UpdateAvailableAlert/UpdateAvailableModal';
 
@@ -275,6 +276,7 @@ export const Sidebar = () => {
           </div>
 
           <div>
+            <BackupSeedPhraseAlert />
             <UpdateAvailableAlert />
             <UpdateAvailableModal />
 

frontend/components/MainPageV1/UpdateAvailableAlert/UpdateAvailableAlert.tsx

@@ -22,7 +22,7 @@ export const UpdateAvailableAlert = () => {
   return (
     <Alert
       type="info"
-      className="mt-auto mb-16"
+      className="mt-auto mb-16 text-sm"
       message={
         <Flex vertical gap={2}>
           <TbDownload

frontend/components/PearlWallet/Withdraw/EnterWithdrawalAddress/EnterPasswordBeforeWithdrawal.tsx

@@ -1,10 +1,8 @@
-import { useMutation } from '@tanstack/react-query';
 import { Button, Flex, Input, Typography } from 'antd';
 import { useCallback } from 'react';
 
 import { Alert } from '@/components/ui';
-import { AccountService } from '@/service/Account';
-import { getErrorMessage } from '@/utils/error';
+import { useValidatePassword } from '@/hooks';
 
 const { Text } = Typography;
 
@@ -17,28 +15,6 @@ const PasswordLabel = () => (
   </Text>
 );
 
-const useValidatePassword = () => {
-  const { isPending, isSuccess, isError, mutateAsync } = useMutation({
-    mutationFn: async (password: string) =>
-      await AccountService.loginAccount(password),
-  });
-
-  const validatePassword = useCallback(
-    async (password: string) => {
-      try {
-        await mutateAsync(password);
-        return true;
-      } catch (e) {
-        console.error(getErrorMessage(e));
-        return false;
-      }
-    },
-    [mutateAsync],
-  );
-
-  return { isLoading: isPending, isSuccess, isError, validatePassword };
-};
-
 type EnterPasswordBeforeWithdrawalProps = {
   password: string;
   onPasswordChange: (value: string) => void;

frontend/components/SettingsPage/RecoveryModal.tsx

@@ -0,0 +1,183 @@
+import { Alert, Button, Flex, Form, Input, Typography } from 'antd';
+import { useCallback, useState } from 'react';
+import { TbCopy, TbCopyCheck } from 'react-icons/tb';
+import styled from 'styled-components';
+import { useUnmount } from 'usehooks-ts';
+
+import { COLOR } from '@/constants';
+import { useMessageApi } from '@/context/MessageProvider';
+import { useRecoveryPhraseBackup } from '@/hooks';
+import { ValueOf } from '@/types';
+import { copyToClipboard } from '@/utils';
+
+import { Modal } from '../ui';
+import { useRecoverySeedPhrase } from './useRecoverySeedPhrase';
+
+const { Paragraph } = Typography;
+
+const RecoveryWordContainer = styled.div`
+  padding: 4px 8px;
+  background-color: ${COLOR.GRAY_1};
+  border-radius: 8px;
+`;
+
+const initialDescription =
+  'The Secret Recovery Phrase provides full access to your Pearl wallet and agent funds.';
+const recoveryPhraseDescription =
+  "Store it in a safe place that only you can access and won't forget.";
+
+type RecoveryPhraseStepProps = {
+  phrase: string[];
+  isCopied: boolean;
+  onCopy: (isCopied: boolean) => void;
+};
+const RecoveryPhraseStep = ({
+  phrase,
+  isCopied,
+  onCopy,
+}: RecoveryPhraseStepProps) => {
+  const message = useMessageApi();
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await copyToClipboard(phrase.join(' '));
+      message.success('Recovery phrase copied!');
+      onCopy(true);
+    } catch (e) {
+      message.error('Failed to copy recovery phrase.');
+      console.error(e);
+    }
+  }, [phrase, message, onCopy]);
+
+  return (
+    <Flex vertical gap={12} className="mt-12">
+      <Flex wrap gap={10}>
+        {phrase.map((word: string, index: number) => (
+          <RecoveryWordContainer key={`recovery-word-${index}`}>
+            {word}
+          </RecoveryWordContainer>
+        ))}
+      </Flex>
+      <Button
+        icon={isCopied ? <TbCopyCheck size={16} /> : <TbCopy size={16} />}
+        onClick={handleCopy}
+        type="primary"
+        className="w-full text-sm mt-12"
+      >
+        {isCopied ? 'Copied' : 'Copy to Clipboard'}
+      </Button>
+    </Flex>
+  );
+};
+
+const STEPS = {
+  PASSWORD: 'password',
+  RECOVERY_PHRASE: 'recoveryPhrase',
+} as const;
+
+type RecoveryModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+export const RecoveryModal = ({ open, onClose }: RecoveryModalProps) => {
+  const [form] = Form.useForm();
+  const { isLoading, getRecoverySeedPhrase, errorMessage } =
+    useRecoverySeedPhrase();
+  const { markAsBackedUp } = useRecoveryPhraseBackup();
+
+  const [recoveryPhrase, setRecoveryPhrase] = useState<string[]>([]);
+  const [step, setStep] = useState<ValueOf<typeof STEPS>>('password');
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleReveal = useCallback(
+    async (values: { password: string }) => {
+      try {
+        const data = await getRecoverySeedPhrase(values.password);
+        setRecoveryPhrase(data.mnemonic);
+        setStep(STEPS.RECOVERY_PHRASE);
+      } catch (e: unknown) {
+        console.error(e);
+      }
+    },
+    [setRecoveryPhrase, setStep, getRecoverySeedPhrase],
+  );
+
+  const onCopy = useCallback((copied: boolean) => {
+    setIsCopied(copied);
+  }, []);
+
+  // Mark recovery phrase as backed up on unmount if it was copied to clipboard
+  // and the recovery phrase exists.
+  useUnmount(() => {
+    if (recoveryPhrase && isCopied) {
+      markAsBackedUp();
+    }
+  });
+
+  const StepsAction =
+    step === STEPS.PASSWORD ? (
+      <>
+        <Paragraph className="mt-8 mb-0 text-neutral-secondary">
+          Enter your Pearl password to continue.
+        </Paragraph>
+        {errorMessage && (
+          <Alert
+            message={errorMessage}
+            type="error"
+            showIcon
+            className="mt-12 w-full"
+          />
+        )}
+        <Form
+          form={form}
+          onFinish={handleReveal}
+          layout="vertical"
+          className="w-full mt-12"
+        >
+          <Form.Item
+            label="Password"
+            name="password"
+            rules={[{ required: true, message: 'Please enter your password' }]}
+          >
+            <Input.Password disabled={isLoading} />
+          </Form.Item>
+
+          <Flex justify="flex-end" gap={12} className="w-full">
+            <Button onClick={onClose}>Cancel</Button>
+            <Form.Item className="mb-0">
+              <Button
+                type="primary"
+                htmlType="submit"
+                className="w-full"
+                loading={isLoading}
+              >
+                Reveal Recovery Phrase
+              </Button>
+            </Form.Item>
+          </Flex>
+        </Form>
+      </>
+    ) : (
+      <RecoveryPhraseStep
+        phrase={recoveryPhrase}
+        isCopied={isCopied}
+        onCopy={onCopy}
+      />
+    );
+
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      title="Secret Recovery Phrase"
+      description={
+        step === 'password' ? initialDescription : recoveryPhraseDescription
+      }
+      action={StepsAction}
+      size="small"
+      destroyOnHidden
+      closable
+    />
+  );
+};