diff --git a/packages/page-parachains/src/Overview/Parachain.tsx b/packages/page-parachains/src/Overview/Parachain.tsx index e17772f606..c2b03214a4 100644 --- a/packages/page-parachains/src/Overview/Parachain.tsx +++ b/packages/page-parachains/src/Overview/Parachain.tsx @@ -26,13 +26,13 @@ function Parachain ({ className = '', parachain: { didUpdate, id, info, pendingS const { api } = useApi(); const headHex = useCall(api.query.parachains.heads, [id], { transform: (headData: Option): string | null => { - if (headData.isNone) { - return null; + if (headData.isSome) { + const hex = headData.unwrap().toHex(); + + return `${hex.slice(0, 10)}…${hex.slice(-8)}`; } - const hex = headData.unwrap().toHex(); - - return `${hex.slice(0, 10)}…${hex.slice(-8)}`; + return null; } }); const history = useHistory(); diff --git a/packages/page-parachains/src/Parachain/Details.tsx b/packages/page-parachains/src/Parachain/Details.tsx index 68372f77e9..a95dfaa45d 100644 --- a/packages/page-parachains/src/Parachain/Details.tsx +++ b/packages/page-parachains/src/Parachain/Details.tsx @@ -6,7 +6,7 @@ import { DeriveParachainFull } from '@polkadot/api-derive/types'; import { Bytes, Option } from '@polkadot/types'; import FileSaver from 'file-saver'; -import React from 'react'; +import React, { useCallback } from 'react'; import { Card, IconLink, Labelled, Output, Static } from '@polkadot/react-components'; import { useApi } from '@polkadot/react-hooks'; @@ -21,8 +21,8 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement const { t } = useTranslation(); const { api } = useApi(); - const onDownload = (): void => { - try { + const _onDownload = useCallback( + (): void => { api.query.parachains .code>(id) .then((code) => { @@ -33,10 +33,9 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement } }) .catch(console.error); - } catch (error) { - console.error(error); - } - }; + }, + [api, id, info, t] + ); return ( @@ -61,14 +60,11 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement isFull label={t('code')} > -
+
('Download')} - onClick={onDownload} + onClick={_onDownload} />
diff --git a/packages/page-parachains/src/Transfer.tsx b/packages/page-parachains/src/Transfer.tsx index df0d0491f3..f5429a88b1 100644 --- a/packages/page-parachains/src/Transfer.tsx +++ b/packages/page-parachains/src/Transfer.tsx @@ -6,7 +6,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/types'; import { DeriveParachain } from '@polkadot/api-derive/types'; import BN from 'bn.js'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import styled from 'styled-components'; import { Button, Dropdown, Input, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components'; import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks'; @@ -30,14 +30,13 @@ function Transfer ({ className, parachains }: Props): React.ReactElement const [paraId, setParaId] = useState(null); const [remark, setRemark] = useState(''); const [isParachain, setIsParachain] = useState(true); - const [extrinsic, setExtrinsic] = useState | null>(null); const idOptions = useMemo((): { text: string, value: string }[] => { return (parachains || []).map(({ id }) => ({ text: id.toString(), value: id.toString() })); }, [parachains]); - useEffect((): void => { - setExtrinsic((): SubmittableExtrinsic<'promise'> | null => { + const extrinsic = useMemo( + (): SubmittableExtrinsic<'promise'> | null => { if (amount?.gtn(0)) { if (api.query.parachainUpgrade) { return recipientId @@ -51,8 +50,9 @@ function Transfer ({ className, parachains }: Props): React.ReactElement } return null; - }); - }, [amount, api, isParachain, paraId, recipientId, remark]); + }, + [amount, api, isParachain, paraId, recipientId, remark] + ); const isActionDisabled = !allAccounts.length || ( api.query.parachains