From 81bc535691f84c77ebdee4643a0477f8147e7fcd Mon Sep 17 00:00:00 2001 From: Jaco Date: Sat, 14 Jan 2023 13:01:03 +0200 Subject: [PATCH] Rework staking styled injection (#8794) * Rework staking styled injection * Build fix --- .../page-staking/src/Actions/Account/Nominate.tsx | 10 ++++++---- .../page-staking/src/Actions/Account/Unbond.tsx | 12 +++++++----- .../page-staking/src/Actions/Account/index.tsx | 11 ++++++----- .../page-staking/src/Actions/partials/Nominate.tsx | 10 ++++++---- packages/page-staking/src/Bags/Stash.tsx | 10 ++++++---- packages/page-staking/src/Legend.tsx | 10 ++++++---- packages/page-staking/src/Payouts/PayButton.tsx | 10 ++++++---- packages/page-staking/src/Payouts/index.tsx | 10 ++++++---- packages/page-staking/src/Pools/Pool.tsx | 14 ++++++++------ packages/page-staking/src/Query/Chart.tsx | 10 ++++++---- packages/page-staking/src/Query/Validator.tsx | 10 ++++++---- packages/page-staking/src/Targets/Nominate.tsx | 10 ++++++---- packages/page-staking/src/Targets/Summary.tsx | 10 ++++++---- packages/page-staking/src/Targets/index.tsx | 10 ++++++---- packages/page-staking/src/Validators/Summary.tsx | 10 ++++++---- packages/page-staking/src/index.tsx | 10 ++++++---- 16 files changed, 99 insertions(+), 68 deletions(-) diff --git a/packages/page-staking/src/Actions/Account/Nominate.tsx b/packages/page-staking/src/Actions/Account/Nominate.tsx index 727bb5a70c..d4a8328aab 100644 --- a/packages/page-staking/src/Actions/Account/Nominate.tsx +++ b/packages/page-staking/src/Actions/Account/Nominate.tsx @@ -28,7 +28,7 @@ function Nominate ({ className = '', controllerId, nominating, onClose, poolId, const [{ nominateTx }, setTx] = useState({}); return ( - ('Nominate Validators')} onClose={onClose} @@ -56,15 +56,17 @@ function Nominate ({ className = '', controllerId, nominating, onClose, poolId, onStart={onClose} /> - + ); } -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); diff --git a/packages/page-staking/src/Actions/Account/Unbond.tsx b/packages/page-staking/src/Actions/Account/Unbond.tsx index 80a60c634c..9579c76c42 100644 --- a/packages/page-staking/src/Actions/Account/Unbond.tsx +++ b/packages/page-staking/src/Actions/Account/Unbond.tsx @@ -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 ( - ('Unbond funds')} onClose={onClose} size='large' @@ -86,11 +86,11 @@ function Unbond ({ controllerId, onClose, stakingLedger, stashId }: Props): Reac tx={api.tx.staking.unbond} /> - + ); } -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); diff --git a/packages/page-staking/src/Actions/Account/index.tsx b/packages/page-staking/src/Actions/Account/index.tsx index b1161e4a88..f623dc7b4f 100644 --- a/packages/page-staking/src/Actions/Account/index.tsx +++ b/packages/page-staking/src/Actions/Account/index.tsx @@ -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 ( - + {slashes.length !== 0 && ( )} - + ); } -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); diff --git a/packages/page-staking/src/Actions/partials/Nominate.tsx b/packages/page-staking/src/Actions/partials/Nominate.tsx index ecd8877f04..470d424e2e 100644 --- a/packages/page-staking/src/Actions/partials/Nominate.tsx +++ b/packages/page-staking/src/Actions/partials/Nominate.tsx @@ -64,7 +64,7 @@ function Nominate ({ className = '', controllerId, nominating, onChange, poolId, : MAX_NOMINATIONS; return ( -
+ {withSenders && ( poolId ? ( @@ -98,11 +98,11 @@ function Nominate ({ className = '', controllerId, nominating, onChange, poolId, /> ('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.')} /> -
+ ); } -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); diff --git a/packages/page-staking/src/Bags/Stash.tsx b/packages/page-staking/src/Bags/Stash.tsx index bb3645b101..1a451eeca8 100644 --- a/packages/page-staking/src/Bags/Stash.tsx +++ b/packages/page-staking/src/Bags/Stash.tsx @@ -49,7 +49,7 @@ function Stash ({ bagLower, bagUpper, className, isLoading, list, stashId }: Pro ); return ( -
+ + ); } -export default React.memo(styled(Stash)` +const StyledDiv = styled.div` .ui--AddressMini { vertical-align: middle; } -`); +`; + +export default React.memo(Stash); diff --git a/packages/page-staking/src/Legend.tsx b/packages/page-staking/src/Legend.tsx index ee6c12c846..a31c5690ca 100644 --- a/packages/page-staking/src/Legend.tsx +++ b/packages/page-staking/src/Legend.tsx @@ -20,7 +20,7 @@ function Legend ({ className, isRelay, minCommission }: Props): React.ReactEleme const { t } = useTranslation(); return ( -
+ {t('Era points')} -
+ ); } -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); diff --git a/packages/page-staking/src/Payouts/PayButton.tsx b/packages/page-staking/src/Payouts/PayButton.tsx index 51c79827af..6507f23889 100644 --- a/packages/page-staking/src/Payouts/PayButton.tsx +++ b/packages/page-staking/src/Payouts/PayButton.tsx @@ -79,7 +79,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac return ( <> {payout && isVisible && ( - ('Payout all stakers')} onClose={togglePayout} @@ -137,7 +137,7 @@ function PayButton ({ className, isAll, isDisabled, payout }: Props): React.Reac onStart={togglePayout} /> - + )}
+ ); } -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); diff --git a/packages/page-staking/src/Pools/Pool.tsx b/packages/page-staking/src/Pools/Pool.tsx index df8d5df7bc..f41ab5c4fa 100644 --- a/packages/page-staking/src/Pools/Pool.tsx +++ b/packages/page-staking/src/Pools/Pool.tsx @@ -54,7 +54,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): return ( <> - +
@@ -114,9 +114,9 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props): : } - + {info && isExpanded && ( - +
{t('creator')}
@@ -151,13 +151,13 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
- + )} ); } -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); diff --git a/packages/page-staking/src/Query/Chart.tsx b/packages/page-staking/src/Query/Chart.tsx index b646ae7a9d..ffebbaf354 100644 --- a/packages/page-staking/src/Query/Chart.tsx +++ b/packages/page-staking/src/Query/Chart.tsx @@ -24,7 +24,7 @@ function ChartDisplay ({ className = '', colors, header, labels, legends, values ); return ( -
+

{header}

)} -
+ ); } -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); diff --git a/packages/page-staking/src/Query/Validator.tsx b/packages/page-staking/src/Query/Validator.tsx index 0519020f8c..7f3fcbe258 100644 --- a/packages/page-staking/src/Query/Validator.tsx +++ b/packages/page-staking/src/Query/Validator.tsx @@ -15,7 +15,7 @@ import ChartStake from './ChartStake'; function Validator ({ className = '', labels, validatorId }: Props): React.ReactElement | null { return ( - + - + ); } -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); diff --git a/packages/page-staking/src/Targets/Nominate.tsx b/packages/page-staking/src/Targets/Nominate.tsx index 3b5ff9cea5..615a1fec77 100644 --- a/packages/page-staking/src/Targets/Nominate.tsx +++ b/packages/page-staking/src/Targets/Nominate.tsx @@ -56,7 +56,7 @@ function Nominate ({ className = '', isDisabled, ownNominators, targets }: Props onClick={toggleOpen} /> {isOpen && ( - ('Nominate validators')} onClose={toggleOpen} @@ -107,13 +107,13 @@ function Nominate ({ className = '', isDisabled, ownNominators, targets }: Props tx={api.tx.staking.nominate} /> - + )} ); } -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); diff --git a/packages/page-staking/src/Targets/Summary.tsx b/packages/page-staking/src/Targets/Summary.tsx index a40185a1a3..3f7414bd29 100644 --- a/packages/page-staking/src/Targets/Summary.tsx +++ b/packages/page-staking/src/Targets/Summary.tsx @@ -68,7 +68,7 @@ function Summary ({ avgStaked, className, lastEra, lowStaked, minNominated, minN const percent = %; return ( - +
('total staked')} @@ -146,12 +146,14 @@ function Summary ({ avgStaked, className, lastEra, lowStaked, minNominated, minN />
- + ); } -export default React.memo(styled(Summary)` +const StyledSummaryBox = styled(SummaryBox)` .percent { font-size: var(--font-percent-tiny); } -`); +`; + +export default React.memo(Summary); diff --git a/packages/page-staking/src/Targets/index.tsx b/packages/page-staking/src/Targets/index.tsx index 75cdff3ce3..57c2a3c322 100644 --- a/packages/page-staking/src/Targets/index.tsx +++ b/packages/page-staking/src/Targets/index.tsx @@ -364,7 +364,7 @@ function Targets ({ className = '', isInElection, nominatedBy, ownStashes, targe const canSelect = selected.length < maxNominations; return ( -
+ )} -
+ ); } -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); diff --git a/packages/page-staking/src/Validators/Summary.tsx b/packages/page-staking/src/Validators/Summary.tsx index eedd82d4f7..c4ffc29364 100644 --- a/packages/page-staking/src/Validators/Summary.tsx +++ b/packages/page-staking/src/Validators/Summary.tsx @@ -26,7 +26,7 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina const percent = %; return ( - +
('validators')}> {stakingOverview @@ -93,11 +93,11 @@ function Summary ({ className = '', stakingOverview, targets: { counterForNomina
- + ); } -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); diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index 4455c39c4f..3568bdb262 100644 --- a/packages/page-staking/src/index.tsx +++ b/packages/page-staking/src/index.tsx @@ -145,7 +145,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement !!q), [api, hasStashes, slashes, t]); return ( -
+
+ ); } -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);