From 7aa65b3e6b368504394c26329fb2357790c22b15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20G=C5=82ownia?= Date: Wed, 15 Nov 2023 08:19:20 +0100 Subject: [PATCH] feat(orders): use i18next --- apps/trading/lib/i18n/index.ts | 1 + .../deal-ticket/deal-ticket-stop-order.tsx | 13 +++-- .../deal-ticket/time-in-force-selector.tsx | 4 +- libs/i18n/src/locales/en/orders.json | 49 +++++++++++++++++++ .../open-orders-menu/open-orders-menu.tsx | 15 +++--- .../order-list-manager/order-list-manager.tsx | 11 ++++- .../order-list/order-edit-dialog.tsx | 9 ++-- .../lib/components/order-list/order-list.tsx | 17 ++++--- .../order-list/order-view-dialog.tsx | 13 ++--- .../stop-orders-manager.tsx | 3 +- .../stop-orders-table/stop-orders-table.tsx | 7 +-- libs/orders/src/lib/index.ts | 1 - libs/orders/src/lib/use-t.ts | 2 + libs/orders/src/lib/utils.spec.ts | 28 ----------- libs/orders/src/lib/utils.ts | 22 --------- 15 files changed, 111 insertions(+), 84 deletions(-) create mode 100644 libs/i18n/src/locales/en/orders.json create mode 100644 libs/orders/src/lib/use-t.ts delete mode 100644 libs/orders/src/lib/utils.spec.ts delete mode 100644 libs/orders/src/lib/utils.ts diff --git a/apps/trading/lib/i18n/index.ts b/apps/trading/lib/i18n/index.ts index cf7d361eb..9a37f7060 100644 --- a/apps/trading/lib/i18n/index.ts +++ b/apps/trading/lib/i18n/index.ts @@ -71,6 +71,7 @@ i18n defaultNS: 'trading', nsSeparator: false, keySeparator: false, // we use content as keys + nsSeparator: false, backend, debug: isInDev, saveMissing: useLocize && !!process.env.NX_LOCIZE_API_KEY, diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx index 9a6b71657..99f1c8002 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx @@ -36,7 +36,6 @@ import { } from '@vegaprotocol/markets'; import { ExpirySelector } from './expiry-selector'; import { SideSelector } from './side-selector'; -import { timeInForceLabel } from '@vegaprotocol/orders'; import { NoWalletWarning, REDUCE_ONLY_TOOLTIP, @@ -479,13 +478,21 @@ const TimeInForce = ({ key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC} value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC} > - {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)} + { + Schema.OrderTimeInForceMapping[ + Schema.OrderTimeInForce.TIME_IN_FORCE_IOC + ] + } diff --git a/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx b/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx index 153d6e084..916512366 100644 --- a/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx @@ -6,7 +6,7 @@ import { SimpleGrid, } from '@vegaprotocol/ui-toolkit'; import * as Schema from '@vegaprotocol/types'; -import { timeInForceLabel } from '@vegaprotocol/orders'; +import { OrderTimeInForceMapping } from '@vegaprotocol/types'; import { compileGridData } from '../trading-mode-tooltip'; import { MarketModeValidationType } from '../../constants'; import type { Market, StaticMarketData } from '@vegaprotocol/markets'; @@ -120,7 +120,7 @@ export const TimeInForceSelector = ({ > {options.map(([key, value]) => ( ))} diff --git a/libs/i18n/src/locales/en/orders.json b/libs/i18n/src/locales/en/orders.json new file mode 100644 index 000000000..e4705041f --- /dev/null +++ b/libs/i18n/src/locales/en/orders.json @@ -0,0 +1,49 @@ +{ + "{{tifLabel}}. Post Only": "{{tifLabel}}. Post Only", + "{{tifLabel}}. Reduce only": "{{tifLabel}}. Reduce only", + "Cancel": "Cancel", + "Cancel all": "Cancel all", + "Cancel order": "Cancel order", + "Cancels": "Cancels", + "Copy": "Copy", + "Copy order ID": "Copy order ID", + "Created": "Created", + "Edit order": "Edit order", + "Expires": "Expires", + "Expires at": "Expires at", + "Filled": "Filled", + "Iceberg order": "Iceberg order", + "Liquidity provision": "Liquidity provision", + "Market": "Market", + "MAX": "MAX", + "Minimum size": "Minimum size", + "No orders": "No orders", + "No stop orders": "No stop orders", + "One Cancels the Other": "One Cancels the Other", + "Order details": "Order details", + "Order ID": "Order ID", + "Peak size": "Peak size", + "Pegged": "Pegged", + "Post only": "Post only", + "Price": "Price", + "Reduce only": "Reduce only", + "Remaining": "Remaining", + "Reserved remaining": "Reserved remaining", + "Side": "Side", + "Size": "Size", + "Something went wrong: {{errorMessage}}": "Something went wrong: {{errorMessage}}", + "Status": "Status", + "Submit": "Submit", + "The maximum volume that can be traded at once. Must be less than the total size of the order.": "The maximum volume that can be traded at once. Must be less than the total size of the order.", + "The price cannot be negative": "The price cannot be negative", + "The size cannot be negative": "The size cannot be negative", + "Trigger": "Trigger", + "Type": "Type", + "Update": "Update", + "Updated": "Updated", + "View order details": "View order details", + "When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.": "When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.", + "Yes": "Yes", + "You need to provide a price": "You need to provide a price", + "You need to provide a size": "You need to provide a size" +} diff --git a/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx b/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx index 593781c74..b3e7bc2ec 100644 --- a/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx +++ b/libs/orders/src/lib/components/open-orders-menu/open-orders-menu.tsx @@ -1,8 +1,8 @@ -import { t } from '@vegaprotocol/i18n'; import { TradingButton } from '@vegaprotocol/ui-toolkit'; import { useVegaWallet } from '@vegaprotocol/wallet'; import { useVegaTransactionStore } from '@vegaprotocol/web3'; import { useHasAmendableOrder } from '../../order-hooks'; +import { useT } from '../../use-t'; export const OpenOrdersMenu = () => { const { isReadOnly } = useVegaWallet(); @@ -28,8 +28,11 @@ export const OpenOrdersMenu = () => { ); }; -const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => ( - - {t('Cancel all')} - -); +const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => { + const t = useT(); + return ( + + {t('Cancel all')} + + ); +}; diff --git a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx index c35a27989..aa08064af 100644 --- a/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx +++ b/libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx @@ -1,4 +1,3 @@ -import { t } from '@vegaprotocol/i18n'; import { useCallback, useRef, useState, useEffect } from 'react'; import { type AgGridReact } from 'ag-grid-react'; import { Pagination, type useDataGridEvents } from '@vegaprotocol/datagrid'; @@ -12,6 +11,7 @@ import { type Order } from '../order-data-provider'; import { OrderViewDialog } from '../order-list/order-view-dialog'; import { OrderListTable } from '../order-list'; import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider'; +import { useT } from '../../use-t'; export enum Filter { 'Open' = 'Open', @@ -38,6 +38,7 @@ export const OrderListManager = ({ gridProps, noRowsMessage, }: OrderListManagerProps) => { + const t = useT(); const gridRef = useRef(null); const [editOrder, setEditOrder] = useState(null); const [viewOrder, setViewOrder] = useState(null); @@ -85,7 +86,13 @@ export const OrderListManager = ({ ); if (error) { - return {t(`Something went wrong: ${error.message}`)}; + return ( + + {t(`Something went wrong: {{errorMessage}}`, { + errorMessage: error.message, + })} + + ); } return ( diff --git a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx index 4ccfd2aa9..9d9638c13 100644 --- a/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx +++ b/libs/orders/src/lib/components/order-list/order-edit-dialog.tsx @@ -5,7 +5,6 @@ import { addDecimalsFormatNumber, validateAmount, } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; import { Size } from '@vegaprotocol/datagrid'; import * as Schema from '@vegaprotocol/types'; import { @@ -19,6 +18,7 @@ import { } from '@vegaprotocol/ui-toolkit'; import { useForm } from 'react-hook-form'; import type { Order } from '../order-data-provider'; +import { useT } from '../../use-t'; interface OrderEditDialogProps { isOpen: boolean; @@ -38,6 +38,7 @@ export const OrderEditDialog = ({ order, onSubmit, }: OrderEditDialogProps) => { + const t = useT(); const headerClassName = 'text-xs font-bold text-black dark:text-white'; const { register, @@ -60,7 +61,7 @@ export const OrderEditDialog = ({ title={t('Edit order')} icon={} > -
+
{order.market && (

{t(`Market`)}

@@ -99,10 +100,10 @@ export const OrderEditDialog = ({
-
+
{ + const t = useT(); const showAllActions = props.isReadOnly ? false : filter === undefined || filter === Filter.Open @@ -252,11 +253,14 @@ export const OrderListTable = memo< } const tifLabel = value ? Schema.OrderTimeInForceCode[value] : ''; - const label = `${tifLabel}${ - data?.postOnly ? t('. Post Only') : '' - }${data?.reduceOnly ? t('. Reduce only') : ''}`; + if (data?.postOnly) { + return t('{{tifLabel}}. Post Only', { tifLabel }); + } + if (data?.reduceOnly) { + return t('{{tifLabel}}. Reduce only', { tifLabel }); + } - return label; + return tifLabel; }, }, { @@ -336,6 +340,7 @@ export const OrderListTable = memo< onOrderTypeClick, props.isReadOnly, showAllActions, + t, ] ); diff --git a/libs/orders/src/lib/components/order-list/order-view-dialog.tsx b/libs/orders/src/lib/components/order-list/order-view-dialog.tsx index 0af3098e4..491cecda6 100644 --- a/libs/orders/src/lib/components/order-list/order-view-dialog.tsx +++ b/libs/orders/src/lib/components/order-list/order-view-dialog.tsx @@ -2,7 +2,6 @@ import { addDecimalsFormatNumber, getDateTimeFormat, } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; import { Size } from '@vegaprotocol/datagrid'; import * as Schema from '@vegaprotocol/types'; import { @@ -19,6 +18,7 @@ import type { Order } from '../order-data-provider'; import CopyToClipboard from 'react-copy-to-clipboard'; import { useCopyTimeout } from '@vegaprotocol/react-helpers'; import classNames from 'classnames'; +import { useT } from '../../use-t'; interface OrderViewDialogProps { isOpen: boolean; @@ -33,6 +33,7 @@ export const OrderViewDialog = ({ onChange, onMarketClick, }: OrderViewDialogProps) => { + const t = useT(); const [, setCopied] = useCopyTimeout(); return ( @@ -184,21 +185,21 @@ export const OrderViewDialog = ({
{t('Post only')}
- {order.postOnly ? t('Yes') : t('-')} + {order.postOnly ? t('Yes') : '-'}
{t('Reduce only')}
- {order.reduceOnly ? t('Yes') : t('-')} + {order.reduceOnly ? t('Yes') : '-'}
{t('Pegged')}
- {order.peggedOrder ? t('Yes') : t('-')} + {order.peggedOrder ? t('Yes') : '-'}
@@ -207,7 +208,7 @@ export const OrderViewDialog = ({ {t('Liquidity provision')}
- {order.liquidityProvision ? t('Yes') : t('-')} + {order.liquidityProvision ? t('Yes') : '-'}
@@ -217,7 +218,7 @@ export const OrderViewDialog = ({ {t('Iceberg order')}
- {order.icebergOrder ? t('Yes') : t('-')} + {order.icebergOrder ? t('Yes') : '-'}
{order.icebergOrder && ( diff --git a/libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx b/libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx index 750dc7951..2510d0114 100644 --- a/libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx +++ b/libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx @@ -1,4 +1,3 @@ -import { t } from '@vegaprotocol/i18n'; import { useCallback, useEffect, useState } from 'react'; import { StopOrdersTable } from '../stop-orders-table/stop-orders-table'; import { type useDataGridEvents } from '@vegaprotocol/datagrid'; @@ -11,6 +10,7 @@ import { type StopOrdersQueryVariables, } from '../order-data-provider'; import { useVegaTransactionStore } from '@vegaprotocol/web3'; +import { useT } from '../../use-t'; export interface StopOrdersManagerProps { partyId: string; @@ -27,6 +27,7 @@ export const StopOrdersManager = ({ isReadOnly, gridProps, }: StopOrdersManagerProps) => { + const t = useT(); const create = useVegaTransactionStore((state) => state.create); const [viewOrder, setViewOrder] = useState(null); const variables: StopOrdersQueryVariables = { diff --git a/libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx b/libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx index 82a3badff..ecc290891 100644 --- a/libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx +++ b/libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx @@ -5,7 +5,6 @@ import { toBigNum, formatTrigger, } from '@vegaprotocol/utils'; -import { t } from '@vegaprotocol/i18n'; import * as Schema from '@vegaprotocol/types'; import { ActionsDropdown, @@ -35,6 +34,7 @@ import type { import type { StopOrder } from '../order-data-provider/stop-orders-data-provider'; import type { ColDef } from 'ag-grid-community'; import type { Order } from '../order-data-provider'; +import { useT } from '../../use-t'; const defaultColDef = { resizable: true, @@ -51,6 +51,7 @@ export type StopOrdersTableProps = TypedDataAgGrid & { export const StopOrdersTable = memo( ({ onCancel, onMarketClick, onView, ...props }: StopOrdersTableProps) => { + const t = useT(); const showAllActions = !props.isReadOnly; const columnDefs: ColDef[] = useMemo( () => [ @@ -176,7 +177,7 @@ export const StopOrdersTable = memo( {data.ocoLinkId && ( OCO @@ -281,7 +282,7 @@ export const StopOrdersTable = memo( }, }, ], - [onCancel, onMarketClick, onView, props.isReadOnly, showAllActions] + [onCancel, onMarketClick, onView, props.isReadOnly, showAllActions, t] ); return ( diff --git a/libs/orders/src/lib/index.ts b/libs/orders/src/lib/index.ts index 35daed11d..02ce25265 100644 --- a/libs/orders/src/lib/index.ts +++ b/libs/orders/src/lib/index.ts @@ -1,3 +1,2 @@ export * from './components'; export * from './order-hooks'; -export * from './utils'; diff --git a/libs/orders/src/lib/use-t.ts b/libs/orders/src/lib/use-t.ts new file mode 100644 index 000000000..aa82ad9b2 --- /dev/null +++ b/libs/orders/src/lib/use-t.ts @@ -0,0 +1,2 @@ +import { useTranslation } from 'react-i18next'; +export const useT = () => useTranslation('orders').t; diff --git a/libs/orders/src/lib/utils.spec.ts b/libs/orders/src/lib/utils.spec.ts deleted file mode 100644 index c69c73581..000000000 --- a/libs/orders/src/lib/utils.spec.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { timeInForceLabel } from './utils'; -import * as Types from '@vegaprotocol/types'; - -describe('utils', () => { - describe('timeInForceLabel', () => { - it('should return the correct label for time in force', () => { - expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe( - `Fill or Kill (FOK)` - ); - expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe( - `Good 'til Cancelled (GTC)` - ); - expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe( - `Immediate or Cancel (IOC)` - ); - expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe( - `Good 'til Time (GTT)` - ); - expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe( - `Good for Auction (GFA)` - ); - expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe( - `Good for Normal (GFN)` - ); - expect(timeInForceLabel('')).toBe(''); - }); - }); -}); diff --git a/libs/orders/src/lib/utils.ts b/libs/orders/src/lib/utils.ts deleted file mode 100644 index 556d2865d..000000000 --- a/libs/orders/src/lib/utils.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { t } from '@vegaprotocol/i18n'; -import * as Schema from '@vegaprotocol/types'; - -// More detail in https://docs.vega.xyz/mainnet/graphql/enums/order-time-in-force -export const timeInForceLabel = (tif: string) => { - switch (tif) { - case Schema.OrderTimeInForce.TIME_IN_FORCE_GTC: - return t(`Good 'til Cancelled (GTC)`); - case Schema.OrderTimeInForce.TIME_IN_FORCE_IOC: - return t('Immediate or Cancel (IOC)'); - case Schema.OrderTimeInForce.TIME_IN_FORCE_FOK: - return t('Fill or Kill (FOK)'); - case Schema.OrderTimeInForce.TIME_IN_FORCE_GTT: - return t(`Good 'til Time (GTT)`); - case Schema.OrderTimeInForce.TIME_IN_FORCE_GFN: - return t('Good for Normal (GFN)'); - case Schema.OrderTimeInForce.TIME_IN_FORCE_GFA: - return t('Good for Auction (GFA)'); - default: - return t(tif); - } -};