From 56e3554656f893895f6729bf27c4fa3a2470479c Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Fri, 1 May 2020 09:01:50 +0200 Subject: [PATCH] putCode with optional gas (UI detection) (#2665) --- packages/page-contracts/src/Codes/Upload.tsx | 33 +++++++++++-------- .../page-contracts/src/Contracts/Call.tsx | 4 +-- packages/page-contracts/src/Deploy.tsx | 11 +++---- 3 files changed, 25 insertions(+), 23 deletions(-) diff --git a/packages/page-contracts/src/Codes/Upload.tsx b/packages/page-contracts/src/Codes/Upload.tsx index b368b0871a..30d44d5963 100644 --- a/packages/page-contracts/src/Codes/Upload.tsx +++ b/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 { 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 { /> {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 ( { 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 { 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 | 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]; diff --git a/packages/page-contracts/src/Contracts/Call.tsx b/packages/page-contracts/src/Contracts/Call.tsx index 43b94a4e7a..74a1b6997e 100644 --- a/packages/page-contracts/src/Contracts/Call.tsx +++ b/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 | null { const hasRpc = callContract?.hasRpcContractsCall; const callMessage = callContract?.getMessage(isNull(callMessageIndex) ? undefined : callMessageIndex); - const { api } = useApi(); const [accountId, setAccountId] = useState(null); const [endowment, setEndowment] = useState(new BN(0)); const [gasLimit, setGasLimit] = useState(new BN(GAS_LIMIT)); @@ -220,7 +218,7 @@ function Call (props: Props): React.ReactElement | null { onFailed={_toggleBusy} onSuccess={_toggleBusy} params={_constructTx} - tx={api.tx.contracts ? 'contracts.call' : 'contract.call'} + tx='contracts.call' withSpinner /> ) diff --git a/packages/page-contracts/src/Deploy.tsx b/packages/page-contracts/src/Deploy.tsx index 48051fe955..bafbd801ad 100644 --- a/packages/page-contracts/src/Deploy.tsx +++ b/packages/page-contracts/src/Deploy.tsx @@ -237,11 +237,9 @@ class Deploy extends ContractModal { 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 { 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