From d8708d90d5dacdb07a2fbc1a6332fdbbb94c6733 Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Mon, 7 Feb 2022 08:32:15 +0100
Subject: [PATCH] Render SpRuntimeDispatchError via DispatchError (#6932)

---
 packages/react-params/src/Param/DispatchError.tsx | 12 ++++++++++--
 packages/react-params/src/Param/findComponent.ts  | 10 ++++++----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/react-params/src/Param/DispatchError.tsx b/packages/react-params/src/Param/DispatchError.tsx
index f2242e00fb..bbb6931b12 100644
--- a/packages/react-params/src/Param/DispatchError.tsx
+++ b/packages/react-params/src/Param/DispatchError.tsx
@@ -5,6 +5,7 @@ import type { DispatchError } from '@polkadot/types/interfaces';
 import type { Props as BaseProps } from '../types';
 
 import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
 
 import { Input } from '@polkadot/react-components';
 
@@ -22,7 +23,10 @@ interface Props extends BaseProps {
 }
 
 function isDispatchError (value?: unknown): value is DispatchError {
-  return !!(value && ((value as DispatchError).isModule || (value as DispatchError).isToken));
+  return !!(value && (
+    (value as DispatchError).isModule ||
+    (value as DispatchError).isToken
+  ));
 }
 
 function ErrorDisplay (props: Props): React.ReactElement<Props> {
@@ -81,4 +85,8 @@ function ErrorDisplay (props: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(ErrorDisplay);
+export default React.memo(styled(ErrorDisplay)`
+  // .ui--Labelled-content {
+  //   background: rgba(196, 0, 0, 0.1);
+  // }
+`);
diff --git a/packages/react-params/src/Param/findComponent.ts b/packages/react-params/src/Param/findComponent.ts
index e84cf83783..9752c2a8b3 100644
--- a/packages/react-params/src/Param/findComponent.ts
+++ b/packages/react-params/src/Param/findComponent.ts
@@ -52,7 +52,7 @@ const componentDef: TypeToComponent[] = [
   { c: Bytes, t: ['Bytes'] },
   { c: Call, t: ['Call', 'Proposal'] },
   { c: Code, t: ['Code'] },
-  { c: DispatchError, t: ['DispatchError'] },
+  { c: DispatchError, t: ['DispatchError', 'SpRuntimeDispatchError'] },
   { c: DispatchResult, t: ['DispatchResult'] },
   { c: Raw, t: ['Raw', 'RuntimeSessionKeys', 'Keys'] },
   { c: Enum, t: ['Enum'] },
@@ -136,10 +136,12 @@ function fromDef ({ displayName, info, lookupName, sub, type }: TypeDef): string
 }
 
 export default function findComponent (registry: Registry, def: TypeDef, overrides: ComponentMap = {}): React.ComponentType<Props> {
-  const findOne = (type: string): React.ComponentType<Props> | null =>
-    overrides[type] || components[type];
+  const findOne = (type?: string): React.ComponentType<Props> | null =>
+    type
+      ? overrides[type] || components[type]
+      : null;
   const type = fromDef(def);
-  let Component = findOne(type);
+  let Component = findOne(def.lookupName) || findOne(type);
 
   if (!Component) {
     let error: string | null = null;