From 12f848b5e7ca49726bf8c5b8ea65446c22b3e5a8 Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Mon, 11 Mar 2024 23:35:12 +0100
Subject: [PATCH 01/10] Implement markdown support for proposal templates and
 proposal view

---
 package-lock.json                             | 56 ++++++++++++++++---
 package.json                                  |  2 +
 ...pshotProposalMarkdown.css => Markdown.css} |  0
 .../Activity/ActivityDescription.tsx          | 32 ++++++-----
 .../ProposalTemplateDetails.tsx               | 10 ++--
 .../ProposalTemplateMetadata.tsx              |  4 +-
 src/components/Proposals/ProposalInfo.tsx     | 10 +---
 .../proposal/Markdown.tsx}                    | 36 ++++++------
 src/i18n/locales/en/proposal.json             |  2 +-
 src/i18n/locales/en/proposalTemplate.json     |  2 +-
 10 files changed, 95 insertions(+), 59 deletions(-)
 rename src/assets/css/{SnapshotProposalMarkdown.css => Markdown.css} (100%)
 rename src/components/{Proposals/SnapshotProposalDetails/SnapshotProposalDescription.tsx => ui/proposal/Markdown.tsx} (81%)

diff --git a/package-lock.json b/package-lock.json
index 825913bcf9..499d1a16d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,6 +51,7 @@
         "react-markdown": "^9.0.0",
         "react-toastify": "^9.0.8",
         "remark-gfm": "^4.0.0",
+        "remove-markdown": "^0.5.0",
         "viem": "^1.21",
         "wagmi": "^1.4.11",
         "yup": "^1"
@@ -62,6 +63,7 @@
         "@testing-library/react": "^14.2.1",
         "@types/react": "^18.0.17",
         "@types/react-dom": "^18.0.6",
+        "@types/remove-markdown": "^0.3.4",
         "@typescript-eslint/eslint-plugin": "^6.19.0",
         "@typescript-eslint/parser": "^6.19.0",
         "@vitejs/plugin-react": "^4.2.1",
@@ -11132,6 +11134,12 @@
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
       "peer": true
     },
+    "node_modules/@types/remove-markdown": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@types/remove-markdown/-/remove-markdown-0.3.4.tgz",
+      "integrity": "sha512-i753EH/p02bw7bLlpfS/4CV1rdikbGiLabWyVsAvsFid3cA5RNU1frG7JycgY+NSnFwtoGlElvZVceCytecTDA==",
+      "dev": true
+    },
     "node_modules/@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -18150,6 +18158,17 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "dev": true
     },
+    "node_modules/immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "optional": true,
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
@@ -23875,16 +23894,15 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "node_modules/react-markdown": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.0.tgz",
-      "integrity": "sha512-v6yNf3AB8GfJ8lCpUvzxAXKxgsHpdmWPlcVRQ6Nocsezp255E/IDrF31kLQsPJeB/cKto/geUwjU36wH784FCA==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
       "dependencies": {
         "@types/hast": "^3.0.0",
         "devlop": "^1.0.0",
         "hast-util-to-jsx-runtime": "^2.0.0",
         "html-url-attributes": "^3.0.0",
         "mdast-util-to-hast": "^13.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.0.0",
         "unified": "^11.0.0",
@@ -24403,6 +24421,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remove-markdown": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.0.tgz",
+      "integrity": "sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg=="
+    },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
@@ -36691,6 +36714,12 @@
         }
       }
     },
+    "@types/remove-markdown": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@types/remove-markdown/-/remove-markdown-0.3.4.tgz",
+      "integrity": "sha512-i753EH/p02bw7bLlpfS/4CV1rdikbGiLabWyVsAvsFid3cA5RNU1frG7JycgY+NSnFwtoGlElvZVceCytecTDA==",
+      "dev": true
+    },
     "@types/scheduler": {
       "version": "0.16.2",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
@@ -42204,6 +42233,13 @@
       "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
       "dev": true
     },
+    "immer": {
+      "version": "9.0.21",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
+      "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
+      "optional": true,
+      "peer": true
+    },
     "immutable": {
       "version": "3.7.6",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
@@ -46512,16 +46548,15 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
     "react-markdown": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.0.tgz",
-      "integrity": "sha512-v6yNf3AB8GfJ8lCpUvzxAXKxgsHpdmWPlcVRQ6Nocsezp255E/IDrF31kLQsPJeB/cKto/geUwjU36wH784FCA==",
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
       "requires": {
         "@types/hast": "^3.0.0",
         "devlop": "^1.0.0",
         "hast-util-to-jsx-runtime": "^2.0.0",
         "html-url-attributes": "^3.0.0",
         "mdast-util-to-hast": "^13.0.0",
-        "micromark-util-sanitize-uri": "^2.0.0",
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.0.0",
         "unified": "^11.0.0",
@@ -46904,6 +46939,11 @@
         "unified": "^11.0.0"
       }
     },
+    "remove-markdown": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.5.0.tgz",
+      "integrity": "sha512-x917M80K97K5IN1L8lUvFehsfhR8cYjGQ/yAMRI9E7JIKivtl5Emo5iD13DhMr+VojzMCiYk8V2byNPwT/oapg=="
+    },
     "remove-trailing-separator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
diff --git a/package.json b/package.json
index dcff7f09e4..3c27495536 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "react-markdown": "^9.0.0",
     "react-toastify": "^9.0.8",
     "remark-gfm": "^4.0.0",
+    "remove-markdown": "^0.5.0",
     "viem": "^1.21",
     "wagmi": "^1.4.11",
     "yup": "^1"
@@ -85,6 +86,7 @@
     "@testing-library/react": "^14.2.1",
     "@types/react": "^18.0.17",
     "@types/react-dom": "^18.0.6",
+    "@types/remove-markdown": "^0.3.4",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.1",
diff --git a/src/assets/css/SnapshotProposalMarkdown.css b/src/assets/css/Markdown.css
similarity index 100%
rename from src/assets/css/SnapshotProposalMarkdown.css
rename to src/assets/css/Markdown.css
diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx
index 5ec0760cc3..c5d27ce2b3 100644
--- a/src/components/Activity/ActivityDescription.tsx
+++ b/src/components/Activity/ActivityDescription.tsx
@@ -1,19 +1,18 @@
-import { Flex } from '@chakra-ui/react';
-import { Activity, SnapshotProposal } from '../../types';
-import SnapshotProposalDescription from '../Proposals/SnapshotProposalDetails/SnapshotProposalDescription';
+import { Box, Flex } from '@chakra-ui/react';
+import { useGetMetadata } from '../../hooks/DAO/proposal/useGetMetadata';
+import { Activity, FractalProposal, SnapshotProposal } from '../../types';
+import Markdown from '../ui/proposal/Markdown';
 import { ProposalTitle } from './ActivityDescriptionGovernance';
 import { ActivityDescriptionTreasury } from './ActivityDescriptionTreasury';
 
 interface IActivityDescription {
   activity: Activity;
-  showFullSnapshotDescription?: boolean;
+  showFullDescription?: boolean;
 }
 
-export function ActivityDescription({
-  activity,
-  showFullSnapshotDescription,
-}: IActivityDescription) {
-  const snapshotProposalActivity = activity as SnapshotProposal;
+export function ActivityDescription({ activity, showFullDescription }: IActivityDescription) {
+  const metaData = useGetMetadata(activity as FractalProposal);
+  const snapshotProposal = activity as SnapshotProposal;
   return (
     <Flex
       color="grayscale.100"
@@ -23,12 +22,15 @@ export function ActivityDescription({
       flexWrap="wrap"
     >
       <ProposalTitle activity={activity} />
-      {!!snapshotProposalActivity.snapshotProposalId && (
-        <SnapshotProposalDescription
-          truncate={!showFullSnapshotDescription}
-          proposal={snapshotProposalActivity}
-        />
-      )}
+      {snapshotProposal.description ||
+        (metaData.description && (
+          <Box my={4}>
+            <Markdown
+              content={snapshotProposal.description || metaData.description}
+              truncate={!showFullDescription}
+            />
+          </Box>
+        ))}
       {!!activity.transaction && <ActivityDescriptionTreasury activity={activity} />}
     </Flex>
   );
diff --git a/src/components/CreateProposalTemplate/ProposalTemplateDetails.tsx b/src/components/CreateProposalTemplate/ProposalTemplateDetails.tsx
index 938a099a98..a470459623 100644
--- a/src/components/CreateProposalTemplate/ProposalTemplateDetails.tsx
+++ b/src/components/CreateProposalTemplate/ProposalTemplateDetails.tsx
@@ -4,7 +4,8 @@ import { Fragment, PropsWithChildren } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
 import { CreateProposalTemplateForm } from '../../types/createProposalTemplate';
-import LineBreakBlock from '../ui/utils/LineBreakBlock';
+import Markdown from '../ui/proposal/Markdown';
+import '../../assets/css/Markdown.css';
 
 export function TransactionValueContainer({
   children,
@@ -65,10 +66,9 @@ export default function ProposalTemplateDetails({
         </HStack>
         <HStack justifyContent="space-between">
           <Text color="grayscale.500">{t('proposalTemplateDescription')}</Text>
-          <LineBreakBlock
-            textAlign="right"
-            wordBreak="break-word"
-            text={proposalTemplateMetadata.description?.trim()}
+          <Markdown
+            content={proposalTemplateMetadata.description}
+            collapsedLines={2}
           />
         </HStack>
         <Divider color="chocolate.700" />
diff --git a/src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx b/src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx
index f07b3cfe07..3d58b366e3 100644
--- a/src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx
+++ b/src/components/CreateProposalTemplate/ProposalTemplateMetadata.tsx
@@ -38,13 +38,13 @@ export default function ProposalTemplateMetadata({
         />
         <TextareaComponent
           label={t('proposalTemplateDescription')}
+          subLabel={t('')}
           helper={t('proposalTemplateDescriptionHelperText')}
           isRequired={false}
           value={proposalTemplateMetadata.description}
           onChange={e => setFieldValue('proposalTemplateMetadata.description', e.target.value)}
           disabled={false}
-          rows={3}
-          maxLength={300}
+          rows={12}
         />
       </VStack>
       <Divider
diff --git a/src/components/Proposals/ProposalInfo.tsx b/src/components/Proposals/ProposalInfo.tsx
index 58343cff89..c72d393241 100644
--- a/src/components/Proposals/ProposalInfo.tsx
+++ b/src/components/Proposals/ProposalInfo.tsx
@@ -62,16 +62,8 @@ export function ProposalInfo({
       <Box mt={4}>
         <ActivityDescription
           activity={proposal}
-          showFullSnapshotDescription
+          showFullDescription
         />
-        {!isSnapshotProposal && (
-          <Text
-            my={4}
-            whiteSpace="break-spaces"
-          >
-            {metaData.description}
-          </Text>
-        )}
         {metaData.documentationUrl && (
           <Text
             onClick={confirmUrl}
diff --git a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalDescription.tsx b/src/components/ui/proposal/Markdown.tsx
similarity index 81%
rename from src/components/Proposals/SnapshotProposalDetails/SnapshotProposalDescription.tsx
rename to src/components/ui/proposal/Markdown.tsx
index bc2ae95b47..d82fd26ce2 100644
--- a/src/components/Proposals/SnapshotProposalDetails/SnapshotProposalDescription.tsx
+++ b/src/components/ui/proposal/Markdown.tsx
@@ -2,10 +2,10 @@ import { Text, Button } from '@chakra-ui/react';
 import Image from 'next/image';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import Markdown, { Components } from 'react-markdown';
+import ReactMarkdown, { Components } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { SnapshotProposal } from '../../../types';
-import '../../../assets/css/SnapshotProposalMarkdown.css';
+import removeMd from 'remove-markdown';
+import '../../../assets/css/Markdown.css';
 
 function CustomMarkdownImage({ src, alt }: { src?: string; alt?: string }) {
   const [error, setError] = useState(false);
@@ -34,20 +34,19 @@ const MarkdownComponents: Components = {
   },
 };
 
-interface ISnapshotProposalDescription {
+interface IMarkdown {
   truncate?: boolean;
-  proposal: SnapshotProposal;
+  collapsedLines?: number;
+  content: string;
 }
 
-export default function SnapshotProposalDescription({
-  truncate,
-  proposal,
-}: ISnapshotProposalDescription) {
+export default function Markdown({ truncate, content, collapsedLines = 6 }: IMarkdown) {
   const { t } = useTranslation('common');
   const [collapsed, setCollapsed] = useState(true);
   const [totalLines, setTotalLines] = useState(0);
   const [totalLinesError, setTotalLinesError] = useState(false);
   const markdownTextContainerRef = useRef<HTMLParagraphElement>(null);
+  const plainText = removeMd(content);
 
   useEffect(() => {
     if (
@@ -60,6 +59,7 @@ export default function SnapshotProposalDescription({
       const lineHeight = parseInt(
         document.defaultView.getComputedStyle(markdownTextContainerRef.current, null).lineHeight,
       );
+      console.log(lineHeight);
       if (isNaN(lineHeight)) {
         setCollapsed(false);
         setTotalLinesError(true);
@@ -69,7 +69,7 @@ export default function SnapshotProposalDescription({
         setTotalLinesError(false);
       }
     }
-  }, []);
+  }, [content]);
 
   const handleToggleCollapse = () => {
     setCollapsed(prevState => !prevState);
@@ -91,7 +91,7 @@ export default function SnapshotProposalDescription({
         noOfLines={2}
         fontWeight={400}
       >
-        {proposal.description}
+        {plainText}
       </Text>
     );
   }
@@ -99,21 +99,21 @@ export default function SnapshotProposalDescription({
   return (
     <>
       <Text
-        noOfLines={collapsed ? 6 : undefined}
-        maxWidth="100%"
-        minWidth="100%"
+        noOfLines={collapsed ? collapsedLines : undefined}
         ref={markdownTextContainerRef}
+        maxWidth="100%"
       >
-        <Markdown
+        <ReactMarkdown
           remarkPlugins={[remarkGfm]}
           urlTransform={handleTransformURI}
           components={MarkdownComponents}
           className="markdown-body"
         >
-          {proposal.description}
-        </Markdown>
+          {content}
+        </ReactMarkdown>
       </Text>
-      {totalLines > 6 && !totalLinesError && (
+
+      {totalLines > collapsedLines && !totalLinesError && (
         <Button
           marginTop={4}
           paddingLeft={0}
diff --git a/src/i18n/locales/en/proposal.json b/src/i18n/locales/en/proposal.json
index 8a46320af7..2f8da0fd37 100644
--- a/src/i18n/locales/en/proposal.json
+++ b/src/i18n/locales/en/proposal.json
@@ -61,7 +61,7 @@
   "proposalTitleHelper": "A short title for this proposal",
   "proposalTitlePlaceholder": "A new proposal",
   "proposalDescription": "Proposal Description",
-  "proposalDescriptionHelper": "Add a brief description",
+  "proposalDescriptionHelper": "Add a brief description, markdown supported",
   "proposalDescriptionPlaceholder": "A brief description",
   "proposalAdditionalResources": "Additional Resources",
   "proposalAdditionalResourcesHelper": "A link to any discussion or formal documentation",
diff --git a/src/i18n/locales/en/proposalTemplate.json b/src/i18n/locales/en/proposalTemplate.json
index a6b9d7111c..e389062361 100644
--- a/src/i18n/locales/en/proposalTemplate.json
+++ b/src/i18n/locales/en/proposalTemplate.json
@@ -3,7 +3,7 @@
   "proposalTemplateTitle": "Proposal Template Title",
   "proposalTemplateTitleHelperText": "A short title for this proposal template",
   "proposalTemplateDescription": "Description",
-  "proposalTemplateDescriptionHelperText": "Add a brief description",
+  "proposalTemplateDescriptionHelperText": "Markdown syntax supported",
   "preview": "Preview",
   "previewTitle": "Title",
   "previewThumnbail": "Thumbnail",

From 4bee7496da193e5a5644e1a04268ccdb0b1010d4 Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Mon, 11 Mar 2024 23:37:59 +0100
Subject: [PATCH 02/10] Remove log

---
 src/components/ui/proposal/Markdown.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/ui/proposal/Markdown.tsx b/src/components/ui/proposal/Markdown.tsx
index d82fd26ce2..f3edda028e 100644
--- a/src/components/ui/proposal/Markdown.tsx
+++ b/src/components/ui/proposal/Markdown.tsx
@@ -59,7 +59,6 @@ export default function Markdown({ truncate, content, collapsedLines = 6 }: IMar
       const lineHeight = parseInt(
         document.defaultView.getComputedStyle(markdownTextContainerRef.current, null).lineHeight,
       );
-      console.log(lineHeight);
       if (isNaN(lineHeight)) {
         setCollapsed(false);
         setTotalLinesError(true);

From 3b84fd4714d2942d8df71423df8cb4a6f8789dc0 Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Mon, 11 Mar 2024 23:52:02 +0100
Subject: [PATCH 03/10] Style fix

---
 src/components/Activity/ActivityDescription.tsx    | 2 +-
 src/components/ProposalCreate/ProposalMetadata.tsx | 2 +-
 src/components/ui/proposal/Markdown.tsx            | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx
index c5d27ce2b3..020293917b 100644
--- a/src/components/Activity/ActivityDescription.tsx
+++ b/src/components/Activity/ActivityDescription.tsx
@@ -24,7 +24,7 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity
       <ProposalTitle activity={activity} />
       {snapshotProposal.description ||
         (metaData.description && (
-          <Box my={4}>
+          <Box my={4} minWidth="100%">
             <Markdown
               content={snapshotProposal.description || metaData.description}
               truncate={!showFullDescription}
diff --git a/src/components/ProposalCreate/ProposalMetadata.tsx b/src/components/ProposalCreate/ProposalMetadata.tsx
index 85d8f8203b..a25642fc5c 100644
--- a/src/components/ProposalCreate/ProposalMetadata.tsx
+++ b/src/components/ProposalCreate/ProposalMetadata.tsx
@@ -46,7 +46,7 @@ function ProposalMetadata(props: AzoriusMetadataProps) {
           onChange={e => setFieldValue('proposalMetadata.description', e.target.value)}
           disabled={false}
           placeholder={t('proposalDescriptionPlaceholder')}
-          rows={3}
+          rows={9}
         />
         <InputComponent
           label={t('proposalAdditionalResources')}
diff --git a/src/components/ui/proposal/Markdown.tsx b/src/components/ui/proposal/Markdown.tsx
index f3edda028e..11a4c955b3 100644
--- a/src/components/ui/proposal/Markdown.tsx
+++ b/src/components/ui/proposal/Markdown.tsx
@@ -89,6 +89,7 @@ export default function Markdown({ truncate, content, collapsedLines = 6 }: IMar
       <Text
         noOfLines={2}
         fontWeight={400}
+        minWidth="100%"
       >
         {plainText}
       </Text>

From 0d67bc6a82129899b31e2f0a9c83ccbe1c31cfba Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Thu, 14 Mar 2024 13:16:29 +0100
Subject: [PATCH 04/10] Fix markdown on ActivityDescriptionGovernance and
 ProposalTemplates list

---
 src/components/Activity/ActivityDescriptionGovernance.tsx | 3 ++-
 src/components/ProposalTemplates/ProposalTemplateCard.tsx | 8 ++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/Activity/ActivityDescriptionGovernance.tsx b/src/components/Activity/ActivityDescriptionGovernance.tsx
index af00c5c41c..aeebe7f696 100644
--- a/src/components/Activity/ActivityDescriptionGovernance.tsx
+++ b/src/components/Activity/ActivityDescriptionGovernance.tsx
@@ -10,6 +10,7 @@ import {
   SnapshotProposal,
   FractalProposal,
 } from '../../types';
+import Markdown from '../ui/proposal/Markdown';
 
 const formatId = (proposalId: string) => {
   if (proposalId.startsWith('0x')) {
@@ -60,7 +61,7 @@ export function ProposalTitle({ activity }: { activity: Activity }) {
   return (
     <>
       <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
-      <Text>{metaData.title || metaData.description}</Text>
+      {metaData.title ? <Text>{metaData.title}</Text> : metaData.description ? <Markdown truncate content={metaData.description}/> : null}
       {hasTransfers && <Text> {t('proposalDescriptionCont', { ns: 'dashboard' })} </Text>}
       <OnChainRejectionMessage activity={activity} />
     </>
diff --git a/src/components/ProposalTemplates/ProposalTemplateCard.tsx b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
index b9693b4a3b..f8d8d19f1c 100644
--- a/src/components/ProposalTemplates/ProposalTemplateCard.tsx
+++ b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
@@ -12,6 +12,7 @@ import ContentBox from '../ui/containers/ContentBox';
 import { OptionMenu } from '../ui/menus/OptionMenu';
 import { ModalType } from '../ui/modals/ModalProvider';
 import { useFractalModal } from '../ui/modals/useFractalModal';
+import Markdown from '../ui/proposal/Markdown';
 
 type ProposalTemplateCardProps = {
   proposalTemplate: ProposalTemplate;
@@ -122,12 +123,7 @@ export default function ProposalTemplateCard({
       >
         {title}
       </Text>
-      <Text
-        textStyle="text-sm-mono-regular"
-        color="grayscale.100"
-      >
-        {description}
-      </Text>
+      <Markdown content={description}/>
     </ContentBox>
   );
 }

From 335190e725b281c7b156f613bf951d7b9d3709d5 Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Thu, 14 Mar 2024 13:28:38 +0100
Subject: [PATCH 05/10] Cleanup and prettier

---
 .github/workflows/e2e-tests.yaml                     |  4 ++--
 docker/.env.tests                                    |  2 +-
 docker/webapp/Dockerfile                             | 12 ++++++------
 playwright.config.ts                                 |  2 +-
 src/components/Activity/ActivityDescription.tsx      |  5 ++++-
 .../Activity/ActivityDescriptionGovernance.tsx       |  9 ++++++++-
 .../ProposalTemplates/ProposalTemplateCard.tsx       |  2 +-
 7 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/.github/workflows/e2e-tests.yaml b/.github/workflows/e2e-tests.yaml
index 00eb0d7b76..0c4c7963e2 100644
--- a/.github/workflows/e2e-tests.yaml
+++ b/.github/workflows/e2e-tests.yaml
@@ -24,7 +24,7 @@ jobs:
       # Create an environment file with sensitive information
       - name: Create env file
         working-directory: ./docker
-        run: echo NEXT_PUBLIC_ALCHEMY_TESTING_API_KEY=${{ secrets.NEXT_PUBLIC_ALCHEMY_TESTING_API_KEY }} >> .env.tests.local
+        run: echo VITE_APP_ALCHEMY_TESTING_API_KEY=${{ secrets.VITE_APP_ALCHEMY_TESTING_API_KEY }} >> .env.tests.local
 
       # Set up Docker Buildx for building Docker images with cache support
       - name: Set up Docker Buildx
@@ -79,7 +79,7 @@ jobs:
 
       # Run the webapp Docker container
       - name: Run webapp container
-        run: docker run -d --name webapp -p 3000:3000 -e NEXT_PUBLIC_TESTING_ENVIRONMENT=true -e NEXT_PUBLIC_LOCAL_CHAIN_ID=31337 -e NEXT_PUBLIC_LOCAL_PROVIDER_URL=http://0.0.0.0:8545 webapp:latest
+        run: docker run -d --name webapp -p 3000:3000 -e VITE_APP_TESTING_ENVIRONMENT=true -e VITE_APP_LOCAL_CHAIN_ID=31337 -e VITE_APP_LOCAL_PROVIDER_URL=http://0.0.0.0:8545 webapp:latest
 
       # Remove existing package.json and package-lock.json, then create a new package.json
       - name: remove package.json
diff --git a/docker/.env.tests b/docker/.env.tests
index a920f1dc6d..249ba5de55 100644
--- a/docker/.env.tests
+++ b/docker/.env.tests
@@ -1 +1 @@
-NEXT_PUBLIC_ALCHEMY_TESTING_API_KEY=""
+VITE_APP_ALCHEMY_TESTING_API_KEY=""
diff --git a/docker/webapp/Dockerfile b/docker/webapp/Dockerfile
index 5a9286bdc9..11b92a6aba 100644
--- a/docker/webapp/Dockerfile
+++ b/docker/webapp/Dockerfile
@@ -1,14 +1,14 @@
 FROM node:18.12.1
 
 # Set build-time arguments
-ARG NEXT_PUBLIC_TESTING_ENVIRONMENT
-ARG NEXT_PUBLIC_LOCAL_CHAIN_ID
-ARG NEXT_PUBLIC_LOCAL_PROVIDER_URL
+ARG VITE_APP_TESTING_ENVIRONMENT
+ARG VITE_APP_LOCAL_CHAIN_ID
+ARG VITE_APP_LOCAL_PROVIDER_URL
 
 # Set environment variables
-ENV NEXT_PUBLIC_TESTING_ENVIRONMENT=$NEXT_PUBLIC_TESTING_ENVIRONMENT
-ENV NEXT_PUBLIC_LOCAL_CHAIN_ID=$NEXT_PUBLIC_LOCAL_CHAIN_ID
-ENV NEXT_PUBLIC_LOCAL_PROVIDER_URL=$NEXT_PUBLIC_LOCAL_PROVIDER_URL
+ENV VITE_APP_TESTING_ENVIRONMENT=$VITE_APP_TESTING_ENVIRONMENT
+ENV VITE_APP_LOCAL_CHAIN_ID=$VITE_APP_LOCAL_CHAIN_ID
+ENV VITE_APP_LOCAL_PROVIDER_URL=$VITE_APP_LOCAL_PROVIDER_URL
 
 # Set working directory
 WORKDIR /fractal-webapp/
diff --git a/playwright.config.ts b/playwright.config.ts
index 2ea3a75287..794468bf35 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
-  timeout: 30 * 1000, // From https://github.com/vercel/next.js/blob/canary/examples/with-playwright/playwright.config.ts
+  timeout: 30 * 1000,
   reporter: [
     /* List reporter for getting updates */
     [process.env.CI ? 'list' : 'line'],
diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx
index 020293917b..cf1e8f7ad3 100644
--- a/src/components/Activity/ActivityDescription.tsx
+++ b/src/components/Activity/ActivityDescription.tsx
@@ -24,7 +24,10 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity
       <ProposalTitle activity={activity} />
       {snapshotProposal.description ||
         (metaData.description && (
-          <Box my={4} minWidth="100%">
+          <Box
+            my={4}
+            minWidth="100%"
+          >
             <Markdown
               content={snapshotProposal.description || metaData.description}
               truncate={!showFullDescription}
diff --git a/src/components/Activity/ActivityDescriptionGovernance.tsx b/src/components/Activity/ActivityDescriptionGovernance.tsx
index aeebe7f696..2c9ec4ad88 100644
--- a/src/components/Activity/ActivityDescriptionGovernance.tsx
+++ b/src/components/Activity/ActivityDescriptionGovernance.tsx
@@ -61,7 +61,14 @@ export function ProposalTitle({ activity }: { activity: Activity }) {
   return (
     <>
       <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
-      {metaData.title ? <Text>{metaData.title}</Text> : metaData.description ? <Markdown truncate content={metaData.description}/> : null}
+      {metaData.title ? (
+        <Text>{metaData.title}</Text>
+      ) : metaData.description ? (
+        <Markdown
+          truncate
+          content={metaData.description}
+        />
+      ) : null}
       {hasTransfers && <Text> {t('proposalDescriptionCont', { ns: 'dashboard' })} </Text>}
       <OnChainRejectionMessage activity={activity} />
     </>
diff --git a/src/components/ProposalTemplates/ProposalTemplateCard.tsx b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
index 5ec599cced..d6c4d3a100 100644
--- a/src/components/ProposalTemplates/ProposalTemplateCard.tsx
+++ b/src/components/ProposalTemplates/ProposalTemplateCard.tsx
@@ -123,7 +123,7 @@ export default function ProposalTemplateCard({
       >
         {title}
       </Text>
-      <Markdown content={description}/>
+      <Markdown content={description} />
     </ContentBox>
   );
 }

From f85902a0192b5d4b946fd99310adee9620b54600 Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Thu, 14 Mar 2024 13:29:20 +0100
Subject: [PATCH 06/10] Fix import of markdown styles

---
 src/main.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/main.tsx b/src/main.tsx
index 571ea4f9ed..ccdabe63d7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,7 +8,7 @@ import { router } from './router';
 import '@fontsource/ibm-plex-mono';
 import '@fontsource/ibm-plex-sans';
 import 'react-toastify/dist/ReactToastify.min.css';
-import './assets/css/SnapshotProposalMarkdown.css';
+import './assets/css/Markdown.css';
 
 const root = document.getElementById('root');
 if (root !== null) {

From 5b7faa930dd0e9e67b4d6391f1a311fc6a7cb0cb Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Sat, 16 Mar 2024 12:18:52 +0100
Subject: [PATCH 07/10] Fix app crashing when clicking on ProposalTemplateCard,
 fix double description when title is missing

---
 .../Activity/ActivityDescriptionGovernance.tsx           | 6 ------
 src/components/ui/modals/ProposalTemplateModal.tsx       | 9 ++-------
 src/components/ui/page/Layout/index.tsx                  | 5 +++--
 src/providers/Providers.tsx                              | 3 +--
 4 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/src/components/Activity/ActivityDescriptionGovernance.tsx b/src/components/Activity/ActivityDescriptionGovernance.tsx
index 2c9ec4ad88..a22d80b953 100644
--- a/src/components/Activity/ActivityDescriptionGovernance.tsx
+++ b/src/components/Activity/ActivityDescriptionGovernance.tsx
@@ -10,7 +10,6 @@ import {
   SnapshotProposal,
   FractalProposal,
 } from '../../types';
-import Markdown from '../ui/proposal/Markdown';
 
 const formatId = (proposalId: string) => {
   if (proposalId.startsWith('0x')) {
@@ -63,11 +62,6 @@ export function ProposalTitle({ activity }: { activity: Activity }) {
       <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
       {metaData.title ? (
         <Text>{metaData.title}</Text>
-      ) : metaData.description ? (
-        <Markdown
-          truncate
-          content={metaData.description}
-        />
       ) : null}
       {hasTransfers && <Text> {t('proposalDescriptionCont', { ns: 'dashboard' })} </Text>}
       <OnChainRejectionMessage activity={activity} />
diff --git a/src/components/ui/modals/ProposalTemplateModal.tsx b/src/components/ui/modals/ProposalTemplateModal.tsx
index 529e68f810..f2d86c5af9 100644
--- a/src/components/ui/modals/ProposalTemplateModal.tsx
+++ b/src/components/ui/modals/ProposalTemplateModal.tsx
@@ -21,7 +21,7 @@ import { ProposalTemplate } from '../../../types/createProposalTemplate';
 import { isValidUrl } from '../../../utils/url';
 import { CustomNonceInput } from '../forms/CustomNonceInput';
 import { InputComponent } from '../forms/InputComponent';
-import LineBreakBlock from '../utils/LineBreakBlock';
+import Markdown from '../proposal/Markdown';
 
 interface IProposalTemplateModalProps {
   proposalTemplate: ProposalTemplate;
@@ -134,12 +134,7 @@ export default function ProposalTemplateModal({
 
   return (
     <Box>
-      <LineBreakBlock
-        textStyle="text-base-mono-regular"
-        color="grayscale.100"
-        marginBottom="1.5rem"
-        text={description}
-      />
+      {description && <Markdown content={description}/>}
       <Divider color="chocolate.700" />
       {filledProposalTransactions.map((transaction, transactionIndex) => (
         <VStack key={transactionIndex}>
diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index d267c0f34f..eaa897dbb1 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -1,12 +1,13 @@
 import { Box, Container, Grid, GridItem } from '@chakra-ui/react';
 import { Outlet } from 'react-router-dom';
 import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
+import { ModalProvider } from '../../modals/ModalProvider';
 import Header from '../Header';
 import Navigation from '../Navigation';
 
 export default function Layout() {
   return (
-    <Grid
+    <ModalProvider><Grid
       templateAreas={{
         base: `"nav header"
 "main main"`,
@@ -56,6 +57,6 @@ export default function Layout() {
       >
         <Navigation />
       </GridItem>
-    </Grid>
+    </Grid></ModalProvider>
   );
 }
diff --git a/src/providers/Providers.tsx b/src/providers/Providers.tsx
index 5af654a22f..223e8c29e5 100644
--- a/src/providers/Providers.tsx
+++ b/src/providers/Providers.tsx
@@ -5,7 +5,6 @@ import { ReactNode, useEffect } from 'react';
 import { ToastContainer } from 'react-toastify';
 import { WagmiConfig } from 'wagmi';
 import { theme } from '../assets/theme';
-import { ModalProvider } from '../components/ui/modals/ModalProvider';
 import { ErrorFallback } from '../components/ui/utils/ErrorFallback';
 import graphQLClient from '../graphql';
 import { FractalErrorBoundary, initErrorLogging } from '../helpers/errorLogging';
@@ -41,7 +40,7 @@ export default function Providers({ children }: { children: ReactNode }) {
                       newestOnTop={false}
                       pauseOnFocusLoss={false}
                     />
-                    <ModalProvider>{children}</ModalProvider>
+                    {children}
                   </AppProvider>
                 </EthersContextProvider>
               </NetworkConfigProvider>

From dce4c14385e93c44138ac54d7d35b2a9886ec2df Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Sat, 16 Mar 2024 12:20:26 +0100
Subject: [PATCH 08/10] Move ModalProvider to router.tsx instead of injecting
 that directly to layout

---
 src/components/Activity/ActivityDescriptionGovernance.tsx | 4 +---
 src/components/ui/modals/ProposalTemplateModal.tsx        | 2 +-
 src/components/ui/page/Layout/index.tsx                   | 5 ++---
 src/router.tsx                                            | 7 ++++++-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Activity/ActivityDescriptionGovernance.tsx b/src/components/Activity/ActivityDescriptionGovernance.tsx
index a22d80b953..7ef99cd291 100644
--- a/src/components/Activity/ActivityDescriptionGovernance.tsx
+++ b/src/components/Activity/ActivityDescriptionGovernance.tsx
@@ -60,9 +60,7 @@ export function ProposalTitle({ activity }: { activity: Activity }) {
   return (
     <>
       <Text>{formatId((activity as GovernanceActivity).proposalId)}</Text>
-      {metaData.title ? (
-        <Text>{metaData.title}</Text>
-      ) : null}
+      {metaData.title ? <Text>{metaData.title}</Text> : null}
       {hasTransfers && <Text> {t('proposalDescriptionCont', { ns: 'dashboard' })} </Text>}
       <OnChainRejectionMessage activity={activity} />
     </>
diff --git a/src/components/ui/modals/ProposalTemplateModal.tsx b/src/components/ui/modals/ProposalTemplateModal.tsx
index f2d86c5af9..7d18175f94 100644
--- a/src/components/ui/modals/ProposalTemplateModal.tsx
+++ b/src/components/ui/modals/ProposalTemplateModal.tsx
@@ -134,7 +134,7 @@ export default function ProposalTemplateModal({
 
   return (
     <Box>
-      {description && <Markdown content={description}/>}
+      {description && <Markdown content={description} />}
       <Divider color="chocolate.700" />
       {filledProposalTransactions.map((transaction, transactionIndex) => (
         <VStack key={transactionIndex}>
diff --git a/src/components/ui/page/Layout/index.tsx b/src/components/ui/page/Layout/index.tsx
index eaa897dbb1..d267c0f34f 100644
--- a/src/components/ui/page/Layout/index.tsx
+++ b/src/components/ui/page/Layout/index.tsx
@@ -1,13 +1,12 @@
 import { Box, Container, Grid, GridItem } from '@chakra-ui/react';
 import { Outlet } from 'react-router-dom';
 import { CONTENT_HEIGHT, HEADER_HEIGHT } from '../../../../constants/common';
-import { ModalProvider } from '../../modals/ModalProvider';
 import Header from '../Header';
 import Navigation from '../Navigation';
 
 export default function Layout() {
   return (
-    <ModalProvider><Grid
+    <Grid
       templateAreas={{
         base: `"nav header"
 "main main"`,
@@ -57,6 +56,6 @@ export default function Layout() {
       >
         <Navigation />
       </GridItem>
-    </Grid></ModalProvider>
+    </Grid>
   );
 }
diff --git a/src/router.tsx b/src/router.tsx
index 1c9e323b02..dfda241782 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,4 +1,5 @@
 import { createBrowserRouter } from 'react-router-dom';
+import { ModalProvider } from './components/ui/modals/ModalProvider';
 import Layout from './components/ui/page/Layout';
 import FourOhFourPage from './pages/404';
 import DAOController from './pages/DAOController';
@@ -19,7 +20,11 @@ import Treasury from './pages/daos/[daoAddress]/treasury';
 export const router = createBrowserRouter([
   {
     path: '/',
-    element: <Layout />,
+    element: (
+      <ModalProvider>
+        <Layout />
+      </ModalProvider>
+    ),
     children: [
       {
         index: true,

From e695b8a9ba7f576b14ea6028931be7a0907f1d0f Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Mon, 18 Mar 2024 17:40:58 +0100
Subject: [PATCH 09/10] Add vertical resize

---
 .../Activity/ActivityDescription.tsx          | 25 ++++++++++---------
 src/components/ui/forms/InputComponent.tsx    | 15 +++++++++--
 .../ui/modals/ProposalTemplateModal.tsx       |  8 ++++--
 3 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx
index cf1e8f7ad3..88aeaae158 100644
--- a/src/components/Activity/ActivityDescription.tsx
+++ b/src/components/Activity/ActivityDescription.tsx
@@ -13,6 +13,8 @@ interface IActivityDescription {
 export function ActivityDescription({ activity, showFullDescription }: IActivityDescription) {
   const metaData = useGetMetadata(activity as FractalProposal);
   const snapshotProposal = activity as SnapshotProposal;
+  const description = snapshotProposal.description || metaData.description;
+
   return (
     <Flex
       color="grayscale.100"
@@ -22,18 +24,17 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity
       flexWrap="wrap"
     >
       <ProposalTitle activity={activity} />
-      {snapshotProposal.description ||
-        (metaData.description && (
-          <Box
-            my={4}
-            minWidth="100%"
-          >
-            <Markdown
-              content={snapshotProposal.description || metaData.description}
-              truncate={!showFullDescription}
-            />
-          </Box>
-        ))}
+      {description && (
+        <Box
+          my={4}
+          minWidth="100%"
+        >
+          <Markdown
+            content={description}
+            truncate={!showFullDescription}
+          />
+        </Box>
+      )}
       {!!activity.transaction && <ActivityDescriptionTreasury activity={activity} />}
     </Flex>
   );
diff --git a/src/components/ui/forms/InputComponent.tsx b/src/components/ui/forms/InputComponent.tsx
index 6485176b2c..d9b23809d0 100644
--- a/src/components/ui/forms/InputComponent.tsx
+++ b/src/components/ui/forms/InputComponent.tsx
@@ -7,6 +7,7 @@ import {
   GridItem,
   GridProps,
   GridItemProps,
+  ResponsiveValue,
 } from '@chakra-ui/react';
 import { LabelWrapper } from '@decent-org/fractal-ui';
 import { BigNumberInput, BigNumberInputProps } from './BigNumberInput';
@@ -43,6 +44,7 @@ interface TextareaProps extends Omit<BaseProps, 'children'> {
   onChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined;
   placeholder?: string;
   rows?: number;
+  resize?: ResponsiveValue<string>;
 }
 interface BigNumberProps
   extends Omit<BaseProps, 'children' | 'value'>,
@@ -142,7 +144,16 @@ export function EthAddressComponent(props: EthAddressProps) {
 }
 
 export function TextareaComponent(props: TextareaProps) {
-  const { id, value, disabled, onChange, rows, placeholder, maxLength } = props;
+  const {
+    id,
+    value,
+    disabled,
+    onChange,
+    rows,
+    placeholder,
+    maxLength,
+    resize = 'vertical',
+  } = props;
   return (
     <LabelComponent
       {...props}
@@ -150,7 +161,7 @@ export function TextareaComponent(props: TextareaProps) {
     >
       <Textarea
         id={id}
-        resize="none"
+        resize={resize as any}
         onChange={onChange}
         value={value}
         isDisabled={disabled}
diff --git a/src/components/ui/modals/ProposalTemplateModal.tsx b/src/components/ui/modals/ProposalTemplateModal.tsx
index 7d18175f94..d05278695e 100644
--- a/src/components/ui/modals/ProposalTemplateModal.tsx
+++ b/src/components/ui/modals/ProposalTemplateModal.tsx
@@ -134,8 +134,12 @@ export default function ProposalTemplateModal({
 
   return (
     <Box>
-      {description && <Markdown content={description} />}
-      <Divider color="chocolate.700" />
+      {description && (
+        <>
+          <Markdown content={description} />
+          <Divider color="chocolate.700" />
+        </>
+      )}
       {filledProposalTransactions.map((transaction, transactionIndex) => (
         <VStack key={transactionIndex}>
           {transaction.parameters.map(

From 49c1423f361f207f5e1d125d010be9cfe58179f6 Mon Sep 17 00:00:00 2001
From: Kirill Klimenko <klimenkomud@gmail.com>
Date: Mon, 18 Mar 2024 21:11:30 +0100
Subject: [PATCH 10/10] Add comment describing placement of ModalProvider,
 better typing for Textarea resize prop

---
 src/components/ui/forms/InputComponent.tsx | 4 ++--
 src/router.tsx                             | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/ui/forms/InputComponent.tsx b/src/components/ui/forms/InputComponent.tsx
index d9b23809d0..a6ba4913b5 100644
--- a/src/components/ui/forms/InputComponent.tsx
+++ b/src/components/ui/forms/InputComponent.tsx
@@ -44,7 +44,7 @@ interface TextareaProps extends Omit<BaseProps, 'children'> {
   onChange: React.ChangeEventHandler<HTMLTextAreaElement> | undefined;
   placeholder?: string;
   rows?: number;
-  resize?: ResponsiveValue<string>;
+  resize?: ResponsiveValue<'vertical' | 'horizontal' | 'both' | 'none'>;
 }
 interface BigNumberProps
   extends Omit<BaseProps, 'children' | 'value'>,
@@ -161,7 +161,7 @@ export function TextareaComponent(props: TextareaProps) {
     >
       <Textarea
         id={id}
-        resize={resize as any}
+        resize={resize}
         onChange={onChange}
         value={value}
         isDisabled={disabled}
diff --git a/src/router.tsx b/src/router.tsx
index dfda241782..0779767930 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -21,6 +21,9 @@ export const router = createBrowserRouter([
   {
     path: '/',
     element: (
+      // We're placing ModalProvider here instead of src/providers/Providers.tsx due to the need of having router context
+      // within underlying modals. Otherwise - trying to invoke routing-related hooks would lead to crash.
+      // Not the best place to have this provider here but also more reasonalbe than putting that into <Layout />
       <ModalProvider>
         <Layout />
       </ModalProvider>