Add warning to claim

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<Props> | 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<EthereumAddress>]>(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 (
+    <Card isError>
+      <div className={className}>
+        {
+          t(
+            'You need to sign an attestation for the following account(s): {{needAttestArray}}',
+            { replace: { needAttestArray } }
+          )
+        }
+      </div>
+    </Card>
+  );
+}
+
+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;
+`);

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 (
     <main>
       <header />
+      {!isOldClaimProcess && <Warning />}
       <h1>
         <Trans>claim your <em>{TokenUnit.abbr}</em> tokens</Trans>
       </h1>