From 4fafc27cc3f4ba3506da770ce832bbed65cfb70f Mon Sep 17 00:00:00 2001 From: thib Date: Wed, 13 May 2020 18:12:11 +0200 Subject: [PATCH 1/5] prevent crash for older chains --- packages/apps/src/overlays/Attest.tsx | 22 +++++++++++++++++++--- packages/page-claims/src/index.tsx | 4 +--- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx index 51130aa7203f..8ef62604e661 100644 --- a/packages/apps/src/overlays/Attest.tsx +++ b/packages/apps/src/overlays/Attest.tsx @@ -2,10 +2,11 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import React from 'react'; -import { useApi, useAccounts, useCall } from '@polkadot/react-hooks'; +import React, { useEffect, useState } from 'react'; +import { useApi, useAccounts } from '@polkadot/react-hooks'; import { Option } from '@polkadot/types'; import { EthereumAddress } from '@polkadot/types/interfaces'; + import { Link } from 'react-router-dom'; import { useTranslation } from '../translate'; @@ -19,12 +20,27 @@ function Attest ({ className }: Props): React.ReactElement | null { const { t } = useTranslation(); const { allAccounts } = useAccounts(); const { api } = useApi(); + const [isOldClaimProcess, setIsOldClaimProcess] = useState(true); + const [needAttest, setNeedAttest] = useState[]>([]); + + useEffect(() => { + if (typeof api.query.claims.preclaims !== undefined) { + setIsOldClaimProcess(false); + } + }, [api]); // 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 needAttest = useCall<[Option]>(api.query.claims?.preclaims.multi, [allAccounts])?.filter((opt) => opt.isSome); + useEffect(() => { + if (!isOldClaimProcess) { + api.query.claims.preclaims.multi>([allAccounts]) + .then((options) => { + setNeedAttest(options.filter((opt) => opt.isSome)); + }); + } + }); if (!needAttest?.length) { return null; diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index aecfcd92a8f6..fa5635593ed9 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -83,9 +83,7 @@ const ClaimsApp = (props: Props): React.ReactElement => { if (isApiReady && typeof api.query.claims.claimAttest !== undefined) { setIsOldClaimProcess(false); } - - console.log('isOldclaimProcess', isOldClaimProcess); - }, [api, isApiReady, isOldClaimProcess]); + }, [api, isApiReady]); useEffect(() => { if (didCopy) { From 29f97a639d7b5fec34ab6740654c99b8fed9f969 Mon Sep 17 00:00:00 2001 From: thib Date: Wed, 13 May 2020 18:31:32 +0200 Subject: [PATCH 2/5] with useEffect --- packages/apps/src/overlays/Attest.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx index 8ef62604e661..d54b5568a367 100644 --- a/packages/apps/src/overlays/Attest.tsx +++ b/packages/apps/src/overlays/Attest.tsx @@ -24,7 +24,7 @@ function Attest ({ className }: Props): React.ReactElement | null { const [needAttest, setNeedAttest] = useState[]>([]); useEffect(() => { - if (typeof api.query.claims.preclaims !== undefined) { + if (typeof api.query?.claims?.preclaims !== undefined) { setIsOldClaimProcess(false); } }, [api]); From 6936e0618065e001d936895abc22be897bc34c7c Mon Sep 17 00:00:00 2001 From: thib Date: Wed, 13 May 2020 19:01:34 +0200 Subject: [PATCH 3/5] should work --- packages/apps/src/overlays/Attest.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx index d54b5568a367..0005ec566f3a 100644 --- a/packages/apps/src/overlays/Attest.tsx +++ b/packages/apps/src/overlays/Attest.tsx @@ -19,15 +19,15 @@ interface Props { function Attest ({ className }: Props): React.ReactElement | null { const { t } = useTranslation(); const { allAccounts } = useAccounts(); - const { api } = useApi(); + const { api, isApiReady } = useApi(); const [isOldClaimProcess, setIsOldClaimProcess] = useState(true); const [needAttest, setNeedAttest] = useState[]>([]); useEffect(() => { - if (typeof api.query?.claims?.preclaims !== undefined) { + if (isApiReady && typeof api.query?.claims?.preclaims !== 'undefined') { setIsOldClaimProcess(false); } - }, [api]); + }, [api, isApiReady]); // Find accounts that need attest. They are accounts that // - already preclaimed, @@ -35,12 +35,12 @@ function Attest ({ className }: Props): React.ReactElement | null { // `claims.preclaims` returns Some() for these accounts. useEffect(() => { if (!isOldClaimProcess) { - api.query.claims.preclaims.multi>([allAccounts]) + api.query.claims.preclaims.multi>(allAccounts) .then((options) => { setNeedAttest(options.filter((opt) => opt.isSome)); }); } - }); + }, [allAccounts, isOldClaimProcess]); if (!needAttest?.length) { return null; From 4babb6d3f499ee19e90dafce7598b55fa2af52a9 Mon Sep 17 00:00:00 2001 From: thib Date: Wed, 13 May 2020 19:41:36 +0200 Subject: [PATCH 4/5] back to something simple --- packages/apps/src/overlays/Attest.tsx | 23 ++++------------------- 1 file changed, 4 insertions(+), 19 deletions(-) diff --git a/packages/apps/src/overlays/Attest.tsx b/packages/apps/src/overlays/Attest.tsx index 0005ec566f3a..abacf1471f83 100644 --- a/packages/apps/src/overlays/Attest.tsx +++ b/packages/apps/src/overlays/Attest.tsx @@ -2,8 +2,8 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import React, { useEffect, useState } from 'react'; -import { useApi, useAccounts } from '@polkadot/react-hooks'; +import React from 'react'; +import { useApi, useAccounts, useCall } from '@polkadot/react-hooks'; import { Option } from '@polkadot/types'; import { EthereumAddress } from '@polkadot/types/interfaces'; @@ -19,28 +19,13 @@ interface Props { function Attest ({ className }: Props): React.ReactElement | null { const { t } = useTranslation(); const { allAccounts } = useAccounts(); - const { api, isApiReady } = useApi(); - const [isOldClaimProcess, setIsOldClaimProcess] = useState(true); - const [needAttest, setNeedAttest] = useState[]>([]); - - useEffect(() => { - if (isApiReady && typeof api.query?.claims?.preclaims !== 'undefined') { - setIsOldClaimProcess(false); - } - }, [api, isApiReady]); + const { api } = useApi(); // Find accounts that need attest. They are accounts that // - already preclaimed, // - didn't sign the attest yet. // `claims.preclaims` returns Some() for these accounts. - useEffect(() => { - if (!isOldClaimProcess) { - api.query.claims.preclaims.multi>(allAccounts) - .then((options) => { - setNeedAttest(options.filter((opt) => opt.isSome)); - }); - } - }, [allAccounts, isOldClaimProcess]); + const needAttest = useCall<[Option]>(api.query?.claims?.preclaims?.multi, [allAccounts])?.filter((opt) => opt.isSome); if (!needAttest?.length) { return null; From 5527a5f2b43388d16404c6e3f9961df3eb38b3cc Mon Sep 17 00:00:00 2001 From: thib Date: Wed, 13 May 2020 19:50:38 +0200 Subject: [PATCH 5/5] remove hoc --- packages/page-claims/src/index.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/page-claims/src/index.tsx b/packages/page-claims/src/index.tsx index 82c19de8af94..cfa6e1906f5d 100644 --- a/packages/page-claims/src/index.tsx +++ b/packages/page-claims/src/index.tsx @@ -11,7 +11,6 @@ import React, { useState, useCallback, useEffect } from 'react'; import { Trans } from 'react-i18next'; import styled from 'styled-components'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { withApi, withMulti } from '@polkadot/react-api/hoc'; import { Button, Card, Columar, Column, InputAddress, Tooltip } from '@polkadot/react-components'; import { TokenUnit } from '@polkadot/react-components/InputNumber'; import { u8aToHex, u8aToString } from '@polkadot/util'; @@ -20,7 +19,7 @@ import { decodeAddress } from '@polkadot/util-crypto'; import AttestDisplay from './Attest'; import ClaimDisplay from './Claim'; import { recoverFromJSON } from './util'; -import translate, { useTranslation } from './translate'; +import { useTranslation } from './translate'; import { useApi } from '@polkadot/react-hooks'; @@ -229,8 +228,4 @@ const ClaimsApp = (props: Props): React.ReactElement => { ); }; -export default withMulti( - ClaimsApp, - translate, - withApi -); +export default ClaimsApp;