From 770501b6ff44d961ab4324414dcf0f3facb8a525 Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Mon, 19 Oct 2020 14:15:46 +0200 Subject: [PATCH] Add estimation toggle (#3897) * Add estimation toggle * Adjust percentage display --- .../page-contracts/src/Contracts/Call.tsx | 13 +++-- packages/page-contracts/src/Deploy.tsx | 1 - .../src/shared/InputMegaGas.tsx | 50 +++++++++++++++---- packages/page-contracts/src/useWeight.ts | 2 +- 4 files changed, 47 insertions(+), 19 deletions(-) diff --git a/packages/page-contracts/src/Contracts/Call.tsx b/packages/page-contracts/src/Contracts/Call.tsx index 0fa27d4824..2ec76f24f4 100644 --- a/packages/page-contracts/src/Contracts/Call.tsx +++ b/packages/page-contracts/src/Contracts/Call.tsx @@ -32,7 +32,7 @@ function Call ({ className = '', contract, messageIndex, onCallResult, onChangeM const { t } = useTranslation(); const message = contract.abi.messages[messageIndex]; const [accountId, setAccountId] = useAccountId(); - const [estimatedMg, setEstimatedMg] = useState(null); + const [estimatedWeight, setEstimatedWeight] = useState(null); const [value, isValueValid, setEndowment] = useFormField(BN_ZERO); const [outcomes, setOutcomes] = useState([]); const [execTx, setExecTx] = useState | null>(null); @@ -43,7 +43,7 @@ function Call ({ className = '', contract, messageIndex, onCallResult, onChangeM const dbParams = useDebounce(params); useEffect((): void => { - setEstimatedMg(null); + setEstimatedWeight(null); setParams([]); }, [contract, messageIndex]); @@ -65,12 +65,12 @@ function Call ({ className = '', contract, messageIndex, onCallResult, onChangeM contract .read(message, message.isPayable ? dbValue : 0, -1, ...dbParams) .send(accountId) - .then(({ result }) => setEstimatedMg( + .then(({ result }) => setEstimatedWeight( result.isSuccess - ? result.asSuccess.gasConsumed.divn(1e6).iaddn(1) + ? result.asSuccess.gasConsumed : null )) - .catch(() => setEstimatedMg(null)); + .catch(() => setEstimatedWeight(null)); }, [accountId, contract, message, dbParams, dbValue]); const _onSubmitRpc = useCallback( @@ -161,9 +161,8 @@ function Call ({ className = '', contract, messageIndex, onCallResult, onChangeM /> )} ('The maximum amount of gas to use for this contract call. If the call requires more, it will fail.')} - label={t('max gas allowed (M)')} - labelExtra={estimatedMg && t('estimated gas (M) {{estimatedMg}}', { replace: { estimatedMg: estimatedMg.toString() } })} {...weight} /> {message.isMutating && ( diff --git a/packages/page-contracts/src/Deploy.tsx b/packages/page-contracts/src/Deploy.tsx index 04ffe14ce8..887a593f1d 100644 --- a/packages/page-contracts/src/Deploy.tsx +++ b/packages/page-contracts/src/Deploy.tsx @@ -160,7 +160,6 @@ function Deploy ({ codeHash, constructorIndex = 0, onClose, setConstructorIndex /> ('The maximum amount of gas that can be used by this deployment, if the code requires more, the deployment will fail.')} - label={t('max gas allowed (M)')} {...weight} /> diff --git a/packages/page-contracts/src/shared/InputMegaGas.tsx b/packages/page-contracts/src/shared/InputMegaGas.tsx index ac031dc66d..a1cef369a5 100644 --- a/packages/page-contracts/src/shared/InputMegaGas.tsx +++ b/packages/page-contracts/src/shared/InputMegaGas.tsx @@ -2,40 +2,70 @@ // SPDX-License-Identifier: Apache-2.0 import BN from 'bn.js'; -import React from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import styled from 'styled-components'; -import { InputNumber } from '@polkadot/react-components'; +import { InputNumber, Toggle } from '@polkadot/react-components'; import { useTranslation } from '../translate'; interface Props { className?: string; + estimatedWeight?: BN | null; executionTime: number; help: React.ReactNode; isValid: boolean; - label: React.ReactNode; - labelExtra?: React.ReactNode; megaGas: BN; percentage: number; setMegaGas: (value?: BN) => void; } -function InputMegaGas ({ className, executionTime, help, isValid, label, labelExtra, megaGas, percentage, setMegaGas }: Props): React.ReactElement { +function InputMegaGas ({ className, estimatedWeight, executionTime, help, isValid, megaGas, percentage, setMegaGas }: Props): React.ReactElement { const { t } = useTranslation(); + const [withEstimate, setWithEstimate] = useState(false); + + const estimatedMg = useMemo( + () => estimatedWeight + ? estimatedWeight.divn(1e6).iaddn(1) + : null, + [estimatedWeight] + ); + + const label = useMemo( + () => estimatedMg + ? t('max gas allowed (M, {{estimatedMg}} estimated)', { replace: { estimatedMg: estimatedMg.toString() } }) + : t('max gas allowed (M)'), + [estimatedMg, t] + ); + + useEffect((): void => { + estimatedMg && withEstimate && setMegaGas(estimatedMg); + }, [estimatedMg, setMegaGas, withEstimate]); + + const isDisabled = !!estimatedMg && withEstimate; return (
+ onChange={isDisabled ? undefined : setMegaGas} + value={isDisabled ? undefined : megaGas} + > + {estimatedWeight && ( + ('use estimated gas')} + onChange={setWithEstimate} + value={withEstimate} + /> + )} +
{t('{{executionTime}}s execution time', { replace: { executionTime: executionTime.toFixed(3) } })}{', '} - {t('{{percentage}}% of block weight', { replace: { percentage } })} + {t('{{percentage}}% of block weight', { replace: { percentage: percentage.toFixed(2) } })}
); diff --git a/packages/page-contracts/src/useWeight.ts b/packages/page-contracts/src/useWeight.ts index 7a80acd244..4e8f0eede4 100644 --- a/packages/page-contracts/src/useWeight.ts +++ b/packages/page-contracts/src/useWeight.ts @@ -24,7 +24,7 @@ export default function useWeight (initialValue?: BN): UseWeight { const weight = megaGas.mul(BN_MILLION); const executionTime = weight.muln(blockTime).div(api.consts.system.maximumBlockWeight).toNumber(); - const percentage = Math.round((executionTime / blockTime) * 100); + const percentage = (executionTime / blockTime) * 100; // execution is 2s of 6s blocks, i.e. 1/3 return [executionTime / 3000, percentage, weight, !megaGas.isZero() && percentage < 100];