React-intl: Add i18n to SpeedRunEthereum

README.md

@@ -51,3 +51,11 @@ Then re-run:
 ```bash
 yarn backend
 ```
+
+## Translations
+
+Extract and compile strings ([docs](https://formatjs.io/docs/tooling/cli/#extraction-and-compilation-with-a-single-script)) (run in react-app folder):
+
+```
+yarn translations-extract
+```

packages/react-app/package.json

@@ -53,6 +53,7 @@
     "react": "^16.14.0",
     "react-blockies": "^1.4.1",
     "react-dom": "^16.14.0",
+    "react-intl": "^6.3.2",
     "react-markdown": "^7.1.0",
     "react-qr-reader": "^2.2.1",
     "react-router-dom": "^5.2.0",
@@ -63,6 +64,7 @@
     "web3modal": "^1.9.1"
   },
   "devDependencies": {
+    "@formatjs/cli": "^6.0.4",
     "@testing-library/dom": "^6.12.2",
     "@types/react": "^16.9.19",
     "autoprefixer": "^10.2.4",
@@ -101,6 +103,7 @@
     "s3": "node ./scripts/s3.js",
     "ship": "yarn surge",
     "theme": "npx gulp less",
-    "watch": "node ./scripts/watch.js"
+    "watch": "node ./scripts/watch.js",
+    "translations-extract": "formatjs extract 'src/**/*.js*' --ignore='**/*.json' --out-file src/lang/extractions.json --flatten --id-interpolation-pattern '[sha512:contenthash:base64:6]' && formatjs compile 'src/lang/extractions.json' --out-file src/lang/en.json && rm src/lang/extractions.json"
   }
 }

packages/react-app/src/App.jsx

@@ -42,7 +42,7 @@ const web3Modal = new Web3Modal({
   },
 });
 
-function App() {
+function App({ setLocale }) {
   const [providers, setProviders] = useState({
     mainnet: { provider: null, isReady: false },
     local: { provider: null, isReady: false },
@@ -166,6 +166,7 @@ function App() {
     }
   }, [address, fetchUserData]);
 
+
   return (
     <BlockchainProvidersContext.Provider value={providers}>
       <div className="App">

packages/react-app/src/components/Account.jsx

@@ -19,6 +19,7 @@ import {
   LinkBox,
   LinkOverlay,
 } from "@chakra-ui/react";
+import { FormattedMessage } from "react-intl";
 import QRPunkBlockie from "./QrPunkBlockie";
 import useDisplayAddress from "../hooks/useDisplayAddress";
 import useCustomColorModes from "../hooks/useCustomColorModes";
@@ -63,7 +64,6 @@ import SignatureSignUp from "./SignatureSignUp";
 
 export default function Account({
   address,
-  connectText,
   ensProvider,
   isWalletConnected,
   loadWeb3Modal,
@@ -92,7 +92,7 @@ export default function Account({
 
   const connectWallet = (
     <Button colorScheme="green" key="loginbutton" onClick={loadWeb3Modal}>
-      {connectText || "connect"}
+      <FormattedMessage id="account.connect-wallet" defaultMessage="Connect Wallet" />
     </Button>
   );
 

packages/react-app/src/components/AnnouncementBanner.jsx

@@ -1,17 +1,28 @@
 import React from "react";
 import { chakra, useColorModeValue, Link } from "@chakra-ui/react";
+import { FormattedMessage } from "react-intl";
 
 export default function AnnouncementBanner() {
   const bannerBg = useColorModeValue("#fbf7f6", "whiteAlpha.300");
 
   return (
     <chakra.div textAlign="center" padding="20px" bgColor={bannerBg}>
-      Hey builder!! The BuidlGuidl is hosting a{" "}
-      <Link href="https://hackathon.buidlguidl.com/" fontWeight="700" color="teal.500" isExternal>
-        🏗 Scaffold-Eth 2 hackathon
-      </Link>
-      . We are giving 10 ETH away to the best projects.
-      <br /> Come join the fun and learn the latest scaffold-eth techniques! Let's build a bunch of apps!
+      <FormattedMessage
+        id="announcementBanner"
+        defaultMessage={`Hey builder!! The BuidlGuidl is hosting a
+        <Link>🏗 Scaffold-Eth 2 hackathon</Link>.
+        We are giving 10 ETH away to the best projects.
+        {br}Come join the fun and learn the latest scaffold-eth techniques!
+        Let's build a bunch of apps!`}
+        values={{
+          Link: chunks => (
+            <Link href="https://hackathon.buidlguidl.com/" fontWeight="700" color="teal.500" isExternal>
+              {chunks}
+            </Link>
+          ),
+          br: <br />,
+        }}
+      />
     </chakra.div>
   );
 }

packages/react-app/src/components/ChallengeExpandedCard.jsx

@@ -15,6 +15,7 @@ import {
   useColorModeValue,
   VStack,
 } from "@chakra-ui/react";
+import { FormattedMessage } from "react-intl";
 
 import useCustomColorModes from "../hooks/useCustomColorModes";
 import { CHALLENGE_SUBMISSION_STATUS } from "../helpers/constants";
@@ -137,15 +138,15 @@ const ChallengeExpandedCard = ({
                   fontSize={{ base: "xl", lg: "lg" }}
                   border="2px"
                   backgroundColor="sreDark.default"
-                  disabled={true}
+                  disabled
                   borderColor="sre.default"
                   py="1rem"
                   px={4}
                 >
                   <Flex justifyContent="center" alignItems="center">
                     <PadLockIcon w={6} h={6} />
                     <chakra.span color="sre.text" ml={2} textTransform="uppercase" fontWeight="medium">
-                      Locked
+                      <FormattedMessage id="general.locked" defaultMessage="Locked" />
                     </chakra.span>
                   </Flex>
                 </Button>
@@ -285,7 +286,7 @@ const ChallengeExpandedCard = ({
                     <Flex justifyContent="center">
                       <PadLockIcon w={6} h={6} />
                       <chakra.span color={primaryFontColor} ml={2} textTransform="uppercase">
-                        Locked
+                        <FormattedMessage id="general.locked" defaultMessage="Locked" />
                       </chakra.span>
                     </Flex>
                   )}
@@ -316,14 +317,14 @@ const ChallengeExpandedCard = ({
                     <Flex justifyContent="center" alignItems="center">
                       <CrossedSwordsIcon w={6} h={6} />
                       <chakra.span color={primaryFontColor} ml={2} textTransform="uppercase" fontWeight="medium">
-                        Quest
+                        <FormattedMessage id="general.quest" defaultMessage="Quest" />
                       </chakra.span>
                     </Flex>
                   ) : (
                     <Flex justifyContent="center">
                       <PadLockIcon w={6} h={6} />
                       <chakra.span color={primaryFontColor} ml={2} textTransform="uppercase" fontWeight="medium">
-                        Locked
+                        <FormattedMessage id="general.locked" defaultMessage="Locked" />
                       </chakra.span>
                     </Flex>
                   )}

packages/react-app/src/components/ChallengeReviewRow.jsx

@@ -36,9 +36,10 @@ import {
 import { useUserAddress } from "eth-hooks";
 import ReactMarkdown from "react-markdown";
 import ChakraUIRenderer from "chakra-ui-markdown-renderer";
+import { useIntl } from "react-intl";
 import Address from "./Address";
 import DateWithTooltip from "./DateWithTooltip";
-import { challengeInfo } from "../data/challenges";
+import { getChallengeInfo } from "../data/challenges";
 import { chakraMarkdownComponents } from "../helpers/chakraMarkdownTheme";
 import { runAutograderTest } from "../data/api";
 import { isBoolean } from "../helpers/strings";
@@ -52,6 +53,9 @@ export default function ChallengeReviewRow({ challenge, isLoading, approveClick,
   const address = useUserAddress(userProvider);
   const { linkColor } = useCustomColorModes();
 
+  const intl = useIntl();
+  const challengeInfo = getChallengeInfo(intl);
+
   if (!challengeInfo[challenge.id]) {
     return null;
   }

packages/react-app/src/components/ChallengeStatusTag.jsx

@@ -18,28 +18,33 @@ import { QuestionOutlineIcon } from "@chakra-ui/icons";
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import ChakraUIRenderer from "chakra-ui-markdown-renderer";
+import { FormattedMessage, useIntl } from "react-intl";
 import { CHALLENGE_SUBMISSION_STATUS } from "../helpers/constants";
 import { chakraMarkdownComponents } from "../helpers/chakraMarkdownTheme";
 
 const ChallengeStatusTag = ({ status, comment, autograding }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const intl = useIntl();
 
   let colorScheme;
   let label;
 
   switch (status) {
     case CHALLENGE_SUBMISSION_STATUS.ACCEPTED: {
       colorScheme = "green";
-      label = "Accepted";
+      label = intl.formatMessage({
+        id: "general.accepted",
+        defaultMessage: "Accepted",
+      });
       break;
     }
     case CHALLENGE_SUBMISSION_STATUS.REJECTED: {
       colorScheme = "red";
-      label = "Rejected";
+      label = intl.formatMessage({ id: "general.rejected", defaultMessage: "Rejected" });
       break;
     }
     case CHALLENGE_SUBMISSION_STATUS.SUBMITTED: {
-      label = "Submitted";
+      label = intl.formatMessage({ id: "general.submitted", defaultMessage: "Submitted" });
       break;
     }
     default:
@@ -56,7 +61,12 @@ const ChallengeStatusTag = ({ status, comment, autograding }) => {
         </Box>
         <Spacer />
         {status !== CHALLENGE_SUBMISSION_STATUS.SUBMITTED && comment && (
-          <Tooltip label="See comment">
+          <Tooltip
+            label={intl.formatMessage({
+              id: "challengeStatusTag.see-comments",
+              defaultMessage: "See comments",
+            })}
+          >
             <Button variant="ghost" onClick={onOpen} p={0} ml={1}>
               <QuestionOutlineIcon ml="2px" />
             </Button>
@@ -66,7 +76,9 @@ const ChallengeStatusTag = ({ status, comment, autograding }) => {
       <Modal isOpen={isOpen} onClose={onClose} size="xl">
         <ModalOverlay />
         <ModalContent maxW="56rem">
-          <ModalHeader>Review feedback</ModalHeader>
+          <ModalHeader>
+            <FormattedMessage id="challengeStatusTag.modal.header" defaultMessage="Review feedback" />
+          </ModalHeader>
           <ModalCloseButton />
           <ModalBody p={6} overflowX="auto">
             {autograding ? (