diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx index adb76055f1..27824af378 100644 --- a/src/canvas/JoinPool/Preloader.tsx +++ b/src/canvas/JoinPool/Preloader.tsx @@ -1,35 +1,44 @@ // Copyright 2024 @paritytech/polkadot-staking-dashboard authors & contributors // SPDX-License-Identifier: GPL-3.0-only -import { faArrowsRotate, faTimes } from '@fortawesome/free-solid-svg-icons'; +import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; -import { ButtonPrimaryInvert } from 'kits/Buttons/ButtonPrimaryInvert'; import { useOverlay } from 'kits/Overlay/Provider'; import { useTranslation } from 'react-i18next'; -import { - JoinFormWrapper, - JoinPoolInterfaceWrapper, - PreloaderWrapper, -} from './Wrappers'; -import { PoolSync } from 'library/PoolSync'; -import { CallToActionLoader } from 'library/Loader/CallToAction'; -import { LoaderWrapper } from 'library/Loader/Wrappers'; +import { JoinPoolInterfaceWrapper } from './Wrappers'; import { PageTitleTabs } from 'kits/Structure/PageTitleTabs'; import { CanvasTitleWrapper } from 'canvas/Wrappers'; +import { useBondedPools } from 'contexts/Pools/BondedPools'; +import BigNumber from 'bignumber.js'; +import type { BondedPool } from 'contexts/Pools/BondedPools/types'; +import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils'; +import { useNetwork } from 'contexts/Network'; +import { useApi } from 'contexts/Api'; +import { PoolSync } from 'library/PoolSync'; export const Preloader = () => { - const { t } = useTranslation(); + const { t } = useTranslation('pages'); + const { + network, + networkData: { units, unit }, + } = useNetwork(); + const { bondedPools } = useBondedPools(); + const { + poolsConfig: { counterForPoolMembers }, + } = useApi(); const { closeCanvas } = useOverlay().canvas; + let totalPoolPoints = new BigNumber(0); + bondedPools.forEach((b: BondedPool) => { + totalPoolPoints = totalPoolPoints.plus(rmCommas(b.points)); + }); + const totalPoolPointsUnit = planckToUnit(totalPoolPoints, units) + .decimalPlaces(0) + .toFormat(); + return ( <>
- {
-

{t('syncingPoolData', { ns: 'library' })}...

+

{t('pools.joinPool')}

- {t('analyzingPoolPerformance', { ns: 'library' })} - + {t('pools.joinPoolHeading', { + totalMembers: new BigNumber(counterForPoolMembers).toFormat(), + totalPoolPoints: totalPoolPointsUnit, + unit, + network: capitalizeFirstLetter(network), + })}

@@ -81,19 +94,13 @@ export const Preloader = () => { -
-
- - - -
-
-
- - - -
-
+
+

+ {t('analyzingPoolPerformance', { ns: 'library' })}... +

+

+ +

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 99a46091a3..b9cef2e3db 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -50,13 +50,22 @@ export const JoinPoolInterfaceWrapper = styled.div` } } } + + > .tip { + color: var(--accent-color-primary); + margin-top: 1rem; + font-family: Inter, sans-serif; + display: flex; + align-items: center; + justify-content: center; + } } `; export const PreloaderWrapper = styled.div` background-color: var(--background-floating-card); width: 100%; - height: 3.75rem; + height: 2rem; border-radius: 2rem; opacity: 0.4; `; diff --git a/src/library/Loader/Wrappers.ts b/src/library/Loader/Wrappers.ts index c601ccb3b8..983dc0d62f 100644 --- a/src/library/Loader/Wrappers.ts +++ b/src/library/Loader/Wrappers.ts @@ -17,7 +17,7 @@ export const LoaderWrapper = styled.div` animation-duration: 1.5s; animation-fill-mode: forwards; animation-iteration-count: infinite; - animation-name: shimmer; + animation-name: shimmer-loader; animation-timing-function: linear; opacity: 0.1; @@ -25,7 +25,7 @@ export const LoaderWrapper = styled.div` display: inline-block; position: relative; - @keyframes shimmer { + @keyframes shimmer-loader { 0% { background-position: 0px 0; } diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json index 8745641b97..09dae46e41 100644 --- a/src/locale/cn/pages.json +++ b/src/locale/cn/pages.json @@ -154,6 +154,7 @@ "inPool": "提名池中", "inactivePoolNotNominating": "非活跃:提名池未提名任何验证人", "joinPool": "加入提名池", + "joinPoolHeading": " {{totalMembers}} 个提名池成员在{{network}}上抵押共{{totalPoolPoints}} 个{{unit}} ", "leave": "离开", "leavingPool": "离开提名池中", "leftThePool": "所有成员已离开", diff --git a/src/locale/en/pages.json b/src/locale/en/pages.json index eae84374ad..211f72d6ca 100644 --- a/src/locale/en/pages.json +++ b/src/locale/en/pages.json @@ -156,6 +156,7 @@ "inPool": "In Pool", "inactivePoolNotNominating": "Inactive: Pool Not Nominating", "joinPool": "Join Pool", + "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", "leave": "Leave", "leavingPool": "Leaving Pool", "leftThePool": "All members have now left the pool",