fix(website): interact

packages/website/src/features/Packages/Abi.tsx

@@ -85,7 +85,6 @@ export const Abi: FC<{
   const hasSubnav = useContext(SubnavContext);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [selectedSelector, setSelectedSelector] = useState<string | null>(null);
-  const [isUpdatingRoute, setIsUpdatingRoute] = useState(false);
 
   const allContractMethods = useMemo<AbiFunction[]>(
     () =>
@@ -129,18 +128,10 @@ export const Abi: FC<{
       offset: adjust * -1,
     });
 
-    // update the url in shallow mode
-    setIsUpdatingRoute(true);
-    await router.replace(
-      `${router.asPath.split('#')[0]}#${selectedSelector}`,
-      undefined,
-      { shallow: true }
-    );
-    setIsUpdatingRoute(false);
+    await router.push(`${router.asPath.split('#')[0]}#${newSelector}`);
   };
 
   const handleMethodClick = async (functionSelector: AbiFunction) => {
-    if (isUpdatingRoute) return;
     const newSelector = getSelectorSlug(functionSelector);
     if (newSelector === selectedSelector) {
       return;
@@ -160,7 +151,7 @@ export const Abi: FC<{
     if (urlSelectorFromPath || !selectedSelector) {
       setSelectedSelector(urlSelectorFromPath);
     }
-  }, [router.asPath]);
+  }, [router.asPath, selectedSelector]);
 
   return (
     <Flex flex="1" direction="column" maxWidth="100%">
@@ -209,7 +200,6 @@ export const Abi: FC<{
                     <ButtonLink
                       key={index}
                       selected={selectedSelector == getSelectorSlug(f)}
-                      disabled={isUpdatingRoute}
                       onClick={() => handleMethodClick(f)}
                     >
                       {f.name}(
@@ -240,7 +230,6 @@ export const Abi: FC<{
                   .map((f, index) => (
                     <ButtonLink
                       key={index}
-                      disabled={isUpdatingRoute}
                       selected={selectedSelector == getSelectorSlug(f)}
                       onClick={() => handleMethodClick(f)}
                     >

packages/website/src/features/Packages/Function.tsx

@@ -3,6 +3,7 @@ import { FunctionInput } from '@/features/Packages/FunctionInput';
 import { FunctionOutput } from '@/features/Packages/FunctionOutput';
 import { useQueueTxsStore, useStore } from '@/helpers/store';
 import { useContractCall, useContractTransaction } from '@/hooks/ethereum';
+import { useCannonChains } from '@/providers/CannonProvidersProvider';
 import {
   CheckCircleIcon,
   ChevronDownIcon,
@@ -34,19 +35,15 @@ import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
 import { FaCode } from 'react-icons/fa6';
 import {
   Address,
+  createPublicClient,
   encodeFunctionData,
   parseEther,
   toFunctionSelector,
   toFunctionSignature,
   TransactionRequestBase,
   zeroAddress,
 } from 'viem';
-import {
-  useAccount,
-  usePublicClient,
-  useSwitchChain,
-  useWalletClient,
-} from 'wagmi';
+import { useAccount, useSwitchChain, useWalletClient } from 'wagmi';
 
 export const Function: FC<{
   selected?: boolean;
@@ -78,12 +75,20 @@ export const Function: FC<{
   const [loading, setLoading] = useState(false);
   const [simulated, setSimulated] = useState(false);
   const [error, setError] = useState<any>(null);
+  const [hasExpandedSelected, setHasExpandedSelected] = useState(false);
 
   // TODO: don't know why, had to use a ref instead of an array to be able to
   // keep the correct reference.
   const sadParams = useRef(new Array(f.inputs.length).fill(undefined));
   const [params, setParams] = useState<any[] | any>([...sadParams.current]);
 
+  const { getChainById, transports } = useCannonChains();
+  const chain = getChainById(chainId);
+  const publicClient = createPublicClient({
+    chain,
+    transport: transports[chainId],
+  });
+
   const setParam = (index: number, value: any) => {
     sadParams.current[index] = value;
     setParams([...sadParams.current]);
@@ -114,9 +119,7 @@ export const Function: FC<{
 
   const { isConnected, address: from, chain: connectedChain } = useAccount();
   const { openConnectModal } = useConnectModal();
-  const publicClient = usePublicClient({
-    chainId: chainId as number,
-  })!;
+
   const { switchChain } = useSwitchChain();
   const { data: walletClient } = useWalletClient({
     chainId: chainId as number,
@@ -127,7 +130,7 @@ export const Function: FC<{
     f.name,
     [...params],
     abi,
-    publicClient as any // TODO: fix type
+    publicClient
   );
 
   const [writeContractResult, fetchWriteContractResult] =
@@ -168,7 +171,7 @@ export const Function: FC<{
 
     try {
       if (readOnly) {
-        await fetchReadContractResult(zeroAddress);
+        await fetchReadContractResult(from ?? zeroAddress);
       } else {
         if (!isConnected) {
           if (openConnectModal) openConnectModal();
@@ -457,9 +460,7 @@ export const Function: FC<{
                   size="xs"
                   mr={3}
                   mb={3}
-                  onClick={() => {
-                    void submit(false, true);
-                  }}
+                  onClick={async () => await submit(false, true)}
                 >
                   Simulate transaction
                 </Button>
@@ -473,9 +474,7 @@ export const Function: FC<{
                   size="xs"
                   mr={3}
                   mb={3}
-                  onClick={() => {
-                    void submit(false);
-                  }}
+                  onClick={async () => await submit(false)}
                 >
                   Submit using wallet {!simulated && statusIcon}
                 </Button>
@@ -569,10 +568,11 @@ export const Function: FC<{
   );
 
   useEffect(() => {
-    if (selected && !isOpen) {
+    if (!hasExpandedSelected && selected && !isOpen) {
       onToggle();
+      setHasExpandedSelected(true);
     }
-  }, [selected]);
+  }, [selected, isOpen, onToggle, hasExpandedSelected]);
 
   return (
     <>

packages/website/src/features/Packages/Interact.tsx

@@ -1,8 +1,10 @@
+'use client';
+
 import QueueDrawer from '@/features/Deploy/QueueDrawer';
 import { Abi } from '@/features/Packages/Abi';
 import { SubnavContext } from '@/features/Packages/Tabs/InteractTab';
 import { useQueryIpfsDataParsed } from '@/hooks/ipfs';
-import { usePackageVersionUrlParams } from '@/hooks/routing/usePackageVersionUrlParams';
+import { usePackageNameTagVersionUrlParams } from '@/hooks/routing/usePackageVersionUrlParams';
 import { getOutput } from '@/lib/builder';
 import {
   Box,
@@ -29,7 +31,7 @@ import { usePackageByRef } from '@/hooks/api/usePackage';
 
 const Interact: FC = () => {
   const { variant, tag, name, moduleName, contractName, contractAddress } =
-    usePackageVersionUrlParams();
+    usePackageNameTagVersionUrlParams();
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { getExplorerUrl } = useCannonChains();
 
@@ -88,7 +90,14 @@ const Interact: FC = () => {
       }
     };
     findContract(cannonOutputs.contracts, name, cannonOutputs.imports);
-  }, [deploymentData.data, contractName]);
+  }, [
+    contractName,
+    deploymentData.data,
+    deploymentData.isPending,
+    name,
+    moduleName,
+    contractAddress,
+  ]);
 
   const deployUrl = `${
     externalLinks.IPFS_CANNON