Localized strings on dashboard and added Portuguese translations

client/src/components/elapsed-time.js

@@ -3,7 +3,18 @@ const MINUTES_PER_DAY = 24 * 60;
 const MINUTES_PER_YEAR = 365 * MINUTES_PER_DAY;
 const MINUTES_PER_MONTH = MINUTES_PER_YEAR / 12;
 
-export const formatDuration = (durationMilliseconds, compact = false) => {
+const passthrough = (parts, ...values) =>
+  parts.reduce(
+    (result, part, index) =>
+      result + part + (index < values.length ? values[index] : ""),
+    "",
+  );
+
+export const formatDuration = (
+  durationMilliseconds,
+  compact = false,
+  t = passthrough,
+) => {
   const diffMinutes = Math.max(
     0,
     Math.floor(durationMilliseconds / UPDATE_INTERVAL_MS),
@@ -15,16 +26,16 @@ export const formatDuration = (durationMilliseconds, compact = false) => {
     minutesAfterYears - months * MINUTES_PER_MONTH,
   );
   const units = [
-    ["YEAR", "YEARS", "y", years],
-    ["MONTH", "MONTHS", "mo", months],
-    ["DAY", "DAYS", "d", Math.floor(minutesAfterMonths / MINUTES_PER_DAY)],
+    [t`YEAR`, t`YEARS`, t`y`, years],
+    [t`MONTH`, t`MONTHS`, t`mo`, months],
+    [t`DAY`, t`DAYS`, t`d`, Math.floor(minutesAfterMonths / MINUTES_PER_DAY)],
     [
-      "HOUR",
-      "HOURS",
-      "h",
+      t`HOUR`,
+      t`HOURS`,
+      t`h`,
       Math.floor((minutesAfterMonths % MINUTES_PER_DAY) / 60),
     ],
-    ["MINUTE", "MINUTES", "m", minutesAfterMonths % 60],
+    [t`MINUTE`, t`MINUTES`, t`m`, minutesAfterMonths % 60],
   ];
   const parts = units
     .filter((unit) => unit[3] > 0)
@@ -35,56 +46,63 @@ export const formatDuration = (durationMilliseconds, compact = false) => {
         : `${value} ${value === 1 ? singular : plural}`,
     );
 
-  if (compact) return parts.length ? parts.join(" ") : "< 1m";
+  if (compact) return parts.length ? parts.join(" ") : t`< 1m`;
 
-  return parts.length ? parts.join(" ") : "< 1 MINUTE";
+  return parts.length ? parts.join(" ") : t`< 1 MINUTE`;
 };
 
-const formatElapsedTime = (timestamp, compact) => {
+const formatElapsedTime = (timestamp, compact, t) => {
   const fromDate =
     timestamp < 1e12 ? new Date(timestamp * 1000) : new Date(timestamp);
-  const duration = formatDuration(new Date() - fromDate, compact);
+  const duration = formatDuration(new Date() - fromDate, compact, t);
 
   if (compact) return duration;
 
-  return `${duration} AGO`;
+  return t`${duration} AGO`;
 };
 
 const updateElapsedTime = (element) => {
   element.textContent = formatElapsedTime(
     element.elapsedTimeTimestamp,
     element.elapsedTimeCompact,
+    element.elapsedTimeTranslator,
   );
 };
 
-const startElapsedTime = (vnode, timestamp, compact) => {
+const startElapsedTime = (vnode, timestamp, compact, t) => {
   vnode.elm.elapsedTimeTimestamp = timestamp;
   vnode.elm.elapsedTimeCompact = compact;
+  vnode.elm.elapsedTimeTranslator = t;
   updateElapsedTime(vnode.elm);
   vnode.elm.elapsedTimeInterval = window.setInterval(
     () => updateElapsedTime(vnode.elm),
     UPDATE_INTERVAL_MS,
   );
 };
 
-const patchElapsedTime = (_, vnode, timestamp, compact) => {
+const patchElapsedTime = (_, vnode, timestamp, compact, t) => {
   vnode.elm.elapsedTimeTimestamp = timestamp;
   vnode.elm.elapsedTimeCompact = compact;
+  vnode.elm.elapsedTimeTranslator = t;
   updateElapsedTime(vnode.elm);
 };
 
 const stopElapsedTime = (vnode) => {
   window.clearInterval(vnode.elm.elapsedTimeInterval);
 };
 
-export const ElapsedTime = ({ timestamp, compact = false } = {}) => (
+export const ElapsedTime = ({
+  timestamp,
+  compact = false,
+  t = passthrough,
+} = {}) => (
   <span
-    hook-insert={(vnode) => startElapsedTime(vnode, timestamp, compact)}
+    hook-insert={(vnode) => startElapsedTime(vnode, timestamp, compact, t)}
     hook-postpatch={(oldVnode, vnode) =>
-      patchElapsedTime(oldVnode, vnode, timestamp, compact)
+      patchElapsedTime(oldVnode, vnode, timestamp, compact, t)
     }
     hook-destroy={stopElapsedTime}
   >
-    {formatElapsedTime(timestamp, compact)}
+    {formatElapsedTime(timestamp, compact, t)}
   </span>
 );

client/src/components/high-value-assets.js

@@ -55,7 +55,7 @@ export const highValueAssets = (t, assetData = {}) => {
               </div>
               <p className="high-value-assets-listing-name">{asset.name}</p>
               <p className="high-value-assets-circulating-dollar-amount">
-                {formatDollarAmount(dollarAmount)}
+                {formatDollarAmount(dollarAmount, t)}
               </p>
             </a>
           );

client/src/lib/high-value-assets.js

@@ -1,4 +1,5 @@
 const value = n => n == null ? 0 : Number(n)
+    , passthrough = strings => strings[0]
 
 export const getPriceFeedApiBase = (apiBase, fallbackOrigin) => {
   let url
@@ -34,8 +35,8 @@ export const calculateCirculatingDollarAmount = (asset, price) => {
   return Number.isFinite(dollarAmount) ? dollarAmount : null
 }
 
-export const formatDollarAmount = amount => {
-  if (!Number.isFinite(amount)) return 'N/A'
+export const formatDollarAmount = (amount, t=passthrough) => {
+  if (!Number.isFinite(amount)) return t`N/A`
 
   const units = [
     [ 1e12, 'T' ],

client/src/views/blocks.js

@@ -77,7 +77,7 @@ export const blks = (blocks, viewMore, { t, ...S }) => {
                   <a
                     className="blocks-table-card-link"
                     href={`block/${b.id}`}
-                    aria-label={`View block ${b.height}`}
+                    aria-label={t`View block ${b.height}`}
                   ></a>
                   <div className="block-icon-container">
                     <BlockIcon className="block-table-entry-icon" />
@@ -95,12 +95,12 @@ export const blks = (blocks, viewMore, { t, ...S }) => {
                           className="table-copy-button code-button-btn"
                           type="button"
                           data-clipboardCopy={"" + b.height}
-                          aria-label={`Copy block number ${b.height}`}
+                          aria-label={t`Copy block number ${b.height}`}
                         >
                           <CopyIcon />
                         </button>
                         {index === 0 ? (
-                          <div className="latest-block-badge">Latest</div>
+                          <div className="latest-block-badge">{t`Latest`}</div>
                         ) : (
                           ""
                         )}
@@ -111,15 +111,15 @@ export const blks = (blocks, viewMore, { t, ...S }) => {
                         title={new Date(b.timestamp * 1000)}
                       >
                         <ClockIcon className="block-timestamp-icon" />
-                        {formatRelativeTime(b.timestamp)?.toUpperCase()}
+                        {formatRelativeTime(b.timestamp, t)?.toUpperCase()}
                       </p>
                     </div>
                     <div className="block-card-body">
                       <InfoStat
-                        title="TRANSACTIONS"
+                        title={t`TRANSACTIONS`}
                         value={formatNumber(b.tx_count).toLocaleString()}
                       />
-                      <InfoStat title="SIZE" value={formatVMB(b.size, "MB")} />
+                      <InfoStat title={t`SIZE`} value={formatVMB(b.size, "MB")} />
                     </div>
 
                     <div className="block-usage">
@@ -129,7 +129,7 @@ export const blks = (blocks, viewMore, { t, ...S }) => {
                         </p>
                         <Tooltip
                           iconSrc={`${staticRoot}img/icons/tooltip.svg`}
-                          text="How full this block is."
+                          text={t`How full this block is.`}
                         />
                       </div>
                       <div className="usage-bar">