write contract and refactoring

lib/api/resources.ts

@@ -14,7 +14,7 @@ import type {
 } from 'types/api/address';
 import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } from 'types/api/block';
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
-import type { SmartContract, SmartContractReadMethod } from 'types/api/contract';
+import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod } from 'types/api/contract';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
 import type { JsonRpcUrlResponse } from 'types/api/jsonRpcUrl';
@@ -174,6 +174,9 @@ export const RESOURCES = {
   contract_method_query: {
     path: '/api/v2/smart-contracts/:id/query-read-method',
   },
+  contract_methods_write: {
+    path: '/api/v2/smart-contracts/:id/methods-write',
+  },
 
   // TOKEN
   token: {
@@ -284,6 +287,7 @@ Q extends 'token_counters' ? TokenCounters :
 Q extends 'config_json_rpc' ? JsonRpcUrlResponse :
 Q extends 'contract' ? SmartContract :
 Q extends 'contract_methods_read' ? Array<SmartContractReadMethod> :
+Q extends 'contract_methods_write' ? Array<SmartContractWriteMethod> :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

types/api/contract.ts

@@ -14,15 +14,30 @@ export interface SmartContract {
   can_be_visualized_via_sol2uml: boolean | null;
 }
 
-export interface SmartContractReadMethod {
+export interface SmartContractMethodBase {
   inputs: Array<SmartContractMethodInput>;
   outputs: Array<SmartContractMethodOutput>;
-  method_id: string;
+  constant: boolean;
   name: string;
   stateMutability: string;
-  type: string;
+  type: 'function';
+  payable: boolean;
+}
+
+export interface SmartContractReadMethod extends SmartContractMethodBase {
+  method_id: string;
 }
 
+export interface SmartContractWriteFallback {
+  payable: true;
+  stateMutability: 'payable';
+  type: 'fallback';
+}
+
+export type SmartContractWriteMethod = SmartContractMethodBase | SmartContractWriteFallback;
+
+export type SmartContractMethod = SmartContractReadMethod | SmartContractWriteMethod;
+
 export interface SmartContractMethodInput {
   internalType: string;
   name: string;
@@ -30,5 +45,5 @@ export interface SmartContractMethodInput {
 }
 
 export interface SmartContractMethodOutput extends SmartContractMethodInput {
-  value: string;
+  value?: string;
 }

ui/address/contract/ContractReadItemInput.tsx → ui/address/contract/ContractMethodCallable.tsx

@@ -4,21 +4,17 @@ import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 
-import type { MethodInputFields } from './types';
-import type { SmartContract, SmartContractMethodInput, SmartContractMethodOutput } from 'types/api/contract';
+import type { MethodFormFields } from './types';
+import type { SmartContractMethodInput, SmartContractMethod } from 'types/api/contract';
 
+import appConfig from 'configs/app/config';
 import arrowIcon from 'icons/arrows/down-right.svg';
-import useApiFetch from 'lib/api/useApiFetch';
 
-import ContractReadItemInputField from './ContractReadItemInputField';
+import ContractMethodField from './ContractMethodField';
 
-interface Props {
-  data: Array<SmartContractMethodInput>;
-  address?: string;
-  abi?: SmartContract['abi'];
-  methodName: string;
-  methodId: string;
-  outputs: Array<SmartContractMethodOutput>;
+interface Props<T extends SmartContractMethod> {
+  data: T;
+  caller: (data: T, args: Array<string>) => Promise<Array<Array<string>>>;
 }
 
 const getFieldName = (name: string, index: number): string => name || String(index);
@@ -39,36 +35,30 @@ const sortFields = (data: Array<SmartContractMethodInput>) => ([ a ]: [string, s
   return 0;
 };
 
-const ContractReadItemInput = ({ data, address, methodId, methodName, outputs }: Props) => {
-  const { control, handleSubmit, setValue } = useForm<MethodInputFields>({
-    defaultValues: _fromPairs(data.map(({ name }, index) => [ getFieldName(name, index), '' ])),
-  });
-  const apiFetch = useApiFetch();
-  const [ result, setResult ] = React.useState<Array<[ string, string ]>>([ ]);
+const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller }: Props<T>) => {
+
+  const inputs = React.useMemo(() => {
+    return data.payable && (!('inputs' in data) || data.inputs.length === 0) ? [ {
+      name: 'value',
+      type: appConfig.network.currency.symbol,
+      internalType: appConfig.network.currency.symbol,
+    } as SmartContractMethodInput ] : data.inputs;
+  }, [ data ]);
 
-  const onSubmit: SubmitHandler<MethodInputFields> = React.useCallback(async(formData) => {
-    if (!address) {
-      return;
-    }
+  const { control, handleSubmit, setValue } = useForm<MethodFormFields>({
+    defaultValues: _fromPairs(inputs.map(({ name }, index) => [ getFieldName(name, index), '' ])),
+  });
+  const [ result, setResult ] = React.useState<Array<Array<string>>>([ ]);
 
+  const onSubmit: SubmitHandler<MethodFormFields> = React.useCallback(async(formData) => {
     const args = Object.entries(formData)
-      .sort(sortFields(data))
+      .sort(sortFields(inputs))
       .map(([ , value ]) => value);
 
-    // todo_tom delete mock
-    setResult(outputs.map(({ type }, index) => ([ type, args[index] ])));
-
-    await apiFetch('contract_method_query', {
-      pathParams: { id: address },
-      fetchParams: {
-        method: 'POST',
-        body: {
-          args,
-          method_id: methodId,
-        },
-      },
-    });
-  }, [ address, apiFetch, data, methodId, outputs ]);
+    const result = await caller(data, args);
+    setResult(result);
+
+  }, [ caller, data, inputs ]);
 
   const resultBgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
@@ -84,10 +74,10 @@ const ContractReadItemInput = ({ data, address, methodId, methodName, outputs }:
         onSubmit={ handleSubmit(onSubmit) }
         flexWrap="wrap"
       >
-        { data.map(({ type, name }, index) => {
+        { inputs.map(({ type, name }, index) => {
           const fieldName = getFieldName(name, index);
           return (
-            <ContractReadItemInputField
+            <ContractMethodField
               key={ fieldName }
               name={ fieldName }
               placeholder={ `${ name }(${ type })` }
@@ -105,14 +95,16 @@ const ContractReadItemInput = ({ data, address, methodId, methodName, outputs }:
           Query
         </Button>
       </chakra.form>
-      <Flex mt={ 3 }>
-        <Icon as={ arrowIcon } boxSize={ 5 } mr={ 1 }/>
-        <Text>{ outputs.map(({ type }) => type).join(', ') }</Text>
-      </Flex>
+      { 'outputs' in data && data.outputs.length > 0 && (
+        <Flex mt={ 3 }>
+          <Icon as={ arrowIcon } boxSize={ 5 } mr={ 1 }/>
+          <Text>{ data.outputs.map(({ type }) => type).join(', ') }</Text>
+        </Flex>
+      ) }
       { result.length > 0 && (
         <Box mt={ 3 } p={ 4 } borderRadius="md" bgColor={ resultBgColor } fontSize="sm">
           <p>
-          [ <chakra.span fontWeight={ 600 }>{ methodName }</chakra.span> method Response ]
+          [ <chakra.span fontWeight={ 600 }>{ 'name' in data ? data.name : '' }</chakra.span> method response ]
           </p>
           <p>[</p>
           { result.map(([ key, value ], index) => (
@@ -125,4 +117,4 @@ const ContractReadItemInput = ({ data, address, methodId, methodName, outputs }:
   );
 };
 
-export default ContractReadItemInput;
+export default React.memo(ContractMethodCallable) as typeof ContractMethodCallable;

ui/address/contract/ContractReadItemOutput.tsx → ui/address/contract/ContractMethodConstant.tsx

@@ -12,12 +12,16 @@ interface Props {
   data: SmartContractMethodOutput;
 }
 
-const ContractReadItemOutput = ({ data }: Props) => {
+const ContractMethodStatic = ({ data }: Props) => {
   const isBigInt = data.type.includes('int256') || data.type.includes('int128');
-  const [ value, setValue ] = React.useState(isBigInt ? BigNumber(data.value).toFixed() : data.value);
+  const [ value, setValue ] = React.useState(isBigInt && data.value ? BigNumber(data.value).toFixed() : data.value);
   const [ label, setLabel ] = React.useState('WEI');
 
   const handleCheckboxChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    if (!data.value) {
+      return;
+    }
+
     if (event.target.checked) {
       setValue(BigNumber(data.value).div(WEI).toFixed());
       setLabel(appConfig.network.currency.symbol || 'ETH');
@@ -35,4 +39,4 @@ const ContractReadItemOutput = ({ data }: Props) => {
   );
 };
 
-export default ContractReadItemOutput;
+export default ContractMethodStatic;

ui/address/contract/ContractReadItemInputField.tsx → ui/address/contract/ContractMethodField.tsx

@@ -3,18 +3,18 @@ import React from 'react';
 import type { Control, ControllerRenderProps, UseFormSetValue } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
-import type { MethodInputFields } from './types';
+import type { MethodFormFields } from './types';
 
 import InputClearButton from 'ui/shared/InputClearButton';
 
 interface Props {
-  control: Control<MethodInputFields>;
-  setValue: UseFormSetValue<MethodInputFields>;
+  control: Control<MethodFormFields>;
+  setValue: UseFormSetValue<MethodFormFields>;
   placeholder: string;
   name: string;
 }
 
-const ContractReadItemInputField = ({ control, name, placeholder, setValue }: Props) => {
+const ContractMethodField = ({ control, name, placeholder, setValue }: Props) => {
   const ref = React.useRef<HTMLInputElement>(null);
 
   const handleClear = React.useCallback(() => {
@@ -22,7 +22,7 @@ const ContractReadItemInputField = ({ control, name, placeholder, setValue }: Pr
     ref.current?.focus();
   }, [ name, setValue ]);
 
-  const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodInputFields> }) => {
+  const renderInput = React.useCallback(({ field }: { field: ControllerRenderProps<MethodFormFields> }) => {
     return (
       <FormControl id={ name } maxW={{ base: '100%', lg: 'calc((100% - 24px) / 3)' }}>
         <InputGroup size="xs">
@@ -51,4 +51,4 @@ const ContractReadItemInputField = ({ control, name, placeholder, setValue }: Pr
   );
 };
 
-export default ContractReadItemInputField;
+export default React.memo(ContractMethodField);

ui/address/contract/ContractMethodsAccordion.tsx

+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, Link } from '@chakra-ui/react';
+import _range from 'lodash/range';
+import React from 'react';
+
+import type { SmartContractMethod } from 'types/api/contract';
+
+interface Props<T extends SmartContractMethod> {
+  data: Array<T>;
+  renderContent: (item: T, index: number, id: number) => React.ReactNode;
+}
+
+const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, renderContent }: Props<T>) => {
+  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>([]);
+  const [ id, setId ] = React.useState(0);
+
+  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
+    setExpandedSections(newValue);
+  }, []);
+
+  const handleExpandAll = React.useCallback(() => {
+    if (!data) {
+      return;
+    }
+
+    if (expandedSections.length < data.length) {
+      setExpandedSections(_range(0, data.length));
+    } else {
+      setExpandedSections([]);
+    }
+  }, [ data, expandedSections.length ]);
+
+  const handleReset = React.useCallback(() => {
+    setId((id) => id + 1);
+  }, []);
+
+  return (
+    <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
+      { data.map((item, index) => {
+        return (
+          <AccordionItem key={ index } as="section">
+            <h2>
+              <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }}>
+                <Box as="span" fontFamily="heading" fontWeight={ 500 } fontSize="lg" mr={ 1 }>
+                  { index + 1 }. { item.type === 'fallback' ? 'fallback' : item.name }
+                </Box>
+                <AccordionIcon/>
+              </AccordionButton>
+            </h2>
+            <AccordionPanel pb={ 4 } px={ 0 }>
+              { renderContent(item, index, id) }
+            </AccordionPanel>
+          </AccordionItem>
+        );
+      }) }
+      <Flex columnGap={ 3 } position="absolute" top={ 0 } right={ 0 } py={ 3 } lineHeight="27px">
+        <Link onClick={ handleExpandAll }>{ expandedSections.length === data.length ? 'Collapse' : 'Expand' } all</Link>
+        <Link onClick={ handleReset }>Reset</Link>
+      </Flex>
+    </Accordion>
+  );
+};
+
+export default React.memo(ContractMethodsAccordion) as typeof ContractMethodsAccordion;

ui/address/contract/ContractRead.tsx

-import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex, Link } from '@chakra-ui/react';
-import _range from 'lodash/range';
+import { Flex } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { SmartContractReadMethod } from 'types/api/contract';
+
+import useApiFetch from 'lib/api/useApiFetch';
 import useApiQuery from 'lib/api/useApiQuery';
+import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
+import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
-import ContractReadItemInput from './ContractReadItemInput';
-import ContractReadItemOutput from './ContractReadItemOutput';
+import ContractMethodCallable from './ContractMethodCallable';
+import ContractMethodConstant from './ContractMethodConstant';
 
 const ContractRead = () => {
   const router = useRouter();
-
-  const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>([]);
-  const [ id, setId ] = React.useState(0);
+  const apiFetch = useApiFetch();
 
   const addressHash = router.query.id?.toString();
 
@@ -24,80 +26,48 @@ const ContractRead = () => {
     },
   });
 
-  const contractInfo = useApiQuery('contract', {
-    pathParams: { id: addressHash },
-    queryOptions: {
-      enabled: Boolean(router.query.id),
-    },
-  });
+  const contractCaller = React.useCallback(async(item: SmartContractReadMethod, args: Array<string>) => {
+    await apiFetch('contract_method_query', {
+      pathParams: { id: addressHash },
+      fetchParams: {
+        method: 'POST',
+        body: {
+          args,
+          method_id: item.method_id,
+        },
+      },
+    });
 
-  const handleAccordionStateChange = React.useCallback((newValue: Array<number>) => {
-    setExpandedSections(newValue);
-  }, []);
-
-  const handleExpandAll = React.useCallback(() => {
-    if (!data) {
-      return;
-    }
+    return [ [ 'string', 'this is mock' ] ];
+  }, [ addressHash, apiFetch ]);
 
-    if (expandedSections.length < data.length) {
-      setExpandedSections(_range(0, data.length));
-    } else {
-      setExpandedSections([]);
+  const renderContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
+    if (item.inputs.length === 0) {
+      return (
+        <Flex flexDir="column" rowGap={ 1 }>
+          { item.outputs.map((output, index) => <ContractMethodConstant key={ index } data={ output }/>) }
+        </Flex>
+      );
     }
-  }, [ data, expandedSections.length ]);
 
-  const handleReset = React.useCallback(() => {
-    setId((id) => id + 1);
-  }, []);
+    return (
+      <ContractMethodCallable
+        key={ id + '_' + index }
+        data={ item }
+        caller={ contractCaller }
+      />
+    );
+  }, [ contractCaller ]);
 
   if (isError) {
     return <DataFetchAlert/>;
   }
 
   if (isLoading) {
-    return <span>loading...</span>;
+    return <ContentLoader/>;
   }
 
-  return (
-    <Accordion allowMultiple position="relative" onChange={ handleAccordionStateChange } index={ expandedSections }>
-      { data.map((item, index) => {
-        return (
-          <AccordionItem key={ item.name + '_' + item.method_id } as="section">
-            <h2>
-              <AccordionButton px={ 0 } py={ 3 } _hover={{ bgColor: 'inherit' }}>
-                <Box as="span" fontFamily="heading" fontWeight={ 500 } fontSize="lg" mr={ 1 }>
-                  { index + 1 }. { item.name }
-                </Box>
-                <AccordionIcon/>
-              </AccordionButton>
-            </h2>
-            <AccordionPanel pb={ 4 } px={ 0 }>
-              { item.inputs.length === 0 ? (
-                <Flex flexDir="column" rowGap={ 1 }>
-                  { item.outputs.map((output, index) => <ContractReadItemOutput key={ index } data={ output }/>) }
-                </Flex>
-              ) : (
-                <ContractReadItemInput
-                  key={ id + '_' + index }
-                  data={ item.inputs }
-                  address={ addressHash }
-                  abi={ contractInfo.data?.abi }
-                  methodName={ item.name }
-                  methodId={ item.method_id }
-                  outputs={ item.outputs }
-                />
-              ) }
-            </AccordionPanel>
-          </AccordionItem>
-        );
-      }) }
-      <Flex columnGap={ 3 } position="absolute" top={ 0 } right={ 0 } py={ 3 } lineHeight="27px">
-        <Link onClick={ handleExpandAll }>{ expandedSections.length === data.length ? 'Collapse' : 'Expand' } all</Link>
-        <Link onClick={ handleReset }>Reset</Link>
-      </Flex>
-    </Accordion>
-  );
+  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
 };
 
 export default ContractRead;

ui/address/contract/ContractWrite.tsx

+import { useRouter } from 'next/router';
+import React from 'react';
+
+import type { SmartContractWriteMethod } from 'types/api/contract';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
+import ContentLoader from 'ui/shared/ContentLoader';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import ContractMethodCallable from './ContractMethodCallable';
+
+const ContractWrite = () => {
+  const router = useRouter();
+
+  const addressHash = router.query.id?.toString();
+
+  const { data, isLoading, isError } = useApiQuery('contract_methods_write', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  const contractInfo = useApiQuery('contract', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  const contractCaller = React.useCallback(async() => {
+    // eslint-disable-next-line no-console
+    console.log('__>__', contractInfo);
+    return [ [ 'string', 'this is mock' ] ];
+  }, [ contractInfo ]);
+
+  const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
+    return (
+      <ContractMethodCallable
+        key={ id + '_' + index }
+        data={ item }
+        caller={ contractCaller }
+      />
+    );
+  }, [ contractCaller ]);
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return <ContentLoader/>;
+  }
+
+  return <ContractMethodsAccordion data={ data } renderContent={ renderContent }/>;
+};
+
+export default ContractWrite;

ui/address/contract/types.ts

-export type MethodInputFields = Record<string, string>;
+export type MethodFormFields = Record<string, string>;

ui/pages/Address.tsx

@@ -16,6 +16,7 @@ import AddressTokenTransfers from 'ui/address/AddressTokenTransfers';
 import AddressTxs from 'ui/address/AddressTxs';
 import ContractCode from 'ui/address/contract/ContractCode';
 import ContractRead from 'ui/address/contract/ContractRead';
+import ContractWrite from 'ui/address/contract/ContractWrite';
 import TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -27,7 +28,7 @@ const CONTRACT_TABS = [
   { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> },
   { id: 'read_contract', title: 'Read contract', component: <ContractRead/> },
   { id: 'read_proxy', title: 'Read proxy', component: <div>Read proxy</div> },
-  { id: 'write_contract', title: 'Write contract', component: <div>Write contract</div> },
+  { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> },
   { id: 'write_proxy', title: 'Write proxy', component: <div>Write proxy</div> },
 ];