feature flags config / typed app config

packages/app/src/Pages/DonatePage.tsx

@@ -94,13 +94,13 @@ const DonatePage = () => {
       <h2>
         <FormattedMessage
           defaultMessage="Help fund the development of {site}"
-          values={{ site: process.env.APP_NAME_CAPITALIZED }}
+          values={{ site: CONFIG.appNameCapitalized }}
         />
       </h2>
       <p>
         <FormattedMessage
           defaultMessage="{site} is an open source project built by passionate people in their free time"
-          values={{ site: process.env.APP_NAME_CAPITALIZED }}
+          values={{ site: CONFIG.appNameCapitalized }}
         />
       </p>
       <p>

packages/app/src/Pages/Layout.tsx

@@ -209,7 +209,7 @@ function LogoHeader() {
 
   return (
     <Link to="/" className="logo">
-      <h1>{process.env.APP_NAME}</h1>
+      <h1>{CONFIG.appName}</h1>
       {currentSubscription && (
         <small className="flex">
           <Icon name="diamond" size={10} className="mr5" />

packages/app/src/Pages/LoginPage.tsx

@@ -143,7 +143,7 @@ export default function LoginPage() {
 
   function generateNip46() {
     const meta = {
-      name: process.env.APP_NAME_CAPITALIZED,
+      name: CONFIG.appNameCapitalized,
       url: window.location.href,
     };
 
@@ -287,7 +287,7 @@ export default function LoginPage() {
       <div>
         <div className="login-container">
           <h1 className="logo" onClick={() => navigate("/")}>
-            {process.env.APP_NAME}
+            {CONFIG.appName}
           </h1>
           <h1 dir="auto">
             <FormattedMessage defaultMessage="Login" description="Login header" />
@@ -342,7 +342,7 @@ export default function LoginPage() {
                       <FormattedMessage
                         defaultMessage="Secure your private key with a PIN, ensuring enhanced protection on {site}. You'll be prompted to enter this PIN each time you access the site."
                         values={{
-                          site: process.env.APP_NAME_CAPITALIZED,
+                          site: CONFIG.appNameCapitalized,
                         }}
                       />
                     </p>

packages/app/src/Pages/NostrLinkHandler.tsx

@@ -25,7 +25,7 @@ export default function NostrLinkHandler() {
       }
     } else {
       try {
-        const pubkey = await getNip05PubKey(`${link}@${process.env.NIP05_DOMAIN}`);
+        const pubkey = await getNip05PubKey(`${link}@${CONFIG.nip05Domain}`);
         if (pubkey) {
           setRenderComponent(<ProfilePage id={pubkey} />); // Directly render ProfilePage
         }

packages/app/src/Pages/Profile/ProfilePage.tsx

@@ -139,8 +139,8 @@ export default function ProfilePage({ id: propId }: ProfilePageProps) {
 
   useEffect(() => {
     if (user?.nip05 && user?.isNostrAddressValid) {
-      if (user.nip05.endsWith(`@${process.env.NIP05_DOMAIN}`)) {
-        const username = user.nip05?.replace(`@${process.env.NIP05_DOMAIN}`, "");
+      if (user.nip05.endsWith(`@${CONFIG.nip05Domain}`)) {
+        const username = user.nip05?.replace(`@${CONFIG.nip05Domain}`, "");
         navigate(`/${username}`, { replace: true });
       }
     }

packages/app/src/Pages/new/messages.ts

@@ -14,11 +14,11 @@ export default defineMessages({
   KeysSaved: { defaultMessage: "I have saved my keys, continue" },
   WhatIsSnort: {
     defaultMessage: "What is {site} and how does it work?",
-    values: { site: process.env.APP_NAME_CAPITALIZED },
+    values: { site: CONFIG.appNameCapitalized },
   },
   WhatIsSnortIntro: {
     defaultMessage: `{site} is a Nostr UI, nostr is a decentralised protocol for saving and distributing "notes".`,
-    values: { site: process.env.APP_NAME_CAPITALIZED },
+    values: { site: CONFIG.appNameCapitalized },
   },
   WhatIsSnortNotes: {
     defaultMessage: `Notes hold text content, the most popular usage of these notes is to store "tweet like" messages.`,
@@ -26,7 +26,7 @@ export default defineMessages({
 
   WhatIsSnortExperience: {
     defaultMessage: "{site} is designed to have a similar experience to Twitter.",
-    values: { site: process.env.APP_NAME_CAPITALIZED },
+    values: { site: CONFIG.appNameCapitalized },
   },
   HowKeysWork: { defaultMessage: "How do keys work?" },
   DigitalSignatures: {
@@ -70,9 +70,9 @@ export default defineMessages({
   NameSquatting: {
     defaultMessage:
       "Name-squatting and impersonation is not allowed. {site} and our partners reserve the right to terminate your handle (not your account - nobody can take that away) for violating this rule.",
-    values: { site: process.env.APP_NAME_CAPITALIZED },
+    values: { site: CONFIG.appNameCapitalized },
   },
-  PreviewOnSnort: { defaultMessage: "Preview on {site}", values: { site: process.env.APP_NAME_CAPITALIZED } },
+  PreviewOnSnort: { defaultMessage: "Preview on {site}", values: { site: CONFIG.appNameCapitalized } },
   GetSnortId: { defaultMessage: "Get a Snort identifier" },
   GetSnortIdHelp: {
     defaultMessage:

packages/app/src/Pages/settings/Root.tsx

@@ -6,9 +6,9 @@ import Icon from "Icons/Icon";
 import { LoginStore, logout } from "Login";
 import useLogin from "Hooks/useLogin";
 import { getCurrentSubscription } from "Subscription";
+import usePageWidth from "Hooks/usePageWidth";
 
 import messages from "./messages";
-import usePageWidth from "Hooks/usePageWidth";
 
 const SettingsIndex = () => {
   const login = useLogin();
@@ -61,11 +61,13 @@ const SettingsIndex = () => {
             <FormattedMessage defaultMessage="Nostr Adddress" />
             <Icon name="arrowFront" size={16} />
           </div>
-          <div className="settings-row" onClick={() => navigate("/subscribe/manage")}>
-            <Icon name="diamond" size={24} />
-            <FormattedMessage defaultMessage="Subscription" />
-            <Icon name="arrowFront" size={16} />
-          </div>
+          {CONFIG.features.subscriptions && (
+            <div className="settings-row" onClick={() => navigate("/subscribe/manage")}>
+              <Icon name="diamond" size={24} />
+              <FormattedMessage defaultMessage="Subscription" />
+              <Icon name="arrowFront" size={16} />
+            </div>
+          )}
           {sub && (
             <div className="settings-row" onClick={() => navigate("accounts")}>
               <Icon name="code-circle" size={24} />