neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rework staking styled injection (#8794)

Browse Source 
* Rework staking styled injection

* Build fix
This commit is contained in:
Jaco 2023-01-14 13:01:03 +02:00 committed by GitHub
parent fcb5ee8d98
commit 81bc535691
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 99 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/page-staking/src/Actions/Account/Nominate.tsx
View File

@ -28,7 +28,7 @@ function Nominate ({ className = '', controllerId, nominating, onClose, poolId,
const [{ nominateTx }, setTx] = useState<NominateInfo>({});
return (
<Modal
<StyledModal
className={className}
header={t<string>('Nominate Validators')}
onClose={onClose}
@ -56,15 +56,17 @@ function Nominate ({ className = '', controllerId, nominating, onClose, poolId,
onStart={onClose}
/>
</Modal.Actions>
</Modal>
</StyledModal>
);
}
export default React.memo(styled(Nominate)`
const StyledModal = styled(Modal)`
.nominatePartial {
.ui--Static .ui--AddressMini .ui--AddressMini-info {
max-width: 10rem;
min-width: 10rem;
}
}
`);
`;
export default React.memo(Nominate);

12
packages/page-staking/src/Actions/Account/Unbond.tsx
View File

@ -15,7 +15,7 @@ import { useTranslation } from '../../translate';
import useUnbondDuration from '../useUnbondDuration';
interface Props {
controllerId?: AccountId | null;
controllerId?: AccountId | string | null;
onClose: () => void;
stakingLedger?: StakingLedger;
stashId: string;
@ -30,7 +30,7 @@ function Unbond ({ controllerId, onClose, stakingLedger, stashId }: Props): Reac
const [withMax, setWithMax] = useState(false);
return (
<Modal
<StyledModal
header={t<string>('Unbond funds')}
onClose={onClose}
size='large'
@ -86,11 +86,11 @@ function Unbond ({ controllerId, onClose, stakingLedger, stashId }: Props): Reac
tx={api.tx.staking.unbond}
/>
</Modal.Actions>
</Modal>
</StyledModal>
);
}
export default React.memo(styled(Unbond)`
const StyledModal = styled(Modal)`
.staking--Unbond--max > div {
justify-content: flex-end;
@ -98,4 +98,6 @@ export default React.memo(styled(Unbond)`
flex: 0;
}
}
`);
`;
export default React.memo(Unbond);

11
packages/page-staking/src/Actions/Account/index.tsx
View File

@ -37,7 +37,6 @@ interface Props {
info: StakerState;
minCommission?: BN;
next?: string[];
stashId: string;
targets: SortedTargets;
validators?: string[];
}
@ -98,7 +97,7 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
const hasBonded = !!stakingAccount?.stakingLedger && !stakingAccount.stakingLedger.active?.isEmpty;
return (
<tr className={className}>
<StyledTr className={className}>
<td className='badge together'>
{slashes.length !== 0 && (
<Badge
@ -359,14 +358,16 @@ function Account ({ allSlashes, className = '', info: { controllerId, destinatio
</>
)}
</td>
</tr>
</StyledTr>
);
}
export default React.memo(styled(Account)`
const StyledTr = styled.tr`
.ui--Button-Group {
display: inline-block;
margin-right: 0.25rem;
vertical-align: inherit;
}
`);
`;
export default React.memo(Account);

10
packages/page-staking/src/Actions/partials/Nominate.tsx
View File

@ -64,7 +64,7 @@ function Nominate ({ className = '', controllerId, nominating, onChange, poolId,
: MAX_NOMINATIONS;
return (
<div className={className}>
<StyledDiv className={className}>
{withSenders && (
poolId
? (
@ -98,11 +98,11 @@ function Nominate ({ className = '', controllerId, nominating, onChange, poolId,
/>
<MarkWarning content={t<string>('You should trust your nominations to act competently and honest; basing your decision purely on their current profitability could lead to reduced profits or even loss of funds.')} />
</Modal.Columns>
</div>
</StyledDiv>
);
}
export default React.memo(styled(Nominate)`
const StyledDiv = styled.div`
article.warning {
margin-top: 0;
}
@ -168,4 +168,6 @@ export default React.memo(styled(Nominate)`
}
}
}
`);
`;
export default React.memo(Nominate);

10
packages/page-staking/src/Bags/Stash.tsx
View File

@ -49,7 +49,7 @@ function Stash ({ bagLower, bagUpper, className, isLoading, list, stashId }: Pro
);
return (
<div className={className}>
<StyledDiv className={className}>
<AddressMini
value={stashId}
withBonded
@ -68,12 +68,14 @@ function Stash ({ bagLower, bagUpper, className, isLoading, list, stashId }: Pro
)
: null
)}
</div>
</StyledDiv>
);
}
export default React.memo(styled(Stash)`
const StyledDiv = styled.div`
.ui--AddressMini {
vertical-align: middle;
}
`);
`;
export default React.memo(Stash);

10
packages/page-staking/src/Legend.tsx
View File

@ -20,7 +20,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
const { t } = useTranslation();
return (
<div className={className}>
<StyledDiv className={className}>
<span>
<Badge
color='blue'
@ -95,11 +95,11 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme
/>
<span>{t('Era points')}</span>
</span>
</div>
</StyledDiv>
);
}
export default React.memo(styled(Legend)`
const StyledDiv = styled.div`
font-size: var(--font-size-small);
padding: 1rem 0.5rem;
text-align: center;
@ -119,4 +119,6 @@ export default React.memo(styled(Legend)`
margin-left: 1rem;
}
}
`);
`;
export default React.memo(Legend);

10
packages/page-staking/src/Payouts/PayButton.tsx
View File

@ -79,7 +79,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
return (
<>
{payout && isVisible && (
<Modal
<StyledModal
className={className}
header={t<string>('Payout all stakers')}
onClose={togglePayout}
@ -137,7 +137,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
onStart={togglePayout}
/>
</Modal.Actions>
</Modal>
</StyledModal>
)}
<Button
icon='credit-card'
@ -153,7 +153,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac
);
}
export default React.memo(styled(PayButton)`
const StyledModal = styled(Modal)`
.ui--AddressMini.padded.addressStatic {
display: inline-block;
padding-top: 0.5rem;
@ -163,4 +163,6 @@ export default React.memo(styled(PayButton)`
max-width: 10rem;
}
}
`);
`;
export default React.memo(PayButton);

10
packages/page-staking/src/Payouts/index.tsx
View File

@ -230,7 +230,7 @@ function Payouts ({ className = '', historyDepth, isInElection, ownPools, ownVal
), [valAvail]);
return (
<div className={className}>
<StyledDiv className={className}>
<Button.Group>
<ToggleGroup
onChange={setMyStashesIndex}
@ -293,11 +293,11 @@ function Payouts ({ className = '', historyDepth, isInElection, ownPools, ownVal
))}
</Table>
)}
</div>
</StyledDiv>
);
}
export default React.memo(styled(Payouts)`
const StyledDiv = styled.div`
.payout-eras {
padding-left: 0.25rem;
vertical-align: middle;
@ -306,4 +306,6 @@ export default React.memo(styled(Payouts)`
white-space: nowrap;
}
}
`);
`;
export default React.memo(Payouts);

14
packages/page-staking/src/Pools/Pool.tsx
View File

@ -54,7 +54,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
return (
<>
<tr className={`${className} isFirst isExpanded ${isExpanded ? '' : 'isLast'}`}>
<StyledTr className={`${className} isFirst isExpanded ${isExpanded ? '' : 'isLast'}`}>
<Table.Column.Id value={poolId} />
<td className='start'>
<div className={`${isExpanded ? '' : 'clamp'}`}>
@ -114,9 +114,9 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
: <Spinner noLabel />
}
</td>
</tr>
</StyledTr>
{info && isExpanded && (
<tr className={`${className} isExpanded isLast`}>
<StyledTr className={`${className} isExpanded isLast`}>
<td colSpan={4}>
<div className='label-column-right'>
<div className='label'>{t('creator')}</div>
@ -151,13 +151,13 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
<div className='inline-balance'><AddressMini value={info.rewardId} /></div>
</div>
</td>
</tr>
</StyledTr>
)}
</>
);
}
export default React.memo(styled(Pool)`
const StyledTr = styled.tr`
.label-column-right,
.label-column-left{
display: flex;
@ -185,4 +185,6 @@ export default React.memo(styled(Pool)`
overflow: hidden;
text-overflow: ellipsis;
}
`);
`;
export default React.memo(Pool);

10
packages/page-staking/src/Query/Chart.tsx
View File

@ -24,7 +24,7 @@ function ChartDisplay ({ className = '', colors, header, labels, legends, values
);
return (
<div className={`staking--Chart ${className}${isLoading ? ' isLoading' : ''}`}>
<StyledDiv className={`staking--Chart ${className}${isLoading ? ' isLoading' : ''}`}>
<h1>{header}</h1>
<Chart.Line
colors={colors}
@ -35,11 +35,11 @@ function ChartDisplay ({ className = '', colors, header, labels, legends, values
{isLoading && (
<Spinner />
)}
</div>
</StyledDiv>
);
}
export default React.memo(styled(ChartDisplay)`
const StyledDiv = styled.div`
&.isLoading {
position: relative;
@ -54,4 +54,6 @@ export default React.memo(styled(ChartDisplay)`
right: 0;
}
}
`);
`;
export default React.memo(ChartDisplay);

10
packages/page-staking/src/Query/Validator.tsx
View File

@ -15,7 +15,7 @@ import ChartStake from './ChartStake';
function Validator ({ className = '', labels, validatorId }: Props): React.ReactElement<Props> | null {
return (
<Columar className={className}>
<StyledColumar className={className}>
<Columar.Column>
<ChartPoints
labels={labels}
@ -36,15 +36,17 @@ function Validator ({ className = '', labels, validatorId }: Props): React.React
validatorId={validatorId}
/>
</Columar.Column>
</Columar>
</StyledColumar>
);
}
export default React.memo(styled(Validator)`
const StyledColumar = styled(Columar)`
.staking--Chart {
background: var(--bg-table);
border: 1px solid var(--border-table);
border-radius: 0.25rem;
padding: 1rem 1.5rem;
}
`);
`;
export default React.memo(Validator);

10
packages/page-staking/src/Targets/Nominate.tsx
View File

@ -56,7 +56,7 @@ function Nominate ({ className = '', isDisabled, ownNominators, targets }: Props
onClick={toggleOpen}
/>
{isOpen && (
<Modal
<StyledModal
className={className}
header={t<string>('Nominate validators')}
onClose={toggleOpen}
@ -107,13 +107,13 @@ function Nominate ({ className = '', isDisabled, ownNominators, targets }: Props
tx={api.tx.staking.nominate}
/>
</Modal.Actions>
</Modal>
</StyledModal>
)}
</>
);
}
export default React.memo(styled(Nominate)`
const StyledModal = styled(Modal)`
.ui--AddressMini.padded.addressStatic {
padding-top: 0.5rem;
@ -122,4 +122,6 @@ export default React.memo(styled(Nominate)`
max-width: 10rem;
}
}
`);
`;
export default React.memo(Nominate);

10
packages/page-staking/src/Targets/Summary.tsx
View File

@ -68,7 +68,7 @@ function Summary ({ avgStaked, className, lastEra, lowStaked, minNominated, minN
const percent = <span className='percent'>%</span>;
return (
<SummaryBox className={className}>
<StyledSummaryBox className={className}>
<section className='media--800'>
<CardSummary
label={t<string>('total staked')}
@ -146,12 +146,14 @@ function Summary ({ avgStaked, className, lastEra, lowStaked, minNominated, minN
/>
</CardSummary>
</section>
</SummaryBox>
</StyledSummaryBox>
);
}
export default React.memo(styled(Summary)`
const StyledSummaryBox = styled(SummaryBox)`
.percent {
font-size: var(--font-percent-tiny);
}
`);
`;
export default React.memo(Summary);

10
packages/page-staking/src/Targets/index.tsx
View File

@ -364,7 +364,7 @@ function Targets ({ className = '', isInElection, nominatedBy, ownStashes, targe
const canSelect = selected.length < maxNominations;
return (
<div className={className}>
<StyledDiv className={className}>
<Summary
avgStaked={avgStaked}
lastEra={lastEra}
@ -419,11 +419,11 @@ function Targets ({ className = '', isInElection, nominatedBy, ownStashes, targe
/>
)}
</Table>
</div>
</StyledDiv>
);
}
export default React.memo(styled(Targets)`
const StyledDiv = styled.div`
text-align: center;
th.isClickable {
@ -435,4 +435,6 @@ export default React.memo(styled(Targets)`
.ui--Table {
overflow-x: auto;
}
`);
`;
export default React.memo(Targets);

10
packages/page-staking/src/Validators/Summary.tsx
View File

@ -26,7 +26,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
const percent = <span className='percent'>%</span>;
return (
<SummaryBox className={className}>
<StyledSummaryBox className={className}>
<section>
<CardSummary label={t<string>('validators')}>
{stakingOverview
@ -93,11 +93,11 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
<section>
<SummarySession />
</section>
</SummaryBox>
</StyledSummaryBox>
);
}
export default React.memo(styled(Summary)`
const StyledSummaryBox = styled(SummaryBox)`
.validator--Account-block-icon {
display: inline-block;
margin-right: 0.75rem;
@ -114,4 +114,6 @@ export default React.memo(styled(Summary)`
.percent {
font-size: var(--font-percent-tiny);
}
`);
`;
export default React.memo(Summary);

10
packages/page-staking/src/index.tsx
View File

@ -145,7 +145,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
].filter((q): q is { name: string; text: string } => !!q), [api, hasStashes, slashes, t]);
return (
<main className={`staking--App ${className}`}>
<StyledMain className={`staking--App ${className}`}>
<Tabs
basePath={basePath}
hidden={
@ -214,11 +214,11 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement<Pr
toggleFavorite={toggleFavorite}
toggleNominatedBy={toggleNominatedBy}
/>
</main>
</StyledMain>
);
}
export default React.memo(styled(StakingApp)`
const StyledMain = styled.main`
.staking--Chart {
margin-top: 1.5rem;
@ -264,4 +264,6 @@ export default React.memo(styled(StakingApp)`
100% { background: #a6a6a6; }
}
`).join('')}
`);
`;
export default React.memo(StakingApp);