diff --git a/apps/governance/src/components/heading/heading.tsx b/apps/governance/src/components/heading/heading.tsx index fec75b507..132d2c2a9 100644 --- a/apps/governance/src/components/heading/heading.tsx +++ b/apps/governance/src/components/heading/heading.tsx @@ -1,7 +1,8 @@ import classNames from 'classnames'; +import { type ReactNode } from 'react'; interface HeadingProps { - title?: string; + title?: ReactNode; centerContent?: boolean; marginTop?: boolean; marginBottom?: boolean; diff --git a/apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx b/apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx index dc0f676e4..3675d1615 100644 --- a/apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx +++ b/apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx @@ -54,11 +54,8 @@ const ProposalTypeTags = ({ if (proposal.__typename === 'BatchProposal') { return ( -
- {proposal.subProposals?.map((subProposal, i) => { - if (!subProposal?.terms) return null; - return ; - })} +
+ BatchProposal
); } diff --git a/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.spec.tsx b/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.spec.tsx index 10ac38937..4dddbed33 100644 --- a/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.spec.tsx +++ b/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.spec.tsx @@ -5,6 +5,11 @@ import { } from './proposal-market-changes'; import type { JsonValue } from '../../../../components/json-diff'; +jest.mock('../proposal/market-name.tsx', () => ({ + ...jest.requireActual('../proposal/market-name.tsx'), + MarketName: jest.fn(), +})); + describe('applyImmutableKeysFromEarlierVersion', () => { it('returns an empty object if any argument is not an object or null', () => { const earlierVersion: JsonValue = null; diff --git a/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.tsx b/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.tsx index 1b0df685d..f72ac5f1a 100644 --- a/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.tsx +++ b/apps/governance/src/routes/proposals/components/proposal-market-changes/proposal-market-changes.tsx @@ -18,6 +18,7 @@ import { type SingleProposalData, type SubProposalData, } from '../proposal/proposal-utils'; +import { MarketName } from '../proposal/market-name'; const immutableKeys = [ 'decimalPlaces', @@ -139,7 +140,13 @@ export const ProposalMarketChanges = ({ setToggleState={setShowChanges} dataTestId={'proposal-market-changes-toggle'} > - + + {t('UpdateToMarket')}: + + } + /> {showChanges && ( diff --git a/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.spec.tsx b/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.spec.tsx index 0e63817a7..263d89303 100644 --- a/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.spec.tsx +++ b/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.spec.tsx @@ -2,6 +2,11 @@ import { fireEvent, render, screen } from '@testing-library/react'; import { ProposalUpdateMarketState } from './proposal-update-market-state'; import { MarketUpdateType } from '@vegaprotocol/types'; +jest.mock('../proposal/market-name.tsx', () => ({ + ...jest.requireActual('../proposal/market-name.tsx'), + MarketName: jest.fn(), +})); + describe('', () => { const suspendProposal = { __typename: 'UpdateMarketState' as const, diff --git a/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.tsx b/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.tsx index 3351e5bbc..a666be169 100644 --- a/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.tsx +++ b/apps/governance/src/routes/proposals/components/proposal-update-market-state/proposal-update-market-state.tsx @@ -10,6 +10,7 @@ import { CollapsibleToggle } from '../../../../components/collapsible-toggle'; import { SubHeading } from '../../../../components/heading'; import { type UpdateMarketStatesFragment } from '../../__generated__/Proposals'; import { MarketUpdateTypeMapping } from '@vegaprotocol/types'; +import { MarketName } from '../proposal/market-name'; interface ProposalUpdateMarketStateProps { change: UpdateMarketStatesFragment | null; @@ -20,16 +21,18 @@ export const ProposalUpdateMarketState = ({ }: ProposalUpdateMarketStateProps) => { const { t } = useTranslation(); const [showDetails, setShowDetails] = useState(false); - let market; - let isTerminate = false; - if (!change) { + if (!change || change.__typename !== 'UpdateMarketState') { return null; } - if (change.__typename === 'UpdateMarketState') { - market = change?.market; - isTerminate = change?.updateType === 'MARKET_STATE_UPDATE_TYPE_TERMINATE'; + const market = change?.market; + const isTerminate = + change?.updateType === 'MARKET_STATE_UPDATE_TYPE_TERMINATE'; + + let toggleTitle = t(change.updateType); + if (toggleTitle.length === 0) { + toggleTitle = t('MarketDetails'); } return ( @@ -39,7 +42,13 @@ export const ProposalUpdateMarketState = ({ setToggleState={setShowDetails} dataTestId="proposal-market-data-toggle" > - + + {toggleTitle}: + + } + /> {showDetails && ( diff --git a/apps/governance/src/routes/proposals/components/proposal/colours.ts b/apps/governance/src/routes/proposals/components/proposal/colours.ts index 4a42d0008..f88ad5713 100644 --- a/apps/governance/src/routes/proposals/components/proposal/colours.ts +++ b/apps/governance/src/routes/proposals/components/proposal/colours.ts @@ -16,18 +16,31 @@ const getColour = (indicator: number, max = COLOURS.length) => { export const getStyle = (indicator: number, max = COLOURS.length) => classNames({ - 'bg-vega-yellow-400': 'yellow' === getColour(indicator, max), - 'bg-vega-green-400': 'green' === getColour(indicator, max), - 'bg-vega-blue-400': 'blue' === getColour(indicator, max), - 'bg-vega-purple-400': 'purple' === getColour(indicator, max), - 'bg-vega-pink-400': 'pink' === getColour(indicator, max), - 'bg-vega-orange-400': 'orange' === getColour(indicator, max), - 'bg-vega-red-400': 'red' === getColour(indicator, max), - 'bg-vega-clight-600': 'none' === getColour(indicator, max), + 'bg-vega-yellow-400 after:bg-vega-yellow-400': + 'yellow' === getColour(indicator, max), + 'bg-vega-green-400 after:bg-vega-green-400': + 'green' === getColour(indicator, max), + 'bg-vega-blue-400 after:bg-vega-blue-400': + 'blue' === getColour(indicator, max), + 'bg-vega-purple-400 after:bg-vega-purple-400': + 'purple' === getColour(indicator, max), + 'bg-vega-pink-400 after:bg-vega-pink-400': + 'pink' === getColour(indicator, max), + 'bg-vega-orange-400 after:bg-vega-orange-400': + 'orange' === getColour(indicator, max), + 'bg-vega-red-400 after:bg-vega-red-400': + 'red' === getColour(indicator, max), + 'bg-vega-clight-600 after:bg-vega-clight-600': + 'none' === getColour(indicator, max), }); export const getIndicatorStyle = (indicator: number) => classNames( - 'rounded-sm text-black inline-block px-1 py-1 font-alpha calt h-8', - getStyle(indicator) + 'rounded-sm text-black inline-block px-1 py-1 font-alpha calt h-8 w-7 text-center', + 'text-border-1', + getStyle(indicator), + // Comment below if you want to remove the "chevron" + 'relative mr-[11px]', + 'after:absolute after:z-[-1] after:top-1 after:right-[-11px] after:rounded-sm', + "after:w-[22.62px] after:h-[22.62px] after:rotate-45 after:content-['']" ); diff --git a/apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx b/apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx index 30a965bf1..2564180b9 100644 --- a/apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx +++ b/apps/governance/src/routes/proposals/components/vote-breakdown/vote-breakdown.tsx @@ -16,6 +16,7 @@ import { } from '../../__generated__/Proposals'; import { useBatchVoteInformation } from '../../hooks/use-vote-information'; import { getIndicatorStyle } from '../proposal/colours'; +import { MarketName } from '../proposal/market-name'; export const CompactVotes = ({ number }: { number: BigNumber }) => ( { const containerClasses = classNames( - 'relative h-10 rounded-md border border-vega-dark-300 overflow-hidden', - colourfulBg ? 'bg-vega-pink' : 'bg-vega-dark-400' + 'relative h-2 rounded-md overflow-hidden', + // 'border border-vega-dark-300', + colourfulBg ? 'bg-vega-red' : 'bg-vega-dark-200' ); const progressClasses = classNames( @@ -50,17 +52,19 @@ const VoteProgress = ({ ); const textClasses = classNames( - 'absolute top-0 left-0 w-full h-full flex items-center justify-start px-3 text-black' + 'w-full flex items-center justify-start text-white text-sm pb-1' ); return ( -
-
+
{children}
+
+
+
); }; @@ -79,14 +83,22 @@ const Status = ({ reached, threshold, text, testId }: StatusProps) => {
{reached ? (
- + {threshold.toString()}% {text} {t('met')}
) : (
- + {threshold.toString()}% {text} {t('not met')} @@ -152,7 +164,7 @@ const VoteBreakdownBatch = ({ proposal }: { proposal: BatchProposal }) => {

{t( @@ -215,7 +227,7 @@ const VoteBreakdownBatch = ({ proposal }: { proposal: BatchProposal }) => {

{t('Proposal failed: {{count}} of {{total}} proposals passed', { @@ -237,6 +249,7 @@ const VoteBreakdownBatch = ({ proposal }: { proposal: BatchProposal }) => { if (!p?.terms) return null; return ( + : + + ) : null; + const indicatorElement = indicator && ( {indicator} ); return ( -

-
+
+
{indicatorElement} -

{t(terms.change.__typename)}

+

+ {t(terms.change.__typename)} {marketName} +

+
+
+
-
); }; @@ -302,11 +333,13 @@ const VoteBreakdownNormal = ({ proposal }: { proposal: Proposal }) => { const isUpdateMarket = proposal?.terms?.change?.__typename === 'UpdateMarket'; return ( - +
+ +
); }; @@ -370,13 +403,13 @@ const VoteBreakDownUI = ({ 'flex justify-between flex-wrap gap-6' ); const sectionClasses = classNames('min-w-[300px] flex-1 flex-grow'); - const headingClasses = classNames('mb-2 text-vega-dark-400'); + const headingClasses = classNames('mb-2 text-sm text-white font-bold'); const progressDetailsClasses = classNames( 'flex justify-between flex-wrap mt-2 text-sm' ); return ( -
+
{isProposalOpen && (
)} @@ -409,103 +442,13 @@ const VoteBreakDownUI = ({

fail'} - components={[]} + components={[]} />

)}
)} - {isUpdateMarket && ( -
-

{t('liquidityProviderVote')}

-
-
- - - - -
-
- {t('liquidityProviderVotesFor')}: - {lpVoteWeight.toFixed(defaultDP)}% - } - > - - -
- -
- {t('liquidityProviderVotesAgainst')}: - - {noLPPercentage.toFixed(defaultDP)}% - } - > - - - -
-
-
- -
- - - - -
-
- {t('totalLiquidityProviderTokensVoted')}: - - {totalEquityLikeShareWeight.toFixed(1)}% - -
-
-
-
-
- )} - {isUpdateMarket &&

{t('tokenVote')}

}
+ + {/** Liquidity provider vote */} + {isUpdateMarket && ( +
+

{t('liquidityProviderVote')}

+
+
+ + + + +
+
+ {t('liquidityProviderVotesFor')}: + {lpVoteWeight.toFixed(defaultDP)}% + } + > + + +
+ +
+ {t('liquidityProviderVotesAgainst')}: + + {noLPPercentage.toFixed(defaultDP)}% + } + > + + + +
+
+
+ +
+ + + + +
+
+ {t('totalLiquidityProviderTokensVoted')}: + + {totalEquityLikeShareWeight.toFixed(1)}% + +
+
+
+
+
+ )}
); };