From 2609eb3e34418b1b46369dd4c12222be2f0b822d Mon Sep 17 00:00:00 2001 From: Kieran O'Neill Date: Sun, 25 Feb 2024 18:12:20 +0200 Subject: [PATCH 1/3] feat: add verify modal to allow to input your merkle root --- app/components/Navigation/Navigation.tsx | 7 - app/components/UploadCompleteModal/index.ts | 1 + .../VerifyFileProofModal.tsx | 189 ++++++++++++++++++ app/components/VerifyFileProofModal/index.ts | 1 + .../VerifyFileProofModal/types/IProps.ts | 9 + .../VerifyFileProofModal/types/index.ts | 1 + app/constants/Routes.ts | 1 - app/files/page.tsx | 70 +++++-- app/upload/page.tsx | 2 +- app/verify/page.tsx | 32 --- 10 files changed, 250 insertions(+), 63 deletions(-) create mode 100644 app/components/UploadCompleteModal/index.ts create mode 100644 app/components/VerifyFileProofModal/VerifyFileProofModal.tsx create mode 100644 app/components/VerifyFileProofModal/index.ts create mode 100644 app/components/VerifyFileProofModal/types/IProps.ts create mode 100644 app/components/VerifyFileProofModal/types/index.ts delete mode 100644 app/verify/page.tsx diff --git a/app/components/Navigation/Navigation.tsx b/app/components/Navigation/Navigation.tsx index 67ac770..2329c69 100644 --- a/app/components/Navigation/Navigation.tsx +++ b/app/components/Navigation/Navigation.tsx @@ -15,7 +15,6 @@ import { import { useRouter } from 'next/navigation'; import React, { FC } from 'react'; import { - IoCheckmarkCircleOutline, IoChevronBackOutline, IoCloudUploadOutline, IoListOutline, @@ -31,7 +30,6 @@ import { FILES_ROUTE, INDEX_ROUTE, UPLOAD_ROUTE, - VERIFY_ROUTE, } from '@app/constants'; // hooks @@ -60,11 +58,6 @@ const Navigation: FC = ({ isOpen, onClose }) => { label: 'Files', route: FILES_ROUTE, }, - { - icon: IoCheckmarkCircleOutline, - label: 'Verify', - route: VERIFY_ROUTE, - }, ]; // handlers const handleOnClose = () => onClose(); diff --git a/app/components/UploadCompleteModal/index.ts b/app/components/UploadCompleteModal/index.ts new file mode 100644 index 0000000..b291cea --- /dev/null +++ b/app/components/UploadCompleteModal/index.ts @@ -0,0 +1 @@ +export { default } from './UploadCompleteModal'; diff --git a/app/components/VerifyFileProofModal/VerifyFileProofModal.tsx b/app/components/VerifyFileProofModal/VerifyFileProofModal.tsx new file mode 100644 index 0000000..2df881e --- /dev/null +++ b/app/components/VerifyFileProofModal/VerifyFileProofModal.tsx @@ -0,0 +1,189 @@ +import { + Button, + Code, + Heading, + HStack, + Icon, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Skeleton, + Spacer, + Text, + Textarea, + VStack, +} from '@chakra-ui/react'; +import React, { ChangeEvent, FC, useState } from 'react'; +import { + IoCheckmarkCircleOutline, + IoCloseCircleOutline, +} from 'react-icons/io5'; + +// constants +import { DEFAULT_GAP } from '@app/constants'; + +// hooks +import useDefaultTextColor from '@app/hooks/useDefaultTextColor'; +import useLogger from '@app/hooks/useLogger'; +import usePrimaryColorScheme from '@app/hooks/usePrimaryColorScheme'; +import useSubTextColor from '@app/hooks/useSubTextColor'; + +// types +import type { ILogger } from '@app/types'; +import type { IProps } from './types'; + +// utils + +const VerifyFileProofModal: FC = ({ file, onClose }) => { + // hooks + const defaultTextColor: string = useDefaultTextColor(); + const logger: ILogger = useLogger(); + const primaryColorScheme: string = usePrimaryColorScheme(); + const subTextColor: string = useSubTextColor(); + // state + const [rootValue, setRootValue] = useState(null); + const [verified, setVerified] = useState(false); + // handlers + const handleOnClose = () => onClose(); + const handleRootValueChange = (event: ChangeEvent) => + setRootValue(event.target.value.length > 0 ? event.target.value : null); + + return ( + + + + + + + {`Verify File Proof`} + + + + + + {/*description*/} + + {`Here is the Merkle proof for the file.`} + + + {/*file name*/} + + + {`Name:`} + + + + + + {file ? file.name : '-'} + + + + {/*hash*/} + + + {`Hash:`} + + + + + + {file ? file.hash : '-'} + + + + {/*proof*/} + + {file ? JSON.stringify(file.proof) : '-'} + + + + {`Enter the Merkle Root and see of the proof is verifiable:`} + + + {/*root value input*/} +