From 49a4f5b8aea74cb12a98a1e56f2e88bf7800a7ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Wed, 22 Oct 2025 11:56:27 +0200
Subject: [PATCH] fix: self-hosting

---
 .../onboarding/onboarding-verify-listener.tsx       |  7 +------
 apps/start/src/components/sidebar.tsx               |  4 ++--
 apps/start/src/hooks/use-app-context.ts             |  6 +++++-
 apps/start/src/routes/__root.tsx                    |  5 ++++-
 .../routes/_steps.onboarding.$projectId.verify.tsx  | 13 +++++++++++--
 apps/start/src/utils/op.ts                          |  2 +-
 apps/start/wrangler.jsonc                           |  1 +
 7 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/apps/start/src/components/onboarding/onboarding-verify-listener.tsx b/apps/start/src/components/onboarding/onboarding-verify-listener.tsx
index 75374596..2a2bb496 100644
--- a/apps/start/src/components/onboarding/onboarding-verify-listener.tsx
+++ b/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`,
diff --git a/apps/start/src/components/sidebar.tsx b/apps/start/src/components/sidebar.tsx
index ad5b5ea2..ad6f3a36 100644
--- a/apps/start/src/components/sidebar.tsx
+++ b/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>
             )}
diff --git a/apps/start/src/hooks/use-app-context.ts b/apps/start/src/hooks/use-app-context.ts
index 1d9c2c27..c00230fb 100644
--- a/apps/start/src/hooks/use-app-context.ts
+++ b/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');
   }
 
diff --git a/apps/start/src/routes/__root.tsx b/apps/start/src/routes/__root.tsx
index 30b4b2f6..33adeb6f 100644
--- a/apps/start/src/routes/__root.tsx
+++ b/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;
diff --git a/apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx b/apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx
index 80d4dea9..8f87c997 100644
--- a/apps/start/src/routes/_steps.onboarding.$projectId.verify.tsx
+++ b/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} />
diff --git a/apps/start/src/utils/op.ts b/apps/start/src/utils/op.ts
index 42699e5a..3e9cfee1 100644
--- a/apps/start/src/utils/op.ts
+++ b/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,
diff --git a/apps/start/wrangler.jsonc b/apps/start/wrangler.jsonc
index 5a7ee568..bc296d9e 100644
--- a/apps/start/wrangler.jsonc
+++ b/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",