Bump API, cater for new OpenTip structure (#3096)

* Bump API, cater for new OpenTip structure

* Simplify assignment

* Cleanups after latest typescript-eslint breakages

* More...

* Last-ish round

package.json

@@ -12,12 +12,12 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.22.0-beta.4",
-    "@polkadot/api-contract": "^1.22.0-beta.4",
-    "@polkadot/keyring": "^2.16.0-beta.0",
-    "@polkadot/types": "^1.22.0-beta.4",
-    "@polkadot/util": "^2.16.0-beta.0",
-    "@polkadot/util-crypto": "^2.16.0-beta.0",
+    "@polkadot/api": "^1.22.1",
+    "@polkadot/api-contract": "^1.22.1",
+    "@polkadot/keyring": "^2.16.1",
+    "@polkadot/types": "^1.22.1",
+    "@polkadot/util": "^2.16.1",
+    "@polkadot/util-crypto": "^2.16.1",
     "babel-core": "^7.0.0-bridge.0"
   },
   "scripts": {
@@ -59,7 +59,7 @@
     "@babel/register": "^7.10.3",
     "@babel/runtime": "^7.10.3",
     "@pinata/sdk": "^1.1.10",
-    "@polkadot/dev": "^0.55.13",
+    "@polkadot/dev": "^0.55.16",
     "@polkadot/ts": "^0.3.26",
     "@types/bn.js": "^4.11.6",
     "@types/chart.js": "^2.9.22",

packages/apps-electron/package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@babel/core": "^7.10.3",
     "@babel/polyfill": "^7.10.1",
-    "@polkadot/dev": "^0.55.13",
+    "@polkadot/dev": "^0.55.16",
     "@polkadot/react-components": "0.47.0-beta.39",
     "electron-log": "^4.2.2",
     "electron-updater": "^4.3.1"

packages/apps/package.json

@@ -16,7 +16,7 @@
     "@babel/core": "^7.10.3",
     "@babel/polyfill": "^7.10.1",
     "@babel/runtime": "^7.10.3",
-    "@polkadot/dev": "^0.55.13",
+    "@polkadot/dev": "^0.55.16",
     "@polkadot/react-components": "0.47.0-beta.39",
     "@polkadot/react-signer": "0.47.0-beta.39",
     "query-string": "^6.13.1"

packages/page-123code/src/Summary.tsx

@@ -2,15 +2,11 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
+import { BareProps as Props } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
 
-interface Props extends BareProps {
-  children: React.ReactNode;
-}
-
 function Summary ({ children, className = '' }: Props): React.ReactElement<Props> {
   return (
     <div className={className}>

packages/page-accounts/src/Accounts/Account.tsx

@@ -6,7 +6,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { DeriveBalancesAll, DeriveDemocracyLock } from '@polkadot/api-derive/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { RecoveryConfig } from '@polkadot/types/interfaces';
-import { SortedAccount } from './types';
+import { KeyringAddress } from '@polkadot/ui-keyring/types';
 
 import BN from 'bn.js';
 import React, { useCallback, useContext, useState, useEffect } from 'react';
@@ -32,9 +32,11 @@ import Transfer from './modals/Transfer';
 import useMultisigApprovals from './useMultisigApprovals';
 import useProxies from './useProxies';
 
-interface Props extends SortedAccount {
+interface Props {
+  account: KeyringAddress;
   className?: string;
   filter: string;
+  isFavorite: boolean;
   setBalance: (address: string, value: BN) => void;
   toggleFavorite: (address: string) => void;
 }

packages/page-accounts/src/Accounts/index.tsx

@@ -2,8 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { KeyringAddress } from '@polkadot/ui-keyring/types';
-import { ComponentProps as Props } from '../types';
 import { SortedAccount } from './types';
 
 import BN from 'bn.js';
@@ -31,6 +31,11 @@ interface Balances {
   balanceTotal?: BN;
 }
 
+interface Props {
+  className?: string;
+  onStatusChange: (status: ActionStatus) => void;
+}
+
 const STORE_FAVS = 'accounts:favorites';
 
 // query the ledger for the address, adding it to the keyring

packages/page-accounts/src/Accounts/modals/Backup.tsx

@@ -2,8 +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 { BareProps } from '@polkadot/react-components/types';
-
 import FileSaver from 'file-saver';
 import React, { useCallback, useMemo, useState } from 'react';
 import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
@@ -11,7 +9,7 @@ import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../../translate';
 
-interface Props extends BareProps {
+interface Props {
   onClose: () => void;
   address: string;
 }

packages/page-accounts/src/Accounts/modals/Create.tsx

@@ -25,6 +25,8 @@ import CreateConfirmation from './CreateConfirmation';
 
 interface Props extends ModalProps {
   className?: string;
+  onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
   seed?: string;
   type?: KeypairType;
 }

packages/page-accounts/src/Accounts/modals/Import.tsx

@@ -15,6 +15,8 @@ import { useTranslation } from '../../translate';
 
 interface Props extends ModalProps {
   className?: string;
+  onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
 }
 
 interface FileState {

packages/page-accounts/src/Accounts/modals/MultisigCreate.tsx

@@ -18,6 +18,7 @@ import useKnownAddresses from '../useKnownAddresses';
 interface Props extends ModalProps {
   className?: string;
   onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
 }
 
 interface CreateOptions {

packages/page-accounts/src/Accounts/modals/ProxyAdd.tsx

@@ -16,6 +16,7 @@ import useProxies from '../useProxies';
 interface Props extends ModalProps {
   className?: string;
   onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
 }
 
 interface CreateOptions {

packages/page-accounts/src/Accounts/modals/Qr.tsx

@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { ModalProps } from '../../types';
 
 import React, { useCallback, useState } from 'react';
@@ -22,6 +23,8 @@ interface Scanned {
 
 interface Props extends ModalProps {
   className?: string;
+  onClose: () => void;
+  onStatusChange: (status: ActionStatus) => void;
 }
 
 function QrModal ({ className = '', onClose, onStatusChange }: Props): React.ReactElement<Props> {

packages/page-accounts/src/Contacts/Address.tsx

@@ -5,7 +5,6 @@
 import { DeriveAccountInfo, DeriveBalancesAll } from '@polkadot/api-derive/types';
 import { KeyringAddress } from '@polkadot/ui-keyring/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
-import { BareProps } from '@polkadot/react-components/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -17,8 +16,9 @@ import { BN_ZERO, formatNumber } from '@polkadot/util';
 import Transfer from '../Accounts/modals/Transfer';
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps {
+interface Props {
   address: string;
+  className?: string;
   filter: string;
   isFavorite: boolean;
   toggleFavorite: (address: string) => void;

packages/page-accounts/src/Sidebar/RegistrarJudgement.tsx

@@ -2,14 +2,12 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-api/types';
-
 import React, { useEffect, useState } from 'react';
 import { Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps {
+interface Props {
   address: string;
   registrars: { address: string; index: number }[];
   toggleJudgement: () => void;

packages/page-accounts/src/Sidebar/Sidebar.tsx

@@ -2,8 +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 { BareProps } from '@polkadot/react-components/types';
-
 import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import { useAccountInfo, useToggle } from '@polkadot/react-hooks';
@@ -17,8 +15,9 @@ import Flags from './Flags';
 import Identity from './Identity';
 import Multisig from './Multisig';
 
-interface Props extends BareProps {
+interface Props {
   address: string;
+  className?: string;
   onClose: () => void;
   onUpdateName: () => void;
 }

packages/page-accounts/src/Vanity/Match.tsx

@@ -2,15 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
-
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import { Button, IdentityIcon } from '@polkadot/react-components';
 import { u8aToHex } from '@polkadot/util';
 
-interface Props extends BareProps {
+interface Props {
   address: string;
+  className?: string;
   count: number;
   offset: number;
   onCreateToggle: (seed: string) => void;

packages/page-accounts/src/Vanity/index.tsx

@@ -2,9 +2,9 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
 import { GeneratorMatches, GeneratorMatch, GeneratorResult } from '@polkadot/vanitygen/types';
-import { ComponentProps as Props } from '../types';
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
@@ -19,6 +19,11 @@ import CreateModal from '../Accounts/modals/Create';
 import { useTranslation } from '../translate';
 import Match from './Match';
 
+interface Props {
+  className?: string;
+  onStatusChange: (status: ActionStatus) => void;
+}
+
 interface Match {
   isMatchValid: boolean;
   match: string;

packages/page-accounts/src/types.ts

@@ -2,18 +2,17 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AppProps } from '@polkadot/react-components/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 
 import { WithTranslation } from 'react-i18next';
 
+export { AppProps as ComponentProps } from '@polkadot/react-components/types';
+
 export interface BareProps {
   className?: string;
 }
 
-export type I18nProps = BareProps & WithTranslation;
-
-export type ComponentProps = AppProps;
+export interface I18nProps extends BareProps, WithTranslation {}
 
 export interface ModalProps {
   onClose: () => void;

packages/page-contracts/package.json

@@ -12,6 +12,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.10.3",
-    "@polkadot/api-contract": "^1.22.0-beta.4"
+    "@polkadot/api-contract": "^1.22.1"
   }
 }

packages/page-contracts/src/Codes/Code.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 { BareProps } from '@polkadot/react-components/types';
 import { CodeStored } from '../types';
 
 import React, { useCallback } from 'react';
@@ -16,7 +15,8 @@ import store from '../store';
 import useAbi from '../useAbi';
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   code: CodeStored;
   onShowDeploy: (codeHash?: string, constructorIndex?: number) => () => void;
 }

packages/page-contracts/src/Contracts/Call.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ContractCallOutcome } from '@polkadot/api-contract/types';
-import { BareProps, StringOrNull } from '@polkadot/react-components/types';
+import { StringOrNull } from '@polkadot/react-components/types';
 
 import BN from 'bn.js';
 import React, { useCallback, useState, useEffect, useMemo } from 'react';
@@ -20,9 +20,10 @@ import { useTranslation } from '../translate';
 import { getCallMessageOptions } from './util';
 import useWeight from '../useWeight';
 
-interface Props extends BareProps {
+interface Props {
   callContract: ApiContract | null;
   callMessageIndex: number | null;
+  className?: string;
   isOpen: boolean;
   onChangeCallContractAddress: (callContractAddress: StringOrNull) => void;
   onChangeCallMessageIndex: (callMessageIndex: number) => void;

packages/page-contracts/src/Contracts/Contract.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 { BareProps } from '@polkadot/react-components/types';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 
 import React, { useCallback } from 'react';
@@ -15,7 +14,8 @@ import { useToggle } from '@polkadot/react-hooks';
 import Messages from '../shared/Messages';
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   contract: ApiContract;
   onCall: (_?: number) => () => void;
 }

packages/page-contracts/src/Contracts/Outcome.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { ContractCallOutcome } from '@polkadot/api-contract/types';
-import { BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,7 +10,8 @@ import { AddressMini, Button, Output } from '@polkadot/react-components';
 
 import MessageSignature from '../shared/MessageSignature';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   onClear?: () => void;
   outcome: ContractCallOutcome;
 }

packages/page-contracts/src/shared/ABI.tsx

@@ -2,8 +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 { BareProps } from '@polkadot/react-components/types';
-
 import React from 'react';
 import styled from 'styled-components';
 import { Abi } from '@polkadot/api-contract';
@@ -12,7 +10,8 @@ import { InputFile, Labelled } from '@polkadot/react-components';
 import Messages from './Messages';
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   contractAbi?: Abi | null;
   errorText?: string | null;
   isContract?: boolean;

packages/page-contracts/src/shared/CodeRow.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { CodeStored } from '@polkadot/app-contracts/types';
-import { BareProps } from '@polkadot/react-components/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -15,8 +14,10 @@ import { CopyButton, Icon } from '@polkadot/react-components';
 
 import contracts from '../store';
 
-interface Props extends BareProps {
+interface Props {
   buttons?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
   code: CodeStored;
   isInline?: boolean;
   withTags?: boolean;

packages/page-contracts/src/shared/InputMegaGas.tsx

@@ -2,18 +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 { BareProps } from '@polkadot/react-components/types';
-import { UseWeight } from '../types';
-
+import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { InputNumber, Progress } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps, UseWeight {
+interface Props {
+  className?: string;
+  executionTime: number;
   help: React.ReactNode;
+  isValid: boolean;
   label: React.ReactNode;
+  megaGas: BN;
+  percentage: number;
+  setMegaGas: (value?: BN) => void;
 }
 
 function InputMegaGas ({ className, executionTime, help, isValid, label, megaGas, percentage, setMegaGas }: Props): React.ReactElement<Props> {
@@ -60,11 +64,11 @@ export default React.memo(
         .contracts--InputMegaGas-meter {
           flex: 1;
           padding: 0.8rem 0.8rem 0;
-    
+
           aside {
             float: right;
           }
-    
+
           .contracts--InputMegaGas-progress {
             margin-top: 0.4rem;
             position: relative;
@@ -73,7 +77,7 @@ export default React.memo(
             right: 0;
           }
         }
-    
+
       }
     }
 

packages/page-contracts/src/shared/InputName.tsx

@@ -2,14 +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 { BareProps, VoidFn } from '@polkadot/react-components/types';
+import { VoidFn } from '@polkadot/react-components/types';
 
 import React from 'react';
 import { Input } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   isBusy?: boolean;
   isContract?: boolean;
   isError?: boolean;

packages/page-contracts/src/shared/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 { BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -14,8 +13,9 @@ import { useTranslation } from '../translate';
 
 const MAX_PARAM_LENGTH = 20;
 
-export interface Props extends BareProps {
+export interface Props {
   asConstructor?: boolean;
+  className?: string;
   message: ContractABIMessage;
   params?: any[];
   withTooltip?: boolean;

packages/page-contracts/src/shared/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 { BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -14,8 +13,9 @@ import { Button, Expander, IconLink } from '@polkadot/react-components';
 import MessageSignature from './MessageSignature';
 import { useTranslation } from '../translate';
 
-export interface Props extends BareProps {
+export interface Props {
   address?: string;
+  className?: string;
   contractAbi: Abi;
   isLabelled?: boolean;
   isRemovable: boolean;

packages/page-council/src/Overview/Candidates.tsx

@@ -2,8 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveElectionsInfo } from '@polkadot/api-derive/types';
 import { AccountId } from '@polkadot/types/interfaces';
-import { ComponentProps } from './types';
 
 import React, { useMemo } from 'react';
 import { Table } from '@polkadot/react-components';
@@ -11,9 +11,10 @@ import { Table } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import Candidate from './Candidate';
 
-interface Props extends ComponentProps {
+interface Props {
   allVotes?: Record<string, AccountId[]>;
   className?: string;
+  electionsInfo?: DeriveElectionsInfo;
 }
 
 function Candidates ({ allVotes = {}, electionsInfo }: Props): React.ReactElement<Props> {

packages/page-council/src/Overview/Members.tsx

@@ -2,8 +2,8 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveElectionsInfo } from '@polkadot/api-derive/types';
 import { AccountId } from '@polkadot/types/interfaces';
-import { ComponentProps } from './types';
 
 import React, { useMemo } from 'react';
 import { Table } from '@polkadot/react-components';
@@ -11,9 +11,10 @@ import { Table } from '@polkadot/react-components';
 import { useTranslation } from '../translate';
 import Candidate from './Candidate';
 
-interface Props extends ComponentProps {
+interface Props {
   allVotes?: Record<string, AccountId[]>;
   className?: string;
+  electionsInfo?: DeriveElectionsInfo;
   prime?: AccountId | null;
 }
 

packages/page-council/src/Overview/Summary.tsx

@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveElectionsInfo } from '@polkadot/api-derive/types';
 import { BlockNumber } from '@polkadot/types/interfaces';
 import { ComponentProps } from './types';
 
@@ -14,6 +15,7 @@ import { useTranslation } from '../translate';
 interface Props extends ComponentProps {
   bestNumber?: BlockNumber;
   className?: string;
+  electionsInfo?: DeriveElectionsInfo;
 }
 
 function Summary ({ bestNumber, className = '', electionsInfo }: Props): React.ReactElement<Props> | null {

packages/page-council/src/index.tsx

@@ -5,7 +5,6 @@
 import { Option } from '@polkadot/types';
 import { AccountId } from '@polkadot/types/interfaces';
 import { DeriveCollectiveProposals } from '@polkadot/api-derive/types';
-import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
@@ -21,7 +20,10 @@ import { useTranslation } from './translate';
 
 export { useCounter };
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+  className?: string;
+}
 
 function CouncilApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

packages/page-democracy/src/index.tsx

@@ -2,8 +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 { AppProps, BareProps } from '@polkadot/react-components/types';
-
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
@@ -15,7 +13,9 @@ import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+}
 
 const hidden = uiSettings.uiMode === 'full'
   ? []

packages/page-explorer/src/BestHash.tsx

@@ -3,12 +3,12 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Header } from '@polkadot/types/interfaces';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
 
 import React from 'react';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
-interface Props extends BareProps, CallProps {
+interface Props {
+  className?: string;
   label?: React.ReactNode;
 }
 

packages/page-explorer/src/BlockHeader.tsx

@@ -2,15 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
-
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { HeaderExtended } from '@polkadot/api-derive';
 import { AddressMini } from '@polkadot/react-components';
 import { formatNumber } from '@polkadot/util';
 
-interface Props extends BareProps {
+interface Props {
   value: HeaderExtended;
 }
 

packages/page-explorer/src/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 { AppProps, BareProps } from '@polkadot/react-components/types';
 import { KeyedEvent } from './types';
 
 import React, { useContext, useMemo } from 'react';
@@ -19,7 +18,9 @@ import Main from './Main';
 import NodeInfo from './NodeInfo';
 import { useTranslation } from './translate';
 
-interface Props extends AppProps, BareProps {
+interface Props {
+  basePath: string;
+  className?: string;
   newEvents?: KeyedEvent[];
 }
 

packages/page-extrinsics/src/Balance.tsx

@@ -2,14 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-api/types';
-
 import React from 'react';
 import { DeriveBalancesAll } from '@polkadot/api-derive/types';
 import { InputBalance } from '@polkadot/react-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   label?: React.ReactNode;
   params?: any;
 }

packages/page-generic-asset/src/AssetRow.tsx

@@ -4,11 +4,17 @@
 
 import React, { useState } from 'react';
 import { CopyButton } from '@polkadot/react-components';
-import Row, { RowProps } from '@polkadot/react-components/Row';
+import Row from '@polkadot/react-components/Row';
 
 import { useTranslation } from './translate';
 
-interface Props extends Omit<RowProps, 'onSaveName'> {
+interface Props {
+  buttons?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+  defaultName?: string;
+  isDisabled?: boolean;
+  isInline?: boolean;
   onSaveName: (name: string) => void;
   assetId: string;
 }

packages/page-generic-asset/src/index.tsx

@@ -2,8 +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 { AppProps, BareProps } from '@polkadot/react-components/types';
-
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
@@ -13,7 +11,9 @@ import Assets from './Assets';
 
 import { useTranslation } from './translate';
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+}
 
 function AssetApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

packages/page-generic-asset/src/modals/Create.tsx

@@ -16,6 +16,8 @@ export interface ModalProps {
 
 interface Props extends ModalProps {
   className?: string;
+  onClose: () => void;
+  onRegister: (id: BN, name: string) => void;
 }
 
 function Create ({ onClose, onRegister }: Props): React.ReactElement<Props> {

packages/page-js/src/ActionButtons.tsx

@@ -2,15 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
-
 import React, { useCallback, useState } from 'react';
 import { Button as SUIB, Popup } from 'semantic-ui-react';
 import { Button, Input } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   isCustomExample: boolean;
   isRunning: boolean;
   removeSnippet: () => void;

packages/page-js/src/Output.tsx

@@ -2,15 +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 { BareProps } from '@polkadot/react-components/types';
 import { Log } from './types';
 
 import React from 'react';
 import styled from 'styled-components';
 import { isError, isNull, isUndefined } from '@polkadot/util';
 
-interface Props extends BareProps {
+interface Props {
   children?: React.ReactNode;
+  className?: string;
   logs: Log[];
 }
 

packages/page-parachains/src/Overview/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveParachain } from '@polkadot/api-derive/types';
-import { ComponentProps as Props } from '../types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -16,6 +15,11 @@ import Summary from './Summary';
 
 import { useTranslation } from '../translate';
 
+interface Props {
+  isMine?: boolean;
+  sudoKey?: string;
+}
+
 function Overview ({ isMine, sudoKey }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();

packages/page-parachains/src/Parachain/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveParachainInfo, DeriveParachainFull } from '@polkadot/api-derive/types';
-import { ComponentProps } from '../types';
 
 import React from 'react';
 import { useHistory, useParams } from 'react-router-dom';
@@ -19,9 +18,12 @@ import Details from './Details';
 
 import { useTranslation } from '../translate';
 
-interface Props extends ComponentProps {
+interface Props {
   basePath: string;
+  className?: string;
+  isMine?: boolean;
   paraInfoRef: React.MutableRefObject<DeriveParachainInfo | null>;
+  sudoKey?: string;
 }
 
 function Parachain ({ basePath, className = '', isMine, paraInfoRef, sudoKey }: Props): React.ReactElement<Props> {

packages/page-parachains/src/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveParachainInfo } from '@polkadot/api-derive/types';
-import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React, { useMemo, useRef } from 'react';
 import { matchPath, Route, Switch } from 'react-router';
@@ -16,7 +15,9 @@ import Parachain from './Parachain';
 import { useTranslation } from './translate';
 import { parachainName } from './util';
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+}
 
 function ParachainsApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

packages/page-parachains/src/types.ts

@@ -1,9 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-parachains authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { UseSudo } from '@polkadot/react-hooks/types';
-
-export interface ComponentProps extends UseSudo {
-  className?: string;
-}

packages/page-settings/src/Developer.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AppProps as Props } from '@polkadot/react-components/types';
+import { ActionStatus } from '@polkadot/react-components/Status/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { Trans } from 'react-i18next';
@@ -25,6 +25,11 @@ interface AllState {
   typesPlaceholder: string | null;
 }
 
+interface Props {
+  className?: string;
+  onStatusChange: (status: ActionStatus) => void;
+}
+
 function Developer ({ className = '', onStatusChange }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [code, setCode] = useState(EMPTY_CODE);

packages/page-settings/src/Metadata/ChainColorIndicator.tsx

@@ -5,10 +5,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { BareProps } from '@polkadot/react-components/types';
-
-interface Props extends BareProps {
+interface Props {
   color: string;
+  className?: string;
 }
 
 function ChainColorIndicator ({ className = '', color }: Props): React.ReactElement<Props> {

packages/page-society/src/Overview/Candidates.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveSocietyCandidate } from '@polkadot/api-derive/types';
-import { OwnMembers } from '../types';
 
 import React, { useMemo } from 'react';
 import { Table } from '@polkadot/react-components';
@@ -12,8 +11,11 @@ import { useApi, useCall } from '@polkadot/react-hooks';
 import { useTranslation } from '../translate';
 import Candidate from './Candidate';
 
-interface Props extends OwnMembers {
+interface Props {
+  allMembers: string[];
   className?: string;
+  isMember: boolean;
+  ownMembers: string[];
 }
 
 function Candidates ({ allMembers, className = '', isMember, ownMembers }: Props): React.ReactElement<Props> {

packages/page-society/src/Overview/Defender.tsx

@@ -4,7 +4,7 @@
 
 import { DeriveSociety, DeriveSocietyMember } from '@polkadot/api-derive/types';
 import { SocietyVote } from '@polkadot/types/interfaces';
-import { OwnMembers, VoteType } from '../types';
+import { VoteType } from '../types';
 
 import React, { useMemo } from 'react';
 import { AddressSmall, Table } from '@polkadot/react-components';
@@ -14,9 +14,11 @@ import { useTranslation } from '../translate';
 import DefenderVoting from './DefenderVoting';
 import Votes from './Votes';
 
-interface Props extends OwnMembers {
+interface Props {
   className?: string;
   info?: DeriveSociety;
+  isMember: boolean;
+  ownMembers: string[];
 }
 
 function Defender ({ className = '', info, isMember, ownMembers }: Props): React.ReactElement<Props> | null {

packages/page-society/src/Overview/index.tsx

@@ -28,7 +28,6 @@ function Overview ({ className }: Props): React.ReactElement<Props> {
     <div className={className}>
       <Summary info={info} />
       <Defender
-        allMembers={allMembers}
         info={info}
         isMember={isMember}
         ownMembers={ownMembers}

packages/page-society/src/index.tsx

@@ -2,8 +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 { AppProps, BareProps } from '@polkadot/react-components/types';
-
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { Tabs } from '@polkadot/react-components';
@@ -11,7 +9,10 @@ import { Tabs } from '@polkadot/react-components';
 import Overview from './Overview';
 import { useTranslation } from './translate';
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+  className?: string;
+}
 
 function SocietyApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

packages/page-staking/src/Overview/index.tsx

@@ -3,13 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveStakingOverview } from '@polkadot/api-derive/types';
-import { BareProps } from '@polkadot/react-components/types';
 
 import React from 'react';
 
 import CurrentList from './CurrentList';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   hasQueries: boolean;
   isIntentions?: boolean;
   next?: string[];

packages/page-storage/src/Queries.tsx

@@ -2,14 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from '@polkadot/react-components/types';
 import { QueryTypes } from './types';
 
 import React from 'react';
 
 import Query from './Query';
 
-interface Props extends BareProps {
+interface Props {
   onRemove: (id: number) => void;
   value?: QueryTypes[];
 }

packages/page-sudo/src/SetKey.tsx

@@ -1,17 +1,20 @@
 // Copyright 2017-2020 @polkadot/app-js authors & contributors
 // 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 { AddressMini, Icon, InputAddress, Labelled, TxButton } from '@polkadot/react-components';
-import { ComponentProps } from './types';
 
 import styled from 'styled-components';
 
 import { useTranslation } from './translate';
 
-interface Props extends I18nProps, ComponentProps {}
+interface Props {
+  allAccounts: string[];
+  className?: string;
+  isMine?: boolean;
+  sudoKey?: string;
+}
 
 function SetKey ({ allAccounts, className = '', isMine, sudoKey }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

packages/page-tech-comm/src/index.tsx

@@ -4,7 +4,6 @@
 
 import { Option } from '@polkadot/types';
 import { AccountId, Hash } from '@polkadot/types/interfaces';
-import { AppProps, BareProps } from '@polkadot/react-components/types';
 
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
@@ -17,7 +16,10 @@ import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+  className?: string;
+}
 
 function TechCommApp ({ basePath, className }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

packages/page-toolbox/src/Rpc/Results.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 { BareProps } from '@polkadot/react-components/types';
 import { QueueTx } from '@polkadot/react-components/Status/types';
 import { Codec } from '@polkadot/types/types';
 
@@ -10,7 +9,7 @@ import React from 'react';
 import { Output } from '@polkadot/react-components';
 import { isUndefined } from '@polkadot/util';
 
-interface Props extends BareProps {
+interface Props {
   queue: QueueTx[];
 }
 

packages/page-treasury/src/Overview/Tip.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { AccountId, Balance, BlockNumber, OpenTip } from '@polkadot/types/interfaces';
+import { AccountId, Balance, BlockNumber, OpenTip, OpenTipTo225 } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -10,7 +10,7 @@ import { AddressSmall, AddressMini, Expander, Icon, TxButton } from '@polkadot/r
 import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
 import { BlockToTime, FormatBalance } from '@polkadot/react-query';
 import { Option } from '@polkadot/types';
-import { formatNumber } from '@polkadot/util';
+import { formatNumber, isBoolean } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import TipClose from './TipClose';
@@ -27,30 +27,44 @@ interface Props {
 
 interface TipState {
   closesAt: BlockNumber | null;
+  deposit: Balance | null;
   finder: AccountId | null;
-  findersFee: Balance | null;
   isFinder: boolean;
   isTipper: boolean;
 }
 
+function isCurrentTip (tip: OpenTip | OpenTipTo225): tip is OpenTip {
+  return isBoolean((tip as OpenTip).findersFee);
+}
+
 function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
   const { allAccounts } = useAccounts();
-  const [{ closesAt, finder, findersFee, isFinder, isTipper }, setTipState] = useState<TipState>({ closesAt: null, finder: null, findersFee: null, isFinder: false, isTipper: false });
-  const tip = useCall<OpenTip | null>(api.query.treasury.tips, [hash], {
+  const [{ closesAt, deposit, finder, isFinder, isTipper }, setTipState] = useState<TipState>({ closesAt: null, deposit: null, finder: null, isFinder: false, isTipper: false });
+  const tip = useCall<OpenTip | OpenTipTo225 | null>(api.query.treasury.tips, [hash], {
     transform: (optTip: Option<OpenTip>) => optTip.unwrapOr(null)
   });
 
   useEffect((): void => {
     if (tip) {
-      const finderInfo = tip.finder.unwrapOr(null);
-      const finder = (finderInfo && finderInfo[0]) || null;
+      let finder: AccountId | null = null;
+      let deposit: Balance | null = null;
+
+      if (isCurrentTip(tip)) {
+        finder = tip.finder;
+        deposit = tip.deposit;
+      } else if (tip.finder.isSome) {
+        const finderInfo = tip.finder.unwrap();
+
+        finder = finderInfo[0];
+        deposit = finderInfo[1];
+      }
 
       setTipState({
         closesAt: tip.closes.unwrapOr(null),
+        deposit,
         finder,
-        findersFee: (finderInfo && finderInfo[1]) || null,
         isFinder: !!finder && allAccounts.includes(finder.toString()),
         isTipper: tip.tips.some(([address]) => allAccounts.includes(address.toString()))
       });
@@ -74,8 +88,8 @@ function Tip ({ bestNumber, className = '', hash, isMember, members }: Props): R
         )}
       </td>
       <td className='number'>
-        {findersFee && (
-          <FormatBalance value={findersFee} />
+        {deposit && !deposit.isEmpty && (
+          <FormatBalance value={deposit} />
         )}
       </td>
       <TipReason hash={reason} />

packages/page-treasury/src/Overview/Tips.tsx

@@ -26,7 +26,7 @@ function Tips ({ className = '', hashes, isMember, members }: Props): React.Reac
   const header = useMemo(() => [
     [t('tips'), 'start'],
     [t('finder'), 'address'],
-    [t('fee')],
+    [t('deposit')],
     [t('reason'), 'start'],
     [],
     [],

packages/page-treasury/src/index.tsx

@@ -2,8 +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 { AppProps, BareProps } from '@polkadot/react-components/types';
-
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
@@ -15,7 +13,9 @@ import { useTranslation } from './translate';
 
 export { default as useCounter } from './useCounter';
 
-interface Props extends AppProps, BareProps {}
+interface Props {
+  basePath: string;
+}
 
 function TreasuryApp ({ basePath }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();

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.10.3",
-    "@polkadot/api": "^1.22.0-beta.4",
+    "@polkadot/api": "^1.22.1",
     "@polkadot/extension-dapp": "^0.32.0-beta.1",
     "rxjs-compat": "^6.5.5"
   }

packages/react-api/src/Api.tsx

@@ -158,7 +158,7 @@ function Api ({ children, store, url }: Props): React.ReactElement<Props> | null
   const [isApiConnected, setIsApiConnected] = useState(false);
   const [isApiInitialized, setIsApiInitialized] = useState(false);
   const [extensions, setExtensions] = useState<InjectedExtension[] | undefined>();
-  const props = useMemo<ApiProps>(
+  const value = useMemo<ApiProps>(
     () => ({ ...state, api, extensions, isApiConnected, isApiInitialized, isWaitingInjected: !extensions }),
     [extensions, isApiConnected, isApiInitialized, state]
   );
@@ -182,18 +182,18 @@ function Api ({ children, store, url }: Props): React.ReactElement<Props> | null
 
     injectedPromise
       .then(setExtensions)
-      .catch((error) => console.error(error));
+      .catch((error: Error) => console.error(error));
 
     setIsApiInitialized(true);
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  if (!props.isApiInitialized) {
+  if (!value.isApiInitialized) {
     return null;
   }
 
   return (
-    <ApiContext.Provider value={props}>
+    <ApiContext.Provider value={value}>
       {children}
     </ApiContext.Provider>
   );

packages/react-components/package.json

@@ -14,15 +14,15 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.29",
     "@fortawesome/free-solid-svg-icons": "^5.13.1",
     "@fortawesome/react-fontawesome": "^0.1.11",
-    "@polkadot/keyring": "^2.16.0-beta.0",
+    "@polkadot/keyring": "^2.16.1",
     "@polkadot/react-api": "0.47.0-beta.39",
     "@polkadot/react-identicon": "^0.55.0-beta.3",
     "@polkadot/react-qr": "^0.55.0-beta.3",
     "@polkadot/react-query": "0.47.0-beta.39",
     "@polkadot/ui-keyring": "^0.55.0-beta.3",
     "@polkadot/ui-settings": "^0.55.0-beta.3",
-    "@polkadot/util": "^2.16.0-beta.0",
-    "@polkadot/util-crypto": "^2.16.0-beta.0",
+    "@polkadot/util": "^2.16.1",
+    "@polkadot/util-crypto": "^2.16.1",
     "chart.js": "^2.9.3",
     "codeflask": "^1.4.1",
     "i18next": "^19.5.1",

packages/react-components/src/AccountIndex.tsx

@@ -4,14 +4,14 @@
 
 import { AccountId, Address } from '@polkadot/types/interfaces';
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { BareProps } from '@polkadot/react-api/types';
 
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { useApi, useCall } from '@polkadot/react-hooks';
 
-interface Props extends BareProps {
+interface Props {
   children?: React.ReactNode;
+  className?: string;
   defaultValue?: string;
   label?: React.ReactNode;
   value?: string | AccountId | Address | null | Uint8Array;

packages/react-components/src/AccountName.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveAccountInfo, DeriveAccountRegistration } from '@polkadot/api-derive/types';
-import { BareProps } from '@polkadot/react-api/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
@@ -17,8 +16,9 @@ import { getAddressName } from './util';
 import Badge from './Badge';
 import Icon from './Icon';
 
-interface Props extends BareProps {
+interface Props {
   children?: React.ReactNode;
+  className?: string;
   defaultName?: string;
   label?: React.ReactNode;
   noLookup?: boolean;

packages/react-components/src/AddressInfo.tsx

@@ -4,7 +4,6 @@
 
 import { DeriveBalancesAll, DeriveDemocracyLock, DeriveStakingAccount } from '@polkadot/api-derive/types';
 import { LockIdentifier, ValidatorPrefsTo145 } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -45,10 +44,11 @@ export interface ValidatorPrefsType {
   validatorPayment?: boolean;
 }
 
-interface Props extends BareProps {
+interface Props {
   address: string;
   balancesAll?: DeriveBalancesAll;
   children?: React.ReactNode;
+  className?: string;
   democracyLocks?: DeriveDemocracyLock[];
   extraInfo?: [string, string][];
   stakingInfo?: DeriveStakingAccount;

packages/react-components/src/AddressMini.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -17,10 +16,11 @@ import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
 import LockedVote from './LockedVote';
 
-interface Props extends BareProps {
+interface Props {
   balance?: BN | BN[];
   bonded?: BN | BN[];
   children?: React.ReactNode;
+  className?: string;
   iconInfo?: React.ReactNode;
   isHighlight?: boolean;
   isPadded?: boolean;

packages/react-components/src/Available.tsx

@@ -3,14 +3,14 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
 
 import React from 'react';
 import { Available } from '@polkadot/react-query';
 
 import { classes } from './util';
 
-export interface Props extends BareProps {
+export interface Props {
+  className?: string;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
 }

packages/react-components/src/Balance.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -12,14 +11,15 @@ import { BN_ZERO } from '@polkadot/util';
 
 import { classes } from './util';
 
-export interface RenderProps extends BareProps {
+export interface RenderProps {
   className?: string;
   label?: React.ReactNode;
   value?: BN | BN[];
 }
 
-export interface Props extends BareProps {
+export interface Props {
   balance?: BN | BN[];
+  className?: string;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
   withLabel?: boolean;

packages/react-components/src/Bonded.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React from 'react';
@@ -12,8 +11,9 @@ import { Bonded } from '@polkadot/react-query';
 import { renderProvided } from './Balance';
 import { classes } from './util';
 
-export interface Props extends BareProps {
+export interface Props {
   bonded?: BN | BN[];
+  className?: string;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | Uint8Array | null;
   withLabel?: boolean;

packages/react-components/src/Bubble.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 { BareProps } from './types';
 import { SemanticCOLORS, SemanticICONS } from 'semantic-ui-react/dist/commonjs/generic';
 
 import React from 'react';
@@ -12,8 +11,9 @@ import styled from 'styled-components';
 import { classes } from './util';
 import Icon from './Icon';
 
-interface Props extends BareProps {
+interface Props {
   children: React.ReactNode;
+  className?: string;
   color?: SemanticCOLORS;
   icon?: SemanticICONS;
   label?: React.ReactNode;

packages/react-components/src/Button/types.ts

@@ -8,7 +8,9 @@ import { BareProps } from '../types';
 
 export type Button$Callback = () => void | Promise<void>;
 
-export interface ButtonProps extends BareProps {
+export interface ButtonProps {
+  children?: React.ReactNode;
+  className?: string;
   floated?: 'left' | 'right';
   icon?: IconName;
   isAnimated?: SUIButtonProps['animated'];
@@ -34,14 +36,15 @@ export interface ButtonProps extends BareProps {
 
 export type DividerProps = BareProps;
 
-export interface ContentProps extends BareProps {
+export interface ContentProps {
   children?: React.ReactNode;
   hidden?: boolean;
   visible?: boolean;
 }
 
-export interface GroupProps extends BareProps {
+export interface GroupProps {
   children?: React.ReactNode;
+  className?: string;
   isBasic?: boolean;
   isCentered?: boolean;
 }

packages/react-components/src/Call.tsx

@@ -4,7 +4,6 @@
 
 import { Hash } from '@polkadot/types/interfaces';
 import { Codec, IExtrinsic, IMethod, TypeDef } from '@polkadot/types/types';
-import { BareProps } from './types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -17,8 +16,9 @@ import Static from './Static';
 import { classes } from './util';
 import { useTranslation } from './translate';
 
-export interface Props extends BareProps {
+export interface Props {
   children?: React.ReactNode;
+  className?: string;
   labelHash?: React.ReactNode;
   mortality?: string;
   onError?: () => void;

packages/react-components/src/CardSummary.tsx

@@ -2,8 +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 { BareProps } from './types';
-
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
@@ -23,8 +21,9 @@ interface ProgressProps {
   withTime?: boolean;
 }
 
-interface Props extends BareProps {
+interface Props {
   children?: React.ReactNode;
+  className?: string;
   help?: React.ReactNode;
   label: React.ReactNode;
   progress?: ProgressProps;

packages/react-components/src/Chart/types.ts

@@ -2,8 +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 { BareProps } from '../types';
-
 import BN from 'bn.js';
 
 export interface DoughnutValue {
@@ -19,25 +17,29 @@ export interface HorizBarValue {
   value: number | BN;
 }
 
-export interface BaseProps extends BareProps {
+export interface BaseProps {
   children: React.ReactNode;
+  className?: string;
 }
 
-export interface DoughnutProps extends BareProps {
+export interface DoughnutProps {
+  className?: string;
   size?: number;
   values: DoughnutValue[];
 }
 
-export interface HorizBarProps extends BareProps {
+export interface HorizBarProps {
   aspectRatio?: number;
+  className?: string;
   max?: number;
   showLabels?: boolean;
   values: HorizBarValue[];
   withColors?: boolean;
 }
 
-export interface LineProps extends BareProps {
+export interface LineProps {
   colors?: (string | undefined)[];
+  className?: string;
   labels: string[];
   legends: string[];
   values: (number | BN)[][];

packages/react-components/src/CopyButton.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { IconName } from '@fortawesome/fontawesome-svg-core';
-import { BareProps } from './types';
 
 import React, { useCallback, useContext } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
@@ -13,7 +12,7 @@ import Button from './Button';
 import { useTranslation } from './translate';
 import styled from 'styled-components';
 
-interface Props extends BareProps {
+interface Props {
   children?: React.ReactNode;
   className?: string;
   icon?: IconName;

packages/react-components/src/CryptoType.tsx

@@ -3,15 +3,15 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
-import { BareProps } from './types';
 
 import React, { useEffect, useState } from 'react';
 import keyring from '@polkadot/ui-keyring';
 
 import { classes } from './util';
 
-interface Props extends BareProps {
+interface Props {
   accountId: AccountId | AccountIndex | Address | string | Uint8Array | null;
+  className?: string;
   label?: string;
 }
 

packages/react-components/src/Dropdown.tsx

@@ -2,8 +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 { BareProps } from './types';
-
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
@@ -13,8 +11,9 @@ import { isUndefined } from '@polkadot/util';
 import { classes } from './util';
 import Labelled from './Labelled';
 
-interface Props<Option> extends BareProps {
+interface Props<Option> {
   allowAdd?: boolean;
+  className?: string;
   defaultValue?: any;
   dropdownClassName?: string;
   help?: React.ReactNode;

packages/react-components/src/EditButton.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { IconName } from '@fortawesome/fontawesome-svg-core';
-import { BareProps, VoidFn } from './types';
+import { VoidFn } from './types';
 
 import React from 'react';
 import styled from 'styled-components';
@@ -11,8 +11,9 @@ import styled from 'styled-components';
 import { colorLink } from './styles/theme';
 import Icon from './Icon';
 
-interface Props extends BareProps {
+interface Props {
   children?: React.ReactNode;
+  className?: string;
   icon?: IconName;
   onClick: VoidFn;
   size?: 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'massive';

packages/react-components/src/Editor.tsx

@@ -8,14 +8,13 @@
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 
-import { BareProps } from '@polkadot/react-components/types';
-
 import CodeFlask from 'codeflask';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { classes } from '@polkadot/react-components/util';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   code: string;
   isValid?: boolean;
   onEdit: (code: string) => void;

packages/react-components/src/Event.tsx

@@ -4,7 +4,6 @@
 
 import { Event } from '@polkadot/types/interfaces';
 import { Codec, TypeDef } from '@polkadot/types/types';
-import { BareProps } from './types';
 
 import React from 'react';
 import { getTypeDef } from '@polkadot/types';
@@ -12,8 +11,9 @@ import Params from '@polkadot/react-params';
 
 import { classes } from './util';
 
-export interface Props extends BareProps {
+export interface Props {
   children?: React.ReactNode;
+  className?: string;
   value: Event;
 }
 

packages/react-components/src/Expander.tsx

@@ -2,8 +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 { BareProps } from './types';
-
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
 import { useToggle } from '@polkadot/react-hooks';
@@ -16,8 +14,9 @@ interface Meta {
   documentation: Text[];
 }
 
-export interface Props extends BareProps {
+export interface Props {
   children?: React.ReactNode;
+  className?: string;
   isOpen?: boolean;
   summary?: React.ReactNode;
   summaryMeta?: Meta;

packages/react-components/src/Extrinsic.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SubmittableExtrinsic, SubmittableExtrinsicFunction } from '@polkadot/api/types';
-import { BareProps } from '@polkadot/react-components/types';
 import { RawParam } from '@polkadot/react-params/types';
 import { TypeDef } from '@polkadot/types/types';
 
@@ -15,7 +14,8 @@ import { isUndefined } from '@polkadot/util';
 
 import paramComponents from './Params';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   defaultValue: SubmittableExtrinsicFunction<'promise'>;
   isDisabled?: boolean;
   isError?: boolean;

packages/react-components/src/FilterOverlay.tsx

@@ -2,15 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
 
 import media from './media';
 
-interface Props extends BareProps {
+interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
 function FilterOverlay ({ children, className }: Props): React.ReactElement<Props> {

packages/react-components/src/HelpOverlay.tsx

@@ -2,8 +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 { BareProps } from './types';
-
 import React from 'react';
 import ReactMd from 'react-markdown';
 import styled from 'styled-components';
@@ -11,7 +9,8 @@ import { useToggle } from '@polkadot/react-hooks';
 
 import Icon from './Icon';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   md: string;
 }
 

packages/react-components/src/IconLink.tsx

@@ -2,14 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from './types';
-
 import React from 'react';
 import styled from 'styled-components';
 
 import Icon from './Icon';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   href?: string;
   icon?: string;
   label?: React.ReactNode;

packages/react-components/src/Input.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps, VoidFn } from './types';
+import { VoidFn } from './types';
 
 import React, { useCallback, useState } from 'react';
 import SUIInput from 'semantic-ui-react/dist/commonjs/elements/Input/Input';
@@ -12,9 +12,10 @@ import Labelled from './Labelled';
 
 type Input$Type = 'number' | 'password' | 'text';
 
-interface Props extends BareProps {
+interface Props {
   autoFocus?: boolean;
   children?: React.ReactNode;
+  className?: string;
   defaultValue?: string | null;
   help?: React.ReactNode;
   icon?: React.ReactNode;

packages/react-components/src/InputAddress/index.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { KeyringOptions, KeyringSectionOption, KeyringSectionOptions, KeyringOption$Type } from '@polkadot/ui-keyring/options/types';
-import { BareProps } from '../types';
 import { Option } from './types';
 
 import React from 'react';
@@ -21,7 +20,8 @@ import Dropdown from '../Dropdown';
 import createHeader from './createHeader';
 import createItem from './createItem';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   defaultValue?: Uint8Array | string | null;
   filter?: string[];
   help?: React.ReactNode;

packages/react-components/src/InputAddress/types.ts

@@ -3,11 +3,11 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { KeyringSectionOption, KeyringOption$Type } from '@polkadot/ui-keyring/options/types';
-import { BareProps } from '../types';
 
 import React from 'react';
 
-export interface InputAddressProps extends BareProps {
+export interface InputAddressProps {
+  className?: string;
   defaultValue?: Uint8Array | string | null;
   help?: React.ReactNode;
   hideAddress?: boolean;

packages/react-components/src/InputAddressSimple.tsx

@@ -2,8 +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 { BareProps } from './types';
-
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
 
@@ -11,9 +9,10 @@ import addressToAddress from './util/toAddress';
 import IdentityIcon from './IdentityIcon';
 import Input from './Input';
 
-interface Props extends BareProps {
+interface Props {
   autoFocus?: boolean;
   children?: React.ReactNode;
+  className?: string;
   defaultValue?: string | null;
   help?: React.ReactNode;
   isError?: boolean;

packages/react-components/src/InputBalance.tsx

@@ -2,7 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps, BitLength } from './types';
+import { BitLength } from './types';
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
@@ -11,8 +11,10 @@ import { BitLengthOption } from '@polkadot/react-components/constants';
 import { BN_TEN, BN_THOUSAND, formatBalance, isBn } from '@polkadot/util';
 import InputNumber from './InputNumber';
 
-interface Props extends BareProps {
+interface Props {
   autoFocus?: boolean;
+  children?: React.ReactNode;
+  className?: string;
   defaultValue?: BN | string;
   help?: React.ReactNode;
   isDisabled?: boolean;

packages/react-components/src/InputConsts/SelectKey.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
 import { ConstValueBase } from './types';
 
 import React from 'react';
@@ -11,7 +10,8 @@ import React from 'react';
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   isError?: boolean;
   onChange: (value: ConstValueBase) => void;
   options: DropdownOptions;

packages/react-components/src/InputConsts/SelectSection.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
 import { ConstValueBase, StorageEntryPromise } from './types';
 
 import React from 'react';
@@ -11,7 +10,8 @@ import React from 'react';
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   defaultValue?: StorageEntryPromise;
   isError?: boolean;
   onChange: (value: string) => void;

packages/react-components/src/InputError.tsx

@@ -2,14 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { BareProps } from './types';
-
 import React from 'react';
 import Label from 'semantic-ui-react/dist/commonjs/elements/Label/Label';
 
 import { classes } from './util';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   label?: React.ReactNode;
 }
 

packages/react-components/src/InputExtrinsic/SelectMethod.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
-import { BareProps } from '../types';
 import { DropdownOptions } from '../util/types';
 
 import React, { useCallback } from 'react';
@@ -12,8 +11,9 @@ import ApiPromise from '@polkadot/api/promise';
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-interface Props extends BareProps {
+interface Props {
   api: ApiPromise;
+  className?: string;
   isError?: boolean;
   onChange: (value: SubmittableExtrinsicFunction<'promise'>) => void;
   options: DropdownOptions;

packages/react-components/src/InputExtrinsic/SelectSection.tsx

@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SubmittableExtrinsicFunction } from '@polkadot/api/types';
-import { BareProps } from '../types';
 import { DropdownOptions } from '../util/types';
 
 import React from 'react';
@@ -11,7 +10,8 @@ import React from 'react';
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   defaultValue?: string;
   isError?: boolean;
   onChange: (value: string) => void;

packages/react-components/src/InputFile.tsx

@@ -2,8 +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 { BareProps } from './types';
-
 import React, { useCallback, useState, createRef } from 'react';
 import Dropzone, { DropzoneRef } from 'react-dropzone';
 import styled from 'styled-components';
@@ -13,10 +11,11 @@ import { classes } from './util';
 import Labelled from './Labelled';
 import { useTranslation } from './translate';
 
-export interface InputFileProps extends BareProps {
+export interface InputFileProps {
   // 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;
+  className?: string;
   clearContent?: boolean;
   convertHex?: boolean;
   help?: React.ReactNode;

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 } from './types';
+import { BitLength } from './types';
 
 import BN from 'bn.js';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -15,9 +15,11 @@ import Dropdown from './Dropdown';
 import Input, { KEYS, KEYS_PRE } from './Input';
 import { useTranslation } from './translate';
 
-interface Props extends BareProps {
+interface Props {
   autoFocus?: boolean;
   bitLength?: BitLength;
+  children?: React.ReactNode;
+  className?: string;
   defaultValue?: string;
   help?: React.ReactNode;
   isDisabled?: boolean;

packages/react-components/src/InputRpc/SelectMethod.tsx

@@ -4,7 +4,6 @@
 
 import { DefinitionRpcExt } from '@polkadot/types/types';
 import { DropdownOptions } from '../util/types';
-import { BareProps } from '../types';
 
 import React from 'react';
 
@@ -13,7 +12,8 @@ import jsonrpc from '@polkadot/types/interfaces/jsonrpc';
 import Dropdown from '../Dropdown';
 import { classes } from '../util';
 
-interface Props extends BareProps {
+interface Props {
+  className?: string;
   isError?: boolean;
   onChange: (value: DefinitionRpcExt) => void;
   options: DropdownOptions;