fix link to contract method

lib/hooks/useContractTabs.tsx

@@ -15,22 +15,22 @@ export default function useContractTabs(data: Address | undefined) {
       //   { id: 'contact_decompiled_code', title: 'Decompiled code', component: <div>Decompiled code</div> } :
       //   undefined,
       data?.has_methods_read ?
-        { id: 'read_contract', title: 'Read contract', component: <ContractRead addressHash={ data?.hash }/> } :
+        { id: 'read_contract', title: 'Read contract', component: <ContractRead/> } :
         undefined,
       data?.has_methods_read_proxy ?
-        { id: 'read_proxy', title: 'Read proxy', component: <ContractRead addressHash={ data?.hash } isProxy/> } :
+        { id: 'read_proxy', title: 'Read proxy', component: <ContractRead/> } :
         undefined,
       data?.has_custom_methods_read ?
-        { id: 'read_custom_methods', title: 'Read custom', component: <ContractRead addressHash={ data?.hash } isCustomAbi/> } :
+        { id: 'read_custom_methods', title: 'Read custom', component: <ContractRead/> } :
         undefined,
       data?.has_methods_write ?
-        { id: 'write_contract', title: 'Write contract', component: <ContractWrite addressHash={ data?.hash }/> } :
+        { id: 'write_contract', title: 'Write contract', component: <ContractWrite/> } :
         undefined,
       data?.has_methods_write_proxy ?
-        { id: 'write_proxy', title: 'Write proxy', component: <ContractWrite addressHash={ data?.hash } isProxy/> } :
+        { id: 'write_proxy', title: 'Write proxy', component: <ContractWrite/> } :
         undefined,
       data?.has_custom_methods_write ?
-        { id: 'write_custom_methods', title: 'Write custom', component: <ContractWrite addressHash={ data?.hash } isCustomAbi/> } :
+        { id: 'write_custom_methods', title: 'Write custom', component: <ContractWrite/> } :
         undefined,
     ].filter(Boolean);
   }, [ data ]);

ui/address/contract/ContractMethodsAccordion.tsx

@@ -11,9 +11,10 @@ interface Props<T extends SmartContractMethod> {
   data: Array<T>;
   addressHash?: string;
   renderItemContent: (item: T, index: number, id: number) => React.ReactNode;
+  tab: string;
 }
 
-const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, addressHash, renderItemContent }: Props<T>) => {
+const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, addressHash, renderItemContent, tab }: Props<T>) => {
   const [ expandedSections, setExpandedSections ] = React.useState<Array<number>>(data.length === 1 ? [ 0 ] : []);
   const [ id, setId ] = React.useState(0);
 
@@ -79,6 +80,7 @@ const ContractMethodsAccordion = <T extends SmartContractMethod>({ data, address
             index={ index }
             addressHash={ addressHash }
             renderContent={ renderItemContent as (item: SmartContractMethod, index: number, id: number) => React.ReactNode }
+            tab={ tab }
           />
         )) }
       </Accordion>

ui/address/contract/ContractMethodsAccordionItem.tsx

@@ -16,9 +16,10 @@ interface Props<T extends SmartContractMethod> {
   id: number;
   addressHash?: string;
   renderContent: (item: T, index: number, id: number) => React.ReactNode;
+  tab: string;
 }
 
-const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, index, id, addressHash, renderContent }: Props<T>) => {
+const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, index, id, addressHash, renderContent, tab }: Props<T>) => {
   const url = React.useMemo(() => {
     if (!('method_id' in data)) {
       return '';
@@ -28,11 +29,11 @@ const ContractMethodsAccordionItem = <T extends SmartContractMethod>({ data, ind
       pathname: '/address/[hash]',
       query: {
         hash: addressHash ?? '',
-        tab: 'read_contract',
+        tab,
       },
       hash: data.method_id,
     });
-  }, [ addressHash, data ]);
+  }, [ addressHash, data, tab ]);
 
   const { hasCopied, onCopy } = useClipboard(url, 1000);
   const { isOpen, onOpen, onClose } = useDisclosure();

ui/address/contract/ContractRead.pw.tsx

@@ -28,7 +28,7 @@ test('base view +@mobile +@dark-mode', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <ContractRead addressHash={ addressHash }/>
+      <ContractRead/>
     </TestApp>,
     { hooksConfig },
   );

ui/address/contract/ContractRead.tsx

 import { Alert, Flex } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SmartContractReadMethod, SmartContractQueryMethodRead } from 'types/api/contract';
 
 import useApiFetch from 'lib/api/useApiFetch';
 import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -17,15 +19,15 @@ import ContractMethodConstant from './ContractMethodConstant';
 import ContractReadResult from './ContractReadResult';
 import useWatchAccount from './useWatchAccount';
 
-interface Props {
-  addressHash?: string;
-  isProxy?: boolean;
-  isCustomAbi?: boolean;
-}
-
-const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
+const ContractRead = () => {
   const apiFetch = useApiFetch();
   const account = useWatchAccount();
+  const router = useRouter();
+
+  const tab = getQueryParamString(router.query.tab);
+  const addressHash = getQueryParamString(router.query.hash);
+  const isProxy = tab === 'read_proxy';
+  const isCustomAbi = tab === 'read_custom_methods';
 
   const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_read_proxy' : 'contract_methods_read', {
     pathParams: { hash: addressHash },
@@ -96,7 +98,7 @@ const ContractRead = ({ addressHash, isProxy, isCustomAbi }: Props) => {
       { isCustomAbi && <ContractCustomAbiAlert/> }
       { account && <ContractConnectWallet/> }
       { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
-      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent }/>
+      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent } tab={ tab }/>
     </>
   );
 };

ui/address/contract/ContractWrite.pw.tsx

@@ -23,7 +23,7 @@ test('base view +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <ContractWrite addressHash={ addressHash }/>
+      <ContractWrite/>
     </TestApp>,
     { hooksConfig },
   );

ui/address/contract/ContractWrite.tsx

+import { useRouter } from 'next/router';
 import React from 'react';
 import { useAccount, useWalletClient, useNetwork, useSwitchNetwork } from 'wagmi';
 
@@ -5,6 +6,7 @@ import type { SmartContractWriteMethod } from 'types/api/contract';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import getQueryParamString from 'lib/router/getQueryParamString';
 import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordion';
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -17,18 +19,19 @@ import ContractWriteResult from './ContractWriteResult';
 import useContractAbi from './useContractAbi';
 import { getNativeCoinValue, prepareAbi } from './utils';
 
-interface Props {
-  addressHash?: string;
-  isProxy?: boolean;
-  isCustomAbi?: boolean;
-}
-
-const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
+const ContractWrite = () => {
   const { data: walletClient } = useWalletClient();
   const { isConnected } = useAccount();
   const { chain } = useNetwork();
   const { switchNetworkAsync } = useSwitchNetwork();
 
+  const router = useRouter();
+
+  const tab = getQueryParamString(router.query.tab);
+  const addressHash = getQueryParamString(router.query.hash);
+  const isProxy = tab === 'write_proxy';
+  const isCustomAbi = tab === 'write_custom_methods';
+
   const { data, isPending, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
     pathParams: { hash: addressHash },
     queryParams: {
@@ -112,7 +115,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
       { isCustomAbi && <ContractCustomAbiAlert/> }
       <ContractConnectWallet/>
       { isProxy && <ContractImplementationAddress hash={ addressHash }/> }
-      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent }/>
+      <ContractMethodsAccordion data={ data } addressHash={ addressHash } renderItemContent={ renderItemContent } tab={ tab }/>
     </>
   );
 };