Variable eth value in proposal template

src/components/CreateProposalTemplate/ProposalTemplateTransaction.tsx

@@ -274,10 +274,16 @@ export default function ProposalTemplateTransaction({
             isRequired={false}
             disabled={transactionPending}
             subLabel={
-              <HStack>
-                <Text>{`${t('example', { ns: 'common' })}:`}</Text>
-                <ExampleLabel>{'1.2'}</ExampleLabel>
-              </HStack>
+              <VStack
+                align={'start'}
+                spacing={0}
+              >
+                <HStack>
+                  <Text>{`${t('example', { ns: 'common' })}:`}</Text>
+                  <ExampleLabel>{'1.2'}</ExampleLabel>
+                </HStack>
+                <Text>{t('ethParemeterHelper', { ns: 'proposalTemplate' })}</Text>
+              </VStack>
             }
             errorMessage={undefined}
             value={transaction.ethValue.bigNumberValue}

src/components/CreateProposalTemplate/constants.ts

@@ -1,9 +1,8 @@
-import { BigNumber } from 'ethers';
 import { CreateProposalTemplateTransaction } from '../../types/createProposalTemplate';
 
 export const DEFAULT_PROPOSAL_TEMPLATE_TRANSACTION: CreateProposalTemplateTransaction = {
   targetAddress: '',
-  ethValue: { value: '0', bigNumberValue: BigNumber.from('0') },
+  ethValue: { value: '', bigNumberValue: undefined },
   functionName: '',
   parameters: [
     {

src/components/ui/forms/BigNumberInput.tsx

@@ -42,28 +42,9 @@ export function BigNumberInput({
   ...rest
 }: BigNumberInputProps) {
   const { t } = useTranslation('common');
-  const removeTrailingZeros = (input: string) => {
-    if (input.includes('.')) {
-      const [leftDigits, rightDigits] = input.split('.');
-      if (Number(rightDigits) === 0) {
-        return input.slice(0, leftDigits.length);
-      }
-    }
-    return input;
-  };
-
-  const [inputValue, setInputValue] = useState<string>();
-
-  useEffect(() => {
-    if (!value || inputValue !== undefined) return;
-    setInputValue(
-      value
-        ? !value.isZero()
-          ? removeTrailingZeros(utils.formatUnits(value, decimalPlaces))
-          : '0'
-        : '',
-    );
-  }, [value, decimalPlaces, inputValue]);
+  const [inputValue, setInputValue] = useState<string>(
+    value && !value.isZero() ? utils.formatUnits(value, decimalPlaces) : '',
+  );
 
   // this will insure the caret in the input component does not shift to the end of the input when the value is changed
   const resetCaretPositionForInput = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -98,10 +79,10 @@ export function BigNumberInput({
       if (event) {
         stringValue = event.target.value;
       }
-      if (stringValue === '' || stringValue === undefined) {
+      if (stringValue === '') {
         onChange({
           value: stringValue,
-          bigNumberValue: BigNumber.from(0),
+          bigNumberValue: undefined,
         });
         setInputValue('');
         return;
@@ -140,13 +121,6 @@ export function BigNumberInput({
     [decimalPlaces, max, onChange, truncateDecimalPlaces],
   );
 
-  const onChangeInput = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      processValue(event);
-    },
-    [processValue],
-  );
-
   //set value to min if less than min, when focus is lost
   const onBlur = useCallback(
     (event: React.FocusEvent<HTMLInputElement>) => {
@@ -182,7 +156,7 @@ export function BigNumberInput({
     <InputGroup>
       <Input
         value={inputValue}
-        onChange={onChangeInput}
+        onChange={processValue}
         onBlur={onBlur}
         type="number"
         {...rest}

src/components/ui/modals/ProposalTemplateModal.tsx

@@ -8,7 +8,7 @@ import {
   Switch,
   VStack,
 } from '@chakra-ui/react';
-import { utils } from 'ethers';
+import { utils, BigNumber } from 'ethers';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
@@ -18,10 +18,11 @@ import { usePrepareProposal } from '../../../hooks/DAO/proposal/usePreparePropos
 import useSubmitProposal from '../../../hooks/DAO/proposal/useSubmitProposal';
 import { useFractal } from '../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { BigNumberValuePair } from '../../../types';
 import { ProposalTemplate } from '../../../types/createProposalTemplate';
 import { isValidUrl } from '../../../utils/url';
 import { CustomNonceInput } from '../forms/CustomNonceInput';
-import { InputComponent } from '../forms/InputComponent';
+import { BigNumberComponent, InputComponent } from '../forms/InputComponent';
 import Markdown from '../proposal/Markdown';
 
 interface IProposalTemplateModalProps {
@@ -46,6 +47,25 @@ export default function ProposalTemplateModal({
   const { submitProposal, canUserCreateProposal } = useSubmitProposal();
   const { prepareProposal } = usePrepareProposal();
 
+  const handleEthValueChange = ({
+    transactionIndex,
+    value,
+  }: {
+    transactionIndex: number;
+    value: BigNumberValuePair;
+  }) => {
+    setFilledProposalTransactions(prevState =>
+      prevState.map((transaction, txIndex) => {
+        if (transactionIndex === txIndex) {
+          return {
+            ...transaction,
+            ethValue: value,
+          };
+        }
+        return transaction;
+      }),
+    );
+  };
   const handleParameterChange = ({
     transactionIndex,
     parameterIndex,
@@ -179,6 +199,27 @@ export default function ProposalTemplateModal({
                 </Flex>
               ),
           )}
+          {(showAll ||
+            !transactions[transactionIndex].ethValue.bigNumberValue ||
+            BigNumber.from(transactions[transactionIndex].ethValue.bigNumberValue).eq(0)) && (
+            <Flex
+              width="100%"
+              flexWrap="wrap"
+              marginTop="1.5rem"
+            >
+              <BigNumberComponent
+                label={t('labelEthValue', { ns: 'proposal' })}
+                helper={t('helperEthValue', { ns: 'proposal' })}
+                isRequired={false}
+                errorMessage={undefined}
+                value={BigNumber.from(transaction.ethValue.bigNumberValue || 0)}
+                onChange={value => {
+                  handleEthValueChange({ transactionIndex, value });
+                }}
+                decimalPlaces={18}
+              />
+            </Flex>
+          )}
           {transaction.parameters.length > 0 && <Divider color="chocolate.700" />}
         </VStack>
       ))}

src/i18n/locales/en/proposalTemplate.json

@@ -17,6 +17,7 @@
   "value": "Value",
   "userInput": "user input",
   "eth": "ETH",
+  "ethParemeterHelper": "Leave empty for a blank input",
   "emptyProposalTemplates": "No templates yet.",
   "emptyProposalTemplatesCreateMessage": "Add your first template.",
   "removeTemplatePendingToastMessage": "Creating proposal to remove proposal template",