putCode with optional gas (UI detection) (#2665)

packages/page-contracts/src/Codes/Upload.tsx

@@ -21,27 +21,33 @@ interface Props extends ContractModalProps, ApiProps {}
 
 interface State extends ContractModalState {
   gasLimit: BN;
+  isGasLimit: boolean;
   isWasmValid: boolean;
   wasm?: Uint8Array | null;
 }
 
+const WASM_MAGIC = '0,97,115,109'; // '\0asm'
+
 class Upload extends ContractModal<Props, State> {
   constructor (props: Props) {
     super(props);
 
+    const { api, t } = this.props;
+
     this.defaultState = {
       ...this.defaultState,
       gasLimit: new BN(GAS_LIMIT),
+      isGasLimit: api.tx.contracts.putCode.meta.args.length === 2,
       isWasmValid: false,
       wasm: null
     };
     this.state = this.defaultState;
-    this.headerText = props.t('Upload WASM');
+    this.headerText = t('Upload WASM');
   }
 
   protected renderContent = (): React.ReactNode => {
     const { t } = this.props;
-    const { isBusy, isWasmValid, wasm } = this.state;
+    const { isBusy, isGasLimit, isWasmValid, wasm } = this.state;
 
     return (
       <>
@@ -60,15 +66,15 @@ class Upload extends ContractModal<Props, State> {
         />
         {this.renderInputName()}
         {this.renderInputAbi()}
-        {this.renderInputGas()}
+        {isGasLimit && this.renderInputGas()}
       </>
     );
   }
 
   protected renderButtons = (): React.ReactNode => {
-    const { api, t } = this.props;
-    const { accountId, gasLimit, isBusy, isNameValid, isWasmValid, wasm } = this.state;
-    const isValid = !isBusy && accountId && isNameValid && isWasmValid && !gasLimit.isZero() && !!accountId;
+    const { t } = this.props;
+    const { accountId, gasLimit, isBusy, isGasLimit, isNameValid, isWasmValid, wasm } = this.state;
+    const isValid = !isBusy && !!accountId && isNameValid && isWasmValid && (isGasLimit || !gasLimit.isZero());
 
     return (
       <TxButton
@@ -80,8 +86,12 @@ class Upload extends ContractModal<Props, State> {
         onClick={this.toggleBusy(true)}
         onFailed={this.toggleBusy(false)}
         onSuccess={this.onSuccess}
-        params={[gasLimit, wasm]}
-        tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
+        params={
+          isGasLimit
+            ? [gasLimit, wasm]
+            : [wasm]
+        }
+        tx='contracts.putCode'
         withSpinner
       />
     );
@@ -89,18 +99,15 @@ class Upload extends ContractModal<Props, State> {
 
   private onAddWasm = (wasm: Uint8Array, name: string): void => {
     this.setState({
-      isWasmValid: wasm.subarray(0, 4).toString() === '0,97,115,109', // '\0asm'
+      isWasmValid: wasm.subarray(0, 4).toString() === WASM_MAGIC,
       wasm: compactAddLength(wasm)
     });
     this.onChangeName(name);
   }
 
   private onSuccess = (result: SubmittableResult): void => {
-    const { api } = this.props;
-
     this.setState(({ abi, name, tags }): Pick<State, never> | null => {
-      const section = api.tx.contracts ? 'contracts' : 'contract';
-      const record = result.findRecord(section, 'CodeStored');
+      const record = result.findRecord('contracts', 'CodeStored');
 
       if (record) {
         const codeHash = record.event.data[0];

packages/page-contracts/src/Contracts/Call.tsx

@@ -10,7 +10,6 @@ import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Button, ButtonCancel, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
-import { useApi } from '@polkadot/react-hooks';
 import { createValue } from '@polkadot/react-params/values';
 import { isNull } from '@polkadot/util';
 
@@ -36,7 +35,6 @@ function Call (props: Props): React.ReactElement<Props> | null {
   const hasRpc = callContract?.hasRpcContractsCall;
   const callMessage = callContract?.getMessage(isNull(callMessageIndex) ? undefined : callMessageIndex);
 
-  const { api } = useApi();
   const [accountId, setAccountId] = useState<StringOrNull>(null);
   const [endowment, setEndowment] = useState<BN>(new BN(0));
   const [gasLimit, setGasLimit] = useState<BN>(new BN(GAS_LIMIT));
@@ -220,7 +218,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
                 onFailed={_toggleBusy}
                 onSuccess={_toggleBusy}
                 params={_constructTx}
-                tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
+                tx='contracts.call'
                 withSpinner
               />
             )

packages/page-contracts/src/Deploy.tsx

@@ -237,11 +237,9 @@ class Deploy extends ContractModal<Props, State> {
         onSuccess={this.onSuccess}
         params={this.constructCall}
         tx={
-          api.tx.contracts
-            ? api.tx.contracts.instantiate
-              ? 'contracts.instantiate' // V2 (new)
-              : 'contracts.create' // V2 (old)
-            : 'contract.create' // V1
+          api.tx.contracts.instantiate
+            ? 'contracts.instantiate' // V2 (new)
+            : 'contracts.create' // V2 (old)
         }
         withSpinner
       />
@@ -290,8 +288,7 @@ class Deploy extends ContractModal<Props, State> {
   private onSuccess = (result: SubmittableResult): void => {
     const { api, history } = this.props;
 
-    const section = api.tx.contracts ? 'contracts' : 'contract';
-    const records = result.filterRecords(section, 'Instantiated');
+    const records = result.filterRecords('contracts', 'Instantiated');
 
     if (records.length) {
       // find the last EventRecord (in the case of multiple contracts deployed - we should really be