Merge pull request #71 from novasamatech/feat/new-recovery-modal

Feat: new recovery modal

src/components/Icon/types.ts

@@ -21,6 +21,9 @@ const AllIcons = {
   youtube: 'Youtube.svg',
   welcome: 'welcome.svg',
   present: 'present.svg',
+  userBlock: 'user-block.svg',
+  pen: 'pen.svg',
+  blind: 'blind.svg',
 } as const;
 
 export type IconNames = keyof typeof AllIcons;

src/components/RecoveryPhrase/RecoveryModal.tsx

@@ -1,41 +1,89 @@
 import { useState } from 'react';
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, Checkbox } from '@nextui-org/react';
-import Image from 'next/image';
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+} from '@nextui-org/react';
 
-import { BodyText, TitleText } from '@/components/Typography';
+import { Icon, BodyText, TitleText } from '@/components';
+import { IconNames } from '../Icon/types';
 
 type Props = {
   isOpen: boolean;
   onClose: () => void;
   onSubmit: () => void;
 };
 
+const checkboxes = [
+  {
+    id: 'checkbox-1',
+    iconName: 'blind',
+    label: (
+      <>
+        Having the recovery phrase means having <strong>total and permanent access to all connected wallets</strong> and
+        the money within them.
+      </>
+    ),
+  },
+  {
+    id: 'checkbox-2',
+    iconName: 'pen',
+    label: (
+      <>
+        Do not enter your recovery phrase or private key into any form or app. They are
+        <strong> not needed for app functionality.</strong>
+      </>
+    ),
+  },
+  {
+    id: 'checkbox-3',
+    iconName: 'userBlock',
+    label: (
+      <>
+        Nova Wallet <strong>admins will never request your recovery phrase</strong> or private key under any
+        circumstances.
+      </>
+    ),
+  },
+];
+
 export default function RecoveryModal({ isOpen, onClose, onSubmit }: Props) {
-  const [isSelected, setIsSelected] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
 
   return (
     <>
       <Modal isOpen={isOpen} size="xs" placement="center" isDismissable={false} onClose={onClose}>
         <ModalContent>
-          <ModalHeader className="p-0 h-[220px]">
-            <Image src="/images/Modal.png" alt="Logo" className="w-full" width={300} height={220} />
+          <ModalHeader className="">
+            <TitleText>Please read this carefully </TitleText>
           </ModalHeader>
-          <ModalBody className="mt-4 gap-4 py-0">
-            <TitleText align="left">Never send your secret to anyone </TitleText>
-            <BodyText align="left" className="text-text-hint">
-              It can lead to permanent funds loss. Even if admin will ask you about it. Even if you need to. Do not
-              share your secret phrase
-            </BodyText>
-            <Checkbox color="default" isSelected={isSelected} onValueChange={setIsSelected}>
-              <BodyText align="left" className="text-text-hint">
-                I understand that sharing or showing a secret of my accounts with anyone can lead to a permanent funds
-                loss
-              </BodyText>
-            </Checkbox>
-          </ModalBody>
+          <CheckboxGroup color="default" value={selected} onValueChange={setSelected}>
+            <ModalBody className="gap-6 mb-2">
+              {checkboxes.map(({ id, iconName, label }) => (
+                <div className="flex flex-col items-center" key={iconName}>
+                  <Icon name={iconName as IconNames} size={32} />
+                  <Checkbox value={id} className="items-start">
+                    <BodyText align="left" className="text-text-hint">
+                      {label}
+                    </BodyText>
+                  </Checkbox>
+                </div>
+              ))}
+            </ModalBody>
+          </CheckboxGroup>
           <ModalFooter className="justify-center">
-            <Button color="primary" className="w-[250px] rounded-full" isDisabled={!isSelected} onPress={onSubmit}>
-              Next
+            <Button
+              color="primary"
+              className="w-full rounded-full"
+              isDisabled={selected.length !== 3}
+              onPress={onSubmit}
+            >
+              Confirm
             </Button>
           </ModalFooter>
         </ModalContent>

src/screens/transfer/ConfirmationPage.tsx

@@ -34,9 +34,11 @@ export default function ConfirmationPage() {
 
     const mainCallback = async () => {
       mainButton.showProgress(false);
-      await handleSend(submitExtrinsic, selectedAsset as TrasferAsset).then(() => {
-        navigate(Paths.TRANSFER_RESULT);
-      });
+      await handleSend(submitExtrinsic, selectedAsset as TrasferAsset)
+        .then(() => {
+          navigate(Paths.TRANSFER_RESULT);
+        })
+        .catch((error) => alert(`Error: ${error.message}\nTry to relaod`));
     };
     const backCallback = () => {
       navigate(Paths.TRANSFER_AMOUNT);

src/screens/transfer/CreateGiftPage.tsx

@@ -31,10 +31,12 @@ export default function CreateGiftPage() {
 
     const wallet = createGiftWallet(selectedAsset.addressPrefix as number);
     (async function () {
-      await handleSendGift(submitExtrinsic, selectedAsset as TrasferAsset, wallet.address).then(() => {
-        backupGifts(wallet.address, wallet.secret, selectedAsset.chainId as ChainId, selectedAsset.amount as string);
-        setLink(createTgLink(wallet.secret, selectedAsset?.asset?.symbol as string));
-      });
+      await handleSendGift(submitExtrinsic, selectedAsset as TrasferAsset, wallet.address)
+        .then(() => {
+          backupGifts(wallet.address, wallet.secret, selectedAsset.chainId as ChainId, selectedAsset.amount as string);
+          setLink(createTgLink(wallet.secret, selectedAsset?.asset?.symbol as string));
+        })
+        .catch((error) => alert(`Error: ${error.message}\nTry to relaod`));
     })();
 
     return () => {