feat(governance): batch proposal indicators, vote breakdown ui changes

2024-02-23 17:37:46 +01:00 · 2024-02-23 17:37:46 +01:00 · 4d64bded3f
commit 4d64bded3f
parent 55d692ea6f
8 changed files with 215 additions and 144 deletions
--- 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;
--- 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 (
-      <div data-testid="proposal-type" className="flex gap-1">
-        {proposal.subProposals?.map((subProposal, i) => {
-          if (!subProposal?.terms) return null;
-          return <ProposalTypeTag key={i} terms={subProposal.terms} />;
-        })}
+      <div data-testid="proposal-type">
+        <ProposalInfoLabel variant="secondary">BatchProposal</ProposalInfoLabel>
      </div>
    );
  }
--- 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;
--- 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'}
      >
-        <SubHeading title={t('updatesToMarket')} />
+        <SubHeading
+          title={
+            <>
+              {t('UpdateToMarket')}: <MarketName marketId={marketId} />
+            </>
+          }
+        />
      </CollapsibleToggle>

      {showChanges && (
--- 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('<ProposalUpdateMarketState />', () => {
  const suspendProposal = {
    __typename: 'UpdateMarketState' as const,
--- 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"
      >
-        <SubHeading title={t('MarketDetails')} />
+        <SubHeading
+          title={
+            <>
+              {toggleTitle}: <MarketName marketId={market?.id} />
+            </>
+          }
+        />
      </CollapsibleToggle>

      {showDetails && (
--- 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-['']"
  );
--- 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 }) => (
  <CompactNumber
@ -40,8 +41,9 @@ const VoteProgress = ({
  children,
 }: VoteProgressProps) => {
  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 (
-    <div className={containerClasses}>
-      <div
-        className={progressClasses}
-        style={{ width: `${percentageFor}%` }}
-        data-testid={testId}
-      />
+    <div>
      <div className={textClasses}>{children}</div>
+      <div className={containerClasses}>
+        <div
+          className={progressClasses}
+          style={{ width: `${percentageFor}%` }}
+          data-testid={testId}
+        />
+      </div>
    </div>
  );
 };
@ -79,14 +83,22 @@ const Status = ({ reached, threshold, text, testId }: StatusProps) => {
    <div data-testid={testId}>
      {reached ? (
        <div className="flex items-center gap-2">
-          <VegaIcon name={VegaIconNames.TICK} size={20} />
+          <VegaIcon
+            name={VegaIconNames.TICK}
+            className="text-vega-green"
+            size={20}
+          />
          <span>
            {threshold.toString()}% {text} {t('met')}
          </span>
        </div>
      ) : (
        <div className="flex items-center gap-2">
-          <VegaIcon name={VegaIconNames.CROSS} size={20} />
+          <VegaIcon
+            name={VegaIconNames.CROSS}
+            className="text-vega-red"
+            size={20}
+          />
          <span>
            {threshold.toString()}% {text} {t('not met')}
          </span>
@ -152,7 +164,7 @@ const VoteBreakdownBatch = ({ proposal }: { proposal: BatchProposal }) => {
            <p className="flex gap-2 m-0 items-center">
              <VegaIcon
                name={VegaIconNames.CROSS}
-                className="text-vega-pink"
+                className="text-vega-red"
                size={20}
              />
              {t(
@ -215,7 +227,7 @@ const VoteBreakdownBatch = ({ proposal }: { proposal: BatchProposal }) => {
            <p className="flex gap-2 m-0 items-center">
              <VegaIcon
                name={VegaIconNames.CROSS}
-                className="text-vega-pink"
+                className="text-vega-red"
                size={20}
              />
              {t('Proposal failed: {{count}} of {{total}} proposals passed', {
@ -237,6 +249,7 @@ const VoteBreakdownBatch = ({ proposal }: { proposal: BatchProposal }) => {
              if (!p?.terms) return null;
              return (
                <VoteBreakdownBatchSubProposal
+                  indicator={i + 1}
                  key={i}
                  proposal={proposal}
                  votes={proposal.votes}
@ -273,21 +286,39 @@ const VoteBreakdownBatchSubProposal = ({
  const isProposalOpen = proposal?.state === ProposalState.STATE_OPEN;
  const isUpdateMarket = terms?.change?.__typename === 'UpdateMarket';

+  let marketId = undefined;
+  if (terms?.change?.__typename === 'UpdateMarket') {
+    marketId = terms.change.marketId;
+  }
+  if (terms?.change?.__typename === 'UpdateMarketState') {
+    marketId = terms.change.market.id;
+  }
+
+  const marketName = marketId ? (
+    <>
+      : <MarketName marketId={marketId} />
+    </>
+  ) : null;
+
  const indicatorElement = indicator && (
    <span className={getIndicatorStyle(indicator)}>{indicator}</span>
  );

  return (
-    <div>
-      <div className="flex items-baseline gap-3">
+    <div className="mb-6">
+      <div className="flex items-baseline gap-3 mb-3">
        {indicatorElement}
-        <h4>{t(terms.change.__typename)}</h4>
+        <h4>
+          {t(terms.change.__typename)} {marketName}
+        </h4>
+      </div>
+      <div className="rounded-sm bg-vega-dark-100 p-3">
+        <VoteBreakDownUI
+          voteInfo={voteInfo}
+          isProposalOpen={isProposalOpen}
+          isUpdateMarket={isUpdateMarket}
+        />
      </div>
-      <VoteBreakDownUI
-        voteInfo={voteInfo}
-        isProposalOpen={isProposalOpen}
-        isUpdateMarket={isUpdateMarket}
-      />
    </div>
  );
 };
@ -302,11 +333,13 @@ const VoteBreakdownNormal = ({ proposal }: { proposal: Proposal }) => {
  const isUpdateMarket = proposal?.terms?.change?.__typename === 'UpdateMarket';

  return (
-    <VoteBreakDownUI
-      voteInfo={voteInfo}
-      isProposalOpen={isProposalOpen}
-      isUpdateMarket={isUpdateMarket}
-    />
+    <div className="mb-6">
+      <VoteBreakDownUI
+        voteInfo={voteInfo}
+        isProposalOpen={isProposalOpen}
+        isUpdateMarket={isUpdateMarket}
+      />
+    </div>
  );
 };

@ -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 (
-    <div className="mb-6">
+    <div>
      {isProposalOpen && (
        <div
          data-testid="vote-status"
@ -393,7 +426,7 @@ const VoteBreakDownUI = ({
              <VegaIcon
                name={VegaIconNames.CROSS}
                size={20}
-                className="text-vega-pink"
+                className="text-vega-red"
              />
            )}
          </span>
@ -409,103 +442,13 @@ const VoteBreakDownUI = ({
            <p className="m-0">
              <Trans
                i18nKey={'Currently expected to <0>fail</0>'}
-                components={[<span className="text-vega-pink" />]}
+                components={[<span className="text-vega-red" />]}
              />
            </p>
          )}
        </div>
      )}

-      {isUpdateMarket && (
-        <div className="mb-4">
-          <h3 className={headingClasses}>{t('liquidityProviderVote')}</h3>
-          <div className={sectionWrapperClasses}>
-            <section
-              className={sectionClasses}
-              data-testid="lp-majority-breakdown"
-            >
-              <VoteProgress
-                percentageFor={lpVoteWeight}
-                colourfulBg={true}
-                testId="lp-majority-progress"
-              >
-                <Status
-                  reached={majorityLPMet}
-                  threshold={requiredMajorityLPPercentage}
-                  text={t('majorityThreshold')}
-                  testId={
-                    majorityLPMet ? 'lp-majority-met' : 'lp-majority-not-met'
-                  }
-                />
-              </VoteProgress>
-
-              <div className={progressDetailsClasses}>
-                <div className="flex items-center gap-1">
-                  <span>{t('liquidityProviderVotesFor')}:</span>
-                  <Tooltip
-                    description={
-                      <span>{lpVoteWeight.toFixed(defaultDP)}%</span>
-                    }
-                  >
-                    <button>{lpVoteWeight.toFixed(1)}%</button>
-                  </Tooltip>
-                </div>
-
-                <div className="flex items-center gap-1">
-                  <span>{t('liquidityProviderVotesAgainst')}:</span>
-                  <span>
-                    <Tooltip
-                      description={
-                        <span>{noLPPercentage.toFixed(defaultDP)}%</span>
-                      }
-                    >
-                      <button>{noLPPercentage.toFixed(1)}%</button>
-                    </Tooltip>
-                  </span>
-                </div>
-              </div>
-            </section>
-
-            <section
-              className={sectionClasses}
-              data-testid="lp-participation-breakdown"
-            >
-              <VoteProgress
-                percentageFor={
-                  lpParticipationThresholdProgress || new BigNumber(0)
-                }
-                testId="lp-participation-progress"
-              >
-                <Status
-                  reached={participationLPMet}
-                  threshold={requiredParticipationLP || new BigNumber(1)}
-                  text={t('participationThreshold')}
-                  testId={
-                    participationLPMet
-                      ? 'lp-participation-met'
-                      : 'lp-participation-not-met'
-                  }
-                />
-              </VoteProgress>
-
-              <div className="flex mt-2 text-sm">
-                <div className="flex items-center gap-1">
-                  <span>{t('totalLiquidityProviderTokensVoted')}:</span>
-                  <Tooltip
-                    description={formatNumber(
-                      totalEquityLikeShareWeight,
-                      defaultDP
-                    )}
-                  >
-                    <span>{totalEquityLikeShareWeight.toFixed(1)}%</span>
-                  </Tooltip>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      )}
-
      {isUpdateMarket && <h3 className={headingClasses}>{t('tokenVote')}</h3>}
      <div className={sectionWrapperClasses}>
        <section
@ -605,6 +548,97 @@ const VoteBreakDownUI = ({
          </div>
        </section>
      </div>
+
+      {/** Liquidity provider vote */}
+      {isUpdateMarket && (
+        <div className="mt-3">
+          <h3 className={headingClasses}>{t('liquidityProviderVote')}</h3>
+          <div className={sectionWrapperClasses}>
+            <section
+              className={sectionClasses}
+              data-testid="lp-majority-breakdown"
+            >
+              <VoteProgress
+                percentageFor={lpVoteWeight}
+                colourfulBg={true}
+                testId="lp-majority-progress"
+              >
+                <Status
+                  reached={majorityLPMet}
+                  threshold={requiredMajorityLPPercentage}
+                  text={t('majorityThreshold')}
+                  testId={
+                    majorityLPMet ? 'lp-majority-met' : 'lp-majority-not-met'
+                  }
+                />
+              </VoteProgress>
+
+              <div className={progressDetailsClasses}>
+                <div className="flex items-center gap-1">
+                  <span>{t('liquidityProviderVotesFor')}:</span>
+                  <Tooltip
+                    description={
+                      <span>{lpVoteWeight.toFixed(defaultDP)}%</span>
+                    }
+                  >
+                    <button>{lpVoteWeight.toFixed(1)}%</button>
+                  </Tooltip>
+                </div>
+
+                <div className="flex items-center gap-1">
+                  <span>{t('liquidityProviderVotesAgainst')}:</span>
+                  <span>
+                    <Tooltip
+                      description={
+                        <span>{noLPPercentage.toFixed(defaultDP)}%</span>
+                      }
+                    >
+                      <button>{noLPPercentage.toFixed(1)}%</button>
+                    </Tooltip>
+                  </span>
+                </div>
+              </div>
+            </section>
+
+            <section
+              className={sectionClasses}
+              data-testid="lp-participation-breakdown"
+            >
+              <VoteProgress
+                percentageFor={
+                  lpParticipationThresholdProgress || new BigNumber(0)
+                }
+                testId="lp-participation-progress"
+              >
+                <Status
+                  reached={participationLPMet}
+                  threshold={requiredParticipationLP || new BigNumber(1)}
+                  text={t('participationThreshold')}
+                  testId={
+                    participationLPMet
+                      ? 'lp-participation-met'
+                      : 'lp-participation-not-met'
+                  }
+                />
+              </VoteProgress>
+
+              <div className="flex mt-2 text-sm">
+                <div className="flex items-center gap-1">
+                  <span>{t('totalLiquidityProviderTokensVoted')}:</span>
+                  <Tooltip
+                    description={formatNumber(
+                      totalEquityLikeShareWeight,
+                      defaultDP
+                    )}
+                  >
+                    <span>{totalEquityLikeShareWeight.toFixed(1)}%</span>
+                  </Tooltip>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      )}
    </div>
  );
 };