Some additional functional wrappers (#292)

packages/react-identicon/src/Identicon.tsx

@@ -60,7 +60,7 @@ const Wrapper = styled.div`
   }
 `;
 
-export default class IdentityIcon extends React.PureComponent<Props, State> {
+class BaseIcon extends React.PureComponent<Props, State> {
   public state: State = {
     address: '',
     publicKey: '0x'
@@ -69,10 +69,10 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
   private static prefix?: Prefix = undefined;
 
   public static setDefaultPrefix (prefix: Prefix): void {
-    IdentityIcon.prefix = prefix;
+    BaseIcon.prefix = prefix;
   }
 
-  public static getDerivedStateFromProps ({ prefix = IdentityIcon.prefix, value }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, value }: Props, prevState: State): State | null {
     try {
       const address = isU8a(value) || isHex(value)
         ? encodeAddress(value, prefix)
@@ -140,3 +140,9 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     }
   }
 }
+
+function Identicon (props: Props): React.ReactElement<Props> {
+  return <BaseIcon {...props} />;
+}
+
+export default React.memo(Identicon);

packages/react-qr/src/DisplayAddress.tsx

@@ -4,8 +4,7 @@
 
 import { BaseProps } from './types';
 
-import React from 'react';
-import { xxhashAsHex } from '@polkadot/util-crypto';
+import React, { useEffect, useState } from 'react';
 
 import { createAddressPayload } from './util';
 import QrDisplay from './Display';
@@ -15,44 +14,26 @@ interface Props extends BaseProps {
   genesisHash: string;
 }
 
-interface State {
-  data: Uint8Array | null;
-  dataHash: string | null;
-}
+function DisplayExtrinsic ({ address, className, genesisHash, size, style }: Props): React.ReactElement<Props> | null {
+  const [data, setData] = useState<Uint8Array | null>(null);
 
-export default class DisplayExtrinsic extends React.PureComponent<Props, State> {
-  public state: State = {
-    data: null,
-    dataHash: null
-  };
+  useEffect((): void => {
+    setData(createAddressPayload(address, genesisHash));
+  }, [address, genesisHash]);
 
-  public static getDerivedStateFromProps ({ address, genesisHash }: Props, prevState: State): State | null {
-    const data = createAddressPayload(address, genesisHash);
-    const dataHash = xxhashAsHex(data);
-
-    if (dataHash === prevState.dataHash) {
-      return null;
-    }
-
-    return { data, dataHash };
+  if (!data) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-    const { data } = this.state;
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <QrDisplay
-        className={className}
-        skipEncoding={true}
-        size={size}
-        style={style}
-        value={data}
-      />
-    );
-  }
+  return (
+    <QrDisplay
+      className={className}
+      skipEncoding={true}
+      size={size}
+      style={style}
+      value={data}
+    />
+  );
 }
+
+export default React.memo(DisplayExtrinsic);

packages/react-qr/src/DisplayPayload.tsx

@@ -4,8 +4,7 @@
 
 import { BaseProps } from './types';
 
-import React from 'react';
-import { xxhashAsHex } from '@polkadot/util-crypto';
+import React, { useEffect, useState } from 'react';
 
 import { createSignPayload } from './util';
 import QrDisplay from './Display';
@@ -16,43 +15,25 @@ interface Props extends BaseProps {
   payload: Uint8Array;
 }
 
-interface State {
-  data: Uint8Array | null;
-  dataHash: string | null;
-}
+function DisplayPayload ({ address, className, cmd, payload, size, style }: Props): React.ReactElement<Props> | null {
+  const [data, setData] = useState<Uint8Array | null>(null);
 
-export default class DisplayPayload extends React.PureComponent<Props, State> {
-  public state: State = {
-    data: null,
-    dataHash: null
-  };
+  useEffect((): void => {
+    setData(createSignPayload(address, cmd, payload));
+  }, [address, cmd, payload]);
 
-  public static getDerivedStateFromProps ({ address, cmd, payload }: Props, prevState: State): State | null {
-    const data = createSignPayload(address, cmd, payload);
-    const dataHash = xxhashAsHex(data);
-
-    if (dataHash === prevState.dataHash) {
-      return null;
-    }
-
-    return { data, dataHash };
+  if (!data) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-    const { data } = this.state;
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <QrDisplay
-        className={className}
-        size={size}
-        style={style}
-        value={data}
-      />
-    );
-  }
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      style={style}
+      value={data}
+    />
+  );
 }
+
+export default React.memo(DisplayPayload);