feat: add support for 'InBlock' transaction status handling

Author: F-OBrien

src/components/NotificationToasts/TransactionToast/styles.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { TransactionStatus } from '@polymeshassociation/polymesh-sdk/types';
+import styled from 'styled-components';
 
 export const StyledInfoWrapper = styled.div`
   display: flex;
@@ -22,6 +22,12 @@ const handleStatusType = (status: `${TransactionStatus}`) => {
         color: #ffffff;
         `;
 
+    case TransactionStatus.InBlock:
+      return `
+        background-color: #FFF4D6;
+        color: #B7791F;
+  `;
+
     case TransactionStatus.Succeeded:
       return `
         background-color: #D4F7E7;

src/context/TransactionStatusContext/constants.ts

@@ -7,6 +7,7 @@ import {
 // Shared transaction option types
 export interface BaseTransactionOptions {
   onTransactionRunning?: () => void | Promise<void>;
+  onInBlock?: () => void | Promise<void>;
   onProcessedByMiddleware?: () => void | Promise<void>;
   onError?: (error: Error) => void | Promise<void>;
   /**

src/context/TransactionStatusContext/provider.tsx

@@ -103,6 +103,7 @@ const TransactionStatusProvider = ({
         | (() => void | Promise<void>),
       onError?: (error: Error) => void | Promise<void>,
       onTransactionRunning?: () => void | Promise<void>,
+      onInBlock?: () => void | Promise<void>,
       middlewareCleanup?: {
         middlewareUnsubscribe?: () => void;
         middlewarePromise?: Promise<void>;
@@ -121,6 +122,12 @@ const TransactionStatusProvider = ({
             }
             break;
 
+          case TransactionStatus.InBlock:
+            if (onInBlock) {
+              onInBlock();
+            }
+            break;
+
           case TransactionStatus.Succeeded:
             if (onSuccess) {
               if (isProposal) {
@@ -187,6 +194,7 @@ const TransactionStatusProvider = ({
     ): Promise<ReturnValue | MultiSigProposal> {
       const {
         onTransactionRunning,
+        onInBlock,
         onProcessedByMiddleware,
         onSuccess,
         onError,
@@ -226,6 +234,7 @@ const TransactionStatusProvider = ({
           onSuccess,
           onError,
           onTransactionRunning,
+          onInBlock,
           { middlewareUnsubscribe, middlewarePromise },
           isProposal,
         );
@@ -271,6 +280,7 @@ const TransactionStatusProvider = ({
     ): Promise<ReturnValue[] | MultiSigProposal> {
       const {
         onTransactionRunning,
+        onInBlock,
         onProcessedByMiddleware,
         onSuccess,
         onError,
@@ -319,6 +329,7 @@ const TransactionStatusProvider = ({
           onSuccess,
           onError,
           onTransactionRunning,
+          onInBlock,
           { middlewareUnsubscribe, middlewarePromise },
           isProposal,
         );

src/hooks/polymesh/useTransactionStatus.tsx

@@ -1,9 +1,9 @@
+import { PolymeshTransactionBatch } from '@polymeshassociation/polymesh-sdk/internal';
 import {
   GenericPolymeshTransaction,
   TransactionStatus,
   TxTag,
 } from '@polymeshassociation/polymesh-sdk/types';
-import { PolymeshTransactionBatch } from '@polymeshassociation/polymesh-sdk/internal';
 import { Id, toast } from 'react-toastify';
 import { TransactionToast } from '~/components/NotificationToasts';
 
@@ -64,6 +64,27 @@ const useTransactionStatus = () => {
           containerId: 'notification-center',
         });
         break;
+
+      case TransactionStatus.InBlock:
+        toast.update(toastId, {
+          render: (
+            <TransactionToast
+              txHash={transaction.txHash}
+              status={transaction.status}
+              tag={tag}
+              isTxBatch={isTxBatch}
+              batchSize={isTxBatch ? transaction.transactions.length : 0}
+              timestamp={Date.now()}
+            />
+          ),
+          type: 'info',
+          isLoading: false,
+          autoClose: false,
+          closeOnClick: false,
+          containerId: 'notification-center',
+        });
+        break;
+
       case TransactionStatus.Succeeded:
         toast.update(toastId, {
           render: (