AddressMulti -> InputAddressMulti (#2195)

packages/app-accounts/src/modals/RecoverSetup.tsx

@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
-import { AddressMulti, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
+import { InputAddressMulti, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts, useAddresses } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -49,7 +49,7 @@ export default function RecoverSetup ({ address, className, onClose }: Props): R
           label={t('the account to make recoverable')}
           value={address}
         />
-        <AddressMulti
+        <InputAddressMulti
           available={availableHelpers}
           help={t('The addresses that are able to help in recovery. You can select up to {{maxHelpers}} trusted helpers.', { replace: { maxHelpers: MAX_HELPERS } })}
           label={t('trusted social recovery helpers')}

packages/app-council/src/Overview/Vote.tsx

@@ -10,7 +10,7 @@ import { ComponentProps } from './types';
 import BN from 'bn.js';
 import React from 'react';
 import { withApi } from '@polkadot/react-api/hoc';
-import { AddressMulti, Button } from '@polkadot/react-components';
+import { InputAddressMulti, Button } from '@polkadot/react-components';
 import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal';
 
 import translate from '../translate';
@@ -95,7 +95,7 @@ class Vote extends TxModal<Props, State> {
           accountId={accountId}
           onChange={this.setVoteValue}
         />
-        <AddressMulti
+        <InputAddressMulti
           available={available}
           help={t('Filter available candidates based on name, address or short account index.')}
           label={t('filter candidates')}

packages/app-staking/src/Actions/Account/Nominate.tsx

@@ -6,7 +6,7 @@ import { DerivedStakingOverview } from '@polkadot/api-derive/types';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { AddressMulti, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { InputAddressMulti, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useFavorites } from '@polkadot/react-hooks';
 
 import { STORE_FAVS_BASE } from '../../constants';
@@ -76,7 +76,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
           isDisabled
           label={t('stash account')}
         />
-        <AddressMulti
+        <InputAddressMulti
           available={available}
           className='medium'
           help={t('Filter available candidates based on name, address or short account index.')}

packages/react-components/src/InputAddressMulti.tsx

@@ -20,7 +20,7 @@ interface Props {
   value: string[];
 }
 
-function AddressMulti ({ available, className, help, label, maxCount, onChange, value }: Props): React.ReactElement<Props> {
+function InputAddressMulti ({ available, className, help, label, maxCount, onChange, value }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [_filter, setFilter] = useState<string>('');
   const filter = useDebounce(_filter);
@@ -37,17 +37,17 @@ function AddressMulti ({ available, className, help, label, maxCount, onChange,
     };
 
   return (
-    <div className={`ui--AddressMulti ${className}`}>
+    <div className={`ui--InputAddressMulti ${className}`}>
       <Input
         autoFocus
-        className='ui--AddressMulti-input'
+        className='ui--InputAddressMulti-Input'
         help={help}
         label={label}
         onChange={setFilter}
         placeholder={t('partial name, address or account index')}
         value={_filter}
       />
-      <div className='ui--AddressMulti-container'>
+      <div className='ui--InputAddressMulti-container'>
         {available.map((key): React.ReactNode => (
           <AddressToggle
             address={key}
@@ -62,8 +62,8 @@ function AddressMulti ({ available, className, help, label, maxCount, onChange,
   );
 }
 
-export default styled(AddressMulti)`
-  .ui--AddressMulti-input {
+export default styled(InputAddressMulti)`
+  .ui--InputAddressMulti-Input {
     .ui.input {
       margin-bottom: 0rem;
 
@@ -75,7 +75,7 @@ export default styled(AddressMulti)`
     }
   }
 
-  .ui--AddressMulti-container {
+  .ui--InputAddressMulti-container {
     background: white;
     border: 1px solid rgba(34,36,38,.15);
     border-top-width: 0px;

packages/react-components/src/index.tsx

@@ -7,7 +7,6 @@ export { default as AccountName } from './AccountName';
 export { default as ActionItem } from './ActionItem';
 export { default as AddressInfo } from './AddressInfo';
 export { default as AddressMini } from './AddressMini';
-export { default as AddressMulti } from './AddressMulti';
 export { default as AddressRow } from './AddressRow';
 export { default as AddressSmall } from './AddressSmall';
 export { default as AddressToggle } from './AddressToggle';
@@ -45,6 +44,7 @@ export { default as IdentityIcon } from './IdentityIcon';
 export { default as InfoForInput } from './InfoForInput';
 export { default as Input } from './Input';
 export { default as InputAddress } from './InputAddress';
+export { default as InputAddressMulti } from './InputAddressMulti';
 export { default as InputAddressSimple } from './InputAddressSimple';
 export { default as InputBalance } from './InputBalance';
 export { default as InputBalanceBonded } from './InputBalanceBonded';