feat(dev-wallet): adds link to minimal recovery feature (#2547)

kadena-community · Sep 27, 2024 · c77bad9 · c77bad9
1 parent eccd46e
commit c77bad9
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 59 deletions.
diff --git a/packages/apps/dev-wallet/src/App/routes.tsx b/packages/apps/dev-wallet/src/App/routes.tsx
@@ -89,11 +89,11 @@ export const Routes: FC = () => {
       >
         <Route element={<LayoutMini />}>
           <Route
-            path="/backup-recovery-phrase/:keySourceId"
+            path="/backup-recovery-phrase"
             element={<BackupRecoveryPhrase />}
           />
           <Route
-            path="/backup-recovery-phrase/:keySourceId/write-down"
+            path="/backup-recovery-phrase/write-down"
             element={<WriteDownRecoveryPhrase />}
           />
           <Route

diff --git a/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx b/packages/apps/dev-wallet/src/pages/backup-recovery-phrase/backup-recovery-phrase.tsx
@@ -1,28 +1,7 @@
-import { useWallet } from '@/modules/wallet/wallet.hook';
 import { Box, Heading, Text } from '@kadena/kode-ui';
-import { Link, useParams } from 'react-router-dom';
-
-declare const PasswordCredential: {
-  new (passwordCredentialInit: { id: string; password: string }): Credential;
-};
+import { Link } from 'react-router-dom';
 
 export function BackupRecoveryPhrase() {
-  const supportPasswordCredential = 'PasswordCredential' in window;
-  const wallet = useWallet();
-  const { keySourceId } = useParams();
-  const storeRecoveryPhrase: React.MouseEventHandler<HTMLAnchorElement> = (
-    e,
-  ) => {
-    e.preventDefault();
-    if (supportPasswordCredential) {
-      const passwordCredential = new PasswordCredential({
-        id: `${wallet.profile}-dev-wallet-secret`,
-        password: 'my recovery phrase',
-      });
-
-      navigator.credentials.store(passwordCredential);
-    }
-  };
 
   return (
     <>
@@ -33,22 +12,10 @@ export function BackupRecoveryPhrase() {
           everyone with the phrase have access to your assets
         </Text>
         <Heading variant="h5">Choose a method</Heading>
-        <Link to={`/backup-recovery-phrase/${keySourceId}/write-down`}>
+        <Link to={`/backup-recovery-phrase/write-down`}>
           Write down the phrase
         </Link>
         <br />
-        <Link to={`/backup-recovery-phrase/${keySourceId}/export-encrypted`}>
-          Export encrypted phrase
-        </Link>
-        <br />
-        {supportPasswordCredential && (
-          <>
-            <a onClick={storeRecoveryPhrase} href="#">
-              Store encrypted in password storage
-            </a>
-            <br />
-          </>
-        )}
         <Link to="/">Skip for now</Link>
       </Box>
     </>

diff --git a/...s/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx b/...s/apps/dev-wallet/src/pages/backup-recovery-phrase/write-down/confirm-recovery-phrase.tsx
@@ -25,7 +25,7 @@ export function ConfirmRecoveryPhrase({
         <Heading variant="h5">Confirm you wrote it down</Heading>
         <form onSubmit={handleSubmit(confirm)}>
           <label htmlFor="phrase">Enter phrase in the same order</label>
-          <TextField id="phrase" {...register('phrase')} />
+          <TextField type="password" id="phrase" {...register('phrase')} />
           <Button type="submit">Confirm</Button>
         </form>
         {error && <Text>{error}</Text>}

diff --git a/...pps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx b/...pps/dev-wallet/src/pages/backup-recovery-phrase/write-down/write-down-recovery-phrase.tsx
@@ -3,14 +3,13 @@ import {
   IHDChainweaver,
 } from '@/modules/key-source/key-source.repository';
 import { useWallet } from '@/modules/wallet/wallet.hook';
-import { Box, Button, Heading, Text } from '@kadena/kode-ui';
+import { Box, Button, Heading, Stack, Text } from '@kadena/kode-ui';
 import { useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ConfirmRecoveryPhrase } from './confirm-recovery-phrase';
 
 export function WriteDownRecoveryPhrase() {
   const { keySources, decryptSecret, askForPassword } = useWallet();
-  const { keySourceId } = useParams();
   const [mnemonic, setMnemonic] = useState('');
   const [error, setError] = useState('');
   const [readyForConfirmation, setReadyForConfirmation] = useState(false);
@@ -19,7 +18,7 @@ export function WriteDownRecoveryPhrase() {
     setError('');
     try {
       // TODO: this should check the source type of the keySource
-      const keySource = keySources.find((ks) => ks.uuid === keySourceId);
+      const keySource = keySources[0];
       if (!keySource) {
         throw new Error('Key source not found');
       }
@@ -56,7 +55,7 @@ export function WriteDownRecoveryPhrase() {
   }
   return (
     <>
-      <Box margin="md">
+      <Stack flexDirection={'column'}>
         <Heading variant="h5">Write your recovery phrase down</Heading>
         <Text>
           Make sure no one is watching you; consider some malware might take
@@ -66,21 +65,28 @@ export function WriteDownRecoveryPhrase() {
           you should consider everyone with the phrase have access to your
           assets
         </Text>
-        <Heading variant="h5">Enter your password to show the phrase</Heading>
+      </Stack>
+      {mnemonic.length === 0 && (
         <Button type="submit" onClick={decryptMnemonic}>
           Show Phrase
         </Button>
-        {error && <Text>{error}</Text>}
-        <Text size="small">{mnemonic}</Text>
-        <Button
-          type="submit"
-          onPress={() => {
-            setReadyForConfirmation(true);
-          }}
-        >
-          Confirm
-        </Button>
+      )}
+      {error && <Text>{error}</Text>}
+      <Box>
+        {mnemonic.split(' ').map((word, index) => (
+          <>
+            <Text key={index}>
+              {word}
+              {' '}
+            </Text>
+          </>
+        ))}
       </Box>
+      {mnemonic.length > 0 && (
+        <Button type="submit" onClick={() => setReadyForConfirmation(true)}>
+          I have stored my mnemonic key in a safe place
+        </Button>
+      )}
     </>
   );
 }
diff --git a/packages/apps/dev-wallet/src/pages/home/home-page.tsx b/packages/apps/dev-wallet/src/pages/home/home-page.tsx
@@ -9,7 +9,16 @@ import { transactionRepository } from '@/modules/transaction/transaction.reposit
 import { getAccountName } from '@/utils/helpers';
 import { useAsync } from '@/utils/useAsync';
 import { IPactCommand } from '@kadena/client';
-import { Box, Heading, Stack, TabItem, Tabs, Text } from '@kadena/kode-ui';
+import { MonoSave } from '@kadena/kode-icons';
+import {
+  Box,
+  Button,
+  Heading,
+  Stack,
+  TabItem,
+  Tabs,
+  Text,
+} from '@kadena/kode-ui';
 import { Link } from 'react-router-dom';
 import { listClass } from '../account/style.css';
 import { linkClass } from '../select-profile/select-profile.css';
@@ -44,7 +53,14 @@ export function HomePage() {
   return (
     <Box gap={'lg'}>
       <Text>Welcome back</Text>
-      <Heading as="h1">{profile?.name}</Heading>
+      <Heading as="h1">
+        {profile?.name}{' '}
+        <Link to={'/backup-recovery-phrase'}>
+          <Button variant="outlined" startVisual={MonoSave({})}>
+            Backup
+          </Button>
+        </Link>
+      </Heading>
       <Stack gap={'lg'} flexDirection={'column'}>
         <Box className={panelClass} marginBlockStart="xl">
           <Box marginBlockStart={'sm'}>
@@ -53,7 +69,7 @@ export function HomePage() {
         </Box>
         <RecentlyUsedAccounts accounts={accounts} fungibles={fungibles} />
         <Stack className={panelClass} flexDirection={'column'} gap={'lg'}>
-          <Heading variant="h4">Activities</Heading>
+          <Heading variant="h4">Wallet Activities</Heading>
           <Stack>
             <Tabs>
               <TabItem title="Transactions">
@@ -84,7 +100,7 @@ export function RecentlyUsedAccounts({
     fungibles.find((f) => f.contract === contract)?.symbol;
   return (
     <Box className={panelClass} marginBlockStart="xs">
-      <Heading as="h4">Recently used accounts</Heading>
+      <Heading as="h4">Your accounts</Heading>
       {accounts.length ? (
         <Box marginBlockStart="md">
           <ul className={listClass}>

diff --git a/packages/apps/dev-wallet/src/pages/keyset/keyset.tsx b/packages/apps/dev-wallet/src/pages/keyset/keyset.tsx
@@ -138,7 +138,6 @@ export function Keyset() {
         justifyContent={'flex-end'}
       ></Stack>
       <Box className={panelClass} marginBlockStart="xl">
-        <Heading as="h4">Your assets</Heading>
         <Box marginBlockStart={'sm'}>
           <Assets accounts={accounts} fungibles={fungibles} />
         </Box>