diff --git a/packages/page-claims/src/Warning.tsx b/packages/page-claims/src/Warning.tsx new file mode 100644 index 000000000000..f965d9fac934 --- /dev/null +++ b/packages/page-claims/src/Warning.tsx @@ -0,0 +1,67 @@ +// Copyright 2017-2020 @polkadot/app-claims authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +// Copyright 2017-2020 @polkadot/app-settings authors & contributors +// This software may be modified and distributed under the terms +// of the Apache-2.0 license. See the LICENSE file for details. + +import { Option } from '@polkadot/types'; +import { EthereumAddress } from '@polkadot/types/interfaces'; +import { useAccounts, useApi, useCall } from '@polkadot/react-hooks'; +import { Card } from '@polkadot/react-components'; + +import React from 'react'; +import styled from 'styled-components'; + +import { useTranslation } from './translate'; + +export interface Props{ + className?: string; +} + +function Warning ({ className }: Props): React.ReactElement | null { + const { allAccounts } = useAccounts(); + const { api, isApiReady } = useApi(); + const { t } = useTranslation(); + + // Find accounts that need attest. They are accounts that + // - already preclaimed, + // - didn't sign the attest yet. + // `claims.preclaims` returns Some() for these accounts. + const preclaimsArray = useCall<[Option]>(isApiReady && api.query.claims?.preclaims?.multi, [allAccounts]) || []; + const needAttestArray: string [] = []; + + preclaimsArray.forEach((opt, index) => { + if (opt.isSome) { + needAttestArray.push(allAccounts[index]); + } + }); + + if (!needAttestArray || !needAttestArray.length) { + return null; + } + + return ( + +
+ { + t( + 'You need to sign an attestation for the following account(s): {{needAttestArray}}', + { replace: { needAttestArray } } + ) + } +
+
+ ); +} + +export default React.memo(styled(Warning)` + font-size: 1.15rem; + display: flex; + flex-direction: column; + justify-content: center; + min-height: 8rem; + align-items: center; + margin: 0 1rem; +`); diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index d4168fb4fde5..82b60aa4de71 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -10,6 +10,7 @@ import { Trans } from 'react-i18next'; import styled from 'styled-components'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Button, Card, Columar, Column, InputAddress, Tooltip, Input } from '@polkadot/react-components'; +import { useApi, useCall } from '@polkadot/react-hooks'; import { TokenUnit } from '@polkadot/react-components/InputNumber'; import { u8aToHex, u8aToString } from '@polkadot/util'; import { decodeAddress } from '@polkadot/util-crypto'; @@ -18,8 +19,7 @@ import AttestDisplay from './Attest'; import ClaimDisplay from './Claim'; import { recoverFromJSON } from './util'; import { useTranslation } from './translate'; - -import { useApi, useCall } from '@polkadot/react-hooks'; +import Warning from './Warning'; export { default as useCounter } from './useCounter'; @@ -146,6 +146,7 @@ function ClaimsApp (): React.ReactElement { return (
+ {!isOldClaimProcess && }

claim your {TokenUnit.abbr} tokens