LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(wallet): use i18next (#5299)

Browse Source 
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
Bartłomiej Głownia 2023-11-21 14:48:53 +01:00 committed by GitHub
parent c0c56e4c48
commit c98870f27d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 173 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/i18n/src/index.ts
View File

@ -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,
},
};

63
libs/i18n/src/locales/en/wallet.json Normal file
View File

@ -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"
}

7
libs/wallet/src/connect-dialog/connect-dialog-elements.tsx
View File

@ -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">

99
libs/wallet/src/connect-dialog/connect-dialog.tsx
View File

@ -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={
<>
<span>{t('Vega Wallet')}</span>
{' '}
<span className="text-xs">{t('full featured')}</span>
</>
<Trans
defaults="Vega Wallet <0>full featured<0>"
components={[<span className="text-xs">full featured</span>]}
/>
}
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 }
)}
/>
) : (
<div>
<h1 className="mb-1 text-lg">
<span>{t('Vega Wallet')}</span>
{' '}
<span className="text-xs"> {t('full featured')}</span>
<Trans
defaults="Vega Wallet <0>full featured<0>"
components={[<span className="text-xs">full featured</span>]}
/>
</h1>
<p className="mb-2 text-sm">
{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 }
)}
</p>
<GetWalletButton
@ -307,11 +303,10 @@ const ConnectorList = ({
<ConnectionOptionWithDescription
type="snap"
title={
<>
<span>{t('Metamask Snap')}</span>
{' '}
<span className="text-xs"> {t('quick start')}</span>
</>
<Trans
defaults="Metamask Snap <0>quick start</0>"
components={[<span className="text-xs">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={
<>
<span>{t('Metamask Snap')}</span>
{' '}
<span className="text-xs"> {t('quick start')}</span>
</>
<Trans
defaults="Metamask Snap <0>quick start</0>"
components={[
<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.')}{' '}
{t('Learn more about')}{' '}
<ExternalLink href="https://metamask.io/snaps/">
MetaMask Snaps
</ExternalLink>
<Trans
defaults="No MetaMask version that supports snaps detected. Learn more about <0>MetaMask Snaps</0>"
components={[
<ExternalLink href="https://metamask.io/snaps/">
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">
{t(
'No running Desktop App/CLI detected. Open your app now to connect or enter a'
)}
</span>{' '}
<button
className="text-xs underline"
onClick={() => setUrlInputExpanded(true)}
disabled={Boolean(pubKey)}
>
{t('custom wallet location')}
</button>
<Trans
defaults="<0>No running Desktop App/CLI detected. Open your app now to connect or enter a</0> <1>custom wallet location</1>"
components={[
<span className="text-xs">
No running Desktop App/CLI detected. Open your app now to
connect or enter a
</span>,
<button
className="text-xs underline"
onClick={() => setUrlInputExpanded(true)}
disabled={Boolean(pubKey)}
>
custom wallet location
</button>,
]}
/>
</p>
)}
</div>

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

@ -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".',
appChainId
'To complete your wallet connection, set your wallet network in your app to "{{appChainId}}".',
{ appChainId }
);
} else if (
error.message === InjectedConnectorErrors.VEGA_UNDEFINED.message

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

@ -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".',
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 = ({
</span>
);
} else {
title = t(error.title);
text = t(error.message);
title = error.title;
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}
</>
);

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

@ -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,

27
libs/wallet/src/connectors/json-rpc-connector.ts
View File

@ -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;

7
libs/wallet/src/manage-dialog/manage-dialog.tsx
View File

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

13
libs/wallet/src/setup-tests.ts
View File

@ -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;

3
libs/wallet/src/use-t.ts Normal file
View File

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