139 lines
3.5 KiB
TypeScript
139 lines
3.5 KiB
TypeScript
// Copyright 2017-2020 @polkadot/app-contracts 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 { TxModalProps as Props } from './types';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Button, ButtonCancel, 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('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 = {},
|
|
cancelButtonLabel,
|
|
submitButtonIcon = 'sign-in',
|
|
submitButtonLabel = t('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();
|
|
};
|
|
|
|
// const onStart = (): void => {
|
|
// props.onSubmit && props.onSubmit();
|
|
// };
|
|
|
|
// const onFailed = (): void => {
|
|
// props.onFailed && props.onFailed();
|
|
// };
|
|
|
|
// const onSuccess = (): void => {
|
|
// !isControlled && setIsOpen(false);
|
|
|
|
// props.onSuccess && props.onSuccess();
|
|
// };
|
|
|
|
// const txState = useTx(
|
|
// txSource,
|
|
// {
|
|
// ...(props.accountId ? { accountId: props.accountId } : {}),
|
|
// onChangeAccountId: props.onChangeAccountId,
|
|
// onStart,
|
|
// onFailed,
|
|
// onSuccess
|
|
// }
|
|
// );
|
|
|
|
// const { accountId, onChangeAccountId, isSending, sendTx } = th
|
|
|
|
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>
|
|
<Button.Group>
|
|
<ButtonCancel
|
|
label={cancelButtonLabel}
|
|
onClick={onClose}
|
|
/>
|
|
<Button.Or />
|
|
<Button
|
|
isDisabled={isDisabled || isSending || !accountId || !isSubmittable}
|
|
isPrimary
|
|
label={submitButtonLabel}
|
|
icon={submitButtonIcon}
|
|
onClick={onSend}
|
|
{...submitButtonProps}
|
|
/>
|
|
</Button.Group>
|
|
</Modal.Actions>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default translate(TxModal);
|