diff --git a/packages/react-components/src/Status/Queue.tsx b/packages/react-components/src/Status/Queue.tsx index ae26e93aad..27ada703a5 100644 --- a/packages/react-components/src/Status/Queue.tsx +++ b/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' }; }) diff --git a/packages/react-components/src/Status/index.tsx b/packages/react-components/src/Status/index.tsx index f02b09c002..3325d5ccca 100644 --- a/packages/react-components/src/Status/index.tsx +++ b/packages/react-components/src/Status/index.tsx @@ -84,7 +84,9 @@ function renderStatus ({ account, action, id, message, removeItem, status }: Que
- {action} + {Array.isArray(action) + ? action.map((action, index) =>
{action}
) + : action}
{account && ( @@ -211,6 +213,10 @@ export default React.memo(styled(Status)` .dismiss { margin-bottom: 0.25rem; + + .ui--Button { + border: 1px solid white; + } } .item { diff --git a/packages/react-components/src/Status/types.ts b/packages/react-components/src/Status/types.ts index a96242bd0f..3c13545557 100644 --- a/packages/react-components/src/Status/types.ts +++ b/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; }