Merge pull request #139 from CudoVentures/cudos-dev

Release Private Testnet 1.1.0.4

package.json

@@ -45,6 +45,7 @@
     "react-router-dom": "^6.2.2",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
+    "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
     "uint8-to-base64": "^0.2.0",
     "vite": "^2.9.8"

src/components/Layout/LeftMenu.tsx

@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom'
 import { useSelector } from 'react-redux'
 import { RootState } from 'store'
 import { getMenuItems, MenuItems } from './menuHelpers'
-import { useMidlowResCheck } from './hooks/useScreenChecks'
+import { useIsScreenLessThan } from './hooks/useScreenChecks'
 
 import { styles } from './styles'
 
@@ -13,7 +13,7 @@ const Menu = () => {
   const [menuItems, setMenuItems] = useState<MenuItems[]>([])
   const { chosenNetwork, loadingState } = useSelector((state: RootState) => state.profile)
   const { pathname } = useLocation()
-  const isMidLowRes = useMidlowResCheck()
+  const isScreenWidthLessThan1440px = useIsScreenLessThan('1440px', 'width')
 
   useEffect(() => {
 
@@ -56,7 +56,7 @@ const Menu = () => {
             }}
           >
             <Tooltip
-              title={isMidLowRes ? item.text : ''}
+              title={isScreenWidthLessThan1440px ? item.text : ''}
               placement="right"
               componentsProps={{
                 tooltip: {
@@ -79,7 +79,7 @@ const Menu = () => {
                 onClick={() => setSelected(index)}
               >
                 {item.icon}
-                {isMidLowRes ? null : <Typography
+                {isScreenWidthLessThan1440px ? null : <Typography
                   marginLeft={2.5}
                   variant='subtitle2'
                   color={selected === index ? 'white' : 'inherit'}

src/components/Markdown/index.tsx

@@ -0,0 +1,17 @@
+import ReactMarkdown from "react-markdown"
+import gfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+import markDownStyle from './markdown-styles.module.css'
+
+export const Markdown = ({ text }: { text: string }) => {
+
+    return (
+        <ReactMarkdown
+            className={markDownStyle.reactMarkDown}
+            remarkPlugins={[gfm, remarkBreaks]}
+        >
+            {text}
+        </ReactMarkdown>
+    )
+}
+export default Markdown

src/containers/Dashboard/index.tsx

@@ -18,7 +18,7 @@ const Dashboard = () => {
   const theme = useTheme()
   const isBigScreen = useMediaQuery(theme.breakpoints.up('lg'))
   const isVeryBigScreen = useMediaQuery(theme.breakpoints.up('xl'))
-  const isScreenWidthLessThan1400px = useIsScreenLessThan('1400px', 'width')
+  const isScreenWidthLessThan1350px = useIsScreenLessThan('1350px', 'width')
 
   return (
     <Fade in timeout={500}>
@@ -45,7 +45,7 @@ const Dashboard = () => {
               item
               xs={12}
               md={12}
-              lg={isScreenWidthLessThan1400px ? 12 : 9}
+              lg={isScreenWidthLessThan1350px ? 12 : 9}
               xl={6}
             >
               <WalletInformation />
@@ -60,7 +60,7 @@ const Dashboard = () => {
               item
               xs={12}
               md={12}
-              lg={isScreenWidthLessThan1400px ? 12 : 3}
+              lg={isScreenWidthLessThan1350px ? 12 : 3}
               xl={2}
             >
               <NetworkStatistics />

src/containers/Proposals/Proposal.tsx

@@ -21,12 +21,9 @@ import useVotingModal from './components/VotingModal/hooks'
 import useDepositModal from './components/DepositModal/hooks'
 import { proposalStatus } from './proposalStatus'
 import { CHAIN_DETAILS } from 'utils/constants'
-import ReactMarkdown from 'react-markdown'
-import gfm from 'remark-gfm'
 import { COLORS_DARK_THEME } from 'theme/colors'
-
+import Markdown from 'components/Markdown'
 import { styles } from './styles'
-import markDownStyle from './markdown-styles.module.css'
 
 const Proposal = () => {
   const proposalState = useSelector((state: RootState) => state.proposals)
@@ -203,12 +200,7 @@ const Proposal = () => {
                 ) : null}
               </Box>
               <Box color="text.secondary" sx={styles.proposalContent}>
-                <ReactMarkdown
-                  className={markDownStyle.reactMarkDown}
-                  remarkPlugins={[gfm]}
-                >
-                  {proposal.description}
-                </ReactMarkdown>
+                <Markdown text={proposal.description} />
               </Box>
               <Box sx={{ display: 'flex', width: '100%' }}>
                 <Box

src/containers/Proposals/ProposalDetails/components/ProposalInformation/index.tsx

@@ -13,7 +13,7 @@ import useVotingModal from '../../../components/VotingModal/hooks'
 import useDepositModal from '../../../components/DepositModal/hooks'
 import { CHAIN_DETAILS } from 'utils/constants'
 import { COLORS_DARK_THEME } from 'theme/colors'
-
+import Markdown from 'components/Markdown'
 import { styles } from '../../../styles'
 
 const ProposalInformation = () => {
@@ -29,6 +29,7 @@ const ProposalInformation = () => {
     )
   }
 
+  console.log(overview.description)
   return (
     <Card>
       <Box sx={{ position: 'relative' }}>
@@ -121,9 +122,7 @@ const ProposalInformation = () => {
             </Box>
           ) : null}
         </Box>
-        <Box color="text.secondary" sx={styles.proposalContent}>
-          <Typography>{overview.description}</Typography>
-        </Box>
+        <Markdown text={overview.description} />
         <Box sx={{ display: 'flex', width: '100%' }}>
           <Box
             sx={{

src/containers/Proposals/ProposalDetails/index.tsx

@@ -21,7 +21,7 @@ const ProposalDetails = () => {
   return (
     <>
       <Fade in timeout={500}>
-        <Box display="flex" flexDirection="column" gap={2}>
+        <Box display="flex" flexDirection="column" gap={2} paddingRight='2rem'>
           <Navigation />
           {!overview?.content['@type'] ? (
             <Box

yarn.lock

@@ -6715,6 +6715,15 @@ [email protected]:
     fbjs "^3.0.0"
     invariant "^2.2.4"
 
+remark-breaks@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/remark-breaks/-/remark-breaks-3.0.2.tgz#f466b9d3474d7323146c0149fc1496dabadd908e"
+  integrity sha512-x96YDJ9X+Ry0/JNZFKfr1hpcAKvGYWfUTszxY9RbxKEqq6uzPPoLCuHdZsLPZZUdAv3nCROyc7FPrQLWr2rxyw==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    unified "^10.0.0"
+    unist-util-visit "^4.0.0"
+
 remark-gfm@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/remark-gfm/-/remark-gfm-3.0.1.tgz#0b180f095e3036545e9dddac0e8df3fa5cfee54f"