form submit state

ui/address/contract/ContractMethodCallable.tsx

@@ -15,7 +15,7 @@ import ContractMethodField from './ContractMethodField';
 interface Props<T extends SmartContractMethod> {
   data: T;
   onSubmit: (data: T, args: Array<string | Array<string>>) => Promise<ContractMethodCallResult<T>>;
-  renderResult: (data: T, result: ContractMethodCallResult<T>) => React.ReactNode;
+  renderResult: (data: T, result: ContractMethodCallResult<T>, onSettle: () => void) => React.ReactNode;
   isWrite?: boolean;
 }
 
@@ -66,6 +66,14 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
     defaultValues: _fromPairs(inputs.map(({ name }, index) => [ getFieldName(name, index), '' ])),
   });
 
+  const handleTxSettle = React.useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  const handleFormChange = React.useCallback(() => {
+    result && setResult(undefined);
+  }, [ result ]);
+
   const onFormSubmit: SubmitHandler<MethodFormFields> = React.useCallback(async(formData) => {
     const args = Object.entries(formData)
       .sort(sortFields(inputs))
@@ -78,7 +86,6 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
     onSubmit(data, args)
       .then((result) => {
         setResult(result);
-        setLoading(false);
       })
       .catch((error) => {
         setResult(error?.error || error?.data || (error?.reason && { message: error.reason }) || error);
@@ -97,6 +104,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
         alignItems={{ base: 'flex-start', lg: 'center' }}
         onSubmit={ handleSubmit(onFormSubmit) }
         flexWrap="wrap"
+        onChange={ handleFormChange }
       >
         { inputs.map(({ type, name }, index) => {
           const fieldName = getFieldName(name, index);
@@ -108,6 +116,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
               control={ control }
               setValue={ setValue }
               isDisabled={ isLoading }
+              onClear={ handleFormChange }
             />
           );
         }) }
@@ -128,7 +137,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
           <Text>{ data.outputs.map(({ type }) => type).join(', ') }</Text>
         </Flex>
       ) }
-      { result && renderResult(data, result) }
+      { result && renderResult(data, result, handleTxSettle) }
     </Box>
   );
 };

ui/address/contract/ContractMethodField.tsx

@@ -13,19 +13,21 @@ interface Props {
   placeholder: string;
   name: string;
   isDisabled: boolean;
+  onClear: () => void;
 }
 
-const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled }: Props) => {
+const ContractMethodField = ({ control, name, placeholder, setValue, isDisabled, onClear }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   const handleClear = React.useCallback(() => {
     setValue(name, '');
+    onClear();
     ref.current?.focus();
-  }, [ name, setValue ]);
+  }, [ name, onClear, setValue ]);
 
   const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
     return (
-      <FormControl id={ name } maxW={{ base: '100%', lg: 'calc((100% - 24px) / 3)' }} isDisabled={ isDisabled }>
+      <FormControl id={ name } minW={{ base: '100%', lg: 'calc((100% - 24px) / 3 - 65px)' }} w="auto" flexGrow={ 1 } isDisabled={ isDisabled }>
         <InputGroup size="xs">
           <Input
             { ...field }

ui/address/contract/ContractRead.tsx

@@ -51,7 +51,9 @@ const ContractRead = ({ isProxy }: Props) => {
 
   const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
-  const renderResult = React.useCallback((item: SmartContractReadMethod, result: ContractMethodReadResult) => {
+  const renderResult = React.useCallback((item: SmartContractReadMethod, result: ContractMethodReadResult, onSettle: () => void) => {
+    onSettle();
+
     if ('status' in result) {
       return <Alert status="error" mt={ 3 } p={ 4 } borderRadius="md" fontSize="sm">{ result.statusText }</Alert>;
     }

ui/address/contract/ContractWrite.tsx

@@ -89,8 +89,8 @@ const ContractWrite = ({ isProxy }: Props) => {
     }
   }, [ _contract, addressHash, isConnected, signer ]);
 
-  const renderResult = React.useCallback((item: SmartContractWriteMethod, result: ContractMethodWriteResult) => {
-    return <ContractWriteResult result={ result }/>;
+  const renderResult = React.useCallback((item: SmartContractWriteMethod, result: ContractMethodWriteResult, onSettle: () => void) => {
+    return <ContractWriteResult result={ result } onSettle={ onSettle }/>;
   }, []);
 
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {

ui/address/contract/ContractWriteResult.tsx

@@ -8,14 +8,21 @@ import link from 'lib/link/link';
 
 interface Props {
   result: ContractMethodWriteResult;
+  onSettle: () => void;
 }
 
-const ContractWriteResult = ({ result }: Props) => {
+const ContractWriteResult = ({ result, onSettle }: Props) => {
   const txHash = result && 'hash' in result ? result.hash as `0x${ string }` : undefined;
   const txInfo = useWaitForTransaction({
     hash: txHash,
   });
 
+  React.useEffect(() => {
+    if (txInfo.status !== 'loading') {
+      onSettle();
+    }
+  }, [ onSettle, txInfo.status ]);
+
   // eslint-disable-next-line no-console
   console.log('__>__ txInfo', txInfo);