Allow to single signer dialog on batch submissions (#8845)

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<Props> | null {
+function TxSigned ({ className, currentItem, isQueueSubmit, queueSize, requestAddress, setIsQueueSubmit }: Props): React.ReactElement<Props> | 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<string | null>(null);
   const [{ innerHash, innerTx }, setCallInfo] = useState<InnerTx>(EMPTY_INNER);
   const [tip, setTip] = useState<BN | undefined>();
+  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 (
     <>
       <StyledModalContent className={className}>
@@ -432,17 +444,29 @@ function TxSigned ({ className, currentItem, requestAddress }: Props): React.Rea
           tabIndex={2}
         />
         {!isBusy && (
-          <Toggle
-            className='signToggle'
-            isDisabled={!!currentItem.payload}
-            label={
-              isSubmit
-                ? t<string>('Sign and Submit')
-                : t<string>('Sign (no submission)')
-            }
-            onChange={setIsSubmit}
-            value={isSubmit}
-          />
+          <div className='signToggle'>
+            <Toggle
+              isDisabled={!!currentItem.payload}
+              label={
+                isSubmit
+                  ? t<string>('Sign and Submit')
+                  : t<string>('Sign (no submission)')
+              }
+              onChange={setIsSubmit}
+              value={isSubmit}
+            />
+            {isAutoCapable && (
+              <Toggle
+                label={
+                  isQueueSubmit
+                    ? t<string>('Submit {{queueSize}} items', { replace: { queueSize } })
+                    : t<string>('Submit individual')
+                }
+                onChange={setIsQueueSubmit}
+                value={isQueueSubmit}
+              />
+            )}
+          </div>
         )}
       </Modal.Actions>
     </>

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<Props>
   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<Props>
       {currentItem && isVisible && (
         <StyledModal
           className={className}
-          header={<>{t('Authorize transaction')}{(count === 1) ? undefined : <>&nbsp;1/{count}</>}</>}
+          header={<>{t('Authorize transaction')}{(queueSize === 1) ? undefined : <>&nbsp;1/{queueSize}</>}</>}
           key={currentItem.id}
           onClose={_onCancel}
           size='large'
@@ -131,7 +136,10 @@ function Signer ({ children, className = '' }: Props): React.ReactElement<Props>
             : (
               <TxSigned
                 currentItem={currentItem}
+                isQueueSubmit={isQueueSubmit}
+                queueSize={queueSize}
                 requestAddress={requestAddress}
+                setIsQueueSubmit={setIsQueueSubmit}
               />
             )
           }
@@ -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;
+      }
+    }
   }
 `;