chore: enable strict:true

cgwbmp · cgwbmp · commit d1f495983bf8 · 2026-03-02T18:43:43.000+03:00
diff --git a/apps/web/next.config.ts b/apps/web/next.config.ts
@@ -77,7 +77,7 @@ const nextConfig: NextConfig = {
         destination: `/news`,
         permanent: true,
       },
-      ...rewritesAndRedirectsJson.redirects.map((redirect) => ({
+      ...rewritesAndRedirectsJson.redirects.map((redirect: Redirect) => ({
         ...redirect,
         permanent: redirect.permanent ?? true,
       })),
@@ -213,7 +213,7 @@ const nextConfig: NextConfig = {
   // https://github.com/vercel/next.js/issues/71638
   sassOptions: {
     logger: {
-      warn: function (message) {
+      warn: function (message: string) {
         if (
           message.includes("deprecat") ||
           message.includes("declarations that appear after nested")
diff --git a/apps/web/openspec/changes/enforce-ts-strict/tasks.md b/apps/web/openspec/changes/enforce-ts-strict/tasks.md
@@ -2,10 +2,10 @@
 
 ## 1. Enable strict: true (Phase 1)
 
-- [ ] 1.1 Set `"strict": true` and `"strictNullChecks": true` in `apps/web/tsconfig.json`
-- [ ] 1.2 Run `pnpm tsc --noEmit` and collect all errors
-- [ ] 1.3 Fix null/undefined violations (TS2531/TS2532) — use `?.`, `??`, or explicit guards; avoid `!` non-null assertions
-- [ ] 1.4 Fix remaining strict errors in existing `.ts`/`.tsx` files (noImplicitAny, strictPropertyInitialization, noImplicitThis)
+- [x] 1.1 Set `"strict": true` and `"strictNullChecks": true` in `apps/web/tsconfig.json`
+- [x] 1.2 Run `pnpm tsc --noEmit` and collect all errors
+- [x] 1.3 Fix null/undefined violations (TS2531/TS2532) — use `?.`, `??`, or explicit guards; avoid `!` non-null assertions
+- [x] 1.4 Fix remaining strict errors in existing `.ts`/`.tsx` files (noImplicitAny, strictPropertyInitialization, noImplicitThis)
 
 ## 2. Convert utilities, hooks, lib, constants (Phase 2)
 
diff --git a/apps/web/src/app/[locale]/developers/evm-to-svm/erc4626/developers-evm-to-svm-erc4626.tsx b/apps/web/src/app/[locale]/developers/evm-to-svm/erc4626/developers-evm-to-svm-erc4626.tsx
@@ -100,7 +100,7 @@ export function DevelopersEvmToSvmErc4626Page() {
             </td>
             <td style={tableCellStyle}>{t(row.objectKey)}</td>
             <td style={tableCellStyle}>
-              {"purposeParts" in row ? (
+              {"purposeParts" in row && row.purposeParts ? (
                 row.purposeParts.map((part, partIndex) => {
                   if (part.type === "code") {
                     return (
diff --git a/apps/web/src/app/[locale]/developers/nfts/developers-nfts.tsx b/apps/web/src/app/[locale]/developers/nfts/developers-nfts.tsx
@@ -4,7 +4,7 @@ import { ResponsiveBox } from "@/component-library/responsive-box";
 import {
   CardDeck,
   CommunityGallery,
-  FeatureHighlight,
+  FeatureHighlight as FeatureHighlightBase,
   Heading,
   Hero,
   Stats,
@@ -27,6 +27,9 @@ import {
 } from "@/data/developers/nfts";
 import { useTranslations } from "next-intl";
 
+// Cast to avoid valueOf() type conflict in solana-lib types (upstream issue)
+const FeatureHighlight = FeatureHighlightBase as React.ComponentType<any>;
+
 export function DevelopersNftsPage() {
   const t = useTranslations("developers-nfts");
   const blockSpacing = { large: { marginTop: "20px" } };
@@ -159,7 +162,6 @@ export function DevelopersNftsPage() {
         desktopBackground={FEATURE_HIGHLIGHT.desktopBackground}
         cards={featureHighlightCards as any}
         buttons={featureHighlightButtons as any}
-        valueOf={null}
       />
       <Heading
         eyebrow={t("headings.earlyMovers.eyebrow")}
diff --git a/apps/web/src/app/[locale]/developers/payments/developers-payments.tsx b/apps/web/src/app/[locale]/developers/payments/developers-payments.tsx
@@ -4,7 +4,7 @@ import { ResponsiveBox } from "@/component-library/responsive-box";
 import {
   CardDeck,
   ConversionPanel,
-  FeatureHighlight,
+  FeatureHighlight as FeatureHighlightBase,
   Heading,
   Hero,
   Stats,
@@ -25,6 +25,9 @@ import {
 } from "@/data/developers/payments";
 import { useTranslations } from "next-intl";
 
+// Cast to avoid valueOf() type conflict in solana-lib types (upstream issue)
+const FeatureHighlight = FeatureHighlightBase as React.ComponentType<any>;
+
 export function DevelopersPaymentsPage() {
   const t = useTranslations("developers-payments");
   const blockSpacing = { large: { marginTop: "20px" } };
@@ -108,7 +111,6 @@ export function DevelopersPaymentsPage() {
           desktopBackground={FEATURE_HIGHLIGHT.desktopBackground}
           cards={featureHighlightCards as any}
           buttons={[]}
-          valueOf={null}
         />
       </ResponsiveBox>
       <ResponsiveBox responsiveStyles={blockSpacing}>
diff --git a/apps/web/src/app/[locale]/home.tsx b/apps/web/src/app/[locale]/home.tsx
@@ -76,9 +76,7 @@ interface HomePageProps {
     communitySubtitle: string;
     communityLinksTranslations: { title: string; description: string }[];
   };
-  events: (Omit<CalendarEvent, "schedule"> & {
-    schedule: CalendarEvent["schedule"] & { from: string; to: string };
-  })[];
+  events: CalendarEvent[];
   firstFeaturedEventIndex: number;
   videos: YouTubePlaylistItem[];
   news: PostItem[];
@@ -130,8 +128,8 @@ export function HomePage({
         return eventDate >= oneWeekAgo;
       })
       .sort((a, b) => {
-        const dateA = new Date(a.schedule.from).getTime();
-        const dateB = new Date(b.schedule.from).getTime();
+        const dateA = new Date(a.schedule.from ?? 0).getTime();
+        const dateB = new Date(b.schedule.from ?? 0).getTime();
         return dateA - dateB;
       });
   }, [events]);
@@ -212,8 +210,8 @@ export function HomePage({
                 key={event.key}
                 imageSrc={event.img.primary || defaultImg.src}
                 title={event.title}
-                date={event.schedule.from}
-                location={event.venue.city || event.venue.address}
+                date={event.schedule.from ?? undefined}
+                location={event.venue.city ?? event.venue.address ?? undefined}
                 href={event.rsvp}
                 className="px-1"
               />
@@ -279,7 +277,7 @@ export function HomePage({
           <BigBannerCard
             key={item.id}
             className="px-1"
-            imageSrc={item.heroImage}
+            imageSrc={item.heroImage ?? ""}
             title={item.title}
             description={item.description}
             href={item.url}
@@ -299,8 +297,11 @@ export function HomePage({
         {videos.map((item) => (
           <BigVideoCard
             key={item.id}
-            id={item.contentDetails.videoId}
-            thumbnail={item.snippet.thumbnails.maxres.url}
+            id={item.contentDetails?.videoId ?? ""}
+            thumbnail={
+              item.snippet.thumbnails.maxres?.url ??
+              item.snippet.thumbnails.high.url
+            }
             alt={item.snippet.title}
             className="px-1"
             title={item.snippet.title}
diff --git a/apps/web/src/app/[locale]/solutions/actions/solutions-actions.tsx b/apps/web/src/app/[locale]/solutions/actions/solutions-actions.tsx
@@ -9,7 +9,7 @@ import {
   Slider,
   ConversionPanel,
   Accordion,
-  FeatureHighlight,
+  FeatureHighlight as FeatureHighlightBase,
   HtmlParser,
 } from "@solana-foundation/solana-lib";
 import { ResponsiveBox } from "@/component-library/responsive-box";
@@ -26,6 +26,9 @@ import {
   VIDEO_SOURCE,
 } from "@/data/solutions/actions";
 
+// Cast to avoid valueOf() type conflict in solana-lib types (upstream issue)
+const FeatureHighlight = FeatureHighlightBase as React.ComponentType<any>;
+
 export function ActionsPage() {
   const t = useTranslations("actions-solution");
 
@@ -289,7 +292,6 @@ export function ActionsPage() {
           body={t("headings.aboutSolana.body")}
           dynamicDataFootnote="Live data"
           headingAs="h3"
-          valueOf={null}
         />
       </ResponsiveBox>
     </>
diff --git a/apps/web/src/app/[locale]/wallets/page.tsx b/apps/web/src/app/[locale]/wallets/page.tsx
@@ -59,13 +59,17 @@ export default async function Page(_props: Props) {
   const compareWalletsButton = {
     ...cmpRest,
     label: t(COMPARE_WALLETS_BUTTON.labelKey),
-  } as React.ComponentProps<typeof ConversionPanel>["buttons"][number];
+  } as NonNullable<
+    React.ComponentProps<typeof ConversionPanel>["buttons"]
+  >[number];
 
   const { labelKey: _appKey, ...appRest } = APPLY_FOR_GRANT_BUTTON;
   const applyForGrantButton = {
     ...appRest,
     label: t(APPLY_FOR_GRANT_BUTTON.labelKey),
-  } as React.ComponentProps<typeof ConversionPanel>["buttons"][number];
+  } as NonNullable<
+    React.ComponentProps<typeof ConversionPanel>["buttons"]
+  >[number];
 
   const translations = {
     heroEyebrow: t("hero.eyebrow"),
diff --git a/apps/web/src/app/[locale]/wallets/wallets.tsx b/apps/web/src/app/[locale]/wallets/wallets.tsx
@@ -57,12 +57,12 @@ interface WalletsPageProps {
   buildCards: React.ComponentProps<typeof CardDeck>["cards"];
   buyCards: React.ComponentProps<typeof CardDeck>["cards"];
   developerCards: React.ComponentProps<typeof CardDeck>["cards"];
-  compareWalletsButton: React.ComponentProps<
-    typeof ConversionPanel
-  >["buttons"][number];
-  applyForGrantButton: React.ComponentProps<
-    typeof ConversionPanel
-  >["buttons"][number];
+  compareWalletsButton: NonNullable<
+    React.ComponentProps<typeof ConversionPanel>["buttons"]
+  >[number];
+  applyForGrantButton: NonNullable<
+    React.ComponentProps<typeof ConversionPanel>["buttons"]
+  >[number];
 }
 
 export function WalletsPage({
diff --git a/apps/web/src/component-library/badge.tsx b/apps/web/src/component-library/badge.tsx
@@ -29,7 +29,7 @@ export const Badge: React.FC<BadgeProps> = ({ className, title, LeftIcon }) => {
           height={0}
           alt=""
         />
-      ) : Boolean(LeftIcon) ? (
+      ) : LeftIcon ? (
         <LeftIcon size={20} />
       ) : null}
       <span className="px-1.5 inline-block align-middle pt-0.5">{title}</span>
diff --git a/apps/web/src/component-library/card-carousel-section.tsx b/apps/web/src/component-library/card-carousel-section.tsx
@@ -1,4 +1,7 @@
-import Carousel, { CarouselControls } from "@/component-library/carousel";
+import Carousel, {
+  CarouselControls,
+  CarouselHandle,
+} from "@/component-library/carousel";
 import { useRef } from "react";
 import { cn } from "@/app/components/utils";
 import { Container } from "./container";
@@ -40,7 +43,7 @@ export const CardCarouselSection: React.FC<CardCarouselSectionProps> = ({
   cta,
   ctaHref,
 }) => {
-  const carouselRef = useRef(null);
+  const carouselRef = useRef<CarouselHandle>(null);
   const isTablet = useMediaQuery("(min-width: 768px)");
   const isDesktop = useMediaQuery("(min-width: 1280px)");
   const isDesktop2xl = useMediaQuery("(min-width: 1440px)");
diff --git a/apps/web/src/component-library/carousel.tsx b/apps/web/src/component-library/carousel.tsx
@@ -466,7 +466,7 @@ export default Carousel;
 
 // External controls for !controlsInline mode
 type CarouselControlsProps = {
-  carouselRef: React.RefObject<CarouselHandle>;
+  carouselRef: React.RefObject<CarouselHandle | null>;
   className?: string;
   prevButtonClassName?: string;
   nextButtonClassName?: string;
diff --git a/apps/web/src/component-library/video.tsx b/apps/web/src/component-library/video.tsx
@@ -141,7 +141,7 @@ export function Video(props: VideoProps) {
         {thumbnail && (
           <Image
             src={thumbnail}
-            alt={alt}
+            alt={alt ?? ""}
             fill
             className="object-cover z-0"
             loading="lazy"
diff --git a/apps/web/src/components/events/EventsSingleLocation.tsx b/apps/web/src/components/events/EventsSingleLocation.tsx
@@ -14,7 +14,7 @@ interface EventsSingleLocationProps {
 }
 
 const getEventLocation = (event: EventsSingleLocationProps["event"]) => {
-  const { venue } = event;
+  const venue = event?.venue;
 
   if (!venue) return undefined;
 
diff --git a/apps/web/src/components/hackathon/sections/HackathonHeroSection/HackathonHeroSection.tsx b/apps/web/src/components/hackathon/sections/HackathonHeroSection/HackathonHeroSection.tsx
@@ -35,7 +35,7 @@ function StatComponent({ Icon, title, subtitle }: StatComponentProps) {
 }
 
 interface HackathonHeroSectionProps {
-  newsletterInputRef?: React.RefObject<HTMLInputElement>;
+  newsletterInputRef?: React.RefObject<HTMLInputElement | null>;
 }
 
 export default function HackathonHeroSection({
diff --git a/apps/web/src/components/index/get-started.tsx b/apps/web/src/components/index/get-started.tsx
@@ -11,7 +11,7 @@ export interface GetStartedProps {
     title: string;
     Icon?: React.ComponentType<{
       className?: string;
-      "aria-hidden"?: boolean | "true" | "false";
+      "aria-hidden"?: boolean;
     }>;
   }[];
   links?: Record<
@@ -28,10 +28,10 @@ export interface GetStartedProps {
 export const GetStarted: React.FC<GetStartedProps> = (props) => {
   const { title, tabs, links, onClose, open } = props;
   const [activeTab, setActiveTab] = useState<string | null>(
-    tabs[0]?.id ?? null,
+    tabs?.[0]?.id ?? null,
   );
   useEffect(() => {
-    setActiveTab((state) => state ?? tabs[0]?.id ?? null);
+    setActiveTab((state) => state ?? tabs?.[0]?.id ?? null);
   }, [tabs]);
   const activeLinks = activeTab ? links?.[activeTab] : undefined;
   return (
diff --git a/apps/web/src/components/index/whats-up.tsx b/apps/web/src/components/index/whats-up.tsx
@@ -151,7 +151,7 @@ export const WhatsUp: React.FC<WhatsUpProps> = ({
       return;
     }
 
-    const prevItems = prevItemsRef.current;
+    const prevItems = prevItemsRef.current ?? [];
     const prevItemIds = prevItems.map((item) => item.id);
     const newIds = items
       .filter((item) => !prevItemIds.includes(item.id))
@@ -459,7 +459,7 @@ export const WhatsUp: React.FC<WhatsUpProps> = ({
                     "py-3 px-5 flex flex-col items-end justify-end gap-2.5 w-full hover:bg-nd-border-light/20 disabled:opacity-50 disabled:cursor-not-allowed",
                   )}
                   type="button"
-                  disabled={page === 2 || items?.length <= 5}
+                  disabled={page === 2 || (items?.length ?? 0) <= 5}
                   onClick={() => {
                     setPage(2);
                   }}
diff --git a/apps/web/src/components/shared/AnimatedTransactionCountup.tsx b/apps/web/src/components/shared/AnimatedTransactionCountup.tsx
@@ -17,10 +17,10 @@ const AnimatedTransactionCountup: React.FC<AnimatedTransactionCountupProps> = ({
   info,
   perfUpdateSec,
 }) => {
-  const countUpRef = useRef(null);
+  const countUpRef = useRef<HTMLElement | null>(null);
   const { totalTransactionCount, avgTPS } = info;
   const { update } = useCountUp({
-    ref: countUpRef,
+    ref: countUpRef as React.RefObject<HTMLElement>,
     start: totalTransactionCount,
     end: totalTransactionCount + avgTPS * perfUpdateSec,
     delay: 0,
diff --git a/apps/web/src/components/shared/MarkdownRenderer/components/MarkdownEmbed.tsx b/apps/web/src/components/shared/MarkdownRenderer/components/MarkdownEmbed.tsx
@@ -28,7 +28,9 @@ export const MarkdownEmbed = memo(
         /^(https:\/\/)?whimsical.com\/embed\/(?:[a-zA-Z0-9-]+-)?([a-km-zA-HJ-NP-Z1-9]{16,22})/gi,
       ).test(url)
     ) {
-      return <WhimsicalEmbed src={url} width={width} height={height || 180} />;
+      return (
+        <WhimsicalEmbed src={url} width={width ?? 0} height={height || 180} />
+      );
     }
 
     // youtube embeds
diff --git a/apps/web/src/components/shared/MarkdownRenderer/components/MarkdownPre.tsx b/apps/web/src/components/shared/MarkdownRenderer/components/MarkdownPre.tsx
@@ -40,7 +40,9 @@ export function MarkdownPre({
   children,
   ...props
 }: React.ComponentProps<"pre"> & CustomPreMetadataProps) {
-  const language = props["data-language"];
+  const language = (
+    props as React.ComponentProps<"pre"> & { "data-language"?: string }
+  )["data-language"];
   const Icon = getIconForLanguage(language);
 
   return (
diff --git a/apps/web/src/components/solutions/depin/DePinHero.tsx b/apps/web/src/components/solutions/depin/DePinHero.tsx
@@ -22,7 +22,7 @@ const useHeroStats = (t: (_key: string) => string): Stat[] => [
   },
 ];
 
-const DePINHero = ({ onEmailClick }) => {
+const DePINHero = ({ onEmailClick }: { onEmailClick?: () => void }) => {
   const t = useTranslations();
   const stats = useHeroStats(t);
 
diff --git a/apps/web/src/components/solutions/hero.v2.tsx b/apps/web/src/components/solutions/hero.v2.tsx
@@ -174,9 +174,9 @@ export const SolutionHero: React.FC<SolutionHeroProps> = ({
                 "grid grid-cols-2 xl:grid-cols-4 w-full xl:min-h-44",
                 {
                   "xl:w-2/3": Boolean(emailCta),
-                  "xl:grid-cols-2": stats.length === 2,
-                  "xl:grid-cols-3": stats.length === 3,
-                  "xl:grid-cols-4": stats.length > 3,
+                  "xl:grid-cols-2": (stats?.length ?? 0) === 2,
+                  "xl:grid-cols-3": (stats?.length ?? 0) === 3,
+                  "xl:grid-cols-4": (stats?.length ?? 0) > 3,
                 },
               )}
             >
@@ -220,7 +220,7 @@ export const SolutionHero: React.FC<SolutionHeroProps> = ({
                   </div>
                 </div>
               ))}
-              {stats.length % 2 !== 0 && (
+              {(stats?.length ?? 0) % 2 !== 0 && (
                 <div
                   className={cn(
                     "p-[16px] xl:p-[16px_24px] flex flex-col justify-between gap-4 max-xl:border-t border-white/15 xl:hidden border-l",
@@ -230,7 +230,9 @@ export const SolutionHero: React.FC<SolutionHeroProps> = ({
                   )}
                   style={
                     isIntersecting
-                      ? { animationDelay: `${0.1 + stats.length * 0.1}s` }
+                      ? {
+                          animationDelay: `${0.1 + (stats?.length ?? 0) * 0.1}s`,
+                        }
                       : { opacity: 0 }
                   }
                 />
diff --git a/apps/web/src/components/solutions/projects.v2.tsx b/apps/web/src/components/solutions/projects.v2.tsx
diff --git a/apps/web/src/components/solutions/video-grid.tsx b/apps/web/src/components/solutions/video-grid.tsx
diff --git a/apps/web/src/components/solutions/video-grid.v2.tsx b/apps/web/src/components/solutions/video-grid.v2.tsx
diff --git a/apps/web/src/components/validators/ValidatorsGettingStarted.tsx b/apps/web/src/components/validators/ValidatorsGettingStarted.tsx
diff --git a/apps/web/src/hooks/useIntersectionObserver.ts b/apps/web/src/hooks/useIntersectionObserver.ts
diff --git a/apps/web/src/hooks/useScrollTextHighlight.ts b/apps/web/src/hooks/useScrollTextHighlight.ts
diff --git a/apps/web/src/hooks/useViewportVisibility.ts b/apps/web/src/hooks/useViewportVisibility.ts
diff --git a/apps/web/src/i18n/request.ts b/apps/web/src/i18n/request.ts
diff --git a/apps/web/src/types/react-slick.d.ts b/apps/web/src/types/react-slick.d.ts
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
