Sanitize parachains app (#3414)

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<string | null>(api.query.parachains.heads, [id], {
     transform: (headData: Option<HeadData>): 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();

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<Option<Bytes>>(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 (
     <Card>
@@ -61,14 +60,11 @@ function Details ({ parachain: { heads, id, info } }: Props): React.ReactElement
         isFull
         label={t<string>('code')}
       >
-        <div
-          className='ui--Static ui selection dropdown'
-          onClick={onDownload}
-        >
+        <div className='ui--Static ui selection dropdown'>
           <IconLink
             icon='download'
             label={t<string>('Download')}
-            onClick={onDownload}
+            onClick={_onDownload}
           />
         </div>
       </Labelled>

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<Props>
   const [paraId, setParaId] = useState<string | BN | null>(null);
   const [remark, setRemark] = useState('');
   const [isParachain, setIsParachain] = useState(true);
-  const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic<'promise'> | 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<Props>
       }
 
       return null;
-    });
-  }, [amount, api, isParachain, paraId, recipientId, remark]);
+    },
+    [amount, api, isParachain, paraId, recipientId, remark]
+  );
 
   const isActionDisabled = !allAccounts.length || (
     api.query.parachains