Merge pull request #100 from availproject/ghali/update-popup

update popup to stay and display block link

Author: Leouarz

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

@@ -98,9 +98,12 @@ function renderStatus ({ account, action, id, message, removeItem, status }: Que
   );
 }
 
-function renderItem ({ error, extrinsic, id, removeItem, rpc, status }: QueueTx): React.ReactNode {
+function renderItem ({ error, extrinsic, id, removeItem, result, rpc, status }: QueueTx): React.ReactNode {
   let { method, section } = rpc;
 
+  // eslint-disable-next-line
+  const blockNumber = result?.blockNumber ? (result.blockNumber.toHuman() as string).replaceAll(',','') : null
+
   if (extrinsic) {
     const found = extrinsic.registry.findMetaCall(extrinsic.callIndex);
 
@@ -138,6 +141,16 @@ function renderItem ({ error, extrinsic, id, removeItem, rpc, status }: QueueTx)
             <div className='status'>
               {error ? (error.message || error.toString()) : status}
             </div>
+            {blockNumber !== undefined && <div className='status'>
+              <a
+                href={`/#/explorer/query/${blockNumber}`}
+                rel='noreferrer'
+                style={{ color: 'inherit', textDecoration: 'underline' }}
+                target='_blank'
+              >
+                Go to tx
+              </a>
+            </div>}
           </div>
         </div>
       </div>

packages/react-hooks/src/ctx/Queue.tsx

@@ -275,7 +275,7 @@ export function QueueCtxRoot ({ children }: Props): React.ReactElement<Props> {
 
       queueAction(extractEvents(result));
 
-      if (STATUS_COMPLETE.includes(status)) {
+      if (STATUS_COMPLETE.includes(status) && result?.blockNumber === undefined) {
         setTimeout((): void => {
           const item = txRef.current.find((item) => item.id === id);