Enhancing TxButton component to display transaction status and error …

…messages (#270) * Display TX status after it's inBlock * show exact reason of failure in Tx Status * Update src/substrate-lib/components/TxButton.js remove console log Co-authored-by: Sacha Lansky <[email protected]> --------- Co-authored-by: Sacha Lansky <[email protected]>
jimmychu0807 · Jun 25, 2023 · 00a2046 · 00a2046
1 parent 1be54e1
commit 00a2046
Showing 1 changed file with 36 additions and 1 deletion.
diff --git a/src/substrate-lib/components/TxButton.js b/src/substrate-lib/components/TxButton.js
@@ -5,6 +5,7 @@ import { web3FromSource } from '@polkadot/extension-dapp'
 
 import { useSubstrateState } from '../'
 import utils from '../utils'
+import { bnFromHex } from '@polkadot/util';
 
 function TxButton({
   attrs = null,
@@ -59,11 +60,45 @@ function TxButton({
     return [address, { signer: injector.signer }]
   }
 
-  const txResHandler = ({ status }) =>
+  const txResHandler = ({ events = [], status, txHash }) =>{
     status.isFinalized
       ? setStatus(`😉 Finalized. Block hash: ${status.asFinalized.toString()}`)
       : setStatus(`Current transaction status: ${status.type}`)
 
+      // Loop through Vec<EventRecord> to display all events
+      events.forEach(({ _, event: { data, method, section } }) => {
+        if ((section + ":" + method) === 'system:ExtrinsicFailed' ) {
+          // extract the data for this event
+          const [dispatchError, dispatchInfo] = data;
+          console.log(`dispatchinfo: ${dispatchInfo}`)
+          let errorInfo;
+
+          // decode the error
+          if (dispatchError.isModule) {
+            // for module errors, we have the section indexed, lookup
+            // (For specific known errors, we can also do a check against the
+            // api.errors.<module>.<ErrorName>.is(dispatchError.asModule) guard)
+            const mod = dispatchError.asModule
+            const error = api.registry.findMetaError(
+                new Uint8Array([mod.index.toNumber(), bnFromHex(mod.error.toHex().slice(0, 4)).toNumber()])
+            )
+            let message = `${error.section}.${error.name}${
+                Array.isArray(error.docs) ? `(${error.docs.join('')})` : error.docs || ''
+            }`
+
+            errorInfo = `${message}`;
+            console.log(`Error-info::${JSON.stringify(error)}`)
+          } else {
+            // Other, CannotLookup, BadOrigin, no extra info
+            errorInfo = dispatchError.toString();
+          }
+          setStatus(`😞 Transaction Failed! ${section}.${method}::${errorInfo}`)
+        } else if (section + ":" + method === 'system:ExtrinsicSuccess' ) {
+          setStatus(`❤️️ Transaction successful! tx hash: ${txHash} , Block hash: ${status.asFinalized.toString()}`)
+        }
+      });
+  }
+
   const txErrHandler = err =>
     setStatus(`😞 Transaction Failed: ${err.toString()}`)