feat(2432): minor proposal detail display improvements (#2616)

* feat(2432): minor proposal detail display improvements

* feat(2432): unit tests updated

apps/token/src/i18n/translations/dev.json

@@ -190,6 +190,19 @@
   "errorDetails": "Error details",
   "proposedNewValue": "Proposed new value:",
   "proposalChange": "Change <code>{{key}}</code> to <code>{{value}}</code>",
+  "STATE_DECLINED": "Declined",
+  "STATE_FAILED": "Failed",
+  "STATE_REJECTED": "Rejected",
+  "STATE_ENACTED": "Enacted",
+  "STATE_PASSED": "Passed",
+  "STATE_OPEN": "Open",
+  "STATE_WAITING_FOR_NODE_VOTE": "Waiting for node vote",
+  "NewMarket": "New market",
+  "UpdateMarket": "Update market",
+  "NewAsset": "New asset",
+  "UpdateAsset": "Update asset",
+  "UpdateNetworkParameter": "Network parameter",
+  "NewFreeform": "Freeform",
   "tokenVotes": "Token votes",
   "liquidityVotes": "Liquidity votes",
   "yourVote": "Your vote",

apps/token/src/routes/proposals/components/current-proposal-state/current-proposal-state.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import * as Schema from '@vegaprotocol/types';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
@@ -7,6 +8,7 @@ export const CurrentProposalState = ({
 }: {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
 }) => {
+  const { t } = useTranslation();
   let className = 'text-white';
 
   if (
@@ -21,5 +23,5 @@ export const CurrentProposalState = ({
   ) {
     className = 'text-white';
   }
-  return <span className={className}>{proposal?.state}</span>;
+  return <span className={className}>{t(`${proposal?.state}`)}</span>;
 };

apps/token/src/routes/proposals/components/proposal-change-table/proposal-change-table.spec.tsx

@@ -19,7 +19,7 @@ it('Renders all data for table', () => {
   expect(screen.getByText(proposal?.id as string)).toBeInTheDocument();
 
   expect(screen.getByText('State')).toBeInTheDocument();
-  expect(screen.getByText('STATE_OPEN')).toBeInTheDocument();
+  expect(screen.getByText('Open')).toBeInTheDocument();
 
   expect(screen.getByText('Closes on')).toBeInTheDocument();
   expect(
@@ -47,9 +47,7 @@ it('Renders all data for table', () => {
   ).toBeInTheDocument();
 
   expect(screen.getByText('Type')).toBeInTheDocument();
-  expect(
+  expect(screen.getByText('Network parameter')).toBeInTheDocument();
-    screen.getByText(proposal?.terms.change.__typename ?? '')
-  ).toBeInTheDocument();
 });
 
 it('Changes data based on if data is in future or past', () => {
@@ -59,7 +57,7 @@ it('Changes data based on if data is in future or past', () => {
   render(<ProposalChangeTable proposal={proposal} />);
 
   expect(screen.getByText('State')).toBeInTheDocument();
-  expect(screen.getByText('STATE_ENACTED')).toBeInTheDocument();
+  expect(screen.getByText('Enacted')).toBeInTheDocument();
 
   expect(screen.getByText('Closed on')).toBeInTheDocument();
   expect(

apps/token/src/routes/proposals/components/proposal-change-table/proposal-change-table.tsx

@@ -70,7 +70,7 @@ export const ProposalChangeTable = ({ proposal }: ProposalChangeTableProps) => {
         ) : null}
         <KeyValueTableRow>
           {t('type')}
-          {proposal?.terms.change.__typename}
+          {t(`${proposal?.terms.change.__typename}`)}
         </KeyValueTableRow>
       </KeyValueTable>
     </RoundedWrapper>