fix: sandbox header font size and add error message

src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx

@@ -45,7 +45,7 @@ export const SearchContractsForm: FC<{ rootContractAddress: string }> = ({
           <Stack p={6}>
             {/* <Box as="form"> */}
             <Stack gap={4}>
-              <Title fontSize={6}>Call a contract</Title>
+              <Title fontSize={'2xl'}>Call a contract</Title>
               <Text fontSize={'sm'}>
                 Manually enter contract details below, or load a contract from your transactions to
                 see available functions.

src/app/sandbox/components/ContractCall/DefaultView/index.tsx

@@ -1,12 +1,14 @@
 import { Box, Grid } from '@chakra-ui/react';
 import { FC } from 'react';
 
+import { Caption, Text } from '../../../../../ui/typography';
 import { PopularContracts } from './PopularContracts';
 import { SearchContractsForm } from './SearchContractsForm';
 
 export const DefaultView: FC<{
   rootContractAddress: string;
-}> = ({ rootContractAddress }) => (
+  errorMessage?: string;
+}> = ({ rootContractAddress, errorMessage }) => (
   <Grid
     width="calc((1142px / 3) * 2)"
     gridTemplateColumns="repeat(2, 1fr)"
@@ -15,6 +17,11 @@ export const DefaultView: FC<{
   >
     <Box borderRightWidth="1px">
       <SearchContractsForm rootContractAddress={rootContractAddress} />
+      {errorMessage && (
+        <Text color={`error`} fontSize={'sm'} px={6}>
+          {errorMessage}
+        </Text>
+      )}
     </Box>
     <Box p={4}>
       <PopularContracts rootContractAddress={rootContractAddress} />

src/app/sandbox/components/ContractCall/SelectedContractView.tsx

@@ -100,11 +100,10 @@ const ContractInfo: FC<ContractInfoProps> = ({ contract: { contract_id, abi } })
 };
 
 export const SelectedContractView: FC<{
-  contract: ContractWithParsedAbi;
+  contract?: ContractWithParsedAbi;
   functionName?: string;
   contractId: string;
 }> = ({ contract, functionName, contractId }) => {
-  const network = useGlobalContext().activeNetwork;
   const showRightPanel = useAppSelector(selectShowRightPanel);
   const activeNetwork = useGlobalContext().activeNetwork;
 
@@ -115,31 +114,39 @@ export const SelectedContractView: FC<{
       flexGrow={1}
       flexShrink={1}
     >
-      <Box borderRightWidth="1px" p={4}>
-        {/* <BackLink href={buildUrl(`/sandbox/contract-call`, network)} /> */}
-        <ContractInfo contract={contract} />
-      </Box>
-      <Box overflow="auto" maxHeight="calc(100vh - 217px)" p={4}>
-        {functionName ? (
-          <FunctionView
-            contractId={contractId}
-            fn={
-              contract?.abi?.functions?.find(
-                (fn: any) => fn.name === functionName
-              ) as unknown as ClarityAbiFunction
-            }
-            cancelButton={
-              <NextLink href={buildUrl(`/sandbox/contract-call/${contractId}`, activeNetwork)}>
-                <Caption _hover={{ cursor: 'pointer', color: 'textTitle' }} mt={4}>
-                  Cancel
-                </Caption>
-              </NextLink>
-            }
-          />
-        ) : (
-          <AvailableFunctionsView contract={contract} contractId={contractId} />
-        )}
-      </Box>
+      {!contract ? (
+        <Box p={4}>
+          <Caption>Contract not found</Caption>
+        </Box>
+      ) : (
+        <>
+          <Box borderRightWidth="1px" p={4}>
+            {/* <BackLink href={buildUrl(`/sandbox/contract-call`, network)} /> */}
+            <ContractInfo contract={contract} />
+          </Box>
+          <Box overflow="auto" maxHeight="calc(100vh - 217px)" p={4}>
+            {functionName ? (
+              <FunctionView
+                contractId={contractId}
+                fn={
+                  contract?.abi?.functions?.find(
+                    (fn: any) => fn.name === functionName
+                  ) as unknown as ClarityAbiFunction
+                }
+                cancelButton={
+                  <NextLink href={buildUrl(`/sandbox/contract-call/${contractId}`, activeNetwork)}>
+                    <Caption _hover={{ cursor: 'pointer', color: 'textTitle' }} mt={4}>
+                      Cancel
+                    </Caption>
+                  </NextLink>
+                }
+              />
+            ) : (
+              <AvailableFunctionsView contract={contract} contractId={contractId} />
+            )}
+          </Box>
+        </>
+      )}
     </Grid>
   );
 };

src/app/sandbox/contract-call/[[...params]]/PageClient.tsx

@@ -1,7 +1,9 @@
 'use client';
 
+import { useGlobalContext } from '../../../../common/context/useGlobalContext';
 import { useContractById } from '../../../../common/queries/useContractById';
 import { useSuspensePoxInfo } from '../../../../common/queries/usePoxInfo';
+import { truncateMiddle } from '../../../../common/utils/utils';
 import { DefaultView } from '../../components/ContractCall/DefaultView';
 import { SelectedContractView } from '../../components/ContractCall/SelectedContractView';
 
@@ -12,10 +14,18 @@ export default function ContractCall({ params: { params } }: { params: { params:
   const { data: contract } = useContractById(contractId);
 
   const rootContractAddress = poxInfo?.contract_id?.split('.')?.[0];
+  const networkMode = useGlobalContext().activeNetwork.mode;
 
   if (!rootContractAddress) return null;
 
-  if (!!contractId && !!contract) {
+  if (!!contractId) {
+    if (!contract)
+      return (
+        <DefaultView
+          rootContractAddress={rootContractAddress}
+          errorMessage={`Contract ${truncateMiddle(contractId)} not found in ${networkMode}`}
+        />
+      );
     return (
       <SelectedContractView
         contract={contract}