new web: fix constant loading

apps/tlon-web-new/.env

@@ -1,6 +1,6 @@
 # Change manually to clear local storage once
 VITE_LAST_WIPE=2022-05-13
 VITE_ENABLE_WDYR=false
-VITE_POSTHOG_KEY=phc_o25oAii2Hz9tIDe2SXyr0fvnL73qXxoP21NCOLfs40O
+VITE_POST_HOG_API_KEY=phc_o25oAii2Hz9tIDe2SXyr0fvnL73qXxoP21NCOLfs40O
 VITE_BRANCH_KEY=key_live_hubypwhuxR6vkwKfdozyRoamErouusXi
 VITE_BRANCH_DOMAIN=join.tlon.io

apps/tlon-web-new/src/app.tsx

@@ -8,7 +8,6 @@ import { useConfigureUrbitClient } from '@tloncorp/app/hooks/useConfigureUrbitCl
 import { useCurrentUserId } from '@tloncorp/app/hooks/useCurrentUser';
 import { useFindSuggestedContacts } from '@tloncorp/app/hooks/useFindSuggestedContacts';
 import { useIsDarkMode } from '@tloncorp/app/hooks/useIsDarkMode';
-import { loadConstants } from '@tloncorp/app/lib/constants';
 import { checkDb, useMigrations } from '@tloncorp/app/lib/webDb';
 import { BasePathNavigator } from '@tloncorp/app/navigation/BasePathNavigator';
 import {
@@ -36,8 +35,6 @@ import { preSig } from '@/logic/utils';
 import { toggleDevTools, useLocalState, useShowDevTools } from '@/state/local';
 import { useAnalyticsId, useLogActivity, useTheme } from '@/state/settings';
 
-loadConstants();
-
 const ReactQueryDevtoolsProduction = React.lazy(() =>
   import('@tanstack/react-query-devtools/production').then((d) => ({
     default: d.ReactQueryDevtools,

apps/tlon-web-new/src/env.d.ts

@@ -3,10 +3,33 @@ interface ImportMetaEnv
   readonly VITE_LAST_WIPE: string;
   readonly VITE_STORAGE_VERSION: string;
   readonly VITE_ENABLE_WDYR: 'true' | 'false' | undefined;
-  readonly VITE_POSTHOG_KEY: string;
+  readonly VITE_NOTIFY_PROVIDER: string | undefined;
+  readonly VITE_NOTIFY_SERVICE: string | undefined;
+  readonly VITE_POST_HOG_API_KEY: string;
+  readonly VITE_API_URL: string | undeined;
+  readonly VITE_API_AUTH_USERNAME: string | undefined;
+  readonly VITE_API_AUTH_PASSWORD: string | undefined;
+  readonly VITE_RECAPTCHA_SITE_KEY: string | undefined;
+  readonly VITE_SHIP_URL_PATTERN: string | undefined;
+  readonly VITE_DEFAULT_LURE: string | undefined;
+  readonly VITE_DEFAULT_PRIORITY_TOKEN: string | undefined;
+  readonly VITE_DEFAULT_TLON_LOGIN_EMAIL: string | undefined;
+  readonly VITE_DEFAULT_TLON_LOGIN_PASSWORD: string | undefined;
+  readonly VITE_DEFAULT_INVITE_LINK_URL: string | undefined;
+  readonly VITE_DEFAULT_SHIP_LOGIN_URL: string | undefined;
+  readonly VITE_DEFAULT_SHIP_LOGIN_ACCESS_CODE: string | undefined;
+  readonly VITE_DEFAULT_ONBOARDING_PASSWORD: string | undefined;
+  readonly VITE_DEFAULT_ONBOARDING_TLON_EMAIL: string | undefined;
+  readonly VITE_DEFAULT_ONBOARDING_NICKNAME: string | undefined;
+  readonly VITE_DEFAULT_ONBOARDING_PHONE_NUMBER: string | undefined;
+  readonly VITE_ENABLED_LOGGERS: string | undefined;
+  readonly VITE_IGNORE_COSMOS: 'true' | 'false' | undefined;
+  readonly VITE_TLON_EMPLOYEE_GROUP: string | undefined;
   readonly VITE_BRANCH_KEY: string;
   readonly VITE_BRANCH_DOMAIN: string;
   readonly VITE_SHIP_URL: string;
+  readonly VITE_INVITE_SERVICE_ENDPOINT: string;
+  readonly VITE_INVITE_SERVICE_IS_DEV: 'true' | 'false' | undefined;
 }
 
 interface ImportMeta {

apps/tlon-web-new/src/logic/analytics.ts

@@ -1,3 +1,4 @@
+import { POST_HOG_API_KEY } from '@tloncorp/app/constants';
 import { PrivacyType } from '@tloncorp/shared/urbit/groups';
 import posthog, { Properties } from 'posthog-js';
 
@@ -33,7 +34,7 @@ export type GroupsAnalyticsEvent = {
 
 // Configure PostHog with all auto-capturing settings disabled,
 // as we will only be tracking specific interactions.
-posthog.init(import.meta.env.VITE_POSTHOG_KEY, {
+posthog.init(POST_HOG_API_KEY, {
   api_host: 'https://eu.posthog.com',
   autocapture: false,
   capture_pageview: false,

apps/tlon-web-new/src/main.tsx

@@ -9,6 +9,7 @@
 // This was most likely caused by a recent dependency change.
 import regeneratorRuntime from '@babel/runtime/regenerator';
 import { EditorView } from '@tiptap/pm/view';
+import { loadConstants } from '@tloncorp/app/lib/constants';
 import { setupDb } from '@tloncorp/app/lib/webDb';
 import { QueryClientProvider, queryClient } from '@tloncorp/shared/api';
 import { PostHogProvider } from 'posthog-js/react';
@@ -18,6 +19,8 @@ import App from './app';
 import { analyticsClient, captureError } from './logic/analytics';
 import './styles/index.css';
 
+loadConstants();
+
 window.regeneratorRuntime = regeneratorRuntime;
 
 setupDb().then(() => {

packages/app/constants.ts

@@ -9,46 +9,81 @@ export const SHIP_URL_REGEX = /^https?:\/\/([\w-]+\.)+[\w-]+(:\d+)?(?=\/?$)/;
 export const IS_IOS = Platform.OS === 'ios';
 export const IS_ANDROID = Platform.OS === 'android';
 
-const extra = (Constants.expoConfig?.extra ?? {}) as Record<
+function formatWebEnv() {
+  // @ts-expect-error — TS doesn't like accessing import like that from a non-module file?
+  const env = import.meta.env;
+  return {
+    notifyProvider: env.VITE_NOTIFY_PROVIDER,
+    notifyService: env.VITE_NOTIFY_SERVICE,
+    postHogApiKey: env.VITE_POST_HOG_API_KEY,
+    apiUrl: env.VITE_API_URL,
+    apiAuthUsername: env.VITE_API_AUTH_USERNAME,
+    apiAuthPassword: env.VITE_API_AUTH_PASSWORD,
+    recaptchaSiteKey: env.VITE_RECAPTCHA_SITE_KEY,
+    shipUrlPattern: env.VITE_SHIP_URL_PATTERN,
+    defaultLure: env.VITE_DEFAULT_LURE,
+    defaultPriorityToken: env.VITE_DEFAULT_PRIORITY_TOKEN,
+    defaultTlonLoginEmail: env.VITE_DEFAULT_TLON_LOGIN_EMAIL,
+    defaultTlonLoginPassword: env.VITE_DEFAULT_TLON_LOGIN_PASSWORD,
+    defaultInviteLinkUrl: env.VITE_DEFAULT_INVITE_LINK_URL,
+    defaultShipLoginUrl: env.VITE_DEFAULT_SHIP_LOGIN_URL,
+    defaultShipLoginAccessCode: env.VITE_DEFAULT_SHIP_LOGIN_ACCESS_CODE,
+    defaultOnboardingPassword: env.VITE_DEFAULT_ONBOARDING_PASSWORD,
+    defaultOnboardingTlonEmail: env.VITE_DEFAULT_ONBOARDING_TLON_EMAIL,
+    defaultOnboardingNickname: env.VITE_DEFAULT_ONBOARDING_NICKNAME,
+    defaultOnboardingPhoneNumber: env.VITE_DEFAULT_ONBOARDING_PHONE_NUMBER,
+    enabledLoggers: env.VITE_ENABLED_LOGGERS,
+    ignoreCosmos: env.VITE_IGNORE_COSMOS,
+    TlonEmployeeGroup: env.VITE_TLON_EMPLOYEE_GROUP,
+    branchKey: env.VITE_BRANCH_KEY,
+    branchDomain: env.VITE_BRANCH_DOMAIN,
+    inviteServiceEndpoint: env.VITE_INVITE_SERVICE_ENDPOINT,
+    inviteServiceIsDev: env.VITE_INVITE_SERVICE_IS_DEV,
+  };
+}
+
+const envVars = (Constants.expoConfig?.extra ?? formatWebEnv() ?? {}) as Record<
   string,
   string | undefined
 >;
 
-export const NOTIFY_PROVIDER = extra.notifyProvider ?? 'rivfur-livmet';
-export const NOTIFY_SERVICE = extra.notifyService ?? 'groups-native';
-export const POST_HOG_API_KEY = extra.postHogApiKey ?? '';
-export const API_URL = extra.apiUrl ?? 'https://tlon.network';
-export const API_AUTH_USERNAME = extra.apiAuthUsername;
-export const API_AUTH_PASSWORD = extra.apiAuthPassword;
+export const NOTIFY_PROVIDER = envVars.notifyProvider ?? 'rivfur-livmet';
+export const NOTIFY_SERVICE = envVars.notifyService ?? 'groups-native';
+export const POST_HOG_API_KEY = envVars.postHogApiKey ?? '';
+export const API_URL = envVars.apiUrl ?? 'https://tlon.network';
+export const API_AUTH_USERNAME = envVars.apiAuthUsername;
+export const API_AUTH_PASSWORD = envVars.apiAuthPassword;
 export const RECAPTCHA_SITE_KEY =
-  (IS_ANDROID ? extra.recaptchaSiteKeyAndroid : extra.recaptchaSiteKeyIOS) ??
-  '';
+  (IS_ANDROID
+    ? envVars.recaptchaSiteKeyAndroid
+    : envVars.recaptchaSiteKeyIOS) ?? '';
 export const SHIP_URL_PATTERN =
-  extra.shipUrlPattern ?? 'https://{shipId}.tlon.network';
-export const DEFAULT_LURE = extra.defaultLure ?? '~nibset-napwyn/tlon';
-export const DEFAULT_PRIORITY_TOKEN = extra.defaultPriorityToken ?? 'mobile';
-export const DEFAULT_TLON_LOGIN_EMAIL = extra.defaultTlonLoginEmail ?? '';
-export const DEFAULT_TLON_LOGIN_PASSWORD = extra.defaultTlonLoginPassword ?? '';
-export const DEFAULT_INVITE_LINK_URL = extra.defaultInviteLinkUrl ?? '';
-export const DEFAULT_SHIP_LOGIN_URL = extra.defaultShipLoginUrl ?? '';
+  envVars.shipUrlPattern ?? 'https://{shipId}.tlon.network';
+export const DEFAULT_LURE = envVars.defaultLure ?? '~nibset-napwyn/tlon';
+export const DEFAULT_PRIORITY_TOKEN = envVars.defaultPriorityToken ?? 'mobile';
+export const DEFAULT_TLON_LOGIN_EMAIL = envVars.defaultTlonLoginEmail ?? '';
+export const DEFAULT_TLON_LOGIN_PASSWORD =
+  envVars.defaultTlonLoginPassword ?? '';
+export const DEFAULT_INVITE_LINK_URL = envVars.defaultInviteLinkUrl ?? '';
+export const DEFAULT_SHIP_LOGIN_URL = envVars.defaultShipLoginUrl ?? '';
 export const DEFAULT_SHIP_LOGIN_ACCESS_CODE =
-  extra.defaultShipLoginAccessCode ?? '';
+  envVars.defaultShipLoginAccessCode ?? '';
 export const DEFAULT_ONBOARDING_PASSWORD =
-  extra.defaultOnboardingPassword ?? '';
+  envVars.defaultOnboardingPassword ?? '';
 export const DEFAULT_ONBOARDING_TLON_EMAIL =
-  extra.defaultOnboardingTlonEmail ?? '';
+  envVars.defaultOnboardingTlonEmail ?? '';
 export const DEFAULT_ONBOARDING_NICKNAME =
-  extra.defaultOnboardingNickname ?? '';
+  envVars.defaultOnboardingNickname ?? '';
 export const DEFAULT_ONBOARDING_PHONE_NUMBER =
-  extra.defaultOnboardingPhoneNumber;
+  envVars.defaultOnboardingPhoneNumber;
 
-export const ENABLED_LOGGERS = extra.enabledLoggers?.split(',') ?? [];
-export const IGNORE_COSMOS = extra.ignoreCosmos === 'true';
-export const TLON_EMPLOYEE_GROUP = extra.TlonEmployeeGroup ?? '';
-export const BRANCH_KEY = extra.branchKey ?? '';
-export const BRANCH_DOMAIN = extra.branchDomain ?? '';
-export const INVITE_SERVICE_ENDPOINT = extra.inviteServiceEndpoint ?? '';
-export const INVITE_SERVICE_IS_DEV = extra.inviteServiceIsDev === 'true';
+export const ENABLED_LOGGERS = envVars.enabledLoggers?.split(',') ?? [];
+export const IGNORE_COSMOS = envVars.ignoreCosmos === 'true';
+export const TLON_EMPLOYEE_GROUP = envVars.TlonEmployeeGroup ?? '';
+export const BRANCH_KEY = envVars.branchKey ?? '';
+export const BRANCH_DOMAIN = envVars.branchDomain ?? '';
+export const INVITE_SERVICE_ENDPOINT = envVars.inviteServiceEndpoint ?? '';
+export const INVITE_SERVICE_IS_DEV = envVars.inviteServiceIsDev === 'true';
 
 export const ENV_VARS = {
   NOTIFY_PROVIDER,