Localization

packages/web/components/alert/toast.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { FunctionComponent } from "react";
+import { useTranslation } from "react-multi-lang";
 import { toast, ToastOptions } from "react-toastify";
 import { Alert, ToastType } from "./types";
 
@@ -48,63 +49,72 @@ export function displayToast(
   }
 }
 
-const LoadingToast: FunctionComponent<Alert> = ({ message, caption }) => (
-  <div className="flex items-center md:gap-2 gap-3">
-    <div className="flex items-center animate-spin h-8 w-8 shrink-0">
-      <Image
-        alt="loading"
-        src="/icons/loading-blue.svg"
-        height={32}
-        width={32}
-      />
+const LoadingToast: FunctionComponent<Alert> = ({ message, caption }) => {
+  const t = useTranslation();
+  return (
+    <div className="flex items-center md:gap-2 gap-3">
+      <div className="flex items-center animate-spin h-8 w-8 shrink-0">
+        <Image
+          alt="loading"
+          src="/icons/loading-blue.svg"
+          height={32}
+          width={32}
+        />
+      </div>
+      <div className="text-white-high">
+        <h6 className="mb-2 md:text-base text-lg">{t(message)}</h6>
+        {caption && <p className="md:text-xs text-sm">{t(caption)}</p>}
+      </div>
     </div>
-    <div className="text-white-high">
-      <h6 className="mb-2 md:text-base text-lg">{message}</h6>
-      {caption && <p className="md:text-xs text-sm">{caption}</p>}
-    </div>
-  </div>
-);
+  );
+};
 
-const ErrorToast: FunctionComponent<Alert> = ({ message, caption }) => (
-  <div className="flex items-center md:gap-2 gap-3">
-    <div className="w-8 h-8 shrink-0">
-      <Image alt="failed" src="/icons/error-x.svg" height={32} width={32} />
-    </div>
-    <div className="text-white-high">
-      <h6 className="mb-2 md:text-base text-lg">{message}</h6>
-      {caption && <p className="md:text-xs text-sm">{caption}</p>}
+const ErrorToast: FunctionComponent<Alert> = ({ message, caption }) => {
+  const t = useTranslation();
+  return (
+    <div className="flex items-center md:gap-2 gap-3">
+      <div className="w-8 h-8 shrink-0">
+        <Image alt="failed" src="/icons/error-x.svg" height={32} width={32} />
+      </div>
+      <div className="text-white-high">
+        <h6 className="mb-2 md:text-base text-lg">{t(message)}</h6>
+        {caption && <p className="md:text-xs text-sm">{t(caption)}</p>}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 const SuccessToast: FunctionComponent<Alert> = ({
   message,
   learnMoreUrl,
   learnMoreUrlCaption,
-}) => (
-  <div className="flex items-center md:gap-2 gap-3">
-    <div className="w-8 h-8 shrink-0">
-      <Image alt="b" src="/icons/check-circle.svg" height={32} width={32} />
-    </div>
-    <div className="text-white-high">
-      <h6 className="mb-2 md:text-base text-lg">{message}</h6>
-      {learnMoreUrl && (
-        <a
-          target="__blank"
-          href={learnMoreUrl}
-          className="md:text-xs text-sm inline hover:opacity-75 cursor-pointer"
-        >
-          {learnMoreUrlCaption ?? "Learn more"}
-          <div className="inline-block ml-2 mb-0.75">
-            <Image
-              alt="link"
-              src="/icons/link-deco.svg"
-              height={12}
-              width={12}
-            />
-          </div>
-        </a>
-      )}
+}) => {
+  const t = useTranslation();
+  return (
+    <div className="flex items-center md:gap-2 gap-3">
+      <div className="w-8 h-8 shrink-0">
+        <Image alt="b" src="/icons/check-circle.svg" height={32} width={32} />
+      </div>
+      <div className="text-white-high">
+        <h6 className="mb-2 md:text-base text-lg">{t(message)}</h6>
+        {learnMoreUrl && (
+          <a
+            target="__blank"
+            href={learnMoreUrl}
+            className="md:text-xs text-sm inline hover:opacity-75 cursor-pointer"
+          >
+            {learnMoreUrlCaption ?? t("Learn more")}
+            <div className="inline-block ml-2 mb-0.75">
+              <Image
+                alt="link"
+                src="/icons/link-deco.svg"
+                height={12}
+                width={12}
+              />
+            </div>
+          </a>
+        )}
+      </div>
     </div>
-  </div>
-);
+  );
+};

packages/web/components/buttons/show-more.tsx

@@ -3,26 +3,30 @@ import { FunctionComponent } from "react";
 import classNames from "classnames";
 import { ToggleProps } from "../control";
 import { CustomClasses } from "../types";
+import { useTranslation } from "react-multi-lang";
 
 export const ShowMoreButton: FunctionComponent<ToggleProps & CustomClasses> = ({
   isOn,
   onToggle,
   className,
-}) => (
-  <button
-    className={classNames("flex flex-col gap-1 button", className)}
-    onClick={() => onToggle(isOn)}
-  >
-    <span className="body2 md:caption text-white-mid">
-      {isOn ? "View less" : "View all"}
-    </span>
-    <div className="m-auto">
-      <Image
-        alt={isOn ? "view less" : "view all"}
-        src={isOn ? "/icons/chevron-up.svg" : "/icons/chevron-down.svg"}
-        height={14}
-        width={14}
-      />
-    </div>
-  </button>
-);
+}) => {
+  const t = useTranslation();
+  return (
+    <button
+      className={classNames("flex flex-col gap-1 button", className)}
+      onClick={() => onToggle(isOn)}
+    >
+      <span className="body2 md:caption text-white-mid">
+        {isOn ? t("components.show.less") : t("components.show.more")}
+      </span>
+      <div className="m-auto">
+        <Image
+          alt={isOn ? t("components.show.less") : t("components.show.more")}
+          src={isOn ? "/icons/chevron-up.svg" : "/icons/chevron-down.svg"}
+          height={14}
+          width={14}
+        />
+      </div>
+    </button>
+  );
+};

packages/web/components/cards/go-superfluid.tsx

@@ -1,30 +1,36 @@
 import { FunctionComponent } from "react";
+import { useTranslation } from "react-multi-lang";
+import { Formatted } from "../localization";
 import { MobileProps } from "../types";
 
 export const GoSuperfluidCard: FunctionComponent<
   {
     goSuperfluid: () => void;
   } & MobileProps
-> = ({ goSuperfluid, isMobile = false }) => (
-  <div className="mt-5 bg-card p-5 rounded-2xl flex md:flex-col gap-2 items-center justify-between font-body">
-    <div>
-      <div className="text-base font-semibold text-white-high">
-        {isMobile
-          ? "You're not Superfluid Staking"
-          : "Superfluid Staking Inactive"}
-      </div>
-      <div className="mt-2 text-sm font-medium text-iconDefault">
-        You have superfluid eligible bonded liquidity.
-        <br />
-        Choose a Superfluid Staking validator to earn additional rewards.
+> = ({ goSuperfluid, isMobile = false }) => {
+  const t = useTranslation();
+  return (
+    <div className="mt-5 bg-card p-5 rounded-2xl flex md:flex-col gap-2 items-center justify-between font-body">
+      <div>
+        <div className="text-base font-semibold text-white-high">
+          {isMobile
+            ? t("pool.goSuperfluid.titleMobile")
+            : t("pool.goSuperfluid.title")}
+        </div>
+        <div className="mt-2 text-sm font-medium text-iconDefault">
+          <Formatted
+            translationKey="pool.goSuperfluid.info"
+            components={{ "<br/>": <br /> }}
+          />
+        </div>
       </div>
+      <button
+        className="button bg-superfluid rounded-lg py-2 px-8 text-white-high font-semibold text-sm shadow-elevation-04dp"
+        type="button"
+        onClick={goSuperfluid}
+      >
+        {t("pool.goSuperfluid.button")}
+      </button>
     </div>
-    <button
-      className="button bg-superfluid rounded-lg py-2 px-8 text-white-high font-semibold text-sm shadow-elevation-04dp"
-      type="button"
-      onClick={goSuperfluid}
-    >
-      Go Superfluid
-    </button>
-  </div>
-);
+  );
+};

packages/web/components/cards/pool-card.tsx

@@ -7,6 +7,7 @@ import { PoolAssetInfo } from "../assets/types";
 import { Metric } from "../types";
 import { CustomClasses } from "../types";
 import { useWindowSize } from "../../hooks";
+import { useTranslation } from "react-multi-lang";
 
 export const PoolCard: FunctionComponent<
   {
@@ -28,6 +29,7 @@ export const PoolCard: FunctionComponent<
     className,
   }) => {
     const { isMobile } = useWindowSize();
+    const t = useTranslation();
 
     // <Link /> notes: turn off prefetch to avoid loading tons of pools and lagging the client, many pools will be in viewport. They will still be fetched on hover.
     // See : https://nextjs.org/docs/api-reference/next/link
@@ -56,7 +58,7 @@ export const PoolCard: FunctionComponent<
                     assetDenoms={poolAssets.map((asset) => asset.coinDenom)}
                   />
                   <span className="caption text-white-disabled">
-                    Pool #{poolId}
+                    {t("pools.poolId", { id: poolId })}
                   </span>
                 </div>
               </div>
@@ -102,7 +104,9 @@ export const PoolCard: FunctionComponent<
                   size="md"
                   assetDenoms={poolAssets.map((asset) => asset.coinDenom)}
                 />
-                <div className="subtitle1 text-white-mid">{`Pool #${poolId}`}</div>
+                <div className="subtitle1 text-white-mid">
+                  {t("pools.poolId", { id: poolId })}
+                </div>
               </div>
             </div>
             <div className="flex place-content-between">

packages/web/components/cards/pool-gauge-bonus.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from "react";
+import { useTranslation } from "react-multi-lang";
 import { MetricLoader } from "../loaders";
 import { LoadingProps, MobileProps } from "../types";
 
@@ -9,30 +10,44 @@ export const PoolGaugeBonusCard: FunctionComponent<
     remainingEpochs?: string;
   } & LoadingProps &
     MobileProps
-> = ({ bonusValue, days, remainingEpochs, isLoading, isMobile = false }) => (
-  <div className="flex flex-col w-full min-w-[220px] gap-1 bg-card rounded-xl md:pl-[30%] md:p-3.5 py-5 px-7 border border-white-mid">
-    {isMobile ? (
-      <span className="subtitle1">{`${days} bonus reward`}</span>
-    ) : (
-      <h5>Bonus bonding reward</h5>
-    )}
-    {!isMobile && (
-      <p className="text-white-mid">
-        <MetricLoader isLoading={isLoading}>
-          This pool bonding over {days ?? "0"} will earn additional bonding
-          incentives for {remainingEpochs ?? "0"} days.
+> = ({ bonusValue, days, remainingEpochs, isLoading, isMobile = false }) => {
+  const t = useTranslation();
+
+  return (
+    <div className="flex flex-col w-full min-w-[220px] gap-1 bg-card rounded-xl md:pl-[30%] md:p-3.5 py-5 px-7 border border-white-mid">
+      {isMobile ? (
+        <span className="subtitle1">
+          {t("pool.gauges.bonus.titleMobile", { days: days ?? "0" })}
+        </span>
+      ) : (
+        <h5>{t("pool.gauges.bonus.title")}</h5>
+      )}
+      {!isMobile && (
+        <p className="text-white-mid">
+          <MetricLoader isLoading={isLoading}>
+            {t("pool.gauges.bonus.info", {
+              days: days ?? "0",
+              remainingEpochs: remainingEpochs ?? "0",
+            })}
+          </MetricLoader>
+        </p>
+      )}
+      <p className="font-caption text-lg text-secondary-200 md:subtitle2">
+        <MetricLoader
+          className="h-6 md:h-4"
+          isLoading={isLoading || !bonusValue}
+        >
+          {isMobile
+            ? t("pool.gauges.bonus.remainingMobile")
+            : t("pool.gauges.bonus.remaining")}{" "}
+          {bonusValue ?? "0"}
         </MetricLoader>
       </p>
-    )}
-    <p className="font-caption text-lg text-secondary-200 md:subtitle2">
-      <MetricLoader className="h-6 md:h-4" isLoading={isLoading || !bonusValue}>
-        {isMobile ? "Bonus:" : "Remaining:"} {bonusValue ?? "0"}
-      </MetricLoader>
-    </p>
-    {isMobile && remainingEpochs && !isLoading && (
-      <span className="subtitle2 text-secondary-200">
-        {remainingEpochs} days remaining
-      </span>
-    )}
-  </div>
-);
+      {isMobile && remainingEpochs && !isLoading && (
+        <span className="subtitle2 text-secondary-200">
+          {t("pool.gauges.bonus.remainingEpochs", { remainingEpochs })}
+        </span>
+      )}
+    </div>
+  );
+};