FormattedMessage: replace Snort -> APP_NAME_CAPITALIZED

packages/app/config/README.md

@@ -0,0 +1 @@
+Choose config with NODE_CONFIG_ENV: `NODE_CONFIG_ENV=iris yarn start`

packages/app/config/default.json

@@ -1,4 +1,5 @@
 {
   "appName": "Snort",
+  "appNameCapitalized": "Snort",
   "appTitle": "Snort - Nostr"
 }

packages/app/config/iris.json

@@ -1,4 +1,5 @@
 {
   "appName": "iris",
+  "appNameCapitalized": "Iris",
   "appTitle": "iris"
 }

packages/app/src/Element/BadgeList.tsx

@@ -1,7 +1,7 @@
 import "./BadgeList.css";
 
 import { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import { TaggedNostrEvent } from "@snort/system";
 

packages/app/src/Element/BlockButton.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey } from "@snort/system";
 import useModeration from "Hooks/useModeration";
 

packages/app/src/Element/Bookmarks.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, ChangeEvent } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey, TaggedNostrEvent } from "@snort/system";
 
 import Note from "Element/Note";

packages/app/src/Element/DmWindow.tsx

@@ -6,7 +6,7 @@ import DM from "Element/DM";
 import useLogin from "Hooks/useLogin";
 import WriteMessage from "Element/WriteMessage";
 import { Chat, createEmptyChatObject, useChatSystem } from "chat";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { ChatParticipantProfile } from "./ChatParticipant";
 
 export default function DmWindow({ id }: { id: string }) {

packages/app/src/Element/FollowButton.tsx

@@ -1,5 +1,5 @@
 import "./FollowButton.css";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey } from "@snort/system";
 
 import useEventPublisher from "Hooks/useEventPublisher";

packages/app/src/Element/FollowListBase.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey } from "@snort/system";
 
 import useEventPublisher from "Hooks/useEventPublisher";

packages/app/src/Element/Following.tsx

@@ -1,7 +1,7 @@
 import "./Following.css";
 import useLogin from "Hooks/useLogin";
 import Icon from "Icons/Icon";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 export function FollowingMark({ pubkey }: { pubkey: string }) {
   const { follows } = useLogin(s => ({ follows: s.follows }));

packages/app/src/Element/FormattedMessage.tsx

@@ -0,0 +1,22 @@
+import { useState, useEffect, FC, ComponentProps } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+
+type ExtendedProps = ComponentProps<typeof FormattedMessage>;
+
+const ExtendedFormattedMessage: FC<ExtendedProps> = (props) => {
+  const { id, defaultMessage, values} = props;
+  const { formatMessage } = useIntl();
+
+  const [processedMessage, setProcessedMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    const translatedMessage = formatMessage({ id, defaultMessage }, values);
+    if (typeof translatedMessage === 'string') {
+      setProcessedMessage(translatedMessage.replace('Snort', process.env.APP_NAME_CAPITALIZED || 'Snort'));
+    }
+  }, [id, defaultMessage, values, formatMessage]);
+
+  return <>{processedMessage}</>;
+};
+
+export default ExtendedFormattedMessage;

packages/app/src/Element/LiveEvent.tsx

@@ -1,5 +1,5 @@
 import { NostrEvent, NostrLink } from "@snort/system";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link } from "react-router-dom";
 
 import { findTag } from "SnortUtils";

packages/app/src/Element/LoadMore.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useInView } from "react-intersection-observer";
 
 import messages from "./messages";

packages/app/src/Element/LogoutButton.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate } from "react-router-dom";
 
 import { logout } from "Login";

packages/app/src/Element/MagnetLink.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import { Magnet } from "SnortUtils";
 

packages/app/src/Element/MuteButton.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey } from "@snort/system";
 import useModeration from "Hooks/useModeration";
 

packages/app/src/Element/MutedList.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey } from "@snort/system";
 import MuteButton from "Element/MuteButton";
 import ProfilePreview from "Element/ProfilePreview";

packages/app/src/Element/NostrFileHeader.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { NostrEvent, NostrLink } from "@snort/system";
 
 import { findTag } from "SnortUtils";

packages/app/src/Element/NoteReaction.tsx

@@ -7,7 +7,7 @@ import Note from "Element/Note";
 import { getDisplayName } from "Element/ProfileImage";
 import { eventLink, hexToBech32 } from "SnortUtils";
 import useModeration from "Hooks/useModeration";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import Icon from "Icons/Icon";
 import { useUserProfile } from "@snort/system-react";
 import { useInView } from "react-intersection-observer";

packages/app/src/Element/NoteToSelf.tsx

@@ -1,6 +1,6 @@
 import "./NoteToSelf.css";
 import { Link, useNavigate } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { profileLink } from "SnortUtils";
 
 import messages from "./messages";

packages/app/src/Element/ProxyImg.tsx

@@ -1,6 +1,6 @@
 import useImgProxy from "Hooks/useImgProxy";
 import React, { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { getUrlHostname } from "SnortUtils";
 
 interface ProxyImgProps extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {

packages/app/src/Element/ReBroadcaster.tsx

@@ -1,5 +1,5 @@
 import { useContext, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { TaggedNostrEvent } from "@snort/system";
 import { SnortContext } from "@snort/system-react";
 

packages/app/src/Element/Relay.tsx

@@ -1,6 +1,6 @@
 import "./Relay.css";
 import { useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate } from "react-router-dom";
 import { RelaySettings } from "@snort/system";
 import { unixNowMs } from "@snort/shared";

packages/app/src/Element/RevealMedia.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import { FileExtensionRegex } from "Const";
 import Reveal from "Element/Reveal";

packages/app/src/Element/RootTabs.tsx

@@ -2,7 +2,7 @@ import "./RootTabs.css";
 import { useState, ReactNode, useEffect } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { Menu, MenuItem } from "@szhsin/react-menu";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import useLogin from "Hooks/useLogin";
 import Icon from "Icons/Icon";

packages/app/src/Element/SuggestedProfiles.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { HexKey, NostrPrefix } from "@snort/system";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import FollowListBase from "Element/FollowListBase";
 import PageSpinner from "Element/PageSpinner";

packages/app/src/Element/Timeline.tsx

@@ -1,5 +1,5 @@
 import "./Timeline.css";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useCallback, useMemo } from "react";
 import { useInView } from "react-intersection-observer";
 import { TaggedNostrEvent, EventKind, u256 } from "@snort/system";

packages/app/src/Element/TimelineFollows.tsx

@@ -1,6 +1,6 @@
 import "./Timeline.css";
 import { ReactNode, useCallback, useContext, useMemo, useState, useSyncExternalStore } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { TaggedNostrEvent, EventKind, u256, NostrEvent, NostrLink } from "@snort/system";
 import { unixNow } from "@snort/shared";
 import { SnortContext } from "@snort/system-react";

packages/app/src/Element/ZapstrEmbed.tsx

@@ -4,7 +4,7 @@ import { NostrEvent, NostrLink } from "@snort/system";
 
 import { ProxyImg } from "Element/ProxyImg";
 import ProfileImage from "Element/ProfileImage";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 export default function ZapstrEmbed({ ev }: { ev: NostrEvent }) {
   const media = ev.tags.find(a => a[0] === "media");

packages/app/src/Pages/DeckLayout.tsx

@@ -1,7 +1,7 @@
 import "./Deck.css";
 import { CSSProperties, createContext, useContext, useEffect, useState } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { NostrLink } from "@snort/system";
 
 import { DeckNav } from "Element/Deck/Nav";

packages/app/src/Pages/DonatePage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { HexKey } from "@snort/system";
 
 import { ApiHost, KieranPubKey, SnortPubKey } from "Const";

packages/app/src/Pages/ErrorPage.tsx

@@ -1,6 +1,6 @@
 import { db } from "Db";
 import AsyncButton from "Element/AsyncButton";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useRouteError } from "react-router-dom";
 
 const ErrorPage = () => {

packages/app/src/Pages/HashTagsPage.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import { useParams } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import Timeline from "Element/Timeline";
 import useEventPublisher from "Hooks/useEventPublisher";

packages/app/src/Pages/HelpPage.tsx

@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import { KieranPubKey } from "Const";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { TLVEntryType, encodeTLVEntries, NostrPrefix } from "@snort/system";
 import { bech32ToHex } from "SnortUtils";
 

packages/app/src/Pages/NostrAddressPage.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 import { ApiHost } from "Const";
 import Nip5Service from "Element/Nip5Service";

packages/app/src/Pages/NostrLinkHandler.tsx

@@ -1,6 +1,6 @@
 import { NostrPrefix, tryParseNostrLink } from "@snort/system";
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate, useParams } from "react-router-dom";
 
 import Spinner from "Icons/Spinner";

packages/app/src/Pages/ProfilePage.tsx

@@ -1,6 +1,6 @@
 import "./ProfilePage.css";
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate, useParams } from "react-router-dom";
 import {
   encodeTLV,

packages/app/src/Pages/Root.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from "react";
 import { Link, Outlet, RouteObject, useParams } from "react-router-dom";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { unixNow } from "@snort/shared";
 import { NostrLink } from "@snort/system";
 

packages/app/src/Pages/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Outlet, RouteObject, useNavigate } from "react-router-dom";
 import SettingsIndex from "Pages/settings/Root";
 import Profile from "Pages/settings/Profile";

packages/app/src/Pages/new/GetVerified.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate } from "react-router-dom";
 import { useUserProfile } from "@snort/system-react";
 

packages/app/src/Pages/new/NewUserFlow.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate } from "react-router-dom";
 
 import Logo from "Element/Logo";

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

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link } from "react-router-dom";
 
 import ProfilePreview from "Element/ProfilePreview";

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

@@ -1,5 +1,5 @@
 import "./Keys.css";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { encodeTLV, NostrPrefix, PinEncrypted } from "@snort/system";
 
 import Copy from "Element/Copy";

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

@@ -3,7 +3,7 @@ import useLogin from "Hooks/useLogin";
 import { setAppData } from "Login";
 import { appendDedupe } from "SnortUtils";
 import { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 
 export function ModerationSettings() {
   const login = useLogin();

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

@@ -1,6 +1,6 @@
 import "./Profile.css";
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { useNavigate } from "react-router-dom";
 import { mapEventToProfile } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";

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

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import ProfilePreview from "Element/ProfilePreview";
 import useRelayState from "Feed/RelayState";
 import { useNavigate, useParams } from "react-router-dom";

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

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { unixNowMs } from "@snort/shared";
 
 import { randomSample } from "SnortUtils";

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

@@ -1,6 +1,6 @@
 import "./Root.css";
 import { useEffect, useMemo } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Outlet, useLocation, useNavigate } from "react-router-dom";
 import Icon from "Icons/Icon";
 import { LoginStore, logout } from "Login";

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

@@ -1,6 +1,6 @@
 import "./WalletSettings.css";
 import LndLogo from "lnd-logo.png";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link, RouteObject, useNavigate } from "react-router-dom";
 
 import BlueWallet from "Icons/BlueWallet";

packages/app/src/Pages/settings/handle/ListHandles.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link, useNavigate } from "react-router-dom";
 
 import { ApiHost } from "Const";

packages/app/src/Pages/settings/handle/index.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Outlet, RouteObject, useNavigate } from "react-router-dom";
 
 import ListHandles from "./ListHandles";

packages/app/src/Pages/subscribe/ManageSubscription.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link, useNavigate } from "react-router-dom";
 
 import PageSpinner from "Element/PageSpinner";

packages/app/src/Pages/subscribe/index.tsx

@@ -1,7 +1,7 @@
 import "./index.css";
 
 import { useState } from "react";
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { RouteObject } from "react-router-dom";
 
 import { formatShort } from "Number";

packages/app/src/Tasks/DonateTask.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link } from "react-router-dom";
 import { BaseUITask } from "Tasks";
 

packages/app/src/Tasks/Nip5Task.tsx

@@ -1,4 +1,4 @@
-import { FormattedMessage } from "react-intl";
+import FormattedMessage from "@snort/app/src/Element/FormattedMessage";
 import { Link } from "react-router-dom";
 import { MetadataCache } from "@snort/system";
 import { BaseUITask } from "Tasks";

packages/app/webpack.config.js

@@ -77,6 +77,7 @@ const config = {
       : false,
     new DefinePlugin({
       "process.env.APP_NAME": JSON.stringify(appConfig.get('appName')),
+      "process.env.APP_NAME_CAPITALIZED": JSON.stringify(appConfig.get('appNameCapitalized')),
     }),
   ],
   module: {