add messages extraction and example

src/IntlProvider.tsx

@@ -1,14 +1,9 @@
 import { type ReactNode } from 'react'
 import { IntlProvider as ReactIntlProvider } from 'react-intl'
+import enMessages from 'translations/en.json'
+import esMessages from 'translations/es.json'
 
 const DEFAULT_LOCALE = 'en-US'
-const enMessages = {
-    hello: 'hello',
-}
-
-const esMessages = {
-    hello: 'hola',
-}
 
 const getMessages = (locale: string) => {
     const truncatedLocale = locale.toLowerCase().split(/[_-]+/)[0]

src/Pages/Layout.tsx

@@ -21,6 +21,8 @@ import { bech32ToHex } from "Util";
 import { NoteCreator } from "Element/NoteCreator";
 import Plus from "Icons/Plus";
 import { RelaySettings } from "Nostr/Connection";
+import { FormattedMessage } from "react-intl";
+import messages from './messages'
 
 export default function Layout() {
   const location = useLocation();
@@ -222,7 +224,7 @@ export default function Layout() {
             accountHeader()
           ) : (
             <button type="button" onClick={() => navigate("/login")}>
-              Login
+              <FormattedMessage {...messages.Login} />
             </button>
           )}
         </div>

src/Pages/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+import { addIdAndDefaultMessageToMessages } from "Util";
+
+const messages = defineMessages({
+  Login: "Login",
+});
+
+export default addIdAndDefaultMessageToMessages(messages, 'Pages');

src/Util.ts

@@ -3,6 +3,7 @@ import { sha256 as hash } from "@noble/hashes/sha256";
 import { bech32 } from "bech32";
 import { HexKey, RawEvent, TaggedRawEvent, u256 } from "Nostr";
 import EventKind from "Nostr/EventKind";
+import { MessageDescriptor } from "react-intl";
 
 export const sha256 = (str: string) => {
   return secp.utils.bytesToHex(hash(str));
@@ -178,3 +179,19 @@ export function debounce(timeout: number, fn: () => void) {
   let t = setTimeout(fn, timeout);
   return () => clearTimeout(t);
 }
+
+export function addIdAndDefaultMessageToMessages(
+  messages: Record<string, string>,
+  messageIdPrefix: string
+) {
+  const result: Record<string, MessageDescriptor> = {};
+
+  for (const key in messages) {
+    result[key] = {
+      id: `${messageIdPrefix}.${key}`,
+      defaultMessage: messages[key],
+    };
+  }
+
+  return result;
+}

src/index.tsx

@@ -7,7 +7,6 @@ import * as ReactDOM from "react-dom/client";
 import { Provider } from "react-redux";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
-// @ts-expect-error
 import * as serviceWorkerRegistration from "serviceWorkerRegistration";
 import Store from "State/Store";
 import EventPage from "Pages/EventPage";

src/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "Pages.Login": "Login"
+}

src/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "Pages.Login": "Acceso"
+}