fix(website): queue drawer issues

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

@@ -66,13 +66,15 @@ export const Abi: FC<{
   address: viem.Address;
   cannonOutputs: ChainArtifacts;
   chainId: number;
+  contractName?: string;
   contractSource?: string;
   onDrawerOpen?: () => void;
   packageUrl?: string;
 }> = ({
   isLoading,
   abi,
   contractSource,
+  contractName,
   address,
   cannonOutputs,
   chainId,
@@ -313,6 +315,7 @@ export const Abi: FC<{
                     cannonOutputs={cannonOutputs}
                     chainId={chainId}
                     contractSource={contractSource}
+                    contractName={contractName}
                     onDrawerOpen={onDrawerOpen}
                     collapsible
                     showFunctionSelector={false}

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

@@ -75,6 +75,7 @@ export const Function: FC<{
   address: Address;
   cannonOutputs: ChainArtifacts;
   chainId: number;
+  contractName?: string;
   contractSource?: string;
   onDrawerOpen?: () => void;
   collapsible?: boolean;
@@ -86,6 +87,7 @@ export const Function: FC<{
   abi /*, cannonOutputs */,
   address,
   chainId,
+  contractName,
   contractSource,
   onDrawerOpen,
   collapsible,
@@ -295,9 +297,6 @@ export const Function: FC<{
       }
     }
 
-    const regex = /\/([^/]+)\.sol$/;
-    const contractName = contractSource?.match(regex)?.[1] || 'Unknown';
-
     setQueuedIdentifiableTxns({
       queuedIdentifiableTxns: [
         ...queuedIdentifiableTxns,

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

@@ -88,8 +88,13 @@ export const FunctionInput: FC<Props> = ({
           />
         );
       case input.type.startsWith('tuple'):
-        // TODO: implement value prop for TupleInput
-        return <TupleInput input={input} handleUpdate={_handleUpdate} />;
+        return (
+          <TupleInput
+            input={input}
+            handleUpdate={_handleUpdate}
+            value={_initialValue}
+          />
+        );
       default:
         return (
           <DefaultInput

packages/website/src/features/Packages/FunctionInput/TupleInput.tsx

@@ -7,20 +7,25 @@ import { FunctionInput } from '../FunctionInput';
 const TupleInput = ({
   input,
   handleUpdate,
+  value,
 }: {
   input: any;
   handleUpdate: (value: any) => void;
+  value?: Record<string, any>;
 }) => {
   const getDefaultValueForType = (component: AbiParameter) => {
     if (component.type.startsWith('bool')) return false;
     if (component.type.startsWith('int')) return '0';
     if (component.type.startsWith('uint')) return '0';
     return '';
   };
+
   // Initialize the tuple state as an object, with keys corresponding to tuple property names
   const [tupleState, setTupleState] = useState(() =>
     input.components.reduce((acc: any, component: any) => {
-      acc[component.name] = getDefaultValueForType(component);
+      // Use value prop if available, otherwise use default value
+      acc[component.name] =
+        value?.[component.name] ?? getDefaultValueForType(component);
       return acc;
     }, {})
   );
@@ -60,6 +65,7 @@ const TupleInput = ({
               }
               updateTupleValue(component.name, value);
             }}
+            initialValue={tupleState[component.name]}
           />
         </FormControl>
       ))}

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

@@ -205,6 +205,7 @@ const Interact: FC = () => {
       <Abi
         isLoading={isLoadingData}
         abi={contract?.abi}
+        contractName={contract?.contractName ?? 'Unknown'}
         contractSource={contract?.sourceName}
         address={contractAddress!}
         cannonOutputs={cannonOutputs}