fix: display suggested proposal params changes [web-desmos] (#1311)

## Description

Closes: #XXXX

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

_All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues._

I have...

- [x] ran linting via `yarn lint`
- [x] wrote tests where necessary
- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [x] targeted the correct branch
- [x] provided a link to the relevant issue or specification
- [x] reviewed "Files changed" and left comments if necessary
- [x] confirmed all CI checks have passed
- [x] added a changeset via [`yarn && yarn
changeset`](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)

.changeset/spotty-coats-reflect.md

@@ -0,0 +1,6 @@
+---
+'web-desmos': major
+'ui': major
+---
+
+display suggested proposal params changes on proposal page

apps/web-desmos/src/screens/proposal_details/components/overview/index.tsx

@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography';
 import useAppTranslation from '@/hooks/useAppTranslation';
 import numeral from 'numeral';
 import * as R from 'ramda';
-import { FC, useCallback } from 'react';
+import { FC, useCallback, useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import Box from '@/components/box';
 import Markdown from '@/components/markdown';
@@ -12,28 +12,45 @@ import SingleProposal from '@/components/single_proposal';
 import { useProfileRecoil } from '@/recoil/profiles/hooks';
 import { readDate, readTimeFormat } from '@/recoil/settings';
 import CommunityPoolSpend from '@/screens/proposal_details/components/overview/components/community_pool_spend';
+import UpdateParams from '@/screens/proposal_details/components/overview/components/update_params';
 import ParamsChange from '@/screens/proposal_details/components/overview/components/params_change';
 import SoftwareUpgrade from '@/screens/proposal_details/components/overview/components/software_upgrade';
-import useStyles from '@/screens/proposal_details/components/overview/styles';
 import type { OverviewType } from '@/screens/proposal_details/types';
 import { getProposalType } from '@/screens/proposal_details/utils';
 import dayjs, { formatDayJs } from '@/utils/dayjs';
 import { formatNumber, formatToken } from '@/utils/format_token';
+import useStyles from './styles';
 
 const Overview: FC<{ className?: string; overview: OverviewType }> = ({ className, overview }) => {
   const dateFormat = useRecoilValue(readDate);
   const timeFormat = useRecoilValue(readTimeFormat);
   const { classes, cx } = useStyles();
   const { t } = useAppTranslation('proposals');
 
-  const types: string[] = [];
-  if (Array.isArray(overview.content)) {
-    overview.content.forEach((type: string) => {
-      types.push(getProposalType(R.pathOr('', ['@type'], type)));
-    });
-  } else {
-    types.push(getProposalType(R.pathOr('', ['@type'], overview.content)));
-  }
+  const types = useMemo(() => {
+    if (Array.isArray(overview.content)) {
+      const typeArray: string[] = [];
+      overview.content.forEach((type: { params: JSON; type: string }) =>
+        typeArray.push(getProposalType(R.pathOr('', ['@type'], type)))
+      );
+      return typeArray;
+    }
+    const typeArray: string[] = [];
+    typeArray.push(getProposalType(R.pathOr('', ['@type'], overview.content)));
+    return typeArray;
+  }, [overview.content]);
+
+  const changes = useMemo(() => {
+    const changeList: any[] = [];
+    if (Array.isArray(overview.content)) {
+      overview.content.forEach((type: { params: JSON; type: string }) => {
+        changeList.push({ params: type.params, type: R.pathOr('', ['@type'], type) });
+      });
+
+      return changeList;
+    }
+    return changeList;
+  }, [overview.content]);
 
   const { address: proposerAddress, name: proposerName } = useProfileRecoil(overview.proposer);
   const { name: recipientName } = useProfileRecoil(overview?.content?.recipient);
@@ -90,10 +107,19 @@ const Overview: FC<{ className?: string; overview: OverviewType }> = ({ classNam
           </>
         );
       }
-    });
 
+      if (type.includes('MsgUpdateParams')) {
+        extraDetails = (
+          <>
+            {changes.map((change) => (
+              <UpdateParams changes={change} className="accordion" key={change.type} />
+            ))}
+          </>
+        );
+      }
+    });
     return extraDetails;
-  }, [overview.content, parsedAmountRequested, recipientMoniker, t, types]);
+  }, [changes, overview.content, parsedAmountRequested, recipientMoniker, t, types]);
 
   const extra = getExtraDetails();
 
@@ -110,8 +136,8 @@ const Overview: FC<{ className?: string; overview: OverviewType }> = ({ classNam
           {t('type')}
         </Typography>
         <Typography variant="body1">
-          {types.map((type) => (
-            <Typography variant="body1" className="value">
+          {types.map((type: string) => (
+            <Typography variant="body1" className="value" key={type}>
               {t(type)}
             </Typography>
           ))}

apps/web-desmos/src/screens/proposal_details/components/overview/styles.ts

@@ -0,0 +1,77 @@
+import { makeStyles } from 'tss-react/mui';
+
+const useStyles = makeStyles()((theme) => ({
+  root: {
+    '& .label': {
+      color: theme.palette.custom.fonts.fontThree,
+    },
+    '& .content': {
+      marginBottom: theme.spacing(2),
+      display: 'block',
+      [theme.breakpoints.up('lg')]: {
+        display: 'flex',
+      },
+    },
+    '& .recipient': {
+      marginBottom: theme.spacing(2),
+      [theme.breakpoints.up('lg')]: {
+        display: 'block',
+      },
+    },
+    '& .amountRequested': {
+      marginBottom: theme.spacing(2),
+      display: 'block',
+      padding: '0',
+      [theme.breakpoints.up('lg')]: {
+        display: 'block',
+        paddingLeft: '30px',
+      },
+    },
+    '& .accordion': {
+      background: '#151519',
+    },
+  },
+  content: {
+    marginTop: theme.spacing(2),
+    display: 'grid',
+    p: {
+      lineHeight: 1.8,
+    },
+    '& ul': {
+      padding: '0.25rem 0.5rem',
+      [theme.breakpoints.up('lg')]: {
+        padding: '0.5rem 1rem',
+      },
+    },
+    '& li': {
+      padding: '0.25rem 0.5rem',
+      [theme.breakpoints.up('lg')]: {
+        padding: '0.5rem 1rem',
+      },
+    },
+    '& > *': {
+      marginBottom: theme.spacing(1),
+      [theme.breakpoints.up('lg')]: {
+        marginBottom: theme.spacing(2),
+      },
+    },
+    [theme.breakpoints.up('lg')]: {
+      gridTemplateColumns: '200px auto',
+    },
+  },
+  time: {
+    marginTop: theme.spacing(2),
+    display: 'grid',
+    '& > *': {
+      marginBottom: theme.spacing(1),
+      [theme.breakpoints.up('md')]: {
+        marginBottom: theme.spacing(2),
+      },
+    },
+    [theme.breakpoints.up('md')]: {
+      gridTemplateColumns: 'repeat(2, 1fr)',
+    },
+  },
+}));
+
+export default useStyles;

packages/ui/src/screens/proposal_details/components/overview/components/update_params/index.tsx

@@ -0,0 +1,42 @@
+import useAppTranslation from '@/hooks/useAppTranslation';
+import { FC } from 'react';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Typography from '@mui/material/Typography';
+
+type UpdateParamsProps = {
+  changes: { params: JSON; type: string };
+  className?: string;
+};
+
+const UpdateParams: FC<UpdateParamsProps> = ({ changes, className }) => {
+  const { t } = useAppTranslation('proposals');
+
+  return (
+    <>
+      <Typography variant="body1" className="label">
+        {t('changes')}
+      </Typography>
+      <Accordion className={className}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon />}
+          aria-controls="panel1a-content"
+          id="panel1a-header"
+        >
+          <Typography variant="body1" className="value">
+            {JSON.stringify(changes.type, null, 2).replace(/['"]+/g, '')}
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography variant="body1" className="value">
+            {JSON.stringify(changes.params, null, 2)}
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </>
+  );
+};
+
+export default UpdateParams;