Update lingui

package.json

@@ -10,8 +10,8 @@
     "@floating-ui/dom": "1.6.3",
     "@floating-ui/react": "0.26.9",
     "@headlessui/react": "1.6.1",
-    "@lingui/core": "3.13.3",
-    "@lingui/react": "3.13.3",
+    "@lingui/core": "4.10.0",
+    "@lingui/react": "4.10.0",
     "@rainbow-me/rainbowkit": "2.0.2",
     "@tanstack/react-query": "5.25.0",
     "@taskworld.com/rereselect": "0.3.0",
@@ -125,9 +125,9 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
-    "@lingui/cli": "3.13.3",
-    "@lingui/loader": "3.13.3",
-    "@lingui/macro": "3.13.3",
+    "@lingui/cli": "4.10.0",
+    "@lingui/loader": "4.10.0",
+    "@lingui/macro": "4.10.0",
     "@types/react-date-range": "1.4.9",
     "buffer": "6.0.3",
     "eslint": "^8.41.0",

src/components/Exchange/PositionEditor.js

@@ -1,8 +1,10 @@
+import { useKey } from "react-use";
 import React, { useEffect, useState, useMemo, useRef } from "react";
 import useSWR from "swr";
-import { Trans, t } from "@lingui/macro";
+import { Trans, msg, t } from "@lingui/macro";
 import { ethers } from "ethers";
 import { BsArrowRight } from "react-icons/bs";
+import { useLingui } from "@lingui/react";
 
 import { USD_DECIMALS, DEPOSIT_FEE, DUST_BNB, getFundingFee, LIQUIDATION_FEE } from "lib/legacy";
 import { BASIS_POINTS_DIVISOR, BASIS_POINTS_DIVISOR_BIGINT, MAX_ALLOWED_LEVERAGE, MAX_LEVERAGE } from "config/factors";
@@ -31,8 +33,8 @@ import BuyInputSection from "components/BuyInputSection/BuyInputSection";
 import TokenIcon from "components/TokenIcon/TokenIcon";
 import useIsMetamaskMobile from "lib/wallets/useIsMetamaskMobile";
 import { MAX_METAMASK_MOBILE_DECIMALS } from "config/ui";
-import { useKey } from "react-use";
 import { bigMath } from "lib/bigmath";
+import { useLocalizedMap } from "lib/i18n";
 
 const DEPOSIT = "Deposit";
 const WITHDRAW = "Withdraw";
@@ -41,12 +43,13 @@ const MIN_ORDER_USD = expandDecimals(10, USD_DECIMALS);
 const { ZeroAddress } = ethers;
 
 const EDIT_OPTIONS_LABELS = {
-  [DEPOSIT]: t`Deposit`,
-  [WITHDRAW]: t`Withdraw`,
+  [DEPOSIT]: msg`Deposit`,
+  [WITHDRAW]: msg`Withdraw`,
 };
+
 const ERROR_TOOLTIP_MSG = {
-  [ErrorCode.InvalidLiqPrice]: t`Liquidation price would cross mark price.`,
-  [ErrorCode.InsufficientDepositAmount]: t`Deposit amount is insufficient to bring leverage below the max allowed leverage of 100x`,
+  [ErrorCode.InvalidLiqPrice]: msg`Liquidation price would cross mark price.`,
+  [ErrorCode.InsufficientDepositAmount]: msg`Deposit amount is insufficient to bring leverage below the max allowed leverage of 100x`,
 };
 
 export default function PositionEditor(props) {
@@ -88,6 +91,8 @@ export default function PositionEditor(props) {
   const positionPriceDecimal = getPriceDecimals(chainId, position?.indexToken?.symbol);
 
   const submitButtonRef = useRef(null);
+  const { _ } = useLingui();
+  const localizedEditOptionLabels = useLocalizedMap(EDIT_OPTIONS_LABELS);
 
   const routerAddress = getContract(chainId, "Router");
   const positionRouterAddress = getContract(chainId, "PositionRouter");
@@ -531,7 +536,7 @@ export default function PositionEditor(props) {
           }
           className="Tooltip-flex"
           position="top"
-          renderContent={() => ERROR_TOOLTIP_MSG[errorCode]}
+          content={_(ERROR_TOOLTIP_MSG[errorCode])}
         />
       );
     }
@@ -563,7 +568,7 @@ export default function PositionEditor(props) {
           <div>
             <Tab
               options={EDIT_OPTIONS}
-              optionLabels={EDIT_OPTIONS_LABELS}
+              optionLabels={localizedEditOptionLabels}
               option={option}
               setOption={setOption}
               onChange={resetForm}

src/components/Exchange/PositionSeller.js

@@ -1,4 +1,4 @@
-import { Trans, t } from "@lingui/macro";
+import { Trans, t, msg } from "@lingui/macro";
 import cx from "classnames";
 import { ethers } from "ethers";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -69,15 +69,16 @@ import "./PositionSeller.css";
 import { ErrorCode, ErrorDisplayType } from "./constants";
 import { useKey } from "react-use";
 import { bigMath } from "lib/bigmath";
+import { useLocalizedMap } from "lib/i18n";
 
 const { ZeroAddress } = ethers;
 const ORDER_SIZE_DUST_USD = expandDecimals(1, USD_DECIMALS - 1); // $0.10
 
 const HIGH_SPREAD_THRESHOLD = expandDecimals(1, USD_DECIMALS) / 100n; // 1%;
 
 const ORDER_OPTION_LABELS = {
-  [MARKET]: t`Market`,
-  [STOP]: t`Trigger`,
+  [MARKET]: msg`Market`,
+  [STOP]: msg`Trigger`,
 };
 
 function applySpread(amount, spread) {
@@ -232,6 +233,7 @@ export default function PositionSeller(props) {
   const [allowedSlippage, setAllowedSlippage] = useState(savedSlippageAmount);
   const positionPriceDecimal = getPriceDecimals(chainId, position?.indexToken?.symbol);
   const submitButtonRef = useRef(null);
+  const localizedOrderOptionLabels = useLocalizedMap(ORDER_OPTION_LABELS);
 
   useEffect(() => {
     setAllowedSlippage(savedSlippageAmount);
@@ -1084,7 +1086,7 @@ export default function PositionSeller(props) {
             <Tab
               options={ORDER_OPTIONS}
               option={orderOption}
-              optionLabels={ORDER_OPTION_LABELS}
+              optionLabels={localizedOrderOptionLabels}
               onChange={onOrderOptionChange}
             />
           )}

src/components/Exchange/SwapBox.js

@@ -1,4 +1,4 @@
-import { Trans, t } from "@lingui/macro";
+import { Trans, msg, t } from "@lingui/macro";
 import React, { useEffect, useMemo, useState } from "react";
 import Tooltip from "../Tooltip/Tooltip";
 import "./SwapBox.scss";
@@ -89,6 +89,7 @@ import useIsMetamaskMobile from "lib/wallets/useIsMetamaskMobile";
 import { MAX_METAMASK_MOBILE_DECIMALS } from "config/ui";
 import { useHistory } from "react-router-dom";
 import { bigMath } from "lib/bigmath";
+import { useLocalizedMap } from "lib/i18n";
 
 const SWAP_ICONS = {
   [LONG]: longImg,
@@ -117,12 +118,12 @@ function getNextAveragePrice({ size, sizeDelta, hasProfit, delta, nextPrice, isL
 }
 
 const SWAP_LABELS = {
-  [LONG]: t`Long`,
-  [SHORT]: t`Short`,
-  [SWAP]: t`Swap`,
+  [LONG]: msg`Long`,
+  [SHORT]: msg`Short`,
+  [SWAP]: msg`Swap`,
 };
 
-const ORDER_OPTION_LABELS = { [STOP]: t`Trigger`, [MARKET]: t`Market`, [LIMIT]: t`Limit` };
+const ORDER_OPTION_LABELS = { [STOP]: msg`Trigger`, [MARKET]: msg`Market`, [LIMIT]: msg`Limit` };
 
 export default function SwapBox(props) {
   const {
@@ -185,6 +186,8 @@ export default function SwapBox(props) {
   const { attachedOnChain, userReferralCode } = useUserReferralCode(signer, chainId, account);
   const { openConnectModal } = useConnectModal();
   const history = useHistory();
+  const localizedSwapLabels = useLocalizedMap(SWAP_LABELS);
+  const localizedOrderOptionLabels = useLocalizedMap(ORDER_OPTION_LABELS);
 
   let allowedSlippage = savedSlippageAmount;
   if (isHigherSlippageAllowed) {
@@ -1984,15 +1987,15 @@ export default function SwapBox(props) {
             <Tab
               icons={SWAP_ICONS}
               options={SWAP_OPTIONS}
-              optionLabels={SWAP_LABELS}
+              optionLabels={localizedSwapLabels}
               option={swapOption}
               onChange={onSwapOptionChange}
               className="Exchange-swap-option-tabs"
             />
             {flagOrdersEnabled && (
               <Tab
                 options={orderOptions}
-                optionLabels={ORDER_OPTION_LABELS}
+                optionLabels={localizedOrderOptionLabels}
                 className="Exchange-swap-order-type-tabs"
                 type="inline"
                 option={orderOption}

src/components/Glp/GlpSwap.js

@@ -15,7 +15,7 @@ import {
   USDG_DECIMALS,
 } from "lib/legacy";
 import { BASIS_POINTS_DIVISOR, BASIS_POINTS_DIVISOR_BIGINT } from "config/factors";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { useHistory } from "react-router-dom";
 import useSWR from "swr";
 import Tab from "../Tab/Tab";
@@ -157,8 +157,6 @@ function getTooltipContent(managedUsd, tokenInfo, token) {
   );
 }
 
-const tabOptions = [t`Buy GLP`, t`Sell GLP`];
-
 export default function GlpSwap(props) {
   const { isBuying, setIsBuying } = props;
   const { savedAllowedSlippage, shouldDisableValidationForTesting } = useSettings();
@@ -168,6 +166,8 @@ export default function GlpSwap(props) {
   const isMetamaskMobile = useIsMetamaskMobile();
   const swapLabel = isBuying ? "BuyGlp" : "SellGlp";
   const tabLabel = isBuying ? t`Buy GLP` : t`Sell GLP`;
+  const tabOptions = useMemo(() => [t`Buy GLP`, t`Sell GLP`], []);
+
   const { active, signer, account } = useWallet();
   const { openConnectModal } = useConnectModal();
   const { chainId } = useChainId();

src/components/NetworkDropdown/LanguageModalContent.tsx

@@ -1,16 +1,14 @@
 import { dynamicActivate, isTestLanguage, locales } from "lib/i18n";
 import { importImage } from "lib/legacy";
 import cx from "classnames";
-import { LANGUAGE_LOCALSTORAGE_KEY } from "config/localStorage";
 import checkedIcon from "img/ic_checked.svg";
 
 type Props = {
-  currentLanguage: {
-    current: string | undefined;
-  };
+  currentLanguage: string | undefined;
+  onClose: () => void;
 };
 
-export default function LanguageModalContent({ currentLanguage }: Props) {
+export default function LanguageModalContent({ currentLanguage, onClose }: Props) {
   return (
     <>
       {Object.keys(locales).map((item) => {
@@ -19,13 +17,10 @@ export default function LanguageModalContent({ currentLanguage }: Props) {
           <div
             key={item}
             className={cx("network-dropdown-menu-item  menu-item language-modal-item", {
-              active: currentLanguage.current === item,
+              active: currentLanguage === item,
             })}
             onClick={() => {
-              if (!isTestLanguage(item)) {
-                localStorage.setItem(LANGUAGE_LOCALSTORAGE_KEY, item);
-              }
-              dynamicActivate(item);
+              dynamicActivate(item).then(onClose);
             }}
           >
             <div className="menu-item-group">
@@ -35,7 +30,7 @@ export default function LanguageModalContent({ currentLanguage }: Props) {
               <span className="language-item">{locales[item]}</span>
             </div>
             <div className="network-dropdown-menu-item-img">
-              {currentLanguage.current === item && <img src={checkedIcon} alt={locales[item]} />}
+              {currentLanguage === item && <img src={checkedIcon} alt={locales[item]} />}
             </div>
           </div>
         );

src/components/NetworkDropdown/LanguagePopupHome.tsx

@@ -1,18 +1,21 @@
-import React, { useRef, useState } from "react";
-import ModalWithPortal from "../Modal/ModalWithPortal";
 import { t } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
 import cx from "classnames";
-import "./NetworkDropdown.css";
 import language24Icon from "img/ic_language24.svg";
 import { isHomeSite } from "lib/legacy";
-import { defaultLocale } from "lib/i18n";
-import { LANGUAGE_LOCALSTORAGE_KEY } from "config/localStorage";
+import { useCallback, useState } from "react";
+import ModalWithPortal from "../Modal/ModalWithPortal";
 import LanguageModalContent from "./LanguageModalContent";
+import "./NetworkDropdown.css";
 
 export default function LanguagePopupHome() {
-  const currentLanguage = useRef(localStorage.getItem(LANGUAGE_LOCALSTORAGE_KEY) || defaultLocale);
+  const currentLanguage = useLingui().i18n.locale;
   const [isLanguageModalOpen, setIsLanguageModalOpen] = useState(false);
 
+  const handleLanguageModalClose = useCallback(() => {
+    setIsLanguageModalOpen(false);
+  }, []);
+
   return (
     <>
       <div className="App-header-network App-header-language" onClick={() => setIsLanguageModalOpen(true)}>
@@ -29,7 +32,7 @@ export default function LanguagePopupHome() {
         setIsVisible={setIsLanguageModalOpen}
         label={t`Select Language`}
       >
-        <LanguageModalContent currentLanguage={currentLanguage} />
+        <LanguageModalContent currentLanguage={currentLanguage} onClose={handleLanguageModalClose} />
       </ModalWithPortal>
     </>
   );

src/components/NetworkDropdown/NetworkDropdown.tsx

@@ -1,14 +1,13 @@
 import { Menu } from "@headlessui/react";
 import { Trans, t } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
 import cx from "classnames";
 import noop from "lodash/noop";
-import { useRef, useState } from "react";
+import { useCallback, useState } from "react";
 import { HiDotsVertical } from "react-icons/hi";
 
 import { getIcon } from "config/icons";
-import { LANGUAGE_LOCALSTORAGE_KEY } from "config/localStorage";
 import { useChainId } from "lib/chains";
-import { defaultLocale } from "lib/i18n";
 import { switchNetwork } from "lib/wallets";
 import useWallet from "lib/wallets/useWallet";
 
@@ -25,13 +24,17 @@ const LANGUAGE_MODAL_KEY = "LANGUAGE";
 const NETWORK_MODAL_KEY = "NETWORK";
 
 export default function NetworkDropdown(props) {
-  const currentLanguage = useRef(localStorage.getItem(LANGUAGE_LOCALSTORAGE_KEY) || defaultLocale);
+  const currentLanguage = useLingui().i18n.locale;
   const [activeModal, setActiveModal] = useState<string | null>(null);
 
+  const handleLanguageModalClose = useCallback(() => {
+    setActiveModal(null);
+  }, []);
+
   function getModalContent(modalName) {
     switch (modalName) {
       case LANGUAGE_MODAL_KEY:
-        return <LanguageModalContent currentLanguage={currentLanguage} />;
+        return <LanguageModalContent currentLanguage={currentLanguage} onClose={handleLanguageModalClose} />;
       case NETWORK_MODAL_KEY:
         return (
           <NetworkModalContent

src/components/Synthetics/Claims/ClaimHistoryRow/ClaimCollateralHistoryRow.tsx

@@ -1,4 +1,6 @@
-import { t } from "@lingui/macro";
+import type { MessageDescriptor } from "@lingui/core";
+import { msg } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
 import { Fragment, useCallback, useMemo } from "react";
 
 import { getExplorerUrl } from "config/chains";
@@ -23,16 +25,17 @@ export type ClaimCollateralHistoryRowProps = {
   claimAction: ClaimCollateralAction;
 };
 
-export const claimCollateralEventTitles: Record<ClaimCollateralAction["eventName"], string> = {
-  [ClaimType.ClaimFunding]: t`Claim Funding Fees`,
-  [ClaimType.ClaimPriceImpact]: t`Claim Price Impact Rebates`,
+export const claimCollateralEventTitles: Record<ClaimCollateralAction["eventName"], MessageDescriptor> = {
+  [ClaimType.ClaimFunding]: msg`Claim Funding Fees`,
+  [ClaimType.ClaimPriceImpact]: msg`Claim Price Impact Rebates`,
 };
 
 export function ClaimCollateralHistoryRow(p: ClaimCollateralHistoryRowProps) {
+  const { _ } = useLingui();
   const { chainId } = useChainId();
   const { claimAction } = p;
 
-  const eventTitle = claimCollateralEventTitles[claimAction.eventName];
+  const eventTitle = useMemo(() => _(claimCollateralEventTitles[claimAction.eventName]), [_, claimAction.eventName]);
 
   const marketNamesJoined = useMemo(() => {
     return claimAction.claimItems