Merge branch 'develop' into fix/forget-wallet-flow-confirm

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Pali Wallet",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "icons": {
     "16": "assets/icons/favicon-16.png",
     "32": "assets/icons/favicon-32.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "paliwallet",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "A Non-Custodial Crypto Wallet",
   "private": true,
   "repository": {
@@ -176,4 +176,4 @@
   },
   "homepage": "https://github.com/syscoin/pali_wallet#readme",
   "author": "pollum labs"
-}
+}

palette.js

@@ -97,6 +97,7 @@ module.exports = {
     gray300: '#808795',
     whiteAlpaBlue: '#283851',
     yellowInfo: '#FE9B07',
+    yellowInfoDark: '#EA8F06',
   },
   border: {
     default: 'rgba(255, 255, 255, 0.16)',

source/assets/locales/en.json

@@ -159,7 +159,11 @@
     "verifySysAddressDescription": "Click in button below to verify your SYS address.",
     "addressVerified": "Address successfully verified",
     "verificationDeniedByUser": "Verification denied by user.",
-    "clickToVerify": "Click to verify your SYS address."
+    "clickToVerify": "Click to verify your SYS address.",
+    "ifYouHaveAHardWallet":"If you have a hard wallet you can connect now!",
+    "congratulations":"Congratulations",
+    "youWalletWas":"Your wallet was successfully imported."
+
   },
   "titles": {
     "assetDetails": "ASSET DETAILS",
@@ -168,7 +172,10 @@
     "congratulations": "CONGRATULATIONS!"
   },
   "import": {
-    "importingYourAccount": "Importing your wallet seed automatically import a wallet associated with this seed phrase.",
+    "importModalWordMissing": "Word missing!",
+    "importModalSeed": "The seed phrase must be 12 or 24 words and you inserted {{seedLength}}.",
+    "importAttention": "ATTENTION: ",
+    "importingYourAccount": "After importing your wallet you must add again your hardware wallets and adjust the wallet's personal settings.",
     "pasteYourWalletSeed": "Paste your wallet seed phrase"
   },
   "receive": {
@@ -515,4 +522,4 @@
     "keepSeedPhrase": "Keep your seed phrase secret!",
     "anyoneWithThisInfo": "Anyone with this information is able to steal your funds."
   }
-}
+}

source/assets/locales/es.json

@@ -159,7 +159,11 @@
     "verifySysAddressDescription": "Haz clic en el botón de abajo para verificar tu dirección SYS.",
     "addressVerified": "Dirección verificada con éxito",
     "verificationDeniedByUser": "Verificación denegada por el usuario.",
-    "clickToVerify": "Haz clic para verificar tu dirección SYS."
+    "clickToVerify": "Haz clic para verificar tu dirección SYS.",
+    "ifYouHaveAHardWallet": "Si tienes una billetera física, ¡puedes conectarla ahora!",
+    "congratulations": "Felicidades",
+    "youWalletWas": "Tu billetera se importó con éxito."
+
   },
   "titles": {
     "assetDetails": "DETALLES DEL ACTIVO",
@@ -168,7 +172,10 @@
     "congratulations": "FELICIDADES!"
   },
   "import": {
-    "importingYourAccount": "Importar tu frase semilla de billetera automáticamente importará una billetera asociada a esta frase semilla.",
+    "importModalWordMissing": "¡Palabra faltante!",
+    "importModalSeed": "La frase de semilla debe tener 12 o 24 palabras y has insertado {{seedLength}}.",
+    "importAttention": "ATENCIÓN: ",
+    "importingYourAccount": "Después de importar su billetera, debe agregar nuevamente sus billeteras de hardware y ajustar la configuración personal de la billetera.",
     "pasteYourWalletSeed": "Escribe tu frase semilla"
   },
   "receive": {

source/assets/locales/pt-br.json

@@ -91,10 +91,16 @@
     "explorer": "Explorer?",
     "addressCopied": "Address successfully copied",
     "hashCopied": "Hash successfully copied",
-    "contractCopied": "Contract successfully copied"
+    "contractCopied": "Contract successfully copied",
+    "ifYouHaveAHardWallet": "Se você possui uma carteira física, você pode conectá-la agora!",
+    "congratulations": "Parabéns",
+    "youWalletWas": "Sua carteira foi importada com sucesso."
   },
   "import": {
-    "importingYourAccount": "Importing your wallet seed automatically import a wallet associated with this seed phrase."
+    "importModalWordMissing": "Palavra ausente!",
+    "importModalSeed": "A frase-semente deve ter 12 ou 24 palavras e você inseriu {{seedLength}}.",
+    "importAttention": "ATENÇÃO: ",
+    "importingYourAccount": "Após importar sua carteira você deve adicionar novamente suas carteiras de hardware e ajustar as configurações pessoais da carteira."
   },
   "receive": {
     "receiveTitle": "RECEIVE"

source/assets/styles/custom-input-password.css

@@ -17,12 +17,17 @@
 }
 
 .custom-input-password,
-#create-password,
 #forget_password,
 #phraseview_password {
   width: 352px;
 }
 
+.custom-input-password,
+#create-password,
+{
+  width: 300px;
+}
+
 .custom-input-password .anticon-eye-invisible,
 .custom-input-password .anticon-eye {
   position: absolute;

source/components/Modal/StatusModal.tsx

@@ -4,6 +4,7 @@ import React, { Fragment, useCallback, useMemo } from 'react';
 interface IModal {
   description?: string;
   onClose?: () => any;
+  position?: string;
   show?: boolean;
   status: string;
   title: string;
@@ -14,6 +15,7 @@ export const StatusModal = ({
   onClose,
   show = true,
   title,
+  position = 'inset-0',
   status = '',
 }: IModal) => {
   const theme = useMemo(() => {
@@ -28,6 +30,11 @@ export const StatusModal = ({
         iconBg: 'bg-brand-darkGreen',
         bg: 'bg-brand-green',
       },
+      warn: {
+        icon: 'assets/icons/warn.svg',
+        iconBg: 'bg-brand-yellowInfoDark',
+        bg: 'bg-brand-yellowInfo',
+      },
     };
 
     return themes[status] || {};
@@ -41,7 +48,7 @@ export const StatusModal = ({
     <Transition appear show={show} as={Fragment}>
       <Dialog
         as="div"
-        className={`fixed z-10 inset-0 overflow-y-auto  rounded-[20px]`}
+        className={`fixed z-30 ${position} overflow-y-auto  rounded-[20px]`}
         onClose={handleOnClose}
       >
         <div className="fixed z-0 -inset-0 w-full bg-transparent bg-opacity-50 transition-all duration-300 ease-in-out" />

source/components/Modal/WarningBaseModal.tsx

@@ -354,3 +354,47 @@ export const RPCSuccessfullyAdded = ({
     </ModalBase>
   );
 };
+
+export const ConnectHardwareWallet = ({
+  phraseOne,
+  onClose,
+  show = true,
+  title,
+}: IDefaultModal) => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  return (
+    <ModalBase onClose={onClose} show={show}>
+      <div className="rounded-t-[50px] w-screen flex flex-col align-bottom justify-end items-center bg-brand-blue400 shadow-md">
+        <div className="bg-[#476daa] w-full py-5 rounded-t-[50px]">
+          <h1 className="text-white font-medium text-base">{title}</h1>
+        </div>
+        <div className="flex flex-col pt-6 pb-7 px-6 text-white text-left text-sm font-normal w-[94%]">
+          <p>{phraseOne}</p>
+        </div>
+
+        <div className="flex gap-[21.10px]">
+          <Button
+            id="unlock-btn"
+            type="submit"
+            className="bg-transparent w-[10.313rem] h-10 text-white text-base mb-12 font-base font-medium rounded-2xl border border-white"
+            onClick={() => {
+              if (onClose) onClose(true);
+            }}
+          >
+            {t('buttons.cancel')}
+          </Button>
+          <Button
+            id="unlock-btn"
+            type="submit"
+            className="bg-white w-[10.313rem] h-10 text-brand-blue200 text-base mb-12 font-base font-medium rounded-2xl"
+            onClick={() => navigate('/settings/account/hardware')}
+          >
+            {t('buttons.connect')}
+          </Button>
+        </div>
+      </div>
+    </ModalBase>
+  );
+};

source/components/PasswordForm/PasswordForm.tsx

@@ -1,18 +1,53 @@
 import { Form, Input } from 'antd';
-import React from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { OnboardingLayout, Button } from 'components/index';
 
+type FormErrors = {
+  [key: string]: string;
+};
+
 interface IPasswordForm {
   onSubmit: (data: any) => any;
 }
 
 export const PasswordForm: React.FC<IPasswordForm> = ({ onSubmit }) => {
   const { t } = useTranslation();
+
+  const [form] = Form.useForm();
+  const [formErrors, setFormErrors] = useState<FormErrors>({
+    password: '',
+    repassword: '',
+  });
+  console.log(formErrors, 'a');
+  const buttonIsValidStyle = useMemo(
+    () =>
+      Object.keys(formErrors).length > 0 || !form.getFieldValue('password')
+        ? 'opacity-60'
+        : 'opacity-100',
+    [formErrors, form]
+  );
+
+  const onValuesChange = useCallback(() => {
+    form
+      .validateFields()
+      .then(() => setFormErrors({}))
+      .catch((errors) => {
+        setFormErrors(
+          errors.errorFields.reduce((acc, current) => {
+            acc[current.name[0]] = current.errors[0];
+            return acc;
+          }, {})
+        );
+      });
+  }, []);
+
   return (
     <OnboardingLayout title={t('settings.password')}>
       <Form
+        form={form}
+        onValuesChange={onValuesChange}
         validateMessages={{ default: '' }}
         name="basic"
         labelCol={{ span: 8 }}
@@ -57,8 +92,9 @@ export const PasswordForm: React.FC<IPasswordForm> = ({ onSubmit }) => {
             },
             ({ getFieldValue }) => ({
               validator(_, value) {
-                if (!value || getFieldValue('password') === value)
+                if (!value || getFieldValue('password') === value) {
                   return Promise.resolve();
+                }
                 return Promise.reject();
               },
             }),
@@ -71,7 +107,7 @@ export const PasswordForm: React.FC<IPasswordForm> = ({ onSubmit }) => {
           />
         </Form.Item>
 
-        <span className="px-3 w-full text-left text-brand-royalbluemedium text-xs">
+        <span className="px-3 mt-6 mb-4 w-full text-left text-brand-blue100 text-xs">
           {t('components.atLeast')} {'   '}
         </span>
 
@@ -83,7 +119,8 @@ export const PasswordForm: React.FC<IPasswordForm> = ({ onSubmit }) => {
           <Button
             type="submit"
             id="create-password-action"
-            className="bg-brand-deepPink100 w-[17.5rem] h-10 text-white text-base font-base font-medium rounded-2xl"
+            disabled={Object.keys(formErrors).length > 0}
+            className={`${buttonIsValidStyle} bg-brand-deepPink100 w-[17.5rem] h-10 text-white text-base font-base font-medium rounded-2xl`}
           >
             {t('buttons.next')}
           </Button>

source/pages/Home/Home.tsx

@@ -7,6 +7,7 @@ import { CustomJsonRpcProvider } from '@pollum-io/sysweb3-keyring';
 
 import { Header, Icon, Button, Loading } from 'components/index';
 import { StatusModal } from 'components/Modal/StatusModal';
+import { ConnectHardwareWallet } from 'components/Modal/WarningBaseModal';
 import { usePrice, useUtils } from 'hooks/index';
 import { RootState } from 'state/store';
 import { getController } from 'utils/browser';
@@ -44,7 +45,8 @@ export const Home = () => {
 
   //* States
   const [isTestnet, setIsTestnet] = useState(false);
-  const [showModal, setShowModal] = useState(isWalletImported);
+  const [showModalCongrats, setShowModalCongrats] = useState(false);
+  const [showModalHardWallet, setShowModalHardWallet] = useState(true);
 
   //* Constants
   const { url } = activeNetwork;
@@ -63,6 +65,15 @@ export const Home = () => {
 
   const moreThanTrillion = actualBalance > ONE_TRILLION;
 
+  const closeModal = () => {
+    setShowModalCongrats(false);
+  };
+
+  const handleCloseModal = () => {
+    setShowModalHardWallet(false);
+    setShowModalCongrats(true);
+  };
+
   //* Effect for set Testnet or not
   useEffect(() => {
     if (!isUnlocked) return;
@@ -94,10 +105,6 @@ export const Home = () => {
     actualBalance,
   ]);
 
-  const closeModal = () => {
-    setShowModal(false);
-  };
-
   const formatFiatAmmount = useMemo(() => {
     if (isTestnet) {
       return null;
@@ -181,13 +188,21 @@ export const Home = () => {
             </div>
           </section>
           {isWalletImported && (
-            <StatusModal
-              show={showModal}
-              title={'Congratulations!'}
-              description={'Your wallet was successfully imported.'}
-              onClose={closeModal}
-              status="success"
-            />
+            <>
+              <ConnectHardwareWallet
+                title={t('accountMenu.connectTrezor').toUpperCase()}
+                onClose={handleCloseModal}
+                show={showModalHardWallet}
+                phraseOne={t('home.ifYouHaveAHardWallet')}
+              />
+              <StatusModal
+                show={showModalCongrats}
+                title={t('home.congratulations')}
+                description={t('home.youWalletWas')}
+                onClose={closeModal}
+                status="success"
+              />
+            </>
           )}
           <TxsPanel />
         </>