show "Read contract" tab even if WalletConnect is not configured (#1315)

Fixes #1313

pages/api/proxy.ts

@@ -32,8 +32,8 @@ export default handler;
 
 export const config = {
   api: {
-    // disable body parser otherwise it is impossible to upload large files (over 1Mb)
-    // e.g. when verifying a smart contract
-    bodyParser: false,
+    bodyParser: {
+      sizeLimit: '100mb',
+    },
   },
 };

ui/address/AddressContract.tsx

@@ -16,7 +16,7 @@ const TAB_LIST_PROPS = {
 
 const AddressContract = ({ tabs }: Props) => {
   const fallback = React.useCallback(() => {
-    const noProviderTabs = tabs.filter(({ id }) => id === 'contact_code');
+    const noProviderTabs = tabs.filter(({ id }) => id === 'contact_code' || id.startsWith('read_'));
     return (
       <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
     );

ui/address/contract/ContractRead.tsx

 import { Alert, Flex } from '@chakra-ui/react';
 import React from 'react';
-import { useAccount } from 'wagmi';
 
 import type { SmartContractReadMethod, SmartContractQueryMethodRead } from 'types/api/contract';
 
@@ -16,6 +15,7 @@ import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractMethodConstant from './ContractMethodConstant';
 import ContractReadResult from './ContractReadResult';
+import useWatchAccount from './useWatchAccount';
 
 interface Props {
   addressHash?: string;
@@ -25,13 +25,13 @@ interface Props {
 
 const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
   const apiFetch = useApiFetch();
-  const { address: userAddress } = useAccount();
+  const account = useWatchAccount();
 
   const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
     pathParams: { hash: addressHash },
     queryParams: {
       is_custom_abi: isCustomAbi ? 'true' : 'false',
-      from: userAddress,
+      from: account?.address,
     },
     queryOptions: {
       enabled: Boolean(addressHash),
@@ -50,11 +50,11 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
           args,
           method_id: item.method_id,
           contract_type: isProxy ? 'proxy' : 'regular',
-          from: userAddress,
+          from: account?.address,
         },
       },
     });
-  }, [ addressHash, apiFetch, isCustomAbi, isProxy, userAddress ]);
+  }, [ account?.address, addressHash, apiFetch, isCustomAbi, isProxy ]);
 
   const renderItemContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
     if (item.error) {
@@ -94,7 +94,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
   return (
     <>
       { isCustomAbi && <ContractCustomAbiAlert/> }
-      <ContractConnectWallet/>
+      { account && <ContractConnectWallet/> }
       { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
       <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent }/>
     </>

ui/address/contract/useWatchAccount.tsx

+import { watchAccount, getAccount } from '@wagmi/core';
+import React from 'react';
+
+export function getWalletAccount() {
+  try {
+    return getAccount();
+  } catch (error) {
+    return null;
+  }
+}
+
+export default function useWatchAccount() {
+  const [ account, setAccount ] = React.useState(getWalletAccount());
+
+  React.useEffect(() => {
+    if (!account) {
+      return;
+    }
+
+    return watchAccount(setAccount);
+  }, [ account ]);
+
+  return account;
+}