neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply useToggle as appropriate (#2036)

Browse Source 
* Apply useToggle as appropriate

* Update inset
This commit is contained in:
Jaco Greeff 2019-12-13 10:05:54 +01:00 committed by GitHub
parent 635f61637c
commit 62f74422f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
22 changed files with 147 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/app-accounts/src/Account.tsx
View File

@ -9,7 +9,7 @@ import React, { useState, useEffect } from 'react';
import { Label } from 'semantic-ui-react';
import styled from 'styled-components';
import { AddressInfo, AddressSmall, Button, ChainLock, Forget, Icon, InputTags, LinkPolkascan, Menu, Popup, Input } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { useApi, useToggle } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import Backup from './modals/Backup';
@ -31,16 +31,16 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
const [tags, setTags] = useState<string[]>([]);
const [accName, setAccName] = useState('');
const [genesisHash, setGenesisHash] = useState<string | null>(null);
const [isBackupOpen, setIsBackupOpen] = useState(false);
const [isEditingName, setIsEditingName] = useState(false);
const [isEditingTags, setIsEditingTags] = useState(false);
const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false });
const [isDeriveOpen, setIsDeriveOpen] = useState(false);
const [isForgetOpen, setIsForgetOpen] = useState(false);
const [isPasswordOpen, setIsPasswordOpen] = useState(false);
const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
const [isTransferOpen, setIsTransferOpen] = useState(false);
const [isVisible, setIsVisible] = useState(true);
const [{ isDevelopment, isEditable, isExternal }, setFlags] = useState({ isDevelopment: false, isEditable: false, isExternal: false });
const [isBackupOpen, toggleBackup] = useToggle();
const [isEditingName, toggleEditName] = useToggle();
const [isEditingTags, toggleEditTags] = useToggle();
const [isDeriveOpen, toggleDerive] = useToggle();
const [isForgetOpen, toggleForget] = useToggle();
const [isPasswordOpen, togglePassword] = useToggle();
const [isSettingsOpen, toggleSettings] = useToggle();
const [isTransferOpen, toggleTransfer] = useToggle();
const _setTags = (tags: string[]): void => setTags(tags.sort());
@ -73,16 +73,8 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
return null;
}
const _toggleEditName = (): void => setIsEditingName(!isEditingName);
const _toggleEditTags = (): void => setIsEditingTags(!isEditingTags);
const _toggleBackup = (): void => setIsBackupOpen(!isBackupOpen);
const _toggleDerive = (): void => setIsDeriveOpen(!isDeriveOpen);
const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
const _togglePass = (): void => setIsPasswordOpen(!isPasswordOpen);
const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
const _saveName = (): void => {
_toggleEditName();
toggleEditName();
const meta = { name: accName, whenEdited: Date.now() };
@ -97,7 +89,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
}
};
const _saveTags = (): void => {
_toggleEditTags();
toggleEditTags();
const meta = { tags, whenEdited: Date.now() };
@ -165,7 +157,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
)
: undefined
}
onClickName={_toggleEditName}
onClickName={toggleEditName}
toggle={isEditingName}
value={address}
/>
@ -173,14 +165,14 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
<Backup
address={address}
key='modal-backup-account'
onClose={_toggleBackup}
onClose={toggleBackup}
/>
)}
{isDeriveOpen && (
<Derive
from={address}
key='modal-derive-account'
onClose={_toggleDerive}
onClose={toggleDerive}
/>
)}
{isForgetOpen && (
@ -188,20 +180,20 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
address={address}
onForget={_onForget}
key='modal-forget-account'
onClose={_toggleForget}
onClose={toggleForget}
/>
)}
{isPasswordOpen && (
<ChangePass
address={address}
key='modal-change-pass'
onClose={_togglePass}
onClose={togglePassword}
/>
)}
{isTransferOpen && (
<Transfer
key='modal-transfer'
onClose={_toggleTransfer}
onClose={toggleTransfer}
senderId={address}
/>
)}
@ -221,7 +213,7 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
/>
)
: (
<div className='tags--toggle' onClick={_toggleEditTags}>
<div className='tags--toggle' onClick={toggleEditTags}>
{tags.length
? tags.map((tag): React.ReactNode => (
<Label key={tag} size='tiny' color='grey'>{tag}</Label>
@ -252,19 +244,19 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
icon='paper plane'
isPrimary
label={t('send')}
onClick={_toggleTransfer}
onClick={toggleTransfer}
size='small'
tooltip={t('Send funds from this account')}
/>
<Popup
className='theme--default'
onClose={_toggleSettingPopup}
open={isSettingPopupOpen}
onClose={toggleSettings}
open={isSettingsOpen}
position='bottom right'
trigger={
<Button
icon='setting'
onClick={_toggleSettingPopup}
onClick={toggleSettings}
size='small'
/>
}
@ -272,11 +264,11 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
<Menu
vertical
text
onClick={_toggleSettingPopup}
onClick={toggleSettings}
>
<Menu.Item
disabled={!isEditable || isExternal}
onClick={_toggleDerive}
onClick={toggleDerive}
>
{t('Derive account from source')}
</Menu.Item>
@ -285,19 +277,19 @@ function Account ({ address, allowTags, className, isFavorite, t, toggleFavorite
</Menu.Item>
<Menu.Item
disabled={!isEditable || isExternal || isDevelopment}
onClick={_toggleBackup}
onClick={toggleBackup}
>
{t('Create a backup file for this account')}
</Menu.Item>
<Menu.Item
disabled={!isEditable || isExternal || isDevelopment}
onClick={_togglePass}
onClick={togglePassword}
>
{t("Change this account's password")}
</Menu.Item>
<Menu.Item
disabled={!isEditable || isDevelopment}
onClick={_toggleForget}
onClick={toggleForget}
>
{t('Forget this account')}
</Menu.Item>

24
packages/app-accounts/src/Overview.tsx
View File

@ -9,7 +9,7 @@ import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import keyring from '@polkadot/ui-keyring';
import { getLedger, isLedger } from '@polkadot/react-api';
import { useAccounts, useFavorites } from '@polkadot/react-hooks';
import { useAccounts, useFavorites, useToggle } from '@polkadot/react-hooks';
import { Button, InputTags, Table } from '@polkadot/react-components';
import CreateModal from './modals/Create';
@ -41,9 +41,9 @@ async function queryLedger (): Promise<void> {
function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
const { allAccounts, hasAccounts } = useAccounts();
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [isImportOpen, setIsImportOpen] = useState(false);
const [isQrOpen, setIsQrOpen] = useState(false);
const [isCreateOpen, toggleCreate] = useToggle();
const [isImportOpen, toggleImport] = useToggle();
const [isQrOpen, toggleQr] = useToggle();
const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
const [sortedAccounts, setSortedAccounts] = useState<SortedAccount[]>([]);
const [tags, setTags] = useState<string[]>([]);
@ -62,28 +62,24 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
);
}, [allAccounts, favorites]);
const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
const _toggleImport = (): void => setIsImportOpen(!isImportOpen);
const _toggleQr = (): void => setIsQrOpen(!isQrOpen);
return (
<div className={className}>
<Banner />
{isCreateOpen && (
<CreateModal
onClose={_toggleCreate}
onClose={toggleCreate}
onStatusChange={onStatusChange}
/>
)}
{isImportOpen && (
<ImportModal
onClose={_toggleImport}
onClose={toggleImport}
onStatusChange={onStatusChange}
/>
)}
{isQrOpen && (
<QrModal
onClose={_toggleQr}
onClose={toggleQr}
onStatusChange={onStatusChange}
/>
)}
@ -92,21 +88,21 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
icon='add'
isPrimary
label={t('Add account')}
onClick={_toggleCreate}
onClick={toggleCreate}
/>
<Button.Or />
<Button
icon='sync'
isPrimary
label={t('Restore JSON')}
onClick={_toggleImport}
onClick={toggleImport}
/>
<Button.Or />
<Button
icon='qrcode'
isPrimary
label={t('Add via Qr')}
onClick={_toggleQr}
onClick={toggleQr}
/>
{isLedger() && (
<>

11
packages/app-accounts/src/modals/Create.tsx
View File

@ -13,7 +13,7 @@ import React, { useState } from 'react';
import styled from 'styled-components';
import { DEV_PHRASE } from '@polkadot/keyring/defaults';
import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { useApi, useToggle } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import uiSettings from '@polkadot/ui-settings';
import { isHex, u8aToHex } from '@polkadot/util';
@ -153,9 +153,9 @@ function createAccount (suri: string, pairType: KeypairType, name: string, passw
function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type: propsType }: Props): React.ReactElement<Props> {
const { isDevelopment } = useApi();
const [{ address, deriveError, derivePath, isSeedValid, pairType, seed, seedType }, setAddress] = useState<AddressState>(generateSeed(propsSeed, '', propsSeed ? 'raw' : 'bip', propsType));
const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
const [isConfirmationOpen, toggleConfirmation] = useToggle();
const isValid = !!address && !deriveError && isNameValid && isPassValid && isSeedValid;
const _onChangePass = (password: string): void =>
@ -172,7 +172,6 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
}
};
const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
const _toggleConfirmation = (): void => setIsConfirmationOpen(!isConfirmationOpen);
const _onCommit = (): void => {
if (!isValid) {
@ -181,7 +180,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
const status = createAccount(`${seed}${derivePath}`, pairType, name, password, t('created account'));
_toggleConfirmation();
toggleConfirmation();
onStatusChange(status);
onClose();
};
@ -197,7 +196,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
address={address}
name={name}
onCommit={_onCommit}
onClose={_toggleConfirmation}
onClose={toggleConfirmation}
/>
)}
<Modal.Content>
@ -301,7 +300,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, t, type:
isDisabled={!isValid}
isPrimary
label={t('Save')}
onClick={_toggleConfirmation}
onClick={toggleConfirmation}
/>
</Button.Group>
</Modal.Actions>

11
packages/app-accounts/src/modals/Derive.tsx
View File

@ -9,7 +9,7 @@ import { KeypairType } from '@polkadot/util-crypto/types';
import React, { useContext, useEffect, useState } from 'react';
import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
import { useDebounce } from '@polkadot/react-hooks';
import { useDebounce, useToggle } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import { keyExtractPath } from '@polkadot/util-crypto';
@ -71,12 +71,12 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
const { queueAction } = useContext(StatusContext);
const [source] = useState(keyring.getPair(from));
const [{ address, deriveError }, setDerived] = useState<DerivedAddress>({ address: null, deriveError: null });
const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
const [isLocked, setIsLocked] = useState(source.isLocked);
const [{ isNameValid, name }, setName] = useState({ isNameValid: false, name: '' });
const [{ isPassValid, password }, setPassword] = useState({ isPassValid: false, password: '' });
const [rootPass, setRootPass] = useState('');
const [suri, setSuri] = useState('');
const [isConfirmationOpen, toggleConfirmation] = useToggle();
const debouncedSuri = useDebounce(suri);
const isValid = !!address && !deriveError && isNameValid && isPassValid;
@ -101,7 +101,6 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
const _onChangeName = (name: string): void => setName({ isNameValid: !!name.trim(), name });
const _onChangePass = (password: string): void => setPassword({ isPassValid: keyring.isPassValid(password), password });
const _toggleConfirmation = (): void => setIsConfirmationOpen(!isConfirmationOpen);
const _onUnlock = (): void => {
try {
source.decodePkcs8(rootPass);
@ -119,7 +118,7 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
const status = createAccount(source, suri, name, password, t('created account'));
_toggleConfirmation();
toggleConfirmation();
queueAction(status);
onClose();
};
@ -144,7 +143,7 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
address={address}
name={name}
onCommit={_onCommit}
onClose={_toggleConfirmation}
onClose={toggleConfirmation}
/>
)}
<Modal.Content>
@ -221,7 +220,7 @@ function Derive ({ className, from, onClose, t }: Props): React.ReactElement {
isDisabled={!isValid}
isPrimary
label={t('Save')}
onClick={_toggleConfirmation}
onClick={toggleConfirmation}
/>
)
}

41
packages/app-address-book/src/Address.tsx
View File

@ -10,7 +10,7 @@ import React, { useEffect, useState } from 'react';
import { Label } from 'semantic-ui-react';
import styled from 'styled-components';
import { AddressSmall, AddressInfo, Button, ChainLock, Icon, InputTags, Input, LinkPolkascan, Forget, Menu, Popup } from '@polkadot/react-components';
import { useApi } from '@polkadot/react-hooks';
import { useApi, useToggle } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import Transfer from '@polkadot/app-accounts/modals/Transfer';
@ -36,12 +36,12 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
const [accName, setAccName] = useState('');
const [current, setCurrent] = useState<KeyringAddress | null>(null);
const [genesisHash, setGenesisHash] = useState<string | null>(null);
const [isEditingName, setIsEditingName] = useState(false);
const [isEditingTags, setIsEditingTags] = useState(false);
const [isForgetOpen, setIsForgetOpen] = useState(false);
const [isSettingPopupOpen, setIsSettingPopupOpen] = useState(false);
const [isTransferOpen, setIsTransferOpen] = useState(false);
const [isVisible, setIsVisible] = useState(true);
const [isEditingName, toggleEditName] = useToggle();
const [isEditingTags, toggleEditTags] = useToggle();
const [isForgetOpen, toggleForget] = useToggle();
const [isSettingsOpen, toggleSettings] = useToggle();
const [isTransferOpen, toggleTransfer] = useToggle();
const _setTags = (tags: string[]): void => setTags(tags.sort());
@ -75,11 +75,6 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
return null;
}
const _toggleEditName = (): void => setIsEditingName(!isEditingName);
const _toggleEditTags = (): void => setIsEditingTags(!isEditingTags);
const _toggleForget = (): void => setIsForgetOpen(!isForgetOpen);
const _toggleSettingPopup = (): void => setIsSettingPopupOpen(!isSettingPopupOpen);
const _toggleTransfer = (): void => setIsTransferOpen(!isTransferOpen);
const _onForget = (): void => {
if (address) {
const status: Partial<ActionStatus> = {
@ -108,7 +103,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
};
const _onFavorite = (): void => toggleFavorite(address);
const _saveName = (): void => {
_toggleEditName();
toggleEditName();
const meta = { name: accName, whenEdited: Date.now() };
@ -123,7 +118,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
}
};
const _saveTags = (): void => {
_toggleEditTags();
toggleEditTags();
const meta = { tags, whenEdited: Date.now() };
@ -164,7 +159,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
)
: undefined
}
onClickName={_toggleEditName}
onClickName={toggleEditName}
toggle={isEditingName}
value={address}
/>
@ -176,13 +171,13 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
onForget={_onForget}
key='modal-forget-account'
mode='address'
onClose={_toggleForget}
onClose={toggleForget}
/>
)}
{isTransferOpen && (
<Transfer
key='modal-transfer'
onClose={_toggleTransfer}
onClose={toggleTransfer}
recipientId={address}
/>
)}
@ -204,7 +199,7 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
/>
)
: (
<div className='tags--toggle' onClick={_toggleEditTags}>
<div className='tags--toggle' onClick={toggleEditTags}>
{tags.length
? tags.map((tag): React.ReactNode => (
<Label key={tag} size='tiny' color='grey'>{tag}</Label>
@ -236,19 +231,19 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
isPrimary
key='deposit'
label={t('deposit')}
onClick={_toggleTransfer}
onClick={toggleTransfer}
size='small'
tooltip={t('Send funds to this address')}
/>
<Popup
className='theme--default'
onClose={_toggleSettingPopup}
open={isSettingPopupOpen}
onClose={toggleSettings}
open={isSettingsOpen}
position='bottom right'
trigger={
<Button
icon='setting'
onClick={_toggleSettingPopup}
onClick={toggleSettings}
size='small'
/>
}
@ -256,11 +251,11 @@ function Address ({ address, allowTags, className, isFavorite, t, toggleFavorite
<Menu
vertical
text
onClick={_toggleSettingPopup}
onClick={toggleSettings}
>
<Menu.Item
disabled={!isEditable}
onClick={_toggleForget}
onClick={toggleForget}
>
{t('Forget this address')}
</Menu.Item>

10
packages/app-address-book/src/Overview.tsx
View File

@ -8,7 +8,7 @@ import { ComponentProps } from './types';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { Button, InputTags, Table } from '@polkadot/react-components';
import { useAddresses, useFavorites } from '@polkadot/react-hooks';
import { useAddresses, useFavorites, useToggle } from '@polkadot/react-hooks';
import CreateModal from './modals/Create';
import Address from './Address';
@ -23,10 +23,10 @@ const STORE_FAVS = 'accounts:favorites';
function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<Props> {
const { hasAddresses, allAddresses } = useAddresses();
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [favorites, toggleFavorite] = useFavorites(STORE_FAVS);
const [sortedAddresses, setSortedAddresses] = useState<SortedAddress[]>([]);
const [tags, setTags] = useState<string[]>([]);
const [isCreateOpen, toggleCreate] = useToggle();
useEffect((): void => {
setSortedAddresses(
@ -42,8 +42,6 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
);
}, [allAddresses, favorites]);
const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
return (
<div className={className}>
<Button.Group>
@ -51,12 +49,12 @@ function Overview ({ className, onStatusChange, t }: Props): React.ReactElement<
icon='add'
isPrimary
label={t('Add contact')}
onClick={_toggleCreate}
onClick={toggleCreate}
/>
</Button.Group>
{isCreateOpen && (
<CreateModal
onClose={_toggleCreate}
onClose={toggleCreate}
onStatusChange={onStatusChange}
/>
)}

12
packages/app-contracts/src/Contracts/Call.tsx
View File

@ -13,6 +13,7 @@ import styled from 'styled-components';
import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
import { PromiseContract as ApiContract } from '@polkadot/api-contract';
import { withApi, withMulti } from '@polkadot/react-api';
import { useToggle } from '@polkadot/react-hooks';
import { createValue } from '@polkadot/react-params/values';
import { isNull } from '@polkadot/util';
@ -42,14 +43,13 @@ function Call (props: Props): React.ReactElement<Props> | null {
const hasRpc = api.rpc.contracts && api.rpc.contracts.call;
let callMessage = callContract.getMessage(callMessageIndex);
const [accountId, setAccountId] = useState<StringOrNull>(null);
const [endowment, setEndowment] = useState<BN>(new BN(0));
const [gasLimit, setGasLimit] = useState<BN>(new BN(GAS_LIMIT));
const [isBusy, setIsBusy] = useState(false);
const [outcomes, setOutcomes] = useState<ContractCallOutcome[]>([]);
const [params, setParams] = useState<any[]>(callMessage ? callMessage.def.args.map(({ type }): any => createValue({ type })) : []);
const [useRpc, setUseRpc] = useState(callMessage && !callMessage.def.mutates);
const [isBusy, toggleBusy] = useToggle();
useEffect((): void => {
callMessage = callContract.getMessage(callMessageIndex);
@ -76,9 +76,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
const _onChangeEndowment = (endowment?: BN): void => endowment && setEndowment(endowment);
const _onChangeGasLimit = (gasLimit?: BN): void => gasLimit && setGasLimit(gasLimit);
const _onChangeParams = (params: any[]): void => setParams(params);
const _toggleBusy = (): void => setIsBusy(!isBusy);
const _constructTx = (): any[] => {
if (!accountId || !callMessage || !callMessage.fn || !callContract || !callContract.address) {
@ -218,9 +216,9 @@ function Call (props: Props): React.ReactElement<Props> | null {
isDisabled={!isValid}
isPrimary
label={t('Call')}
onClick={_toggleBusy}
onFailed={_toggleBusy}
onSuccess={_toggleBusy}
onClick={toggleBusy}
onFailed={toggleBusy}
onSuccess={toggleBusy}
params={_constructTx}
tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
/>

11
packages/app-democracy/src/Overview/Seconding.tsx
View File

@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useAccounts, useToggle } from '@polkadot/react-hooks';
import translate from '../translate';
@ -20,14 +20,13 @@ interface Props extends I18nProps {
function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Props> | null {
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState<string | null>(null);
const [isSecondingOpen, setIsSecondingOpen] = useState(false);
const [isSecondingOpen, toggleSeconding] = useToggle();
if (!hasAccounts) {
return null;
}
const isDepositor = depositors.some((depositor): boolean => depositor.eq(accountId));
const _toggleSeconding = (): void => setIsSecondingOpen(!isSecondingOpen);
return (
<>
@ -50,7 +49,7 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
<Button.Group>
<Button
isNegative
onClick={_toggleSeconding}
onClick={toggleSeconding}
label={t('Cancel')}
icon='cancel'
/>
@ -61,7 +60,7 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
isPrimary
label={t('Second')}
icon='sign-in'
onStart={_toggleSeconding}
onStart={toggleSeconding}
params={[proposalId]}
tx='democracy.second'
/>
@ -73,7 +72,7 @@ function Seconding ({ depositors, proposalId, t }: Props): React.ReactElement<Pr
isPrimary
label={t('Second')}
icon='toggle off'
onClick={_toggleSeconding}
onClick={toggleSeconding}
/>
</>
);

9
packages/app-democracy/src/Overview/Voting.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useAccounts, useToggle } from '@polkadot/react-hooks';
import { isBoolean } from '@polkadot/util';
import translate from '../translate';
@ -19,14 +19,13 @@ interface Props extends I18nProps {
function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState<string | null>(null);
const [isVotingOpen, setIsVotingOpen] = useState(false);
const [voteValue, setVoteValue] = useState(true);
const [isVotingOpen, toggleVoting] = useToggle();
if (!hasAccounts) {
return null;
}
const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
return (
@ -46,7 +45,7 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
</Modal.Content>
<VoteActions
accountId={accountId}
onClick={_toggleVoting}
onClick={toggleVoting}
params={[referendumId, voteValue]}
tx='democracy.vote'
/>
@ -56,7 +55,7 @@ function Voting ({ referendumId, t }: Props): React.ReactElement<Props> | null {
icon='check'
isPrimary
label={t('Vote')}
onClick={_toggleVoting}
onClick={toggleVoting}
/>
</>
);

18
packages/app-democracy/src/Overview/index.tsx
View File

@ -4,9 +4,10 @@
import { I18nProps as Props } from '@polkadot/react-components/types';
import React, { useState } from 'react';
import React from 'react';
import styled from 'styled-components';
import { Button } from '@polkadot/react-components';
import { useToggle } from '@polkadot/react-hooks';
import translate from '../translate';
import DispatchQueue from './DispatchQueue';
@ -18,11 +19,8 @@ import PreImage from './PreImage';
import Propose from './Propose';
function Overview ({ className, t }: Props): React.ReactElement {
const [isPreimageOpen, setIsPreimageOpen] = useState(false);
const [isProposeOpen, setIsProposeOpen] = useState(false);
const _togglePreimage = (): void => setIsPreimageOpen(!isPreimageOpen);
const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
const [isPreimageOpen, togglePreimage] = useToggle();
const [isProposeOpen, togglePropose] = useToggle();
return (
<div className={className}>
@ -32,21 +30,21 @@ function Overview ({ className, t }: Props): React.ReactElement {
icon='add'
isPrimary
label={t('Submit preimage')}
onClick={_togglePreimage}
onClick={togglePreimage}
/>
<Button.Or />
<Button
icon='add'
isPrimary
label={t('Submit proposal')}
onClick={_togglePropose}
onClick={togglePropose}
/>
</Button.Group>
{isPreimageOpen && (
<PreImage onClose={_togglePreimage} />
<PreImage onClose={togglePreimage} />
)}
{isProposeOpen && (
<Propose onClose={_togglePropose} />
<Propose onClose={togglePropose} />
)}
<Referendums />
<Proposals />

10
packages/app-generic-asset/src/Assets.tsx
View File

@ -5,9 +5,10 @@
import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState } from 'react';
import React from 'react';
import { Button, CardGrid } from '@polkadot/react-components';
import { withMulti, withObservable } from '@polkadot/react-api';
import { useToggle } from '@polkadot/react-hooks';
import assetRegistry, { AssetsSubjectInfo } from './assetsRegistry';
import AssetCard from './AssetCard';
@ -19,13 +20,12 @@ type Props = I18nProps & {
};
function Assets ({ assets, t }: Props): React.ReactElement<Props> {
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [isCreateOpen, toggleCreate] = useToggle();
const emptyScreen = !isCreateOpen && (!assets || Object.keys(assets).length === 0);
const _onForget = (id: string): void => assetRegistry.remove(id);
const _onRegister = (id: BN, name: string): void => assetRegistry.add(id.toString(), name);
const _onSaveName = (id: string, name: string): void => assetRegistry.add(id, name);
const _toggleCreate = (): void => setIsCreateOpen(!isCreateOpen);
return (
<CardGrid
@ -35,7 +35,7 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
isPrimary
label={t('Register Asset')}
icon='registered'
onClick={_toggleCreate}
onClick={toggleCreate}
/>
</Button.Group>
}
@ -44,7 +44,7 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
>
{isCreateOpen && (
<CreateModal
onClose={_toggleCreate}
onClose={toggleCreate}
onRegister={_onRegister}
/>
)}

9
packages/app-staking/src/Actions/index.tsx
View File

@ -8,7 +8,7 @@ import { AccountId, StakingLedger } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
import { Button, Table } from '@polkadot/react-components';
import { useCall, useApi, useAccounts } from '@polkadot/react-hooks';
import { useApi, useAccounts, useCall, useToggle } from '@polkadot/react-hooks';
import { Option } from '@polkadot/types';
import Account from './Account';
@ -52,15 +52,14 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
const { allAccounts } = useAccounts();
const queryBonded = useCall<Option<AccountId>[]>(api.query.staking.bonded.multi as any, [allAccounts]);
const queryLedger = useCall<Option<StakingLedger>[]>(api.query.staking.ledger.multi as any, [allAccounts]);
const [isNewStakeOpen, setIsNewStateOpen] = useState(false);
const [foundStashes, setFoundStashes] = useState<[string, boolean][] | null>(null);
const [stashTypes, setStashTypes] = useState<Record<string, number>>({});
const [isNewStakeOpen, toggleNewStake] = useToggle();
useEffect((): void => {
setFoundStashes(getStashes(allAccounts, stashTypes, queryBonded, queryLedger));
}, [allAccounts, queryBonded, queryLedger, stashTypes]);
const _toggleNewStake = (): void => setIsNewStateOpen(!isNewStakeOpen);
const _onUpdateType = (stashId: string, type: 'validator' | 'nominator' | 'started' | 'other'): void =>
setStashTypes({
...stashTypes,
@ -79,11 +78,11 @@ function Actions ({ allStashes, className, isVisible, next, recentlyOnline, stak
key='new-stake'
label={t('New stake')}
icon='add'
onClick={_toggleNewStake}
onClick={toggleNewStake}
/>
</Button.Group>
{isNewStakeOpen && (
<StartStaking onClose={_toggleNewStake} />
<StartStaking onClose={toggleNewStake} />
)}
{foundStashes?.length
? (

9
packages/app-tech-comm/src/Proposals/Voting.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useAccounts, useToggle } from '@polkadot/react-hooks';
import { isBoolean } from '@polkadot/util';
import translate from '../translate';
@ -20,14 +20,13 @@ interface Props extends I18nProps {
function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | null {
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState<string | null>(null);
const [isVotingOpen, setIsVotingOpen] = useState(false);
const [voteValue, setVoteValue] = useState(true);
const [isVotingOpen, toggleVoting] = useToggle();
if (!hasAccounts) {
return null;
}
const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
return (
@ -47,7 +46,7 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
</Modal.Content>
<VoteActions
accountId={accountId}
onClick={_toggleVoting}
onClick={toggleVoting}
params={[hash, proposalId, voteValue]}
tx='technicalCommittee.vote'
/>
@ -57,7 +56,7 @@ function Voting ({ hash, proposalId, t }: Props): React.ReactElement<Props> | nu
icon='check'
isPrimary
label={t('Vote')}
onClick={_toggleVoting}
onClick={toggleVoting}
/>
</>
);

10
packages/app-tech-comm/src/Proposals/index.tsx
View File

@ -6,8 +6,9 @@ import { I18nProps } from '@polkadot/react-components/types';
import { Hash } from '@polkadot/types/interfaces';
import { ComponentProps } from '../types';
import React, { useState } from 'react';
import React from 'react';
import { Button, Table } from '@polkadot/react-components';
import { useToggle } from '@polkadot/react-hooks';
import translate from '../translate';
import Proposal from './Proposal';
@ -16,15 +17,14 @@ import Propose from './Propose';
interface Props extends ComponentProps, I18nProps {}
function Proposals ({ className, members, proposals, t }: Props): React.ReactElement<Props> {
const [isProposeOpen, setIsProposeOpen] = useState(false);
const _toggleProposal = (): void => setIsProposeOpen(!isProposeOpen);
const [isProposeOpen, toggleProposal] = useToggle();
return (
<div className={className}>
{isProposeOpen && (
<Propose
memberCount={members?.length}
onClose={_toggleProposal}
onClose={toggleProposal}
/>
)}
<Button.Group>
@ -32,7 +32,7 @@ function Proposals ({ className, members, proposals, t }: Props): React.ReactEle
isPrimary
label={t('Submit proposal')}
icon='add'
onClick={_toggleProposal}
onClick={toggleProposal}
/>
</Button.Group>
{proposals?.length

16
packages/app-toolbox/src/Sign.tsx
View File

@ -10,6 +10,7 @@ import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { web3FromSource } from '@polkadot/extension-dapp';
import { Button, Input, InputAddress, Output, Static } from '@polkadot/react-components';
import { useToggle } from '@polkadot/react-hooks';
import keyring from '@polkadot/ui-keyring';
import { hexToU8a, isFunction, isHex, stringToHex, stringToU8a, u8aToHex } from '@polkadot/util';
@ -37,7 +38,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
const [isLocked, setIsLocked] = useState(false);
const [{ isUsable, signer }, setSigner] = useState<{ isUsable: boolean; signer: Signer | null }>({ isUsable: true, signer: null });
const [signature, setSignature] = useState('');
const [isUnlockVisible, setIsUnlockVisible] = useState<boolean>(false);
const [isUnlockVisible, toggleUnlock] = useToggle();
useEffect((): void => {
const isExternal = currentPair?.meta.isExternal || false;
@ -45,11 +46,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
const isInjected = currentPair?.meta.isInjected || false;
const isUsable = !(isExternal || isHardware || isInjected);
setAccountState({
isExternal,
isHardware,
isInjected
});
setAccountState({ isExternal, isHardware, isInjected });
setIsLocked(
isInjected
? false
@ -71,7 +68,6 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
}
}, [currentPair]);
const _toggleUnlock = (): void => setIsUnlockVisible(!isUnlockVisible);
const _onChangeAccount = (accountId: string | null): void => setCurrentPair(keyring.getPair(accountId || ''));
const _onChangeData = (data: string): void => setData({ data, isHexData: isHex(data) });
const _onSign = (): void => {
@ -103,7 +99,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
};
const _onUnlock = (): void => {
setIsLocked(false);
_toggleUnlock();
toggleUnlock();
};
return (
@ -163,7 +159,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
<Button.Group>
<Button
isPrimary
onClick={_toggleUnlock}
onClick={toggleUnlock}
label={t('Unlock account')}
icon='unlock'
/>
@ -186,7 +182,7 @@ function Sign ({ className, t }: Props): React.ReactElement<Props> {
</div>
{isUnlockVisible && (
<Unlock
onClose={_toggleUnlock}
onClose={toggleUnlock}
onUnlock={_onUnlock}
pair={currentPair}
/>

12
packages/app-treasury/src/Overview/Propose.tsx
View File

@ -7,7 +7,7 @@ import { I18nProps as Props } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useState } from 'react';
import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useAccounts, useToggle } from '@polkadot/react-hooks';
import translate from '../translate';
@ -15,15 +15,13 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
const { hasAccounts } = useAccounts();
const [accountId, setAccountId] = useState<string | null>(null);
const [beneficiary, setBeneficiary] = useState<string | null>(null);
const [isProposeOpen, setIsProposeOpen] = useState(false);
const [value, setValue] = useState<BN | undefined>();
const [isProposeOpen, togglePropose] = useToggle();
if (!hasAccounts) {
return null;
}
const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
const hasValue = value?.gtn(0);
return (
@ -64,7 +62,7 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
icon='cancel'
isNegative
label={t('Cancel')}
onClick={_togglePropose}
onClick={togglePropose}
/>
<Button.Or />
<TxButton
@ -73,7 +71,7 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
isDisabled={!accountId || !hasValue}
isPrimary
label={t('Submit proposal')}
onClick={_togglePropose}
onClick={togglePropose}
params={[value, beneficiary]}
tx='treasury.proposeSpend'
/>
@ -85,7 +83,7 @@ function Propose ({ className, t }: Props): React.ReactElement<Props> | null {
icon='check'
isPrimary
label={t('Submit proposal')}
onClick={_togglePropose}
onClick={togglePropose}
/>
</>
);

9
packages/app-treasury/src/Overview/Voting.tsx
View File

@ -8,7 +8,7 @@ import { I18nProps } from '@polkadot/react-components/types';
import React, { useEffect, useState } from 'react';
import { Button, Dropdown, Input, Modal, VoteAccount, VoteActions, VoteToggle } from '@polkadot/react-components';
import { useAccounts } from '@polkadot/react-hooks';
import { useAccounts, useToggle } from '@polkadot/react-hooks';
import { isBoolean } from '@polkadot/util';
import translate from '../translate';
@ -28,8 +28,8 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
const [councilOptId, setCouncilOptId] = useState<number>(0);
const [accountId, setAccountId] = useState<string | null>(null);
const [{ councilId, councilHash }, setCouncilInfo] = useState<{ councilId: ProposalIndex | null; councilHash: Hash | null }>({ councilId: null, councilHash: null });
const [isVotingOpen, setIsVotingOpen] = useState(false);
const [voteValue, setVoteValue] = useState(true);
const [isVotingOpen, toggleVoting] = useToggle();
useEffect((): void => {
const available = proposals
@ -47,7 +47,6 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
return null;
}
const _toggleVoting = (): void => setIsVotingOpen(!isVotingOpen);
const _onChangeVote = (vote?: boolean): void => setVoteValue(isBoolean(vote) ? vote : true);
const _onChangeProposal = (optionId: number): void => {
const councilProp = proposals.find(({ votes }): boolean => !!(votes?.index.eq(optionId)));
@ -91,7 +90,7 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
<VoteActions
accountId={accountId}
isDisabled={!councilHash}
onClick={_toggleVoting}
onClick={toggleVoting}
params={[councilHash, councilId, voteValue]}
tx='council.vote'
/>
@ -101,7 +100,7 @@ function Voting ({ proposals, t }: Props): React.ReactElement<Props> | null {
icon='check'
isPrimary
label={t('Vote')}
onClick={_toggleVoting}
onClick={toggleVoting}
/>
</>
);

11
packages/react-components/src/HelpOverlay.tsx
View File

@ -4,9 +4,10 @@
import { BareProps } from './types';
import React, { useState } from 'react';
import React from 'react';
import ReactMd from 'react-markdown';
import styled from 'styled-components';
import { useToggle } from '@polkadot/react-hooks';
import Icon from './Icon';
@ -15,23 +16,21 @@ interface Props extends BareProps {
}
function HelpOverlay ({ className, md }: Props): React.ReactElement<Props> {
const [isVisible, setIsVisible] = useState(false);
const _toggleVisible = (): void => setIsVisible(!isVisible);
const [isVisible, toggleVisible] = useToggle();
return (
<div className={className}>
<div className='help-button'>
<Icon
name='help circle'
onClick={_toggleVisible}
onClick={toggleVisible}
/>
</div>
<div className={`help-slideout ${isVisible ? 'open' : 'closed'}`}>
<div className='help-button'>
<Icon
name='close'
onClick={_toggleVisible}
onClick={toggleVisible}
/>
</div>
<ReactMd

8
packages/react-components/src/Inset.tsx
View File

@ -2,9 +2,10 @@
// This software may be modified and distributed under the terms
// of the Apache-2.0 license. See the LICENSE file for details.
import React, { useState } from 'react';
import React from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { useToggle } from '@polkadot/react-hooks';
import Icon from './Icon';
import { classes } from './util';
@ -23,7 +24,7 @@ export interface InsetProps {
function Inset ({ children, className, header, href, isCollapsible, isError, isSuccess, withBottomMargin, withTopMargin }: InsetProps): React.ReactElement<InsetProps> | null {
const history = useHistory();
const [isCollapsed, setIsCollapsed] = useState(true);
const [isCollapsed, toggleCollapsed] = useToggle();
if (!children) {
return null;
@ -32,7 +33,6 @@ function Inset ({ children, className, header, href, isCollapsible, isError, isS
const _onClick = (): void => {
href && history.push(href);
};
const _toggleCollapsed = (): void => setIsCollapsed(!isCollapsed);
return (
<div
@ -52,7 +52,7 @@ function Inset ({ children, className, header, href, isCollapsible, isError, isS
{isCollapsible && (
<div
className='header'
onClick={_toggleCollapsed}
onClick={toggleCollapsed}
>
<h3>{header}</h3>
<Icon

11
packages/react-components/src/LabelHelp.tsx
View File

@ -4,8 +4,9 @@
import { BareProps } from './types';
import React, { useState } from 'react';
import React from 'react';
import styled from 'styled-components';
import { useToggle } from '@polkadot/react-hooks';
import Icon from './Icon';
import { classes } from './util';
@ -16,9 +17,7 @@ interface Props extends BareProps {
}
function LabelHelp ({ className, help, style }: Props): React.ReactElement<Props> {
const [isTooltipOpen, setIsTooltipOpen] = useState(false);
const _toggleTooltip = (): void => setIsTooltipOpen(!isTooltipOpen);
const [isTooltipOpen, toggleTooltip] = useToggle();
return (
<div
@ -29,8 +28,8 @@ function LabelHelp ({ className, help, style }: Props): React.ReactElement<Props
name='help circle'
data-tip
data-for='controlled-trigger'
onMouseOver={_toggleTooltip}
onMouseOut={_toggleTooltip}
onMouseOver={toggleTooltip}
onMouseOut={toggleTooltip}
/>
{isTooltipOpen && (
<Tooltip

9
packages/react-components/src/Password.tsx
View File

@ -4,7 +4,8 @@
import { BareProps } from './types';
import React, { useState } from 'react';
import React from 'react';
import { useToggle } from '@polkadot/react-hooks';
import { MAX_PASS_LEN } from '@polkadot/ui-keyring/defaults';
import { classes } from './util';
@ -29,9 +30,7 @@ interface Props extends BareProps {
}
export default function Password ({ autoFocus, children, className, defaultValue, help, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, tabIndex, value, withLabel }: Props): React.ReactElement<Props> {
const [isVisible, setIsVisible] = useState(false);
const _toggleVisible = (): void => setIsVisible(!isVisible);
const [isVisible, toggleVisible] = useToggle();
return (
<Input
@ -65,7 +64,7 @@ export default function Password ({ autoFocus, children, className, defaultValue
: 'unhide'
}
isPrimary
onClick={_toggleVisible}
onClick={toggleVisible}
/>
{children}
</Input>

8
packages/react-params/src/Param/Bytes.tsx
View File

@ -4,17 +4,17 @@
import { Props } from '../types';
import React, { useState } from 'react';
import React from 'react';
import { Compact } from '@polkadot/types';
import { Button } from '@polkadot/react-components';
import { useToggle } from '@polkadot/react-hooks';
import BaseBytes from './BaseBytes';
import File from './File';
export default function Bytes ({ className, defaultValue, isDisabled, isError, label, name, onChange, onEnter, onEscape, style, type, withLabel }: Props): React.ReactElement<Props> {
const [isFileDrop, setIsFileDrop] = useState(false);
const [isFileDrop, toggleFile] = useToggle();
const _toggleFile = (): void => setIsFileDrop(true);
const _onChangeFile = (value: Uint8Array): void => {
onChange && onChange({
isValid: value.length !== 0,
@ -54,7 +54,7 @@ export default function Bytes ({ className, defaultValue, isDisabled, isError, l
{!isDisabled && (
<Button
icon='file'
onClick={_toggleFile}
onClick={toggleFile}
/>
)}
</BaseBytes>