diff --git a/libs/i18n/src/index.ts b/libs/i18n/src/index.ts index c72f1729a..b9a255335 100644 --- a/libs/i18n/src/index.ts +++ b/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, }, }; diff --git a/libs/i18n/src/locales/en/wallet.json b/libs/i18n/src/locales/en/wallet.json new file mode 100644 index 000000000..07d158bf1 --- /dev/null +++ b/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": "Metamask Snap <0>quick start", + "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": "No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps", + "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 <1>custom wallet location": "<0>No running Desktop App/CLI detected. Open your app now to connect or enter a <1>custom wallet location", + "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" +} diff --git a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx b/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx index b078d9c3e..72f791c5d 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog-elements.tsx +++ b/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 ( -

+

{children}

); @@ -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 ( -
+
{!isItChrome && !isItMozilla ? ( <> diff --git a/libs/wallet/src/connect-dialog/connect-dialog.tsx b/libs/wallet/src/connect-dialog/connect-dialog.tsx index 58163c6ec..e25ae684d 100644 --- a/libs/wallet/src/connect-dialog/connect-dialog.tsx +++ b/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={ - <> - {t('Vega Wallet')} - {' '} - {t('full featured')} - + full featured]} + /> } description={t( - `Connect with Vega Wallet extension - for %s to access all features including key - management and detailed transaction views from your - browser.`, - [browserName] + 'Connect with Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.', + { browserName } )} /> ) : (

- {t('Vega Wallet')} - {' '} - {t('full featured')} + full featured]} + />

{t( - `Install Vega Wallet extension - for %s to access all features including key - management and detailed transaction views from your - browser.`, - [browserName] + 'Install Vega Wallet extension for {{browserName}} to access all features including key management and detailed transaction views from your browser.', + { browserName } )}

- {t('Metamask Snap')} - {' '} - {t('quick start')} - + quick start]} + /> } 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={ - <> - {t('Metamask Snap')} - {' '} - {t('quick start')} - + quick start, + ]} + /> } 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 ? (

- {t('No MetaMask version that supports snaps detected.')}{' '} - {t('Learn more about')}{' '} - - MetaMask Snaps - + + MetaMask Snaps + , + ]} + />

) : 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 = ({ ) : (

- - {t( - 'No running Desktop App/CLI detected. Open your app now to connect or enter a' - )} - {' '} - + + No running Desktop App/CLI detected. Open your app now to + connect or enter a + , + , + ]} + />

)}
diff --git a/libs/wallet/src/connect-dialog/injected-connector-form.tsx b/libs/wallet/src/connect-dialog/injected-connector-form.tsx index 88ca00a39..e5e3bd2e8 100644 --- a/libs/wallet/src/connect-dialog/injected-connector-form.tsx +++ b/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 ( -
{children}
+
{children}
); }; @@ -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".', - appChainId + 'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".', + { appChainId } ); } else if ( error.message === InjectedConnectorErrors.VEGA_UNDEFINED.message diff --git a/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx b/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx index b0443cc46..f8bac0a89 100644 --- a/libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx +++ b/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 ( -
{children}
+
{children}
); }; @@ -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".', - appChainId + 'To complete your wallet connection, set your wallet network in your app to "{{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 - app to %s.`, - appChainId + 'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".', + { appChainId } )} ); @@ -213,15 +216,15 @@ const Error = ({ ); } else { - title = t(error.title); - text = t(error.message); + title = error.title; + text = error.message; } } return ( <> {title} -

{text}

+

{text}

{tryAgain} ); diff --git a/libs/wallet/src/connect-dialog/view-connector-form.tsx b/libs/wallet/src/connect-dialog/view-connector-form.tsx index 4f3c8a791..d70e032e0 100644 --- a/libs/wallet/src/connect-dialog/view-connector-form.tsx +++ b/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, diff --git a/libs/wallet/src/connectors/json-rpc-connector.ts b/libs/wallet/src/connectors/json-rpc-connector.ts index 58c698d94..89a611d2f 100644 --- a/libs/wallet/src/connectors/json-rpc-connector.ts +++ b/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), - INVALID_WALLET: new WalletError(t('Wallet version invalid'), 103), + NO_SERVICE: new WalletError('No service', 100), + 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( - 'The version of the wallet service running at %s is not supported.', - this._url as string - ); - const sent2 = t( - 'Update the wallet software to a version that expose the API %s.', - this.version - ); + const sent1 = `The version of the wallet service running at ${this._url} is not supported.`; + const sent2 = `Update the wallet software to a version that expose the API ${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; diff --git a/libs/wallet/src/manage-dialog/manage-dialog.tsx b/libs/wallet/src/manage-dialog/manage-dialog.tsx index 9a746f04e..813929ebc 100644 --- a/libs/wallet/src/manage-dialog/manage-dialog.tsx +++ b/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 (

{truncateByChars(pk.publicKey)}

-
+
{!isSelected && (