Basic optimizations (#432)

* Basic optimizations

* CHANGELOG

CHANGELOG.md

@@ -7,6 +7,7 @@ Contributed:
 - Include Subsocial ss58 (Thanks to https://github.com/F3Joule)
 - Add Crab network (Thanks to https://github.com/WoeOm)
 - README updates (Thanks to https://github.com/Noc2)
+- Runtime checks for web3Enable params (Thanks to https://github.com/Tbaut)
 
 Changes:
 
@@ -18,7 +19,8 @@ Changes:
 - Handling signing rejections (any order) transparently
 - Small overall UI and use adjustments
 - Latest upstream polkadot-js dependencies
-- Prepare for i18n translations with setup of key -> key
+- Prepare for i18n translations with initial i18next setup
+- Rendering optimizations for Extrinsic displays
 
 
 ## 0.32.1 Jul 27, 2020

packages/extension-ui/src/Popup/Signing/Extrinsic.tsx

@@ -7,7 +7,7 @@ import { Call, ExtrinsicEra, ExtrinsicPayload } from '@polkadot/types/interfaces
 import { AnyJson, SignerPayloadJSON } from '@polkadot/types/types';
 
 import BN from 'bn.js';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { TFunction } from 'i18next';
 import { formatNumber, bnToBn } from '@polkadot/util';
 
@@ -104,11 +104,11 @@ function Extrinsic ({ className, isDecoded, payload: { era, nonce, tip }, reques
   const { t } = useTranslation();
   const chain = useMetadata(genesisHash);
   const specVersion = useRef(bnToBn(hexSpec)).current;
-  const [decoded, setDecoded] = useState<Decoded>({ args: null, method: null });
 
-  useEffect((): void => {
-    setDecoded(decodeMethod(method, isDecoded, chain, specVersion));
-  }, [method, isDecoded, chain, specVersion]);
+  const decoded = useMemo(
+    () => decodeMethod(method, isDecoded, chain, specVersion),
+    [method, isDecoded, chain, specVersion]
+  );
 
   return (
     <Table

packages/extension-ui/src/Popup/Signing/Qr.tsx

@@ -5,7 +5,7 @@
 import { ExtrinsicPayload } from '@polkadot/types/interfaces';
 import { SignerPayloadJSON } from '@polkadot/types/types';
 
-import React, { useState, useEffect } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { QrDisplayPayload, QrScanSignature } from '@polkadot/react-qr';
 
@@ -25,11 +25,16 @@ const CMD_MORTAL = 2;
 function Qr ({ className, onSignature, payload, request }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [isScanning, setIsScanning] = useState(false);
-  const [payloadU8a, setPayloadU8a] = useState(new Uint8Array());
 
-  useEffect((): void => setPayloadU8a(payload.toU8a()), [payload]);
+  const payloadU8a = useMemo(
+    () => payload.toU8a(),
+    [payload]
+  );
 
-  const _onShowQr = (): void => setIsScanning(true);
+  const _onShowQr = useCallback(
+    () => setIsScanning(true),
+    []
+  );
 
   return (
     <div className={className}>