Merge branch 'main' into yash/ref-constructor-params

Author: kumaryash90

.github/workflows/issue.yml

@@ -5,7 +5,7 @@ on:
     types: [opened, edited]
 
 env:
-  VALID_ISSUE_PREFIXES: "CNCT|DASH|PROT"
+  VALID_ISSUE_PREFIXES: "CNCT|DASH|PROT|INSIGHT"
 
 jobs:
   linear:

apps/dashboard/.env.example

@@ -94,4 +94,7 @@ NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
 TURNSTILE_SECRET_KEY=""
 REDIS_URL=""
 
-ANALYTICS_SERVICE_URL=""
+ANALYTICS_SERVICE_URL=""
+
+# Required for Nebula Chat
+NEXT_PUBLIC_NEBULA_URL=""

apps/dashboard/package.json

@@ -60,6 +60,7 @@
     "color": "^4.2.3",
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
+    "fetch-event-stream": "0.1.5",
     "flat": "^6.0.1",
     "framer-motion": "11.13.3",
     "fuse.js": "7.0.0",

apps/dashboard/src/@/api/team.ts

@@ -2,6 +2,17 @@ import "server-only";
 import { API_SERVER_URL } from "@/constants/env";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
+type EnabledTeamScope =
+  | "pay"
+  | "storage"
+  | "rpc"
+  | "bundler"
+  | "insight"
+  | "embeddedWallets"
+  | "relayer"
+  | "chainsaw"
+  | "nebula";
+
 export type Team = {
   id: string;
   name: string;
@@ -15,6 +26,7 @@ export type Team = {
   billingStatus: "validPayment" | (string & {}) | null;
   billingEmail: string | null;
   growthTrialEligible: boolean | null;
+  enabledScopes: EnabledTeamScope[];
 };
 
 export async function getTeamBySlug(slug: string) {

apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx

@@ -28,36 +28,34 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="min-h-screen bg-background py-4 text-foreground">
-      <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
-        <BadgeContainer label="Base">
-          <DangerSettingCard
-            title="This is a title"
-            description="This is a description"
-            buttonLabel="Some Action"
-            buttonOnClick={() => {}}
-            isPending={false}
-            confirmationDialog={{
-              title: "This is confirmation title",
-              description: "This is confirmation description",
-            }}
-          />
-        </BadgeContainer>
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <BadgeContainer label="Base">
+        <DangerSettingCard
+          title="This is a title"
+          description="This is a description"
+          buttonLabel="Some Action"
+          buttonOnClick={() => {}}
+          isPending={false}
+          confirmationDialog={{
+            title: "This is confirmation title",
+            description: "This is confirmation description",
+          }}
+        />
+      </BadgeContainer>
 
-        <BadgeContainer label="Loading">
-          <DangerSettingCard
-            title="This is a title"
-            description="This is a description"
-            buttonLabel="Some Action"
-            buttonOnClick={() => {}}
-            isPending={true}
-            confirmationDialog={{
-              title: "This is confirmation title",
-              description: "This is confirmation description",
-            }}
-          />
-        </BadgeContainer>
-      </div>
+      <BadgeContainer label="Loading">
+        <DangerSettingCard
+          title="This is a title"
+          description="This is a description"
+          buttonLabel="Some Action"
+          buttonOnClick={() => {}}
+          isPending={true}
+          confirmationDialog={{
+            title: "This is confirmation title",
+            description: "This is confirmation description",
+          }}
+        />
+      </BadgeContainer>
     </div>
   );
 }

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

@@ -72,7 +72,10 @@ export function MultiNetworkSelector(props: {
       onSelectedValuesChange={(chainIds) => {
         props.onChange(chainIds.map(Number));
       }}
-      placeholder="Select Chains"
+      placeholder={
+        allChains.length === 0 ? "Loading Chains..." : "Select Chains"
+      }
+      disabled={allChains.length === 0}
       overrideSearchFn={searchFn}
       renderOption={renderOption}
     />

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

@@ -59,6 +59,9 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
       maxCount = Number.POSITIVE_INFINITY,
       className,
       selectedValues,
+      overrideSearchFn,
+      renderOption,
+      searchPlaceholder,
       ...props
     },
     ref,
@@ -105,8 +108,6 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     // 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: {
         label: string;
@@ -152,7 +153,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     }, [searchValue]);
 
     return (
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
         <PopoverTrigger asChild>
           <Button
             ref={ref}
@@ -238,7 +239,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
             {/* 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-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -285,9 +286,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                       </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/ScrollShadow/ScrollShadow.tsx

@@ -11,6 +11,7 @@ export function ScrollShadow(props: {
   scrollableClassName?: string;
   disableTopShadow?: boolean;
   shadowColor?: string;
+  shadowClassName?: string;
 }) {
   const scrollableEl = useRef<HTMLDivElement>(null);
   const shadowTopEl = useRef<HTMLDivElement>(null);
@@ -94,29 +95,45 @@ export function ScrollShadow(props: {
       }
     >
       <div
-        className={cn(styles.scrollShadowTop, styles.scrollShadowY)}
+        className={cn(
+          styles.scrollShadowTop,
+          styles.scrollShadowY,
+          props.shadowClassName,
+        )}
         ref={shadowTopEl}
         style={{
           opacity: "0",
           display: props.disableTopShadow ? "none" : "block",
         }}
       />
       <div
-        className={cn(styles.scrollShadowBottom, styles.scrollShadowY)}
+        className={cn(
+          styles.scrollShadowBottom,
+          styles.scrollShadowY,
+          props.shadowClassName,
+        )}
         ref={shadowBottomEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={cn(styles.scrollShadowLeft, styles.scrollShadowX)}
+        className={cn(
+          styles.scrollShadowLeft,
+          styles.scrollShadowX,
+          props.shadowClassName,
+        )}
         ref={shadowLeftEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={cn(styles.scrollShadowRight, styles.scrollShadowX)}
+        className={cn(
+          styles.scrollShadowRight,
+          styles.scrollShadowX,
+          props.shadowClassName,
+        )}
         ref={shadowRightEl}
         style={{
           opacity: "0",

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

@@ -12,6 +12,7 @@ export type CodeProps = {
   scrollableClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
   copyButtonClassName?: string;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -21,10 +22,14 @@ export const CodeClient: React.FC<CodeProps> = ({
   scrollableClassName,
   keepPreviousDataOnCodeChange = false,
   copyButtonClassName,
+  ignoreFormattingErrors,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
-    queryFn: () => getCodeHtml(code, lang),
+    queryFn: () =>
+      getCodeHtml(code, lang, {
+        ignoreFormattingErrors: ignoreFormattingErrors,
+      }),
     placeholderData: keepPreviousDataOnCodeChange
       ? keepPreviousData
       : undefined,

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

@@ -16,15 +16,28 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
   );
 }
 
-export async function getCodeHtml(code: string, lang: BundledLanguage) {
+export async function getCodeHtml(
+  code: string,
+  lang: BundledLanguage,
+  options?: {
+    ignoreFormattingErrors?: boolean;
+  },
+) {
   const formattedCode = isPrettierSupportedLang(lang)
     ? await format(code, {
         parser: "babel-ts",
         plugins: [parserBabel, estree],
         printWidth: 60,
       }).catch((e) => {
-        console.error(e);
-        console.error("Failed to format code");
+        if (!options?.ignoreFormattingErrors) {
+          console.error(e);
+          console.error("Failed to format code");
+          console.log({
+            code,
+            lang,
+          });
+        }
+
         return code;
       })
     : code;