Add noUncheckedIndexedAccess: true in dashboard tsconfig and fix all issues

apps/dashboard/src/@/components/blocks/multi-select.tsx

@@ -119,13 +119,18 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
         if (filteredOptions.length >= itemsToShow) {
           break;
         }
+        const option = options[i];
+        if (!option) {
+          continue;
+        }
+
         if (overrideSearchFn) {
-          if (overrideSearchFn(options[i], searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (overrideSearchFn(option, searchValLowercase)) {
+            filteredOptions.push(option);
           }
         } else {
-          if (options[i].label.toLowerCase().includes(searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (option.label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(option);
           }
         }
       }

apps/dashboard/src/@/components/blocks/select-with-search.tsx

@@ -63,14 +63,18 @@ export const SelectWithSearch = React.forwardRef<
         if (filteredOptions.length >= itemsToShow) {
           break;
         }
+        const option = options[i];
+        if (!option) {
+          continue;
+        }
 
         if (overrideSearchFn) {
-          if (overrideSearchFn(options[i], searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (overrideSearchFn(option, searchValLowercase)) {
+            filteredOptions.push(option);
           }
         } else {
-          if (options[i].label.toLowerCase().includes(searchValLowercase)) {
-            filteredOptions.push(options[i]);
+          if (option.label.toLowerCase().includes(searchValLowercase)) {
+            filteredOptions.push(option);
           }
         }
       }

apps/dashboard/src/@/components/ui/chart.tsx

@@ -143,7 +143,7 @@ const ChartTooltipContent = React.forwardRef<
       }
 
       const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
       const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"

apps/dashboard/src/@/components/ui/image-upload.tsx

@@ -16,7 +16,9 @@ const ImageUpload = React.forwardRef<HTMLInputElement, ImageUploadProps>(
     const [activeFile, setActiveFile] = React.useState<File | null>(null);
     const onDrop = React.useCallback(
       (acceptedFiles: File[]) => {
-        setActiveFile(acceptedFiles[0]);
+        if (acceptedFiles[0]) {
+          setActiveFile(acceptedFiles[0]);
+        }
         onUpload?.(acceptedFiles);
       },
       [onUpload],

apps/dashboard/src/@/components/ui/input-otp.tsx

@@ -35,7 +35,8 @@ const InputOTPSlot = React.forwardRef<
   React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
   const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+  // biome-ignore lint/style/noNonNullAssertion: pure shadcn component - it works
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]!;
 
   return (
     <div
@@ -62,7 +63,7 @@ const InputOTPSeparator = React.forwardRef<
   React.ElementRef<"div">,
   React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-  // biome-ignore lint/a11y/useFocusableInteractive: <explanation>
+  // biome-ignore lint/a11y/useFocusableInteractive: pure shadcn component - it works
   <div ref={ref} role="separator" {...props}>
     <Dot />
   </div>

apps/dashboard/src/@3rdweb-sdk/react/hooks/useActivity.ts

@@ -44,13 +44,12 @@ export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
     }
     const obj = eventsQuery.data.slice(0, 100).reduce(
       (acc, curr) => {
-        if (acc[curr.transactionHash]) {
-          acc[curr.transactionHash].events.push(curr);
-          acc[curr.transactionHash].events.sort(
-            (a, b) => b.logIndex - a.logIndex,
-          );
-          if (acc[curr.transactionHash].blockNumber > curr.blockNumber) {
-            acc[curr.transactionHash].blockNumber = curr.blockNumber;
+        const internalTx = acc[curr.transactionHash];
+        if (internalTx) {
+          internalTx.events.push(curr);
+          internalTx.events.sort((a, b) => b.logIndex - a.logIndex);
+          if (internalTx.blockNumber > curr.blockNumber) {
+            internalTx.blockNumber = curr.blockNumber;
           }
         } else {
           acc[curr.transactionHash] = {

apps/dashboard/src/@3rdweb-sdk/react/hooks/useDashboardContractMetadata.tsx

@@ -48,7 +48,7 @@ export async function fetchDashboardContractMetadata(
   if (compilerMetadata?.name.includes(":")) {
     const _name = compilerMetadata.name.split(":")[1];
     if (_name) {
-      compilerMetadata.name = compilerMetadata.name.split(":")[1];
+      compilerMetadata.name = _name;
     }
   }
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/embed/embed-setup.tsx

@@ -171,7 +171,7 @@ function minimizeChain(
   return {
     name: chain.name,
     chain: chain.chain,
-    rpc: [firstRpc],
+    rpc: [firstRpc || ""],
     nativeCurrency: chain.nativeCurrency,
     shortName: chain.shortName,
     chainId: chain.chainId,
@@ -509,7 +509,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               )}
               {colorOptions.map((color) => (
                 <option key={color} value={color}>
-                  {color[0].toUpperCase() + color.substring(1)}
+                  {color[0]?.toUpperCase() + color.substring(1)}
                 </option>
               ))}
             </Select>
@@ -524,7 +524,7 @@ export const EmbedSetup: React.FC<EmbedSetupProps> = ({
               <Select {...register("secondaryColor")}>
                 {colorOptions.map((color) => (
                   <option key={color} value={color}>
-                    {color[0].toUpperCase() + color.substring(1)}
+                    {color[0]?.toUpperCase() + color.substring(1)}
                   </option>
                 ))}
               </Select>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.tsx

@@ -41,7 +41,9 @@ export const PermissionsTable: React.FC<PermissionsTableProps> = ({
           roleMembers.forEach((member) => {
             return !acc.find((m) => m.member === member)
               ? acc.push({ member, roles: [role] })
-              : acc[acc.findIndex((m) => m.member === member)].roles.push(role);
+              : acc[acc.findIndex((m) => m.member === member)]?.roles.push(
+                  role,
+                );
           });
 
           return acc;

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/split/components/distribute-button.tsx

@@ -31,7 +31,7 @@ export const DistributeButton: React.FC<DistributeButtonProps> = ({
   const numTransactions = useMemo(() => {
     if (
       validBalances.length === 1 &&
-      validBalances[0].name === "Native Token"
+      validBalances[0]?.name === "Native Token"
     ) {
       return 1;
     }

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/EcosystemLandingPage.tsx

@@ -25,7 +25,7 @@ export async function EcosystemLandingPage(props: {
       console.error("failed to fetch ecosystems", err);
       return [];
     });
-    if (ecosystems.length > 0) {
+    if (ecosystems[0]) {
       redirect(`${props.ecosystemLayoutPath}/${ecosystems[0].slug}`);
     }
   }

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/components/client/create-ecosystem-form.client.tsx

@@ -105,8 +105,10 @@ export function CreateEcosystemForm(props: {
                     <ImageUpload
                       accept="image/png, image/jpeg"
                       onUpload={(files) => {
-                        form.setValue("logo", files[0]);
-                        form.clearErrors("logo");
+                        if (files[0]) {
+                          form.setValue("logo", files[0]);
+                          form.clearErrors("logo");
+                        }
                       }}
                     />
                   </FormControl>

apps/dashboard/src/app/(dashboard)/explore/[category]/page.tsx

@@ -80,10 +80,14 @@ export default async function ExploreCategoryPage(
         <div className="h-10" />
         <div className="grid grid-cols-1 gap-5 md:grid-cols-3">
           {category.contracts.map((publishedContractId, idx) => {
-            const publisher: string = Array.isArray(publishedContractId)
+            const publisher: string | undefined = Array.isArray(
+              publishedContractId,
+            )
               ? publishedContractId[0].split("/")[0]
               : publishedContractId.split("/")[0];
-            const contractId: string = Array.isArray(publishedContractId)
+            const contractId: string | undefined = Array.isArray(
+              publishedContractId,
+            )
               ? publishedContractId[0].split("/")[1]
               : publishedContractId.split("/")[1];
             const modules = Array.isArray(publishedContractId)
@@ -92,6 +96,10 @@ export default async function ExploreCategoryPage(
             const overrides = Array.isArray(publishedContractId)
               ? publishedContractId[2]
               : undefined;
+            if (!publisher || !contractId) {
+              return null;
+            }
+
             return (
               <ContractCard
                 key={publisher + contractId + overrides?.title}
@@ -107,8 +115,8 @@ export default async function ExploreCategoryPage(
                 modules={
                   modules?.length
                     ? modules.map((m) => ({
-                        publisher: m.split("/")[0],
-                        moduleId: m.split("/")[1],
+                        publisher: m.split("/")[0] || "",
+                        moduleId: m.split("/")[1] || "",
                       }))
                     : undefined
                 }

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/opengraph-image.tsx

@@ -32,6 +32,10 @@ export default async function Image(props: {
     publishedContracts.find((p) => p.version === props.params.version) ||
     publishedContracts[0];
 
+  if (!publishedContract) {
+    return null;
+  }
+
   const publishedContractName =
     publishedContract?.displayName || publishedContract?.name;
 

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/[version]/page.tsx

@@ -4,6 +4,7 @@ import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { SimpleGrid } from "@chakra-ui/react";
 import { fetchPublishedContractVersions } from "components/contract-components/fetch-contracts-with-versions";
 import { PublishedContract } from "components/contract-components/published-contract";
+import { notFound } from "next/navigation";
 import { isAddress } from "thirdweb";
 import { resolveAddress } from "thirdweb/extensions/ens";
 import { PublishedActions } from "../../../components/contract-actions-published.client";
@@ -46,6 +47,10 @@ export default async function PublishedContractPage(
     publishedContractVersions.find((v) => v.version === props.params.version) ||
     publishedContractVersions[0];
 
+  if (!publishedContract) {
+    return notFound();
+  }
+
   return (
     <>
       <DeployContractHeader

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/opengraph-image.tsx

@@ -29,6 +29,10 @@ export default async function Image(props: {
 
   const publishedContract = publishedContracts[0];
 
+  if (!publishedContract) {
+    return null;
+  }
+
   const publishedContractName =
     publishedContract?.displayName || publishedContract?.name;
 

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/page.tsx

@@ -1,5 +1,6 @@
 import { ChakraProviderSetup } from "@/components/ChakraProviderSetup";
 import { Separator } from "@/components/ui/separator";
+import { notFound } from "next/navigation";
 import { PublishedContract } from "../../../../../components/contract-components/published-contract";
 import { PublishedActions } from "../../components/contract-actions-published.client";
 import { DeployContractHeader } from "../../components/contract-header";
@@ -23,6 +24,10 @@ export default async function PublishedContractPage(
 
   const publishedContract = publishedContractVersions[0];
 
+  if (!publishedContract) {
+    notFound();
+  }
+
   return (
     <>
       <DeployContractHeader

apps/dashboard/src/app/(dashboard)/published-contract/[publisher]/[contract_id]/utils/publishedContractOGImageTemplate.tsx

@@ -118,10 +118,11 @@ function descriptionShortener(description: string) {
     words.push(word);
     currentLength += word.length + 1;
   }
-  if (words[words.length - 1].length < 4) {
+  const lastWord = words[words.length - 1];
+  if (lastWord && lastWord.length < 4) {
     words = words.slice(0, -1);
   }
-  if (words[words.length - 1].endsWith(".")) {
+  if (words[words.length - 1]?.endsWith(".")) {
     return words.join(" ");
   }
   if (!shortened) {

apps/dashboard/src/app/(dashboard)/published-contract/components/publish-based-deploy.tsx

@@ -48,8 +48,12 @@ export async function DeployFormForPublishInfo(props: PublishBasedDeployProps) {
     publishedContractVersions.find((v) => v.version === props.version) ||
     publishedContractVersions[0];
 
+  if (!publishedContract) {
+    return null;
+  }
+
   const moduleUris = modules
-    .filter((m) => m !== null)
+    .filter((m) => m !== null && m !== undefined)
     .map((m) => m.publishMetadataUri);
   const [contractMetadata, ...fetchedModules] = await Promise.all([
     fetchDeployMetadata({

apps/dashboard/src/app/(dashboard)/support/components/create-ticket.action.ts

@@ -116,7 +116,7 @@ export async function createTicketAction(
 
   const markdown = prepareEmailBody({
     product,
-    markdownInput: keyVal.markdown,
+    markdownInput: keyVal.markdown || "",
     email: account.data.email,
     name: account.data.name,
     extraInfoInput: keyVal,

apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamsMobileNav.tsx

@@ -15,7 +15,7 @@ export function TeamSettingsMobileNav(props: {
     return (
       <div className="flex items-center gap-2 border-border border-b px-4 py-4 text-muted-foreground">
         <Link
-          href={teamLinks[0].href}
+          href={teamLinks[0]?.href || "#"}
           className="inline-flex items-center gap-1"
           onClick={() => {
             setShowFull(true);

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletConnectorsChartCard.tsx

@@ -191,7 +191,7 @@ export function WalletConnectorsChartCard(props: {
                 <Bar
                   key={walletType}
                   dataKey={walletType}
-                  fill={chartConfig[walletType].color}
+                  fill={chartConfig[walletType]?.color}
                   radius={4}
                   stackId="a"
                   strokeWidth={1.5}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/WalletDistributionChartCard.tsx

@@ -112,7 +112,7 @@ export function WalletDistributionChartCard(props: {
           return {
             walletType,
             value: data,
-            fill: _chartConfig[walletType].color || "transparent",
+            fill: _chartConfig[walletType]?.color || "transparent",
           };
         },
       );

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/storyUtils.ts

@@ -24,9 +24,10 @@ const walletsToPickFrom: WalletId[] = [
 ];
 
 const pickRandomWallet = () => {
-  return walletsToPickFrom[
-    Math.floor(Math.random() * walletsToPickFrom.length)
-  ];
+  return (
+    walletsToPickFrom[Math.floor(Math.random() * walletsToPickFrom.length)] ||
+    "io.metamask"
+  );
 };
 
 export function createWalletStatsStub(days: number): WalletStats[] {

apps/dashboard/src/app/team/[team_slug]/[project_slug]/contracts/_components/GetStartedWithContractsDeploy.tsx

@@ -37,12 +37,14 @@ type ContentItem = {
   onClick?: () => void;
 };
 
+type TabId = "explore" | "import" | "build" | "deploy";
+
 const DeployOptions = () => {
   const [showImportModal, setShowImportModal] = useState(false);
   const router = useDashboardRouter();
   const trackEvent = useTrack();
 
-  const content: Record<string, ContentItem> = useMemo(
+  const content: Record<TabId, ContentItem> = useMemo(
     () => ({
       explore: {
         title: "Ready-to-deploy",
@@ -72,8 +74,7 @@ const DeployOptions = () => {
     [],
   );
 
-  const contentKeys = Object.keys(content);
-  const [activeTab, setActiveTab] = useState(contentKeys[0]);
+  const [activeTab, setActiveTab] = useState<TabId>("explore");
   const activeTabContent = content[activeTab];
 
   return (
@@ -91,7 +92,7 @@ const DeployOptions = () => {
           name: value.title,
           isActive: activeTab === key,
           isEnabled: true,
-          onClick: () => setActiveTab(key),
+          onClick: () => setActiveTab(key as TabId),
         }))}
         tabClassName="font-medium !text-sm"
       />