Remove unused TxModal components (#4250)

* Remove unused TxModal components

* Cleanups
This commit is contained in:
Jaco Greeff 2020-12-20 17:50:06 +01:00 committed by GitHub
parent d626237b6f
commit b22f61347e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 41 additions and 415 deletions

View File

@ -1,22 +1,22 @@
// Copyright 2017-2020 @polkadot/app-accounts authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { StringOrNull, VoidFn } from '@polkadot/react-components/types';
import React, { useCallback, useState } from 'react';
import Sidebar from './Sidebar';
type ToggleContext = undefined | (([address, onUpdateName]: [StringOrNull, VoidFn | null]) => void);
interface Props {
children: React.ReactNode;
}
type State = [string | null, (() => void) | null];
type ToggleContext = undefined | (([address, onUpdateName]: State) => void);
const AccountSidebarToggle: React.Context<ToggleContext> = React.createContext<ToggleContext>(undefined);
function AccountSidebar ({ children }: Props): React.ReactElement<Props> {
const [[address, onUpdateName], setAddress] = useState<[StringOrNull, VoidFn | null]>([null, null]);
const [[address, onUpdateName], setAddress] = useState<State>([null, null]);
const onClose = useCallback(
() => setAddress([null, null]),

View File

@ -1,8 +1,6 @@
// Copyright 2017-2020 @polkadot/app-contracts authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { StringOrNull } from '@polkadot/react-components/types';
import React, { useCallback, useState } from 'react';
import { Button, Input, Modal } from '@polkadot/react-components';
@ -22,7 +20,7 @@ function Add ({ onClose }: Props): React.ReactElement {
const { t } = useTranslation();
const [codeHash, setCodeHash] = useState('');
const [isCodeHashValid, setIsCodeHashValid] = useState(false);
const [name, setName] = useState<StringOrNull>(null);
const [name, setName] = useState<string | null>(null);
const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi();
const _onSave = useCallback(

View File

@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0
import type { ActionStatus } from '@polkadot/react-components/Status/types';
import type { StringOrNull } from '@polkadot/react-components/types';
import React, { useCallback, useState } from 'react';
@ -22,7 +21,7 @@ interface Props {
function Add ({ onClose }: Props): React.ReactElement {
const { t } = useTranslation();
const { api } = useApi();
const [address, setAddress] = useState<StringOrNull>(null);
const [address, setAddress] = useState<string | null>(null);
const [isAddressValid, setIsAddressValid] = useState(false);
const [name, isNameValid, setName] = useNonEmptyString('New Contract');
const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi([null, null], null, true);

View File

@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0
import type { AbiMessage } from '@polkadot/api-contract/types';
import type { StringOrNull } from '@polkadot/react-components/types';
import React from 'react';
@ -24,7 +23,7 @@ export function getContractMethodFn (callContract: Contract | null, callMethodIn
return fn || null;
}
export function getContractForAddress (api: ApiPromise, address: StringOrNull): Contract | null {
export function getContractForAddress (api: ApiPromise, address: string | null): Contract | null {
if (!address) {
return null;
} else {

View File

@ -3,7 +3,6 @@
import type { SubmittableExtrinsic } from '@polkadot/api/types';
import type { BlueprintSubmittableResult } from '@polkadot/api-contract/promise/types';
import type { StringOrNull } from '@polkadot/react-components/types';
import BN from 'bn.js';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
@ -36,7 +35,7 @@ function Deploy ({ codeHash, constructorIndex = 0, onClose, setConstructorIndex
const weight = useWeight();
const [initTx, setInitTx] = useState<SubmittableExtrinsic<'promise'> | null>(null);
const [params, setParams] = useState<any[]>([]);
const [accountId, isAccountIdValid, setAccountId] = useFormField<StringOrNull>(null);
const [accountId, isAccountIdValid, setAccountId] = useFormField<string | null>(null);
const [endowment, isEndowmentValid, setEndowment] = useNonZeroBn(new BN(ENDOWMENT));
const [salt, setSalt] = useState(randomAsHex());
const [withSalt, setWithSalt] = useState(false);

View File

@ -1,8 +1,6 @@
// Copyright 2017-2020 @polkadot/app-contracts authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { VoidFn } from '@polkadot/react-components/types';
import React from 'react';
import { Input } from '@polkadot/react-components';
@ -16,7 +14,7 @@ interface Props {
isError?: boolean;
isDisabled?: boolean;
onChange: (_: string) => void;
onEnter?: VoidFn;
onEnter?: () => void;
value?: string;
}

View File

@ -1,8 +1,6 @@
// Copyright 2017-2020 @polkadot/react-hooks authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { StringOrNull } from '@polkadot/react-components/types';
import { useCallback, useEffect, useState } from 'react';
import { Abi } from '@polkadot/api-contract';
@ -48,7 +46,7 @@ const EMPTY: AbiState = {
isAbiValid: false
};
export default function useAbi (initialValue: [string | null | undefined, Abi | null | undefined] = [null, null], codeHash: StringOrNull = null, isRequired = false): UseAbi {
export default function useAbi (initialValue: [string | null | undefined, Abi | null | undefined] = [null, null], codeHash: string | null = null, isRequired = false): UseAbi {
const [state, setAbi] = useState<AbiState>(fromInitial(initialValue, isRequired));
useEffect(

View File

@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0
import type { IconName } from '@fortawesome/fontawesome-svg-core';
import type { VoidFn } from './types';
import React from 'react';
import styled from 'styled-components';
@ -14,7 +13,7 @@ interface Props {
children?: React.ReactNode;
className?: string;
icon?: IconName;
onClick: VoidFn;
onClick: () => void;
}
function EditButton ({ children, className, icon = 'edit', onClick }: Props): React.ReactElement<Props> {

View File

@ -1,8 +1,6 @@
// Copyright 2017-2020 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { VoidFn } from './types';
import React, { useCallback, useState } from 'react';
import { Input as SUIInput } from 'semantic-ui-react';
@ -37,7 +35,7 @@ interface Props {
maxLength?: number;
min?: number;
name?: string;
onEnter?: boolean | VoidFn;
onEnter?: boolean | (() => void);
onEscape?: () => void;
onChange?: (value: string) => void;
onBlur?: () => void;

View File

@ -1,8 +1,6 @@
// Copyright 2017-2020 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { VoidFn } from './types';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
@ -18,7 +16,7 @@ interface Props {
isEditing?: boolean;
onChange?: (_: string[]) => void;
onToggleIsEditing?: () => void;
onSave?: VoidFn;
onSave?: () => void;
value: string[];
}

View File

@ -1,32 +0,0 @@
// Copyright 2017-2020 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
import React from 'react';
export default class TxComponent<P, S> extends React.PureComponent<P, S> {
protected button: any;
constructor (props: P) {
super(props);
this.button = React.createRef();
}
protected sendTx = (): void => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
const { component } = this.button.current;
if (component) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
component.current.send();
}
}
protected submit = (): void => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
if (this.button && this.button.current && this.button.current.click) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access,@typescript-eslint/no-unsafe-call
this.button.current.click();
}
}
}

View File

@ -1,185 +0,0 @@
// Copyright 2017-2020 @polkadot/app-contracts authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { I18nProps } from '@polkadot/react-components/types';
import React from 'react';
import { InputAddress, Modal, TxButton, TxComponent } from '@polkadot/react-components';
export interface TxModalProps extends I18nProps {
filter?: string[];
onSubmit?: () => void;
onClose?: () => void;
onSuccess?: () => void;
onFailed?: () => void;
}
export interface TxModalState {
accountId?: string | null;
isBusy: boolean;
isOpen: boolean;
}
export default class TxModal<P extends TxModalProps, S extends TxModalState> extends TxComponent<P, S> {
protected defaultState: S = {
accountId: null,
isBusy: false,
isOpen: false
} as unknown as S;
public state: S = this.defaultState;
public render (): React.ReactNode {
const { isOpen } = this.state;
return (
<>
{this.renderTrigger && this.renderTrigger()}
<Modal
className='ui--Modal'
header={this.headerText()}
onClose={this.hideModal}
open={isOpen}
>
<Modal.Content>
{this.renderPreContent()}
{this.renderInputAccount()}
{this.renderContent()}
</Modal.Content>
<Modal.Actions onCancel={this.hideModal}>
{this.renderButtons()}
</Modal.Actions>
</Modal>
</>
);
}
protected headerText = (): React.ReactNode => '';
protected accountHelp = (): React.ReactNode => this.props.t('Select the account to use for this action.');
protected accountLabel = (): React.ReactNode => this.props.t('using my account');
protected submitLabel = (): React.ReactNode => this.props.t('Submit');
protected cancelLabel = (): React.ReactNode => this.props.t('Cancel');
protected onChangeAccount = (accountId: string | null): void => {
this.setState({ accountId });
}
protected onSubmit = (): void => {
const { onSubmit } = this.props;
this.toggleBusy(true);
onSubmit && onSubmit();
}
protected onSuccess = (): void => {
const { onClose, onSuccess } = this.props;
onSuccess && onSuccess();
onClose && onClose();
this.hideModal();
}
protected onFailed = (): void => {
const { onFailed } = this.props;
this.toggleBusy(false);
onFailed && onFailed();
}
protected isDisabled = (): boolean => {
const { accountId } = this.state;
return !accountId;
}
protected toggleBusy = (isBusy: boolean): () => void =>
(): void => {
this.setState({
isBusy
});
}
protected isUnsigned: () => boolean = (): boolean => false;
protected txMethod: () => string = (): string => '';
protected txParams: () => any[] = (): any[] => [];
protected renderContent: () => React.ReactNode = (): React.ReactNode => null;
protected renderPreContent: () => React.ReactNode = (): React.ReactNode => null;
protected renderTrigger?: () => React.ReactNode = (): React.ReactNode => null;
protected renderButtons: () => React.ReactNode = (): React.ReactNode => {
return this.renderTxButton();
}
protected renderInputAccount (): React.ReactNode {
const { filter } = this.props;
const { accountId, isBusy } = this.state;
return (
<InputAddress
defaultValue={accountId}
filter={filter}
help={this.accountHelp()}
isDisabled={isBusy}
isInput={false}
label={this.accountLabel()}
onChange={this.onChangeAccount}
type='account'
value={accountId}
/>
);
}
protected renderTxButton (): React.ReactNode {
const { accountId } = this.state;
return (
<TxButton
{...(
this.isUnsigned()
? { isUnsigned: true }
: { accountId }
)}
icon='sign-in-alt'
isDisabled={this.isDisabled()}
label={this.submitLabel()}
onClick={this.onSubmit}
onFailed={this.onFailed}
onSuccess={this.onSuccess}
params={this.txParams()}
tx={this.txMethod()}
/>
);
}
protected reset = (): void => {
this.setState(
this.defaultState
);
}
protected showModal = (): void => {
this.setState({
isOpen: true
});
}
protected hideModal = (): void => {
const { onClose } = this.props;
onClose && onClose();
this.setState(
this.defaultState
);
}
}

View File

@ -1,81 +0,0 @@
// Copyright 2017-2020 @polkadot/app-contracts authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { TxModalProps as Props } from './types';
import React, { useEffect, useState } from 'react';
import { Button, InputAddress, Modal } from '@polkadot/react-components';
// import { useTx } from '@polkadot/react-hooks';
import { isUndefined } from '@polkadot/util';
import translate from './translate';
function TxModal<P extends Props> ({ t, accountId, onChangeAccountId, sendTx, isSending, trigger: Trigger, header = t<string>('Submit signed extrinsic'), children, preContent, isDisabled = false, isSubmittable = true, modalProps = {}, inputAddressExtra, inputAddressLabel = t<string>('using my account'), inputAddressHelp = t<string>('Select the account to use for this action.'), inputAddressProps = {}, submitButtonIcon = 'sign-in-alt', submitButtonLabel = t<string>('Submit'), submitButtonProps = {}, ...props }: P): React.ReactElement<P> | null {
const isControlled = !isUndefined(props.isOpen);
const [isOpen, setIsOpen] = useState(isControlled ? props.isOpen : false);
const onOpen = (): void => {
!isControlled && setIsOpen(true);
props.onOpen && props.onOpen();
};
const onClose = (): void => {
!isControlled && setIsOpen(false);
props.onClose && props.onClose();
};
const onSend = (): void => {
sendTx();
onClose();
};
useEffect((): void => {
!isUndefined(props.isOpen) && setIsOpen(props.isOpen);
}, [props.isOpen]);
const allModalProps = {
className: ['ui--Modal', modalProps.className || ''].join(' '),
dimmer: 'inverted',
header,
...modalProps,
onClose,
open: isOpen
};
return (
<>
{Trigger && <Trigger onOpen={onOpen} />}
<Modal {...allModalProps}>
<Modal.Content>
{preContent}
<InputAddress
defaultValue={accountId}
help={inputAddressHelp}
isDisabled={isDisabled || isSending}
isInput={false}
label={inputAddressLabel}
labelExtra={inputAddressExtra}
onChange={onChangeAccountId}
type='account'
{...inputAddressProps}
/>
{children}
</Modal.Content>
<Modal.Actions onCancel={onClose}>
<Button
icon={submitButtonIcon}
isDisabled={isDisabled || isSending || !accountId || !isSubmittable}
label={submitButtonLabel}
onClick={onSend}
{...submitButtonProps}
/>
</Modal.Actions>
</Modal>
</>
);
}
export default translate(TxModal);

View File

@ -93,9 +93,6 @@ export { default as Toggle } from './Toggle';
export { default as ToggleGroup } from './ToggleGroup';
export { default as Tooltip } from './Tooltip';
export { default as TxButton } from './TxButton';
export { default as TxComponent } from './TxComponent';
export { default as TxModal } from './TxModal';
export { default as TxModalNew } from './TxModalNew';
export { default as VoteAccount } from './VoteAccount';
export { default as VoteValue } from './VoteValue';
export { default as TextArea } from './TextArea';

View File

@ -6,16 +6,9 @@ import type { WithTranslation } from 'react-i18next';
import type { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import type { Abi } from '@polkadot/api-contract';
import type { ActionStatus } from '@polkadot/react-components/Status/types';
import type { TxState } from '@polkadot/react-hooks/types';
import type { AccountId, Index } from '@polkadot/types/interfaces';
import type { ButtonProps } from './Button/types';
import type { InputAddressProps } from './InputAddress/types';
import type { TxCallback, TxFailedCallback } from './Status/types';
export type StringOrNull = string | null;
export type VoidFn = () => void;
export interface BareProps {
children?: React.ReactNode;
className?: string;
@ -30,32 +23,11 @@ export interface AppProps {
export type I18nProps = BareProps & WithTranslation;
export type ConstructTxFn = () => any[];
export interface TxTriggerProps {
onOpen: () => void;
}
export type TxTrigger = React.ComponentType<TxTriggerProps>;
export interface TxProps {
extrinsic?: SubmittableExtrinsic | SubmittableExtrinsic[] | null;
tx?: string;
params?: any[] | ConstructTxFn;
}
export interface TxAccountProps {
className?: string;
filter?: string[];
label?: React.ReactNode;
help?: React.ReactNode;
onChange: (value: string | null) => void;
}
export interface TxButtonProps extends TxProps {
accountId?: AccountId | StringOrNull;
export interface TxButtonProps {
accountId?: AccountId | string | null;
accountNonce?: Index;
className?: string;
extrinsic?: SubmittableExtrinsic | SubmittableExtrinsic[] | null;
icon?: IconName;
isBasic?: boolean;
isBusy?: boolean;
@ -64,46 +36,19 @@ export interface TxButtonProps extends TxProps {
isToplevel?: boolean;
isUnsigned?: boolean;
label?: React.ReactNode;
onClick?: VoidFn;
onClick?: () => void;
onFailed?: TxFailedCallback;
onSendRef?: React.MutableRefObject<VoidFn | undefined>;
onStart?: VoidFn;
onSendRef?: React.MutableRefObject<(() => void) | undefined>;
onStart?: () => void;
onSuccess?: TxCallback;
onUpdate?: TxCallback;
params?: any[] | (() => any[]);
tooltip?: string;
tx?: string;
withoutLink?: boolean;
withSpinner?: boolean;
}
export interface TxModalProps extends I18nProps, TxState {
accountId?: StringOrNull;
header?: React.ReactNode;
isDisabled?: boolean;
isOpen?: boolean;
isUnsigned?: boolean;
children: React.ReactNode;
preContent?: React.ReactNode;
trigger?: TxTrigger;
onSubmit?: () => void;
onOpen?: () => void;
onClose?: () => void;
onSuccess?: () => void;
onFailed?: () => void;
modalProps?: {
[index: string]: any;
};
contentClassName?: string;
inputAddressHelp?: React.ReactNode;
inputAddressExtra?: React.ReactNode;
inputAddressLabel?: React.ReactNode;
inputAddressProps?: Pick<InputAddressProps, never>;
cancelButtonLabel?: React.ReactNode;
cancelButtonProps?: Pick<ButtonProps, never>;
submitButtonIcon?: IconName;
submitButtonLabel?: React.ReactNode;
submitButtonProps?: Pick<TxButtonProps, never>;
}
export type BitLength = 8 | 16 | 32 | 64 | 128 | 256;
interface ContractBase {

View File

@ -1,9 +1,8 @@
// Copyright 2017-2020 @polkadot/react-components authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { SubmittableExtrinsic } from '@polkadot/api/promise/types';
import type { SubmittableExtrinsic } from '@polkadot/api/types';
import type { DeriveAccountFlags, DeriveAccountRegistration } from '@polkadot/api-derive/types';
import type { ConstructTxFn, StringOrNull, VoidFn } from '@polkadot/react-components/types';
import type { AccountId, Balance, BlockNumber, Call, Exposure, Hash, RewardDestination, SessionIndex, StakingLedger, ValidatorPrefs } from '@polkadot/types/interfaces';
import type { IExtrinsic } from '@polkadot/types/types';
import type { KeyringJson$Meta } from '@polkadot/ui-keyring/types';
@ -20,9 +19,9 @@ export interface CallOptions <T> {
withParamsTransform?: boolean;
}
export type TxDef = [string, any[] | ConstructTxFn];
export type TxDef = [string, any[] | ((...params: any[]) => SubmittableExtrinsic<'promise'>)];
export type TxDefs = SubmittableExtrinsic | IExtrinsic | Call | TxDef | null;
export type TxDefs = SubmittableExtrinsic<'promise'> | IExtrinsic | Call | TxDef | null;
export type TxSource<T extends TxDefs> = [T, boolean];
@ -52,15 +51,15 @@ export interface SessionRewards {
}
export interface ExtrinsicAndSenders {
extrinsic: SubmittableExtrinsic | null;
extrinsic: SubmittableExtrinsic<'promise'> | null;
isSubmittable: boolean;
sendTx: () => void;
sendUnsigned: () => void;
}
export interface TxProps {
accountId?: StringOrNull;
onChangeAccountId?: (_: StringOrNull) => void;
accountId?: string | null;
onChangeAccountId?: (_: string | null) => void;
onSuccess?: () => void;
onFailed?: () => void;
onStart?: () => void;
@ -69,8 +68,8 @@ export interface TxProps {
export interface TxState extends ExtrinsicAndSenders {
isSending: boolean;
accountId?: StringOrNull;
onChangeAccountId: (_: StringOrNull) => void;
accountId?: string | null;
onChangeAccountId: (_: string | null) => void;
}
export interface UseSudo {
@ -110,18 +109,18 @@ export interface UseAccountInfo {
setName: React.Dispatch<string>;
tags: string[];
setTags: React.Dispatch<string[]>;
genesisHash: StringOrNull;
genesisHash: string | null;
identity?: AddressIdentity;
isEditingName: boolean;
meta?: KeyringJson$Meta;
toggleIsEditingName: VoidFn;
toggleIsEditingName: () => void;
isEditingTags: boolean;
isNull: boolean;
toggleIsEditingTags: VoidFn;
onSaveName: VoidFn;
onSaveTags: VoidFn;
toggleIsEditingTags: () => void;
onSaveName: () => void;
onSaveTags: () => void;
onSetGenesisHash: (genesisHash: string | null) => void;
onForgetAddress: VoidFn;
onForgetAddress: () => void;
}
export interface StakerState {

View File

@ -1,15 +1,13 @@
// Copyright 2017-2020 @polkadot/react-hooks authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { StringOrNull } from '@polkadot/react-components/types';
import { useCallback, useState } from 'react';
export function useAccountId (initialValue: StringOrNull = null, onChangeAccountId?: (_: StringOrNull) => void): [StringOrNull, (_: StringOrNull) => void] {
const [accountId, setAccountId] = useState<StringOrNull>(initialValue);
export function useAccountId (initialValue: string | null = null, onChangeAccountId?: (_: string | null) => void): [string | null, (_: string | null) => void] {
const [accountId, setAccountId] = useState<string | null>(initialValue);
const _setAccountId = useCallback(
(accountId: StringOrNull = null): void => {
(accountId: string | null = null): void => {
setAccountId(accountId);
onChangeAccountId && onChangeAccountId(accountId);

View File

@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0
import type { DeriveAccountFlags, DeriveAccountInfo } from '@polkadot/api-derive/types';
import type { StringOrNull } from '@polkadot/react-components/types';
import type { KeyringJson$Meta } from '@polkadot/ui-keyring/types';
import type { AddressFlags, AddressIdentity, UseAccountInfo } from './types';
@ -42,7 +41,7 @@ export function useAccountInfo (value: string | null, isContract = false): UseAc
const [accountIndex, setAccountIndex] = useState<string | undefined>(undefined);
const [tags, setSortedTags] = useState<string[]>([]);
const [name, setName] = useState('');
const [genesisHash, setGenesisHash] = useState<StringOrNull>(null);
const [genesisHash, setGenesisHash] = useState<string | null>(null);
const [identity, setIdentity] = useState<AddressIdentity | undefined>();
const [flags, setFlags] = useState<AddressFlags>(IS_NONE);
const [meta, setMeta] = useState<KeyringJson$Meta | undefined>();

View File

@ -75,7 +75,7 @@ function subscribe <T> (mountedRef: MountedRef, tracker: TrackerRef, fn: TrackFn
// swap to acive mode
tracker.current.isActive = true;
tracker.current.subscriber = (fn as (...params: unknown[]) => Promise<() => void>)(...params, (value: Codec): void => {
tracker.current.subscriber = (fn as (...params: unknown[]) => Promise<VoidFn>)(...params, (value: Codec): void => {
// we use the isActive flag here since .subscriber may not be set on immediate callback)
if (mountedRef.current && tracker.current.isActive) {
mountedRef.current && tracker.current.isActive && setValue(