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

feat(ui-toolkit): use i18next (#5289)

Browse Source 
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
This commit is contained in:
Bartłomiej Głownia 2023-11-20 00:27:52 +01:00 committed by GitHub
parent bb47747501
commit 61a9eb2f5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 194 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/explorer/src/app/app.tsx
View File

@ -1,3 +1,4 @@
import '../i18n';
import {
NetworkLoader,
NodeFailure,
@ -28,10 +29,13 @@ function App() {
);
return (
<TendermintWebsocketProvider>
<Suspense fallback={splashLoading}>
<NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
<NodeGuard
skeleton={<div>{t('Loading')}</div>}
failure={<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
failure={
<NodeFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />
}
>
<Suspense fallback={splashLoading}>
<RouterProvider router={router} fallbackElement={splashLoading} />
@ -42,6 +46,7 @@ function App() {
setOpen={setNodeSwitcherOpen}
/>
</NetworkLoader>
</Suspense>
</TendermintWebsocketProvider>
);
}

14
apps/explorer/src/app/setup-tests.ts
View File

@ -3,6 +3,9 @@
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import { locales } from '@vegaprotocol/i18n';
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
Object.defineProperty(window, 'ResizeObserver', {
writable: false,
@ -13,3 +16,14 @@ Object.defineProperty(window, 'ResizeObserver', {
disconnect: jest.fn(),
})),
});
// 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',
nsSeparator: false,
ns: ['explorer'],
defaultNS: 'explorer',
});

1
apps/explorer/src/assets/locales Symbolic link
View File

@ -0,0 +1 @@
../../../../libs/i18n/src/locales

45
apps/explorer/src/i18n/index.ts Normal file
View File

@ -0,0 +1,45 @@
import type { Module } from 'i18next';
import i18n from 'i18next';
import HttpBackend from 'i18next-http-backend';
import LocizeBackend from 'i18next-locize-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
const isInDev = process.env.NODE_ENV === 'development';
const useLocize = isInDev && !!process.env.NX_USE_LOCIZE;
const backend = useLocize
? {
projectId: '96ac1231-4bdd-455a-b9d7-f5322a2e7430',
apiKey: process.env.NX_LOCIZE_API_KEY,
referenceLng: 'en',
}
: {
loadPath: '/assets/locales/{{lng}}/{{ns}}.json',
};
const Backend: Module = useLocize ? LocizeBackend : HttpBackend;
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
lng: 'en',
fallbackLng: 'en',
supportedLngs: ['en'],
load: 'languageOnly',
debug: isInDev,
// have a common namespace used around the full app
ns: ['explorer'],
defaultNS: 'explorer',
keySeparator: false, // we use content as keys
nsSeparator: false,
backend,
saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY,
interpolation: {
escapeValue: false,
},
});
export default i18n;

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

@ -15,6 +15,7 @@ import en_markets from './locales/en/markets.json';
import en_web3 from './locales/en/web3.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';
export const locales = {
en: {
@ -33,5 +34,6 @@ export const locales = {
web3: en_web3,
positions: en_positions,
trades: en_trades,
'ui-toolkit': en_ui_toolkit,
},
};

1
libs/i18n/src/locales/en/explorer.json Normal file
View File

@ -0,0 +1 @@
{}

21
libs/i18n/src/locales/en/ui-toolkit.json Normal file
View File

@ -0,0 +1,21 @@
{
"{{fee}} Fee": "{{fee}} Fee",
"Auction Trigger stake {{trigger}}": "Auction Trigger stake {{trigger}}",
"Collapse": "Collapse",
"Copied": "Copied",
"Dark mode": "Dark mode",
"Dismiss all toasts": "Dismiss all toasts",
"Dismiss all": "Dismiss all",
"Exit view as": "Exit view as",
"Expand": "Expand",
"Light mode": "Light mode",
"Loading...": "Loading...",
"No data": "No data",
"Providers greater than 2x target stake not shown": "Providers greater than 2x target stake not shown",
"Show more": "Show more",
"Something went wrong: {{errorMessage}}": "Something went wrong: {{errorMessage}}",
"Target stake {{target}}": "Target stake {{target}}",
"This is an example of a toast notification": "This is an example of a toast notification",
"Try again": "Try again",
"Viewing as Vega user: {{pubKey}}": "Viewing as Vega user: {{pubKey}}"
}

14
libs/ui-toolkit/__mocks__/react-i18next.ts Normal file
View File

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

16
libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx
View File

@ -1,7 +1,7 @@
import { Splash } from '../splash';
import type { ReactNode } from 'react';
import { t } from '@vegaprotocol/i18n';
import { Button } from '../button';
import { useT } from '../../use-t';
interface AsyncRendererProps<T> {
loading: boolean;
@ -28,15 +28,18 @@ export function AsyncRenderer<T = object>({
render,
reload,
}: AsyncRendererProps<T>) {
const t = useT();
if (error) {
if (!data || (Array.isArray(data) && !data.length)) {
return (
<div className="h-full flex items-center justify-center">
<div className="h-12 flex flex-col items-center">
<div className="flex h-full items-center justify-center">
<div className="flex h-12 flex-col items-center">
<Splash>
{errorMessage
? errorMessage
: t(`Something went wrong: ${error.message}`)}
: t('Something went wrong: {{errorMessage}}', {
errorMessage: error.message,
})}
</Splash>
{reload && error.message === 'Timeout exceeded' && (
<Button
@ -77,6 +80,7 @@ export function AsyncRendererInline<T>({
render,
reload,
}: AsyncRendererProps<T>) {
const t = useT();
const wrapperClasses = 'text-sm';
if (error) {
if (!data) {
@ -85,7 +89,9 @@ export function AsyncRendererInline<T>({
<p>
{errorMessage
? errorMessage
: t(`Something went wrong: ${error.message}`)}
: t('Something went wrong: {{errorMessage}}', {
errorMessage: error.message,
})}
</p>
{reload && error.message === 'Timeout exceeded' && (
<Button

3
libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx
View File

@ -5,7 +5,7 @@ import { forwardRef } from 'react';
import { VegaIcon, VegaIconNames } from '../icon';
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
import CopyToClipboard from 'react-copy-to-clipboard';
import { t } from '@vegaprotocol/i18n';
import { useT } from '../../use-t';
const itemClass = classNames(
'relative flex gap-2 items-center rounded-sm p-2 text-sm',
@ -214,6 +214,7 @@ export const DropdownMenuCopyItem = ({
value: string;
text: string;
}) => {
const t = useT();
const [copied, setCopied] = useCopyTimeout();
return (

45
libs/ui-toolkit/src/components/healthbar/healthbar.tsx
View File

@ -3,14 +3,14 @@ import {
addDecimalsFormatNumber,
formatNumberPercentage,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { BigNumber } from 'bignumber.js';
import { getIntentBackground, Intent } from '../../utils/intent';
import { Indicator } from '../indicator';
import { Tooltip } from '../tooltip';
import { useT } from '../../use-t';
const Remainder = () => (
<div className="bg-greys-light-200 h-[inherit] relative flex-1" />
<div className="bg-greys-light-200 relative h-[inherit] flex-1" />
);
const Target = ({
@ -22,6 +22,7 @@ const Target = ({
target: string;
decimals: number;
}) => {
const t = useT();
return (
<Tooltip
description={
@ -30,20 +31,22 @@ const Target = ({
<Indicator variant={Intent.None} />
</div>
<span>
{t('Target stake')} {addDecimalsFormatNumber(target, decimals)}
{t('Target stake {{target}}', {
target: addDecimalsFormatNumber(target, decimals),
})}{' '}
</span>
</div>
}
>
<div
className={classNames(
'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
'group absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5'
)}
style={{ left: '50%' }}
>
<div
className={classNames(
'health-target w-0.5 bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-x-150 group-hover:scale-y-108',
'health-target bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-y-108 w-0.5 group-hover:scale-x-150',
{
'h-6': !isLarge,
'h-12': isLarge,
@ -66,6 +69,7 @@ const AuctionTarget = ({
rangeLimit: number;
decimals: number;
}) => {
const t = useT();
const leftPosition = new BigNumber(trigger).div(rangeLimit).multipliedBy(100);
return (
<Tooltip
@ -75,15 +79,16 @@ const AuctionTarget = ({
<Indicator variant={Intent.None} />
</div>
<span>
{t('Auction Trigger stake')}{' '}
{addDecimalsFormatNumber(trigger, decimals)}
{t('Auction Trigger stake {{trigger}}', {
trigger: addDecimalsFormatNumber(trigger, decimals),
})}
</span>
</div>
}
>
<div
className={classNames(
'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
'group absolute left-1/2 top-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5'
)}
style={{
left: `${leftPosition}%`,
@ -91,7 +96,7 @@ const AuctionTarget = ({
>
<div
className={classNames(
'health-target w-0.5 group-hover:scale-x-150 group-hover:scale-y-108 dashed-background',
'health-target group-hover:scale-y-108 dashed-background w-0.5 group-hover:scale-x-150',
{
'h-6': !isLarge,
'h-12': isLarge,
@ -120,6 +125,7 @@ const Level = ({
decimals: number;
intent: Intent;
}) => {
const t = useT();
const width = new BigNumber(commitmentAmount)
.div(rangeLimit)
.multipliedBy(100)
@ -134,9 +140,7 @@ const Level = ({
<div className="mt-1.5 inline-flex">
<Indicator variant={intent} />
</div>
<span>
{formattedFee} {t('Fee')}
</span>
<span>{t('{{fee}} Fee', { fee: formattedFee })}</span>
<div className="flex flex-col">
<span>
{prevLevel ? addDecimalsFormatNumber(prevLevel, decimals) : '0'} -{' '}
@ -149,14 +153,14 @@ const Level = ({
return (
<Tooltip description={tooltipContent}>
<div
className={classNames(`relative h-[inherit] w-full group min-w-[1px]`)}
className="group relative h-[inherit] w-full min-w-[1px]"
style={{
width: `${width}%`,
}}
>
<div
className={classNames(
'relative w-full h-[inherit] group-hover:scale-y-150',
'relative h-[inherit] w-full group-hover:scale-y-150',
getIntentBackground(intent)
)}
style={{ opacity }}
@ -167,7 +171,7 @@ const Level = ({
};
const Full = () => (
<div className="bg-transparent w-full h-[inherit] absolute bottom-0 left-0" />
<div className="absolute bottom-0 left-0 h-[inherit] w-full bg-transparent" />
);
interface Levels {
@ -190,6 +194,7 @@ export const HealthBar = ({
intent: Intent;
triggerRatio?: string;
}) => {
const t = useT();
const targetNumber = parseInt(target, 10);
const rangeLimit = targetNumber * 2;
@ -220,7 +225,7 @@ export const HealthBar = ({
})}
>
<div
className={classNames('health-inner relative w-full flex', {
className={classNames('health-inner relative flex w-full', {
'h-4': !isLarge,
'h-8': isLarge,
})}
@ -228,8 +233,8 @@ export const HealthBar = ({
<Full />
<div
className="health-bars h-[inherit] flex w-full
gap-0.5 outline outline-vega-light-200 dark:outline-vega-dark-200"
className="health-bars outline-vega-light-200 dark:outline-vega-dark-200 flex
h-[inherit] w-full gap-0.5 outline"
>
{levels.map((p, index) => {
const { commitmentAmount, fee } = p;
@ -253,11 +258,11 @@ export const HealthBar = ({
<Tooltip
description={
<div className="text-vega-dark-100 dark:text-vega-light-200">
t( 'Providers greater than 2x target stake not shown' )
{t('Providers greater than 2x target stake not shown')}
</div>
}
>
<div className="h-[inherit] relative flex-1 leading-4">...</div>
<div className="relative h-[inherit] flex-1 leading-4">...</div>
</Tooltip>
)}
</div>

3
libs/ui-toolkit/src/components/show-more/show-more.tsx
View File

@ -1,8 +1,8 @@
import classNames from 'classnames';
import { useRef, useState, useEffect } from 'react';
import { t } from '@vegaprotocol/i18n';
import { Button } from '../button';
import type { ReactNode } from 'react';
import { useT } from '../../use-t';
type ShowMoreProps = {
children: ReactNode;
@ -15,6 +15,7 @@ export const ShowMore = ({
closedMaxHeightPx = 125,
overlayColourOverrides,
}: ShowMoreProps) => {
const t = useT();
const containerRef = useRef<HTMLDivElement | null>(null);
const [expanded, setExpanded] = useState(false);

5
libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx
View File

@ -1,7 +1,7 @@
import { t } from '@vegaprotocol/i18n';
import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
import { SunIcon, MoonIcon } from './icons';
import { Toggle } from '../toggle';
import { useT } from '../../use-t';
export const ThemeSwitcher = ({
className,
@ -10,6 +10,7 @@ export const ThemeSwitcher = ({
className?: string;
withMobile?: boolean;
}) => {
const t = useT();
const { theme, setTheme } = useThemeSwitcher();
const button = (
<button
@ -35,7 +36,7 @@ export const ThemeSwitcher = ({
];
return withMobile ? (
<>
<div className="flex grow gap-6 md:hidden whitespace-nowrap justify-between">
<div className="flex grow justify-between gap-6 whitespace-nowrap md:hidden">
{button}{' '}
<Toggle
name="theme-switch"

19
libs/ui-toolkit/src/components/toast/toast-position-setter.tsx
View File

@ -1,28 +1,27 @@
import classNames from 'classnames';
import { t } from '@vegaprotocol/i18n';
import { IconNames } from '@blueprintjs/icons';
import { Icon } from '../icon';
import { ToastPosition, useToastsConfiguration, useToasts } from './use-toasts';
import { useCallback } from 'react';
import { Intent } from '../../utils/intent';
const TEST_TOAST = {
id: 'test-toast',
intent: Intent.Primary,
content: <>{t('This is an example of a toast notification')}</>,
onClose: () => useToasts.getState().remove('test-toast'),
};
import { useT } from '../../use-t';
export const ToastPositionSetter = () => {
const t = useT();
const setPostion = useToastsConfiguration((store) => store.setPosition);
const position = useToastsConfiguration((store) => store.position);
const setToast = useToasts((store) => store.setToast);
const handleChange = useCallback(
(position: ToastPosition) => {
setPostion(position);
setToast(TEST_TOAST);
setToast({
id: 'test-toast',
intent: Intent.Primary,
content: <>{t('This is an example of a toast notification')}</>,
onClose: () => useToasts.getState().remove('test-toast'),
});
},
[setToast, setPostion]
[setToast, setPostion, t]
);
const buttonCssClasses =
'flex items-center px-1 py-1 relative rounded bg-vega-clight-400 dark:bg-vega-cdark-400';

3
libs/ui-toolkit/src/components/toast/toast.tsx
View File

@ -17,7 +17,7 @@ import {
import { Intent } from '../../utils/intent';
import { Icon, VegaIcon, VegaIconNames } from '../icon';
import { Loader } from '../loader';
import { t } from '@vegaprotocol/i18n';
import { useT } from '../../use-t';
export type ToastContent = JSX.Element | undefined;
@ -83,6 +83,7 @@ export const CollapsiblePanel = forwardRef<
HTMLDivElement,
CollapsiblePanelProps & HTMLAttributes<HTMLDivElement>
>(({ children, className, actions, ...props }, ref) => {
const t = useT();
const [collapsed, setCollapsed] = useState(true);
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions

15
libs/ui-toolkit/src/components/toast/toasts-container.tsx
View File

@ -1,4 +1,3 @@
import { t } from '@vegaprotocol/i18n';
import { usePrevious } from '@vegaprotocol/react-helpers';
import classNames from 'classnames';
import type { Ref } from 'react';
@ -9,6 +8,7 @@ import type { Toasts } from './use-toasts';
import { ToastPosition, useToasts, useToastsConfiguration } from './use-toasts';
import { Portal } from '@radix-ui/react-portal';
import { useT } from '../../use-t';
type ToastsContainerProps = {
toasts: Toasts;
@ -21,6 +21,7 @@ export const ToastsContainer = ({
order = 'asc',
showHidden = false,
}: ToastsContainerProps) => {
const t = useT();
const ref = useRef<HTMLDivElement>();
const closeAll = useToasts((store) => store.closeAll);
const position = useToastsConfiguration((store) => store.position);
@ -55,17 +56,17 @@ export const ToastsContainer = ({
'absolute z-20',
{ 'bottom-0 right-0': position === ToastPosition.BottomRight },
{ 'bottom-0 left-0': position === ToastPosition.BottomLeft },
{ 'top-0 left-0': position === ToastPosition.TopLeft },
{ 'top-0 right-0': position === ToastPosition.TopRight },
{ 'left-0 top-0': position === ToastPosition.TopLeft },
{ 'right-0 top-0': position === ToastPosition.TopRight },
{
'top-0 left-[50%] translate-x-[-50%]':
'left-[50%] top-0 translate-x-[-50%]':
position === ToastPosition.TopCenter,
},
{
'bottom-0 left-[50%] translate-x-[-50%]':
position === ToastPosition.BottomCenter,
},
'max-w-full max-h-full overflow-x-hidden overflow-y-auto',
'max-h-full max-w-full overflow-y-auto overflow-x-hidden',
{
'p-4': validToasts.length > 0, // only apply padding when toasts showing, otherwise a small section of the screen is covered
hidden: validToasts.length === 0,
@ -89,9 +90,9 @@ export const ToastsContainer = ({
})}
<div
className={classNames(
'absolute w-full top-[-38px] right-0 z-20',
'absolute right-0 top-[-38px] z-20 w-full',
'transition-opacity',
'opacity-0 group-hover:opacity-50 hover:!opacity-100',
'opacity-0 hover:!opacity-100 group-hover:opacity-50',
{
hidden: validToasts.length === 0,
}

3
libs/ui-toolkit/src/components/trading-dropdown/trading-dropdown.tsx
View File

@ -4,7 +4,7 @@ import { forwardRef, type ComponentProps, type ReactNode } from 'react';
import { VegaIcon, VegaIconNames } from '../icon';
import { useCopyTimeout } from '@vegaprotocol/react-helpers';
import CopyToClipboard from 'react-copy-to-clipboard';
import { t } from '@vegaprotocol/i18n';
import { useT } from '../../use-t';
const itemClass = classNames(
'relative flex gap-2 items-center rounded-sm p-2 text-sm',
@ -188,6 +188,7 @@ export const TradingDropdownCopyItem = ({
value: string;
text: string;
}) => {
const t = useT();
const [copied, setCopied] = useCopyTimeout();
return (

6
libs/ui-toolkit/src/components/vega-logo/vega-logo.tsx
View File

@ -1,12 +1,10 @@
import { t } from '@vegaprotocol/i18n';
type VegaLogoProps = {
className?: string;
};
export const VegaLogo = ({ className }: VegaLogoProps) => {
return (
<svg
aria-label={t('Vega logo')}
aria-label="Vega"
className={className || 'h-6'}
fill="none"
xmlns="http://www.w3.org/2000/svg"
@ -23,7 +21,7 @@ export const VegaLogo = ({ className }: VegaLogoProps) => {
export const VLogo = ({ className }: { className?: string }) => {
return (
<svg
aria-label={t('Vega logo')}
aria-label="Vega"
width="29"
height="34"
fill="currentColor"

17
libs/ui-toolkit/src/components/viewing-as-user/index.tsx
View File

@ -1,7 +1,7 @@
import { t } from '@vegaprotocol/i18n';
import { NotificationBanner, SHORT } from '../notification-banner';
import { Intent } from '../../utils/intent';
import { TradingButton } from '../trading-button';
import { useT } from '../../use-t';
export function truncateMiddle(address: string, start = 6, end = 4) {
if (address.length < 11) return address;
@ -21,15 +21,14 @@ export const ViewingAsBanner = ({
pubKey,
disconnect,
}: ViewingAsBannerProps) => {
const t = useT();
return (
<NotificationBanner
data-testid="view-banner"
intent={Intent.None}
className={SHORT}
>
<div className="flex justify-between items-baseline">
<span>
{t('Viewing as Vega user:')} {pubKey && truncateMiddle(pubKey)}{' '}
<NotificationBanner intent={Intent.None} className={SHORT}>
<div className="flex items-baseline justify-between">
<span data-testid="view-banner">
{t('Viewing as Vega user: {{pubKey}}', {
pubKey: pubKey && truncateMiddle(pubKey),
})}
</span>
<TradingButton
intent={Intent.None}

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

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