move encryption utils to core lib and cleanup

src/app/hooks/useWalletReducer.ts

@@ -33,10 +33,10 @@ const useWalletReducer = () => {
     const wallet = await walletFromSeedPhrase({
       mnemonic: seed,
       index: 0n,
-      network: 'mainnet',
+      network: 'Mainnet',
     });
-    const encryptedSeed = await encryptSeedPhrase(seed, password);
-    dispatch(storeEncryptedSeedAction(encryptedSeed));
+    const encryptSeed = await encryptSeedPhrase(seed, password);
+    dispatch(storeEncryptedSeedAction(encryptSeed));
     dispatch(setWalletAction(wallet));
   };
 

src/app/screens/createPassword/index.tsx

@@ -47,6 +47,7 @@ function CreatePassword(): JSX.Element {
   };
 
   const handleConfirmPassword = async () => {
+    console.log(seedPhrase);
     try {
       const encryptedSeed = await encryptSeedPhrase(seedPhrase, password);
       dispatch(storeEncryptedSeedAction(encryptedSeed));

src/app/screens/landing/index.tsx

@@ -66,7 +66,6 @@ const RestoreButton = styled.button((props) => ({
 
 function Landing(): JSX.Element {
   const { t } = useTranslation('translation', { keyPrefix: 'LANDING_SCREEN' });
-  const navigate = useNavigate();
   const dispatch = useDispatch();
 
   const openInNewTab = async () => {

src/app/screens/onboarding/index.tsx

@@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 import { getIsTermsAccepted, saveHasFinishedOnboarding } from '@utils/localStorage';
-import { StoreState } from '@stores/index';
-import { useSelector } from 'react-redux';
 
 const OnBoardingDotsContainer = styled.div((props) => ({
   display: 'flex',
@@ -101,9 +99,7 @@ function Onboarding(): JSX.Element {
   const [currentStepIndex, setCurrentStepIndex] = useState<number>(0);
   const { t } = useTranslation('translation', { keyPrefix: 'ONBOARDING_SCREEN' });
   const navigate = useNavigate();
-  const { stxAddress } = useSelector((state: StoreState) => ({
-    ...state.walletState,
-  }));
+
   const onboardingViews = [
     {
       image: onboarding1,
@@ -128,7 +124,7 @@ function Onboarding(): JSX.Element {
   const handleClickNext = () => {
     setCurrentStepIndex(currentStepIndex + 1);
   };
-console.log(stxAddress);
+
   const handleSkip = () => {
     const isRestore = localStorage.getItem('isRestore');
     saveHasFinishedOnboarding(true);

src/app/screens/restoreWallet/index.tsx

@@ -1,15 +1,12 @@
 import * as bip39 from 'bip39';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import ConfirmPassword from '@screens/createPassword/confirmPassword';
 import NewPassword from '@screens/createPassword/newPassword';
-import { storeEncryptedSeedAction } from '@stores/wallet/actions/actionCreators';
-import { encryptSeedPhrase } from '@utils/encryptionUtils';
 import { useTranslation } from 'react-i18next';
-import EnterSeedPhrase from './enterSeedphrase';
 import useWalletReducer from '@hooks/useWalletReducer';
+import EnterSeedPhrase from './enterSeedphrase';
 
 const Container = styled.div((props) => ({
   display: 'flex',

src/app/stores/index.ts

@@ -9,16 +9,10 @@ export const storage = new ChromeStorage(chrome.storage.local, chrome.runtime);
 const rootPersistConfig = {
   key: 'root',
   storage,
-  blacklist: ['walletState'],
-};
-
-const walletPersistConfig = {
-  key: 'wallet',
-  storage,
 };
 
 const appReducer = combineReducers({
-  walletState: persistReducer(walletPersistConfig, walletReducer),
+  walletState: walletReducer,
 });
 
 const rootReducer = (state: any, action: any) => appReducer(state, action);

src/app/utils/encryptionUtils.ts

@@ -1,5 +1,6 @@
 import argon2 from 'argon2-browser';
 import { encryptMnemonic, decryptMnemonic } from '@stacks/encryption';
+import { encryptMnemonicWithCallback, decryptMnemonicWithCallback } from '@secretkeylabs/xverse-core/wallet';
 import { getSalt, saveSalt } from './localStorage';
 
 function generateRandomKey(bytesCount: number): string {
@@ -24,23 +25,42 @@ async function generateKeyArgon2(password: string, salt: string): Promise<string
   }
 }
 
+async function generatePasswordHash(password: string) {
+  const existingSalt = getSalt();
+  if (existingSalt) {
+    const argonHash = await generateKeyArgon2(password, existingSalt);
+    return {
+      salt: existingSalt,
+      hash: argonHash,
+    };
+  }
+  const newSalt = generateRandomKey(16);
+  saveSalt(newSalt);
+  const argonHash = await generateKeyArgon2(password, newSalt);
+  return {
+    salt: newSalt,
+    hash: argonHash,
+  };
+}
+
 export async function encryptSeedPhrase(seed: string, password: string): Promise<string> {
-  const salt = generateRandomKey(16);
-  saveSalt(salt);
-  const argonHash = await generateKeyArgon2(password, salt);
-  const encryptedBuffer = await encryptMnemonic(seed, argonHash);
-  return encryptedBuffer.toString('hex');
+  return encryptMnemonicWithCallback({
+    seed,
+    password,
+    mnemonicEncryptionHandler: encryptMnemonic,
+    passwordHashGenerator: generatePasswordHash,
+  });
 }
 
 export async function decryptSeedPhrase(encryptedSeed: string, password: string): Promise<string> {
-  const salt = getSalt();
   try {
-    if (salt) {
-      const pw = await generateKeyArgon2(password, salt);
-      const secretKey = await decryptMnemonic(Buffer.from(encryptedSeed, 'hex'), pw);
-      return secretKey;
-    }
-    return await Promise.reject(Error('Invalid Password'));
+    const seedPhrase = await decryptMnemonicWithCallback({
+      encryptedSeed,
+      password,
+      mnemonicDecryptionHandler: decryptMnemonic,
+      passwordHashGenerator: generatePasswordHash,
+    });
+    return seedPhrase;
   } catch (err) {
     return Promise.reject(Error('Invalid Password'));
   }

src/pages/Options/index.html

@@ -6,7 +6,7 @@
   </head>
   <body>
     <header>
-      <img src="../../assets/img/full_logo_horizontal.svg" alt="Logo" width="113">
+      <img src="/assets/img/full_logo_horizontal.svg" alt="Logo" width="113">
       <h2>V1.0.0</h2>
     </header>
     <div id="app-container">

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,