Fix account data not persisting on web

.env

@@ -1,3 +1,2 @@
-APP_VERSION=2.5.14
-
-APP_BUILD_NUMBER=446
+APP_VERSION=2.5.16
+APP_BUILD_NUMBER=448

package.json

@@ -116,7 +116,6 @@
     "react-refresh": "0.16.0",
     "react-router-dom": "7.1.5",
     "react-router-native": "6.29.0",
-    "react-secure-storage": "1.3.2",
     "react-use-websocket": "4.13.0",
     "stream-browserify": "3.0.0",
     "styled-components": "6.1.15",

src/Root.tsx

@@ -8,7 +8,8 @@ import {
   SBPModalContextProvider,
   platform,
   SBPHardwareWalletContextProvider,
-  SBPLedgerContextProvider
+  SBPLedgerContextProvider,
+  SBPAskPasswordModalContextProvider
 } from "@config";
 import App from "./App";
 import { SafeAreaProvider, initialWindowMetrics } from "@components/SafeArea";
@@ -25,15 +26,17 @@ export const Root = () => (
             future={{ v7_startTransition: !isIos, v7_relativeSplatPath: true }}
           >
             <SBPThemeContextProvider>
-              <SBPModalContextProvider>
-                <SBPLedgerContextProvider>
-                  <SBPBitboxContextProvider>
-                    <SBPHardwareWalletContextProvider>
-                      <App />
-                    </SBPHardwareWalletContextProvider>
-                  </SBPBitboxContextProvider>
-                </SBPLedgerContextProvider>
-              </SBPModalContextProvider>
+              <SBPAskPasswordModalContextProvider>
+                <SBPModalContextProvider>
+                  <SBPLedgerContextProvider>
+                    <SBPBitboxContextProvider>
+                      <SBPHardwareWalletContextProvider>
+                        <App />
+                      </SBPHardwareWalletContextProvider>
+                    </SBPBitboxContextProvider>
+                  </SBPLedgerContextProvider>
+                </SBPModalContextProvider>
+              </SBPAskPasswordModalContextProvider>
             </SBPThemeContextProvider>
           </Router>
         </KeyboardAvoidingView>

src/assets/translations/en.json

@@ -68,7 +68,8 @@
       "enter12wordsDescription3": "Still, this connection method is not considered 100% safe, as your device is connected to the internet, and therefore vulnerable. We are not responsible for any loss caused by the use of this login method.",
       "error": {
         "invalidSignature": "Invalid signature",
-        "invalidWord": "Invalid word"
+        "invalidWord": "Invalid word",
+        "invalidPassword": "Invalid password"
       }
     },
     "signup": {
@@ -466,6 +467,14 @@
       }
     }
   },
+  "askPasswordModal": {
+    "enterPassword": "Enter your account password",
+    "login": "Login",
+    "accountName": "Account name",
+    "accountEmail": "Account email",
+    "password": "Password",
+    "errorGettingPassword": "Error while getting password"
+  },
   "createWalletModal": {
     "continue": "Continue",
     "showMySeedPhrase": "Show my seed phrase",

src/components/ConnectWalletModal/ConnectWalletModal.tsx

@@ -12,8 +12,7 @@ import { AsyncStorage, hardwareNames, sleep } from "@utils";
 import {
   keyStoreUserType,
   keyStoreWalletPath,
-  keyStoreWalletType,
-  keyStoreZpub
+  keyStoreWalletType
 } from "@config/settingsKeys";
 import { UserType } from "@types";
 import {
@@ -176,11 +175,6 @@ export const ConnectWalletModal = ({
     async (withData = false) => {
       if (withData === true) {
         const data = watch();
-        await AsyncStorage.setItem(
-          keyStoreZpub,
-          data.zPub,
-          ACCESS_CONTROL.BIOMETRY_ANY_OR_DEVICE_PASSCODE
-        );
         await AsyncStorage.setItem(keyStoreWalletPath, data.path);
         await AsyncStorage.setItem(keyStoreUserType, UserType.Wallet);
         await AsyncStorage.setItem(keyStoreWalletType, hardwareType);

src/components/CreateWalletModal/CreateWalletModal.tsx

@@ -13,13 +13,7 @@ import { Step1, Step2, Step3, Step4, Step5 } from "./components";
 import { useToast } from "react-native-toast-notifications";
 import axios from "axios";
 import { AsyncStorage, sleep } from "@utils";
-import {
-  keyStoreMnemonicWords,
-  keyStoreUserType,
-  keyStoreWalletType,
-  keyStoreZpub
-} from "@config/settingsKeys";
-import { ACCESS_CONTROL } from "react-native-keychain";
+import { keyStoreUserType, keyStoreWalletType } from "@config/settingsKeys";
 import { UserType } from "@types";
 import { apiRootUrl } from "@config";
 import { SignatureData } from "@components/PayoutConfig/components/BitcoinSettings/BitcoinSettings";
@@ -121,20 +115,16 @@ export const CreateWalletModal = ({
             signature
           });
 
-          await AsyncStorage.setItem(
-            keyStoreZpub,
-            data.zPub,
-            ACCESS_CONTROL.BIOMETRY_ANY_OR_DEVICE_PASSCODE
-          );
-          await AsyncStorage.setItem(
-            keyStoreMnemonicWords,
-            data.words.join(" "),
-            ACCESS_CONTROL.BIOMETRY_ANY_OR_DEVICE_PASSCODE
-          );
           await AsyncStorage.setItem(keyStoreUserType, UserType.Wallet);
           await AsyncStorage.setItem(keyStoreWalletType, "local");
 
-          onClose({ zPub: data.zPub, message, signature, walletType: "local" });
+          onClose({
+            zPub: data.zPub,
+            words: data.words.join(" "),
+            message,
+            signature,
+            walletType: "local"
+          });
         } catch (e) {
           toast.show(t("autoSignatureError"));
         }

src/components/PayoutConfig/PayoutConfig.tsx

@@ -31,6 +31,7 @@ export type WalletType = "local" | "bitbox02" | "ledger";
 
 type BitcoinSettingsForm = {
   depositAddress?: string;
+  words?: string;
   btcAddressTypes: {
     [k in "onchain" | "xpub" | "lightning"]: boolean | "loading" | "error";
   };

src/components/PayoutConfig/components/BitcoinSettings/BitcoinSettings.tsx

@@ -62,6 +62,7 @@ const { isIos } = platform;
 
 export type SignatureData = {
   zPub: string;
+  words?: string;
   message: string;
   signature: string;
   walletType: WalletType;
@@ -367,6 +368,10 @@ export const BitcoinSettings = ({
   >(
     (signatureData) => {
       if (signatureData) {
+        if (signatureData.words) {
+          setValue("words", signatureData.words);
+        }
+
         setValue("walletType", signatureData.walletType);
         setValue("depositAddress", signatureData.zPub, {
           shouldValidate: false

src/components/Text/Text.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, forwardRef } from "react";
 import { Text as RootText, TextProps as RootTextProps } from "react-native";
 import styled from "styled-components";
-import { platform } from "@config";
+import { platform } from "@config/platform";
 
 const { isNative } = platform;
 

src/config/SBPAskPasswordModalContext/SBPAskPasswordModalContext.tsx

@@ -0,0 +1,137 @@
+import {
+  ComponentStack,
+  FieldDescription,
+  Modal,
+  TextField,
+  Url,
+  Text
+} from "@components";
+import { AccountConfigType } from "@types";
+import { PropsWithChildren, createContext, useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useToast } from "react-native-toast-notifications";
+import * as S from "./styled";
+import { useIsBiometrySupported } from "@hooks";
+
+type PartialAccountConfig = Pick<AccountConfigType, "name" | "mail">;
+
+export type AskWordsPassword = (
+  accountConfig?: PartialAccountConfig
+) => Promise<string | undefined>;
+
+type SBPAskPasswordModalContextType = {
+  askPassword?: AskWordsPassword;
+};
+
+export const SBPAskPasswordModalContext =
+  createContext<SBPAskPasswordModalContextType>({});
+
+export const SBPAskPasswordModalContextProvider = ({
+  children
+}: PropsWithChildren) => {
+  const toast = useToast();
+  const { t: tRoot } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: "askPasswordModal" });
+  const [promiseData, setPromiseData] = useState<{
+    resolve: Promise<string>;
+    reject: () => void;
+  }>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [value, setValue] = useState<string>();
+  const [partialAccountConfig, setPartialAccountConfig] =
+    useState<PartialAccountConfig>();
+
+  const askPassword = useCallback(
+    async (accountConfig?: PartialAccountConfig) => {
+      if (accountConfig) {
+        setPartialAccountConfig(accountConfig);
+      }
+      const promise = new Promise<string>((resolve, reject) => {
+        setPromiseData({ resolve, reject });
+      });
+
+      setIsOpen(true);
+
+      try {
+        return await promise;
+      } catch (e) {
+        toast.show(t("errorGettingPassword"), { type: "error" });
+      }
+      setIsOpen(false);
+    },
+    [toast]
+  );
+
+  const onSubmit = useCallback(() => {
+    if (promiseData?.resolve) {
+      setIsOpen(false);
+      promiseData?.resolve(value);
+      setTimeout(() => {
+        setValue(undefined);
+      }, 500);
+    }
+  }, [promiseData?.resolve, value]);
+
+  const isBiometrySupported = useIsBiometrySupported();
+
+  return (
+    <SBPAskPasswordModalContext.Provider
+      value={{ askPassword: !isBiometrySupported ? askPassword : undefined }}
+    >
+      {children}
+      {!isBiometrySupported && (
+        <Modal
+          title={t("enterPassword")}
+          isOpen={isOpen}
+          onClose={() => {
+            setIsOpen(false);
+            if (promiseData?.reject) {
+              promiseData.reject();
+            }
+          }}
+          submitButton={{
+            type: "bitcoin",
+            title: t("login"),
+            onPress: onSubmit
+          }}
+        >
+          <ComponentStack>
+            {partialAccountConfig && (
+              <>
+                <FieldDescription isHighlighted>
+                  {t("accountName")}
+                </FieldDescription>
+                <FieldDescription>
+                  {partialAccountConfig?.name}
+                </FieldDescription>
+              </>
+            )}
+            {partialAccountConfig && (
+              <>
+                <FieldDescription isHighlighted>
+                  {t("accountEmail")}
+                </FieldDescription>
+                <FieldDescription>
+                  {partialAccountConfig?.mail}
+                </FieldDescription>
+              </>
+            )}
+            <TextField
+              onSubmitEditing={onSubmit}
+              label={t("password")}
+              secureTextEntry
+              textContentType="password"
+              value={value}
+              onChangeText={setValue}
+            />
+            <Url
+              as={S.ForgotPasswordText}
+              href="https://dashboard.swiss-bitcoin-pay.ch/reset-password"
+              title={tRoot("screens.emailLogin.forgotPassword")}
+            />
+          </ComponentStack>
+        </Modal>
+      )}
+    </SBPAskPasswordModalContext.Provider>
+  );
+};

src/config/SBPAskPasswordModalContext/index.ts

@@ -0,0 +1,4 @@
+export {
+  SBPAskPasswordModalContext,
+  SBPAskPasswordModalContextProvider
+} from "./SBPAskPasswordModalContext";

src/config/SBPAskPasswordModalContext/styled.ts

@@ -0,0 +1,12 @@
+import { Text } from "@components";
+import styled from "styled-components";
+
+export const ForgotPasswordText = styled(Text).attrs(({ theme }) => ({
+  color: theme.colors.primary,
+  weight: 600,
+  h4: true
+}))`
+  display: flex;
+  justify-content: flex-end;
+  text-align: right;
+`;

src/config/index.ts

@@ -16,6 +16,10 @@ export { SBPContext, SBPContextProvider } from "./SBPContext";
 export { SBPThemeContext, SBPThemeContextProvider } from "./SBPThemeContext";
 export * from "./SBPHardwareWallet";
 export { SBPModalContext, SBPModalContextProvider } from "./SBPModalContext";
+export {
+  SBPAskPasswordModalContext,
+  SBPAskPasswordModalContextProvider
+} from "./SBPAskPasswordModalContext";
 export { DEFAULT_DECIMALS } from "./defaultDecimals";
 
 export { i18n };