Combine events for status (#3781)

* Combine events for status

* Add ExtrinsicSuccess to start

packages/react-components/src/Status/Queue.tsx

@@ -4,7 +4,7 @@
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { DispatchError } from '@polkadot/types/interfaces';
 import { ITuple, SignerPayloadJSON } from '@polkadot/types/types';
-import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
+import { ActionStatus, ActionStatusPartial, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
 
 import React, { useCallback, useRef, useState } from 'react';
 import { SubmittableResult } from '@polkadot/api';
@@ -21,16 +21,19 @@ export interface Props {
 
 interface StatusCount {
   count: number;
-  status: ActionStatus;
+  status: ActionStatusPartial;
 }
 
 let nextId = 0;
 
+const EVENT_MESSAGE = 'extrinsic event';
 const REMOVE_TIMEOUT = 7500;
 const SUBMIT_RPC = jsonrpc.author.submitAndWatchExtrinsic;
 
-function mergeStatus (status: ActionStatus[]): ActionStatus[] {
-  return status
+function mergeStatus (status: ActionStatusPartial[]): ActionStatus[] {
+  let others: ActionStatus | null = null;
+
+  const initial = status
     .reduce((result: StatusCount[], status): StatusCount[] => {
       const prev = result.find(({ status: prev }) => prev.action === status.action && prev.status === status.status);
 
@@ -42,11 +45,35 @@ function mergeStatus (status: ActionStatus[]): ActionStatus[] {
 
       return result;
     }, [])
-    .map(({ count, status }): ActionStatus =>
+    .map(({ count, status }): ActionStatusPartial =>
       count === 1
         ? status
         : { ...status, action: `${status.action} (x${count})` }
-    );
+    )
+    .filter((status): boolean => {
+      if (status.message !== EVENT_MESSAGE) {
+        return true;
+      }
+
+      if (others) {
+        if (status.action.startsWith('system.ExtrinsicSuccess')) {
+          (others.action as string[]).unshift(status.action);
+        } else {
+          (others.action as string[]).push(status.action);
+        }
+      } else {
+        others = {
+          ...status,
+          action: [status.action]
+        };
+      }
+
+      return false;
+    });
+
+  return others
+    ? initial.concat(others)
+    : initial;
 }
 
 function extractEvents (result?: SubmittableResult): ActionStatus[] {
@@ -55,7 +82,7 @@ function extractEvents (result?: SubmittableResult): ActionStatus[] {
       // filter events handled globally, or those we are not interested in, these are
       // handled by the global overview, so don't add them here
       .filter((record): boolean => !!record.event && record.event.section !== 'democracy')
-      .map(({ event: { data, method, section } }): ActionStatus => {
+      .map(({ event: { data, method, section } }): ActionStatusPartial => {
         if (section === 'system' && method === 'ExtrinsicFailed') {
           const [dispatchError] = data as unknown as ITuple<[DispatchError]>;
           let message = dispatchError.type;
@@ -80,7 +107,7 @@ function extractEvents (result?: SubmittableResult): ActionStatus[] {
 
         return {
           action: `${section}.${method}`,
-          message: 'extrinsic event',
+          message: EVENT_MESSAGE,
           status: 'event'
         };
       })

packages/react-components/src/Status/index.tsx

@@ -84,7 +84,9 @@ function renderStatus ({ account, action, id, message, removeItem, status }: Que
           </div>
           <div className='desc'>
             <div className='header'>
-              {action}
+              {Array.isArray(action)
+                ? action.map((action, index) => <div key={index}>{action}</div>)
+                : action}
             </div>
             {account && (
               <AddressMini value={account} />
@@ -211,6 +213,10 @@ export default React.memo(styled(Status)`
 
   .dismiss {
     margin-bottom: 0.25rem;
+
+    .ui--Button {
+      border: 1px solid white;
+    }
   }
 
   .item {

packages/react-components/src/Status/types.ts

@@ -9,13 +9,20 @@ import { DefinitionRpcExt, SignerPayloadJSON } from '@polkadot/types/types';
 
 export type Actions = 'create' | 'edit' | 'restore' | 'forget' | 'backup' | 'changePassword' | 'transfer';
 
-export interface ActionStatus {
+export interface ActionStatusBase {
   account?: AccountId | Address | string;
-  action: Actions | string;
   message?: string;
   status: 'error' | 'event' | 'queued' | 'received' | 'success';
 }
 
+export interface ActionStatusPartial extends ActionStatusBase {
+  action: Actions | string;
+}
+
+export interface ActionStatus extends ActionStatusBase {
+  action: Actions | string | string[];
+}
+
 export interface AccountInfo {
   accountId?: string | null;
 }