Merge pull request #45 from Chia-Network/nwo-enhancements

feat: implement localization to broadcast locale changes to child apps
Chia-Network · Jul 26, 2024 · d24fdcf · d24fdcf
2 parents 1ddbcab + f5f17d6
commit d24fdcf
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 20 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -6,6 +6,7 @@ import { ExplorerLogo } from "./components/ExplorerLogo";
 import { TokenizationLogo } from "./components/TokenizationLogo";
 import { Flowbite, Button, Modal } from "flowbite-react";
 import flowbiteThemeSettings from "./flowbite.theme";
+import { LocaleSwitcher } from "./components/LocalSwitcher";
 
 const appLinks = {
   cadt: {
@@ -37,9 +38,36 @@ const App = () => {
   }, [flowbiteThemeSettings]);
 
   const ActiveLogo = activeApp.logo;
-  const TokenizationLogo = appLinks["climateTokenization"].logo;
-  const ExplorerLogo = appLinks["climateExplorer"].logo;
-  const CadtLogo = appLinks["cadt"].logo;
+
+  function getIframeOrigin(iframe) {
+    try {
+      const url = new URL(iframe.src);
+      return url.origin;
+    } catch (error) {
+      console.error("Invalid iframe URL", error);
+      return null;
+    }
+  }
+
+  function sendMessageToIframe(iframe, message) {
+    const targetOrigin = getIframeOrigin(iframe);
+    if (targetOrigin && iframe.contentWindow) {
+      iframe.contentWindow.postMessage(message, targetOrigin);
+    } else {
+      console.error(
+        "Failed to determine target origin or iframe is not available"
+      );
+    }
+  }
+
+  const handleLocaleChange = (event) => {
+    const message = { changeLocale: event };
+    [cadtRef, climateExplorerRef, climateTokenizationRef].forEach((ref) => {
+      if (ref.current) {
+        sendMessageToIframe(ref.current, message);
+      }
+    });
+  };
 
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -48,12 +76,9 @@ const App = () => {
     const formData = new FormData(form);
     const data = Object.fromEntries(formData.entries());
 
-    // Validation function for host
     const isValidHost = (host) => /^https?:\/\/.+(:\d{1,5})?$/.test(host);
-    // Validation function for API key (adjust as needed)
     const isValidApiKey = (key) => key.trim() !== "";
 
-    // Array containing the field names, corresponding error element IDs, and validation functions
     const fields = [
       {
         name: "cadtRegistryHost",
@@ -180,17 +205,18 @@ const App = () => {
           ) : (
             <div></div>
           )}
-
-          {validateLocalStorage() ? (
-            <Button color="gray" onClick={handleDisconnect}>
-              Disconnect
-            </Button>
-          ) : (
-            <Button color="gray" onClick={() => setShowConnect(true)}>
-              Connect
-            </Button>
-          )}
-
+          <div className="flex gap-8 items-center">
+            <LocaleSwitcher handleLocaleChange={handleLocaleChange} />
+            {validateLocalStorage() ? (
+              <Button color="gray" onClick={handleDisconnect}>
+                Disconnect
+              </Button>
+            ) : (
+              <Button color="gray" onClick={() => setShowConnect(true)}>
+                Connect
+              </Button>
+            )}
+          </div>
           {showConnect && (
             <Modal show={true} onClose={() => setShowConnect(false)}>
               <Modal.Header>Connect to Core Registry</Modal.Header>

diff --git a/src/components/LocalSwitcher.jsx b/src/components/LocalSwitcher.jsx
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import styled, { withTheme } from "styled-components";
+import { Dropdown } from "flowbite-react";
+
+const LANGUAGE_CODES = Object.freeze({
+  ENGLISH: "en-US",
+  SPANISH: "es-ES",
+  FRENCH: "fr-FR",
+  GERMAN: "de-DE",
+  CHINESE: "cn",
+});
+
+const LocaleSwitcher = ({ handleLocaleChange }) => {
+  const [currentLanguage, setCurrentLanguage] = useState(
+    LANGUAGE_CODES["ENGLISH"]
+  );
+
+  const handleChange = (value) => {
+    setCurrentLanguage(value);
+    handleLocaleChange(value);
+  };
+  return (
+    <Dropdown
+      label={currentLanguage}
+    >
+      {Object.keys(LANGUAGE_CODES).map((key) => (
+        <Dropdown.Item
+          key={LANGUAGE_CODES[key]}
+          onClick={() => handleChange(LANGUAGE_CODES[key])}
+          value={LANGUAGE_CODES[key]}
+        >
+          {key}
+        </Dropdown.Item>
+      ))}
+    </Dropdown>
+  );
+};
+
+export { LocaleSwitcher };
diff --git a/src/flowbite.theme.js b/src/flowbite.theme.js
@@ -1,8 +1,8 @@
 export default () => ({
   theme: {
     dropdown: {
-      arrowIcon: "ml-2 h-11 w-4 items-center justify-center",
-      content: "py-1 focus:outline-none",
+      arrowIcon: "ml-2 w-4 self-center justify-center",
+      content: "items-center  py-1 focus:outline-none",
       floating: {
         animation: "transition-opacity",
         arrow: {
@@ -23,7 +23,7 @@ export default () => ({
         hidden: "invisible opacity-0",
         item: {
           container: "focus:outline-none",
-          base: "focus:outline-none flex items-center justify-start py-2 px-4 text-sm text-gray-700 cursor-pointer w-full hover:bg-gray-900 focus:outline-none dark:text-gray-200 dark:hover:bg-gray-900 focus:outline-none dark:hover:text-white dark:focus:bg-gray-600 dark:focus:text-white",
+          base: "focus:outline-none flex items-center justify-start py-2 px-4 text-sm text-white cursor-pointer w-full hover:bg-gray-900 focus:outline-none dark:text-gray-200 dark:hover:bg-gray-900 focus:outline-none dark:hover:text-white dark:focus:bg-gray-600 dark:focus:text-white",
           icon: "mr-2 h-4 w-4 focus:outline-none",
         },
         style: {