feat: External signature verification for Roomful client

components/sections/Signatures/MessageContent.tsx

@@ -5,19 +5,21 @@ import { TextArea, Input, Form } from '@/components/elements/FormFields'
 import { StyledFormArea } from './FormArea.style'
 import VerifyResult from './VerifyResult'
 
-interface IMessageContent {
+export interface IMessageContent {
   message: string
   verusId: string
   signature: string
+  filled: boolean
 }
 
-const MessageContent = () => {
+const MessageContent = ({ iMessageContent }: { iMessageContent: IMessageContent }) => {
   const { t } = useTranslation('signatures')
   const methods = useForm<IMessageContent>({ mode: 'onBlur' })
   const [verusSignature, setVerusSignature] = useState<Record<
     string,
     string
   > | null>(null)
+  const [filledVerusSignature, setFilledVerusSignature] = useState(iMessageContent.filled)
   const [sigResult, setSigResult] = useState<any>()
 
   const onSubmit: SubmitHandler<IMessageContent> = async (values) => {
@@ -52,12 +54,13 @@ const MessageContent = () => {
 
   const _handleReset = () => {
     setVerusSignature(null)
+    setFilledVerusSignature(false)
     setSigResult(null)
     methods.reset()
   }
   return (
     <>
-      {!verusSignature && (
+      {!verusSignature && !filledVerusSignature && (
         <StyledFormArea>
           <FormProvider {...methods}>
             <Form SubmitHandler={methods.handleSubmit(onSubmit)}>
@@ -80,6 +83,32 @@ const MessageContent = () => {
           </FormProvider>
         </StyledFormArea>
       )}
+      {!verusSignature && filledVerusSignature && (
+        <StyledFormArea>
+          <FormProvider {...methods}>
+            <Form SubmitHandler={methods.handleSubmit(onSubmit)}>
+              <TextArea
+                name="message"
+                label={t('tab.message.input')}
+                validate={{ required: t('tab.message.validate') }}
+                value={iMessageContent.message}
+              />
+              <Input
+                name="verusId"
+                label={t('formField.verusID.input')}
+                validate={{ required: t('formField.verusID.validate') }}
+                value={iMessageContent.verusId}
+              />
+              <Input
+                name="signature"
+                label={t('formField.signature.input')}
+                validate={{ required: t('formField.signature.validate') }}
+                value={iMessageContent.signature}
+              />
+            </Form>
+          </FormProvider>
+        </StyledFormArea>
+      )}
       {verusSignature && (
         <VerifyResult
           sigResult={sigResult}

components/sections/Signatures/SigTab.tsx

@@ -11,14 +11,16 @@ import {
 import MessageContent from './MessageContent'
 import HashContent from './HashContent'
 import FileContent from './FileContent'
+import { IMessageContent } from './MessageContent'
+
 
 const StyledContainer = styled.div`
   padding: ${(props) => props.theme.spaces.xs};
   margin: 0 auto;
   max-width: 900px;
 `
 
-const SigTab = () => {
+const SigTab = ({ iMessageContent }: { iMessageContent: IMessageContent }) => {
   const { t } = useTranslation('signatures')
   const [activeEventKey, setActiveEventKey] = useState(0)
   const TabItems = [t('tab.message.tab'), t('tab.file.tab'), t('tab.hash.tab')]
@@ -28,7 +30,7 @@ const SigTab = () => {
       {!useMediaQuery('(min-width: 768px)') && (
         <Accordion>
           <AccordionContent eventKey={0} title={t('tab.message.tab')}>
-            <MessageContent />
+            <MessageContent iMessageContent={iMessageContent}/>
           </AccordionContent>
           <AccordionContent eventKey={1} title={t('tab.file.tab')}>
             <FileContent />
@@ -45,7 +47,7 @@ const SigTab = () => {
           onToggle={setActiveEventKey}
         >
           <TabPanel eventKey={0}>
-            <MessageContent />
+            <MessageContent iMessageContent={iMessageContent}/>
           </TabPanel>
           <TabPanel eventKey={1}>
             <FileContent />

i18n.js

@@ -21,5 +21,6 @@ module.exports = {
     'rgx:/mobile': ['walletMobile'],
     'rgx:/verusid-lookup': ['verusid'],
     '/signatures': ['signatures'],
+    '/signatures/[data]': ['signatures'],
   },
 }

pages/signatures.tsx

@@ -18,7 +18,12 @@ const Signatures = () => {
         >
           <DefaultHeader align="center">{t('heading')}</DefaultHeader>
         </Section>
-        <SigTab />
+        <SigTab iMessageContent={{
+          message: '',
+          verusId: '',
+          signature: '',
+          filled: false
+        }} />
       </MainLayout>
     </>
   )

pages/signatures/[data].tsx

@@ -0,0 +1,35 @@
+import { NextSeo } from 'next-seo'
+import useTranslation from 'next-translate/useTranslation'
+import { MainLayout, Section } from '@/components/layouts'
+import { DefaultHeader } from '@/components/elements'
+import { SigTab } from '@/components/sections/Signatures'
+import { useRouter } from 'next/router'
+
+const SignaturesExt = () => {
+  const { t } = useTranslation('signatures')
+  const title = t('seo:page.signatures.title')
+  const description = t('seo:page.signatures.description')
+  const {query} = useRouter()
+  let messageData = { message: '', verusId: '', signature: '', filled: false }
+  if (query) {
+    if (typeof query.data === 'string') {
+      messageData = JSON.parse(Buffer.from(query.data, 'base64').toString())
+    }
+  }
+  return (
+    <>
+      <NextSeo title={title} description={description} />
+      <MainLayout>
+        <Section
+          width={900}
+          styles="margin-bottom: 75px !important; margin-top:75px;"
+        >
+          <DefaultHeader align="center">{t('heading')}</DefaultHeader>
+        </Section>
+        <SigTab iMessageContent={messageData} />
+      </MainLayout>
+    </>
+  )
+}
+
+export default SignaturesExt