fix: sandbox header font size and add error message

hirosystems · Feb 21, 2025 · 6909e5b · 6909e5b
1 parent 348a807
commit 6909e5b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/src/app/sandbox/components/ContractCall/DefaultView/SearchContractsForm.tsx b/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.

diff --git a/src/app/sandbox/components/ContractCall/DefaultView/index.tsx b/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} />

diff --git a/src/app/sandbox/contract-call/[[...params]]/PageClient.tsx b/src/app/sandbox/contract-call/[[...params]]/PageClient.tsx
@@ -1,21 +1,34 @@
 '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';
 
 export default function ContractCall({ params: { params } }: { params: { params: string[] } }) {
   const contractId = params?.[0] || undefined;
   const functionName = params?.[1] || undefined;
   const { data: poxInfo } = useSuspensePoxInfo();
-  const { data: contract } = useContractById(contractId);
+  const { data: contract, isFetching } = useContractById(contractId);
 
   const rootContractAddress = poxInfo?.contract_id?.split('.')?.[0];
+  const networkMode = useGlobalContext().activeNetwork.mode;
+
+  const noContractFound = !contract && !isFetching;
 
   if (!rootContractAddress) return null;
 
-  if (!!contractId && !!contract) {
+  if (!!contractId) {
+    if (noContractFound)
+      return (
+        <DefaultView
+          rootContractAddress={rootContractAddress}
+          errorMessage={`Contract ${truncateMiddle(contractId)} not found in ${networkMode}`}
+        />
+      );
+    if (!contract) return <DefaultView rootContractAddress={rootContractAddress} />;
     return (
       <SelectedContractView
         contract={contract}