From b22f61347e38e499b47f7ebaab9aaa89f08569ee Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sun, 20 Dec 2020 17:50:06 +0100 Subject: [PATCH] Remove unused TxModal components (#4250) * Remove unused TxModal components * Cleanups --- packages/page-accounts/src/Sidebar/index.tsx | 10 +- packages/page-contracts/src/Codes/Add.tsx | 4 +- packages/page-contracts/src/Contracts/Add.tsx | 3 +- .../page-contracts/src/Contracts/util.tsx | 3 +- packages/page-contracts/src/Deploy.tsx | 3 +- .../page-contracts/src/shared/InputName.tsx | 4 +- packages/page-contracts/src/useAbi.ts | 4 +- packages/react-components/src/EditButton.tsx | 3 +- packages/react-components/src/Input.tsx | 4 +- packages/react-components/src/Tags.tsx | 4 +- packages/react-components/src/TxComponent.tsx | 32 --- packages/react-components/src/TxModal.tsx | 185 ------------------ packages/react-components/src/TxModalNew.tsx | 81 -------- packages/react-components/src/index.tsx | 3 - packages/react-components/src/types.ts | 71 +------ packages/react-hooks/src/types.ts | 29 ++- packages/react-hooks/src/useAccountId.ts | 8 +- packages/react-hooks/src/useAccountInfo.ts | 3 +- packages/react-hooks/src/useCall.ts | 2 +- 19 files changed, 41 insertions(+), 415 deletions(-) delete mode 100644 packages/react-components/src/TxComponent.tsx delete mode 100644 packages/react-components/src/TxModal.tsx delete mode 100644 packages/react-components/src/TxModalNew.tsx diff --git a/packages/page-accounts/src/Sidebar/index.tsx b/packages/page-accounts/src/Sidebar/index.tsx index 7e89a0c574..21c3b59e97 100644 --- a/packages/page-accounts/src/Sidebar/index.tsx +++ b/packages/page-accounts/src/Sidebar/index.tsx @@ -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 = React.createContext(undefined); function AccountSidebar ({ children }: Props): React.ReactElement { - const [[address, onUpdateName], setAddress] = useState<[StringOrNull, VoidFn | null]>([null, null]); + const [[address, onUpdateName], setAddress] = useState([null, null]); const onClose = useCallback( () => setAddress([null, null]), diff --git a/packages/page-contracts/src/Codes/Add.tsx b/packages/page-contracts/src/Codes/Add.tsx index 3830559a0d..ace9537e3e 100644 --- a/packages/page-contracts/src/Codes/Add.tsx +++ b/packages/page-contracts/src/Codes/Add.tsx @@ -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(null); + const [name, setName] = useState(null); const { abi, contractAbi, errorText, isAbiError, isAbiSupplied, isAbiValid, onChangeAbi, onRemoveAbi } = useAbi(); const _onSave = useCallback( diff --git a/packages/page-contracts/src/Contracts/Add.tsx b/packages/page-contracts/src/Contracts/Add.tsx index 364ec0a7e1..b02edc1897 100644 --- a/packages/page-contracts/src/Contracts/Add.tsx +++ b/packages/page-contracts/src/Contracts/Add.tsx @@ -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(null); + const [address, setAddress] = useState(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); diff --git a/packages/page-contracts/src/Contracts/util.tsx b/packages/page-contracts/src/Contracts/util.tsx index 7c8f66c4ee..f752d304f0 100644 --- a/packages/page-contracts/src/Contracts/util.tsx +++ b/packages/page-contracts/src/Contracts/util.tsx @@ -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 { diff --git a/packages/page-contracts/src/Deploy.tsx b/packages/page-contracts/src/Deploy.tsx index 51f486e652..f18fd99ddd 100644 --- a/packages/page-contracts/src/Deploy.tsx +++ b/packages/page-contracts/src/Deploy.tsx @@ -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 | null>(null); const [params, setParams] = useState([]); - const [accountId, isAccountIdValid, setAccountId] = useFormField(null); + const [accountId, isAccountIdValid, setAccountId] = useFormField(null); const [endowment, isEndowmentValid, setEndowment] = useNonZeroBn(new BN(ENDOWMENT)); const [salt, setSalt] = useState(randomAsHex()); const [withSalt, setWithSalt] = useState(false); diff --git a/packages/page-contracts/src/shared/InputName.tsx b/packages/page-contracts/src/shared/InputName.tsx index 663576046b..6a17a46de3 100644 --- a/packages/page-contracts/src/shared/InputName.tsx +++ b/packages/page-contracts/src/shared/InputName.tsx @@ -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; } diff --git a/packages/page-contracts/src/useAbi.ts b/packages/page-contracts/src/useAbi.ts index d2eb4f60d6..23a28a6053 100644 --- a/packages/page-contracts/src/useAbi.ts +++ b/packages/page-contracts/src/useAbi.ts @@ -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(fromInitial(initialValue, isRequired)); useEffect( diff --git a/packages/react-components/src/EditButton.tsx b/packages/react-components/src/EditButton.tsx index f128e1773f..5f9ef36e92 100644 --- a/packages/react-components/src/EditButton.tsx +++ b/packages/react-components/src/EditButton.tsx @@ -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 { diff --git a/packages/react-components/src/Input.tsx b/packages/react-components/src/Input.tsx index f5ff5d4424..ce8e3e1c38 100644 --- a/packages/react-components/src/Input.tsx +++ b/packages/react-components/src/Input.tsx @@ -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; diff --git a/packages/react-components/src/Tags.tsx b/packages/react-components/src/Tags.tsx index 7895ccdd8d..d0c664813f 100644 --- a/packages/react-components/src/Tags.tsx +++ b/packages/react-components/src/Tags.tsx @@ -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[]; } diff --git a/packages/react-components/src/TxComponent.tsx b/packages/react-components/src/TxComponent.tsx deleted file mode 100644 index 681e42a797..0000000000 --- a/packages/react-components/src/TxComponent.tsx +++ /dev/null @@ -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 extends React.PureComponent { - 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(); - } - } -} diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx deleted file mode 100644 index efded4fad4..0000000000 --- a/packages/react-components/src/TxModal.tsx +++ /dev/null @@ -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

extends TxComponent { - 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()} - - - {this.renderPreContent()} - {this.renderInputAccount()} - {this.renderContent()} - - - {this.renderButtons()} - - - - ); - } - - 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 ( - - ); - } - - protected renderTxButton (): React.ReactNode { - const { accountId } = this.state; - - return ( - - ); - } - - 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 - ); - } -} diff --git a/packages/react-components/src/TxModalNew.tsx b/packages/react-components/src/TxModalNew.tsx deleted file mode 100644 index ae9e65453d..0000000000 --- a/packages/react-components/src/TxModalNew.tsx +++ /dev/null @@ -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

({ t, accountId, onChangeAccountId, sendTx, isSending, trigger: Trigger, header = t('Submit signed extrinsic'), children, preContent, isDisabled = false, isSubmittable = true, modalProps = {}, inputAddressExtra, inputAddressLabel = t('using my account'), inputAddressHelp = t('Select the account to use for this action.'), inputAddressProps = {}, submitButtonIcon = 'sign-in-alt', submitButtonLabel = t('Submit'), submitButtonProps = {}, ...props }: P): React.ReactElement

| 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 && } - - - {preContent} - - {children} - - -