fix(staking): localize numbers & dates the best English variant

Author: cprussin

apps/staking/package.json

@@ -34,6 +34,7 @@
     "@solana/wallet-adapter-react-ui": "^0.9.27",
     "@solana/wallet-adapter-wallets": "0.19.10",
     "@solana/web3.js": "^1.95.2",
+    "bcp-47": "^2.1.0",
     "clsx": "^2.1.1",
     "dnum": "^2.13.1",
     "framer-motion": "^11.3.8",

apps/staking/src/api.ts

@@ -1,6 +1,3 @@
-// TODO remove these disables when moving off the mock APIs
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
 import type { HermesClient, PublisherCaps } from "@pythnetwork/hermes-client";
 import {
   epochToDate,
@@ -86,68 +83,6 @@ export type StakeDetails = ReturnType<
   (typeof StakeDetails)[keyof typeof StakeDetails]
 >;
 
-export enum AccountHistoryItemType {
-  AddTokens,
-  LockedDeposit,
-  Withdrawal,
-  RewardsCredited,
-  Claim,
-  Slash,
-  Unlock,
-  StakeCreated,
-  StakeFinishedWarmup,
-  UnstakeCreated,
-  UnstakeExitedCooldown,
-}
-
-const AccountHistoryAction = {
-  AddTokens: () => ({ type: AccountHistoryItemType.AddTokens as const }),
-  LockedDeposit: (unlockDate: Date) => ({
-    type: AccountHistoryItemType.LockedDeposit as const,
-    unlockDate,
-  }),
-  Withdrawal: () => ({ type: AccountHistoryItemType.Withdrawal as const }),
-  RewardsCredited: () => ({
-    type: AccountHistoryItemType.RewardsCredited as const,
-  }),
-  Claim: () => ({ type: AccountHistoryItemType.Claim as const }),
-  Slash: (publisherName: string) => ({
-    type: AccountHistoryItemType.Slash as const,
-    publisherName,
-  }),
-  Unlock: () => ({ type: AccountHistoryItemType.Unlock as const }),
-  StakeCreated: (details: StakeDetails) => ({
-    type: AccountHistoryItemType.StakeCreated as const,
-    details,
-  }),
-  StakeFinishedWarmup: (details: StakeDetails) => ({
-    type: AccountHistoryItemType.StakeFinishedWarmup as const,
-    details,
-  }),
-  UnstakeCreated: (details: StakeDetails) => ({
-    type: AccountHistoryItemType.UnstakeCreated as const,
-    details,
-  }),
-  UnstakeExitedCooldown: (details: StakeDetails) => ({
-    type: AccountHistoryItemType.UnstakeExitedCooldown as const,
-    details,
-  }),
-};
-
-export type AccountHistoryAction = ReturnType<
-  (typeof AccountHistoryAction)[keyof typeof AccountHistoryAction]
->;
-
-export type AccountHistory = {
-  timestamp: Date;
-  action: AccountHistoryAction;
-  amount: bigint;
-  accountTotal: bigint;
-  availableToWithdraw: bigint;
-  availableRewards: bigint;
-  locked: bigint;
-}[];
-
 export const getAllStakeAccountAddresses = async (
   client: PythStakingClient,
 ): Promise<PublicKey[]> => client.getAllStakeAccountPositions();
@@ -325,14 +260,6 @@ const getPublisherCap = (publisherCaps: PublisherCaps, publisher: PublicKey) =>
     )?.cap ?? 0,
   );
 
-export const loadAccountHistory = async (
-  _client: PythStakingClient,
-  _stakeAccount: PublicKey,
-): Promise<AccountHistory> => {
-  await new Promise((resolve) => setTimeout(resolve, MOCK_DELAY));
-  return mkMockHistory();
-};
-
 export const createStakeAccountAndDeposit = async (
   client: PythStakingClient,
   amount: bigint,
@@ -462,44 +389,3 @@ export const optPublisherOut = async (
 ): Promise<void> => {
   await client.removePublisherStakeAccount(stakeAccount, publisherKey);
 };
-
-const MOCK_DELAY = 500;
-
-const mkMockHistory = (): AccountHistory => [
-  {
-    timestamp: new Date("2024-06-10T00:00:00Z"),
-    action: AccountHistoryAction.AddTokens(),
-    amount: 2_000_000n,
-    accountTotal: 2_000_000n,
-    availableRewards: 0n,
-    availableToWithdraw: 2_000_000n,
-    locked: 0n,
-  },
-  {
-    timestamp: new Date("2024-06-14T02:00:00Z"),
-    action: AccountHistoryAction.RewardsCredited(),
-    amount: 200n,
-    accountTotal: 2_000_000n,
-    availableRewards: 200n,
-    availableToWithdraw: 2_000_000n,
-    locked: 0n,
-  },
-  {
-    timestamp: new Date("2024-06-16T08:00:00Z"),
-    action: AccountHistoryAction.Claim(),
-    amount: 200n,
-    accountTotal: 2_000_200n,
-    availableRewards: 0n,
-    availableToWithdraw: 2_000_200n,
-    locked: 0n,
-  },
-  {
-    timestamp: new Date("2024-06-16T08:00:00Z"),
-    action: AccountHistoryAction.Slash("Cboe"),
-    amount: 1000n,
-    accountTotal: 1_999_200n,
-    availableRewards: 0n,
-    availableToWithdraw: 1_999_200n,
-    locked: 0n,
-  },
-];

apps/staking/src/components/AccountHistory/index.tsx

@@ -17,6 +17,7 @@ import background from "./background.png";
 import { type States, StateType as ApiStateType } from "../../hooks/use-api";
 import { StateType, useAsync } from "../../hooks/use-async";
 import { Button } from "../Button";
+import { Date } from "../Date";
 import { ModalDialog } from "../ModalDialog";
 import { Tokens } from "../Tokens";
 import { TransferButton } from "../TransferButton";
@@ -82,7 +83,7 @@ export const AccountSummary = ({
           {lastSlash && (
             <p className="max-w-48 text-sm text-red-600">
               <Tokens>{lastSlash.amount}</Tokens> were slashed on{" "}
-              {lastSlash.date.toLocaleString()}
+              <Date options="time">{lastSlash.date}</Date>
             </p>
           )}
         </div>
@@ -112,7 +113,7 @@ export const AccountSummary = ({
                       {unlockSchedule.map((unlock, i) => (
                         <tr key={i}>
                           <td className="pr-12 text-xs opacity-80 sm:text-sm">
-                            {unlock.date.toLocaleString()}
+                            <Date options="time">{unlock.date}</Date>
                           </td>
                           <td>
                             <Tokens>{unlock.amount}</Tokens>
@@ -238,7 +239,7 @@ export const AccountSummary = ({
                   <>
                     Rewards expire one year from the epoch in which they were
                     earned. You have rewards expiring on{" "}
-                    {expiringRewards.toLocaleDateString()}.
+                    <Date>{expiringRewards}</Date>.
                   </>
                 ),
               })}
@@ -311,13 +312,13 @@ const OisUnstake = ({
           {cooldown > 0n && (
             <div className="mt-2 text-xs text-neutral-500">
               <Tokens>{cooldown}</Tokens> end{" "}
-              {epochToDate(currentEpoch + 2n).toLocaleString()}
+              <Date options="time">{epochToDate(currentEpoch + 2n)}</Date>
             </div>
           )}
           {cooldown2 > 0n && (
             <div className="mt-2 text-xs text-neutral-500">
               <Tokens>{cooldown2}</Tokens> end{" "}
-              {epochToDate(currentEpoch + 1n).toLocaleString()}
+              <Date options="time">{epochToDate(currentEpoch + 1n)}</Date>
             </div>
           )}
         </>
@@ -439,7 +440,7 @@ const ClaimDialog = ({
               <div className="text-sm">
                 Rewards expire one year from the epoch in which they were
                 earned. You have rewards expiring on{" "}
-                {expiringRewards.toLocaleDateString()}.
+                <Date>{expiringRewards}</Date>.
               </div>
             </div>
           )}

apps/staking/src/components/AccountSummary/index.tsx

@@ -0,0 +1,28 @@
+import { useMemo, type HTMLProps } from "react";
+import { useDateFormatter, type DateFormatterOptions } from "react-aria";
+
+type Props = Omit<HTMLProps<HTMLSpanElement>, "children"> & {
+  children: Date;
+  options?: DateFormatterOptions | undefined | "time";
+};
+
+export const Date = ({ children, options, ...props }: Props) => {
+  const formatter = useDateFormatter(
+    options === "time"
+      ? {
+          year: "numeric",
+          month: "numeric",
+          day: "numeric",
+          hour: "numeric",
+          minute: "numeric",
+          second: "numeric",
+        }
+      : options,
+  );
+  const value = useMemo(
+    () => formatter.format(children),
+    [formatter, children],
+  );
+
+  return <span {...props}>{value}</span>;
+};