diff --git a/packages/page-staking/src/MarkPoolsWarning.tsx b/packages/page-staking/src/MarkPoolsWarning.tsx new file mode 100644 index 000000000000..8b577c0271bf --- /dev/null +++ b/packages/page-staking/src/MarkPoolsWarning.tsx @@ -0,0 +1,48 @@ +// Copyright 2017-2024 @polkadot/app-staking authors & contributors +// SPDX-License-Identifier: Apache-2.0 + +import React from 'react'; + +import { Icon, styled } from '@polkadot/react-components'; + +interface Props { + children?: React.ReactNode; + className?: string; + withIcon?: boolean; +} + +function MarkPoolsWarning ({ children, className = '', withIcon = true }: Props): React.ReactElement { + return ( + + {withIcon && } + Nomination Pools are evolving! +
+
+ Soon you will be able to participate in a pool and in OpenGov with your pooled funds, and switch pools with the same ease as solo stakers! +
+
+ You do not need to do anything, unless you are participating in a pool and also staking solo from the same account. +
+ In this case, you need to unbond the funds you are staking solo as soon as possible, in order to avail yourself from the automatic migration that will happen, and avoid migrating your pool membership manually. + Please check + + this article + + for more details. + {children} +
+ ); +} + +const StyledArticle = styled.article` + .ui--Icon { + color: rgba(255, 196, 12, 1); + margin-right: 0.5rem; + } +`; + +export default React.memo(MarkPoolsWarning); diff --git a/packages/page-staking/src/index.tsx b/packages/page-staking/src/index.tsx index 1d8454adf07e..be401a1a643c 100644 --- a/packages/page-staking/src/index.tsx +++ b/packages/page-staking/src/index.tsx @@ -24,6 +24,7 @@ import Slashes from './Slashes/index.js'; import Targets from './Targets/index.js'; import Validators from './Validators/index.js'; import { STORE_FAVS_BASE } from './constants.js'; +import MarkPoolsWarning from './MarkPoolsWarning.js'; import { useTranslation } from './translate.js'; import useNominations from './useNominations.js'; import useSortedTargets from './useSortedTargets.js'; @@ -139,6 +140,7 @@ function StakingApp ({ basePath, className = '' }: Props): React.ReactElement +