Filter attestations based on claims/vesting (#3151)

packages/page-claims/src/Warning.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { useTranslation } from './translate';
-import usePreclaimPolkadotAddresses from './usePreclaimPolkadotAddresses';
+import usePolkadotPreclaims from './usePolkadotPreclaims';
 
 export interface Props{
   className?: string;
@@ -16,9 +16,9 @@ export interface Props{
 
 function Warning ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
-  const needsAttestArray = usePreclaimPolkadotAddresses();
+  const needsAttest = usePolkadotPreclaims();
 
-  if (!needsAttestArray || !needsAttestArray.length) {
+  if (!needsAttest.length) {
     return null;
   }
 
@@ -26,11 +26,11 @@ function Warning ({ className }: Props): React.ReactElement<Props> | null {
     <Card isError>
       <div className={className}>
         {
-          needsAttestArray.length > 1
+          needsAttest.length > 1
             ? t('You need to sign an attestation for the following accounts:')
             : t('You need to sign an attestation for the following account:')
         }{
-          needsAttestArray.map((address) => (
+          needsAttest.map((address) => (
             <AddressMini
               key={address}
               value={address}

packages/page-claims/src/useCounter.ts

@@ -2,10 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import usePreclaimPolkadotAddresses from './usePreclaimPolkadotAddresses';
+import usePolkadotPreclaims from './usePolkadotPreclaims';
 
 export default function useCounter (): number {
-  const needAttest = usePreclaimPolkadotAddresses();
+  const needAttest = usePolkadotPreclaims();
 
-  return needAttest ? needAttest.length : 0;
+  return needAttest.length;
 }

packages/page-claims/src/usePolkadotPreclaims.ts

@@ -0,0 +1,50 @@
+// 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 { QueryableStorageEntry } from '@polkadot/api/types';
+import { Codec } from '@polkadot/types/types';
+import { EthereumAddress } from '@polkadot/types/interfaces';
+
+import { useEffect, useState } from 'react';
+import { useAccounts, useApi, useCall, useIsMountedRef } from '@polkadot/react-hooks';
+import { Option } from '@polkadot/types';
+
+export default function usePolkadotPreclaims (): string[] {
+  const { allAccounts } = useAccounts();
+  const { api } = useApi();
+  const mountedRef = useIsMountedRef();
+  const [needsAttest, setNeedsAttest] = useState<string[]>([]);
+
+  // find all own preclaims
+  const preclaims = useCall<[string, EthereumAddress][]>(api.query.claims?.preclaims?.multi, [allAccounts], {
+    transform: (preclaims: Option<EthereumAddress>[]) =>
+      preclaims
+        .map((opt, index): [string, Option<EthereumAddress>] => [allAccounts[index], opt])
+        .filter(([, opt]) => opt.isSome)
+        .map(([address, opt]) => [address, opt.unwrap()])
+  });
+
+  // Filter the accounts that need attest. They are accounts that
+  // - already preclaimed
+  // - has a balance, either vested or normal
+  useEffect((): void => {
+    preclaims && api.queryMulti(
+      preclaims.reduce((result: [QueryableStorageEntry<'promise'>, EthereumAddress][], [, ethAddr]) =>
+        result.concat([
+          [api.query.claims.claims, ethAddr],
+          [api.query.claims.vesting, ethAddr]
+        ]),
+      []), (opts: Option<Codec>[]): void => {
+        // filter the cases where either claims or vesting has a value
+        mountedRef.current && setNeedsAttest(
+          preclaims
+            .filter((_, index) => opts[index * 2].isSome || opts[(index * 2) + 1].isSome)
+            .map(([address]) => address)
+        );
+      }
+    );
+  }, [api, allAccounts, mountedRef, preclaims]);
+
+  return needsAttest;
+}

packages/page-claims/src/usePreclaimPolkadotAddresses.ts

@@ -1,27 +0,0 @@
-// 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';
-
-export default function usePreclaimPolkadotAddresses (): string[] {
-  const { allAccounts } = useAccounts();
-  const { api } = useApi();
-
-  // Find accounts that need attest. They are accounts that
-  // - already preclaimed,
-  // - didn't sign the attest yet.
-  // `claims.preclaims` returns the ethereum address for these accounts.
-  const needAttest = useCall<string[]>(api.query.claims?.preclaims?.multi, [allAccounts], {
-    transform: (preclaims: Option<EthereumAddress>[]) =>
-      preclaims
-        .map((opt, index): [boolean, string] => [opt.isSome, allAccounts[index]])
-        .filter(([isSome]) => isSome)
-        .map(([, address]) => address)
-  });
-
-  return needAttest || [];
-}