write in proxy

ui/address/contract/ContractWrite.tsx

@@ -36,15 +36,16 @@ const ContractWrite = ({ isProxy }: Props) => {
     },
   });
 
-  const contract = useContractContext();
+  const { contract, proxy } = useContractContext();
+  const _contract = isProxy ? proxy : contract;
 
   const handleMethodFormSubmit = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string | Array<string>>) => {
     try {
-      if (!contract) {
+      if (!_contract) {
         return;
       }
 
-      if (item.type === 'fallback' || item.type === 'receive') {
+      if (item.type === 'receive') {
         const value = args[0] ? getNativeCoinValue(args[0]) : '0';
         const result = await signer?.sendTransaction({
           to: addressHash,
@@ -55,9 +56,9 @@ const ContractWrite = ({ isProxy }: Props) => {
 
       const _args = item.stateMutability === 'payable' ? args.slice(0, -1) : args;
       const value = item.stateMutability === 'payable' ? getNativeCoinValue(args[args.length - 1]) : undefined;
-      const methodName = item.name;
+      const methodName = item.type === 'fallback' ? 'fallback' : item.name;
 
-      const result = await contract[methodName](..._args, {
+      const result = await _contract[methodName](..._args, {
         gasLimit: 100_000,
         value,
       });
@@ -82,7 +83,7 @@ const ContractWrite = ({ isProxy }: Props) => {
       }
       throw error;
     }
-  }, [ addressHash, contract, signer ]);
+  }, [ _contract, addressHash, signer ]);
 
   const renderResult = React.useCallback((item: SmartContractWriteMethod, result: ContractMethodWriteResult) => {
     if (!result || 'message' in result) {

ui/address/contract/context.tsx

+import { useQueryClient } from '@tanstack/react-query';
 import type { Contract } from 'ethers';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { useContract, useProvider, useSigner } from 'wagmi';
 
-import useApiQuery from 'lib/api/useApiQuery';
+import type { Address } from 'types/api/address';
+
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 
 type ProviderProps = {
   children: React.ReactNode;
 }
 
-type TContractContext = Contract;
+type TContractContext = {
+  contract: Contract | null;
+  proxy: Contract | null;
+};
 
-const ContractContext = React.createContext<TContractContext | null>(null);
+const ContractContext = React.createContext<TContractContext>({
+  contract: null,
+  proxy: null,
+});
 
 export function ContractContextProvider({ children }: ProviderProps) {
   const router = useRouter();
   const provider = useProvider();
   const { data: signer } = useSigner();
+  const queryClient = useQueryClient();
 
   const addressHash = router.query.id?.toString();
   const { data: contractInfo } = useApiQuery('contract', {
@@ -27,14 +37,36 @@ export function ContractContextProvider({ children }: ProviderProps) {
     },
   });
 
+  const addressInfo = queryClient.getQueryData<Address>(getResourceKey('address', {
+    pathParams: { id: addressHash },
+  }));
+
+  const { data: proxyInfo } = useApiQuery('contract', {
+    pathParams: { id: addressInfo?.implementation_address || '' },
+    queryOptions: {
+      enabled: Boolean(addressInfo?.implementation_address),
+      refetchOnMount: false,
+    },
+  });
+
   const contract = useContract({
     address: addressHash,
     abi: contractInfo?.abi || undefined,
     signerOrProvider: signer || provider,
   });
+  const proxy = useContract({
+    address: addressInfo?.implementation_address ?? undefined,
+    abi: proxyInfo?.abi ?? undefined,
+    signerOrProvider: signer ?? provider,
+  });
+
+  const value = React.useMemo(() => ({
+    contract,
+    proxy,
+  }), [ contract, proxy ]);
 
   return (
-    <ContractContext.Provider value={ contract }>
+    <ContractContext.Provider value={ value }>
       { children }
     </ContractContext.Provider>
   );