diff --git a/.changeset/spotty-coats-reflect.md b/.changeset/spotty-coats-reflect.md new file mode 100644 index 0000000000..53e36728d0 --- /dev/null +++ b/.changeset/spotty-coats-reflect.md @@ -0,0 +1,6 @@ +--- +'web-desmos': major +'ui': major +--- + +display suggested proposal params changes on proposal page diff --git a/apps/web-desmos/src/screens/proposal_details/components/overview/index.tsx b/apps/web-desmos/src/screens/proposal_details/components/overview/index.tsx index 358a560745..5aa355329b 100644 --- a/apps/web-desmos/src/screens/proposal_details/components/overview/index.tsx +++ b/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,13 +12,14 @@ 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); @@ -26,14 +27,30 @@ const Overview: FC<{ className?: string; overview: OverviewType }> = ({ classNam 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) => ( + + ))} + + ); + } + }); 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')} - {types.map((type) => ( - + {types.map((type: string) => ( + {t(type)} ))} diff --git a/apps/web-desmos/src/screens/proposal_details/components/overview/styles.ts b/apps/web-desmos/src/screens/proposal_details/components/overview/styles.ts new file mode 100644 index 0000000000..55ec30709d --- /dev/null +++ b/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; diff --git a/packages/ui/src/screens/proposal_details/components/overview/components/update_params/index.tsx b/packages/ui/src/screens/proposal_details/components/overview/components/update_params/index.tsx new file mode 100644 index 0000000000..2bc3136f9b --- /dev/null +++ b/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 = ({ changes, className }) => { + const { t } = useAppTranslation('proposals'); + + return ( + <> + + {t('changes')} + + + } + aria-controls="panel1a-content" + id="panel1a-header" + > + + {JSON.stringify(changes.type, null, 2).replace(/['"]+/g, '')} + + + + + {JSON.stringify(changes.params, null, 2)} + + + + + ); +}; + +export default UpdateParams;