diff --git a/package.json b/package.json
index 22bb33d8d2..81e8ab9678 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^0.100.0-beta.28",
-    "@polkadot/api-contract": "^0.100.0-beta.28",
+    "@polkadot/api": "^0.100.0-beta.29",
+    "@polkadot/api-contract": "^0.100.0-beta.29",
     "@polkadot/keyring": "^1.8.1",
-    "@polkadot/types": "^0.100.0-beta.28",
+    "@polkadot/types": "^0.100.0-beta.29",
     "@polkadot/util": "^1.8.1",
     "@polkadot/util-crypto": "^1.8.1",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/packages/app-contracts/package.json b/packages/app-contracts/package.json
index 63c4edbbb7..213c38e582 100644
--- a/packages/app-contracts/package.json
+++ b/packages/app-contracts/package.json
@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@polkadot/api-contract": "^0.100.0-beta.28"
+    "@polkadot/api-contract": "^0.100.0-beta.29"
   }
 }
diff --git a/packages/react-api/package.json b/packages/react-api/package.json
index fcf40a7bbb..8b37529a52 100644
--- a/packages/react-api/package.json
+++ b/packages/react-api/package.json
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.7.6",
-    "@polkadot/api": "^0.100.0-beta.28",
+    "@polkadot/api": "^0.100.0-beta.29",
     "@polkadot/extension-dapp": "^0.15.0-beta.0",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index 9d8a69781a..b155365b44 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -4,7 +4,7 @@
 
 import { DerivedBalances, DerivedStakingAccount } from '@polkadot/api-derive/types';
 import { ValidatorPrefsTo145 } from '@polkadot/types/interfaces';
-import { BareProps, I18nProps } from './types';
+import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -17,7 +17,7 @@ import { FormatBalance } from '@polkadot/react-query';
 
 import CryptoType from './CryptoType';
 import Label from './Label';
-import translate from './translate';
+import { useTranslation } from './translate';
 
 // true to display, or (for bonded) provided values [own, ...all extras]
 export interface BalanceActiveType {
@@ -44,7 +44,7 @@ export interface ValidatorPrefsType {
 
 const PERBILL = new BN(1000000000);
 
-interface Props extends BareProps, I18nProps {
+interface Props extends BareProps {
   address: string;
   balancesAll?: DerivedBalances;
   children?: React.ReactNode;
@@ -129,7 +129,8 @@ function calcBonded (stakingInfo?: DerivedStakingAccount, bonded?: boolean | BN[
   return [own, other];
 }
 
-function renderExtended ({ balancesAll, t, address, withExtended }: Props): React.ReactNode {
+function renderExtended ({ balancesAll, address, withExtended }: Props): React.ReactNode {
+  const { t } = useTranslation();
   const extendedDisplay = withExtended === true
     ? DEFAULT_EXTENDED
     : withExtended || undefined;
@@ -159,7 +160,9 @@ function renderExtended ({ balancesAll, t, address, withExtended }: Props): Reac
   );
 }
 
-function renderUnlocking ({ stakingInfo, t }: Props): React.ReactNode {
+function renderUnlocking ({ stakingInfo }: Props): React.ReactNode {
+  const { t } = useTranslation();
+
   if (!stakingInfo || !stakingInfo.unlocking || !stakingInfo.unlocking.length) {
     return null;
   }
@@ -195,7 +198,8 @@ function renderUnlocking ({ stakingInfo, t }: Props): React.ReactNode {
   );
 }
 
-function renderValidatorPrefs ({ stakingInfo, t, withValidatorPrefs = false }: Props): React.ReactNode {
+function renderValidatorPrefs ({ stakingInfo, withValidatorPrefs = false }: Props): React.ReactNode {
+  const { t } = useTranslation();
   const validatorPrefsDisplay = withValidatorPrefs === true
     ? DEFAULT_PREFS
     : withValidatorPrefs;
@@ -238,7 +242,8 @@ function renderValidatorPrefs ({ stakingInfo, t, withValidatorPrefs = false }: P
 }
 
 function renderBalances (props: Props, allAccounts: string[]): React.ReactNode {
-  const { balancesAll, stakingInfo, t, withBalance = true, withBalanceToggle = false } = props;
+  const { t } = useTranslation();
+  const { balancesAll, stakingInfo, withBalance = true, withBalanceToggle = false } = props;
   const balanceDisplay = withBalance === true
     ? DEFAULT_BALANCES
     : withBalance || false;
@@ -372,8 +377,9 @@ function renderBalances (props: Props, allAccounts: string[]): React.ReactNode {
 }
 
 function AddressInfo (props: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { allAccounts } = useAccounts();
-  const { className, children, extraInfo, stakingInfo, t, withBalanceToggle, withHexSessionId, withRewardDestination } = props;
+  const { className, children, extraInfo, stakingInfo, withBalanceToggle, withHexSessionId, withRewardDestination } = props;
 
   return (
     <div className={`ui--AddressInfo ${className} ${withBalanceToggle ? 'ui--AddressInfo-expander' : ''}`}>
@@ -489,7 +495,6 @@ export default withMulti(
       }
     }
   `,
-  translate,
   withCalls<Props>(
     ['derive.balances.all', {
       paramName: 'address',
diff --git a/packages/react-components/src/AddressMulti.tsx b/packages/react-components/src/AddressMulti.tsx
index fb65c345f8..d72db2a860 100644
--- a/packages/react-components/src/AddressMulti.tsx
+++ b/packages/react-components/src/AddressMulti.tsx
@@ -2,17 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from './types';
-
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useDebounce } from '@polkadot/react-hooks';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 import AddressToggle from './AddressToggle';
 import Input from './Input';
 
-interface Props extends I18nProps {
+interface Props {
   available: string[];
   className?: string;
   help: React.ReactNode;
@@ -22,7 +20,8 @@ interface Props extends I18nProps {
   value: string[];
 }
 
-function AddressMulti ({ available, className, help, label, maxCount, onChange, t, value }: Props): React.ReactElement<Props> {
+function AddressMulti ({ available, className, help, label, maxCount, onChange, value }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [_filter, setFilter] = useState<string>('');
   const filter = useDebounce(_filter);
 
@@ -63,34 +62,32 @@ function AddressMulti ({ available, className, help, label, maxCount, onChange,
   );
 }
 
-export default translate(
-  styled(AddressMulti)`
-    .ui--AddressMulti-input {
-      .ui.input {
-        margin-bottom: 0rem;
+export default styled(AddressMulti)`
+  .ui--AddressMulti-input {
+    .ui.input {
+      margin-bottom: 0rem;
 
-        input {
-          border-bottom-width: 0px;
-          border-bottom-right-radius: 0px;
-          border-bottom-left-radius: 0px;
-        }
+      input {
+        border-bottom-width: 0px;
+        border-bottom-right-radius: 0px;
+        border-bottom-left-radius: 0px;
       }
     }
+  }
 
-    .ui--AddressMulti-container {
-      background: white;
-      border: 1px solid rgba(34,36,38,.15);
-      border-top-width: 0px;
-      border-radius: 0 0 0.25rem 0.25rem;
-      margin-left: 2rem;
-      max-height: 15rem;
-      overflow-y: scroll;
-      padding: 0.25rem 0.5rem;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: center;
+  .ui--AddressMulti-container {
+    background: white;
+    border: 1px solid rgba(34,36,38,.15);
+    border-top-width: 0px;
+    border-radius: 0 0 0.25rem 0.25rem;
+    margin-left: 2rem;
+    max-height: 15rem;
+    overflow-y: scroll;
+    padding: 0.25rem 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
 
-      .ui--AddressToggle {}
-    }
-  `
-);
+    .ui--AddressToggle {}
+  }
+`;
diff --git a/packages/react-components/src/Call.tsx b/packages/react-components/src/Call.tsx
index f271e4bb1c..d988192e5e 100644
--- a/packages/react-components/src/Call.tsx
+++ b/packages/react-components/src/Call.tsx
@@ -4,7 +4,7 @@
 
 import { Hash } from '@polkadot/types/interfaces';
 import { Codec, IExtrinsic, IMethod, TypeDef } from '@polkadot/types/types';
-import { BareProps, I18nProps } from './types';
+import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -15,9 +15,9 @@ import { FormatBalance } from '@polkadot/react-query';
 
 import Static from './Static';
 import { classes } from './util';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-export interface Props extends I18nProps, BareProps {
+export interface Props extends BareProps {
   children?: React.ReactNode;
   labelHash?: React.ReactNode;
   mortality?: string;
@@ -37,7 +37,8 @@ interface Value {
   value: Codec;
 }
 
-function Call ({ children, className, labelHash, mortality, onError, style, tip, value, withHash, t }: Props): React.ReactElement<Props> {
+function Call ({ children, className, labelHash, mortality, onError, style, tip, value, withHash }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [{ hash, params, values }, setExtracted] = useState<{ hash: Hash | null; params: Param[]; values: Value[] }>({ hash: null, params: [], values: [] });
 
   useEffect((): void => {
@@ -98,25 +99,23 @@ function Call ({ children, className, labelHash, mortality, onError, style, tip,
   );
 }
 
-export default translate(
-  styled(Call)`
-    .hash .ui--Static {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: unset;
-      word-wrap: unset;
-    }
+export default styled(Call)`
+  .hash .ui--Static {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: unset;
+    word-wrap: unset;
+  }
 
-    .ui--Extrinsic--toplevel {
-      margin-top: 0.75rem;
+  .ui--Extrinsic--toplevel {
+    margin-top: 0.75rem;
 
-      .ui--Labelled {
-        padding-left: 0;
+    .ui--Labelled {
+      padding-left: 0;
 
-        label {
-          left: 1.55rem;
-        }
+      label {
+        left: 1.55rem;
       }
     }
-  `
-);
+  }
+`;
diff --git a/packages/react-components/src/ChainLock.tsx b/packages/react-components/src/ChainLock.tsx
index 1b9895a216..09bdf9b36b 100644
--- a/packages/react-components/src/ChainLock.tsx
+++ b/packages/react-components/src/ChainLock.tsx
@@ -2,17 +2,15 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
-
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { useApi } from '@polkadot/react-hooks';
 import chains from '@polkadot/ui-settings/defaults/chains';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 import Toggle from './Toggle';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   genesisHash: string | null;
   isDisabled?: boolean;
@@ -32,7 +30,8 @@ function calcLock (apiGenesis: string, genesisHash: string | null): boolean {
   ).includes(genesisHash);
 }
 
-function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault, t }: Props): React.ReactElement<Props> | null {
+function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefault }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { isDevelopment, api } = useApi();
   const [isTiedToChain, setTied] = useState(calcLock(api.genesisHash.toHex(), genesisHash));
 
@@ -67,8 +66,6 @@ function ChainLock ({ className, genesisHash, isDisabled, onChange, preventDefau
   );
 }
 
-export default translate(
-  styled(ChainLock)`
-    text-align: right;
-  `
-);
+export default styled(ChainLock)`
+  text-align: right;
+`;
diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx
index b6896f84b2..6943275a6d 100644
--- a/packages/react-components/src/CopyButton.tsx
+++ b/packages/react-components/src/CopyButton.tsx
@@ -2,24 +2,26 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps, I18nProps } from './types';
+import { BareProps } from './types';
 
 import React, { useContext } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 
 import StatusContext from './Status/Context';
 import Button from './Button';
-import translate from './translate';
+import { useTranslation } from './translate';
 import styled from 'styled-components';
 
-interface Props extends BareProps, I18nProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
+  className?: string;
   icon?: string;
   isAddress?: boolean;
   value?: any;
 }
 
-function CopyButton ({ children, className, icon = 'copy', isAddress = false, t, value }: Props): React.ReactElement<Props> {
+function CopyButton ({ children, className, icon = 'copy', isAddress = false, value }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const { queueAction } = useContext(StatusContext);
 
   const _onCopy = (): void => {
@@ -53,16 +55,14 @@ function CopyButton ({ children, className, icon = 'copy', isAddress = false, t,
   );
 }
 
-export default translate(
-  styled(CopyButton)`
+export default styled(CopyButton)`
+  cursor: copy;
+
+  button.ui.mini.icon.primary.button.icon-button {
     cursor: copy;
+  }
 
-    button.ui.mini.icon.primary.button.icon-button {
-      cursor: copy;
-    }
-
-    .copySpan {
-      white-space: nowrap;
-    }
-  `
-);
+  .copySpan {
+    white-space: nowrap;
+  }
+`;
diff --git a/packages/react-components/src/Forget.tsx b/packages/react-components/src/Forget.tsx
index 368a18b195..c765a237b7 100644
--- a/packages/react-components/src/Forget.tsx
+++ b/packages/react-components/src/Forget.tsx
@@ -2,24 +2,25 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { CodeStored } from '@polkadot/app-contracts/types';
 
 import React from 'react';
 import { AddressRow, Button, CodeRow, Modal } from '@polkadot/react-components';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+type Mode = 'account' | 'address' | 'contract' | 'code';
+
+interface Props {
   address?: string;
   code?: CodeStored;
   name?: string;
-  mode?: 'account' | 'address' | 'contract' | 'code';
+  mode?: Mode;
   onClose: () => void;
   onForget: () => void;
 }
 
-function getContent ({ mode = 'account', t }: Props): React.ReactNode {
+function getContent (mode: Mode, t: (key: string) => string): React.ReactNode {
   switch (mode) {
     case 'account':
       return (
@@ -52,7 +53,7 @@ function getContent ({ mode = 'account', t }: Props): React.ReactNode {
   }
 }
 
-function getHeaderText ({ mode = 'account', t }: Props): string {
+function getHeaderText (mode: Mode, t: (key: string) => string): string {
   switch (mode) {
     case 'account':
       return t('Confirm account removal');
@@ -65,7 +66,7 @@ function getHeaderText ({ mode = 'account', t }: Props): string {
   }
 }
 
-function renderContent (props: Props): React.ReactNode {
+function renderContent (props: Props, t: (key: string) => string): React.ReactNode {
   const { address, code, mode = 'account' } = props;
 
   switch (mode) {
@@ -77,7 +78,7 @@ function renderContent (props: Props): React.ReactNode {
           isInline
           value={address || ''}
         >
-          {getContent(props)}
+          {getContent(mode, t)}
         </AddressRow>
       );
     case 'code':
@@ -86,23 +87,24 @@ function renderContent (props: Props): React.ReactNode {
           isInline
           code={code || ''}
         >
-          {getContent(props)}
+          {getContent(mode, t)}
         </CodeRow>
       );
   }
 }
 
-function Forget (props: Props): React.ReactElement<Props> {
-  const { onForget, onClose, t } = props;
+export default function Forget (props: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { mode = 'account', onForget, onClose } = props;
 
   return (
     <Modal
       className='app--accounts-Modal'
-      header={getHeaderText(props)}
+      header={getHeaderText(mode, t)}
       onClose={onClose}
       open
     >
-      <Modal.Content>{renderContent(props)}</Modal.Content>
+      <Modal.Content>{renderContent(props, t)}</Modal.Content>
       <Modal.Actions>
         <Button.Group>
           <Button
@@ -123,5 +125,3 @@ function Forget (props: Props): React.ReactElement<Props> {
     </Modal>
   );
 }
-
-export default translate(Forget);
diff --git a/packages/react-components/src/IdentityIcon.tsx b/packages/react-components/src/IdentityIcon.tsx
index d48f2104ee..09302fcb08 100644
--- a/packages/react-components/src/IdentityIcon.tsx
+++ b/packages/react-components/src/IdentityIcon.tsx
@@ -3,8 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { IdentityProps } from '@polkadot/react-identicon/types';
-import { I18nProps } from './types';
+import { IdentityProps as Props } from '@polkadot/react-identicon/types';
 
 import React, { useContext, useEffect, useState } from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
@@ -13,10 +12,7 @@ import uiSettings from '@polkadot/ui-settings';
 import { ValidatorsContext } from '@polkadot/react-query';
 
 import StatusContext from './Status/Context';
-import translate from './translate';
-
-interface Props extends IdentityProps, I18nProps {
-}
+import { useTranslation } from './translate';
 
 // overrides based on the actual software node type
 const NODES: Record<string, string> = {
@@ -32,8 +28,9 @@ export function getIdentityTheme (systemName: string): 'empty' {
   return ((uiSettings.icon === 'default' && NODES[systemName]) || uiSettings.icon) as 'empty';
 }
 
-function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, value }: Props): React.ReactElement<Props> {
+export default function IdentityIcon ({ className, onCopy, prefix, size, style, theme, value }: Props): React.ReactElement<Props> {
   const { api, isApiReady, systemName } = useApi();
+  const { t } = useTranslation();
   const info = useCall<DeriveAccountInfo>(isApiReady ? api.derive.accounts.info as any : undefined, [value]);
   const { queueAction } = useContext(StatusContext);
   const validators = useContext(ValidatorsContext);
@@ -76,5 +73,3 @@ function IdentityIcon ({ className, onCopy, prefix, size, style, t, theme, value
     />
   );
 }
-
-export default translate(IdentityIcon);
diff --git a/packages/react-components/src/InputFile.tsx b/packages/react-components/src/InputFile.tsx
index 4d9cfd1a4e..360da8310c 100644
--- a/packages/react-components/src/InputFile.tsx
+++ b/packages/react-components/src/InputFile.tsx
@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { WithTranslation } from 'react-i18next';
 import { BareProps } from './types';
 
 import React, { useState, createRef } from 'react';
@@ -12,9 +11,9 @@ import { formatNumber, isHex, u8aToString, hexToU8a } from '@polkadot/util';
 
 import { classes } from './util';
 import Labelled from './Labelled';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends BareProps, WithTranslation {
+interface Props extends BareProps {
   // Reference Example Usage: https://github.com/react-dropzone/react-dropzone/tree/master/examples/Accept
   // i.e. MIME types: 'application/json, text/plain', or '.json, .txt'
   accept?: string;
@@ -54,7 +53,8 @@ function convertResult (result: ArrayBuffer, convertHex?: boolean): Uint8Array {
   return data;
 }
 
-function InputFile ({ accept, className, clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, t, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
+function InputFile ({ accept, className, clearContent, convertHex, help, isDisabled, isError = false, label, onChange, placeholder, withEllipsis, withLabel }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const dropRef = createRef<DropzoneRef>();
   const [file, setFile] = useState<FileState | undefined>();
 
@@ -124,28 +124,26 @@ function InputFile ({ accept, className, clearContent, convertHex, help, isDisab
     : dropZone;
 }
 
-export default translate(
-  styled(InputFile)`
-    background: #fff;
-    border: 1px solid rgba(34, 36, 38, 0.15);
-    border-radius: 0.28571429rem;
-    font-size: 1rem;
-    margin: 0.25rem 0;
-    padding: 1rem;
-    width: 100% !important;
+export default styled(InputFile)`
+  background: #fff;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  border-radius: 0.28571429rem;
+  font-size: 1rem;
+  margin: 0.25rem 0;
+  padding: 1rem;
+  width: 100% !important;
 
-    &.error {
-      background: #fff6f6;
-      border-color: #e0b4b4;
-    }
+  &.error {
+    background: #fff6f6;
+    border-color: #e0b4b4;
+  }
 
-    &:hover {
-      background: #fefefe;
-      cursor: pointer;
-    }
+  &:hover {
+    background: #fefefe;
+    cursor: pointer;
+  }
 
-    .label {
-      color: rgba(0, 0, 0, .6);
-    }
-  `
-);
+  .label {
+    color: rgba(0, 0, 0, .6);
+  }
+`;
diff --git a/packages/react-components/src/InputNumber.tsx b/packages/react-components/src/InputNumber.tsx
index 9f3729ceb1..204984c85c 100644
--- a/packages/react-components/src/InputNumber.tsx
+++ b/packages/react-components/src/InputNumber.tsx
@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SiDef } from '@polkadot/util/types';
-import { BareProps, BitLength, I18nProps } from './types';
+import { BareProps, BitLength } from './types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -14,11 +14,11 @@ import { BitLengthOption } from './constants';
 // import Button from './Button';
 import Dropdown from './Dropdown';
 import Input, { KEYS, KEYS_PRE } from './Input';
-import translate from './translate';
+import { useTranslation } from './translate';
 
 // const ALLOW_MAX = false;
 
-interface Props extends BareProps, I18nProps {
+interface Props extends BareProps {
   autoFocus?: boolean;
   bitLength?: BitLength;
   defaultValue?: BN | string;
@@ -192,8 +192,9 @@ function isNewPropsValue (propsValue: BN | string, value: string, valueBn: BN):
   return BN.isBN(propsValue) ? !propsValue.eq(valueBn) : propsValue !== value;
 }
 
-function InputNumber (props: Props): React.ReactElement<Props> {
-  const { bitLength = DEFAULT_BITLENGTH, className, defaultValue = ZERO, help, isDecimal, isSi, isDisabled, isError = false, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, style, value: propsValue, t } = props;
+export default function InputNumber (props: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { bitLength = DEFAULT_BITLENGTH, className, defaultValue = ZERO, help, isDecimal, isSi, isDisabled, isError = false, maxLength, maxValue, onChange, onEnter, onEscape, placeholder, style, value: propsValue } = props;
 
   const [si, setSi] = useState<SiDef | null>(isSi ? formatBalance.findSi('-') : null);
   const [isPreKeyDown, setIsPreKeyDown] = useState(false);
@@ -301,5 +302,3 @@ function InputNumber (props: Props): React.ReactElement<Props> {
     </Input>
   );
 }
-
-export default translate(InputNumber);
diff --git a/packages/react-components/src/LinkPolkascan.tsx b/packages/react-components/src/LinkPolkascan.tsx
index 29a11aac8d..f2f77f33ae 100644
--- a/packages/react-components/src/LinkPolkascan.tsx
+++ b/packages/react-components/src/LinkPolkascan.tsx
@@ -2,18 +2,16 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
 import { useApi } from '@polkadot/react-hooks';
 
-import translate from './translate';
+import { useTranslation } from './translate';
 import Icon from './Icon';
 
 export type LinkTypes = 'address' | 'block' | 'extrinsic';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   data: string;
   type: LinkTypes;
@@ -24,6 +22,7 @@ const BASE = 'https://polkascan.io/pre/';
 
 const CHAINS: Record<string, string> = {
   Alexander: 'alexander',
+  Kulupu: 'kulupu',
   Kusama: 'kusama-cc1', // old name via W3F nodes
   'Kusama CC1': 'kusama-cc1',
   'Kusama CC2': 'kusama-cc2',
@@ -36,7 +35,8 @@ const TYPES: Record<string, string> = {
   extrinsic: '/system/extrinsic/'
 };
 
-function LinkPolkascan ({ className, data, t, type, withShort }: Props): React.ReactElement<Props> | null {
+function LinkPolkascan ({ className, data, type, withShort }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const { systemChain } = useApi();
   const extChain = CHAINS[systemChain];
   const extType = TYPES[type];
@@ -61,9 +61,7 @@ function LinkPolkascan ({ className, data, t, type, withShort }: Props): React.R
   );
 }
 
-export default translate(
-  styled(LinkPolkascan)`
-    margin-top: 1rem;
-    text-align: right;
-  `
-);
+export default styled(LinkPolkascan)`
+  margin-top: 1rem;
+  text-align: right;
+`;
diff --git a/packages/react-components/src/MessageSignature.tsx b/packages/react-components/src/MessageSignature.tsx
index 82f2ccd214..0cd300c3c5 100644
--- a/packages/react-components/src/MessageSignature.tsx
+++ b/packages/react-components/src/MessageSignature.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ContractABIMessage } from '@polkadot/api-contract/types';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,11 +10,11 @@ import { displayType } from '@polkadot/types';
 
 import Icon from './Icon';
 import Tooltip from './Tooltip';
-import translate from './translate';
+import { useTranslation } from './translate';
 
 const MAX_PARAM_LENGTH = 20;
 
-export interface Props extends I18nProps {
+export interface Props {
   asConstructor?: boolean;
   message: ContractABIMessage;
   params?: any[];
@@ -53,7 +52,9 @@ function truncate (param: string): string {
     : param;
 }
 
-function MessageSignature ({ message: { args, mutates, name, returnType }, params = [], asConstructor = false, withTooltip = false, t }: Props): React.ReactElement<Props> {
+export default function MessageSignature ({ message: { args, mutates, name, returnType }, params = [], asConstructor = false, withTooltip = false }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <Signature>
       <Name>
@@ -107,5 +108,3 @@ function MessageSignature ({ message: { args, mutates, name, returnType }, param
     </Signature>
   );
 }
-
-export default translate(MessageSignature);
diff --git a/packages/react-components/src/Messages.tsx b/packages/react-components/src/Messages.tsx
index 95ab092290..e87c6bd1b6 100644
--- a/packages/react-components/src/Messages.tsx
+++ b/packages/react-components/src/Messages.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ContractABIMessage } from '@polkadot/api-contract/types';
-import { I18nProps } from '@polkadot/react-components/types';
 import { Button } from '@polkadot/react-components';
 
 import React from 'react';
@@ -12,11 +11,12 @@ import { Abi } from '@polkadot/api-contract';
 
 import IconLink from './IconLink';
 import MessageSignature from './MessageSignature';
-import translate from './translate';
+import { useTranslation } from './translate';
 import { classes } from './util';
 
-export interface Props extends I18nProps {
+export interface Props {
   address?: string;
+  className?: string;
   contractAbi: Abi;
   isLabelled?: boolean;
   isRemovable: boolean;
@@ -53,6 +53,7 @@ function onSelectConstructor (props: Props, index: number): () => void {
 }
 
 function renderItem (props: Props, message: ContractABIMessage, index: number, asConstructor = false): React.ReactNode {
+  const { t } = useTranslation();
   const { docs = [], name } = message;
 
   return (
@@ -60,13 +61,13 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
       key={name}
       className={classes('message', !onSelect && 'exempt-hover', asConstructor && 'constructor')}
     >
-      <div className="info">
+      <div className='info'>
         <MessageSignature
           asConstructor={asConstructor}
           message={message}
           withTooltip
         />
-        <details className="docs">
+        <details className='docs'>
           <summary>
             {
               docs && docs.length > 0
@@ -79,31 +80,29 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
                     </React.Fragment>
                   )))
                 : (
-                  <i>
-                    {props.t('No documentation provided')}
-                  </i>
+                  <i>{t('No documentation provided')}</i>
                 )
             }
           </summary>
         </details>
       </div>
       {!asConstructor && props.onSelect && (
-        <div className="accessory">
+        <div className='accessory'>
           <Button
-            className="execute"
-            icon="play"
+            className='execute'
+            icon='play'
             onClick={onSelect(props, index)}
-            tooltip={props.t('Call this message')}
+            tooltip={t('Call this message')}
           />
         </div>
       )}
       {asConstructor && props.onSelectConstructor && (
-        <div className="accessory">
+        <div className='accessory'>
           <Button
-            className="execute"
-            icon="cloud upload"
+            className='execute'
+            icon='cloud upload'
             onClick={onSelectConstructor(props, index)}
-            tooltip={props.t('Deploy with this constructor')}
+            tooltip={t('Deploy with this constructor')}
           />
         </div>
       )}
@@ -113,6 +112,7 @@ function renderItem (props: Props, message: ContractABIMessage, index: number, a
 
 function renderConstructor (props: Props, index: number): React.ReactNode {
   const { contractAbi: { abi: { contract: { constructors } } } } = props;
+
   if (!constructors[index]) {
     return null;
   }
@@ -122,6 +122,7 @@ function renderConstructor (props: Props, index: number): React.ReactNode {
 
 function renderMessage (props: Props, index: number): React.ReactNode {
   const { contractAbi: { abi: { contract: { messages } } } } = props;
+
   if (!messages[index]) {
     return null;
   }
@@ -130,7 +131,9 @@ function renderMessage (props: Props, index: number): React.ReactNode {
 }
 
 function Messages (props: Props): React.ReactElement<Props> {
-  const { className, contractAbi: { abi: { contract: { constructors, messages } } }, isLabelled, isRemovable, onRemove = NOOP, withConstructors, t } = props;
+  const { t } = useTranslation();
+  const { className, contractAbi: { abi: { contract: { constructors, messages } } }, isLabelled, isRemovable, onRemove = NOOP, withConstructors } = props;
+
   return (
     <div className={classes(className, 'ui--Messages', isLabelled && 'labelled')}>
       {withConstructors && constructors.map((_, index): React.ReactNode => renderConstructor(props, index))}
@@ -147,7 +150,7 @@ function Messages (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default translate(styled(Messages)`
+export default styled(Messages)`
   font-size: 0.9rem;
   padding: 0;
   margin: 0;
@@ -223,4 +226,4 @@ export default translate(styled(Messages)`
       color: #555 !important;
     }
   }
-`);
+`;
diff --git a/packages/react-components/src/TreasuryProposal.tsx b/packages/react-components/src/TreasuryProposal.tsx
index 6920e8db25..4e25089339 100644
--- a/packages/react-components/src/TreasuryProposal.tsx
+++ b/packages/react-components/src/TreasuryProposal.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { TreasuryProposal as TreasuryProposalType } from '@polkadot/types/interfaces';
-import { I18nProps } from '@polkadot/react-components/types';
 
 import React, { useEffect, useState } from 'react';
 import { InputAddress, Labelled, Static } from '@polkadot/react-components';
@@ -12,9 +11,9 @@ import { Option } from '@polkadot/types';
 import { FormatBalance } from '@polkadot/react-query';
 
 import Inset, { InsetProps } from './Inset';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   className?: string;
   asInset?: boolean;
   insetProps?: Partial<InsetProps>;
@@ -24,7 +23,8 @@ interface Props extends I18nProps {
   withLink?: boolean;
 }
 
-function TreasuryProposal ({ className, asInset, insetProps, onClick, proposal, proposalId, t }: Props): React.ReactElement<Props> | null {
+export default function TreasuryProposal ({ className, asInset, insetProps, onClick, proposal, proposalId }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [stateProposal, setProposal] = useState<TreasuryProposalType | null>(null);
   const { api } = useApi();
 
@@ -93,5 +93,3 @@ function TreasuryProposal ({ className, asInset, insetProps, onClick, proposal,
     </div>
   );
 }
-
-export default translate(TreasuryProposal);
diff --git a/packages/react-components/src/VoteAccount.tsx b/packages/react-components/src/VoteAccount.tsx
index f53327dd91..8d6bfe632a 100644
--- a/packages/react-components/src/VoteAccount.tsx
+++ b/packages/react-components/src/VoteAccount.tsx
@@ -2,18 +2,19 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from './types';
-
 import React from 'react';
 
 import InputAddress from './InputAddress';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   onChange: (value: string | null) => void;
 }
 
-function VoteAccount ({ className, onChange, t }: Props): React.ReactElement<Props> {
+export default function VoteAccount ({ className, onChange }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <InputAddress
       className={className}
@@ -25,5 +26,3 @@ function VoteAccount ({ className, onChange, t }: Props): React.ReactElement<Pro
     />
   );
 }
-
-export default translate(VoteAccount);
diff --git a/packages/react-components/src/VoteActions.tsx b/packages/react-components/src/VoteActions.tsx
index 33e99161ca..9359218819 100644
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@@ -2,24 +2,25 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from './types';
-
 import React from 'react';
 
 import Button from './Button';
 import Modal from './Modal';
 import TxButton from './TxButton';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
   accountId: string | null;
+  className?: string;
   isDisabled?: boolean;
   onClick: () => void;
   params: any[];
   tx: string;
 }
 
-function VoteActions ({ accountId, className, isDisabled, onClick, params, t, tx }: Props): React.ReactElement<Props> {
+export default function VoteActions ({ accountId, className, isDisabled, onClick, params, tx }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <Modal.Actions>
       <Button.Group className={className}>
@@ -44,5 +45,3 @@ function VoteActions ({ accountId, className, isDisabled, onClick, params, t, tx
     </Modal.Actions>
   );
 }
-
-export default translate(VoteActions);
diff --git a/packages/react-components/src/VoteToggle.tsx b/packages/react-components/src/VoteToggle.tsx
index f8a47c80f0..d4f60afb6c 100644
--- a/packages/react-components/src/VoteToggle.tsx
+++ b/packages/react-components/src/VoteToggle.tsx
@@ -2,19 +2,20 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from './types';
-
 import React from 'react';
 
 import Dropdown from './Dropdown';
-import translate from './translate';
+import { useTranslation } from './translate';
 
-interface Props extends I18nProps {
+interface Props {
+  className?: string;
   onChange: (value: boolean) => void;
   value: boolean;
 }
 
-function VoteToggle ({ className, onChange, t, value }: Props): React.ReactElement<Props> {
+export default function VoteToggle ({ className, onChange, value }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
   return (
     <Dropdown
       className={className}
@@ -29,5 +30,3 @@ function VoteToggle ({ className, onChange, t, value }: Props): React.ReactEleme
     />
   );
 }
-
-export default translate(VoteToggle);
diff --git a/packages/react-params/src/Param/Enum.tsx b/packages/react-params/src/Param/Enum.tsx
index ee4fd7e254..9d3320d9c0 100644
--- a/packages/react-params/src/Param/Enum.tsx
+++ b/packages/react-params/src/Param/Enum.tsx
@@ -20,7 +20,7 @@ interface Option {
 }
 
 export default function EnumParam (props: Props): React.ReactElement<Props> {
-  const { className, defaultValue, isDisabled, isError, label, onChange, style, type, withLabel } = props;
+  const { className, defaultValue, isDisabled, isError, label, onChange, overrides, style, type, withLabel } = props;
   const [current, setCurrent] = useState<ParamDef[] | null>(null);
   const [initialValue, setInitialValue] = useState<string | null>(null);
   const [{ options, subTypes }, setOptions] = useState<{ options: Option[]; subTypes: TypeDef[] }>({ options: [], subTypes: [] });
@@ -90,6 +90,7 @@ export default function EnumParam (props: Props): React.ReactElement<Props> {
       {current && (
         <Params
           onChange={_onChangeParam}
+          overrides={overrides}
           params={current}
         />
       )}
diff --git a/packages/react-params/src/Param/KeyValueArray.tsx b/packages/react-params/src/Param/KeyValueArray.tsx
index 04e26c6831..4452c6c682 100644
--- a/packages/react-params/src/Param/KeyValueArray.tsx
+++ b/packages/react-params/src/Param/KeyValueArray.tsx
@@ -10,7 +10,7 @@ import { WithTranslation } from 'react-i18next';
 import { Vec } from '@polkadot/types';
 import { assert, isHex, u8aToHex, u8aToString } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Base from './Base';
 import Bytes from './Bytes';
 import File from './File';
@@ -53,7 +53,8 @@ function parseFile (raw: Uint8Array): Parsed {
   };
 }
 
-function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, style, t, withLabel }: Props): React.ReactElement<Props> {
+export default function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, onChange, onEnter, onEscape, style, withLabel }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [placeholder, setPlaceholder] = useState(t(EMPTY_PLACEHOLDER));
 
   if (isDisabled) {
@@ -123,5 +124,3 @@ function KeyValueArray ({ className, defaultValue, isDisabled, isError, label, o
     />
   );
 }
-
-export default translate(KeyValueArray);
diff --git a/packages/react-params/src/Param/Option.tsx b/packages/react-params/src/Param/Option.tsx
index 351248446a..e36fe4102a 100644
--- a/packages/react-params/src/Param/Option.tsx
+++ b/packages/react-params/src/Param/Option.tsx
@@ -3,19 +3,17 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { TypeDef } from '@polkadot/types/types';
-import { I18nProps } from '@polkadot/react-components/types';
-import { Props as CProps } from '../types';
+import { Props } from '../types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { Toggle } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Param from './index';
 
-interface Props extends CProps, I18nProps {}
-
-function Option ({ className, defaultValue, isDisabled, name, onChange, onEnter, onEscape, t, type: { sub } }: Props): React.ReactElement<Props> {
+function Option ({ className, defaultValue, isDisabled, name, onChange, onEnter, onEscape, type: { sub } }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const [isActive, setIsActive] = useState(false);
 
   useEffect((): void => {
@@ -53,14 +51,12 @@ function Option ({ className, defaultValue, isDisabled, name, onChange, onEnter,
   );
 }
 
-export default translate(
-  styled(Option)`
-    position: relative;
+export default styled(Option)`
+  position: relative;
 
-    .ui--Param-Option-toggle {
-      position: absolute;
-      right: 3.5rem;
-      top: 0.5rem;
-    }
-  `
-);
+  .ui--Param-Option-toggle {
+    position: absolute;
+    right: 3.5rem;
+    top: 0.5rem;
+  }
+`;
diff --git a/packages/react-params/src/Param/Static.tsx b/packages/react-params/src/Param/Static.tsx
index 326113838b..f10e0c10bb 100644
--- a/packages/react-params/src/Param/Static.tsx
+++ b/packages/react-params/src/Param/Static.tsx
@@ -2,22 +2,22 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { WithTranslation } from 'react-i18next';
 import { Props as BareProps, RawParam } from '../types';
 
 import React from 'react';
 import { Static } from '@polkadot/react-components';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import Bare from './Bare';
 
-interface Props extends BareProps, WithTranslation {
+interface Props extends BareProps {
   asHex?: boolean;
   defaultValue: RawParam;
   withLabel?: boolean;
 }
 
-function StaticParam ({ asHex, className, defaultValue, label, style, t }: Props): React.ReactElement<Props> {
+export default function StaticParam ({ asHex, className, defaultValue, label, style }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
   const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
 
   return (
@@ -33,5 +33,3 @@ function StaticParam ({ asHex, className, defaultValue, label, style, t }: Props
     </Bare>
   );
 }
-
-export default translate(StaticParam);
diff --git a/packages/react-params/src/Param/Struct.tsx b/packages/react-params/src/Param/Struct.tsx
index 6dc7264d90..79a2cbc9f8 100644
--- a/packages/react-params/src/Param/Struct.tsx
+++ b/packages/react-params/src/Param/Struct.tsx
@@ -14,7 +14,7 @@ import Base from './Base';
 import Static from './Static';
 
 export default function StructParam (props: Props): React.ReactElement<Props> {
-  const { className, isDisabled, label, onChange, style, type, withLabel } = props;
+  const { className, isDisabled, label, onChange, overrides, style, type, withLabel } = props;
   const [params, setParams] = useState<ParamDef[]>([]);
 
   useEffect((): void => {
@@ -54,6 +54,7 @@ export default function StructParam (props: Props): React.ReactElement<Props> {
       />
       <Params
         onChange={_onChangeParams}
+        overrides={overrides}
         params={params}
       />
     </div>
diff --git a/packages/react-params/src/Param/Tuple.tsx b/packages/react-params/src/Param/Tuple.tsx
index 3aba3ed2e5..ddf1998336 100644
--- a/packages/react-params/src/Param/Tuple.tsx
+++ b/packages/react-params/src/Param/Tuple.tsx
@@ -15,7 +15,7 @@ import Static from './Static';
 
 export default function Tuple (props: Props): React.ReactElement<Props> {
   const [params, setParams] = useState<ParamDef[]>([]);
-  const { className, isDisabled, label, onChange, style, type, withLabel } = props;
+  const { className, isDisabled, label, onChange, overrides, style, type, withLabel } = props;
 
   useEffect((): void => {
     try {
@@ -49,6 +49,7 @@ export default function Tuple (props: Props): React.ReactElement<Props> {
       />
       <Params
         onChange={_onChangeParams}
+        overrides={overrides}
         params={params}
       />
     </div>
diff --git a/packages/react-params/src/Param/Vector.tsx b/packages/react-params/src/Param/Vector.tsx
index 29111928eb..97f664f502 100644
--- a/packages/react-params/src/Param/Vector.tsx
+++ b/packages/react-params/src/Param/Vector.tsx
@@ -2,21 +2,18 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { WithTranslation } from 'react-i18next';
 import { TypeDef } from '@polkadot/types/types';
-import { ParamDef, Props as BareProps, RawParam } from '../types';
+import { ParamDef, Props, RawParam } from '../types';
 
 import React, { useEffect, useState } from 'react';
 import { Button } from '@polkadot/react-components';
 import { isUndefined } from '@polkadot/util';
 
-import translate from '../translate';
+import { useTranslation } from '../translate';
 import getInitValue from '../initValue';
 import Params from '../';
 import Base from './Base';
 
-interface Props extends BareProps, WithTranslation {}
-
 function generateParam (type: TypeDef, index: number): ParamDef {
   return {
     name: `${index}: ${type.type}`,
@@ -24,7 +21,8 @@ function generateParam (type: TypeDef, index: number): ParamDef {
   };
 }
 
-function Vector ({ className, defaultValue, isDisabled = false, label, onChange, style, t, type, withLabel }: Props): React.ReactElement<Props> | null {
+export default function Vector ({ className, defaultValue, isDisabled = false, label, onChange, overrides, style, type, withLabel }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
   const [count, setCount] = useState(0);
   const [params, setParams] = useState<ParamDef[]>([]);
   const [values, setValues] = useState<RawParam[]>([]);
@@ -113,11 +111,10 @@ function Vector ({ className, defaultValue, isDisabled = false, label, onChange,
       <Params
         isDisabled={isDisabled}
         onChange={setValues}
+        overrides={overrides}
         params={params}
         values={values}
       />
     </Base>
   );
 }
-
-export default translate(Vector);
diff --git a/packages/react-params/src/Param/index.tsx b/packages/react-params/src/Param/index.tsx
index a2bc3ba1e8..fc79c4e58e 100644
--- a/packages/react-params/src/Param/index.tsx
+++ b/packages/react-params/src/Param/index.tsx
@@ -2,7 +2,6 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { I18nProps } from '@polkadot/react-components/types';
 import { BaseProps, Props as CProps, ComponentMap } from '../types';
 
 import React, { useRef } from 'react';
@@ -10,17 +9,16 @@ import { classes } from '@polkadot/react-components/util';
 import { displayType } from '@polkadot/types';
 import { isUndefined } from '@polkadot/util';
 
-import translate from '../translate';
 import findComponent from './findComponent';
 import Static from './Static';
 
-interface Props extends I18nProps, BaseProps {
+interface Props extends BaseProps {
   isDisabled?: boolean;
   isOptional?: boolean;
   overrides?: ComponentMap;
 }
 
-function Param ({ className, defaultValue, isDisabled, isOptional, name, onChange, onEnter, onEscape, overrides, style, type }: Props): React.ReactElement<Props> | null {
+export default function Param ({ className, defaultValue, isDisabled, isOptional, name, onChange, onEnter, onEscape, overrides, style, type }: Props): React.ReactElement<Props> | null {
   const compRef = useRef<React.ComponentType<CProps> | null>(findComponent(type, overrides));
 
   if (!compRef.current) {
@@ -50,10 +48,9 @@ function Param ({ className, defaultValue, isDisabled, isOptional, name, onChang
         onChange={onChange}
         onEnter={onEnter}
         onEscape={onEscape}
+        overrides={overrides}
         style={style}
         type={type}
       />
     );
 }
-
-export default translate(Param);
diff --git a/packages/react-params/src/types.ts b/packages/react-params/src/types.ts
index 2b69168bef..9faf2479ed 100644
--- a/packages/react-params/src/types.ts
+++ b/packages/react-params/src/types.ts
@@ -34,6 +34,7 @@ export interface BaseProps extends BareProps {
   onChange?: RawParamOnChange;
   onEnter?: RawParamOnEnter;
   onEscape?: RawParamOnEscape;
+  overrides?: ComponentMap;
   type: TypeDef;
 }
 
diff --git a/yarn.lock b/yarn.lock
index 7ac58dab31..49e99e0256 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2093,35 +2093,35 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@polkadot/api-contract@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.100.0-beta.27.tgz#639d9701b6c7b3951eb2f5c132f88fd52fadbd79"
-  integrity sha512-XbGL+HHaWHzy4HWhLmPhb7xkJCpoSZuEFZge5K0V83sspa+VEaWuuP3EE54y9EmpU521jaaByK/I3ub1sRtp4A==
+"@polkadot/api-contract@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-contract/-/api-contract-0.100.0-beta.29.tgz#251c992733603cb58c1d2be0101c6ff7a0890a48"
+  integrity sha512-yUxc+gfUgJ2JCXjwF7/yRj/Qy1Z0uZs0pyBPUvbUqoqM5xn792rAzPm+jKjQ0pSmcq3ItC7mAXEnLTk8ntKdhg==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/types" "^0.100.0-beta.27"
+    "@polkadot/types" "^0.100.0-beta.29"
 
-"@polkadot/api-derive@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.100.0-beta.27.tgz#6927971abc3b20ccaafaedb3e5613c0f746658e2"
-  integrity sha512-xZ+4UYx8eGeyIJNA6h8c2WvNwxrP5ZCjl2/HbRc6akpKZQBp2GZ8/b4Ls2eco3xhA/CRSk9yw+IcH7ifeqsPZg==
+"@polkadot/api-derive@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/api-derive/-/api-derive-0.100.0-beta.29.tgz#2cb0c93e8b7c3ee594908ecf33ce9ce09520ad2f"
+  integrity sha512-7NV+O9Gf9g74s6/YBaQW8iM52cxI99UpuZmW3u+JDnTzK1oJ0TtPahY45Cqxwzd+EuZVn+hhzcIzAE6qErBJjg==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/api" "^0.100.0-beta.27"
-    "@polkadot/types" "^0.100.0-beta.27"
+    "@polkadot/api" "^0.100.0-beta.29"
+    "@polkadot/types" "^0.100.0-beta.29"
 
-"@polkadot/api@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.100.0-beta.27.tgz#7a338fb49055fb1eb9d565981b78052798a77517"
-  integrity sha512-Ske6p+EdyuahTPXhQoSUBLRySaZuLxbCkLXHe4mVBQVB2wSTZ5kLjUhpHCg8L+XgBcWF/TKfqeA4wWr73HoexA==
+"@polkadot/api@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/api/-/api-0.100.0-beta.29.tgz#5dd7c979d50a7ccdbb3ed0d2ff955edc9b9682a8"
+  integrity sha512-luaT4zxW/KOufAIPTeV6S+R78yp9QNsfVSqssZCLmd4n8oJx/poMwCGGEozJDbH7mB92AUzCy8TKZsSHNT9J0Q==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/api-derive" "^0.100.0-beta.27"
+    "@polkadot/api-derive" "^0.100.0-beta.29"
     "@polkadot/keyring" "^1.8.1"
-    "@polkadot/metadata" "^0.100.0-beta.27"
-    "@polkadot/rpc-core" "^0.100.0-beta.27"
-    "@polkadot/rpc-provider" "^0.100.0-beta.27"
-    "@polkadot/types" "^0.100.0-beta.27"
+    "@polkadot/metadata" "^0.100.0-beta.29"
+    "@polkadot/rpc-core" "^0.100.0-beta.29"
+    "@polkadot/rpc-provider" "^0.100.0-beta.29"
+    "@polkadot/types" "^0.100.0-beta.29"
     "@polkadot/util-crypto" "^1.8.1"
 
 "@polkadot/dev-react@^0.32.14":
@@ -2226,10 +2226,10 @@
   dependencies:
     "@babel/runtime" "^7.7.7"
 
-"@polkadot/jsonrpc@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.27.tgz#a93c649eaadc582015f58dfcdb29d937a8d6775c"
-  integrity sha512-9YF6SoXhZCrzkfmFKkM1piMVnhIdKd0UBoBIbX+utLJblvOzP2ziF1uKBswzdyLtikC8Mi9wTKoFghcO46A01A==
+"@polkadot/jsonrpc@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/jsonrpc/-/jsonrpc-0.100.0-beta.29.tgz#94163d8847d4d1ebc957ddc293f9e8fcb1f19d2c"
+  integrity sha512-EJb2gVHgfgSMchmGMoz1A67L0FZSbVobFcUlQbM4J5n4EUUc+KEge3uG+fp44bNOHfkiwM5TT/8GKjyxK20YhQ==
   dependencies:
     "@babel/runtime" "^7.7.7"
 
@@ -2242,13 +2242,13 @@
     "@polkadot/util" "^1.8.1"
     "@polkadot/util-crypto" "^1.8.1"
 
-"@polkadot/metadata@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.100.0-beta.27.tgz#543cfa9dd0478ee796208e578f44113d4335e240"
-  integrity sha512-pvEfOHIRscKOxU6TPCQ5cHAie4X92BWVrbryV1myYhivGT/iLTdHVOskXAB/yZ7wwwX8kxLYeOABlRugSgtEAw==
+"@polkadot/metadata@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/metadata/-/metadata-0.100.0-beta.29.tgz#eb343f2318e4fd5028be654aae7a304c5a4fe8f4"
+  integrity sha512-3rwG9Pyj3c7dK1PQUQT6Rfypop/4D5B+ejyB0QtNhdRuVh1fOXuBVILr6OLb1svbS34a56EplpBqndE5QTaXTA==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/types" "^0.100.0-beta.27"
+    "@polkadot/types" "^0.100.0-beta.29"
     "@polkadot/util" "^1.8.1"
     "@polkadot/util-crypto" "^1.8.1"
 
@@ -2276,25 +2276,25 @@
     qrcode-generator "^1.4.4"
     react-qr-reader "^2.2.1"
 
-"@polkadot/rpc-core@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.27.tgz#d3ed58949baa4b6e20ee3aa91a92e913f2851b1e"
-  integrity sha512-2FJDQ4N4mAcgsy4ekZ8stmx7pKHBBxsZxmPWBW2Vxde08eNwGRKVDd/9keGDoNG2dJvc4uNioeleAp6RNEdNbA==
+"@polkadot/rpc-core@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-core/-/rpc-core-0.100.0-beta.29.tgz#552bd020b8320fe06254aa8ff0b2735f60102b4f"
+  integrity sha512-uHTbtXwXX8/keXaQA1KxQXD5DbuPDUxVayAz/FAr25UMYn0bxOKOfOIwCmmtQ33OmrR/TGRyEJDglP58lf50uA==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/jsonrpc" "^0.100.0-beta.27"
-    "@polkadot/rpc-provider" "^0.100.0-beta.27"
-    "@polkadot/types" "^0.100.0-beta.27"
+    "@polkadot/jsonrpc" "^0.100.0-beta.29"
+    "@polkadot/rpc-provider" "^0.100.0-beta.29"
+    "@polkadot/types" "^0.100.0-beta.29"
     "@polkadot/util" "^1.8.1"
     rxjs "^6.5.4"
 
-"@polkadot/rpc-provider@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.27.tgz#5122f5bd5fa10ee724ef728973559bf5e3e8413b"
-  integrity sha512-LNC13FA1A9UVPshUcMZPUFg5phFwk+heiTLm//W3x1dWtMB51HoSevWQISRDdhKIBYibqN8f9Fvyr/75JF/5rA==
+"@polkadot/rpc-provider@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/rpc-provider/-/rpc-provider-0.100.0-beta.29.tgz#45a570df5b20a9554825ea4f33a10dfc7557c89a"
+  integrity sha512-VmkFQg5rTmkAUulQmLP2cpaHqhnlFS7T2pH8srC2KbGEq1nl2QTDdOw8fgvUxtP6TZqyurtH5vPb9nfzhyiZqg==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/metadata" "^0.100.0-beta.27"
+    "@polkadot/metadata" "^0.100.0-beta.29"
     "@polkadot/util" "^1.8.1"
     "@polkadot/util-crypto" "^1.8.1"
     eventemitter3 "^4.0.0"
@@ -2308,13 +2308,13 @@
   dependencies:
     "@types/chrome" "^0.0.91"
 
-"@polkadot/types@^0.100.0-beta.27":
-  version "0.100.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.100.0-beta.27.tgz#8bdc1bc0d254a86ef24cf4684bef8be9f60ff60c"
-  integrity sha512-WR+G4HGrwnkZpR4QMa5R6OWAkcL7WzUEkvvpSiXms7x0AXuvJ0UtoNh7xR2MXBZoJdZQxZR9t4NR935DnA0pUQ==
+"@polkadot/types@^0.100.0-beta.29":
+  version "0.100.0-beta.29"
+  resolved "https://registry.yarnpkg.com/@polkadot/types/-/types-0.100.0-beta.29.tgz#a2941efdc825314316dc0d673552e2bce9c56a8e"
+  integrity sha512-2ezhVrVGcxemUVc13RgqGnrwi10hx/foARwvwen/Pj3ktY76wLSQYEmk5LH4UkGcSaEJ50yib/0sjLly9sxnzw==
   dependencies:
     "@babel/runtime" "^7.7.7"
-    "@polkadot/metadata" "^0.100.0-beta.27"
+    "@polkadot/metadata" "^0.100.0-beta.29"
     "@polkadot/util" "^1.8.1"
     "@polkadot/util-crypto" "^1.8.1"
     "@types/memoizee" "^0.4.3"