Handlers for OpaqueCall input/display types (#3135)

* Handlers for OpaqueCall input/display types

* Simplify disabled OpaqueCall

packages/react-components/src/Extrinsic.tsx

@@ -8,10 +8,10 @@ import { TypeDef } from '@polkadot/types/types';
 
 import React, { useCallback, useEffect, useState } from 'react';
 import { GenericCall, getTypeDef } from '@polkadot/types';
-import { InputExtrinsic } from '@polkadot/react-components';
 import Params from '@polkadot/react-params';
 import { isUndefined } from '@polkadot/util';
 
+import InputExtrinsic from './InputExtrinsic';
 import paramComponents from './Params';
 
 interface Props {

packages/react-components/src/Params/OpaqueCall.tsx

@@ -0,0 +1,48 @@
+// Copyright 2017-2020 @polkadot/app-extrinsics 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 { SubmittableExtrinsic } from '@polkadot/api/types';
+import { Props, RawParam } from '@polkadot/react-params/types';
+
+import React, { useCallback } from 'react';
+import { useApi } from '@polkadot/react-hooks';
+
+import ExtrinsicDisplay from './Extrinsic';
+
+function OpaqueCall ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
+  const { apiDefaultTxSudo } = useApi();
+
+  const _onChange = useCallback(
+    ({ isValid, value }: RawParam): void => {
+      let callData = null;
+
+      if (isValid && value) {
+        callData = (value as SubmittableExtrinsic<'promise'>).method.toHex();
+      }
+
+      onChange && onChange({
+        isValid,
+        value: callData
+      });
+    },
+    [onChange]
+  );
+
+  return (
+    <ExtrinsicDisplay
+      className={className}
+      defaultValue={apiDefaultTxSudo}
+      isDisabled={isDisabled}
+      isError={isError}
+      isPrivate
+      label={label}
+      onChange={_onChange}
+      onEnter={onEnter}
+      onEscape={onEscape}
+      withLabel={withLabel}
+    />
+  );
+}
+
+export default React.memo(OpaqueCall);

packages/react-components/src/Params/Proposal.tsx

@@ -12,6 +12,7 @@ import ExtrinsicDisplay from './Extrinsic';
 
 function ProposalDisplay ({ className = '', isDisabled, isError, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const { apiDefaultTxSudo } = useApi();
+
   const _onChange = useCallback(
     ({ isValid, value }: RawParam): void => {
       let proposal = null;

packages/react-components/src/Params/index.ts

@@ -5,10 +5,12 @@
 import { ComponentMap } from '@polkadot/react-params/types';
 
 import Call from './Call';
+import OpaqueCall from './OpaqueCall';
 import Proposal from './Proposal';
 
 const components: ComponentMap = {
   Call,
+  OpaqueCall,
   Proposal
 };
 

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

@@ -0,0 +1,31 @@
+// 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 { Props } from '../types';
+
+import React from 'react';
+import { registry } from '@polkadot/react-api';
+import { Bytes } from '@polkadot/types';
+
+import CallDisplay from './Call';
+import Unknown from './Unknown';
+
+function OpaqueCall (props: Props): React.ReactElement<Props> {
+  if (!props.isDisabled) {
+    return (
+      <Unknown {...props} />
+    );
+  }
+
+  const value = registry.createType('Call', (props.defaultValue.value as Bytes).toHex());
+
+  return (
+    <CallDisplay
+      {...props}
+      defaultValue={{ isValid: true, value }}
+    />
+  );
+}
+
+export default React.memo(OpaqueCall);

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

@@ -24,6 +24,7 @@ import KeyValue from './KeyValue';
 import KeyValueArray from './KeyValueArray';
 import Moment from './Moment';
 import Null from './Null';
+import OpaqueCall from './OpaqueCall';
 import Option from './Option';
 import Raw from './Raw';
 import Struct from './Struct';
@@ -56,6 +57,7 @@ const componentDef: TypeToComponent[] = [
   { c: KeyValueArray, t: ['Vec<KeyValue>'] },
   { c: Moment, t: ['Moment', 'MomentOf'] },
   { c: Null, t: ['Null'] },
+  { c: OpaqueCall, t: ['OpaqueCall'] },
   { c: Option, t: ['Option'] },
   { c: Text, t: ['String', 'Text'] },
   { c: Struct, t: ['Struct'] },