From 13d7560243a85ea6429e6a4660deec8aae43e9b5 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 17:50:21 +0700 Subject: [PATCH 1/7] improve preloader --- src/canvas/JoinPool/Preloader.tsx | 74 +++++++++++++++++-------------- src/canvas/JoinPool/Wrappers.ts | 9 ++++ 2 files changed, 49 insertions(+), 34 deletions(-) diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx index adb76055f1..c582b40edc 100644 --- a/src/canvas/JoinPool/Preloader.tsx +++ b/src/canvas/JoinPool/Preloader.tsx @@ -1,35 +1,46 @@ // 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 { JoinPoolInterfaceWrapper, PreloaderWrapper } from './Wrappers'; import { CallToActionLoader } from 'library/Loader/CallToAction'; -import { LoaderWrapper } from 'library/Loader/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 { 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 { + 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(); + + const title = `Join ${new BigNumber(counterForPoolMembers).toFormat()} other pool members staking a total of ${totalPoolPointsUnit} ${unit}.`; + return ( <>
- {
-

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

+

Join Pool

-

- {t('analyzingPoolPerformance', { ns: 'library' })} - -

+

{title}

@@ -81,19 +89,17 @@ export const Preloader = () => { -
-
- - - -
-
-
- - - -
-
+
+ + + + +

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

+

+ +

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 99a46091a3..9fdc7496e3 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -50,6 +50,15 @@ export const JoinPoolInterfaceWrapper = styled.div` } } } + + > .tip { + color: var(--accent-color-primary); + margin-top: 1.5rem; + font-family: Inter, sans-serif; + display: flex; + align-items: center; + justify-content: center; + } } `; From 156c6c91057b300ba9ad0f15585ccf797afe2b23 Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 17:53:45 +0700 Subject: [PATCH 2/7] title --- src/canvas/JoinPool/Preloader.tsx | 7 ++++--- src/canvas/JoinPool/Wrappers.ts | 8 ++++++++ 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx index c582b40edc..5106a87c17 100644 --- a/src/canvas/JoinPool/Preloader.tsx +++ b/src/canvas/JoinPool/Preloader.tsx @@ -12,7 +12,7 @@ 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 { planckToUnit, rmCommas } from '@w3ux/utils'; +import { capitalizeFirstLetter, planckToUnit, rmCommas } from '@w3ux/utils'; import { useNetwork } from 'contexts/Network'; import { useApi } from 'contexts/Api'; import { PoolSync } from 'library/PoolSync'; @@ -20,6 +20,7 @@ import { PoolSync } from 'library/PoolSync'; export const Preloader = () => { const { t } = useTranslation('pages'); const { + network, networkData: { units, unit }, } = useNetwork(); const { bondedPools } = useBondedPools(); @@ -36,7 +37,7 @@ export const Preloader = () => { .decimalPlaces(0) .toFormat(); - const title = `Join ${new BigNumber(counterForPoolMembers).toFormat()} other pool members staking a total of ${totalPoolPointsUnit} ${unit}.`; + const title = `Join ${new BigNumber(counterForPoolMembers).toFormat()} other pool members staking a total of ${totalPoolPointsUnit} ${unit} on ${capitalizeFirstLetter(network)}.`; return ( <> @@ -97,7 +98,7 @@ export const Preloader = () => {

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

-

+

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 9fdc7496e3..92c3a43124 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -58,6 +58,14 @@ export const JoinPoolInterfaceWrapper = styled.div` display: flex; align-items: center; justify-content: center; + + &.progress { + margin-top: 1rem; + + > .counter { + font-family: InterSemiBold, sans-serif; + } + } } } `; From 59db726a204bd53b9ac69875511500bd84d95bdc Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 17:59:05 +0700 Subject: [PATCH 3/7] add locale --- src/canvas/JoinPool/Preloader.tsx | 11 ++++++++--- src/locale/cn/pages.json | 1 + src/locale/en/pages.json | 1 + 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx index 5106a87c17..df1d5b44c4 100644 --- a/src/canvas/JoinPool/Preloader.tsx +++ b/src/canvas/JoinPool/Preloader.tsx @@ -37,8 +37,6 @@ export const Preloader = () => { .decimalPlaces(0) .toFormat(); - const title = `Join ${new BigNumber(counterForPoolMembers).toFormat()} other pool members staking a total of ${totalPoolPointsUnit} ${unit} on ${capitalizeFirstLetter(network)}.`; - return ( <>
@@ -58,7 +56,14 @@ export const Preloader = () => {

Join Pool

-

{title}

+

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

diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json index 8745641b97..3a369b095e 100644 --- a/src/locale/cn/pages.json +++ b/src/locale/cn/pages.json @@ -137,6 +137,7 @@ "bondedFunds": "己质押金额", "bouncer": "守护人", "browseMembers": "浏览成员", + "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", "cancel": "取消", "closePool": "可提取己解锁金额并关闭池", "compound": "复利", diff --git a/src/locale/en/pages.json b/src/locale/en/pages.json index eae84374ad..cc03807d4c 100644 --- a/src/locale/en/pages.json +++ b/src/locale/en/pages.json @@ -139,6 +139,7 @@ "bondedFunds": "Bonded Funds", "bouncer": "Bouncer", "browseMembers": "Browse Members", + "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", "cancel": "Cancel", "closePool": "You can now withdraw and close the pool.", "compound": "Compound", From 3f334b55c0c0d6b120c95008eccb0805b54bafec Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 17:59:37 +0700 Subject: [PATCH 4/7] styling --- src/canvas/JoinPool/Wrappers.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 92c3a43124..8e9dd64d7c 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -61,10 +61,6 @@ export const JoinPoolInterfaceWrapper = styled.div` &.progress { margin-top: 1rem; - - > .counter { - font-family: InterSemiBold, sans-serif; - } } } } From 04e8c5a5ffdb5c678d51c27360c097ca47ebe4dc Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 18:00:47 +0700 Subject: [PATCH 5/7] locale --- src/canvas/JoinPool/Preloader.tsx | 2 +- src/locale/cn/pages.json | 2 +- src/locale/en/pages.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx index df1d5b44c4..cc085675be 100644 --- a/src/canvas/JoinPool/Preloader.tsx +++ b/src/canvas/JoinPool/Preloader.tsx @@ -53,7 +53,7 @@ export const Preloader = () => {
-

Join Pool

+

{t('pools.joinPool')}

diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json index 3a369b095e..c23a9a7cd7 100644 --- a/src/locale/cn/pages.json +++ b/src/locale/cn/pages.json @@ -137,7 +137,6 @@ "bondedFunds": "己质押金额", "bouncer": "守护人", "browseMembers": "浏览成员", - "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", "cancel": "取消", "closePool": "可提取己解锁金额并关闭池", "compound": "复利", @@ -155,6 +154,7 @@ "inPool": "提名池中", "inactivePoolNotNominating": "非活跃：提名池未提名任何验证人", "joinPool": "加入提名池", + "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", "leave": "离开", "leavingPool": "离开提名池中", "leftThePool": "所有成员已离开", diff --git a/src/locale/en/pages.json b/src/locale/en/pages.json index cc03807d4c..211f72d6ca 100644 --- a/src/locale/en/pages.json +++ b/src/locale/en/pages.json @@ -139,7 +139,6 @@ "bondedFunds": "Bonded Funds", "bouncer": "Bouncer", "browseMembers": "Browse Members", - "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", "cancel": "Cancel", "closePool": "You can now withdraw and close the pool.", "compound": "Compound", @@ -157,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", From 6d2d874214307bc4b17da9b0c4f0445ca16799fe Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 18:10:45 +0700 Subject: [PATCH 6/7] polish --- src/canvas/JoinPool/Preloader.tsx | 9 ++------- src/canvas/JoinPool/Wrappers.ts | 8 ++------ src/library/Loader/Wrappers.ts | 4 ++-- 3 files changed, 6 insertions(+), 15 deletions(-) diff --git a/src/canvas/JoinPool/Preloader.tsx b/src/canvas/JoinPool/Preloader.tsx index cc085675be..27824af378 100644 --- a/src/canvas/JoinPool/Preloader.tsx +++ b/src/canvas/JoinPool/Preloader.tsx @@ -5,8 +5,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons'; import { ButtonPrimary } from 'kits/Buttons/ButtonPrimary'; import { useOverlay } from 'kits/Overlay/Provider'; import { useTranslation } from 'react-i18next'; -import { JoinPoolInterfaceWrapper, PreloaderWrapper } from './Wrappers'; -import { CallToActionLoader } from 'library/Loader/CallToAction'; +import { JoinPoolInterfaceWrapper } from './Wrappers'; import { PageTitleTabs } from 'kits/Structure/PageTitleTabs'; import { CanvasTitleWrapper } from 'canvas/Wrappers'; import { useBondedPools } from 'contexts/Pools/BondedPools'; @@ -96,14 +95,10 @@ export const Preloader = () => {
- - - -

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

-

+

diff --git a/src/canvas/JoinPool/Wrappers.ts b/src/canvas/JoinPool/Wrappers.ts index 8e9dd64d7c..b9cef2e3db 100644 --- a/src/canvas/JoinPool/Wrappers.ts +++ b/src/canvas/JoinPool/Wrappers.ts @@ -53,15 +53,11 @@ export const JoinPoolInterfaceWrapper = styled.div` > .tip { color: var(--accent-color-primary); - margin-top: 1.5rem; + margin-top: 1rem; font-family: Inter, sans-serif; display: flex; align-items: center; justify-content: center; - - &.progress { - margin-top: 1rem; - } } } `; @@ -69,7 +65,7 @@ export const JoinPoolInterfaceWrapper = styled.div` 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; } From 1add279cd51380bd6dc2182f9baf5a616fc1d70e Mon Sep 17 00:00:00 2001 From: Ross Bulat Date: Fri, 5 Apr 2024 19:00:51 +0700 Subject: [PATCH 7/7] Update src/locale/cn/pages.json Co-authored-by: Ting A Lin --- src/locale/cn/pages.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locale/cn/pages.json b/src/locale/cn/pages.json index c23a9a7cd7..09dae46e41 100644 --- a/src/locale/cn/pages.json +++ b/src/locale/cn/pages.json @@ -154,7 +154,7 @@ "inPool": "提名池中", "inactivePoolNotNominating": "非活跃：提名池未提名任何验证人", "joinPool": "加入提名池", - "joinPoolHeading": "Join {{totalMembers}} pool members staking a total of {{totalPoolPoints}} {{unit}} on {{network}}.", + "joinPoolHeading": " {{totalMembers}} 个提名池成员在{{network}}上抵押共{{totalPoolPoints}} 个{{unit}} ", "leave": "离开", "leavingPool": "离开提名池中", "leftThePool": "所有成员已离开",