diff --git a/packages/app-explorer/src/BlockInfo/Extrinsics.tsx b/packages/app-explorer/src/BlockInfo/Extrinsics.tsx
index b492eb0a70..19e5f2e036 100644
--- a/packages/app-explorer/src/BlockInfo/Extrinsics.tsx
+++ b/packages/app-explorer/src/BlockInfo/Extrinsics.tsx
@@ -19,30 +19,28 @@ interface Props extends I18nProps {
   value?: Extrinsic[] | null;
 }
 
-class Extrinsics extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, label, t } = this.props;
-
-    return (
-      <Column
-        className={className}
-        emptyText={t('No pending extrinsics are in the queue')}
-        headerText={label || t('extrinsics')}
-      >
-        {this.renderContent()}
-      </Column>
-    );
+function renderSigner ({ t }: Props, extrinsic: Extrinsic): React.ReactNode {
+  if (!extrinsic.isSigned) {
+    return null;
   }
 
-  private renderContent (): React.ReactNode {
-    const { value = [] } = this.props;
+  return (
+    <div className='explorer--BlockByHash-header'>
+      <div>
+        <AddressMini value={extrinsic.signer} />
+      </div>
+      <div className='explorer--BlockByHash-nonce'>
+        {t('index')} {formatNumber(extrinsic.nonce)}
+      </div>
+    </div>
+  );
+}
 
-    return (value || []).map(this.renderExtrinsic);
-  }
+// FIXME This is _very_ similar to what we have in democracy/Item
+function renderExtrinsic (props: Props): (_: Extrinsic, __: number) => React.ReactNode {
+  const { blockNumber, t } = props;
 
-  // FIXME This is _very_ similar to what we have in democracy/Item
-  private renderExtrinsic = (extrinsic: Extrinsic, index: number): React.ReactNode => {
-    const { blockNumber, t } = this.props;
+  return function ExplorerExtrinsic (extrinsic: Extrinsic, index: number): React.ReactNode {
     const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
     const isMortal = extrinsic.era.isMortalEra;
     let eraEnd;
@@ -61,7 +59,7 @@ class Extrinsics extends React.PureComponent<Props> {
           <h3>
             {section}.{method}&nbsp;(#{formatNumber(index)})
           </h3>
-          {this.renderSigner(extrinsic)}
+          {renderSigner(props, extrinsic)}
         </div>
         <details>
           <summary>{
@@ -95,26 +93,27 @@ class Extrinsics extends React.PureComponent<Props> {
         }
       </article>
     );
-  }
+  };
+}
 
-  private renderSigner (extrinsic: Extrinsic): React.ReactNode {
-    const { t } = this.props;
+function renderContent (props: Props): React.ReactNode {
+  const { value = [] } = props;
 
-    if (!extrinsic.isSigned) {
-      return null;
-    }
+  return (value || []).map(renderExtrinsic(props));
+}
 
-    return (
-      <div className='explorer--BlockByHash-header'>
-        <div>
-          <AddressMini value={extrinsic.signer} />
-        </div>
-        <div className='explorer--BlockByHash-nonce'>
-          {t('index')} {formatNumber(extrinsic.nonce)}
-        </div>
-      </div>
-    );
-  }
+function Extrinsics (props: Props): React.ReactElement<Props> {
+  const { className, label, t } = props;
+
+  return (
+    <Column
+      className={className}
+      emptyText={t('No pending extrinsics are in the queue')}
+      headerText={label || t('extrinsics')}
+    >
+      {renderContent(props)}
+    </Column>
+  );
 }
 
 export default translate(styled(Extrinsics)`
diff --git a/packages/app-explorer/src/BlockInfo/Logs.tsx b/packages/app-explorer/src/BlockInfo/Logs.tsx
index 99ea534124..65ff5bc9e0 100644
--- a/packages/app-explorer/src/BlockInfo/Logs.tsx
+++ b/packages/app-explorer/src/BlockInfo/Logs.tsx
@@ -17,33 +17,87 @@ interface Props extends I18nProps {
   value?: DigestItem[];
 }
 
-class Logs extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { t, value } = this.props;
+function formatU8a (value: U8a): React.ReactNode {
+  return (
+    <Params
+      isDisabled
+      params={[{ type: getTypeDef('Bytes') }]}
+      values={[{ isValid: true, value }]}
+    />
+  );
+}
 
-    if (!value || !value.length) {
-      return null;
-    }
+function formatStruct (struct: Struct): React.ReactNode {
+  const types: Record<string, string> = struct.Type;
+  const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({
+    name,
+    type: getTypeDef(types[name])
+  }));
+  const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({
+    isValid: true,
+    value
+  }));
 
-    return (
-      <Column headerText={t('logs')}>
-        {value.map(this.renderItem)}
-      </Column>
-    );
-  }
+  return (
+    <Params
+      isDisabled
+      params={params}
+      values={values}
+    />
+  );
+}
 
-  private renderItem = (item: DigestItem, index: number): React.ReactNode => {
-    const { t } = this.props;
+function formatTuple (tuple: Tuple): React.ReactNode {
+  const types = tuple.Types;
+  const params = types.map((type): { type: TypeDef } => ({
+    type: getTypeDef(type)
+  }));
+  const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
+    isValid: true,
+    value
+  }));
+
+  return (
+    <Params
+      isDisabled
+      params={params}
+      values={values}
+    />
+  );
+}
+
+function formatVector (vector: Vec<any>): React.ReactNode {
+  const type = getTypeDef(vector.Type);
+  const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
+    isValid: true,
+    value
+  }));
+  const params = values.map((_, index): { name: string; type: TypeDef } => ({
+    name: `${index}`,
+    type
+  }));
+
+  return (
+    <Params
+      isDisabled
+      params={params}
+      values={values}
+    />
+  );
+}
+
+function renderItem ({ t }: Props): (item: DigestItem, index: number) => React.ReactNode {
+  return function LogItem (item: DigestItem, index: number): React.ReactNode {
     let content: React.ReactNode;
 
     if (item.value instanceof Struct) {
-      content = this.formatStruct(item.value);
+      content = formatStruct(item.value);
     } else if (item.value instanceof Tuple) {
-      content = this.formatTuple(item.value);
+      content = formatTuple(item.value);
     } else if (item.value instanceof Vec) {
-      content = this.formatVector(item.value);
+      content = formatVector(item.value);
     } else if (item.value instanceof U8a) {
-      content = this.formatU8a(item.value);
+      content = formatU8a(item.value);
     } else {
       content = <div>{item.value.toString().split(',').join(', ')}</div>;
     }
@@ -64,76 +118,21 @@ class Logs extends React.PureComponent<Props> {
         </article>
       </div>
     );
+  };
+}
+
+function Logs (props: Props): React.ReactElement<Props> | null {
+  const { t, value } = props;
+
+  if (!value || !value.length) {
+    return null;
   }
 
-  private formatU8a (value: U8a): React.ReactNode {
-    return (
-      <Params
-        isDisabled
-        params={[{ type: getTypeDef('Bytes') }]}
-        values={[{ isValid: true, value }]}
-      />
-    );
-  }
-
-  private formatStruct (struct: Struct): React.ReactNode {
-    const types: Record<string, string> = struct.Type;
-    const params = Object.keys(types).map((name): { name: string; type: TypeDef } => ({
-      name,
-      type: getTypeDef(types[name])
-    }));
-    const values = struct.toArray().map((value): { isValid: boolean; value: Codec } => ({
-      isValid: true,
-      value
-    }));
-
-    return (
-      <Params
-        isDisabled
-        params={params}
-        values={values}
-      />
-    );
-  }
-
-  private formatTuple (tuple: Tuple): React.ReactNode {
-    const types = tuple.Types;
-    const params = types.map((type): { type: TypeDef } => ({
-      type: getTypeDef(type)
-    }));
-    const values = tuple.toArray().map((value): { isValid: boolean; value: Codec } => ({
-      isValid: true,
-      value
-    }));
-
-    return (
-      <Params
-        isDisabled
-        params={params}
-        values={values}
-      />
-    );
-  }
-
-  private formatVector (vector: Vec<any>): React.ReactNode {
-    const type = getTypeDef(vector.Type);
-    const values = vector.toArray().map((value): { isValid: boolean; value: Codec } => ({
-      isValid: true,
-      value
-    }));
-    const params = values.map((_, index): { name: string; type: TypeDef } => ({
-      name: `${index}`,
-      type
-    }));
-
-    return (
-      <Params
-        isDisabled
-        params={params}
-        values={values}
-      />
-    );
-  }
+  return (
+    <Column headerText={t('logs')}>
+      {value.map(renderItem(props))}
+    </Column>
+  );
 }
 
 export default translate(Logs);
diff --git a/packages/react-params/src/Param/Account.tsx b/packages/react-params/src/Param/Account.tsx
index 6920397e45..1f45484131 100644
--- a/packages/react-params/src/Param/Account.tsx
+++ b/packages/react-params/src/Param/Account.tsx
@@ -10,36 +10,8 @@ import keyring from '@polkadot/ui-keyring';
 
 import Bare from './Bare';
 
-export default class Account extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
-    const defaultValue = value && value.toString();
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <InputAddress
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          isInput
-          label={label}
-          onChange={this.onChange}
-          placeholder='5...'
-          type='allPlus'
-          withEllipsis
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value?: string): void => {
-    const { onChange } = this.props;
-
+function onChange ({ onChange }: Props): (_?: string) => void {
+  return function (value?: string): void {
     let isValid = false;
 
     if (value) {
@@ -56,5 +28,31 @@ export default class Account extends React.PureComponent<Props> {
       isValid,
       value
     });
-  }
+  };
+}
+
+export default function Account (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
+  const defaultValue = value && value.toString();
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <InputAddress
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        isInput
+        label={label}
+        onChange={onChange(props)}
+        placeholder='5...'
+        type='allPlus'
+        withEllipsis
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Amount.tsx b/packages/react-params/src/Param/Amount.tsx
index 18d436a77e..b776f3cea5 100644
--- a/packages/react-params/src/Param/Amount.tsx
+++ b/packages/react-params/src/Param/Amount.tsx
@@ -12,49 +12,47 @@ import { bnToBn, formatNumber } from '@polkadot/util';
 
 import Bare from './Bare';
 
-export default class Amount extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
-    const defaultValue = isDisabled
-      ? (
-        value instanceof ClassOf('AccountIndex')
-          ? value.toString()
-          : formatNumber(value)
-      )
-      : bnToBn((value as number) || 0).toString();
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Input
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          min={0}
-          onChange={this.onChange}
-          onEnter={onEnter}
-          type={
-            isDisabled
-              ? 'text'
-              : 'number'
-          }
-          withEllipsis
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value: string): void => {
-    const { onChange } = this.props;
-
+function onChange ({ onChange }: Props): (_: string) => void {
+  return function (value: string): void {
     onChange && onChange({
       isValid: true,
       value: new BN(value || 0)
     });
-  }
+  };
+}
+
+export default function Amount (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
+  const defaultValue = isDisabled
+    ? (
+      value instanceof ClassOf('AccountIndex')
+        ? value.toString()
+        : formatNumber(value)
+    )
+    : bnToBn((value as number) || 0).toString();
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Input
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        min={0}
+        onChange={onChange(props)}
+        onEnter={onEnter}
+        type={
+          isDisabled
+            ? 'text'
+            : 'number'
+        }
+        withEllipsis
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Balance.tsx b/packages/react-params/src/Param/Balance.tsx
index de1b7961c8..2a9775eb65 100644
--- a/packages/react-params/src/Param/Balance.tsx
+++ b/packages/react-params/src/Param/Balance.tsx
@@ -12,34 +12,8 @@ import Bare from './Bare';
 
 type Props = BareProps;
 
-class Balance extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
-    const defaultValue = new BN((value as BN || '0').toString()).toString(10);
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <InputBalance
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          onChange={this.onChange}
-          withEllipsis
-          onEnter={onEnter}
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value?: BN): void => {
-    const { isError, onChange } = this.props;
-
+function onChange ({ isError, onChange }: Props): (_?: BN) => void {
+  return function (value?: BN): void {
     if (!onChange) {
       return;
     }
@@ -48,7 +22,31 @@ class Balance extends React.PureComponent<Props> {
       isValid: !isError && !!value,
       value
     });
-  }
+  };
+}
+
+function Balance (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
+  const defaultValue = new BN((value as BN || '0').toString()).toString(10);
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <InputBalance
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        onChange={onChange(props)}
+        withEllipsis
+        onEnter={onEnter}
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
 
 export {
diff --git a/packages/react-params/src/Param/Bare.tsx b/packages/react-params/src/Param/Bare.tsx
index d360597d6f..fabfeef2bd 100644
--- a/packages/react-params/src/Param/Bare.tsx
+++ b/packages/react-params/src/Param/Bare.tsx
@@ -11,17 +11,13 @@ interface Props extends BareProps {
   children: React.ReactNode;
 }
 
-export default class Bare extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, style } = this.props;
-
-    return (
-      <div
-        className={classes('ui--row', className)}
-        style={style}
-      >
-        {children}
-      </div>
-    );
-  }
+export default function Bare ({ children, className, style }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={classes('ui--row', className)}
+      style={style}
+    >
+      {children}
+    </div>
+  );
 }
diff --git a/packages/react-params/src/Param/Base.tsx b/packages/react-params/src/Param/Base.tsx
index 20ffac9c1e..59aa915df7 100644
--- a/packages/react-params/src/Param/Base.tsx
+++ b/packages/react-params/src/Param/Base.tsx
@@ -18,24 +18,20 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-export default class Base extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label, size = 'full', style, withLabel } = this.props;
-
-    return (
-      <Bare
-        className={className}
-        style={style}
+export default function Base ({ children, className, label, size = 'full', style, withLabel }: Props): React.ReactElement<Props> {
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Labelled
+        className={size}
+        label={label}
+        withEllipsis
+        withLabel={withLabel}
       >
-        <Labelled
-          className={size}
-          label={label}
-          withEllipsis
-          withLabel={withLabel}
-        >
-          {children}
-        </Labelled>
-      </Bare>
-    );
-  }
+        {children}
+      </Labelled>
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/BaseBytes.tsx b/packages/react-params/src/Param/BaseBytes.tsx
index fe8d9b94e2..55ddadfd3d 100644
--- a/packages/react-params/src/Param/BaseBytes.tsx
+++ b/packages/react-params/src/Param/BaseBytes.tsx
@@ -23,45 +23,8 @@ interface Props extends BaseProps {
 const defaultValidate = (): boolean =>
   true;
 
-export default class BaseBytes extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, defaultValue: { value }, isDisabled, isError, label, onEnter, size = 'full', style, withLabel } = this.props;
-    const defaultValue = value
-      ? (
-        isHex(value)
-          ? value
-          : u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
-      )
-      : undefined;
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Input
-          className={size}
-          defaultValue={defaultValue}
-          isAction={!!children}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          onChange={this.onChange}
-          onEnter={onEnter}
-          placeholder='0x...'
-          type='text'
-          withEllipsis
-          withLabel={withLabel}
-        >
-          {children}
-        </Input>
-      </Bare>
-    );
-  }
-
-  private onChange = (hex: string): void => {
-    const { asHex, length = -1, onChange, validate = defaultValidate, withLength } = this.props;
-
+function onChange ({ asHex, length = -1, onChange, validate = defaultValidate, withLength }: Props): (_: string) => void {
+  return function (hex: string): void {
     let value: Uint8Array;
     let isValid = true;
 
@@ -88,5 +51,40 @@ export default class BaseBytes extends React.PureComponent<Props> {
         ? u8aToHex(value)
         : value
     });
-  }
+  };
+}
+
+export default function BaseBytes (props: Props): React.ReactElement<Props> {
+  const { children, className, defaultValue: { value }, isDisabled, isError, label, onEnter, size = 'full', style, withLabel } = props;
+  const defaultValue = value
+    ? (
+      isHex(value)
+        ? value
+        : u8aToHex(value as Uint8Array, isDisabled ? 256 : -1)
+    )
+    : undefined;
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Input
+        className={size}
+        defaultValue={defaultValue}
+        isAction={!!children}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        onChange={onChange(props)}
+        onEnter={onEnter}
+        placeholder='0x...'
+        type='text'
+        withEllipsis
+        withLabel={withLabel}
+      >
+        {children}
+      </Input>
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Bool.tsx b/packages/react-params/src/Param/Bool.tsx
index 94b01a7fb3..476fa8847f 100644
--- a/packages/react-params/src/Param/Bool.tsx
+++ b/packages/react-params/src/Param/Bool.tsx
@@ -14,39 +14,37 @@ const options = [
   { text: 'Yes', value: true }
 ];
 
-export default class BoolParam extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
-    const defaultValue = value instanceof Boolean
-      ? value.valueOf()
-      : value as boolean;
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Dropdown
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          options={options}
-          onChange={this.onChange}
-          withEllipsis
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value: boolean): void => {
-    const { onChange } = this.props;
-
+function onChange ({ onChange }: Props): (_: boolean) => void {
+  return function (value: boolean): void {
     onChange && onChange({
       isValid: true,
       value
     });
-  }
+  };
+}
+
+export default function BoolParam (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
+  const defaultValue = value instanceof Boolean
+    ? value.valueOf()
+    : value as boolean;
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Dropdown
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        options={options}
+        onChange={onChange(props)}
+        withEllipsis
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Code.tsx b/packages/react-params/src/Param/Code.tsx
index 0abde0de24..25fd4a3027 100644
--- a/packages/react-params/src/Param/Code.tsx
+++ b/packages/react-params/src/Param/Code.tsx
@@ -9,52 +9,52 @@ import React from 'react';
 import Bytes from './Bytes';
 import BytesFile from './File';
 
-export default class Code extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue, isDisabled, isError, label, style, withLabel } = this.props;
-
-    if (isDisabled) {
-      return this.renderDisabled();
-    }
-
-    return (
-      <BytesFile
-        className={className}
-        defaultValue={defaultValue}
-        isError={isError}
-        label={label}
-        onChange={this.onChange}
-        style={style}
-        withLabel={withLabel}
-      />
-    );
-  }
-
-  private renderDisabled (): React.ReactNode {
-    const { className, defaultValue, isError, isOptional, label, onEnter, style, type, withLabel } = this.props;
-
-    return (
-      <Bytes
-        className={className}
-        defaultValue={defaultValue}
-        isError={isError}
-        isOptional={isOptional}
-        label={label}
-        onEnter={onEnter}
-        style={style}
-        type={type}
-        withLabel={withLabel}
-      />
-    );
-  }
-
-  // TODO: Validate that we have actual proper WASM code
-  private onChange = (value: Uint8Array): void => {
-    const { onChange } = this.props;
+function renderDisabled ({ className, defaultValue, isError, isOptional, label, onEnter, style, type, withLabel }: Props): React.ReactNode {
+  return (
+    <Bytes
+      className={className}
+      defaultValue={defaultValue}
+      isError={isError}
+      isOptional={isOptional}
+      label={label}
+      onEnter={onEnter}
+      style={style}
+      type={type}
+      withLabel={withLabel}
+    />
+  );
+}
 
+// TODO: Validate that we have actual proper WASM code
+function onChange ({ onChange }: Props): (_: Uint8Array) => void {
+  return function (value: Uint8Array): void {
     onChange && onChange({
       isValid: value.length !== 0,
       value
     });
-  }
+  };
+}
+
+export default function Code (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue, isDisabled, isError, label, style, withLabel } = props;
+
+  if (isDisabled) {
+    return (
+      <>
+        {renderDisabled(props)}
+      </>
+    );
+  }
+
+  return (
+    <BytesFile
+      className={className}
+      defaultValue={defaultValue}
+      isError={isError}
+      label={label}
+      onChange={onChange(props)}
+      style={style}
+      withLabel={withLabel}
+    />
+  );
 }
diff --git a/packages/react-params/src/Param/Data.tsx b/packages/react-params/src/Param/Data.tsx
index 28a3afe5fc..75a54ea618 100644
--- a/packages/react-params/src/Param/Data.tsx
+++ b/packages/react-params/src/Param/Data.tsx
@@ -9,41 +9,40 @@ import { Input } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
-export default class Data extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
-    const defaultValue = value
-      ? (value.toHex ? value.toHex() : value)
-      : '';
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Input
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          onChange={this.onChange}
-          onEnter={onEnter}
-          placeholder='Hex data'
-          type='text'
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value: string): void => {
-    const { onChange } = this.props;
+function onChange ({ onChange }: Props): (_: string) => void {
+  return function (value: string): void {
     const isValid = value.length !== 0;
 
     onChange && onChange({
       isValid,
       value
     });
-  }
+  };
+}
+
+export default function Data (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
+  const defaultValue = value
+    ? (value.toHex ? value.toHex() : value)
+    : '';
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Input
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        onChange={onChange(props)}
+        onEnter={onEnter}
+        placeholder='Hex data'
+        type='text'
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/File.tsx b/packages/react-params/src/Param/File.tsx
index c1c3804856..0d6f247e11 100644
--- a/packages/react-params/src/Param/File.tsx
+++ b/packages/react-params/src/Param/File.tsx
@@ -19,25 +19,21 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-export default class File extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, isDisabled, isError = false, label, onChange, placeholder, style, withLabel } = this.props;
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <InputFile
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          onChange={onChange}
-          placeholder={placeholder}
-          withEllipsis
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
+export default function File ({ className, isDisabled, isError = false, label, onChange, placeholder, style, withLabel }: Props): React.ReactElement<Props> {
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <InputFile
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        onChange={onChange}
+        placeholder={placeholder}
+        withEllipsis
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Hash.tsx b/packages/react-params/src/Param/Hash.tsx
index 0bc50100d8..52833967d5 100644
--- a/packages/react-params/src/Param/Hash.tsx
+++ b/packages/react-params/src/Param/Hash.tsx
@@ -8,26 +8,22 @@ import React from 'react';
 
 import BaseBytes from './BaseBytes';
 
-export default class Hash extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type, withLabel } = this.props;
-
-    return (
-      <BaseBytes
-        className={className}
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        isOptional={isOptional}
-        label={label}
-        length={32}
-        name={name}
-        onChange={onChange}
-        onEnter={onEnter}
-        style={style}
-        type={type}
-        withLabel={withLabel}
-      />
-    );
-  }
+export default function Hash ({ className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type, withLabel }: Props): React.ReactElement<Props> {
+  return (
+    <BaseBytes
+      className={className}
+      defaultValue={defaultValue}
+      isDisabled={isDisabled}
+      isError={isError}
+      isOptional={isOptional}
+      label={label}
+      length={32}
+      name={name}
+      onChange={onChange}
+      onEnter={onEnter}
+      style={style}
+      type={type}
+      withLabel={withLabel}
+    />
+  );
 }
diff --git a/packages/react-params/src/Param/Moment.tsx b/packages/react-params/src/Param/Moment.tsx
index 7663df9eef..30a51ce9f6 100644
--- a/packages/react-params/src/Param/Moment.tsx
+++ b/packages/react-params/src/Param/Moment.tsx
@@ -9,54 +9,54 @@ import { Static } from '@polkadot/react-components';
 
 import Amount from './Amount';
 
-export default class Code extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = this.props;
-
-    if (isDisabled) {
-      return this.renderDisabled();
-    }
-
-    return (
-      <Amount
-        className={className}
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isOptional={false}
-        isError={isError}
-        label={label}
-        onChange={this.onChange}
-        onEnter={onEnter}
-        style={style}
-        type={type}
-        withLabel={withLabel}
-      />
-    );
-  }
-
-  private renderDisabled (): React.ReactNode {
-    const { className, defaultValue, isError, label, style, withLabel } = this.props;
-
-    return (
-      <Static
-        className={className}
-        defaultValue={
-          (defaultValue && defaultValue.value)
-            ? defaultValue.value.toString()
-            : ''
-        }
-        isError={isError}
-        label={label}
-        style={style}
-        withLabel={withLabel}
-      />
-    );
-  }
-
-  // TODO: Validate that we have actual proper WASM code
-  private onChange = (value: RawParamOnChangeValue): void => {
-    const { onChange } = this.props;
-
-    onChange && onChange(value);
-  }
+function renderDisabled ({ className, defaultValue, isError, label, style, withLabel }: Props): React.ReactNode {
+  return (
+    <Static
+      className={className}
+      defaultValue={
+        (defaultValue && defaultValue.value)
+          ? defaultValue.value.toString()
+          : ''
+      }
+      isError={isError}
+      label={label}
+      style={style}
+      withLabel={withLabel}
+    />
+  );
+}
+
+// TODO: Validate that we have actual proper WASM code
+function onChange ({ onChange }: Props): (_: RawParamOnChangeValue) => void {
+  return function (value: RawParamOnChangeValue): void {
+    onChange && onChange(value);
+  };
+}
+
+export default function Code (props: Props): React.ReactNode {
+  const { className, defaultValue, isDisabled, isError, label, onEnter, style, type, withLabel } = props;
+
+  if (isDisabled) {
+    return (
+      <>
+        {renderDisabled(props)}
+      </>
+    );
+  }
+
+  return (
+    <Amount
+      className={className}
+      defaultValue={defaultValue}
+      isDisabled={isDisabled}
+      isOptional={false}
+      isError={isError}
+      label={label}
+      onChange={onChange(props)}
+      onEnter={onEnter}
+      style={style}
+      type={type}
+      withLabel={withLabel}
+    />
+  );
 }
diff --git a/packages/react-params/src/Param/Proposal.tsx b/packages/react-params/src/Param/Proposal.tsx
index 9cf894cda8..59a18c936e 100644
--- a/packages/react-params/src/Param/Proposal.tsx
+++ b/packages/react-params/src/Param/Proposal.tsx
@@ -13,31 +13,29 @@ import { classes } from '@polkadot/react-components/util';
 import Bare from './Bare';
 import Unknown from './Unknown';
 
-export default class Proposal extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = this.props;
-
-    if (!isDisabled) {
-      return (
-        <Unknown {...this.props} />
-      );
-    }
-
-    const proposal = value as Extrinsic;
-    const { method, section } = GenericCall.findFunction(proposal.callIndex);
+export default function Proposal (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, label, style, withLabel } = props;
 
+  if (!isDisabled) {
     return (
-      <Bare>
-        <Static
-          className={classes(className, 'full')}
-          label={label}
-          style={style}
-          withLabel={withLabel}
-        >
-          {section}.{method}
-        </Static>
-        <Call value={proposal} />
-      </Bare>
+      <Unknown {...props} />
     );
   }
+
+  const proposal = value as Extrinsic;
+  const { method, section } = GenericCall.findFunction(proposal.callIndex);
+
+  return (
+    <Bare>
+      <Static
+        className={classes(className, 'full')}
+        label={label}
+        style={style}
+        withLabel={withLabel}
+      >
+        {section}.{method}
+      </Static>
+      <Call value={proposal} />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Static.tsx b/packages/react-params/src/Param/Static.tsx
index e91f63c20c..d8d667d7d6 100644
--- a/packages/react-params/src/Param/Static.tsx
+++ b/packages/react-params/src/Param/Static.tsx
@@ -17,24 +17,21 @@ interface Props extends BareProps, WithTranslation {
   withLabel?: boolean;
 }
 
-class StaticParam extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { asHex, className, defaultValue, label, style, t } = this.props;
-    const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
+function StaticParam ({ asHex, className, defaultValue, label, style, t }: Props): React.ReactElement<Props> {
+  const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
 
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Static
-          className='full'
-          label={label}
-          value={value || t('empty')}
-        />
-      </Bare>
-    );
-  }
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Static
+        className='full'
+        label={label}
+        value={value || t('empty')}
+      />
+    </Bare>
+  );
 }
 
 export default translate(StaticParam);
diff --git a/packages/react-params/src/Param/Text.tsx b/packages/react-params/src/Param/Text.tsx
index f7695a11d4..5cca4dc293 100644
--- a/packages/react-params/src/Param/Text.tsx
+++ b/packages/react-params/src/Param/Text.tsx
@@ -9,39 +9,38 @@ import { Input } from '@polkadot/react-components';
 
 import Bare from './Bare';
 
-export default class Text extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = this.props;
-    const defaultValue = (value || '').toString();
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Input
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          onChange={this.onChange}
-          onEnter={onEnter}
-          placeholder='<any string>'
-          type='text'
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value: string): void => {
-    const { onChange } = this.props;
+function onChange ({ onChange }: Props): (_: string) => void {
+  return function (value: string): void {
     const isValid = value.length !== 0;
 
     onChange && onChange({
       isValid,
       value
     });
-  }
+  };
+}
+
+export default function Text (props: Props): React.ReactNode {
+  const { className, defaultValue: { value }, isDisabled, isError, label, onEnter, style, withLabel } = props;
+  const defaultValue = (value || '').toString();
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Input
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        onChange={onChange(props)}
+        onEnter={onEnter}
+        placeholder='<any string>'
+        type='text'
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/Unknown.tsx b/packages/react-params/src/Param/Unknown.tsx
index 05bbc96f72..b2cd61206c 100644
--- a/packages/react-params/src/Param/Unknown.tsx
+++ b/packages/react-params/src/Param/Unknown.tsx
@@ -14,31 +14,29 @@ interface Props extends BareProps {
   withLabel?: boolean;
 }
 
-export default class Unknown extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type } = this.props;
+export default function Unknown (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue, isDisabled, isError, isOptional, label, name, onChange, onEnter, style, type } = props;
 
-    if (isDisabled) {
-      return <Static {...this.props} />;
-    }
-
-    return (
-      <BaseBytes
-        asHex
-        className={className}
-        defaultValue={defaultValue}
-        isDisabled={isDisabled}
-        isError={isError}
-        isOptional={isOptional}
-        label={label}
-        length={-1}
-        name={name}
-        onChange={onChange}
-        onEnter={onEnter}
-        style={style}
-        type={type}
-        withLength={false}
-      />
-    );
+  if (isDisabled) {
+    return <Static {...props} />;
   }
+
+  return (
+    <BaseBytes
+      asHex
+      className={className}
+      defaultValue={defaultValue}
+      isDisabled={isDisabled}
+      isError={isError}
+      isOptional={isOptional}
+      label={label}
+      length={-1}
+      name={name}
+      onChange={onChange}
+      onEnter={onEnter}
+      style={style}
+      type={type}
+      withLength={false}
+    />
+  );
 }
diff --git a/packages/react-params/src/Param/Vote.tsx b/packages/react-params/src/Param/Vote.tsx
index 80ea2fc15c..3ddf0701ed 100644
--- a/packages/react-params/src/Param/Vote.tsx
+++ b/packages/react-params/src/Param/Vote.tsx
@@ -16,40 +16,38 @@ const options = [
   { text: 'Aye', value: -1 }
 ];
 
-export default class Vote extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
-    const defaultValue = value instanceof BN
-      ? value.toNumber()
-      : value instanceof GenericVote
-        ? (value.isAye ? -1 : 0)
-        : value as number;
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Dropdown
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          options={options}
-          onChange={this.onChange}
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value: number): void => {
-    const { onChange } = this.props;
-
+function onChange ({ onChange }: Props): (_: number) => void {
+  return function (value: number): void {
     onChange && onChange({
       isValid: true,
       value
     });
-  }
+  };
+}
+
+export default function Vote (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
+  const defaultValue = value instanceof BN
+    ? value.toNumber()
+    : value instanceof GenericVote
+      ? (value.isAye ? -1 : 0)
+      : value as number;
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Dropdown
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        options={options}
+        onChange={onChange(props)}
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-params/src/Param/VoteThreshold.tsx b/packages/react-params/src/Param/VoteThreshold.tsx
index 1b6f397ceb..dee874cc9e 100644
--- a/packages/react-params/src/Param/VoteThreshold.tsx
+++ b/packages/react-params/src/Param/VoteThreshold.tsx
@@ -25,38 +25,36 @@ export const textMap = options.reduce((textMap, { text, value }): TextMap => {
   return textMap;
 }, {} as unknown as TextMap);
 
-export default class VoteThresholdParam extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = this.props;
-    const defaultValue = value instanceof ClassOf('VoteThreshold')
-      ? value.toNumber()
-      : bnToBn(value as number).toNumber();
-
-    return (
-      <Bare
-        className={className}
-        style={style}
-      >
-        <Dropdown
-          className='full'
-          defaultValue={defaultValue}
-          isDisabled={isDisabled}
-          isError={isError}
-          label={label}
-          options={options}
-          onChange={this.onChange}
-          withLabel={withLabel}
-        />
-      </Bare>
-    );
-  }
-
-  private onChange = (value: number): void => {
-    const { onChange } = this.props;
-
+function onChange ({ onChange }: Props): (_: number) => void {
+  return function (value: number): void {
     onChange && onChange({
       isValid: true,
       value
     });
-  }
+  };
+}
+
+export default function VoteThresholdParam (props: Props): React.ReactElement<Props> {
+  const { className, defaultValue: { value }, isDisabled, isError, label, style, withLabel } = props;
+  const defaultValue = value instanceof ClassOf('VoteThreshold')
+    ? value.toNumber()
+    : bnToBn(value as number).toNumber();
+
+  return (
+    <Bare
+      className={className}
+      style={style}
+    >
+      <Dropdown
+        className='full'
+        defaultValue={defaultValue}
+        isDisabled={isDisabled}
+        isError={isError}
+        label={label}
+        options={options}
+        onChange={onChange(props)}
+        withLabel={withLabel}
+      />
+    </Bare>
+  );
 }
diff --git a/packages/react-query/src/AccountIndex.tsx b/packages/react-query/src/AccountIndex.tsx
index ad8a8b3cd8..c2fd7b6bcd 100644
--- a/packages/react-query/src/AccountIndex.tsx
+++ b/packages/react-query/src/AccountIndex.tsx
@@ -16,24 +16,21 @@ interface Props extends BareProps, CallProps {
   accounts_idAndIndex?: [AccountId?, AccountIndex?];
 }
 
-export class AccountIndexDisplay extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, accounts_idAndIndex = [] } = this.props;
-    const [, accountIndex] = accounts_idAndIndex;
+export function AccountIndexDisplay ({ children, className, label = '', style, accounts_idAndIndex = [] }: Props): React.ReactElement<Props> {
+  const [, accountIndex] = accounts_idAndIndex;
 
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{
-          accountIndex
-            ? accountIndex.toString()
-            : '-'
-        }{children}
-      </div>
-    );
-  }
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{
+        accountIndex
+          ? accountIndex.toString()
+          : '-'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>(
diff --git a/packages/react-query/src/Available.tsx b/packages/react-query/src/Available.tsx
index f6e406ef11..29723d3282 100644
--- a/packages/react-query/src/Available.tsx
+++ b/packages/react-query/src/Available.tsx
@@ -18,20 +18,16 @@ interface Props extends BareProps, CallProps {
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }
 
-export class AvailableDisplay extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { balances_all, children, className, label = '' } = this.props;
-
-    return (
-      <div className={className}>
-        {label}{
-          balances_all
-            ? formatBalance(balances_all.availableBalance)
-            : '0'
-        }{children}
-      </div>
-    );
-  }
+export function AvailableDisplay ({ balances_all, children, className, label = '' }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      {label}{
+        balances_all
+          ? formatBalance(balances_all.availableBalance)
+          : '0'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>(
diff --git a/packages/react-query/src/Balance.tsx b/packages/react-query/src/Balance.tsx
index c3dafbce15..a61965a6bb 100644
--- a/packages/react-query/src/Balance.tsx
+++ b/packages/react-query/src/Balance.tsx
@@ -19,20 +19,16 @@ interface Props extends BareProps, CallProps {
   balances_all?: DerivedBalances;
 }
 
-export class BalanceDisplay extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', balances_all } = this.props;
-
-    return (
-      <div className={className}>
-        {label}{
-          balances_all
-            ? formatBalance(balances_all.freeBalance)
-            : '0'
-        }{children}
-      </div>
-    );
-  }
+export function BalanceDisplay ({ children, className, label = '', balances_all }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      {label}{
+        balances_all
+          ? formatBalance(balances_all.freeBalance)
+          : '0'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>(
diff --git a/packages/react-query/src/BestFinalized.tsx b/packages/react-query/src/BestFinalized.tsx
index 127e7e6995..4aeb1341e0 100644
--- a/packages/react-query/src/BestFinalized.tsx
+++ b/packages/react-query/src/BestFinalized.tsx
@@ -16,23 +16,19 @@ interface Props extends BareProps, CallProps {
   chain_bestNumberFinalized?: BlockNumber;
 }
 
-export class BestFinalized extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, chain_bestNumberFinalized } = this.props;
-
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{
-          chain_bestNumberFinalized
-            ? formatNumber(chain_bestNumberFinalized)
-            : '-'
-        }{children}
-      </div>
-    );
-  }
+export function BestFinalized ({ children, className, label = '', style, chain_bestNumberFinalized }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{
+        chain_bestNumberFinalized
+          ? formatNumber(chain_bestNumberFinalized)
+          : '-'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('derive.chain.bestNumberFinalized')(BestFinalized);
diff --git a/packages/react-query/src/BestNumber.tsx b/packages/react-query/src/BestNumber.tsx
index decbfd3139..073cd704dd 100644
--- a/packages/react-query/src/BestNumber.tsx
+++ b/packages/react-query/src/BestNumber.tsx
@@ -16,23 +16,19 @@ interface Props extends BareProps, CallProps {
   chain_bestNumber?: BlockNumber;
 }
 
-export class BestNumber extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, chain_bestNumber } = this.props;
-
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{
-          chain_bestNumber
-            ? formatNumber(chain_bestNumber)
-            : '-'
-        }{children}
-      </div>
-    );
-  }
+export function BestNumber ({ children, className, label = '', style, chain_bestNumber }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{
+        chain_bestNumber
+          ? formatNumber(chain_bestNumber)
+          : '-'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('derive.chain.bestNumber')(BestNumber);
diff --git a/packages/react-query/src/Bonded.tsx b/packages/react-query/src/Bonded.tsx
index 0b2756de0d..81e9cc5f55 100644
--- a/packages/react-query/src/Bonded.tsx
+++ b/packages/react-query/src/Bonded.tsx
@@ -18,20 +18,16 @@ interface Props extends BareProps, CallProps {
   staking_ledger?: StakingLedger | null;
 }
 
-export class BondedDisplay extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', staking_ledger } = this.props;
-
-    return (
-      <div className={className}>
-        {label}{
-          staking_ledger
-            ? formatBalance(staking_ledger.active)
-            : '0'
-        }{children}
-      </div>
-    );
-  }
+export function BondedDisplay ({ children, className, label = '', staking_ledger }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      {label}{
+        staking_ledger
+          ? formatBalance(staking_ledger.active)
+          : '0'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>(
diff --git a/packages/react-query/src/Chain.tsx b/packages/react-query/src/Chain.tsx
index 756bff8f3b..1bd3da36c8 100644
--- a/packages/react-query/src/Chain.tsx
+++ b/packages/react-query/src/Chain.tsx
@@ -15,19 +15,15 @@ interface Props extends BareProps, CallProps {
   system_chain?: Text;
 }
 
-export class Chain extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, system_chain = 'unknown' } = this.props;
-
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{system_chain.toString()}{children}
-      </div>
-    );
-  }
+export function Chain ({ children, className, label = '', style, system_chain = new Text('unknown') }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{system_chain.toString()}{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('rpc.system.chain')(Chain);
diff --git a/packages/react-query/src/NodeName.tsx b/packages/react-query/src/NodeName.tsx
index 20839be6c3..5a47511e72 100644
--- a/packages/react-query/src/NodeName.tsx
+++ b/packages/react-query/src/NodeName.tsx
@@ -15,19 +15,15 @@ interface Props extends BareProps, CallProps {
   system_name?: Text;
 }
 
-export class NodeName extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, system_name = 'unknown' } = this.props;
-
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{system_name.toString()}{children}
-      </div>
-    );
-  }
+export function NodeName ({ children, className, label = '', style, system_name = new Text('unknown') }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{system_name.toString()}{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('rpc.system.name')(NodeName);
diff --git a/packages/react-query/src/NodeVersion.tsx b/packages/react-query/src/NodeVersion.tsx
index 2d41aa64eb..3400a771d4 100644
--- a/packages/react-query/src/NodeVersion.tsx
+++ b/packages/react-query/src/NodeVersion.tsx
@@ -15,19 +15,15 @@ interface Props extends BareProps, CallProps {
   system_version?: Text;
 }
 
-export class NodeVersion extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, system_version = '-' } = this.props;
-
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{system_version.toString()}{children}
-      </div>
-    );
-  }
+export function NodeVersion ({ children, className, label = '', style, system_version = new Text('-') }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{system_version.toString()}{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('rpc.system.version')(NodeVersion);
diff --git a/packages/react-query/src/Nonce.tsx b/packages/react-query/src/Nonce.tsx
index baef526fa7..6eebf844d5 100644
--- a/packages/react-query/src/Nonce.tsx
+++ b/packages/react-query/src/Nonce.tsx
@@ -18,20 +18,16 @@ interface Props extends BareProps, CallProps {
   params?: string;
 }
 
-export class Nonce extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { accountNonce, children, className, label = '' } = this.props;
-
-    return (
-      <div className={className}>
-        {label}{
-          accountNonce
-            ? formatNumber(accountNonce)
-            : '0'
-        }{children}
-      </div>
-    );
-  }
+export function Nonce ({ accountNonce, children, className, label = '' }: Props): React.ReactElement<Props> {
+  return (
+    <div className={className}>
+      {label}{
+        accountNonce
+          ? formatNumber(accountNonce)
+          : '0'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>(
diff --git a/packages/react-query/src/TimeNow.tsx b/packages/react-query/src/TimeNow.tsx
index dbc2ee21d2..fdb0a33f3f 100644
--- a/packages/react-query/src/TimeNow.tsx
+++ b/packages/react-query/src/TimeNow.tsx
@@ -17,24 +17,21 @@ interface Props extends BareProps, CallProps {
   timestamp_now?: Moment;
 }
 
-export class TimeNow extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, isSubstrateV2, label = '', style, timestamp_now } = this.props;
-    const value = isSubstrateV2 || !timestamp_now
-      ? timestamp_now
-      : timestamp_now.muln(1000); // for 1.x, timestamps are in seconds
+export function TimeNow ({ children, className, isSubstrateV2, label = '', style, timestamp_now }: Props): React.ReactElement<Props> {
+  const value = isSubstrateV2 || !timestamp_now
+    ? timestamp_now
+    : timestamp_now.muln(1000); // for 1.x, timestamps are in seconds
 
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}
-        <Elapsed value={value} />
-        {children}
-      </div>
-    );
-  }
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}
+      <Elapsed value={value} />
+      {children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('query.timestamp.now')(TimeNow);
diff --git a/packages/react-query/src/TimePeriod.tsx b/packages/react-query/src/TimePeriod.tsx
index ceb9ca927a..0346b5e291 100644
--- a/packages/react-query/src/TimePeriod.tsx
+++ b/packages/react-query/src/TimePeriod.tsx
@@ -17,24 +17,21 @@ interface Props extends BareProps, CallProps {
   timestamp_minimumPeriod?: Moment;
 }
 
-export class TimePeriod extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { babe_expectedBlockTime, children, className, label = '', style, timestamp_minimumPeriod } = this.props;
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{
-          babe_expectedBlockTime
-            ? `${formatNumber(babe_expectedBlockTime.toNumber() / 1000)}s`
-            : timestamp_minimumPeriod
-              ? `${formatNumber(timestamp_minimumPeriod.toNumber() * 2)}s`
-              : '-'
-        }{children}
-      </div>
-    );
-  }
+export function TimePeriod ({ babe_expectedBlockTime, children, className, label = '', style, timestamp_minimumPeriod }: Props): React.ReactElement<Props> {
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{
+        babe_expectedBlockTime
+          ? `${formatNumber(babe_expectedBlockTime.toNumber() / 1000)}s`
+          : timestamp_minimumPeriod
+            ? `${formatNumber(timestamp_minimumPeriod.toNumber() * 2)}s`
+            : '-'
+      }{children}
+    </div>
+  );
 }
 
 // NOTE we are not combining this into one with a fallback, it becomes slightly tricky.
diff --git a/packages/react-query/src/TotalIssuance.tsx b/packages/react-query/src/TotalIssuance.tsx
index b208842823..f812398857 100644
--- a/packages/react-query/src/TotalIssuance.tsx
+++ b/packages/react-query/src/TotalIssuance.tsx
@@ -16,26 +16,23 @@ interface Props extends BareProps, CallProps {
   balances_totalIssuance?: Balance;
 }
 
-export class TotalIssuance extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, label = '', style, balances_totalIssuance } = this.props;
-    const value = balances_totalIssuance
-      ? balances_totalIssuance.toString()
-      : null;
+export function TotalIssuance ({ children, className, label = '', style, balances_totalIssuance }: Props): React.ReactElement<Props> {
+  const value = balances_totalIssuance
+    ? balances_totalIssuance.toString()
+    : null;
 
-    return (
-      <div
-        className={className}
-        style={style}
-      >
-        {label}{
-          value
-            ? `${formatBalance(value, false)}${formatBalance.calcSi(value).value}`
-            : '-'
-        }{children}
-      </div>
-    );
-  }
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{
+        value
+          ? `${formatBalance(value, false)}${formatBalance.calcSi(value).value}`
+          : '-'
+      }{children}
+    </div>
+  );
 }
 
 export default withCalls<Props>('query.balances.totalIssuance')(TotalIssuance);
diff --git a/packages/react-signer/src/Transaction.tsx b/packages/react-signer/src/Transaction.tsx
index 2d25870ffa..a06c649fd6 100644
--- a/packages/react-signer/src/Transaction.tsx
+++ b/packages/react-signer/src/Transaction.tsx
@@ -18,70 +18,64 @@ interface Props extends I18nProps {
   value: QueueTx;
 }
 
-class Transaction extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, value: { extrinsic } } = this.props;
-
-    if (!extrinsic) {
-      return null;
-    }
-
-    const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
-
-    return (
-      <>
-        <Modal.Header>
-          {section}.{method}
-          <label><details><summary>{
-            meta && meta.documentation
-              ? meta.documentation.join(' ')
-              : ''
-          }</summary></details></label>
-        </Modal.Header>
-        <Modal.Content className='ui--signer-Signer-Content'>
-          {this.renderAccount()}
-          <Call value={extrinsic} />
-          {this.renderChecks()}
-          {children}
-        </Modal.Content>
-      </>
-    );
+function renderAccount ({ t, value: { accountId, isUnsigned } }: Props): React.ReactNode {
+  if (isUnsigned || !accountId) {
+    return null;
   }
 
-  private renderAccount (): React.ReactNode {
-    const { t, value: { accountId, isUnsigned } } = this.props;
+  return (
+    <InputAddress
+      className='full'
+      defaultValue={accountId}
+      isDisabled
+      isInput
+      label={t('sending from my account')}
+      withLabel
+    />
+  );
+}
 
-    if (isUnsigned || !accountId) {
-      return null;
-    }
-
-    return (
-      <InputAddress
-        className='full'
-        defaultValue={accountId}
-        isDisabled
-        isInput
-        label={t('sending from my account')}
-        withLabel
-      />
-    );
+function renderChecks ({ isSendable, value: { accountId, extrinsic, isUnsigned } }: Props): React.ReactNode {
+  if (isUnsigned) {
+    return null;
   }
 
-  private renderChecks (): React.ReactNode {
-    const { isSendable, value: { accountId, extrinsic, isUnsigned } } = this.props;
+  return (
+    <Checks
+      accountId={accountId}
+      extrinsic={extrinsic}
+      isSendable={isSendable}
+    />
+  );
+}
 
-    if (isUnsigned) {
-      return null;
-    }
+function Transaction (props: Props): React.ReactElement<Props> | null {
+  const { children, value: { extrinsic } } = props;
 
-    return (
-      <Checks
-        accountId={accountId}
-        extrinsic={extrinsic}
-        isSendable={isSendable}
-      />
-    );
+  if (!extrinsic) {
+    return null;
   }
+
+  const { meta, method, section } = GenericCall.findFunction(extrinsic.callIndex);
+
+  return (
+    <>
+      <Modal.Header>
+        {section}.{method}
+        <label><details><summary>{
+          meta && meta.documentation
+            ? meta.documentation.join(' ')
+            : ''
+        }</summary></details></label>
+      </Modal.Header>
+      <Modal.Content className='ui--signer-Signer-Content'>
+        {renderAccount(props)}
+        <Call value={extrinsic} />
+        {renderChecks(props)}
+        {children}
+      </Modal.Content>
+    </>
+  );
 }
 
 export default translate(Transaction);
diff --git a/packages/react-signer/src/index.tsx b/packages/react-signer/src/index.tsx
index 8c28f136f6..a495da9b85 100644
--- a/packages/react-signer/src/index.tsx
+++ b/packages/react-signer/src/index.tsx
@@ -16,25 +16,21 @@ interface Props extends BareProps {
   children: React.ReactNode;
 }
 
-export default class Signer extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { children, className, style } = this.props;
-
-    return (
-      <>
-        {children}
-        <QueueConsumer>
-          {({ txqueue, queueSetTxStatus }: QueueProps): React.ReactNode => (
-            <Modal
-              className={className}
-              key='signer-modal'
-              queue={txqueue}
-              queueSetTxStatus={queueSetTxStatus}
-              style={style}
-            />
-          )}
-        </QueueConsumer>
-      </>
-    );
-  }
+export default function Signer ({ children, className, style }: Props): React.ReactElement<Props> {
+  return (
+    <>
+      {children}
+      <QueueConsumer>
+        {({ txqueue, queueSetTxStatus }: QueueProps): React.ReactNode => (
+          <Modal
+            className={className}
+            key='signer-modal'
+            queue={txqueue}
+            queueSetTxStatus={queueSetTxStatus}
+            style={style}
+          />
+        )}
+      </QueueConsumer>
+    </>
+  );
 }