diff --git a/packages/react-signer/src/TxSigned.tsx b/packages/react-signer/src/TxSigned.tsx index 77dc44bfb4..c296bc63cd 100644 --- a/packages/react-signer/src/TxSigned.tsx +++ b/packages/react-signer/src/TxSigned.tsx @@ -35,7 +35,10 @@ import { cacheUnlock, extractExternal, handleTxResults } from './util'; interface Props { className?: string; currentItem: QueueTx; + isQueueSubmit: boolean; + queueSize: number; requestAddress: string | null; + setIsQueueSubmit: (isQueueSubmit: boolean) => void; } interface InnerTx { @@ -189,7 +192,7 @@ function tryExtract (address: string | null): AddressFlags { } } -function TxSigned ({ className, currentItem, requestAddress }: Props): React.ReactElement | null { +function TxSigned ({ className, currentItem, isQueueSubmit, queueSize, requestAddress, setIsQueueSubmit }: Props): React.ReactElement | null { const { t } = useTranslation(); const { api } = useApi(); const { getLedger } = useLedger(); @@ -206,6 +209,7 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea const [signedTx, setSignedTx] = useState(null); const [{ innerHash, innerTx }, setCallInfo] = useState(EMPTY_INNER); const [tip, setTip] = useState(); + const [initialIsQueueSubmit] = useState(isQueueSubmit); useEffect((): void => { setFlags(tryExtract(senderInfo.signAddress)); @@ -344,6 +348,14 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea [_onSend, _onSendPayload, _onSign, _unlock, currentItem, isSubmit, queueSetTxStatus, senderInfo] ); + const isAutoCapable = senderInfo.signAddress && (queueSize > 1) && isSubmit && !isBusy && !(flags.isHardware || flags.isMultisig || flags.isProxied || flags.isQr || flags.isUnlockable) && !isRenderError; + + if (isAutoCapable && initialIsQueueSubmit) { + setTimeout(_doStart, 1000); + + return null; + } + return ( <> @@ -432,17 +444,29 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea tabIndex={2} /> {!isBusy && ( - ('Sign and Submit') - : t('Sign (no submission)') - } - onChange={setIsSubmit} - value={isSubmit} - /> +
+ ('Sign and Submit') + : t('Sign (no submission)') + } + onChange={setIsSubmit} + value={isSubmit} + /> + {isAutoCapable && ( + ('Submit {{queueSize}} items', { replace: { queueSize } }) + : t('Submit individual') + } + onChange={setIsQueueSubmit} + value={isQueueSubmit} + /> + )} +
)} diff --git a/packages/react-signer/src/index.tsx b/packages/react-signer/src/index.tsx index c791646439..9c76399f21 100644 --- a/packages/react-signer/src/index.tsx +++ b/packages/react-signer/src/index.tsx @@ -5,7 +5,7 @@ import type { QueueTx, QueueTxMessageSetStatus, QueueTxResult } from '@polkadot/ import type { BareProps as Props } from '@polkadot/react-components/types'; import type { DefinitionRpcExt } from '@polkadot/types/types'; -import React, { useCallback, useEffect, useMemo } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; import { ApiPromise } from '@polkadot/api'; @@ -18,10 +18,10 @@ import TxSigned from './TxSigned'; import TxUnsigned from './TxUnsigned'; interface ItemState { - count: number; currentItem: QueueTx | null; isRpc: boolean; isVisible: boolean; + queueSize: number; requestAddress: string | null; } @@ -79,10 +79,10 @@ function extractCurrent (txqueue: QueueTx[]): ItemState { } return { - count: available.length, currentItem, isRpc, isVisible, + queueSize: available.length, requestAddress: (currentItem && currentItem.accountId) || null }; } @@ -91,12 +91,17 @@ function Signer ({ children, className = '' }: Props): React.ReactElement const { api } = useApi(); const { t } = useTranslation(); const { queueSetTxStatus, txqueue } = useQueue(); + const [isQueueSubmit, setIsQueueSubmit] = useState(false); - const { count, currentItem, isRpc, isVisible, requestAddress } = useMemo( + const { currentItem, isRpc, isVisible, queueSize, requestAddress } = useMemo( () => extractCurrent(txqueue), [txqueue] ); + useEffect((): void => { + (queueSize === 1) && setIsQueueSubmit(false); + }, [queueSize]); + useEffect((): void => { isRpc && currentItem && sendRpc(api, queueSetTxStatus, currentItem).catch(console.error); @@ -121,7 +126,7 @@ function Signer ({ children, className = '' }: Props): React.ReactElement {currentItem && isVisible && ( {t('Authorize transaction')}{(count === 1) ? undefined : <> 1/{count}}} + header={<>{t('Authorize transaction')}{(queueSize === 1) ? undefined : <> 1/{queueSize}}} key={currentItem.id} onClose={_onCancel} size='large' @@ -131,7 +136,10 @@ function Signer ({ children, className = '' }: Props): React.ReactElement : ( ) } @@ -146,6 +154,14 @@ const StyledModal = styled(Modal)` bottom: 1.5rem; left: 1.5rem; position: absolute; + + .ui--Toggle { + display: inline-block; + + &+.ui--Toggle { + margin-left: 1rem; + } + } } `;