Add noUncheckedIndexedAccess: true in dashboard tsconfig and fix all issues (#5084)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces various enhancements and bug fixes across multiple files, focusing on improving type safety, handling undefined values, and refining conditions to prevent errors. It also updates the handling of cookies, contract metadata, and native token definitions.

### Detailed summary
- Added `"noUncheckedIndexedAccess": true` in `tsconfig.json`.
- Updated cookie retrieval to check for `_val` in `SyncStoreToCookies.tsx`.
- Modified ecosystem redirection condition in `EcosystemLandingPage.tsx`.
- Added checks for undefined chains in `allChains.ts`.
- Improved handling of optional values in various components.
- Enhanced error handling for uploaded files in `IconUpload.tsx`.
- Refactored native token definitions for better clarity and maintainability.
- Checked for existence of items before accessing properties in several components.
- Ensured consistent handling of optional chaining to avoid runtime errors.
- Updated metadata handling in various contract-related components.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

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;
     }