remove contract context

ui/address/AddressContract.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import type { RoutedSubTab } from 'ui/shared/Tabs/types';
 
-import { ContractContextProvider } from 'ui/address/contract/context';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import Web3ModalProvider from 'ui/shared/Web3ModalProvider';
 
@@ -15,21 +14,17 @@ const TAB_LIST_PROPS = {
   columnGap: 3,
 };
 
-const AddressContract = ({ addressHash, tabs }: Props) => {
+const AddressContract = ({ tabs }: Props) => {
   const fallback = React.useCallback(() => {
     const noProviderTabs = tabs.filter(({ id }) => id === 'contact_code');
     return (
-      <ContractContextProvider addressHash={ addressHash }>
       <RoutedTabs tabs={ noProviderTabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-      </ContractContextProvider>
     );
-  }, [ addressHash, tabs ]);
+  }, [ tabs ]);
 
   return (
     <Web3ModalProvider fallback={ fallback }>
-      <ContractContextProvider addressHash={ addressHash }>
       <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
-      </ContractContextProvider>
     </Web3ModalProvider>
   );
 };

ui/address/contract/ContractWrite.tsx

@@ -9,12 +9,12 @@ import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordi
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
-import { useContractContext } from './context';
 import ContractConnectWallet from './ContractConnectWallet';
 import ContractCustomAbiAlert from './ContractCustomAbiAlert';
 import ContractImplementationAddress from './ContractImplementationAddress';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractWriteResult from './ContractWriteResult';
+import useContractAbi from './useContractAbi';
 import { getNativeCoinValue } from './utils';
 
 interface Props {
@@ -39,18 +39,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
     },
   });
 
-  const { contractInfo, customInfo, proxyInfo } = useContractContext();
-  const abi = (() => {
-    if (isProxy) {
-      return proxyInfo?.abi;
-    }
-
-    if (isCustomAbi) {
-      return customInfo?.abi;
-    }
-
-    return contractInfo?.abi;
-  })();
+  const contractAbi = useContractAbi({ addressHash, isProxy, isCustomAbi });
 
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<unknown>>) => {
     if (!isConnected) {
@@ -61,7 +50,7 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
       await switchNetworkAsync?.(Number(config.network.id));
     }
 
-    if (!abi) {
+    if (!contractAbi) {
       throw new Error('Something went wrong. Try again later.');
     }
 
@@ -84,14 +73,14 @@ const ContractWrite = ({ addressHash, isProxy, isCustomAbi }: Props) => {
 
     const hash = await walletClient?.writeContract({
       args: _args,
-      abi: abi,
+      abi: contractAbi,
       functionName: methodName,
       address: addressHash as `0x${ string }`,
       value: value as undefined,
     });
 
     return { hash };
-  }, [ isConnected, chain, abi, walletClient, addressHash, switchNetworkAsync ]);
+  }, [ isConnected, chain, contractAbi, walletClient, addressHash, switchNetworkAsync ]);
 
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
     return (

ui/address/contract/context.tsx → ui/address/contract/useContractAbi.tsx

 import { useQueryClient } from '@tanstack/react-query';
+import type { Abi } from 'abitype';
 import React from 'react';
 
 import type { Address } from 'types/api/address';
-import type { SmartContract } from 'types/api/contract';
 
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 
-type ProviderProps = {
+interface Params {
   addressHash?: string;
-  children: React.ReactNode;
+  isProxy?: boolean;
+  isCustomAbi?: boolean;
 }
 
-type TContractContext = {
-  contractInfo: SmartContract | undefined;
-  proxyInfo: SmartContract | undefined;
-  customInfo: SmartContract | undefined;
-};
-
-const ContractContext = React.createContext<TContractContext>({
-  proxyInfo: undefined,
-  contractInfo: undefined,
-  customInfo: undefined,
-});
-
-export function ContractContextProvider({ addressHash, children }: ProviderProps) {
+export default function useContractAbi({ addressHash, isProxy, isCustomAbi }: Params): Abi | undefined {
   const queryClient = useQueryClient();
 
   const { data: contractInfo } = useApiQuery('contract', {
@@ -46,7 +35,6 @@ export function ContractContextProvider({ addressHash, children }: ProviderProps
     },
   });
 
-  // todo_tom check custom abi case
   const { data: customInfo } = useApiQuery('contract_methods_write', {
     pathParams: { hash: addressHash },
     queryParams: { is_custom_abi: 'true' },
@@ -56,23 +44,15 @@ export function ContractContextProvider({ addressHash, children }: ProviderProps
     },
   });
 
-  const value = React.useMemo(() => ({
-    proxyInfo,
-    contractInfo,
-    customInfo,
-  } as TContractContext), [ proxyInfo, contractInfo, customInfo ]);
-
-  return (
-    <ContractContext.Provider value={ value }>
-      { children }
-    </ContractContext.Provider>
-  );
-}
+  return React.useMemo(() => {
+    if (isProxy) {
+      return proxyInfo?.abi ?? undefined;
+    }
 
-export function useContractContext() {
-  const context = React.useContext(ContractContext);
-  if (context === undefined) {
-    throw new Error('useContractContext must be used within a ContractContextProvider');
+    if (isCustomAbi) {
+      return customInfo;
     }
-  return context;
+
+    return contractInfo?.abi ?? undefined;
+  }, [ contractInfo?.abi, customInfo, isCustomAbi, isProxy, proxyInfo?.abi ]);
 }

ui/pages/Address.tsx

@@ -86,11 +86,11 @@ const AddressPageContent = () => {
 
           return 'Contract';
         },
-        component: <AddressContract tabs={ contractTabs } addressHash={ hash }/>,
+        component: <AddressContract tabs={ contractTabs }/>,
         subTabs: contractTabs.map(tab => tab.id),
       } : undefined,
     ].filter(Boolean);
-  }, [ addressQuery.data, contractTabs, hash ]);
+  }, [ addressQuery.data, contractTabs ]);
 
   const tags = (
     <EntityTags

ui/pages/Token.tsx

@@ -178,7 +178,7 @@ const TokenPageContent = () => {
 
         return 'Contract';
       },
-      component: <AddressContract tabs={ contractTabs } addressHash={ hashString }/>,
+      component: <AddressContract tabs={ contractTabs }/>,
       subTabs: contractTabs.map(tab => tab.id),
     } : undefined,
   ].filter(Boolean);