simple output

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 } from 'types/api/contract';
+import type { SmartContract, SmartContractReadMethod } 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';
@@ -167,6 +167,9 @@ export const RESOURCES = {
   contract: {
     path: '/api/v2/smart-contracts/:id',
   },
+  contract_methods_read: {
+    path: '/api/v2/smart-contracts/:id/methods-read',
+  },
 
   // HOMEPAGE
   homepage_stats: {
@@ -266,6 +269,7 @@ Q extends 'address_coin_balance_chart' ? AddressCoinBalanceHistoryChart :
 Q extends 'address_logs' ? LogsResponseAddress :
 Q extends 'config_json_rpc' ? JsonRpcUrlResponse :
 Q extends 'contract' ? SmartContract :
+Q extends 'contract_methods_read' ? Array<SmartContractReadMethod> :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

types/api/contract.ts

@@ -13,3 +13,22 @@ export interface SmartContract {
   source_code: string | null;
   can_be_visualized_via_sol2uml: boolean | null;
 }
+
+export interface SmartContractReadMethod {
+  inputs: Array<SmartContractMethodInput>;
+  outputs: Array<SmartContractMethodOutput>;
+  method_id: string;
+  name: string;
+  stateMutability: string;
+  type: string;
+}
+
+export interface SmartContractMethodInput {
+  internalType: string;
+  name: string;
+  type: string;
+}
+
+export interface SmartContractMethodOutput extends SmartContractMethodInput {
+  value: string;
+}

ui/address/contract/ContractRead.tsx

+import { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+import DataFetchAlert from 'ui/shared/DataFetchAlert';
+
+import ContractReadItemInput from './ContractReadItemInput';
+import ContractReadItemOutput from './ContractReadItemOutput';
+
+const ContractRead = () => {
+  const router = useRouter();
+
+  const { data, isLoading, isError } = useApiQuery('contract_methods_read', {
+    pathParams: { id: router.query.id?.toString() },
+    queryOptions: {
+      enabled: Boolean(router.query.id),
+    },
+  });
+
+  if (isError) {
+    return <DataFetchAlert/>;
+  }
+
+  if (isLoading) {
+    return <span>loading...</span>;
+  }
+
+  return (
+    <Accordion allowMultiple>
+      { 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 }>
+              { item.inputs.length === 0 ? (
+                <Flex flexDir="column" rowGap={ 1 }>
+                  { item.outputs.map((output, index) => <ContractReadItemOutput key={ index } data={ output }/>) }
+                </Flex>
+              ) : (
+                <ContractReadItemInput key={ index } data={ item.inputs }/>
+              ) }
+            </AccordionPanel>
+          </AccordionItem>
+        );
+      }) }
+    </Accordion>
+  );
+};
+
+export default ContractRead;

ui/address/contract/ContractReadItemInput.tsx

+import React from 'react';
+
+import type { SmartContractMethodInput } from 'types/api/contract';
+
+interface Props {
+  data: Array<SmartContractMethodInput>;
+}
+
+const ContractReadItemInput = ({ data }: Props) => {
+  return <span>{ data.map(({ type }) => type).join(', ') }</span>;
+};
+
+export default ContractReadItemInput;

ui/address/contract/ContractReadItemOutput.tsx

+import { Checkbox, Flex } from '@chakra-ui/react';
+import BigNumber from 'bignumber.js';
+import type { ChangeEvent } from 'react';
+import React from 'react';
+
+import type { SmartContractMethodOutput } from 'types/api/contract';
+
+import appConfig from 'configs/app/config';
+import { WEI } from 'lib/consts';
+
+interface Props {
+  data: SmartContractMethodOutput;
+}
+
+const ContractReadItemOutput = ({ data }: Props) => {
+  const isBigInt = data.type.includes('int256');
+  const [ value, setValue ] = React.useState(isBigInt ? BigNumber(data.value).toFixed() : data.value);
+  const [ label, setLabel ] = React.useState('WEI');
+
+  const handleCheckboxChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
+    if (event.target.checked) {
+      setValue(BigNumber(data.value).div(WEI).toFixed());
+      setLabel(appConfig.network.currency.symbol || 'ETH');
+    } else {
+      setValue(BigNumber(data.value).toFixed());
+      setLabel('WEI');
+    }
+  }, [ data.value ]);
+
+  return (
+    <Flex>
+      <span>({ data.type }): { value }</span>
+      { isBigInt && (
+        <Checkbox
+          ml={ 2 }
+          onChange={ handleCheckboxChange }
+        >
+          { label }
+        </Checkbox>
+      ) }
+    </Flex>
+  );
+};
+
+export default ContractReadItemOutput;

ui/pages/Address.tsx

@@ -15,6 +15,7 @@ import AddressLogs from 'ui/address/AddressLogs';
 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 TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -24,7 +25,7 @@ import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 const CONTRACT_TABS = [
   { id: 'contact_code', title: 'Code', component: <ContractCode/> },
   { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> },
-  { id: 'read_contract', title: 'Read contract', component: <div>Read contract</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_proxy', title: 'Write proxy', component: <div>Write proxy</div> },