LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(governance): more mobile view improvements (#4751)

Browse Source 
Co-authored-by: Joe <joe@vega.xyz>
This commit is contained in:
Sam Keen 2023-09-13 19:01:33 +01:00 committed by GitHub
parent e3a00ada05
commit c433a4ee06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 169 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/governance-e2e/src/support/staking.functions.ts
View File

@ -195,8 +195,7 @@ export function validateValidatorListTotalStakeAndShare(
cy.contains('Loading...', epochTimeout).should('not.exist'); cy.contains('Loading...', epochTimeout).should('not.exist');
waitForBeginningOfEpoch(); waitForBeginningOfEpoch();
cy.get(`[row-id="${positionOnList}"]`) cy.get(`[row-id="${positionOnList}"]`)
.should('have.length', 2) .first()
.eq(1)
.within(() => { .within(() => {
cy.getByTestId(stakeValidatorListTotalStake, epochTimeout).should( cy.getByTestId(stakeValidatorListTotalStake, epochTimeout).should(
'have.text', 'have.text',

2
apps/governance/src/routes/home/index.tsx
View File

@ -45,7 +45,7 @@ const HomeProposals = ({
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
<section className="mb-16" data-testid="home-proposals"> <section className="mb-16 break-all" data-testid="home-proposals">
<Heading title={t('vegaGovernance')} /> <Heading title={t('vegaGovernance')} />
<h3 className="mb-6">{t('homeProposalsIntro')}</h3> <h3 className="mb-6">{t('homeProposalsIntro')}</h3>
<div className="mb-8"> <div className="mb-8">

2
apps/governance/src/routes/proposals/components/proposal/proposal.tsx
View File

@ -127,7 +127,7 @@ export const Proposal = ({
voteState={voteState} voteState={voteState}
/> />
<div className="my-10"> <div className="my-10 break-all">
<ProposalChangeTable proposal={proposal} /> <ProposalChangeTable proposal={proposal} />
</div> </div>

2
apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx
View File

@ -352,7 +352,6 @@ export const ConsensusValidatorsTable = ({
field: ValidatorFields.RANKING_INDEX, field: ValidatorFields.RANKING_INDEX,
headerName: '#', headerName: '#',
width: 60, width: 60,
pinned: 'left',
}, },
{ {
field: ValidatorFields.VALIDATOR, field: ValidatorFields.VALIDATOR,
@ -362,7 +361,6 @@ export const ConsensusValidatorsTable = ({
if (a === b) return 0; if (a === b) return 0;
return a > b ? 1 : -1; return a > b ? 1 : -1;
}, },
pinned: 'left',
width: 260, width: 260,
}, },
{ {

2
apps/governance/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx
View File

@ -195,14 +195,12 @@ export const StandbyPendingValidatorsTable = ({
field: ValidatorFields.RANKING_INDEX, field: ValidatorFields.RANKING_INDEX,
headerName: '#', headerName: '#',
width: 60, width: 60,
pinned: 'left',
}, },
{ {
field: ValidatorFields.VALIDATOR, field: ValidatorFields.VALIDATOR,
headerName: t(ValidatorFields.VALIDATOR).toString(), headerName: t(ValidatorFields.VALIDATOR).toString(),
cellRenderer: ValidatorRenderer, cellRenderer: ValidatorRenderer,
comparator: ({ name: a }, { name: b }) => Math.sign(a - b), comparator: ({ name: a }, { name: b }) => Math.sign(a - b),
pinned: 'left',
width: 260, width: 260,
}, },
{ {

315
apps/governance/src/routes/staking/node/validator-table.tsx
View File

@ -122,38 +122,43 @@ export const ValidatorTable = ({
<div className="my-12" data-testid="validator-table"> <div className="my-12" data-testid="validator-table">
<SubHeading title={t('profile')} /> <SubHeading title={t('profile')} />
<RoundedWrapper paddingBottom={true}> <div className="break-all">
<KeyValueTable data-testid="validator-table-profile"> <RoundedWrapper paddingBottom={true}>
<KeyValueTableRow> <KeyValueTable data-testid="validator-table-profile">
<span>{t('id')}</span> <KeyValueTableRow>
<ValidatorTableCell dataTestId="validator-id"> <span>{t('id')}</span>
{node.id} <ValidatorTableCell dataTestId="validator-id">
</ValidatorTableCell> {node.id}
</KeyValueTableRow> </ValidatorTableCell>
<KeyValueTableRow> </KeyValueTableRow>
<span>{t('ABOUT THIS VALIDATOR')}</span> <KeyValueTableRow>
<span>{t('ABOUT THIS VALIDATOR')}</span>
<Tooltip description={t('AboutThisValidatorDescription')}> <Tooltip description={t('AboutThisValidatorDescription')}>
<a data-testid="validator-description-url" href={node.infoUrl}> <a
{node.infoUrl} data-testid="validator-description-url"
</a> href={node.infoUrl}
</Tooltip> >
</KeyValueTableRow> {node.infoUrl}
<KeyValueTableRow noBorder={true}> </a>
<span> </Tooltip>
<strong>{t('STATUS')}</strong> </KeyValueTableRow>
</span> <KeyValueTableRow noBorder={true}>
<span>
<Tooltip description={t('ValidatorStatusDescription')}> <strong>{t('STATUS')}</strong>
<span data-testid="validator-status">
<strong>
{t(statusTranslationKey(node.rankingScore.status))}
</strong>
</span> </span>
</Tooltip>
</KeyValueTableRow> <Tooltip description={t('ValidatorStatusDescription')}>
</KeyValueTable> <span data-testid="validator-status">
</RoundedWrapper> <strong>
{t(statusTranslationKey(node.rankingScore.status))}
</strong>
</span>
</Tooltip>
</KeyValueTableRow>
</KeyValueTable>
</RoundedWrapper>
</div>
<div className="mb-10"> <div className="mb-10">
{t('validatorTableIntro')}{' '} {t('validatorTableIntro')}{' '}
@ -167,144 +172,154 @@ export const ValidatorTable = ({
</div> </div>
<SubHeading title={t('ADDRESS')} /> <SubHeading title={t('ADDRESS')} />
<RoundedWrapper marginBottomLarge={true} paddingBottom={true}> <div className="break-all">
<KeyValueTable data-testid="validator-table-address"> <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
<KeyValueTableRow> <KeyValueTable data-testid="validator-table-address">
<span>{t('VEGA ADDRESS / PUBLIC KEY')}</span> <KeyValueTableRow>
<ValidatorTableCell dataTestId="validator-public-key"> <span>{t('VEGA ADDRESS / PUBLIC KEY')}</span>
{node.pubkey} <ValidatorTableCell dataTestId="validator-public-key">
</ValidatorTableCell> {node.pubkey}
</KeyValueTableRow> </ValidatorTableCell>
<KeyValueTableRow> </KeyValueTableRow>
<span>{t('SERVER LOCATION')}</span> <KeyValueTableRow>
<ValidatorTableCell dataTestId="validator-server-location"> <span>{t('SERVER LOCATION')}</span>
{countryData.find((c) => c.code === node.location)?.name || <ValidatorTableCell dataTestId="validator-server-location">
t('not available')} {countryData.find((c) => c.code === node.location)?.name ||
</ValidatorTableCell> t('not available')}
</KeyValueTableRow> </ValidatorTableCell>
<KeyValueTableRow noBorder={true}> </KeyValueTableRow>
<span>{t('ETHEREUM ADDRESS')}</span> <KeyValueTableRow noBorder={true}>
<span data-testid="validator-eth-address"> <span>{t('ETHEREUM ADDRESS')}</span>
<Link <span data-testid="validator-eth-address">
title={t('View on Etherscan (opens in a new tab)')} <Link
href={`${ETHERSCAN_URL}/address/${node.ethereumAddress}`} title={t('View on Etherscan (opens in a new tab)')}
target="_blank" href={`${ETHERSCAN_URL}/address/${node.ethereumAddress}`}
> target="_blank"
{node.ethereumAddress} >
</Link> {node.ethereumAddress}
</span> </Link>
</KeyValueTableRow> </span>
</KeyValueTable> </KeyValueTableRow>
</RoundedWrapper> </KeyValueTable>
</RoundedWrapper>
</div>
<SubHeading title={t('STAKE')} /> <SubHeading title={t('STAKE')} />
<RoundedWrapper marginBottomLarge={true} paddingBottom={true}> <div className="break-all">
<KeyValueTable data-testid="validator-table-stake"> <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
<KeyValueTableRow> <KeyValueTable data-testid="validator-table-stake">
<span>{t('STAKED BY OPERATOR')}</span> <KeyValueTableRow>
<span>{t('STAKED BY OPERATOR')}</span>
<Tooltip description={t('StakedByOperatorDescription')}> <Tooltip description={t('StakedByOperatorDescription')}>
<span data-testid="staked-by-operator"> <span data-testid="staked-by-operator">
{formatNumber(toBigNum(node.stakedByOperator, decimals))} {formatNumber(toBigNum(node.stakedByOperator, decimals))}
</span>
</Tooltip>
</KeyValueTableRow>
<KeyValueTableRow>
<span>{t('STAKED BY DELEGATES')}</span>
<Tooltip description={t('StakedByDelegatesDescription')}>
<span data-testid="staked-by-delegates">
{formatNumber(toBigNum(node.stakedByDelegates, decimals))}
</span>
</Tooltip>
</KeyValueTableRow>
<KeyValueTableRow>
<span>
<strong>{t('TOTAL STAKE')}</strong>
</span> </span>
</Tooltip>
</KeyValueTableRow>
<KeyValueTableRow>
<span>{t('STAKED BY DELEGATES')}</span>
<Tooltip description={t('StakedByDelegatesDescription')}> <span data-testid="total-stake">
<span data-testid="staked-by-delegates"> <strong>
{formatNumber(toBigNum(node.stakedByDelegates, decimals))} {formatNumber(toBigNum(node.stakedTotal, decimals))}
</strong>
</span> </span>
</Tooltip> </KeyValueTableRow>
</KeyValueTableRow> <KeyValueTableRow>
<KeyValueTableRow> <span>{t('PENDING STAKE')}</span>
<span>
<strong>{t('TOTAL STAKE')}</strong>
</span>
<span data-testid="total-stake"> <Tooltip description={t('PendingStakeDescription')}>
<strong> <span data-testid="pending-stake">
{formatNumber(toBigNum(node.stakedTotal, decimals))} {formatNumber(toBigNum(node.pendingStake, decimals))}
</strong> </span>
</span> </Tooltip>
</KeyValueTableRow> </KeyValueTableRow>
<KeyValueTableRow> <KeyValueTableRow noBorder={true}>
<span>{t('PENDING STAKE')}</span> <span>{t('STAKE SHARE')}</span>
<Tooltip description={t('PendingStakeDescription')}> <Tooltip description={t('StakeShareDescription')}>
<span data-testid="pending-stake"> <span data-testid="stake-percentage">{stakePercentage}</span>
{formatNumber(toBigNum(node.pendingStake, decimals))} </Tooltip>
</span> </KeyValueTableRow>
</Tooltip> </KeyValueTable>
</KeyValueTableRow> </RoundedWrapper>
<KeyValueTableRow noBorder={true}> </div>
<span>{t('STAKE SHARE')}</span>
<Tooltip description={t('StakeShareDescription')}>
<span data-testid="stake-percentage">{stakePercentage}</span>
</Tooltip>
</KeyValueTableRow>
</KeyValueTable>
</RoundedWrapper>
<SubHeading title={t('PENALTIES')} /> <SubHeading title={t('PENALTIES')} />
<RoundedWrapper marginBottomLarge={true} paddingBottom={true}> <div className="break-all">
<KeyValueTable data-testid="validator-table-penalties"> <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
<KeyValueTableRow> <KeyValueTable data-testid="validator-table-penalties">
<span>{t('OVERSTAKED PENALTY')}</span> <KeyValueTableRow>
<span>{t('OVERSTAKED PENALTY')}</span>
<Tooltip description={t('OverstakedPenaltyDescription')}> <Tooltip description={t('OverstakedPenaltyDescription')}>
<span data-testid="overstaking-penalty"> <span data-testid="overstaking-penalty">
{formatNumberPercentage(penalties.overstaked, 2)} {formatNumberPercentage(penalties.overstaked, 2)}
</span> </span>
</Tooltip> </Tooltip>
</KeyValueTableRow> </KeyValueTableRow>
<KeyValueTableRow> <KeyValueTableRow>
<span>{t('PERFORMANCE PENALTY')}</span> <span>{t('PERFORMANCE PENALTY')}</span>
<Tooltip description={t('PerformancePenaltyDescription')}> <Tooltip description={t('PerformancePenaltyDescription')}>
<span data-testid="performance-penalty"> <span data-testid="performance-penalty">
{formatNumberPercentage(penalties.performance, 2)} {formatNumberPercentage(penalties.performance, 2)}
</span>
</Tooltip>
</KeyValueTableRow>
<KeyValueTableRow noBorder={true}>
<span>
<strong>{t('TOTAL PENALTIES')}</strong>
</span> </span>
</Tooltip> <span data-testid="total-penalties">
</KeyValueTableRow> <strong>
<KeyValueTableRow noBorder={true}> {formatNumberPercentage(penalties.overall, 2)}
<span> </strong>
<strong>{t('TOTAL PENALTIES')}</strong> </span>
</span> </KeyValueTableRow>
<span data-testid="total-penalties"> </KeyValueTable>
<strong>{formatNumberPercentage(penalties.overall, 2)}</strong> </RoundedWrapper>
</span> </div>
</KeyValueTableRow>
</KeyValueTable>
</RoundedWrapper>
<SubHeading title={t('VOTING POWER')} /> <SubHeading title={t('VOTING POWER')} />
<RoundedWrapper marginBottomLarge={true} paddingBottom={true}> <div className="break-all">
<KeyValueTable data-testid="validator-table-voting-power"> <RoundedWrapper marginBottomLarge={true} paddingBottom={true}>
<KeyValueTableRow> <KeyValueTable data-testid="validator-table-voting-power">
<span>{t('UNNORMALISED VOTING POWER')}</span> <KeyValueTableRow>
<span>{t('UNNORMALISED VOTING POWER')}</span>
<Tooltip description={t('UnnormalisedVotingPowerDescription')}> <Tooltip description={t('UnnormalisedVotingPowerDescription')}>
<span data-testid="unnormalised-voting-power"> <span data-testid="unnormalised-voting-power">
{getUnnormalisedVotingPower(rawValidatorScore)} {getUnnormalisedVotingPower(rawValidatorScore)}
</span>
</Tooltip>
</KeyValueTableRow>
<KeyValueTableRow noBorder={true}>
<span>
<strong>{t('NORMALISED VOTING POWER')}</strong>
</span> </span>
</Tooltip>
</KeyValueTableRow>
<KeyValueTableRow noBorder={true}>
<span>
<strong>{t('NORMALISED VOTING POWER')}</strong>
</span>
<Tooltip description={t('NormalisedVotingPowerDescription')}> <Tooltip description={t('NormalisedVotingPowerDescription')}>
<strong data-testid="normalised-voting-power"> <strong data-testid="normalised-voting-power">
{getNormalisedVotingPower(node.rankingScore.votingPower)} {getNormalisedVotingPower(node.rankingScore.votingPower)}
</strong> </strong>
</Tooltip> </Tooltip>
</KeyValueTableRow> </KeyValueTableRow>
</KeyValueTable> </KeyValueTable>
</RoundedWrapper> </RoundedWrapper>
</div>
</div> </div>
</> </>
); );

2
apps/governance/src/routes/token/token-details/token-details.tsx
View File

@ -54,7 +54,7 @@ export const TokenDetails = ({
config.token_vesting_contract?.address || ENV.addresses.tokenVestingAddress; config.token_vesting_contract?.address || ENV.addresses.tokenVestingAddress;
return ( return (
<div className="token-details"> <div className="token-details break-all">
<RoundedWrapper> <RoundedWrapper>
<KeyValueTable> <KeyValueTable>
<KeyValueTableRow> <KeyValueTableRow>