Bubble API extrinsic construction errors in extrinsics app (#2978)

* Display API extrinsic construction errors

* CHANGELOG

CHANGELOG.md

@@ -1,9 +1,23 @@
 # CHANGELOG
 
+## 0.46.0-beta.x
+
+- I18n for es (thanks to https://github.com/wimel)
+- Support for importing mini secrets via QR (Thanks to https://github.com/hanwencheng)
+- Support for multisig calls with new weight parameters
+- Split sign and send updates in the signer modal for better UI tracking
+- Hide zero nonce of accounts/contracts pages
+- Display API extrinsic construction errors in the extrinsics app
+- Do not display signer proxies when there are none matching against accounts
+- Adjust proxy checks for sudo calls to closer align with Polkadot
+- Apply i18n caching, with no reload on translation page
+- Add "Apply" i18n button to reflect editing changes in the UI
+- Sort recovery addresses to align with the Substrate implementation
+
 ## 0.45.2 Jun 16, 2020
 
 - I18n for ja (Thanks to https://github.com/SotaWatanabe)
-- Ia8n for pt (thanks to https://github.com/laurogripa)
+- I18n for pt (thanks to https://github.com/laurogripa)
 - I18n for ru (Thanks to https://github.com/illlefr4u)
 - Update Encointer types (thanks to https://github.com/brenzi)
 - Improve Electron app security settings (Thanks to https://github.com/EthWorks)

packages/page-extrinsics/src/Selection.tsx

@@ -15,11 +15,16 @@ function Selection (): React.ReactElement {
   const { t } = useTranslation();
   const { apiDefaultTxSudo } = useApi();
   const [accountId, setAccountId] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic<'promise'> | null>(null);
 
   const _onExtrinsicChange = useCallback(
-    (method?: SubmittableExtrinsic<'promise'>) =>
-      setExtrinsic(() => method || null),
+    (method?: SubmittableExtrinsic<'promise'>) => setExtrinsic(() => method || null),
+    []
+  );
+
+  const _onExtrinsicError = useCallback(
+    (error?: Error | null) => setError(error ? error.message : null),
     []
   );
 
@@ -40,7 +45,11 @@ function Selection (): React.ReactElement {
         defaultValue={apiDefaultTxSudo}
         label={t<string>('submit the following extrinsic')}
         onChange={_onExtrinsicChange}
+        onError={_onExtrinsicError}
       />
+      {error && (
+        <article className='error'>{error}</article>
+      )}
       <Button.Group>
         <TxButton
           extrinsic={extrinsic}

packages/react-components/src/Extrinsic.tsx

@@ -23,6 +23,7 @@ interface Props extends BareProps {
   label?: React.ReactNode;
   onChange: (method?: SubmittableExtrinsic<'promise'>) => void;
   onEnter?: () => void;
+  onError?: (error?: Error | null) => void;
   onEscape?: () => void;
   withLabel?: boolean;
 }
@@ -42,7 +43,7 @@ function getParams ({ meta }: SubmittableExtrinsicFunction<'promise'>): { name:
   }));
 }
 
-function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onEscape, withLabel }: Props): React.ReactElement<Props> {
+function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label, onChange, onEnter, onError, onEscape, withLabel }: Props): React.ReactElement<Props> {
   const [extrinsic, setCall] = useState<CallState>({ fn: defaultValue, params: getParams(defaultValue) });
   const [values, setValues] = useState<RawParam[]>([]);
 
@@ -64,12 +65,14 @@ function ExtrinsicDisplay ({ defaultValue, isDisabled, isError, isPrivate, label
       try {
         method = extrinsic.fn(...values.map(({ value }): any => value));
       } catch (error) {
-        // swallow
+        onError && onError(error);
       }
+    } else {
+      onError && onError(null);
     }
 
     onChange(method);
-  }, [extrinsic, onChange, values]);
+  }, [extrinsic, onChange, onError, values]);
 
   const _onChangeMethod = useCallback(
     (fn: SubmittableExtrinsicFunction<'promise'>): void => setCall({ fn, params: getParams(fn) }),