FormattedMessage: replace Snort -> APP_NAME_CAPITALIZED

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;