[Dashboard] Add Insight blueprint playground (#5631)

DASH-554

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on the removal of certain components related to `BlueprintsPage`, updates to the `useHeightObserver` function, and enhancements to the `BlueprintPlayground` functionality, including new utility functions for fetching blueprint data.

### Detailed summary
- Deleted components: `BlueprintsPage`, `BlueprintsExplorer`, `BlueprintsPageHeader`.
- Updated `useHeightObserver` to be an exported function.
- Changed height from `40px` to `32px` in CSS.
- Added new props (`scrollableContainerClassName`, `shadowColor`) to several components.
- Implemented a new utility for fetching blueprints and their specifications.
- Enhanced `BlueprintPlayground` to handle fetching and displaying blueprints.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx

@@ -85,17 +85,29 @@ export function MultiNetworkSelector(props: {
 export function SingleNetworkSelector(props: {
   chainId: number | undefined;
   onChange: (chainId: number) => void;
+  className?: string;
+  popoverContentClassName?: string;
+  // if specified - only these chains will be shown
+  chainIds?: number[];
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
+  const chainsToShow = useMemo(() => {
+    if (!props.chainIds) {
+      return allChains;
+    }
+    const chainIdSet = new Set(props.chainIds);
+    return allChains.filter((chain) => chainIdSet.has(chain.chainId));
+  }, [allChains, props.chainIds]);
+
   const options = useMemo(() => {
-    return allChains.map((chain) => {
+    return chainsToShow.map((chain) => {
       return {
         label: chain.name,
         value: String(chain.chainId),
       };
     });
-  }, [allChains]);
+  }, [chainsToShow]);
 
   const searchFn = useCallback(
     (option: Option, searchValue: string) => {
@@ -132,17 +144,22 @@ export function SingleNetworkSelector(props: {
     [idToChain],
   );
 
+  const isLoadingChains = allChains.length === 0;
+
   return (
     <SelectWithSearch
-      searchPlaceholder="Search by Name or Chain Id"
+      searchPlaceholder="Search by Name or Chain ID"
       value={String(props.chainId)}
       options={options}
       onValueChange={(chainId) => {
         props.onChange(Number(chainId));
       }}
-      placeholder="Select Chain"
+      placeholder={isLoadingChains ? "Loading Chains..." : "Select Chain"}
       overrideSearchFn={searchFn}
       renderOption={renderOption}
+      className={props.className}
+      popoverContentClassName={props.popoverContentClassName}
+      disabled={isLoadingChains}
     />
   );
 }

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

@@ -30,14 +30,26 @@ interface SelectWithSearchProps
     searchTerm: string,
   ) => boolean;
   renderOption?: (option: { value: string; label: string }) => React.ReactNode;
+  popoverContentClassName?: string;
 }
 
 export const SelectWithSearch = React.forwardRef<
   HTMLButtonElement,
   SelectWithSearchProps
 >(
   (
-    { options, onValueChange, placeholder, className, value, ...props },
+    {
+      options,
+      onValueChange,
+      placeholder,
+      className,
+      value,
+      renderOption,
+      overrideSearchFn,
+      popoverContentClassName,
+      searchPlaceholder,
+      ...props
+    },
     ref,
   ) => {
     const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
@@ -49,7 +61,6 @@ export const SelectWithSearch = React.forwardRef<
 
     // show 50 initially and then 20 more when reaching the end
     const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
-    const { overrideSearchFn } = props;
 
     const optionsToShow = useMemo(() => {
       const filteredOptions: {
@@ -122,7 +133,7 @@ export const SelectWithSearch = React.forwardRef<
         </PopoverTrigger>
 
         <PopoverContent
-          className="z-[10001] p-0"
+          className={cn("z-[10001] p-0", popoverContentClassName)}
           align="center"
           sideOffset={10}
           onEscapeKeyDown={() => setIsPopoverOpen(false)}
@@ -136,7 +147,7 @@ export const SelectWithSearch = React.forwardRef<
             {/* Search */}
             <div className="relative">
               <Input
-                placeholder={props.searchPlaceholder || "Search"}
+                placeholder={searchPlaceholder || "Search"}
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
                 className="!h-auto rounded-b-none border-0 border-border border-b py-3 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -175,9 +186,7 @@ export const SelectWithSearch = React.forwardRef<
                       </div>
 
                       <div className="min-w-0 grow">
-                        {props.renderOption
-                          ? props.renderOption(option)
-                          : option.label}
+                        {renderOption ? renderOption(option) : option.label}
                       </div>
                     </Button>
                   );

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

@@ -34,7 +34,7 @@ export function DynamicHeight(props: {
   );
 }
 
-function useHeightObserver() {
+export function useHeightObserver() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 

apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.module.css

@@ -2,14 +2,14 @@
   position: absolute;
   left: 0;
   width: 100%;
-  height: 40px;
+  height: 32px;
   pointer-events: none;
 }
 
 .scrollShadowX {
   position: absolute;
   top: 0;
-  width: 40px;
+  width: 32px;
   height: 100%;
   pointer-events: none;
 }

apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx

@@ -11,7 +11,9 @@ export function CodeBlockContainer(props: {
   children: React.ReactNode;
   className?: string;
   scrollableClassName?: string;
+  scrollableContainerClassName?: string;
   copyButtonClassName?: string;
+  shadowColor?: string;
 }) {
   const { hasCopied, onCopy } = useClipboard(props.codeToCopy);
 
@@ -24,8 +26,11 @@ export function CodeBlockContainer(props: {
     >
       <ScrollShadow
         scrollableClassName={cn("p-4", props.scrollableClassName)}
-        className="text-xs md:text-sm [&_*]:leading-relaxed"
-        shadowColor="hsl(var(--muted))"
+        className={cn(
+          "text-xs md:text-sm [&_*]:leading-relaxed",
+          props.scrollableContainerClassName,
+        )}
+        shadowColor={props.shadowColor || "hsl(var(--muted))"}
       >
         {props.children}
       </ScrollShadow>

apps/dashboard/src/@/components/ui/code/RenderCode.tsx

@@ -6,13 +6,17 @@ export function RenderCode(props: {
   className?: string;
   scrollableClassName?: string;
   copyButtonClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
 }) {
   return (
     <CodeBlockContainer
       codeToCopy={props.code}
       className={props.className}
       copyButtonClassName={props.copyButtonClassName}
       scrollableClassName={props.scrollableClassName}
+      scrollableContainerClassName={props.scrollableContainerClassName}
+      shadowColor={props.shadowColor}
     >
       <div
         // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here

apps/dashboard/src/@/components/ui/code/code.client.tsx

@@ -12,6 +12,8 @@ export type CodeProps = {
   scrollableClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
   copyButtonClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
   ignoreFormattingErrors?: boolean;
 };
 
@@ -23,6 +25,8 @@ export const CodeClient: React.FC<CodeProps> = ({
   keepPreviousDataOnCodeChange = false,
   copyButtonClassName,
   ignoreFormattingErrors,
+  scrollableContainerClassName,
+  shadowColor,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
@@ -43,6 +47,8 @@ export const CodeClient: React.FC<CodeProps> = ({
         className={className}
         scrollableClassName={scrollableClassName}
         copyButtonClassName={copyButtonClassName}
+        scrollableContainerClassName={scrollableContainerClassName}
+        shadowColor={shadowColor}
       />
     );
   }
@@ -54,6 +60,8 @@ export const CodeClient: React.FC<CodeProps> = ({
       className={className}
       scrollableClassName={scrollableClassName}
       copyButtonClassName={copyButtonClassName}
+      scrollableContainerClassName={scrollableContainerClassName}
+      shadowColor={shadowColor}
     />
   );
 };

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -10,9 +10,7 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
     lang === "ts" ||
     lang === "tsx" ||
     lang === "javascript" ||
-    lang === "typescript" ||
-    lang === "css" ||
-    lang === "json"
+    lang === "typescript"
   );
 }
 

apps/dashboard/src/@/components/ui/code/plaintext-code.tsx

@@ -7,13 +7,17 @@ export function PlainTextCodeBlock(props: {
   className?: string;
   scrollableClassName?: string;
   codeClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
 }) {
   return (
     <CodeBlockContainer
       codeToCopy={props.code}
       className={props.className}
       copyButtonClassName={props.copyButtonClassName}
       scrollableClassName={props.scrollableClassName}
+      scrollableContainerClassName={props.scrollableContainerClassName}
+      shadowColor={props.shadowColor}
     >
       <code className={cn("block whitespace-pre", props.codeClassName)}>
         {props.code}