From 5bcd5835dd9e1a4f5cec5218cc309a073aa18550 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Mon, 12 Aug 2024 17:35:22 +0200
Subject: [PATCH 1/3] refactor: mnemonic success page

---
 .../app/pages/accounts/BackupMnemonicPage.tsx | 198 +++++++-----------
 1 file changed, 76 insertions(+), 122 deletions(-)

diff --git a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
index 329f37f3d93..b91da4910a9 100644
--- a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
@@ -2,10 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { CardLayout } from '_app/shared/card-layout';
-import Alert from '_components/alert';
-import Loading from '_components/loading';
-import { PageTemplate } from '_components/PageTemplate';
 import {
     Button,
     ButtonType,
@@ -15,165 +11,123 @@ import {
     InfoBoxType,
     TextArea,
 } from '@iota/apps-ui-kit';
-import { Info } from '@iota/ui-icons';
+import { Exclamation, Info } from '@iota/ui-icons';
 import { useEffect, useMemo, useState } from 'react';
-import { Navigate, useLocation, useNavigate, useParams } from 'react-router-dom';
 import toast from 'react-hot-toast';
+import { Navigate, useNavigate, useParams } from 'react-router-dom';
 
-import { VerifyPasswordModal } from '../../components/accounts/VerifyPasswordModal';
+import { PageTemplate } from '_components/PageTemplate';
+import Loading from '_components/loading';
+import { AccountSourceType } from '_src/background/account-sources/AccountSource';
 import { useAccountSources } from '../../hooks/useAccountSources';
 import { useExportPassphraseMutation } from '../../hooks/useExportPassphraseMutation';
-import { AccountSourceType } from '_src/background/account-sources/AccountSource';
 
 export function BackupMnemonicPage() {
-    const [passwordCopied, setPasswordCopied] = useState(false);
-    const [passphraseCopied, setPassphraseCopied] = useState(false);
+    const [mnemonicCopied, setMnemonicCopied] = useState(false);
+    const [mnemonicBackedUp, setMnemonicBackedUp] = useState(false);
 
-    const { state } = useLocation();
     const { accountSourceID } = useParams();
     const { data: accountSources, isPending } = useAccountSources();
     const selectedSource = useMemo(
         () => accountSources?.find(({ id }) => accountSourceID === id),
         [accountSources, accountSourceID],
     );
-    const isOnboardingFlow = !!state?.onboarding;
-
-    const [showPasswordDialog, setShowPasswordDialog] = useState(false);
-    const [passwordConfirmed, setPasswordConfirmed] = useState(false);
-    const requirePassword = !isOnboardingFlow || !!selectedSource?.isLocked;
     const passphraseMutation = useExportPassphraseMutation();
+
+    const navigate = useNavigate();
+    if (!isPending && selectedSource?.type !== AccountSourceType.Mnemonic) {
+        return <Navigate to="/" replace />;
+    }
+
     useEffect(() => {
         (async () => {
-            if (
-                (requirePassword && !passwordConfirmed) ||
-                !passphraseMutation.isIdle ||
-                !accountSourceID
-            ) {
+            if (!passphraseMutation.isIdle || !accountSourceID) {
                 return;
             }
             passphraseMutation.mutate({ accountSourceID: accountSourceID });
         })();
-    }, [requirePassword, passwordConfirmed, accountSourceID, passphraseMutation]);
-    useEffect(() => {
-        if (requirePassword && !passwordConfirmed && !showPasswordDialog) {
-            setShowPasswordDialog(true);
-        }
-    }, [requirePassword, passwordConfirmed, showPasswordDialog]);
-    const navigate = useNavigate();
-    if (!isPending && selectedSource?.type !== AccountSourceType.Mnemonic) {
-        return <Navigate to="/" replace />;
-    }
+    }, [accountSourceID, passphraseMutation]);
 
-    const handleCopy = async () => {
+    async function handleCopy() {
         if (!passphraseMutation?.data) {
             return;
         }
         try {
             await navigator.clipboard.writeText(passphraseMutation.data.join(' '));
-            setPassphraseCopied(true);
+            setMnemonicCopied(true);
             setTimeout(() => {
-                setPassphraseCopied(false);
+                setMnemonicCopied(false);
             }, 1000);
         } catch {
             toast.error('Failed to copy');
         }
-    };
+    }
 
     return (
         <PageTemplate title="Export Mnemonic" isTitleCentered>
             <Loading loading={isPending}>
-                {showPasswordDialog ? (
-                    <CardLayout>
-                        <VerifyPasswordModal
-                            open
-                            onClose={() => {
-                                navigate(-1);
-                            }}
-                            onVerify={async (password) => {
-                                await passphraseMutation.mutateAsync({
-                                    password,
-                                    accountSourceID: selectedSource!.id,
-                                });
-                                setPasswordConfirmed(true);
-                                setShowPasswordDialog(false);
-                            }}
+                <div className="flex h-full flex-col items-center justify-between">
+                    <div className="flex flex-col gap-md">
+                        <h3 className="text-center text-headline-lg text-neutral-10">
+                            Wallet Created Successfully!
+                        </h3>
+                        <InfoBox
+                            icon={<Info />}
+                            type={InfoBoxType.Default}
+                            title={
+                                'Never disclose your secret mnemonic. Anyone can take over your wallet with it.'
+                            }
+                            style={InfoBoxStyle.Default}
                         />
-                    </CardLayout>
-                ) : (
-                    <div
-                        className={`flex h-full flex-col items-center ${isOnboardingFlow ? 'justify-between' : ''}`}
-                    >
-                        <div className="flex flex-col gap-md">
-                            {isOnboardingFlow && (
-                                <h3 className="text-center text-headline-lg text-neutral-10">
-                                    Wallet Created Successfully!
-                                </h3>
-                            )}
-                            <InfoBox
-                                icon={<Info />}
-                                type={InfoBoxType.Default}
-                                title={
-                                    'Never disclose your secret mnemonic. Anyone can take over your wallet with it.'
-                                }
-                                style={InfoBoxStyle.Default}
-                            />
 
-                            <div className="flex flex-grow flex-col flex-nowrap">
-                                <Loading loading={passphraseMutation.isPending}>
-                                    {passphraseMutation.data ? (
-                                        <>
-                                            <TextArea
-                                                value={passphraseMutation.data.join(' ')}
-                                                isVisibilityToggleEnabled
-                                                rows={5}
-                                            />
-                                        </>
-                                    ) : (
-                                        <Alert>
-                                            {(passphraseMutation.error as Error)?.message ||
-                                                'Something went wrong'}
-                                        </Alert>
-                                    )}
-                                </Loading>
-                            </div>
-                            {isOnboardingFlow && (
-                                <div className="flex justify-end">
-                                    <Button
-                                        onClick={handleCopy}
-                                        type={ButtonType.Secondary}
-                                        text={passphraseCopied ? 'Copied' : 'Copy'}
+                        <div className="flex flex-grow flex-col flex-nowrap">
+                            <Loading loading={passphraseMutation.isPending}>
+                                {passphraseMutation.data ? (
+                                    <>
+                                        <TextArea
+                                            value={passphraseMutation.data.join(' ')}
+                                            isVisibilityToggleEnabled
+                                            rows={5}
+                                        />
+                                    </>
+                                ) : (
+                                    <InfoBox
+                                        type={InfoBoxType.Default}
+                                        supportingText={
+                                            (passphraseMutation.error as Error)?.message ||
+                                            'Something went wrong'
+                                        }
+                                        icon={<Exclamation />}
+                                        style={InfoBoxStyle.Elevated}
                                     />
-                                </div>
-                            )}
+                                )}
+                            </Loading>
                         </div>
-                        {isOnboardingFlow ? (
-                            <div className="flex w-full flex-col">
-                                <div className="flex w-full py-sm--rs">
-                                    <Checkbox
-                                        name="recovery-phrase"
-                                        label="I saved my recovery phrase"
-                                        onCheckedChange={() => setPasswordCopied(!passwordCopied)}
-                                    />
-                                </div>
-                                <div className="pt-sm--rs" />
-                                <Button
-                                    onClick={() => navigate('/')}
-                                    type={ButtonType.Primary}
-                                    disabled={!passwordCopied && isOnboardingFlow}
-                                    text="Open Wallet"
-                                />
-                            </div>
-                        ) : (
-                            <div className="flex w-full flex-col pt-sm">
-                                <Button
-                                    onClick={handleCopy}
-                                    type={ButtonType.Primary}
-                                    text={passphraseCopied ? 'Copied' : 'Copy'}
-                                />
-                            </div>
-                        )}
+                        <div className="flex justify-end">
+                            <Button
+                                onClick={handleCopy}
+                                type={ButtonType.Secondary}
+                                text={mnemonicCopied ? 'Copied' : 'Copy'}
+                            />
+                        </div>
+                    </div>
+                    <div className="flex w-full flex-col">
+                        <div className="flex w-full py-sm--rs">
+                            <Checkbox
+                                name="recovery-phrase"
+                                label="I saved my mnemonic"
+                                onCheckedChange={() => setMnemonicBackedUp(!mnemonicBackedUp)}
+                            />
+                        </div>
+                        <div className="pt-sm--rs" />
+                        <Button
+                            onClick={() => navigate('/')}
+                            type={ButtonType.Primary}
+                            disabled={!mnemonicBackedUp}
+                            text="Open Wallet"
+                        />
                     </div>
-                )}
+                </div>
             </Loading>
         </PageTemplate>
     );

From a2c85e9b40a4a725f0278e0360b6771f76746314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 13 Aug 2024 17:02:04 +0200
Subject: [PATCH 2/3] feat: hide copy button if mnemonic is encrypted

---
 .../ui/app/pages/accounts/BackupMnemonicPage.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
index b91da4910a9..bb2623983e6 100644
--- a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
@@ -103,13 +103,15 @@ export function BackupMnemonicPage() {
                                 )}
                             </Loading>
                         </div>
-                        <div className="flex justify-end">
-                            <Button
-                                onClick={handleCopy}
-                                type={ButtonType.Secondary}
-                                text={mnemonicCopied ? 'Copied' : 'Copy'}
-                            />
-                        </div>
+                        {false && (
+                            <div className="flex justify-end">
+                                <Button
+                                    onClick={handleCopy}
+                                    type={ButtonType.Secondary}
+                                    text={mnemonicCopied ? 'Copied' : 'Copy'}
+                                />
+                            </div>
+                        )}
                     </div>
                     <div className="flex w-full flex-col">
                         <div className="flex w-full py-sm--rs">

From 36513593f61c53b45175af5cf42bf03864837662 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bego=C3=B1a=20Alvarez?= <balvarez@boxfish.studio>
Date: Tue, 13 Aug 2024 17:06:06 +0200
Subject: [PATCH 3/3] fix: pushed test data

---
 apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
index bb2623983e6..dbfa195a878 100644
--- a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
+++ b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx
@@ -103,7 +103,7 @@ export function BackupMnemonicPage() {
                                 )}
                             </Loading>
                         </div>
-                        {false && (
+                        {passphraseMutation.data && (
                             <div className="flex justify-end">
                                 <Button
                                     onClick={handleCopy}