feat(proposals): use i18next (#5284)

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/governance/src/routes/proposals/components/propose/proposal-form-transaction-dialog.tsx

@@ -1,7 +1,7 @@
 import {
   getProposalDialogIcon,
   getProposalDialogIntent,
-  getProposalDialogTitle,
+  useGetProposalDialogTitle,
 } from '@vegaprotocol/proposals';
 import type { ProposalEventFieldsFragment } from '@vegaprotocol/proposals';
 import type { DialogProps } from '@vegaprotocol/proposals';
@@ -15,6 +15,7 @@ export const ProposalFormTransactionDialog = ({
   finalizedProposal,
   TransactionDialog,
 }: ProposalFormTransactionDialogProps) => {
+  const title = useGetProposalDialogTitle(finalizedProposal?.state);
   // Render a custom complete UI if the proposal was rejected otherwise
   // pass undefined so that the default vega transaction dialog UI gets used
   const completeContent = finalizedProposal?.rejectionReason ? (
@@ -24,7 +25,7 @@ export const ProposalFormTransactionDialog = ({
   return (
     <div data-testid="proposal-transaction-dialog">
       <TransactionDialog
-        title={getProposalDialogTitle(finalizedProposal?.state)}
+        title={title}
         intent={getProposalDialogIntent(finalizedProposal?.state)}
         icon={getProposalDialogIcon(finalizedProposal?.state)}
         content={{

libs/i18n/src/index.ts

@@ -13,6 +13,7 @@ import en_governance from './locales/en/governance.json';
 import en_trading from './locales/en/trading.json';
 import en_markets from './locales/en/markets.json';
 import en_web3 from './locales/en/web3.json';
+import en_proposals from './locales/en/proposals.json';
 import en_positions from './locales/en/positions.json';
 import en_trades from './locales/en/trading.json';
 import en_ui_toolkit from './locales/en/ui-toolkit.json';
@@ -33,6 +34,7 @@ export const locales = {
     markets: en_markets,
     web3: en_web3,
     positions: en_positions,
+    proposals: en_proposals,
     trades: en_trades,
     'ui-toolkit': en_ui_toolkit,
   },

libs/i18n/src/locales/en/proposals.json

@@ -0,0 +1,46 @@
+{
+  "[This is {{network}} transaction only]": "[This is {{network}} transaction only]",
+  "{{proposalChange}} proposal {{proposalState}}": "{{proposalChange}} proposal {{proposalState}}",
+  "<0>{{count}}</0> blocks": "<0>{{count}}</0> blocks",
+  "Awaiting network confirmation": "Awaiting network confirmation",
+  "blocks": "blocks",
+  "Changes have been proposed for this asset.": "Changes have been proposed for this asset.",
+  "Changes have been proposed for this market.": "Changes have been proposed for this market.",
+  "Closing date": "Closing date",
+  "Confirm transaction in wallet": "Confirm transaction in wallet",
+  "Enactment date: {{date}}": "Enactment date: {{date}}",
+  "Enactment date": "Enactment date",
+  "estimated time to protocol upgrade": "estimated time to protocol upgrade",
+  "estimating...": "estimating...",
+  "Market": "Market",
+  "Network upgrade in {{countdown}}": "Network upgrade in {{countdown}}",
+  "No proposed markets": "No proposed markets",
+  "Parent market": "Parent market",
+  "Please open your wallet application and confirm or reject the transaction": "Please open your wallet application and confirm or reject the transaction",
+  "Please wait for your transaction to be confirmed": "Please wait for your transaction to be confirmed",
+  "Proposal declined": "Proposal declined",
+  "Proposal enacted": "Proposal enacted",
+  "Proposal failed": "Proposal failed",
+  "Proposal passed": "Proposal passed",
+  "Proposal rejected": "Proposal rejected",
+  "Proposal submitted": "Proposal submitted",
+  "Proposal waiting for node vote": "Proposal waiting for node vote",
+  "Rejection reason: {{reason}}": "Rejection reason: {{reason}}",
+  "Settlement asset": "Settlement asset",
+  "State": "State",
+  "Submission failed": "Submission failed",
+  "The network is being upgraded to {{vegaReleaseTag}}": "The network is being upgraded to {{vegaReleaseTag}}",
+  "The network will upgrade to {{vegaReleaseTag}} in {{countdown}}": "The network will upgrade to {{vegaReleaseTag}} in {{countdown}}",
+  "Trading activity will be interrupted, manage your risk appropriately.": "Trading activity will be interrupted, manage your risk appropriately.",
+  "Trading and other network activity has stopped until the upgrade is complete.": "Trading and other network activity has stopped until the upgrade is complete.",
+  "Transaction complete": "Transaction complete",
+  "Transaction failed": "Transaction failed",
+  "Unknown proposal {{proposalState}}": "Unknown proposal {{proposalState}}",
+  "Update <0>{{key}}</0> to {{value}}": "Update <0>{{key}}</0> to {{value}}",
+  "View details": "View details",
+  "View in block explorer": "View in block explorer",
+  "View proposal details": "View proposal details",
+  "View proposal": "View proposal",
+  "Voting": "Voting",
+  "Your transaction has been confirmed": "Your transaction has been confirmed"
+}

libs/proposals/src/components/asset-proposal-notification.tsx

@@ -1,8 +1,8 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { useUpdateProposal } from '../lib';
+import { useT } from '../use-t';
 
 type AssetProposalNotificationProps = {
   assetId?: string;
@@ -10,6 +10,7 @@ type AssetProposalNotificationProps = {
 export const AssetProposalNotification = ({
   assetId,
 }: AssetProposalNotificationProps) => {
+  const t = useT();
   const tokenLink = useLinks(DApp.Governance);
   const { data: proposal } = useUpdateProposal({
     id: assetId,

libs/proposals/src/components/market-proposal-notification.tsx

@@ -1,8 +1,8 @@
-import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ExternalLink, Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { useUpdateProposal } from '../lib';
+import { useT } from '../use-t';
 
 type MarketProposalNotificationProps = {
   marketId?: string;
@@ -10,6 +10,7 @@ type MarketProposalNotificationProps = {
 export const MarketProposalNotification = ({
   marketId,
 }: MarketProposalNotificationProps) => {
+  const t = useT();
   const tokenLink = useLinks(DApp.Governance);
   const { data: proposal } = useUpdateProposal({
     id: marketId,
@@ -29,7 +30,7 @@ export const MarketProposalNotification = ({
       </div>
     );
     return (
-      <div className="border-l border-default pl-1 pr-1 pb-1 min-w-min whitespace-nowrap">
+      <div className="border-default min-w-min whitespace-nowrap border-l pb-1 pl-1 pr-1">
         <Notification
           intent={Intent.Warning}
           message={message}

libs/proposals/src/components/proposal-actions-dropdown.tsx

@@ -5,10 +5,11 @@ import {
   Link,
   ActionsDropdown,
 } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { useT } from '../use-t';
 
 export const ProposalActionsDropdown = ({ id }: { id: string }) => {
+  const t = useT();
   const linkCreator = useLinks(DApp.Governance);
 
   return (

libs/proposals/src/components/proposals-list/proposals-list.tsx

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import { AgGrid } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useProposalsListQuery } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useColumnDefs } from './use-column-defs';
+import { useT } from '../../use-t';
 
 export const getNewMarketProposals = (data: ProposalListFieldsFragment[]) =>
   data.filter((proposal) =>
@@ -30,6 +30,7 @@ interface ProposalListProps {
 }
 
 export const ProposalsList = ({ cellRenderers }: ProposalListProps) => {
+  const t = useT();
   const { data } = useProposalsListQuery({
     variables: {
       proposalType: Types.ProposalType.TYPE_NEW_MARKET,

libs/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -8,7 +8,6 @@ import {
 } from '@vegaprotocol/datagrid';
 import compact from 'lodash/compact';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
@@ -19,8 +18,11 @@ import {
 } from '@vegaprotocol/types';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { ProposalActionsDropdown } from '../proposal-actions-dropdown';
+import { useT } from '../../use-t';
 
 export const useColumnDefs = () => {
+  const t = useT();
+
   const columnDefs: ColDef[] = useMemo(() => {
     return compact([
       {
@@ -124,7 +126,7 @@ export const useColumnDefs = () => {
         },
       },
     ]);
-  }, []);
+  }, [t]);
 
   return columnDefs;
 };

libs/proposals/src/components/protocol-upgrade-countdown.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
 import { convertToCountdownString } from '@vegaprotocol/utils';
 import classNames from 'classnames';
@@ -9,6 +8,8 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { useContext } from 'react';
+import { useT } from '../use-t';
+import { Trans } from 'react-i18next';
 
 export enum ProtocolUpgradeCountdownMode {
   IN_BLOCKS,
@@ -21,6 +22,7 @@ type ProtocolUpgradeCountdownProps = {
 export const ProtocolUpgradeCountdown = ({
   mode = ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING,
 }: ProtocolUpgradeCountdownProps) => {
+  const t = useT();
   const { theme } = useContext(NavigationContext);
   const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
 
@@ -45,12 +47,13 @@ export const ProtocolUpgradeCountdown = ({
   switch (mode) {
     case ProtocolUpgradeCountdownMode.IN_BLOCKS:
       countdown = (
-        <>
+        <Trans
-          <span className={emphasis}>
+          defaults="<0>{{count}}</0> blocks"
-            {Number(data.upgradeBlockHeight) - Number(lastBlockHeight)}
+          components={[<span className={emphasis}>count</span>]}
-          </span>{' '}
+          values={{
-          {t('blocks')}
+            count: Number(data.upgradeBlockHeight) - Number(lastBlockHeight),
-        </>
+          }}
+        />
       );
       break;
     case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
@@ -61,7 +64,7 @@ export const ProtocolUpgradeCountdown = ({
           </span>
         ) : (
           <span
-            className={classNames('italic lowercase text-vega-orange-600', {
+            className={classNames('text-vega-orange-600 lowercase italic', {
               '!text-black': theme === 'yellow',
             })}
           >
@@ -80,20 +83,19 @@ export const ProtocolUpgradeCountdown = ({
       <div
         data-testid="protocol-upgrade-counter"
         className={classNames(
-          'flex flex-nowrap gap-1 items-center text-xs py-1 px-2 lg:px-4 h-8',
+          'flex h-8 flex-nowrap items-center gap-1 px-2 py-1 text-xs lg:px-4',
-          'border rounded',
+          'rounded border',
           'border-vega-orange-500 dark:border-vega-orange-500',
           'bg-vega-orange-300 dark:bg-vega-orange-700',
           'text-default',
           {
-            '!bg-transparent !border-black': theme === 'yellow',
+            '!border-black !bg-transparent': theme === 'yellow',
           }
         )}
       >
         <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />{' '}
-        <span className="flex gap-1 flex-nowrap whitespace-nowrap">
+        <span className="flex flex-nowrap gap-1 whitespace-nowrap">
-          <span>{t('Network upgrade in')} </span>
+          <span>{t('Network upgrade in {{countdown}}', { countdown })} </span>
-          {countdown}
         </span>
       </div>
     </a>

libs/proposals/src/components/protocol-upgrade-in-progress-notification.tsx

@@ -1,6 +1,5 @@
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 
-import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   Intent,
@@ -14,6 +13,7 @@ import {
 } from '../lib';
 import { useLocalStorageSnapshot } from '@vegaprotocol/react-helpers';
 import { useBlockRising } from '../lib/protocol-upgrade-proposals/use-block-rising';
+import { useT } from '../use-t';
 
 /**
  * A flag determining whether to get the upgrade proposal data from local
@@ -22,6 +22,7 @@ import { useBlockRising } from '../lib/protocol-upgrade-proposals/use-block-risi
 const ALLOW_STORED_PROPOSAL_DATA = true;
 
 export const ProtocolUpgradeInProgressNotification = () => {
+  const t = useT();
   const { data, error } = useNextProtocolUpgradeProposal(undefined, true);
   const [nextUpgrade] = useLocalStorageSnapshot(
     NEXT_PROTOCOL_UPGRADE_PROPOSAL_SNAPSHOT
@@ -71,7 +72,9 @@ export const ProtocolUpgradeInProgressNotification = () => {
   return (
     <NotificationBanner intent={Intent.Danger} className={SHORT}>
       <div className="uppercase">
-        {t('The network is being upgraded to %s', vegaReleaseTag)}
+        {t('The network is being upgraded to {{vegaReleaseTag}}', {
+          vegaReleaseTag,
+        })}
       </div>
       <div>
         {t(

libs/proposals/src/components/protocol-upgrade-proposal-notification.tsx

@@ -4,11 +4,12 @@ import {
   NotificationBanner,
 } from '@vegaprotocol/ui-toolkit';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
-import { t } from '@vegaprotocol/i18n';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { ProtocolUpgradeCountdownMode } from './protocol-upgrade-countdown';
 import { convertToCountdownString } from '@vegaprotocol/utils';
 import { useState } from 'react';
+import { useT } from '../use-t';
+import { Trans } from 'react-i18next';
 
 type ProtocolUpgradeProposalNotificationProps = {
   mode?: ProtocolUpgradeCountdownMode;
@@ -16,6 +17,7 @@ type ProtocolUpgradeProposalNotificationProps = {
 export const ProtocolUpgradeProposalNotification = ({
   mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
 }: ProtocolUpgradeProposalNotificationProps) => {
+  const t = useT();
   const [visible, setVisible] = useState(true);
   const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
   const detailsLink = useProtocolUpgradeProposalLink();
@@ -40,10 +42,13 @@ export const ProtocolUpgradeProposalNotification = ({
   switch (mode) {
     case ProtocolUpgradeCountdownMode.IN_BLOCKS:
       countdown = (
-        <>
+        <Trans
-          <span className="text-vega-orange-500">{blocksLeft}</span>{' '}
+          defaults="<0>{{count}}</0> blocks"
-          {t('blocks')}
+          components={[<span className="text-vega-orange-500">count</span>]}
-        </>
+          values={{
+            count: blocksLeft,
+          }}
+        />
       );
       break;
     case ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING:
@@ -72,10 +77,13 @@ export const ProtocolUpgradeProposalNotification = ({
       }}
     >
       <div className="uppercase ">
-        {t('The network will upgrade to %s in ', [data.vegaReleaseTag])}
+        {t('The network will upgrade to {{vegaReleaseTag}} in {{countdown}}', {
-        {countdown}
+          vegaReleaseTag: data.vegaReleaseTag,
+          countdown,
+        })}
       </div>
       <div>
+        <Trans />
         {t(
           'Trading activity will be interrupted, manage your risk appropriately.'
         )}{' '}

libs/proposals/src/components/vega-transaction-dialog/vega-transaction-dialog.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { Dialog, Icon, Intent, Loader } from '@vegaprotocol/ui-toolkit';
 import { WalletClientError } from '@vegaprotocol/wallet-client';
 import type { VegaTxState } from '../../lib/proposals-hooks/use-vega-transaction';
 import { VegaTxStatus } from '../../lib/proposals-hooks/use-vega-transaction';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useT } from '../../use-t';
 
 export type VegaTransactionContentMap = {
   [C in VegaTxStatus]?: JSX.Element;
@@ -28,8 +28,9 @@ export const VegaTransactionDialog = ({
   icon,
   content,
 }: VegaTransactionDialogProps) => {
+  const t = useT();
   const computedIntent = intent ? intent : getIntent(transaction);
-  const computedTitle = title ? title : getTitle(transaction);
+  const computedTitle = title ? title : getTitle(transaction, t);
   const computedIcon = icon ? icon : getIcon(transaction);
 
   return (
@@ -86,6 +87,7 @@ interface VegaDialogProps {
  * Default dialog content
  */
 export const VegaDialog = ({ transaction }: VegaDialogProps) => {
+  const t = useT();
   const { links, network } = useVegaWallet();
 
   let content = null;
@@ -99,7 +101,7 @@ export const VegaDialog = ({ transaction }: VegaDialogProps) => {
         </p>
         {network !== 'MAINNET' && (
           <p data-testid="testnet-transaction-info">
-            {t('[This is %s transaction only]').replace('%s', network)}
+            {t('[This is {{network}} transaction only]', { network })}
           </p>
         )}
       </>
@@ -176,7 +178,7 @@ const getIntent = (transaction: VegaTxState) => {
   }
 };
 
-const getTitle = (transaction: VegaTxState) => {
+const getTitle = (transaction: VegaTxState, t: ReturnType<typeof useT>) => {
   switch (transaction.status) {
     case VegaTxStatus.Requested:
       return t('Confirm transaction in wallet');

libs/proposals/src/lib/proposals-hooks/use-proposal-toasts.tsx

@@ -1,6 +1,5 @@
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   ProposalChangeMapping,
   ProposalRejectionReasonMapping,
@@ -16,6 +15,8 @@ import {
   useOnProposalSubscription,
   type OnProposalFragmentFragment,
 } from './__generated__/Proposal';
+import { Trans } from 'react-i18next';
+import { useT } from '../../use-t';
 
 export const PROPOSAL_STATES_TO_TOAST = [
   ProposalState.STATE_DECLINED,
@@ -27,6 +28,7 @@ const CLOSE_AFTER = 0;
 type Proposal = OnProposalFragmentFragment;
 
 const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
+  const t = useT();
   const change = proposal.terms.change;
   switch (change.__typename) {
     case 'UpdateNetworkParameter':
@@ -43,8 +45,10 @@ const ProposalDetails = ({ proposal }: { proposal: Proposal }) => {
           {proposal.state === ProposalState.STATE_REJECTED &&
           proposal.rejectionReason ? (
             <p data-testid="proposal-toast-rejection-reason">
-              {t('Rejection reason:')}{' '}
+              {t('Rejection reason: {{reason}}', {
-              {ProposalRejectionReasonMapping[proposal.rejectionReason]}
+                reason:
+                  ProposalRejectionReasonMapping[proposal.rejectionReason],
+              })}
             </p>
           ) : null}
         </>
@@ -61,24 +65,30 @@ const UpdateNetworkParameterDetails = ({
   if (change.__typename !== 'UpdateNetworkParameter') return null;
   return (
     <p data-testid="proposal-toast-network-param" className="italic">
-      '{t('Update ')}
+      <Trans
-      <span className="break-all">{change.networkParameter.key}</span>
+        defaults="Update <0>{{key}}</0> to {{value}}"
-      {t(' to ')}
+        values={change.networkParameter}
-      <span>{change.networkParameter.value}</span>'
+        components={[<span className="break-all">key</span>]}
+      />
     </p>
   );
 };
 
 export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
+  const t = useT();
   const tokenLink = useLinks(DApp.Governance);
   const change = proposal.terms.change;
 
   // Generates toast's title,
   // e.g. Update market proposal enacted, New transfer proposal open, ...
-  const title = t('%s proposal %s', [
+  const title = change.__typename
-    change.__typename ? ProposalChangeMapping[change.__typename] : 'Unknown',
+    ? t('{{proposalChange}} proposal {{proposalState}}', {
-    ProposalStateMapping[proposal.state].toLowerCase(),
+        proposalChange: ProposalChangeMapping[change.__typename],
-  ]);
+        proposalState: ProposalStateMapping[proposal.state].toLowerCase(),
+      })
+    : t('Unknown proposal {{proposalState}}', {
+        proposalState: ProposalStateMapping[proposal.state].toLowerCase(),
+      });
 
   const enactment = Date.parse(proposal.terms.enactmentDatetime);
 
@@ -88,7 +98,9 @@ export const ProposalToastContent = ({ proposal }: { proposal: Proposal }) => {
       <ProposalDetails proposal={proposal} />
       {!isNaN(enactment) && (
         <p>
-          {t('Enactment date:')} {getDateTimeFormat().format(enactment)}
+          {t('Enactment date: {{date}}', {
+            date: getDateTimeFormat().format(enactment),
+          })}
         </p>
       )}
       <p>

libs/proposals/src/setup-tests.ts

@@ -1,4 +1,17 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
+import '@testing-library/jest-dom';
+import { locales } from '@vegaprotocol/i18n';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
 
+// Set up i18n instance so that components have the correct default
+// en translations
+i18n.use(initReactI18next).init({
+  // we init with resources
+  resources: locales,
+  fallbackLng: 'en',
+  ns: ['proposals'],
+  defaultNS: 'proposals',
+});
 global.ResizeObserver = ResizeObserver;

libs/proposals/src/use-t.ts

@@ -0,0 +1,3 @@
+import { useTranslation } from 'react-i18next';
+export const ns = 'proposals';
+export const useT = () => useTranslation(ns).t;

libs/proposals/src/utils/proposal-dialog-helpers.tsx

@@ -1,11 +1,12 @@
 import { ProposalState } from '@vegaprotocol/types';
-import { t } from '@vegaprotocol/i18n';
 import { Icon, Intent } from '@vegaprotocol/ui-toolkit';
 import type { ReactNode } from 'react';
+import { useT } from '../use-t';
 
-export const getProposalDialogTitle = (
+export const useGetProposalDialogTitle = (
   status?: ProposalState
 ): string | undefined => {
+  const t = useT();
   if (!status) {
     return;
   }