fix: self-hosting

apps/start/src/components/onboarding/onboarding-verify-listener.tsx

@@ -18,12 +18,7 @@ type Props = {
   onVerified: (verified: boolean) => void;
 };
 
-const VerifyListener = ({
-  client,
-  events: _events,
-  onVerified,
-  project,
-}: Props) => {
+const VerifyListener = ({ client, events: _events, onVerified }: Props) => {
   const [events, setEvents] = useState<IServiceEvent[]>(_events ?? []);
   useWS<IServiceEvent>(
     `/live/events/${client?.projectId}?type=received`,

apps/start/src/components/sidebar.tsx

@@ -130,10 +130,10 @@ export function SidebarContainer({
         >
           {children}
 
-          <div className="mt-auto w-full ">
+          <div className="mt-auto w-full pt-6">
             <FeedbackButton />
             {isSelfHosted && (
-              <div className={cn('text-sm w-full text-center')}>
+              <div className={cn('text-sm w-full text-left mt-2')}>
                 Self-hosted instance
               </div>
             )}

apps/start/src/hooks/use-app-context.ts

@@ -5,7 +5,11 @@ export function useAppContext() {
     strict: false,
   });
 
-  if (!params.apiUrl || !params.dashboardUrl || !params.isSelfHosted) {
+  if (
+    !params.apiUrl ||
+    !params.dashboardUrl ||
+    typeof params.isSelfHosted === 'undefined'
+  ) {
     throw new Error('API URL or dashboard URL is not set');
   }
 

apps/start/src/routes/__root.tsx

@@ -2,6 +2,7 @@ import {
   HeadContent,
   Scripts,
   createRootRouteWithContext,
+  useRouteContext,
 } from '@tanstack/react-router';
 
 import 'flag-icons/css/flag-icons.min.css';
@@ -23,7 +24,9 @@ import { op } from '@/utils/op';
 import type { AppRouter } from '@openpanel/trpc';
 import type { TRPCOptionsProxy } from '@trpc/tanstack-react-query';
 
-op.init();
+if (import.meta.env.VITE_OP_CLIENT_ID) {
+  op.init();
+}
 
 interface MyRouterContext {
   queryClient: QueryClient;

apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx

@@ -10,6 +10,7 @@ import { PAGE_TITLES, createEntityTitle } from '@/utils/title';
 import { useQuery } from '@tanstack/react-query';
 import { Link, createFileRoute, redirect } from '@tanstack/react-router';
 import { BoxSelectIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 export const Route = createFileRoute('/_steps/onboarding/$projectId/verify')({
   head: () => ({
@@ -32,6 +33,7 @@ export const Route = createFileRoute('/_steps/onboarding/$projectId/verify')({
 });
 
 function Component() {
+  const [isVerified, setIsVerified] = useState(false);
   const { projectId } = Route.useParams();
   const trpc = useTRPC();
   const { data: events, refetch } = useQuery(
@@ -41,7 +43,11 @@ function Component() {
     trpc.project.getProjectWithClients.queryOptions({ projectId }),
   );
 
-  const isVerified = events && events.data.length > 0;
+  useEffect(() => {
+    if (events && events.data.length > 0) {
+      setIsVerified(true);
+    }
+  }, [events]);
 
   if (!project) {
     return (
@@ -60,7 +66,10 @@ function Component() {
         project={project}
         client={client}
         events={events?.data ?? []}
-        onVerified={() => refetch()}
+        onVerified={() => {
+          refetch();
+          setIsVerified(true);
+        }}
       />
 
       <CurlPreview project={project} />

apps/start/src/utils/op.ts

@@ -1,7 +1,7 @@
 import { OpenPanel } from '@openpanel/web';
 
 export const op = new OpenPanel({
-  clientId: '301c6dc1-424c-4bc3-9886-a8beab09b615',
+  clientId: import.meta.env.VITE_OP_CLIENT_ID,
   trackScreenViews: true,
   trackOutgoingLinks: true,
   trackAttributes: true,

apps/start/wrangler.jsonc

@@ -12,6 +12,7 @@
     }
   ],
   "vars": {
+    "VITE_OP_CLIENT_ID": "301c6dc1-424c-4bc3-9886-a8beab09b615",
     "API_URL": "https://api.openpanel.dev",
     "DASHBOARD_URL": "https://dashboard.openpanel.dev",
     "NODE_ENV": "production",