Add creating text proposal form. Add markdown viewer for proposal description

package.json

@@ -27,7 +27,7 @@
     "@hookform/resolvers": "^3.3.1",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.3",
-    "@rarimo/client": "^2.2.0",
+    "@rarimo/client": "^2.3.0",
     "graphql": "^16.7.1",
     "graphql-tag": "^2.12.6",
     "lodash-es": "^4.17.21",
@@ -74,19 +74,5 @@
     "stylelint-scss": "^5.0.1",
     "yorkie": "^2.0.0"
   },
-  "packageManager": "[email protected]",
-  "resolutions": {
-    "rarimo-js-sdk-monorepo-root": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk",
-    "@rarimo/bridge": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/bridge",
-    "@rarimo/client": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/client",
-    "@rarimo/nft-checkout": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/nft-checkout",
-    "@rarimo/provider": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/provider",
-    "@rarimo/providers-evm": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/providers-evm",
-    "@rarimo/providers-near": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/providers-near",
-    "@rarimo/providers-solana": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/providers-solana",
-    "@rarimo/react-nft-checkout": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/react-nft-checkout",
-    "@rarimo/react-provider": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/react-provider",
-    "@rarimo/shared": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/shared",
-    "@rarimo/swap": "portal:/Users/lukachisama/Documents/RARIMO/js-sdk/packages/swap"
-  }
+  "packageManager": "[email protected]"
 }

src/components/Forms/SubmitTextProposalForm.tsx

@@ -1,16 +1,19 @@
 import {
+  Button,
   FormControl,
   FormHelperText,
   TextareaAutosize as BaseTextareaAutosize,
   TextField,
   Typography,
 } from '@mui/material'
 import { styled } from '@mui/system'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { Controller } from 'react-hook-form'
 
 import { getClient } from '@/client'
+import { Dialog } from '@/components/Dialog'
 import FormWrapper from '@/components/Forms/FormWrapper'
+import MarkdownViewer from '@/components/MarkdownViewer'
 import { ErrorHandler } from '@/helpers'
 import { useForm, useWeb3 } from '@/hooks'
 import { useI18n } from '@/locales/client'
@@ -21,16 +24,21 @@ enum FieldNames {
   Description = 'description',
 }
 
+const PROPOSAL_MAX_DESC_LENGTH = 10_000
+
 export default function SubmitTextProposalForm({ id, onSubmit, setIsDialogDisabled }: FormProps) {
   const t = useI18n()
   const { address } = useWeb3()
 
+  const [isPreviewDialogOpen, setIsPreviewDialogOpen] = useState(false)
+
   const DEFAULT_VALUES = {
     [FieldNames.Title]: '',
     [FieldNames.Description]: '',
   }
 
   const {
+    formState,
     handleSubmit,
     control,
     isFormDisabled,
@@ -41,7 +49,7 @@ export default function SubmitTextProposalForm({ id, onSubmit, setIsDialogDisabl
   } = useForm(DEFAULT_VALUES, yup =>
     yup.object({
       [FieldNames.Title]: yup.string().required(),
-      [FieldNames.Description]: yup.string().required(),
+      [FieldNames.Description]: yup.string().max(PROPOSAL_MAX_DESC_LENGTH).required(),
     }),
   )
 
@@ -64,7 +72,7 @@ export default function SubmitTextProposalForm({ id, onSubmit, setIsDialogDisabl
 
       const amount = await getMinAmount()
 
-      const receipt = await client.tx.submitTextProposal(
+      await client.tx.submitTextProposal(
         address,
         [
           {
@@ -76,8 +84,6 @@ export default function SubmitTextProposalForm({ id, onSubmit, setIsDialogDisabl
         formData[FieldNames.Description],
       )
 
-      console.log(receipt)
-
       onSubmit({
         message: t('submit-text-proposal-form.submitted-msg'),
       })
@@ -120,7 +126,8 @@ export default function SubmitTextProposalForm({ id, onSubmit, setIsDialogDisabl
             <TextareaAutosize
               {...field}
               minRows={5}
-              aria-label='empty textarea'
+              maxRows={10}
+              aria-label={`${FieldNames.Description}-textarea`}
               placeholder={t('submit-text-proposal-form.description-lbl')}
             />
 
@@ -132,6 +139,21 @@ export default function SubmitTextProposalForm({ id, onSubmit, setIsDialogDisabl
           </FormControl>
         )}
       />
+
+      {formState[FieldNames.Description] && (
+        <Button onClick={() => setIsPreviewDialogOpen(true)}>
+          {t('submit-text-proposal-form.desc-preview-btn')}
+        </Button>
+      )}
+
+      <Dialog
+        action={<></>}
+        onClose={() => setIsPreviewDialogOpen(false)}
+        isOpened={isPreviewDialogOpen}
+        title={t('submit-text-proposal-form.desc-preview-title')}
+      >
+        <MarkdownViewer>{formState[FieldNames.Description]}</MarkdownViewer>
+      </Dialog>
     </FormWrapper>
   )
 }
@@ -141,5 +163,9 @@ const TextareaAutosize = styled(BaseTextareaAutosize)(
   box-sizing: border-box;
   background: none;
   padding: ${theme.spacing(2)} ${theme.spacing(1.75)};
+
+  &:focus {
+    outline: none;
+  }
 `,
 )

src/components/Proposal/ProposalsSubmit.tsx

@@ -26,7 +26,7 @@ export default function ProposalsSubmit() {
 
   const actions = useMemo(
     () => {
-      const result = [
+      return [
         {
           label: t('proposals.submit-proposal-action'),
           handler: () => {
@@ -36,8 +36,6 @@ export default function ProposalsSubmit() {
           isDisabled: false,
         },
       ]
-
-      return result
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [t],

src/locales/en.ts

@@ -314,6 +314,8 @@ export default {
     "helper-text": "Please fill out the form below to create a new text proposal.",
     "title-lbl": "Title",
     "description-lbl": "Description",
+    "desc-preview-btn": "Preview",
+    "desc-preview-title": "Description preview",
   },
   "proposal-deposits": {
     "title-lbl": "Deposits",