feat: use i18next in deal-ticket

apps/trading/lib/i18n/index.ts

@@ -25,6 +25,7 @@ i18n
       'candles-chart',
       'datagrid',
       'deal-ticket',
+      'deposits',
       'fills',
       'funding-payments',
       'trading',

libs/deposits/src/lib/approve-notification.tsx

@@ -1,6 +1,5 @@
 import type { Asset } from '@vegaprotocol/assets';
 import { EtherscanLink } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import { Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import {
   formatNumber,
@@ -11,6 +10,7 @@ import type { EthStoredTxState } from '@vegaprotocol/web3';
 import { EthTxStatus, useEthTransactionStore } from '@vegaprotocol/web3';
 import BigNumber from 'bignumber.js';
 import type { DepositBalances } from './use-deposit-balances';
+import { useT } from './use-t';
 
 interface ApproveNotificationProps {
   isActive: boolean;
@@ -33,6 +33,7 @@ export const ApproveNotification = ({
   approveTxId,
   intent = Intent.Warning,
 }: ApproveNotificationProps) => {
+  const t = useT();
   const tx = useEthTransactionStore((state) => {
     return state.transactions.find((t) => t?.id === approveTxId);
   });

libs/deposits/src/lib/deposit-form.tsx

@@ -10,7 +10,6 @@ import {
   isAssetTypeERC20,
   formatNumber,
 } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import {
   TradingFormGroup,
@@ -43,6 +42,7 @@ import { FaucetNotification } from './faucet-notification';
 import { ApproveNotification } from './approve-notification';
 import { usePersistentDeposit } from './use-persistent-deposit';
 import { AssetBalance } from './asset-balance';
+import { useT } from './use-t';
 
 interface FormFields {
   asset: string;
@@ -84,6 +84,7 @@ export const DepositForm = ({
   approveTxId,
   isFaucetable,
 }: DepositFormProps) => {
+  const t = useT();
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   const openDialog = useWeb3ConnectStore((store) => store.open);
   const { isActive, account } = useWeb3React();
@@ -419,6 +420,7 @@ interface FormButtonProps {
 }
 
 const FormButton = ({ approved, selectedAsset }: FormButtonProps) => {
+  const t = useT();
   const { isActive, chainId } = useWeb3React();
   const desiredChainId = useWeb3ConnectStore((store) => store.desiredChainId);
   const invalidChain = isActive && chainId !== desiredChainId;
@@ -464,6 +466,7 @@ const DisconnectEthereumButton = ({
 }: {
   onDisconnect: () => void;
 }) => {
+  const t = useT();
   const { connector } = useWeb3React();
   const [, , removeEagerConnector] = useLocalStorage(ETHEREUM_EAGER_CONNECT);
   const disconnect = useWeb3Disconnect(connector);
@@ -495,6 +498,7 @@ export const AddressField = ({
   input,
   onChange,
 }: AddressInputProps) => {
+  const t = useT();
   const [isInput, setIsInput] = useState(() => {
     if (pubKeys && pubKeys.length <= 1) {
       return true;

libs/deposits/src/lib/deposit-limits.tsx

@@ -1,5 +1,4 @@
 import type { Asset } from '@vegaprotocol/assets';
-import { t } from '@vegaprotocol/i18n';
 import { CompactNumber } from '@vegaprotocol/react-helpers';
 import {
   KeyValueTable,
@@ -8,6 +7,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import type BigNumber from 'bignumber.js';
 import { formatNumber, quantumDecimalPlaces } from '@vegaprotocol/utils';
+import { useT } from './use-t';
 
 // Note: all of the values here are with correct asset's decimals
 // See `libs/deposits/src/lib/use-deposit-balances.ts`
@@ -29,6 +29,7 @@ export const DepositLimits = ({
   allowance,
   exempt,
 }: DepositLimitsProps) => {
+  const t = useT();
   const limits = [
     {
       key: 'BALANCE_AVAILABLE',

libs/deposits/src/lib/faucet-notification.tsx

@@ -1,11 +1,10 @@
 import type { Asset } from '@vegaprotocol/assets';
 import { EtherscanLink } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
 import { Intent, Notification } from '@vegaprotocol/ui-toolkit';
 import { EthTxStatus, useEthTransactionStore } from '@vegaprotocol/web3';
-import { getFaucetError } from './get-faucet-error';
-
-interface FaucetNotificationProps {
+import { useGetFaucetError } from './get-faucet-error';
+import { useT } from './use-t';
+export interface FaucetNotificationProps {
   isActive: boolean;
   selectedAsset?: Asset;
   faucetTxId: number | null;
@@ -14,14 +13,20 @@ interface FaucetNotificationProps {
 /**
  * Render a notification for the faucet transaction
  */
+
 export const FaucetNotification = ({
   isActive,
   selectedAsset,
   faucetTxId,
 }: FaucetNotificationProps) => {
+  const t = useT();
   const tx = useEthTransactionStore((state) => {
     return state.transactions.find((t) => t?.id === faucetTxId);
   });
+  const errorMessage = useGetFaucetError(
+    tx?.status === EthTxStatus.Error ? tx.error : null,
+    selectedAsset?.symbol
+  );
 
   if (!isActive) {
     return null;
@@ -34,9 +39,7 @@ export const FaucetNotification = ({
   if (!tx) {
     return null;
   }
-
-  if (tx.status === EthTxStatus.Error) {
-    const errorMessage = getFaucetError(tx.error, selectedAsset.symbol);
+  if (errorMessage) {
     return (
       <div className="mb-4">
         <Notification

libs/deposits/src/lib/get-faucet-error.ts

@@ -1,7 +1,8 @@
-import { t } from '@vegaprotocol/i18n';
 import type { TxError } from '@vegaprotocol/web3';
+import { useT } from './use-t';
 
-export const getFaucetError = (error: TxError | null, symbol: string) => {
+export const useGetFaucetError = (error: TxError | null, symbol?: string) => {
+  const t = useT();
   const reasonMap: {
     [reason: string]: string;
   } = {

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

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