fallback and receive methods; array as arg

ui/address/contract/ContractMethodCallable.tsx

@@ -14,7 +14,7 @@ import ContractMethodField from './ContractMethodField';
 
 interface Props<T extends SmartContractMethod> {
   data: T;
-  onSubmit: (data: T, args: Array<string>) => Promise<ContractMethodCallResult<T>>;
+  onSubmit: (data: T, args: Array<string | Array<string>>) => Promise<ContractMethodCallResult<T>>;
   renderResult: (data: T, result: ContractMethodCallResult<T>) => React.ReactNode;
   isWrite?: boolean;
 }
@@ -37,6 +37,15 @@ const sortFields = (data: Array<SmartContractMethodInput>) => ([ a ]: [string, s
   return 0;
 };
 
+const castFieldValue = (data: Array<SmartContractMethodInput>) => ([ key, value ]: [ string, string ], index: number) => {
+  if (data[index].type.includes('[]')) {
+    return [ key, parseArrayValue(value) ];
+  }
+  return [ key, value ];
+};
+
+const parseArrayValue = (value: string) => value.replace(/(\[|\])|\s/g, '').split(',');
+
 const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit, renderResult, isWrite }: Props<T>) => {
 
   const [ result, setResult ] = React.useState<ContractMethodCallResult<T>>();
@@ -60,7 +69,9 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
   const onFormSubmit: SubmitHandler<MethodFormFields> = React.useCallback(async(formData) => {
     const args = Object.entries(formData)
       .sort(sortFields(inputs))
+      .map(castFieldValue(inputs))
       .map(([ , value ]) => value);
+
     setResult(undefined);
     setLoading(true);
 
@@ -70,7 +81,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, onSubmit,
         setLoading(false);
       })
       .catch((error) => {
-        setResult('error' in error ? error.error : error);
+        setResult(error?.error || error?.data || error);
         setLoading(false);
       });
   }, [ onSubmit, data, inputs ]);

ui/address/contract/ContractRead.tsx

@@ -34,7 +34,7 @@ const ContractRead = ({ isProxy }: Props) => {
     },
   });
 
-  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractReadMethod, args: Array<string>) => {
+  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractReadMethod, args: Array<string | Array<string>>) => {
     return apiFetch<'contract_method_query', SmartContractQueryMethodRead>('contract_method_query', {
       pathParams: { id: addressHash },
       fetchParams: {

ui/address/contract/ContractWrite.tsx

 import { Alert } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
+import { useSigner } from 'wagmi';
 
 import type { ContractMethodWriteResult } from './types';
 import type { SmartContractWriteMethod } from 'types/api/contract';
@@ -14,6 +15,7 @@ import { useContractContext } from './context';
 import ContractConnectWallet from './ContractConnectWallet';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractWriteResult from './ContractWriteResult';
+import { getNativeCoinValue } from './utils';
 
 interface Props {
   isProxy?: boolean;
@@ -23,6 +25,7 @@ const ContractWrite = ({ isProxy }: Props) => {
   const router = useRouter();
 
   const addressHash = router.query.id?.toString();
+  const { data: signer } = useSigner();
 
   const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
     pathParams: { id: addressHash },
@@ -33,25 +36,31 @@ const ContractWrite = ({ isProxy }: Props) => {
 
   const contract = useContractContext();
 
-  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string>) => {
+  const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<string>>) => {
     if (!contract) {
       return;
     }
 
     if (item.type === 'fallback' || item.type === 'receive') {
-      return;
+      const value = args[0] ? getNativeCoinValue(args[0]) : '0';
+      const result = await signer?.sendTransaction({
+        to: addressHash,
+        value,
+      });
+      return { hash: result?.hash as string };
     }
 
+    const _args = item.stateMutability === 'payable' ? args.slice(0, -1) : args;
+    const value = item.stateMutability === 'payable' ? getNativeCoinValue(args[args.length - 1]) : undefined;
     const methodName = item.name;
-    const result = await contract[methodName](...args, {
+
+    const result = await contract[methodName](..._args, {
       gasLimit: 100_000,
+      value,
     });
 
-    // eslint-disable-next-line no-console
-    console.log('__>__', { result, args });
-
     return { hash: result.hash as string };
-  }, [ contract ]);
+  }, [ addressHash, contract, signer ]);
 
   const renderResult = React.useCallback((item: SmartContractWriteMethod, result: ContractMethodWriteResult) => {
     if (!result || 'message' in result) {

ui/address/contract/utils.ts

+import BigNumber from 'bignumber.js';
+
+import config from 'configs/app/config';
+
+export const getNativeCoinValue = (value: string | Array<string>) => {
+  const _value = Array.isArray(value) ? value[0] : value;
+  return BigNumber(_value).times(10 ** config.network.currency.decimals).toString();
+};