simple write

ui/address/AddressContract.tsx

@@ -2,14 +2,23 @@ import React from 'react';
 
 import type { RoutedSubTab } from 'ui/shared/RoutedTabs/types';
 
+import { ContractContextProvider } from 'ui/address/contract/context';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
 
 interface Props {
   tabs: Array<RoutedSubTab>;
 }
 
+const TAB_LIST_PROPS = {
+  columnGap: 3,
+};
+
 const AddressContract = ({ tabs }: Props) => {
-  return <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={{ columnGap: 3 }}/>;
+  return (
+    <ContractContextProvider>
+      <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" tabListProps={ TAB_LIST_PROPS }/>
+    </ContractContextProvider>
+  );
 };
 
 export default React.memo(AddressContract);

ui/address/contract/ContractCode.tsx

@@ -27,6 +27,7 @@ const ContractCode = () => {
     pathParams: { id: router.query.id?.toString() },
     queryOptions: {
       enabled: Boolean(router.query.id),
+      refetchOnMount: false,
     },
   });
 

ui/address/contract/ContractMethodCallable.tsx

@@ -14,7 +14,7 @@ import ContractMethodField from './ContractMethodField';
 
 interface Props<T extends SmartContractMethod> {
   data: T;
-  caller: (data: T, args: Array<string>) => Promise<Array<Array<string>>>;
+  caller: (data: T, args: Array<string>) => Promise<Array<Array<string>> | undefined>;
   isWrite?: boolean;
 }
 
@@ -57,7 +57,7 @@ const ContractMethodCallable = <T extends SmartContractMethod>({ data, caller, i
       .map(([ , value ]) => value);
 
     const result = await caller(data, args);
-    setResult(result);
+    result && setResult(result);
 
   }, [ caller, data, inputs ]);
 

ui/address/contract/ContractRead.tsx

@@ -10,6 +10,7 @@ import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordi
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
+import { useContractContext } from './context';
 import ContractMethodCallable from './ContractMethodCallable';
 import ContractMethodConstant from './ContractMethodConstant';
 
@@ -30,6 +31,8 @@ const ContractRead = ({ isProxy }: Props) => {
     },
   });
 
+  const contract = useContractContext();
+
   const contractCaller = React.useCallback(async(item: SmartContractReadMethod, args: Array<string>) => {
     await apiFetch('contract_method_query', {
       pathParams: { id: addressHash },
@@ -43,8 +46,13 @@ const ContractRead = ({ isProxy }: Props) => {
       },
     });
 
+    const result = await contract?.functions[item.name](...args);
+
+    // eslint-disable-next-line no-console
+    console.log('__>__', { result });
+
     return [ [ 'string', 'this is mock' ] ];
-  }, [ addressHash, apiFetch, isProxy ]);
+  }, [ addressHash, apiFetch, contract, isProxy ]);
 
   const renderContent = React.useCallback((item: SmartContractReadMethod, index: number, id: number) => {
     if (item.inputs.length === 0) {

ui/address/contract/ContractWrite.tsx

@@ -8,6 +8,7 @@ import ContractMethodsAccordion from 'ui/address/contract/ContractMethodsAccordi
 import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
+import { useContractContext } from './context';
 import ContractMethodCallable from './ContractMethodCallable';
 
 interface Props {
@@ -22,22 +23,31 @@ const ContractWrite = ({ isProxy }: Props) => {
   const { data, isLoading, isError } = useApiQuery(isProxy ? 'contract_methods_write_proxy' : 'contract_methods_write', {
     pathParams: { id: addressHash },
     queryOptions: {
-      enabled: Boolean(router.query.id),
+      enabled: Boolean(addressHash),
     },
   });
 
-  const contractInfo = useApiQuery('contract', {
-    pathParams: { id: addressHash },
-    queryOptions: {
-      enabled: Boolean(router.query.id),
-    },
+  const contract = useContractContext();
+
+  const contractCaller = React.useCallback(async(item: SmartContractWriteMethod, args: Array<string>) => {
+    if (!contract) {
+      return;
+    }
+
+    if (item.type === 'fallback') {
+      return;
+    }
+
+    const methodName = item.name;
+    const result = await contract[methodName](...args, {
+      gasLimit: 100_000,
     });
 
-  const contractCaller = React.useCallback(async() => {
     // eslint-disable-next-line no-console
-    console.log('__>__', contractInfo);
+    console.log('__>__', { result });
+
     return [ [ 'string', 'this is mock' ] ];
-  }, [ contractInfo ]);
+  }, [ contract ]);
 
   const renderContent = React.useCallback((item: SmartContractWriteMethod, index: number, id: number) => {
     return (

ui/address/contract/context.tsx

+import type { ExternalProvider } from '@ethersproject/providers';
+import type { Contract } from 'ethers';
+import { ethers } from 'ethers';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import useApiQuery from 'lib/api/useApiQuery';
+
+type ProviderProps = {
+  children: React.ReactNode;
+}
+
+type TContractContext = Contract;
+
+const ContractContext = React.createContext<TContractContext | null>(null);
+
+export function ContractContextProvider({ children }: ProviderProps) {
+  const [ contract, setContract ] = React.useState<TContractContext | null>(null);
+  const router = useRouter();
+  const addressHash = router.query.id?.toString();
+
+  const { data } = useApiQuery('contract', {
+    pathParams: { id: addressHash },
+    queryOptions: {
+      enabled: Boolean(addressHash),
+      refetchOnMount: false,
+    },
+  });
+
+  React.useEffect(() => {
+    if (!addressHash || !data?.abi) {
+      return;
+    }
+
+    const provider = new ethers.providers.Web3Provider(window.ethereum as unknown as ExternalProvider);
+    const signer = provider.getSigner();
+    const contract = new ethers.Contract(addressHash, data.abi, provider);
+    const contractWithSigner = contract.connect(signer);
+    setContract(contractWithSigner);
+
+  }, [ data, addressHash ]);
+
+  return (
+    <ContractContext.Provider value={ contract }>
+      { children }
+    </ContractContext.Provider>
+  );
+}
+
+export function useContractContext() {
+  const context = React.useContext(ContractContext);
+  if (context === undefined) {
+    throw new Error('useContractContext must be used within a ContractContextProvider');
+  }
+  return context;
+}

ui/address/details/AddressAddToMetaMask.tsx

@@ -16,7 +16,7 @@ const AddressAddToMetaMask = ({ className, token }: Props) => {
 
   const handleClick = React.useCallback(async() => {
     try {
-      const wasAdded = await window.ethereum.request({
+      const wasAdded = await window.ethereum.request?.({
         method: 'wallet_watchAsset',
         params: {
           type: 'ERC20', // Initially only supports ERC20, but eventually more!