Merge pull request #674 from syscoin/fix/unlock-wallet

Fix: unlock opened wallet

Author: lucasgabrielgsp

source/assets/locales/en.json

@@ -424,7 +424,8 @@
     "thisActionErases": "This action erases your current wallet.",
     "toRestoreThis": "To restore this current wallet in the future ensure you have the recovery phrase.",
     "allYourSettings": "All your settings, like custom tokens and imported accounts, will get lost, however, your funds it’s saved!",
-    "setAutoLockTime": "Set auto lock time",
+    "setAutoLockTime": "Set auto lock timer",
+    "errorMinutes": "the minutes must be between 5 and 120",
     "defaultMinutes": "Default: 5 minutes after no activity.",
     "maximumMinutes": "Maximum: 120 minutes."
   },

source/assets/locales/es.json

@@ -425,6 +425,7 @@
     "toRestoreThis": "Para restaurar esta billetera actual en el futuro, asegúrese de tener la frase de recuperación.",
     "allYourSettings": "All your settings, like custom tokens and imported accounts, will get lost, however, your funds it’s saved!",
     "setAutoLockTime": "Configurar tiempo de bloqueo automático",
+    "errorMinutes": "los minutos deben ser entre 5 y 120",
     "defaultMinutes": "Predeterminado: 5 minutos después de inactividad.",
     "maximumMinutes": "Máximo: 120 minutos."
   },

source/assets/locales/pt-br.json

@@ -294,6 +294,7 @@
     "toRestoreThis": "To restore this current wallet in the future ensure you have the recovery phrase.",
     "allYourSettings": "All your settings, like custom tokens and imported accounts, will get lost, however, your funds it’s saved!",
     "setAutoLockTime": "Configurar tempo de bloqueio automático",
+    "errorMinutes": "o valor para o autolock deve ser entre 5 e 120 minutos",
     "defaultMinutes": "Padrão: 5 minutos após inatividade.",
     "maximumMinutes": "Máximo: 120 minutos.",
     "connectYourWalletAndClick": "CONECTE SUA {{hardwalletName}} E CLIQUE PARA CONECTAR!",

source/hooks/useController.ts

@@ -4,8 +4,6 @@ import { CustomJsonRpcProvider } from '@pollum-io/sysweb3-keyring';
 import { INetwork } from '@pollum-io/sysweb3-network';
 
 import { controllerEmitter } from 'scripts/Background/controllers/controllerEmitter';
-// import { rehydrateStore } from 'state/rehydrate';
-// import store from 'state/store';
 
 export function useController() {
   const [isUnlocked, setIsUnlocked] = useState(false);
@@ -27,18 +25,21 @@ export function useController() {
         'getNetwork',
       ])) as INetwork;
 
-      const _web3Provider = new CustomJsonRpcProvider(
+      const walletWeb3Provider = new CustomJsonRpcProvider(
         abortController.signal,
         network.url
       );
 
-      const _isUnlocked = await controllerEmitter(['wallet', 'isUnlocked'], []);
+      const isWalletUnlocked = await controllerEmitter(
+        ['wallet', 'isUnlocked'],
+        []
+      );
 
       setActiveNetwork(network);
 
-      setWeb3Provider(_web3Provider);
+      setWeb3Provider(walletWeb3Provider);
 
-      setIsUnlocked(!!_isUnlocked);
+      setIsUnlocked(!!isWalletUnlocked);
 
       setIsLoading(false);
     },

source/pages/Settings/AutoLock.tsx

@@ -1,23 +1,35 @@
 import { Form } from 'antd';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import { Layout, Button } from 'components/index';
 import { TimeSetSuccessfully } from 'components/Modal/WarningBaseModal';
 import { useController } from 'hooks/useController';
+import { startInactivityTimer } from 'scripts/Background/events/InactivityTimer';
 import { RootState } from 'state/store';
 
-const AutolockView = () => {
+const AutoLockView = () => {
   const { isTimerEnabled } = useSelector((state: RootState) => state.vault);
   const timer = useSelector((state: RootState) => state.vault.timer);
   const { t } = useTranslation();
-  const [confirmed, setConfirmed] = useState<boolean>(false);
-  const [isEnabled, setIsEnabled] = useState<boolean>(isTimerEnabled);
-  const [loading, setLoading] = useState<boolean>(false);
+  const [confirmed, setConfirmed] = useState(false);
+  const [isEnabled, setIsEnabled] = useState(isTimerEnabled);
+  const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const [inputValue, setInputValue] = useState(timer);
+  const [hasError, setHasError] = useState(false);
+
+  const { controllerEmitter } = useController();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    form.setFieldsValue({ minutes: timer });
+    if (isEnabled) {
+      startInactivityTimer(timer);
+    }
+  }, [timer, form, isEnabled]);
 
   const handleMaxClick = () => {
     setInputValue(120);
@@ -29,25 +41,18 @@ const AutolockView = () => {
     form.setFieldsValue({ minutes: 5 });
   };
 
-  const { controllerEmitter } = useController();
-  const navigate = useNavigate();
-
   const onSubmit = (data: any) => {
+    setLoading(true);
     try {
-      setLoading(true);
-      const minimumMinutesPossible = 5;
-      const maximumMinutesPossible = 120;
       const autolockMinutes = +data.minutes;
-
-      if (
-        autolockMinutes < minimumMinutesPossible ||
-        autolockMinutes > maximumMinutesPossible
-      ) {
-        throw new Error('Value must be between 5 and 120');
+      if (autolockMinutes < 5 || autolockMinutes > 120) {
+        setHasError(true);
+        return;
+      } else {
+        setHasError(false);
       }
-      controllerEmitter(['wallet', 'setAutolockTimer'], [+data.minutes]);
+      controllerEmitter(['wallet', 'setAutolockTimer'], [autolockMinutes]);
       controllerEmitter(['wallet', 'setIsAutolockEnabled'], [isEnabled]);
-
       setConfirmed(true);
     } catch (error) {
       console.error('Error:', error);
@@ -56,8 +61,8 @@ const AutolockView = () => {
     }
   };
 
-  const handleInputChange = (e) => {
-    setInputValue(e.target.value);
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(+e.target.value);
   };
 
   return (
@@ -89,7 +94,7 @@ const AutolockView = () => {
         initialValues={{ minutes: inputValue }}
         autoComplete="off"
       >
-        <Form.Item name="minutes" className=" bg-transparent" hasFeedback>
+        <Form.Item name="minutes" className="bg-transparent" hasFeedback>
           <div className="relative">
             <span
               onClick={handleMaxClick}
@@ -112,6 +117,11 @@ const AutolockView = () => {
             </p>
           </div>
         </Form.Item>
+        <div className="flex flex-col items-center justify-center m-3">
+          {hasError && (
+            <p className="text-xs text-red-500">{t('settings.errorMinutes')}</p>
+          )}
+        </div>
 
         <div className="flex flex-col justify-start items-start my-6 text-sm text-brand-gray200">
           <p>{t('settings.defaultMinutes')}</p>
@@ -122,12 +132,6 @@ const AutolockView = () => {
           id="verify-address-switch"
           name="verify"
           className="flex flex-col w-full text-center"
-          rules={[
-            {
-              required: false,
-              message: '',
-            },
-          ]}
         >
           <div className="flex flex-row gap-2 align-center justify-between w-full">
             <span className="text-sm">{t('settings.enableAutolock')}</span>
@@ -145,7 +149,6 @@ const AutolockView = () => {
             </div>
           </div>
         </Form.Item>
-
         <div className="relative bottom-[-11rem] md:static">
           <Button
             className="flex items-center justify-center w-full h-10 bg-white text-brand-blue400 text-base font-medium rounded-[100px]"
@@ -160,4 +163,4 @@ const AutolockView = () => {
   );
 };
 
-export default AutolockView;
+export default AutoLockView;