Skip to content

Commit

Permalink
style: adjust divider colors (#1606)
Browse files Browse the repository at this point in the history 
* style: adjust divider colors

* refactor: adjust types

* style: align skeletons in locked in referenda row
  • Loading branch information
@Nick-1979
Nick-1979 authored Oct 25, 2024
1 parent 7359368 commit b4034fb
Show file tree
Hide file tree
Showing 13 changed files with 32 additions and 40 deletions.
10 changes: 5 additions & 5 deletions packages/extension-polkagate/src/components/FormatBalance2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const K_LENGTH = 3 + 1;

type LabelPost = string | React.ReactNode

function getFormat(decimals: number[], tokens: string[], formatIndex = 0): [number, string] {
function getFormat (decimals: number[], tokens: string[], formatIndex = 0): [number, string] {
return [
formatIndex < decimals.length
? decimals[formatIndex]
Expand All @@ -47,18 +47,18 @@ function getFormat(decimals: number[], tokens: string[], formatIndex = 0): [numb
];
}

function createElement(prefix: string, postfix: string, unit: string, label: LabelPost = '', isShort = false, decimalPoint: number): React.ReactNode {
function createElement (prefix: string, postfix: string, unit: string, label: LabelPost = '', isShort = false, decimalPoint: number): React.ReactNode {
return <>{`${prefix}${isShort ? '' : '.'}`}{!isShort && <span className='ui--FormatBalance-postfix'>{`00${postfix?.slice(0, decimalPoint) || ''}`.slice(-decimalPoint)}</span>}<span className='ui--FormatBalance-unit'> {unit}</span>{label}</>;
}

function splitFormat(value: string, decimalPoint: number, label?: LabelPost, isShort?: boolean): React.ReactNode {
function splitFormat (value: string, decimalPoint: number, label?: LabelPost, isShort?: boolean): React.ReactNode {
const [prefix, postfixFull] = value.split('.');
const [postfix, unit] = postfixFull.split(' ');

return createElement(prefix, postfix, unit, label, isShort, decimalPoint);
}

function applyFormat(decimalPoint: number, value: Compact<any> | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: LabelPost): React.ReactNode {
function applyFormat (decimalPoint: number, value: Compact<any> | BN | string, [decimals, token]: [number, string], withCurrency = true, withSi?: boolean, _isShort?: boolean, labelPost?: LabelPost): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { decimals, forceUnit: '-', withSi: false }).split('.');
const isShort = _isShort || (withSi && prefix.length >= K_LENGTH);
const unitPost = withCurrency ? token : '';
Expand All @@ -74,7 +74,7 @@ function applyFormat(decimalPoint: number, value: Compact<any> | BN | string, [d
return createElement(prefix, postfix, unitPost, labelPost, isShort, decimalPoint);
}

function FormatBalance({ children, className = '', decimalPoint = FLOATING_POINT_DIGIT, decimals, format, formatIndex, isShort, label, labelPost, tokens, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
function FormatBalance ({ children, className = '', decimalPoint = FLOATING_POINT_DIGIT, decimals, format, formatIndex, isShort, label, labelPost, tokens, value, valueFormatted, withCurrency, withSi }: Props): React.ReactElement<Props> {
const { t } = useTranslation();

const formatInfo = useMemo(
Expand Down
8 changes: 3 additions & 5 deletions packages/extension-polkagate/src/components/ShowBalance.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

/**
* @description this component is used to show an account's balance
* */
import type { ApiPromise } from '@polkadot/api';
import type { Balance } from '@polkadot/types/interfaces';
import type { BN } from '@polkadot/util';

import { Grid, Skeleton } from '@mui/material';
import React from 'react';

import { ApiPromise } from '@polkadot/api';

import { FLOATING_POINT_DIGIT } from '../util/constants';
import FormatBalance from './FormatBalance';
import { FormatBalance2 } from '.';

export interface Props {
balance: Balance | string | BN | number | null | undefined;
balance: Balance | string | BN | null | undefined;
api?: ApiPromise | undefined;
decimalPoint?: number;
height?: number;
Expand All @@ -30,7 +28,7 @@ export interface Props {
withCurrency?: boolean;
}

export default function ShowBalance({ api, balance, decimalPoint, withCurrency = true, height = 20, skeletonWidth = 90, decimal = undefined, token = undefined }: Props): React.ReactElement<Props> {
export default function ShowBalance ({ api, balance, decimal = undefined, decimalPoint, height = 20, skeletonWidth = 90, token = undefined, withCurrency = true }: Props): React.ReactElement<Props> {
return (
<Grid alignItems='center' container justifyContent='center' width='fit-content'>
{
Expand Down
1 change: 1 addition & 0 deletions ...ages/extension-polkagate/src/fullscreen/accountDetails/components/LockedInReferendaFS.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export default function LockedInReferendaFS ({ address, price, refreshNeeded, se
decimals={decimal}
fontSize= '22px'
fontWeight={ 400}
mt={!totalLocked ? '5px' : undefined}
price={price}
skeletonHeight={20}
/>
Expand Down
9 changes: 4 additions & 5 deletions packages/extension-polkagate/src/fullscreen/governance/post/myVote/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@

/* eslint-disable react/jsx-max-props-per-line */

import type { BN } from '@polkadot/util';
import type { Vote } from './util';

import { Check as CheckIcon, Close as CloseIcon, RemoveCircle as AbstainIcon } from '@mui/icons-material';
import { Grid, Skeleton, Typography, useTheme } from '@mui/material';
import React, { useMemo } from 'react';

import { ShowBalance } from '../../../../components';
import { useApi, useDecimal, useToken, useTranslation } from '../../../../hooks';
import { useInfo, useTranslation } from '../../../../hooks';
import { pgBoxShadow } from '../../../../util/utils';
import { getVoteType } from '../../utils/util';
import { getConviction } from './util';
Expand All @@ -25,9 +26,7 @@ interface Props {
export default function MyVote ({ address, isFinished, notVoted, vote }: Props): React.ReactElement {
const { t } = useTranslation();
const theme = useTheme();
const api = useApi(address);
const decimal = useDecimal(address);
const token = useToken(address);
const { api, decimal, token } = useInfo(address);

// @ts-ignore
const voteBalance = useMemo((): number | undefined => (vote?.standard?.balance || vote?.splitAbstain?.abstain || vote?.delegating?.balance), [vote]);
Expand Down Expand Up @@ -65,7 +64,7 @@ export default function MyVote ({ address, isFinished, notVoted, vote }: Props):
: <Grid alignItems='center' container item justifyContent='space-between' sx={{ pt: '20px', px: '10%' }}>
<Grid container item xs={8}>
<Grid item sx={{ fontSize: '20px', fontWeight: 500 }}>
<ShowBalance api={api} balance={voteBalance} decimal={decimal} decimalPoint={1} token={token} />
<ShowBalance api={api} balance={voteBalance as unknown as BN} decimal={decimal} decimalPoint={1} token={token} />
</Grid>
<Grid item sx={{ fontSize: '18px', fontWeight: 500, pl: '5px' }}>
{vote?.standard?.vote && `(${getConviction(vote.standard.vote)}x)`}
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/fullscreen/sendFund/Review.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function Review ({ address, balances, inputs, setRefresh, setStep
<DisplayValue dividerHeight='1px' title={t('Amount')}>
<Grid alignItems='center' container item sx={{ height: '42px' }}>
<ShowBalance
balance={inputs?.amount && balances?.decimal && amountToMachine(inputs.amount, balances?.decimal)}
balance={inputs?.amount && balances?.decimal ? amountToMachine(inputs.amount, balances?.decimal) : undefined }
decimal={balances?.decimal}
decimalPoint={4}
token={balances?.token}
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/popup/account/LabelBalancePrice.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ export default function LabelBalancePrice ({ address, balances, label, onClick,
</Grid>
</Grid>
{showLabel &&
<Divider sx={{ bgcolor: 'secondary.main', height: '1px', my: '5px' }} />
<Divider sx={{ bgcolor: 'divider', height: '1px', my: '5px' }} />
}
</>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/popup/account/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ export default function AccountDetails (): React.ReactElement {
onClick={goToOthers}
sx={{ p: 0 }}
>
<ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '26px', stroke: theme.palette.secondary.light, strokeWidth: 1 }} />
<ArrowForwardIosRoundedIcon sx={{ color: 'secondary.light', fontSize: '26px', stroke: theme.palette.secondary.light, strokeWidth: 0 }} />
</IconButton>
</Grid>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/popup/account/unlock/LockedInReferenda.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export default function LockedInReferenda ({ address, refresh, setRefresh }: Pro
</Grid>
</Grid>
</Grid>
<Divider sx={{ bgcolor: 'secondary.main', height: '1px', my: '5px' }} />
<Divider sx={{ bgcolor: 'divider', height: '1px', my: '5px' }} />
{showReview && !!classToUnlock?.length && api && lockedInRef && unlockableAmount && address &&
<Review
address={address}
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/popup/home/AiBackgroundImage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ interface Props {
setBgImage: React.Dispatch<React.SetStateAction<string | undefined>>
}

export default function AiBackgroundImage({ bgImage, setBgImage }: Props): React.ReactElement {
export default function AiBackgroundImage ({ bgImage, setBgImage }: Props): React.ReactElement {
const { t } = useTranslation();
const theme = useTheme();
const imgRef = useRef({ dark: 0, light: 0 });
Expand Down
11 changes: 4 additions & 7 deletions packages/extension-polkagate/src/popup/staking/pool/Info.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,8 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

//@ts-nocheck

import type { PoolStakingConsts } from '../../../util/types';

import { Container, Divider, Grid } from '@mui/material';
Expand All @@ -26,15 +23,15 @@ interface Props {

}

export default function Info({ address, info, setShowInfo, showInfo }: Props): React.ReactElement {
export default function Info ({ address, info, setShowInfo, showInfo }: Props): React.ReactElement {
const { t } = useTranslation();
const { decimal, token } = useInfo(address);

const onBackClick = useCallback(() => {
setShowInfo(false);
}, [setShowInfo]);

const Row = ({ label, showDivider = true, value }: { label: string, value: BN | undefined, showDivider?: boolean }) => {
const Row = ({ label, showDivider = true, value }: { label: string, value: BN | string | number | undefined, showDivider?: boolean }) => {
return (
<>
<Grid alignItems='center' container justifyContent='space-between' p='5px 15px'>
Expand All @@ -50,7 +47,7 @@ export default function Info({ address, info, setShowInfo, showInfo }: Props): R
</Grid>
{showDivider &&
<Grid container item justifyContent='center' xs={12}>
<Divider sx={{ bgcolor: 'secondary.main', m: '1px auto', width: '90%' }} />
<Divider sx={{ bgcolor: 'divider', m: '1px auto', width: '90%' }} />
</Grid>
}
</>
Expand All @@ -70,7 +67,7 @@ export default function Info({ address, info, setShowInfo, showInfo }: Props): R
</Grid>
{showDivider &&
<Grid container item justifyContent='center' xs={12}>
<Divider sx={{ bgcolor: 'secondary.main', m: '1px auto', width: '90%' }} />
<Divider sx={{ bgcolor: 'divider', m: '1px auto', width: '90%' }} />
</Grid>
}
</>
Expand Down
16 changes: 7 additions & 9 deletions packages/extension-polkagate/src/popup/staking/pool/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

Expand Down Expand Up @@ -72,7 +71,7 @@ export default function Index(): React.ReactElement {

const staked = useMemo(() => pool === undefined ? undefined : new BN(pool?.member?.points ?? 0), [pool]);
const claimable = useMemo(() => pool === undefined ? undefined : new BN(pool?.myClaimable ?? 0), [pool]);
const isPoolInfoOutdated = useMemo(() => pool && pool.date && (Date.now() - pool.date) > BALANCES_VALIDITY_PERIOD, [pool]);
const isPoolInfoOutdated = useMemo(() => pool?.date && (Date.now() - pool.date) > BALANCES_VALIDITY_PERIOD, [pool]);

const [redeemable, setRedeemable] = useState<BN | undefined>(state?.redeemable);
const [unlockingAmount, setUnlockingAmount] = useState<BN | undefined>(state?.unlockingAmount);
Expand All @@ -96,19 +95,19 @@ export default function Index(): React.ReactElement {
const _toggleShowUnlockings = useCallback(() => setShowUnlockings(!showUnlockings), [showUnlockings]);

useEffect(() => {
api && api.derive.session?.progress().then((sessionInfo) => {
api?.derive.session?.progress().then((sessionInfo) => {
setSessionInfo({
currentEra: Number(sessionInfo.currentEra),
eraLength: Number(sessionInfo.eraLength),
eraProgress: Number(sessionInfo.eraProgress)
});
});
}).catch(console.error);
}, [api]);

useEffect((): void => {
api && api['query']['staking'] && api.query['staking']['currentEra']().then((ce) => {
api?.query['staking']?.['currentEra']().then((ce) => {
setCurrentEraIndex(Number(ce));
});
}).catch(console.error);
}, [api]);

useEffect(() => {
Expand Down Expand Up @@ -218,8 +217,7 @@ export default function Index(): React.ReactElement {
</Grid>
);

const Row = ({ isUnstaking, label, link1Text, link2Text, onLink1, onLink2, showDivider = true, value }
: { label: string, value: BN | undefined, link1Text?: Text, onLink1?: () => void, link2Text?: Text, onLink2?: () => void, showDivider?: boolean, isUnstaking?: boolean }) => {
const Row = ({ isUnstaking, label, link1Text, link2Text, onLink1, onLink2, showDivider = true, value }: { label: string, value: BN | undefined, link1Text?: Text, onLink1?: () => void, link2Text?: Text, onLink2?: () => void, showDivider?: boolean, isUnstaking?: boolean }) => {
return (
<>
<Grid alignItems='center' container justifyContent='space-between' pt='10px'>
Expand Down Expand Up @@ -274,7 +272,7 @@ export default function Index(): React.ReactElement {
}
{showDivider &&
<Grid container item justifyContent='center' xs={12}>
<Divider sx={{ bgcolor: 'secondary.main', mt: '10px', width: '100%' }} />
<Divider sx={{ bgcolor: 'divider', mt: '10px', width: '100%' }} />
</Grid>
}
</>
Expand Down
5 changes: 2 additions & 3 deletions packages/extension-polkagate/src/popup/staking/solo/Info.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
// SPDX-License-Identifier: Apache-2.0
// @ts-nocheck

/* eslint-disable react/jsx-max-props-per-line */

Expand All @@ -23,7 +22,7 @@ interface Props {
setShowInfo: React.Dispatch<React.SetStateAction<boolean>>
}

export default function Info({ address, info, setShowInfo, showInfo }: Props): React.ReactElement {
export default function Info ({ address, info, setShowInfo, showInfo }: Props): React.ReactElement {
const { t } = useTranslation();
const minimumActiveStake = useMinToReceiveRewardsInSolo(address);
const token = useToken(address);
Expand All @@ -49,7 +48,7 @@ export default function Info({ address, info, setShowInfo, showInfo }: Props): R
</Grid>
{showDivider &&
<Grid container item justifyContent='center' xs={12}>
<Divider sx={{ bgcolor: 'secondary.main', m: '1px auto', width: '90%' }} />
<Divider sx={{ bgcolor: 'divider', m: '1px auto', width: '90%' }} />
</Grid>
}
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/extension-polkagate/src/popup/staking/solo/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@ export default function Index (): React.ReactElement {
}
{showDivider &&
<Grid container item justifyContent='center' xs={12}>
<Divider sx={{ bgcolor: 'secondary.main', m: '2px auto', width: '100%' }} />
<Divider sx={{ bgcolor: 'divider', m: '2px auto', width: '100%' }} />
</Grid>
}
</>
Expand Down

0 comments on commit b4034fb

Please sign in to comment.