Display decoded ExtrinsicFailed errors

package.json

@@ -10,10 +10,10 @@
     "packages/*"
   ],
   "resolutions": {
-    "@polkadot/api": "^1.0.0-beta.7",
-    "@polkadot/api-contract": "^1.0.0-beta.7",
+    "@polkadot/api": "^1.0.0-beta.8",
+    "@polkadot/api-contract": "^1.0.0-beta.8",
     "@polkadot/keyring": "^2.0.0-beta.4",
-    "@polkadot/types": "^1.0.0-beta.7",
+    "@polkadot/types": "^1.0.0-beta.8",
     "@polkadot/util": "^2.0.0-beta.4",
     "@polkadot/util-crypto": "^2.0.0-beta.4",
     "babel-core": "^7.0.0-bridge.0",

packages/app-contracts/package.json

@@ -11,6 +11,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@babel/runtime": "^7.7.7",
-    "@polkadot/api-contract": "^1.0.0-beta.7"
+    "@polkadot/api-contract": "^1.0.0-beta.8"
   }
 }

packages/react-api/package.json

@@ -31,7 +31,7 @@
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
   "dependencies": {
     "@babel/runtime": "^7.7.6",
-    "@polkadot/api": "^1.0.0-beta.7",
+    "@polkadot/api": "^1.0.0-beta.8",
     "@polkadot/extension-dapp": "^0.15.0-beta.1",
     "edgeware-node-types": "^1.0.10",
     "rxjs-compat": "^6.5.3"

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

@@ -3,7 +3,8 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { SignerPayloadJSON } from '@polkadot/types/types';
+import { DispatchError } from '@polkadot/types/interfaces';
+import { ITuple, SignerPayloadJSON } from '@polkadot/types/types';
 import { BareProps } from '../types';
 import { ActionStatus, PartialQueueTxExtrinsic, PartialQueueTxRpc, QueueStatus, QueueTx, QueueTxExtrinsic, QueueTxRpc, QueueTxStatus, SignerCallback } from './types';
 
@@ -128,13 +129,31 @@ export default function Queue ({ children }: Props): React.ReactElement<Props> {
         // 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: { method, section } }): ActionStatus => ({
-          action: `${section}.${method}`,
-          status: section === 'system' && method === 'ExtrinsicFailed'
-            ? 'error'
-            : 'event',
-          message: 'extrinsic event'
-        }))
+        .map(({ event: { data, method, section } }): ActionStatus => {
+          if (section === 'system' && method === 'ExtrinsicFailed') {
+            const [dispatchError] = data as unknown as ITuple<[DispatchError]>;
+            let message = dispatchError.type;
+
+            if (dispatchError.isModule) {
+              const mod = dispatchError.asModule;
+              const error = registry.findMetaError(new Uint8Array([mod.index.toNumber(), mod.error.toNumber()]));
+
+              message = `${error.section}.${error.name}`;
+            }
+
+            return {
+              action: `${section}.${method}`,
+              status: 'error',
+              message
+            };
+          }
+
+          return {
+            action: `${section}.${method}`,
+            status: 'event',
+            message: 'extrinsic event'
+          };
+        })
     );
 
     if (STATUS_COMPLETE.includes(status)) {

packages/react-params/src/Param/DispatchError.tsx

@@ -0,0 +1,46 @@
+// Copyright 2017-2020 @polkadot/react-components authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DispatchError } from '@polkadot/types/interfaces';
+import { Props } from '../types';
+
+import React from 'react';
+import { registry } from '@polkadot/react-api';
+import { Input } from '@polkadot/react-components';
+
+import { useTranslation } from '../translate';
+import Static from './Static';
+import Unknown from './Unknown';
+
+export default function ErrorDisplay (props: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+
+  if (!props.isDisabled || !props.defaultValue?.value?.isModule) {
+    return <Unknown {...props} />;
+  }
+
+  const mod = (props.defaultValue.value as DispatchError).asModule;
+  const error = registry.findMetaError(new Uint8Array([mod.index.toNumber(), mod.error.toNumber()]));
+  const type = `${error.section}.${error.name}`;
+  const details = error.documentation.join(', ');
+
+  return (
+    <Static {...props}>
+      <Input
+        className='full'
+        isDisabled
+        label={t('type')}
+        value={type}
+      />
+      {details && (
+        <Input
+          className='full'
+          isDisabled
+          label={t('details')}
+          value={details}
+        />
+      )}
+    </Static>
+  );
+}

packages/react-params/src/Param/Static.tsx

@@ -12,11 +12,12 @@ import Bare from './Bare';
 
 interface Props extends BareProps {
   asHex?: boolean;
+  children?: React.ReactNode;
   defaultValue: RawParam;
   withLabel?: boolean;
 }
 
-export default function StaticParam ({ asHex, className, defaultValue, label, style }: Props): React.ReactElement<Props> {
+export default function StaticParam ({ asHex, children, className, defaultValue, label, style }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const value = defaultValue && defaultValue.value && defaultValue.value[asHex ? 'toHex' : 'toString']();
 
@@ -30,6 +31,7 @@ export default function StaticParam ({ asHex, className, defaultValue, label, st
         label={label}
         value={value || t('<empty>')}
       />
+      {children}
     </Bare>
   );
 }

packages/react-params/src/Param/findComponent.ts

@@ -15,6 +15,7 @@ import Balance from './Balance';
 import Bool from './Bool';
 import Bytes from './Bytes';
 import Code from './Code';
+import DispatchError from './DispatchError';
 import Enum from './Enum';
 import Hash256 from './Hash256';
 import Hash512 from './Hash512';
@@ -46,6 +47,7 @@ const components: ComponentMap = ([
   { c: Bool, t: ['bool'] },
   { c: Bytes, t: ['Bytes'] },
   { c: Code, t: ['Code'] },
+  { c: DispatchError, t: ['DispatchError'] },
   { c: Raw, t: ['Raw', 'Keys'] },
   { c: Enum, t: ['Enum'] },
   { c: Hash256, t: ['BlockHash', 'CodeHash', 'Hash', 'H256', 'SeedOf'] },