Show zero claimable & no statement errors (#6179)

* Show zero claimable & no statement errors

* Adjust

packages/page-claims/src/Attest.tsx

@@ -1,16 +1,18 @@
 // Copyright 2017-2021 @polkadot/app-claims authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { TxCallback } from '@polkadot/react-components/Status/types';
 import type { Option } from '@polkadot/types';
 import type { BalanceOf, EthereumAddress, StatementKind } from '@polkadot/types/interfaces';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import { Button, Card, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
+import { BN_ZERO } from '@polkadot/util';
 
 import { ClaimStyles } from './Claim';
 import Statement from './Statement';
@@ -30,7 +32,7 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
   const accounts = useAccounts();
   const { t } = useTranslation();
   const { api } = useApi();
-  const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
+  const [claimValue, setClaimValue] = useState<BN | null>(null);
   const [isBusy, setIsBusy] = useState(false);
 
   useEffect((): void => {
@@ -43,24 +45,46 @@ function Attest ({ accountId, className, ethereumAddress, onSuccess, statementKi
     api.query.claims
       .claims<Option<BalanceOf>>(ethereumAddress)
       .then((claim): void => {
-        setClaimValue(claim.unwrapOr(null));
+        setClaimValue(claim.unwrapOr(BN_ZERO));
         setIsBusy(false);
       })
-      .catch((): void => setIsBusy(false));
+      .catch((error): void => {
+        console.error(error);
+
+        setIsBusy(false);
+      });
   }, [api, ethereumAddress]);
 
-  if (isBusy) {
+  const statementSentence = useMemo(
+    () => getStatement(systemChain, statementKind)?.sentence,
+    [systemChain, statementKind]
+  );
+
+  if (isBusy || !claimValue) {
     return null;
   }
 
-  const hasClaim = claimValue && claimValue.gten(0);
-  const statementSentence = getStatement(systemChain, statementKind)?.sentence;
+  const noClaim = claimValue.isZero();
 
-  if (!hasClaim || !statementSentence) {
-    return null;
+  if (noClaim || !statementSentence) {
+    return (
+      <Card isError>
+        <div className={className}>
+          {noClaim && (
+            <p>{t<string>('There is no on-chain claimable balance associated with the Ethereum account {{ethereumAddress}}', {
+              replace: { ethereumAddress }
+            })}</p>
+          )}
+          {!statementSentence && (
+            <p>{t<string>('There is no on-chain attestation statement associated with the Ethereum account {{ethereumAddress}}', {
+              replace: { ethereumAddress }
+            })}</p>
+          )}
+        </div>
+      </Card>
+    );
   }
 
-  // Attesting is impossible if the account is not owned.
   if (!accounts.isAccount(accountId)) {
     return (
       <Card isError>

packages/page-claims/src/Claim.tsx

@@ -1,6 +1,7 @@
 // Copyright 2017-2021 @polkadot/app-claims authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type BN from 'bn.js';
 import type { ApiPromise } from '@polkadot/api';
 import type { SubmittableExtrinsic } from '@polkadot/api/types';
 import type { TxCallback } from '@polkadot/react-components/Status/types';
@@ -13,6 +14,7 @@ import styled from 'styled-components';
 import { Button, Card, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
+import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from './translate';
 import { addrToChecksum, getStatement } from './util';
@@ -48,7 +50,7 @@ function constructTx (api: ApiPromise, systemChain: string, accountId: string, e
 function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature, isOldClaimProcess, onSuccess, statementKind }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api, systemChain } = useApi();
-  const [claimValue, setClaimValue] = useState<BalanceOf | null>(null);
+  const [claimValue, setClaimValue] = useState<BN | null>(null);
   const [isBusy, setIsBusy] = useState(false);
 
   useEffect((): void => {
@@ -61,22 +63,26 @@ function Claim ({ accountId, className = '', ethereumAddress, ethereumSignature,
     api.query.claims
       .claims<Option<BalanceOf>>(ethereumAddress)
       .then((claim): void => {
-        setClaimValue(claim.unwrapOr(null));
+        setClaimValue(claim.unwrapOr(BN_ZERO));
         setIsBusy(false);
       })
-      .catch((): void => setIsBusy(false));
+      .catch((error): void => {
+        console.error(error);
+
+        setIsBusy(false);
+      });
   }, [api, ethereumAddress]);
 
-  if (!ethereumAddress || isBusy) {
+  if (!ethereumAddress || isBusy || !claimValue) {
     return null;
   }
 
-  const hasClaim = claimValue && claimValue.gten(0);
+  const hasClaim = claimValue.gt(BN_ZERO);
 
   return (
     <Card
       isError={!hasClaim}
-      isSuccess={!!hasClaim}
+      isSuccess={hasClaim}
     >
       <div className={className}>
         {t<string>('Your Ethereum account')}

packages/page-claims/src/index.tsx

@@ -118,7 +118,11 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
         setEthereumAddress(address);
         setPreclaimEthereumAddress(address);
       })
-      .catch((): void => setPreclaimEthereumAddress(null));
+      .catch((error): void => {
+        console.error(error);
+
+        setPreclaimEthereumAddress(null);
+      });
   }, [accountId, api.query.claims, api.query.claims.preclaims]);
 
   // Old claim process used `api.tx.claims.claim`, and didn't have attest
@@ -166,7 +170,6 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
 
   const onChangeEthereumAddress = useCallback((value: string) => {
     // FIXME We surely need a better check than just a trim
-
     setEthereumAddress(value.trim());
   }, []);
 
@@ -179,7 +182,6 @@ function ClaimsApp ({ basePath }: Props): React.ReactElement<Props> {
   const statementKind = useCall<StatementKind | null>(!isPreclaimed && !isOldClaimProcess && !!ethereumAddress && api.query.claims.signing, [ethereumAddress], transformStatement);
 
   const statementSentence = getStatement(systemChain, statementKind)?.sentence || '';
-
   const prefix = u8aToString(api.consts.claims.prefix.toU8a(true));
   const payload = accountId
     ? `${prefix}${u8aToHex(decodeAddress(accountId), -1, false)}${statementSentence}`