feat(wallet): use i18next (#5299)

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

libs/i18n/src/index.ts

@@ -17,6 +17,7 @@ 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';
+import en_wallet from './locales/en/wallet.json';
 
 export const locales = {
   en: {
@@ -37,5 +38,6 @@ export const locales = {
     proposals: en_proposals,
     trades: en_trades,
     'ui-toolkit': en_ui_toolkit,
+    wallet: en_wallet,
   },
 };

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

@@ -0,0 +1,63 @@
+{
+  "About the Vega wallet": "About the Vega wallet",
+  "Supported browsers": "Supported browsers",
+  "Connect Vega wallet": "Connect Vega wallet",
+  "Get a Vega wallet": "Get a Vega wallet",
+  "Connect securely, deposit funds and approve or reject transactions with the Vega wallet": "Connect securely, deposit funds and approve or reject transactions with the Vega wallet",
+  "Connect": "Connect",
+  "Vega Wallet <0>full featured<0>": "Vega Wallet <0>full featured<0>",
+  "your browser": "your browser",
+  "Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
+  "Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.": "Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.",
+  "Metamask Snap <0>quick start</0>": "Metamask Snap <0>quick start</0>",
+  "Connect directly via Metamask with the Vega Snap for single key support without advanced features.": "Connect directly via Metamask with the Vega Snap for single key support without advanced features.",
+  "Connect via Vega MetaMask Snap": "Connect via Vega MetaMask Snap",
+  "Install Metamask with the Vega Snap for single key support without advanced features.": "Install Metamask with the Vega Snap for single key support without advanced features.",
+  "Install Vega MetaMask Snap": "Install Vega MetaMask Snap",
+  "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>": "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>",
+  "Advanced / Other options...": "Advanced / Other options...",
+  "View as party": "View as party",
+  "Get the Vega Wallet": "Get the Vega Wallet",
+  "Custom wallet location": "Custom wallet location",
+  "Go back": "Go back",
+  "Connect the App/CLI": "Connect the App/CLI",
+  "Use the Desktop App/CLI": "Use the Desktop App/CLI",
+  "Enter a custom wallet location": "Enter a custom wallet location",
+  "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>": "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>",
+  "Verifying chain": "Verifying chain",
+  "Successfully connected": "Successfully connected",
+  "Connecting...": "Connecting...",
+  "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.": "Approve the connection from your Vega wallet app. If you have multiple wallets you'll need to choose which to connect with.",
+  "Understand the risk": "Understand the risk",
+  "Cancel": "Cancel",
+  "I agree": "I agree",
+  "Something went wrong": "Something went wrong",
+  "An unknown error occurred": "An unknown error occurred",
+  "Try again": "Try again",
+  "User rejected": "User rejected",
+  "The user rejected the wallet connection": "The user rejected the wallet connection",
+  "Wrong network": "Wrong network",
+  "No wallet detected": "No wallet detected",
+  "Vega browser extension not installed": "Vega browser extension not installed",
+  "Snap failed": "Snap failed",
+  "Could not connect to Vega MetaMask Snap": "Could not connect to Vega MetaMask Snap",
+  "No wallet application running at {{connectorUrl}}": "No wallet application running at {{connectorUrl}}",
+  "No Vega Wallet application running": "No Vega Wallet application running",
+  "Read the docs to troubleshoot": "Read the docs to troubleshoot",
+  "Connection in progress": "Connection in progress",
+  "Approve the connection from your Vega wallet app.": "Approve the connection from your Vega wallet app.",
+  "To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".": "To complete your wallet connection, set your wallet network in your app to \"{{appChainId}}\".",
+  "SELECT A VEGA KEY": "SELECT A VEGA KEY",
+  "Select": "Select",
+  "Copy": "Copy",
+  "Disconnect all keys": "Disconnect all keys",
+  "Pubkey must be 64 characters in length": "Pubkey must be 64 characters in length",
+  "Pubkey must be be valid hex": "Pubkey must be be valid hex",
+  "VIEW AS VEGA USER": "VIEW AS VEGA USER",
+  "Browse from the perspective of another Vega user in read-only mode.": "Browse from the perspective of another Vega user in read-only mode.",
+  "Required": "Required",
+  "Browse network": "Browse network",
+  "Checking wallet version": "Checking wallet version",
+  "Checking your wallet is compatible with this app": "Checking your wallet is compatible with this app",
+  "Wrong Network": "Wrong Network"
+}

libs/wallet/src/connect-dialog/connect-dialog-elements.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import {
   ExternalLink,
   VegaIcon,
@@ -9,10 +8,11 @@ import type { ReactNode } from 'react';
 import { MozillaIcon } from './mozilla-icon';
 import { ChromeIcon } from './chrome-icon';
 import { useVegaWallet } from '../use-vega-wallet';
+import { useT } from '../use-t';
 
 export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
   return (
-    <h1 data-testid="wallet-dialog-title" className="mb-6 text-2xl font-alpha">
+    <h1 data-testid="wallet-dialog-title" className="font-alpha mb-6 text-2xl">
       {children}
     </h1>
   );
@@ -23,6 +23,7 @@ export const ConnectDialogContent = ({ children }: { children: ReactNode }) => {
 };
 
 export const ConnectDialogFooter = () => {
+  const t = useT();
   const { links } = useVegaWallet();
   const wrapperClasses = classNames(
     'flex justify-center gap-4 mt-4',
@@ -56,7 +57,7 @@ export const BrowserIcon = ({
   const isItMozilla =
     window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
   return (
-    <div className="absolute top-0 flex items-center h-8 right-1">
+    <div className="absolute right-1 top-0 flex h-8 items-center">
       {!isItChrome && !isItMozilla ? (
         <>
           <a href={mozillaExtensionUrl} target="_blank" rel="noreferrer">

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -12,7 +12,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { useCallback, useState, type ReactNode } from 'react';
 import { type WalletClientError } from '@vegaprotocol/wallet-client';
-import { t } from '@vegaprotocol/i18n';
 import { type Connectors, type VegaConnector } from '../connectors';
 import { DEFAULT_SNAP_VERSION } from '../connectors';
 import {
@@ -46,6 +45,8 @@ import { useIsWalletServiceRunning } from '../use-is-wallet-service-running';
 import { SnapStatus, useSnapStatus } from '../use-snap-status';
 import { useVegaWalletDialogStore } from './vega-wallet-dialog-store';
 import { useChainId } from './use-chain-id';
+import { useT } from '../use-t';
+import { Trans } from 'react-i18next';
 
 export const CLOSE_DELAY = 1700;
 
@@ -225,6 +226,7 @@ const ConnectorList = ({
   isDesktopWalletRunning: boolean | null;
   snapStatus: SnapStatus;
 }) => {
+  const t = useT();
   const { pubKey, links } = useVegaWallet();
   const title = isBrowserWalletInstalled()
     ? t('Connect Vega wallet')
@@ -248,7 +250,7 @@ const ConnectorList = ({
     ? 'Chrome'
     : isItMozilla
     ? 'Firefox'
-    : 'your browser';
+    : t('your browser');
 
   return (
     <>
@@ -265,34 +267,28 @@ const ConnectorList = ({
             text={extendedText}
             onClick={() => onSelect('injected')}
             title={
-              <>
+              <Trans
-                <span>{t('Vega Wallet')}</span>
+                defaults="Vega Wallet <0>full featured<0>"
-                {'  '}
+                components={[<span className="text-xs">full featured</span>]}
-                <span className="text-xs">{t('full featured')}</span>
+              />
-              </>
             }
             description={t(
-              `Connect with Vega Wallet extension
+              'Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.',
-              for %s to access all features including key
+              { browserName }
-              management and detailed transaction views from your
-              browser.`,
-              [browserName]
             )}
           />
         ) : (
           <div>
             <h1 className="mb-1 text-lg">
-              <span>{t('Vega Wallet')}</span>
+              <Trans
-              {'  '}
+                defaults="Vega Wallet <0>full featured<0>"
-              <span className="text-xs"> {t('full featured')}</span>
+                components={[<span className="text-xs">full featured</span>]}
+              />
             </h1>
             <p className="mb-2 text-sm">
               {t(
-                `Install Vega Wallet extension
+                'Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.',
-              for %s to access all features including key
+                { browserName }
-              management and detailed transaction views from your
-              browser.`,
-                [browserName]
               )}
             </p>
             <GetWalletButton
@@ -307,11 +303,10 @@ const ConnectorList = ({
               <ConnectionOptionWithDescription
                 type="snap"
                 title={
-                  <>
+                  <Trans
-                    <span>{t('Metamask Snap')}</span>
+                    defaults="Metamask Snap <0>quick start</0>"
-                    {'  '}
+                    components={[<span className="text-xs">quick start</span>]}
-                    <span className="text-xs"> {t('quick start')}</span>
+                  />
-                  </>
                 }
                 description={t(
                   `Connect directly via Metamask with the Vega Snap for single key support without advanced features.`
@@ -336,11 +331,12 @@ const ConnectorList = ({
                   type="snap"
                   disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
                   title={
-                    <>
+                    <Trans
-                      <span>{t('Metamask Snap')}</span>
+                      defaults="Metamask Snap <0>quick start</0>"
-                      {'  '}
+                      components={[
-                      <span className="text-xs"> {t('quick start')}</span>
+                        <span className="text-xs">quick start</span>,
-                    </>
+                      ]}
+                    />
                   }
                   description={t(
                     `Install Metamask with the Vega Snap for single key support without advanced features.`
@@ -363,11 +359,14 @@ const ConnectorList = ({
                 />
                 {snapStatus === SnapStatus.NOT_SUPPORTED ? (
                   <p className="text-muted pt-1 text-xs leading-tight">
-                    {t('No MetaMask version that supports snaps detected.')}{' '}
+                    <Trans
-                    {t('Learn more about')}{' '}
+                      defaults="No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>"
-                    <ExternalLink href="https://metamask.io/snaps/">
+                      components={[
-                      MetaMask Snaps
+                        <ExternalLink href="https://metamask.io/snaps/">
-                    </ExternalLink>
+                          MetaMask Snaps
+                        </ExternalLink>,
+                      ]}
+                    />
                   </p>
                 ) : null}
               </>
@@ -469,6 +468,7 @@ export const GetWalletButton = ({
   mozillaExtensionUrl?: string;
   className?: string;
 }) => {
+  const t = useT();
   const isItChrome = window.navigator.userAgent.includes('Chrome');
   const isItMozilla =
     window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
@@ -599,6 +599,7 @@ const CustomUrlInput = ({
   isDesktopWalletRunning: boolean | null;
   onSelect: (type: WalletType) => void;
 }) => {
+  const t = useT();
   const { pubKey } = useVegaWallet();
   const [urlInputExpanded, setUrlInputExpanded] = useState(false);
   return urlInputExpanded ? (
@@ -654,18 +655,22 @@ const CustomUrlInput = ({
             </button>
           ) : (
             <p className="text-muted leading-tight">
-              <span className="text-xs">
+              <Trans
-                {t(
+                defaults="<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>"
-                  'No running Desktop App/CLI detected. Open your app now to connect or enter a'
+                components={[
-                )}
+                  <span className="text-xs">
-              </span>{' '}
+                    No running Desktop App/CLI detected. Open your app now to
-              <button
+                    connect or enter a
-                className="text-xs underline"
+                  </span>,
-                onClick={() => setUrlInputExpanded(true)}
+                  <button
-                disabled={Boolean(pubKey)}
+                    className="text-xs underline"
-              >
+                    onClick={() => setUrlInputExpanded(true)}
-                {t('custom wallet location')}
+                    disabled={Boolean(pubKey)}
-              </button>
+                  >
+                    custom wallet location
+                  </button>,
+                ]}
+              />
             </p>
           )}
         </div>

libs/wallet/src/connect-dialog/injected-connector-form.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { Status } from '../use-injected-connector';
 import { ConnectDialogTitle } from './connect-dialog-elements';
 import type { ReactNode } from 'react';
@@ -12,6 +11,7 @@ import {
 import { setAcknowledged } from '../storage';
 import { useVegaWallet } from '../use-vega-wallet';
 import { InjectedConnectorErrors, SnapConnectorErrors } from '../connectors';
+import { useT } from '../use-t';
 
 export const InjectedConnectorForm = ({
   status,
@@ -28,6 +28,7 @@ export const InjectedConnectorForm = ({
   reset: () => void;
   riskMessage?: React.ReactNode;
 }) => {
+  const t = useT();
   const { disconnect } = useVegaWallet();
 
   if (status === Status.Idle) {
@@ -109,7 +110,7 @@ export const InjectedConnectorForm = ({
 
 const Center = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex items-center justify-center my-6">{children}</div>
+    <div className="my-6 flex items-center justify-center">{children}</div>
   );
 };
 
@@ -122,6 +123,7 @@ const Error = ({
   appChainId: string;
   onTryAgain: () => void;
 }) => {
+  const t = useT();
   let title = t('Something went wrong');
   let text: ReactNode | undefined = t('An unknown error occurred');
   const tryAgain: ReactNode | null = (
@@ -139,8 +141,8 @@ const Error = ({
     ) {
       title = t('Wrong network');
       text = t(
-        'To complete your wallet connection, set your wallet network in your app to "%s".',
+        'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
-        appChainId
+        { appChainId }
       );
     } else if (
       error.message === InjectedConnectorErrors.VEGA_UNDEFINED.message

libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx

@@ -1,5 +1,4 @@
 import capitalize from 'lodash/capitalize';
-import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   ButtonLink,
@@ -16,6 +15,7 @@ import { ConnectDialogTitle } from './connect-dialog-elements';
 import { Status } from '../use-json-rpc-connect';
 import { useVegaWallet } from '../use-vega-wallet';
 import { setAcknowledged } from '../storage';
+import { useT } from '../use-t';
 
 export const ServiceErrors = {
   NO_HEALTHY_NODE: 1000,
@@ -39,6 +39,7 @@ export const JsonRpcConnectorForm = ({
   reset: () => void;
   riskMessage?: React.ReactNode;
 }) => {
+  const t = useT();
   const { disconnect } = useVegaWallet();
   if (status === Status.Idle) {
     return null;
@@ -140,7 +141,7 @@ export const JsonRpcConnectorForm = ({
 
 const Center = ({ children }: { children: ReactNode }) => {
   return (
-    <div className="flex justify-center items-center my-6">{children}</div>
+    <div className="my-6 flex items-center justify-center">{children}</div>
   );
 };
 
@@ -155,6 +156,7 @@ const Error = ({
   appChainId: string;
   onTryAgain: () => void;
 }) => {
+  const t = useT();
   const { links } = useVegaWallet();
   let title = t('Something went wrong');
   let text: ReactNode | undefined = t('An unknown error occurred');
@@ -168,13 +170,15 @@ const Error = ({
     if (error.code === ClientErrors.NO_SERVICE.code) {
       title = t('No wallet detected');
       text = connectorUrl
-        ? t('No wallet application running at %s', connectorUrl)
+        ? t('No wallet application running at {{connectorUrl}}', {
+            connectorUrl,
+          })
         : t('No Vega Wallet application running');
     } else if (error.code === ClientErrors.WRONG_NETWORK.code) {
       title = t('Wrong network');
       text = t(
-        'To complete your wallet connection, set your wallet network in your app to "%s".',
+        'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
-        appChainId
+        { appChainId }
       );
     } else if (error.code === ServiceErrors.NO_HEALTHY_NODE) {
       title = error.title;
@@ -196,9 +200,8 @@ const Error = ({
       text = (
         <>
           {t(
-            `To complete your wallet connection, set your wallet network in your
+            'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
-            app to %s.`,
+            { appChainId }
-            appChainId
           )}
         </>
       );
@@ -213,15 +216,15 @@ const Error = ({
         </span>
       );
     } else {
-      title = t(error.title);
+      title = error.title;
-      text = t(error.message);
+      text = error.message;
     }
   }
 
   return (
     <>
       <ConnectDialogTitle>{title}</ConnectDialogTitle>
-      <p className="text-center mb-2 first-letter:uppercase">{text}</p>
+      <p className="mb-2 text-center first-letter:uppercase">{text}</p>
       {tryAgain}
     </>
   );

libs/wallet/src/connect-dialog/view-connector-form.tsx

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import {
   TradingFormGroup,
   TradingInput,
@@ -12,6 +11,7 @@ import { useForm } from 'react-hook-form';
 import type { ViewConnector } from '../connectors';
 import { useVegaWallet } from '../use-vega-wallet';
 import { ConnectDialogTitle } from './connect-dialog-elements';
+import { useT } from '../use-t';
 
 interface FormFields {
   address: string;
@@ -28,6 +28,7 @@ export function ViewConnectorForm({
   onConnect,
   reset,
 }: ViewConnectorFormProps) {
+  const t = useT();
   const { connect } = useVegaWallet();
   const {
     register,

libs/wallet/src/connectors/json-rpc-connector.ts

@@ -1,4 +1,3 @@
-import { t } from '@vegaprotocol/i18n';
 import { WalletClient, WalletClientError } from '@vegaprotocol/wallet-client';
 import { clearConfig, getConfig, setConfig } from '../storage';
 import type { Transaction, VegaConnector } from './vega-connector';
@@ -7,19 +6,19 @@ import { WalletError } from './vega-connector';
 const VERSION = 'v2';
 
 export const ClientErrors = {
-  NO_SERVICE: new WalletError(t('No service'), 100),
+  NO_SERVICE: new WalletError('No service', 100),
-  INVALID_WALLET: new WalletError(t('Wallet version invalid'), 103),
+  INVALID_WALLET: new WalletError('Wallet version invalid', 103),
   WRONG_NETWORK: new WalletError(
-    t('Wrong network'),
+    'Wrong network',
     104,
-    t('App is configured to work with a different chain')
+    'App is configured to work with a different chain'
   ),
   UNKNOWN: new WalletError(
-    t('Something went wrong'),
+    'Something went wrong',
     105,
-    t('Unknown error occurred')
+    'Unknown error occurred'
   ),
-  NO_CLIENT: new WalletError(t('No client found.'), 106),
+  NO_CLIENT: new WalletError('No client found.', 106),
 } as const;
 
 export class JsonRpcConnector implements VegaConnector {
@@ -156,16 +155,10 @@ export class JsonRpcConnector implements VegaConnector {
     try {
       const result = await fetch(`${this._url}/api/${this.version}/methods`);
       if (!result.ok) {
-        const sent1 = t(
+        const sent1 = `The version of the wallet service running at ${this._url} is not supported.`;
-          'The version of the wallet service running at %s is not supported.',
+        const sent2 = `Update the wallet software to a version that expose the API ${this.version}.`;
-          this._url as string
-        );
-        const sent2 = t(
-          'Update the wallet software to a version that expose the API %s.',
-          this.version
-        );
         const data = `${sent1}\n ${sent2}`;
-        const title = t('Wallet version invalid');
+        const title = 'Wallet version invalid';
         throw new WalletError(title, ClientErrors.INVALID_WALLET.code, data);
       }
       return true;

libs/wallet/src/manage-dialog/manage-dialog.tsx

@@ -1,5 +1,4 @@
 import { truncateByChars } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   Dialog,
@@ -8,6 +7,7 @@ import {
   Icon,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '../use-vega-wallet';
+import { useT } from '../use-t';
 
 export interface VegaManageDialogProps {
   dialogOpen: boolean;
@@ -18,6 +18,7 @@ export const VegaManageDialog = ({
   dialogOpen,
   setDialogOpen,
 }: VegaManageDialogProps) => {
+  const t = useT();
   const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet();
   return (
     <Dialog
@@ -38,13 +39,13 @@ export const VegaManageDialog = ({
                 className="mb-2 last:mb-0"
               >
                 <div
-                  className="flex justify-between text-sm gap-4"
+                  className="flex justify-between gap-4 text-sm"
                   data-testid={isSelected ? 'selected-key' : ''}
                 >
                   <p data-testid="vega-public-key-full">
                     {truncateByChars(pk.publicKey)}
                   </p>
-                  <div className="flex ml-auto gap-4">
+                  <div className="ml-auto flex gap-4">
                     {!isSelected && (
                       <button
                         onClick={() => {

libs/wallet/src/setup-tests.ts

@@ -1,4 +1,17 @@
 import '@testing-library/jest-dom';
 import ResizeObserver from 'resize-observer-polyfill';
+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: ['wallet'],
+  defaultNS: 'wallet',
+});
 
 global.ResizeObserver = ResizeObserver;

libs/wallet/src/use-t.ts

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