Warn user when RPC request size is >10MB (#621)

* warn when transaction size is >10MB #500

* Formatting changes for CI

* More formatting changes for CI

* Third time's the charm?

* moved code to only apply to extrinsics

* formatting for linter

packages/app-extrinsics/src/Selection.tsx

@@ -4,7 +4,7 @@
 
 import BN from 'bn.js';
 import { I18nProps } from '@polkadot/ui-app/types';
-import { QueueTx$ExtrinsicAdd } from '@polkadot/ui-app/Status/types';
+import { QueueTx$ExtrinsicAdd, ActionStatus } from '@polkadot/ui-app/Status/types';
 import { ApiProps } from '@polkadot/ui-api/types';
 
 import React from 'react';
@@ -17,7 +17,10 @@ import ExtrinsicDisplay from './Extrinsic';
 import Nonce from './Nonce';
 import translate from './translate';
 
+const MAX_TRANSACTION_SIZE = 10 * 24 * 24;
+
 type Props = ApiProps & I18nProps & {
+  onStatusChange: (status: ActionStatus) => void,
   queueExtrinsic: QueueTx$ExtrinsicAdd
 };
 
@@ -113,7 +116,7 @@ class Selection extends React.PureComponent<Props, State> {
   }
 
   private onQueue (isUnsigned: boolean): void {
-    const { api, queueExtrinsic } = this.props;
+    const { api, queueExtrinsic, onStatusChange } = this.props;
     const { method, isValid, accountId } = this.state;
 
     if (!isValid || !method) {
@@ -121,12 +124,22 @@ class Selection extends React.PureComponent<Props, State> {
     }
 
     const fn = Method.findFunction(method.callIndex);
+    const extrinsic = api.tx[fn.section][fn.method](...method.args);
+
+    if (extrinsic.toU8a().length > MAX_TRANSACTION_SIZE) {
+      onStatusChange({
+        action: fn.section + '.' + fn.method,
+        status: 'error',
+        message: 'Warning: This transaction will likely be rejected by the network as it is greater \
+                  than the maximum size of ' + MAX_TRANSACTION_SIZE / (24 * 24) + 'MB'
+      });
+    }
 
     queueExtrinsic({
       accountId: isUnsigned
         ? undefined
         : accountId,
-      extrinsic: api.tx[fn.section][fn.method](...method.args),
+      extrinsic: extrinsic,
       isUnsigned
     });
   }

packages/app-extrinsics/src/index.tsx

@@ -23,7 +23,7 @@ type Props = AppProps & I18nProps & {
 class ExtrinsicsApp extends React.PureComponent<Props> {
   render () {
 
-    const { accountAll, t } = this.props;
+    const { accountAll, onStatusChange, t } = this.props;
 
     if (!accountAll || !Object.keys(accountAll).length) {
       return (
@@ -40,7 +40,7 @@ class ExtrinsicsApp extends React.PureComponent<Props> {
       <main className='extrinsics--App'>
         <QueueConsumer>
           {({ queueExtrinsic }: QueueProps) => (
-            <Selection queueExtrinsic={queueExtrinsic} />
+            <Selection onStatusChange={onStatusChange} queueExtrinsic={queueExtrinsic} />
           )}
         </QueueConsumer>
       </main>