diff --git a/packages/app/src/overlay/canvas/JoinPool/Overview/index.tsx b/packages/app/src/overlay/canvas/JoinPool/Overview/index.tsx index 41bd3aa64..d665127cc 100644 --- a/packages/app/src/overlay/canvas/JoinPool/Overview/index.tsx +++ b/packages/app/src/overlay/canvas/JoinPool/Overview/index.tsx @@ -6,8 +6,7 @@ import { JoinForm } from './JoinForm' import { useActiveAccounts } from 'contexts/ActiveAccounts' import { useActivePool } from 'contexts/Pools/ActivePool' import { useStaking } from 'contexts/Staking' -import { Interface } from 'ui-core/canvas' -import { GraphLayoutWrapper } from '../Wrappers' +import { GraphContainer, Interface } from 'ui-core/canvas' import type { OverviewSectionProps } from '../types' import { Addresses } from './Addresses' import { Performance } from './Performance' @@ -28,10 +27,10 @@ export const Overview = (props: OverviewSectionProps) => { - + - + diff --git a/packages/app/src/overlay/canvas/JoinPool/Wrappers.ts b/packages/app/src/overlay/canvas/JoinPool/Wrappers.ts index 8a983dfeb..c3bf2a083 100644 --- a/packages/app/src/overlay/canvas/JoinPool/Wrappers.ts +++ b/packages/app/src/overlay/canvas/JoinPool/Wrappers.ts @@ -151,33 +151,6 @@ export const GraphWrapper = styled.div` } ` -// Element used to wrap graph and pool stats, allowing flex ordering on smaller screens. -// TODO: abstract this into shared GraphContainer component. -export const GraphLayoutWrapper = styled.div` - flex: 1; - display: flex; - flex-direction: column; - - @media (min-width: 1001px) { - > div:last-child { - margin-top: 1.25rem; - } - } - - @media (max-width: 1000px) { - > div { - &:first-child { - order: 2; - margin-top: 1.5rem; - margin-bottom: 0; - } - &:last-child { - order: 1; - } - } - } -` - export const NominationsWrapper = styled.div` flex: 1; display: flex; diff --git a/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx b/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx index 999de4145..cbf2cae10 100644 --- a/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx +++ b/packages/app/src/overlay/canvas/ValidatorMetrics/index.tsx @@ -4,11 +4,19 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons' import { Polkicon } from '@w3ux/react-polkicon' import BigNumber from 'bignumber.js' +import { useHelp } from 'contexts/Help' import { useNetwork } from 'contexts/Network' import { useStaking } from 'contexts/Staking' import { useTranslation } from 'react-i18next' -import { ButtonPrimary } from 'ui-buttons' -import { AccountTitle, Head, Main, Stat, Subheading } from 'ui-core/canvas' +import { ButtonHelp, ButtonPrimary } from 'ui-buttons' +import { + AccountTitle, + GraphContainer, + Head, + Main, + Stat, + Subheading, +} from 'ui-core/canvas' import { useOverlay } from 'ui-overlay' import { planckToUnitBn } from 'utils' @@ -28,6 +36,7 @@ export const ValidatorMetrics = () => { brand: { token: Token }, }, } = useNetwork() + const { openHelp } = useHelp() const validator = options!.validator const identity = options!.identity @@ -74,22 +83,35 @@ export const ValidatorMetrics = () => { - -

- - - {t('selfStake', { ns: 'modals' })}:{' '} - {planckToUnitBn(validatorOwnStake, units).toFormat()} {unit} - - - - - {t('nominatorStake', { ns: 'modals' })}:{' '} - {planckToUnitBn(otherStake, units).decimalPlaces(0).toFormat()}{' '} - {unit} - -

-
+ + +

+ + + {t('selfStake', { ns: 'modals' })}:{' '} + {planckToUnitBn(validatorOwnStake, units).toFormat()} {unit} + + + + {t('nominatorStake', { ns: 'modals' })}:{' '} + {planckToUnitBn(otherStake, units).decimalPlaces(0).toFormat()}{' '} + {unit} + +

+
+
+ +

+ {t('recentPerformance', { ns: 'library' })} + openHelp('Era Points')} + /> +

+
+
+
) } diff --git a/packages/ui-core/src/canvas/GraphContainer/index.module.scss b/packages/ui-core/src/canvas/GraphContainer/index.module.scss new file mode 100644 index 000000000..c28244004 --- /dev/null +++ b/packages/ui-core/src/canvas/GraphContainer/index.module.scss @@ -0,0 +1,25 @@ +// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +.graphContainer { + flex: 1; + display: flex; + flex-direction: column; + @media (min-width: 1001px) { + > div:last-child { + margin-top: 1.25rem; + } + } + @media (max-width: 1000px) { + > div { + &:first-child { + order: 2; + margin-top: 1.5rem; + margin-bottom: 0; + } + &:last-child { + order: 1; + } + } + } +} diff --git a/packages/ui-core/src/canvas/GraphContainer/index.tsx b/packages/ui-core/src/canvas/GraphContainer/index.tsx new file mode 100644 index 000000000..48ec1af50 --- /dev/null +++ b/packages/ui-core/src/canvas/GraphContainer/index.tsx @@ -0,0 +1,11 @@ +// Copyright 2024 @polkadot-cloud/polkadot-staking-dashboard authors & contributors +// SPDX-License-Identifier: GPL-3.0-only + +import type { ComponentBase } from '@w3ux/types' +import classes from './index.module.scss' + +export const GraphContainer = ({ children, style }: ComponentBase) => ( +
+ {children} +
+) diff --git a/packages/ui-core/src/canvas/index.tsx b/packages/ui-core/src/canvas/index.tsx index e984b136c..4388cc215 100644 --- a/packages/ui-core/src/canvas/index.tsx +++ b/packages/ui-core/src/canvas/index.tsx @@ -5,6 +5,7 @@ export * from './AccountTitle' export * from './Container' export * from './Content' export * from './Footer' +export * from './GraphContainer' export * from './Head' export * from './HeadTags' export * from './Interface'