feat: add ui-chrome package with header/footer and helper components

apps/web/content/docs/en/rpc/http/getprogramaccounts.mdx

@@ -232,7 +232,8 @@ Request a slice of the account's data.
 
 !type array
 
-Filter results using up to 4 filter objects.
+Filter results using up to 4 filter objects. See
+[Filtering](/docs/rpc#filter-criteria).
 
 <Callout type="info">
   The resultant account(s) must meet **ALL** filter criteria to be included in

apps/web/package.json

@@ -28,6 +28,8 @@
     "@solana-foundation/solana-lib": "^2.40.3",
     "@typeform/embed": "^5.1.0",
     "@workspace/i18n": "workspace:*",
+    "@workspace/ui": "workspace:*",
+    "@workspace/ui-chrome": "workspace:*",
     "ai": "^4.1.50",
     "bootstrap": "^5.3.3",
     "cheerio": "^1.0.0",
@@ -79,7 +81,7 @@
     "zod": "^4.1.5"
   },
   "devDependencies": {
-    "@builder.io/sdk": "^6.0.5",
+    "@builder.io/sdk": "^6.1.2",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.35.0",
     "@fullhuman/postcss-purgecss": "^6.0.0",

apps/web/src/components/Footer/index.js

@@ -12,7 +12,7 @@ import DiscordIcon from "../../../public/src/img/footer/discord.inline.svg";
 import RedditIcon from "../../../public/src/img/footer/reddit.inline.svg";
 import GithubIcon from "../../../public/src/img/footer/github.inline.svg";
 import TelegramIcon from "../../../public/src/img/footer/telegram.inline.svg";
-import Link, { InlineLink } from "../../utils/Link";
+import Link, { InlineLink } from "@/components/shared/Link";
 
 const CopyrightRow = () => {
   const t = useTranslations();

apps/web/src/components/Header.js

@@ -1,8 +1,8 @@
 "use client";
 
 import Navbar from "react-bootstrap/Navbar";
-import { useRouter } from "@@/src/hooks/useRouter";
-import { Link } from "../utils/Link";
+import { useRouter } from "@workspace/i18n/use-router";
+import Link from "@/components/shared/Link";
 import { useEffect, useState } from "react";
 import SolanaLogo from "../../public/src/img/logos-solana/logotype.inline.svg";
 import Moon from "../../public/src/img/icons/Moon.inline.svg";

apps/web/src/components/SolFormattedMessage/index.js

@@ -1,4 +1,4 @@
-import { useRouter } from "@/hooks/useRouter";
+import { useRouter } from "@workspace/i18n/use-router";
 import { useEffect, useMemo, useState } from "react";
 
 export const formatNumber = (locale, value, options) => {

apps/web/src/components/blog/Pagination.js

@@ -1,4 +1,4 @@
-import { Link } from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import styled from "styled-components";
 import { useTranslations } from "next-intl";
 

apps/web/src/components/blog/PostCard.js

@@ -1,6 +1,6 @@
 import dynamic from "next/dynamic";
 import Image from "next/legacy/image";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import styled from "styled-components";
 import { useTranslations } from "next-intl";
 

apps/web/src/components/blog/PostTopics.js

@@ -2,7 +2,7 @@ import { useMemo } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { useTranslations } from "next-intl";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 
 import { extractTags } from "@/lib/builder/api";
 

apps/web/src/components/branding/BrandingWelcome.jsx

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import { InlineLink } from "../shared/Link";
+import { InlineLink } from "@/components/shared/Link";
 
 const BrandingWelcome = () => {
   const t = useTranslations();

apps/web/src/components/breakpoint/BreakpointHeader.jsx

@@ -1,5 +1,5 @@
 import Navbar from "react-bootstrap/Navbar";
-import Link from "../shared/Link";
+import Link from "@/components/shared/Link";
 import { useTranslations } from "next-intl";
 import SolanaLogo from "../../../public/src/img/logos-solana/logotype.inline.svg";
 

apps/web/src/components/community/PostCard.jsx

@@ -1,4 +1,4 @@
-import { Link } from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import Image from "next/legacy/image";
 import styled from "styled-components";
 import Button from "../shared/Button";

apps/web/src/components/community/VideoCard.jsx

@@ -2,7 +2,7 @@ import Image from "next/legacy/image";
 import styled from "styled-components";
 import Button from "../shared/Button";
 import { useTranslations } from "next-intl";
-import { Link } from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import { getMaximalThumbnailResolutionUrl } from "../../utils/ytUtils";
 
 const StyledVideoCard = styled.div`

apps/web/src/components/developers/DevelopersFeaturedResourcesList/DevelopersFeaturedResourcesListItem/DevelopersFeaturedResourcesListItem.jsx

@@ -2,7 +2,7 @@ import { memo } from "react";
 import { useTranslations } from "next-intl";
 import styles from "./DevelopersFeaturedResourcesListItem.module.scss";
 import Button from "@/components/shared/Button";
-import { Link, InlineLink } from "@/components/shared/Link";
+import Link, { InlineLink } from "@/components/shared/Link";
 
 const Content = memo(function Content({
   item,

apps/web/src/components/developers/DevelopersNav/DevelopersNav.jsx

@@ -1,5 +1,5 @@
 import styles from "./DevelopersNav.module.scss";
-import Link from "@@/src/utils/Link";
+import Link from "@/components/shared/Link";
 import DocsIcon from "@@/public/src/img/developers/docs.inline.svg";
 import RpcApiIcon from "@@/public/src/img/developers/api.inline.svg";
 import CookbookIcon from "@@/public/src/img/developers/cookbook.inline.svg";

apps/web/src/components/developers/sections/DevelopersCoursesSection/DevelopersCourseFeaturedItem.jsx

@@ -3,7 +3,7 @@ import { useTranslations } from "next-intl";
 import { ArrowRightCircle } from "react-feather";
 import styled from "styled-components";
 
-import { InlineLink } from "@/utils/Link";
+import { InlineLink } from "@/components/shared/Link";
 
 import styles from "./DevelopersCourseFeaturedItem.module.scss";
 

apps/web/src/components/developers/sections/DevelopersCoursesSection/DevelopersCourseItem.jsx

@@ -3,7 +3,7 @@ import { useTranslations } from "next-intl";
 import { ArrowRightCircle } from "react-feather";
 import styled from "styled-components";
 
-import { InlineLink } from "@/utils/Link";
+import { InlineLink } from "@/components/shared/Link";
 
 import styles from "./DevelopersCourseItem.module.scss";
 

apps/web/src/components/developers/sections/DevelopersDocumentsSection/DevelopersDocumentsSection.jsx

@@ -7,7 +7,7 @@ import DevelopersChangelog from "./DevelopersChangelog";
 import styles from "./DevelopersDocumentsSection.module.scss";
 
 import changelogImg from "../../../../../assets/developers/documents/changelog.png";
-import { InlineLink } from "../../../../utils/Link";
+import { InlineLink } from "@/components/shared/Link";
 import DevelopersSectionTitle from "../DevelopersSectionTitle";
 import { YT_PLAYLIST_CHANGELOG } from "@/constants/developerContentConfig";
 

apps/web/src/components/developers/sections/DevelopersResourcesSection/DevelopersResourceItem.jsx

@@ -1,7 +1,7 @@
 import classNames from "classnames";
 import { ArrowUpRight } from "react-feather";
 
-import { InlineLink, Link } from "@/utils/Link";
+import Link, { InlineLink } from "@/components/shared/Link";
 import { useTranslations } from "next-intl";
 
 import styles from "./DevelopersResourceItem.module.scss";

apps/web/src/components/ecdr/ECDRJoinCommunity.js

@@ -2,7 +2,7 @@ import { useTranslations } from "next-intl";
 import classNames from "classnames";
 import styles from "./ECDRJoinCommunity.module.scss";
 import EmailSubscribeForm from "../shared/EmailSubscribeForm";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 
 const ECDRJoinCommunity = () => {
   const t = useTranslations();

apps/web/src/components/ecdr/ECDRStats.js

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl";
 import classNames from "classnames";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import { FormattedNumber } from "../SolFormattedMessage";
 import styles from "./ECDRStats.module.scss";
 import ClipboardIcon from "../../../public/src/img/ecdr/clipboard.inline.svg";

apps/web/src/components/environment/EnvironmentWhatYouCanDo.js

@@ -5,7 +5,7 @@ import styles from "./EnvironmentWhatYouCanDo.module.scss";
 import dataImg from "../../../assets/environment/usages/data.png";
 import footprintImg from "../../../assets/environment/usages/footprint.png";
 import grantsImg from "../../../assets/environment/usages/grants.png";
-import { InlineLink } from "../../utils/Link";
+import { InlineLink } from "@/components/shared/Link";
 
 function WhatYouCanDoCard({ usage }) {
   return (

apps/web/src/components/events/EventsDetailSection.jsx

@@ -5,7 +5,7 @@ import Button from "../shared/Button";
 import FormattedDate from "../shared/FormattedDate";
 import { useTranslations } from "next-intl";
 import defaultImg from "../../../public/social/solana.jpg";
-import Link from "../shared/Link";
+import Link from "@/components/shared/Link";
 
 const StyledSection = styled.section`
   display: flex;

apps/web/src/components/events/EventsSingleCard.jsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import Image from "next/image";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import EventsSingleLocation from "./EventsSingleLocation";
 import FormattedDate from "../shared/FormattedDate";
 import defaultImg from "../../../assets/events/solana-event.jpg";

apps/web/src/components/events/EventsSingleRow.jsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import Image from "next/image";
 
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import EventsSingleLocation from "./EventsSingleLocation";
 import FormattedDate from "../shared/FormattedDate";
 import defaultImg from "../../../assets/events/solana-community-event.jpg";

apps/web/src/components/hackathon/sections/HackathonPreviousHackathonsSection/HackathonPreviousHackathonsSection.jsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { ArrowRightCircle } from "react-feather";
 import CarouselCards from "../../../shared/CarouselCards";
-import Link from "../../../shared/Link";
+import Link from "@/components/shared/Link";
 import renaissanceImg from "../../../../../assets/hackathon/past-hackathons/renaissance.jpg";
 import hyperdriveImg from "../../../../../assets/hackathon/past-hackathons/hyperdrive.jpg";
 import grizzlythonImg from "../../../../../assets/hackathon/past-hackathons/grizzlython.jpg";

apps/web/src/components/header/HeaderList.js

@@ -3,7 +3,7 @@ import Dropdown from "react-bootstrap/Dropdown";
 import AngleUp from "../../../public/src/img/icons/Angle-up.inline.svg";
 import AngleDown from "../../../public/src/img/icons/Angle-down.inline.svg";
 import { useTranslations } from "next-intl";
-import { useRouter } from "@@/src/hooks/useRouter";
+import { useRouter } from "@workspace/i18n/use-router";
 import HeaderListBuild from "./HeaderListBuild";
 import HeaderListSolutions from "./HeaderListSolutions";
 import HeaderListNetwork from "./HeaderListNetwork";

apps/web/src/components/header/HeaderListBuild.js

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import { Link } from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import DevelopersSVG from "../../../assets/nav/build/developers.inline.svg";
 import MoreSVG from "../../../assets/nav/build/cases.inline.svg";
 

apps/web/src/components/header/HeaderListCommunity.js

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import BreakpointLogo from "../../../assets/nav/community/breakpoint-logo.inline.svg";
 import InvolvedSVG from "../../../assets/nav/community/involved.inline.svg";
 

apps/web/src/components/header/HeaderListLearn.js

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import { Link } from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import StartSVG from "../../../assets/nav/learn/start.inline.svg";
 
 const HeaderListLearn = () => {

apps/web/src/components/header/HeaderListNetwork.js

@@ -1,5 +1,5 @@
 import { useTranslations } from "next-intl";
-import Link, { InlineLink } from "../../utils/Link";
+import Link, { InlineLink } from "@/components/shared/Link";
 import ResourcesSVG from "../../../assets/nav/network/resources.inline.svg";
 import InspectSVG from "../../../assets/nav/network/inspect.inline.svg";
 

apps/web/src/components/header/HeaderListSolutions.js

@@ -1,7 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
-import { Link } from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import SolutionsToolsSVG from "../../../assets/nav/solutions/solutions.inline.svg";
 import SolutionsCasesSVG from "../../../assets/nav/solutions/cases.inline.svg";
 import SolutionsResourcesSVG from "../../../assets/nav/solutions/resources.inline.svg";

apps/web/src/components/nft-showdown/NFTShowdownFooter.jsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl";
 // import styles from "./NFTShowdownFooter.module.scss";
-import { InlineLink } from "../shared/Link";
+import { InlineLink } from "@/components/shared/Link";
 import { useState } from "react";
 import Button from "../shared/Button";
 

apps/web/src/components/playgg/PlayGGGames.jsx

@@ -1,6 +1,6 @@
 import { useTranslations } from "next-intl";
 import styles from "./PlayGGGames.module.scss";
-import { InlineLink } from "../shared/Link";
+import { InlineLink } from "@/components/shared/Link";
 import Image from "next/image";
 import br1 from "../../../assets/playgg/games/br1.png";
 import aurory from "../../../assets/playgg/games/aurory.png";

apps/web/src/components/playgg/PlayGGSplash.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 import { useTranslations } from "next-intl";
 import styles from "./PlayGGSplash.module.scss";
-import Link, { InlineLink } from "../shared/Link";
+import Link, { InlineLink } from "@/components/shared/Link";
 import useReducedMotion from "../../hooks/useReducedMotion";
 import classNames from "classnames";
 import Solana from "../../../assets/playgg/solana.inline.svg";

apps/web/src/components/podcast/PodcastEpisodes.jsx

@@ -3,7 +3,7 @@ import { memo, useCallback } from "react";
 import { PlayCircle as PlayCircleIcon } from "react-feather";
 
 import FormattedDate from "../shared/FormattedDate";
-import Link from "../shared/Link";
+import Link from "@/components/shared/Link";
 import { truncateTextByWord } from "../../utils/stringUtils";
 import { usePodcastPlayerContext } from "./PodcastStickyPlayer";
 

apps/web/src/components/podcast/PodcastNavigation.jsx

@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl";
 import { Rss as PodcastFeedIcon } from "react-feather";
 
-import Link, { InlineLink } from "../../utils/Link";
+import Link, { InlineLink } from "@/components/shared/Link";
 
 import TwitterIcon from "../../../public/src/img/footer/twitter.inline.svg";
 

apps/web/src/components/podcast/PodcastSubscribeDialog.jsx

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { forwardRef, useCallback, useImperativeHandle, useState } from "react";
-import { InlineLink } from "../shared/Link";
+import { InlineLink } from "@/components/shared/Link";
 import SharedModal from "../shared/SharedModal";
 
 import AmazonMusicLogo from "../../../assets/podcast/amazon-music-logo.inline.svg";

apps/web/src/components/podcast/episode/PodcastEpisode.jsx

@@ -9,7 +9,7 @@ import {
 
 import Divider from "../../shared/Divider";
 import FormattedDate from "../../shared/FormattedDate";
-import { InlineLink } from "../../shared/Link";
+import { InlineLink } from "@/components/shared/Link";
 import { useTranslations } from "next-intl";
 import PodcastSubscribeDialog from "../PodcastSubscribeDialog";
 

apps/web/src/components/possible/PossibleCaseStudies.js

@@ -1,4 +1,4 @@
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import classNames from "classnames";
 import styles from "./PossibleCaseStudies.module.scss";
 import { useTranslations } from "next-intl";

apps/web/src/components/possible/PossibleInnovations.jsx

@@ -1,6 +1,6 @@
 import { createRef } from "react";
 import Accordion from "react-bootstrap/Accordion";
-import Link from "@/utils/Link";
+import Link from "@/components/shared/Link";
 import compressNFTImage from "../../../assets/possible/innovation-compressed-nft.png";
 import scalableImage from "../../../assets/possible/innovation-scalable.png";
 import lowcarbonImage from "../../../assets/possible/innovation-lowcarbon.png";

apps/web/src/components/possible/PossibleStats.jsx

@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl";
 import classNames from "classnames";
 import styles from "./PossibleStats.module.scss";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 import Image from "next/image";
 import GlowLines from "../../../public/src/img/index/glow-lines.jpg";
 

apps/web/src/components/shared/Button.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { Button as BSButton } from "react-bootstrap";
 import GetEmArrow from "../../../public/src/img/icons/getemarrow.inline.svg";
-import Link from "../../utils/Link";
+import Link from "@/components/shared/Link";
 
 const StyledBSButton = styled(BSButton)`
   &.btn {

apps/web/src/components/shared/Link.js

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import NextLink from "next/link";
-import { useRouter, usePathname } from "@@/src/hooks/useRouter";
+import { useRouter, usePathname } from "@workspace/i18n/use-router";
 import classNames from "classnames";
 
 export const Link = ({

apps/web/src/components/sharedPageSections/SitewideTopAlert.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter } from "@/hooks/useRouter";
+import { useRouter } from "@workspace/i18n/use-router";
 import { AnnouncementBar } from "@solana-foundation/solana-lib";
 import builder from "@builder.io/react";
 import { BUILDER_CONFIG } from "../../lib/builder/builderConstants";

apps/web/src/instrumentation-client.ts

@@ -8,6 +8,25 @@ Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   tracesSampleRate: 0.1,
   debug: false,
+  beforeSend(event, _) {
+    // Filter out browser extension errors by checking stack traces
+    const stackTrace = event.exception?.values?.[0]?.stacktrace?.frames;
+
+    const isExtensionError = stackTrace?.some(
+      (frame) =>
+        frame.filename?.includes("extensionServiceWorker.js") ||
+        frame.filename?.includes("chrome-extension://") ||
+        frame.filename?.includes("moz-extension://") ||
+        frame.filename?.includes("safari-extension://") ||
+        frame.filename?.includes("extension://"),
+    );
+
+    if (isExtensionError) {
+      return null; // Don't send to Sentry
+    }
+
+    return event;
+  },
 });
 
 export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;