feat(withdraws): use i18next (#5285)

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

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

@@ -0,0 +1,49 @@
+{
+  "All {{symbol}} withdrawals are subject to a {{delay}} delay.": "All {{symbol}} withdrawals are subject to a {{delay}} delay.",
+  "Amount": "Amount",
+  "Asset": "Asset",
+  "Available to withdraw in {{availableTimestamp}}": "Available to withdraw in {{availableTimestamp}}",
+  "Balance available": "Balance available",
+  "Complete the withdrawal to release your funds": "Complete the withdrawal to release your funds",
+  "Complete these {{count}} withdrawals to release your funds": "Complete these {{count}} withdrawals to release your funds",
+  "Complete withdrawal": "Complete withdrawal",
+  "Completed": "Completed",
+  "Connect Ethereum wallet to complete": "Connect Ethereum wallet to complete",
+  "Connect": "Connect",
+  "Created": "Created",
+  "Delay time": "Delay time",
+  "Delayed (ready in {{readyIn}})": "Delayed (ready in {{readyIn}})",
+  "Delayed withdrawal threshold": "Delayed withdrawal threshold",
+  "Disconnect": "Disconnect",
+  "Failed": "Failed",
+  "Insufficient amount in account": "Insufficient amount in account",
+  "Invalid asset source: {{source}}": "Invalid asset source: {{source}}",
+  "No withdrawals": "No withdrawals",
+  "None": "None",
+  "Pending": "Pending",
+  "Please select an asset": "Please select an asset",
+  "Read more": "Read more",
+  "Ready to complete": "Ready to complete",
+  "Recipient": "Recipient",
+  "Rejected": "Rejected",
+  "Release funds": "Release funds",
+  "Status": "Status",
+  "Step 1 - Release funds from Vega": "Step 1 - Release funds from Vega",
+  "Step 2 - Transfer funds to your Ethereum wallet": "Step 2 - Transfer funds to your Ethereum wallet",
+  "There are two steps required to make a withdrawal": "There are two steps required to make a withdrawal",
+  "This app only works on {{chainName}}. Please change chain.": "This app only works on {{chainName}}. Please change chain.",
+  "To (Ethereum address)": "To (Ethereum address)",
+  "Transaction": "Transaction",
+  "Use maximum": "Use maximum",
+  "Verifying withdrawal approval": "Verifying withdrawal approval",
+  "View withdrawal details": "View withdrawal details",
+  "View withdrawals": "View withdrawals",
+  "Withdraw {{amount}} {{symbol}}": "Withdraw {{amount}} {{symbol}}",
+  "Withdraw funds": "Withdraw funds",
+  "Withdraw": "Withdraw",
+  "Withdrawal ready": "Withdrawal ready",
+  "Withdrawals of {{threshold}} {{symbol}} or more will be delayed for {{delay}}.": "Withdrawals of {{threshold}} {{symbol}} or more will be delayed for {{delay}}.",
+  "Withdrawals ready": "Withdrawals ready",
+  "You have no assets to withdraw": "You have no assets to withdraw",
+  "Your funds have been unlocked for withdrawal - <0>View in block explorer<0>": "Your funds have been unlocked for withdrawal - <0>View in block explorer<0>"
+}

libs/withdraws/__mocks__/react-i18next.ts

@@ -0,0 +1,14 @@
+export const useTranslation = () => ({
+  t: (label: string, replacements?: Record<string, string>) => {
+    let translatedLabel = label;
+    if (typeof replacements === 'object' && replacements !== null) {
+      Object.keys(replacements).forEach((key) => {
+        translatedLabel = translatedLabel.replace(
+          `{{${key}}}`,
+          replacements[key]
+        );
+      });
+    }
+    return translatedLabel;
+  },
+});

libs/withdraws/src/lib/create-withdrawal-dialog.tsx

@@ -1,12 +1,13 @@
-import { t } from '@vegaprotocol/i18n';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { WithdrawFormContainer } from './withdraw-form-container';
 import { useWeb3ConnectStore } from '@vegaprotocol/web3';
 import { useWithdrawalDialog } from './withdrawal-dialog';
 import { useVegaTransactionStore } from '@vegaprotocol/web3';
+import { useT } from './use-t';
 
 export const CreateWithdrawalDialog = () => {
+  const t = useT();
   const { assetId, isOpen, open, close } = useWithdrawalDialog();
   const { pubKey } = useVegaWallet();
   const createTransaction = useVegaTransactionStore((state) => state.create);

libs/withdraws/src/lib/use-ready-to-complete-withdrawals-toast.tsx

@@ -5,7 +5,6 @@ import type { Toast } from '@vegaprotocol/ui-toolkit';
 import { Button, Intent, Panel, ToastHeading } from '@vegaprotocol/ui-toolkit';
 import { useToasts } from '@vegaprotocol/ui-toolkit';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { t } from '@vegaprotocol/i18n';
 import { formatNumber, toBigNum } from '@vegaprotocol/utils';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -17,6 +16,7 @@ import {
 import { withdrawalProvider } from './withdrawals-provider';
 import type { WithdrawalFieldsFragment } from './__generated__/Withdrawal';
 import uniqBy from 'lodash/uniqBy';
+import { useT } from './use-t';
 
 const CHECK_INTERVAL = 1000;
 const ON_APP_START_TOAST_ID = `ready-to-withdraw`;
@@ -199,15 +199,15 @@ const MultipleReadyToWithdrawToastContent = ({
   count: number;
   withdrawalsLink?: string;
 }) => {
+  const t = useT();
   const navigate = useNavigate();
   return (
     <>
       <ToastHeading>{t('Withdrawals ready')}</ToastHeading>
       <p>
-        {t(
+        {t('Complete these {{count}} withdrawals to release your funds', {
-          'Complete these %s withdrawals to release your funds',
+          count,
-          count.toString()
+        })}
-        )}
       </p>
       <p className="mt-2">
         <Button
@@ -229,6 +229,7 @@ const SingleReadyToWithdrawToastContent = ({
 }: {
   withdrawal: WithdrawalFieldsFragment;
 }) => {
+  const t = useT();
   const { createEthWithdrawalApproval } = useEthWithdrawApprovalsStore(
     (state) => ({
       createEthWithdrawalApproval: state.create,
@@ -266,7 +267,10 @@ const SingleReadyToWithdrawToastContent = ({
       <p>{t('Complete the withdrawal to release your funds')}</p>
       <Panel>
         <strong>
-          {t('Withdraw')} {amount} {withdrawal.asset.symbol}
+          {t('Withdraw {{amount}} {{symbol}}', {
+            amount,
+            symbol: withdrawal.asset.symbol,
+          })}
         </strong>
       </Panel>
       {completeButton}

libs/withdraws/src/lib/use-t.ts

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

libs/withdraws/src/lib/use-verify-withdrawal.ts

@@ -2,7 +2,6 @@ import { useCallback, useState } from 'react';
 import BigNumber from 'bignumber.js';
 import { addDecimal } from '@vegaprotocol/utils';
 import { localLoggerFactory } from '@vegaprotocol/logger';
-import { t } from '@vegaprotocol/i18n';
 import {
   ApprovalStatus,
   useGetWithdrawDelay,
@@ -15,6 +14,7 @@ import {
   type Erc20ApprovalQueryVariables,
 } from './__generated__/Erc20Approval';
 import { useApolloClient } from '@apollo/client';
+import { useT } from './use-t';
 
 export interface VerifyState {
   status: ApprovalStatus;
@@ -33,6 +33,7 @@ const initialState = {
 };
 
 export const useVerifyWithdrawal = () => {
+  const t = useT();
   const client = useApolloClient();
   const getThreshold = useGetWithdrawThreshold();
   const getDelay = useGetWithdrawDelay();
@@ -62,9 +63,9 @@ export const useVerifyWithdrawal = () => {
         if (withdrawal.asset.source.__typename !== 'ERC20') {
           setState({
             status: ApprovalStatus.Error,
-            message: t(
+            message: t('Invalid asset source: {{source}}', {
-              `Invalid asset source: ${withdrawal.asset.source.__typename}`
+              source: withdrawal.asset.source.__typename,
-            ),
+            }),
           });
           return false;
         }
@@ -132,7 +133,7 @@ export const useVerifyWithdrawal = () => {
         return false;
       }
     },
-    [getThreshold, getDelay, client, setState]
+    [getThreshold, getDelay, client, setState, t]
   );
 
   return { verify, state, reset };

libs/withdraws/src/lib/withdraw-form-container.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { toBigNum } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { accountsDataProvider } from '@vegaprotocol/accounts';
@@ -8,6 +7,7 @@ import { accountsDataProvider } from '@vegaprotocol/accounts';
 import { WithdrawManager } from './withdraw-manager';
 import * as Types from '@vegaprotocol/types';
 import type { WithdrawalArgs } from './withdraw-form';
+import { useT } from './use-t';
 
 interface WithdrawFormContainerProps {
   partyId?: string;
@@ -20,6 +20,7 @@ export const WithdrawFormContainer = ({
   partyId,
   submit,
 }: WithdrawFormContainerProps) => {
+  const t = useT();
   const { data, loading, error } = useDataProvider({
     dataProvider: accountsDataProvider,
     variables: { partyId: partyId || '' },

libs/withdraws/src/lib/withdraw-form.tsx

@@ -8,7 +8,6 @@ import {
   isAssetTypeERC20,
   formatNumber,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import {
   TradingFormGroup,
@@ -33,6 +32,7 @@ import {
 } from '@vegaprotocol/web3';
 import { AssetBalance } from './asset-balance';
 import { DocsLinks } from '@vegaprotocol/environment';
+import { useT } from './use-t';
 
 export interface WithdrawalArgs {
   amount: string;
@@ -69,10 +69,11 @@ const WithdrawDelayNotification = ({
   symbol: string;
   decimals: number;
 }) => {
-  const replacements = [
+  const t = useT();
+  const replacements = {
     symbol,
-    delay ? formatDistanceToNow(Date.now() + delay * 1000) : ' ',
+    delay: delay ? formatDistanceToNow(Date.now() + delay * 1000) : ' ',
-  ];
+  };
   return (
     <Notification
       intent={Intent.Warning}
@@ -84,11 +85,17 @@ const WithdrawDelayNotification = ({
       }
       message={[
         threshold.isEqualTo(0)
-          ? t('All %s withdrawals are subject to a %s delay.', replacements)
+          ? t(
-          : t('Withdrawals of %s %s or more will be delayed for %s.', [
+              'All {{symbol}} withdrawals are subject to a {{delay}} delay.',
-              formatNumber(threshold, decimals),
+              replacements
-              ...replacements,
+            )
-            ]),
+          : t(
+              'Withdrawals of {{threshold}} {{symbol}} or more will be delayed for {{delay}}.',
+              {
+                threshold: formatNumber(threshold, decimals),
+                ...replacements,
+              }
+            ),
         DocsLinks?.WITHDRAWAL_LIMITS ? (
           <ExternalLink className="ml-1" href={DocsLinks.WITHDRAWAL_LIMITS}>
             {t('Read more')}
@@ -111,10 +118,10 @@ export const WithdrawForm = ({
   onSelectAsset,
   submitWithdraw,
 }: WithdrawFormProps) => {
+  const t = useT();
   const ethereumAddress = useEthereumAddress();
   const required = useRequired();
   const minSafe = useMinSafe();
-
   const { account: address } = useWeb3React();
   const {
     register,
@@ -315,6 +322,7 @@ const UseButton = (props: UseButtonProps) => {
 };
 
 const EthereumButton = ({ clearAddress }: { clearAddress: () => void }) => {
+  const t = useT();
   const openDialog = useWeb3ConnectStore((state) => state.open);
   const { isActive, connector } = useWeb3React();
   const [, , removeEagerConnector] = useLocalStorage(ETHEREUM_EAGER_CONNECT);

libs/withdraws/src/lib/withdraw-limits.tsx

@@ -1,5 +1,4 @@
 import type { Asset } from '@vegaprotocol/assets';
-import { t } from '@vegaprotocol/i18n';
 import { CompactNumber } from '@vegaprotocol/react-helpers';
 import { WITHDRAW_THRESHOLD_TOOLTIP_TEXT } from '@vegaprotocol/assets';
 import {
@@ -9,6 +8,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import BigNumber from 'bignumber.js';
 import { formatDistanceToNow } from 'date-fns';
+import { useT } from './use-t';
 
 interface WithdrawLimitsProps {
   amount: string;
@@ -25,6 +25,7 @@ export const WithdrawLimits = ({
   delay,
   asset,
 }: WithdrawLimitsProps) => {
+  const t = useT();
   const delayTime =
     new BigNumber(amount).isGreaterThan(threshold) && delay
       ? formatDistanceToNow(Date.now() + delay * 1000)

libs/withdraws/src/lib/withdrawal-feedback.tsx

@@ -1,6 +1,5 @@
 import { useEnvironment } from '@vegaprotocol/environment';
 import { addDecimalsFormatNumber, truncateByChars } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   KeyValueTable,
@@ -11,6 +10,8 @@ import { getChainName, useWeb3ConnectStore } from '@vegaprotocol/web3';
 import { useWeb3React } from '@web3-react/core';
 import { formatDistanceToNow } from 'date-fns';
 import type { WithdrawalFieldsFragment } from './__generated__/Withdrawal';
+import { useT } from './use-t';
+import { Trans } from 'react-i18next';
 
 export const WithdrawalFeedback = ({
   transaction,
@@ -23,6 +24,7 @@ export const WithdrawalFeedback = ({
   submitWithdraw: (withdrawalId: string) => void;
   availableTimestamp: number | null;
 }) => {
+  const t = useT();
   const { VEGA_EXPLORER_URL } = useEnvironment();
   const isAvailable =
     availableTimestamp === null || Date.now() > availableTimestamp;
@@ -30,16 +32,20 @@ export const WithdrawalFeedback = ({
   return (
     <div>
       <p className="mb-2">
-        {t('Your funds have been unlocked for withdrawal')} -{' '}
+        <Trans
-        <a
+          defaults="Your funds have been unlocked for withdrawal - <0>View in block explorer<0>"
-          className="underline"
+          components={[
-          data-testid="tx-block-explorer"
+            <a
-          href={`${VEGA_EXPLORER_URL}/txs/0x${transaction.txHash}`}
+              className="underline"
-          target="_blank"
+              data-testid="tx-block-explorer"
-          rel="noreferrer"
+              href={`${VEGA_EXPLORER_URL}/txs/0x${transaction.txHash}`}
-        >
+              target="_blank"
-          {t('View in block explorer')}
+              rel="noreferrer"
-        </a>
+            >
+              View in block explorer
+            </a>,
+          ]}
+        />
       </p>
       {withdrawal && (
         <KeyValueTable>
@@ -78,11 +84,9 @@ export const WithdrawalFeedback = ({
         <ActionButton withdrawal={withdrawal} submitWithdraw={submitWithdraw} />
       ) : (
         <p className="text-danger">
-          {t(
+          {t('Available to withdraw in {{availableTimestamp}}', {
-            `Available to withdraw in ${formatDistanceToNow(
+            availableTimestamp: formatDistanceToNow(availableTimestamp),
-              availableTimestamp
+          })}
-            )}`
-          )}
         </p>
       )}
     </div>
@@ -96,6 +100,7 @@ const ActionButton = ({
   withdrawal: WithdrawalFieldsFragment | null;
   submitWithdraw: (withdrawalId: string) => void;
 }) => {
+  const t = useT();
   const { isActive, chainId } = useWeb3React();
   const { open, desiredChainId } = useWeb3ConnectStore((store) => ({
     open: store.open,
@@ -115,7 +120,9 @@ const ActionButton = ({
     return (
       <>
         <p className="text-danger mb-2">
-          {t(`This app only works on ${chainName}. Please change chain.`)}
+          {t('This app only works on {{chainName}}. Please change chain.', {
+            chainName,
+          })}
         </p>
         <Button disabled={true}>{t('Withdraw funds')}</Button>
       </>

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -7,7 +7,6 @@ import {
   isNumeric,
   truncateByChars,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   ActionsDropdown,
   ButtonLink,
@@ -30,6 +29,7 @@ import {
 import * as Schema from '@vegaprotocol/types';
 import { type TimestampedWithdrawals } from './use-ready-to-complete-withdrawals-toast';
 import classNames from 'classnames';
+import { useT } from './use-t';
 
 export const WithdrawalsTable = ({
   delayed,
@@ -39,13 +39,14 @@ export const WithdrawalsTable = ({
   ready?: TimestampedWithdrawals;
   delayed?: TimestampedWithdrawals;
 }) => {
+  const t = useT();
   const createWithdrawApproval = useEthWithdrawApprovalsStore(
     (store) => store.create
   );
 
   const columnDefs = useMemo<ColDef[]>(
     () => [
-      { headerName: 'Asset', field: 'asset.symbol' },
+      { headerName: t('Asset'), field: 'asset.symbol' },
       {
         headerName: t('Amount'),
         field: 'amount',
@@ -128,7 +129,7 @@ export const WithdrawalsTable = ({
         }),
       },
     ],
-    [createWithdrawApproval, delayed, ready]
+    [createWithdrawApproval, delayed, ready, t]
   );
   return (
     <AgGrid
@@ -151,6 +152,7 @@ export type CompleteCellProps = {
   complete: (withdrawal: WithdrawalFieldsFragment) => void;
 };
 export const CompleteCell = ({ data, complete }: CompleteCellProps) => {
+  const t = useT();
   const open = useWithdrawalApprovalDialog((state) => state.open);
   const ref = useRef<HTMLButtonElement>(null);
 
@@ -206,8 +208,8 @@ export const StatusCell = ({
   ready?: TimestampedWithdrawals;
   delayed?: TimestampedWithdrawals;
 }) => {
+  const t = useT();
   const READY_TO_COMPLETE = t('Ready to complete');
-  const DELAYED = (readyIn: string) => t('Delayed (ready in %s)', readyIn);
   const PENDING = t('Pending');
   const COMPLETED = t('Completed');
   const REJECTED = t('Rejected');
@@ -246,7 +248,11 @@ export const StatusCell = ({
       if (isDelayed.timestamp == null) return;
       const remaining = Date.now() - isDelayed.timestamp;
       if (remaining < 0) {
-        setLabel(DELAYED(convertToCountdownString(remaining, '0:00:00:00')));
+        setLabel(
+          t('Delayed (ready in {{readyIn}})', {
+            readyIn: convertToCountdownString(remaining, '0:00:00:00'),
+          })
+        );
       } else {
         setLabel(READY_TO_COMPLETE);
       }
@@ -254,7 +260,7 @@ export const StatusCell = ({
     return () => {
       clearInterval(interval);
     };
-  }, [READY_TO_COMPLETE, data, delayed, isDelayed, isPending]);
+  }, [READY_TO_COMPLETE, data, delayed, isDelayed, isPending, t]);
 
   return data ? (
     <span