diff --git a/apps/trading/.env b/apps/trading/.env index 78e6de583..1e3dba3ca 100644 --- a/apps/trading/.env +++ b/apps/trading/.env @@ -1,27 +1,28 @@ +NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8 NX_ETHERSCAN_URL=https://sepolia.etherscan.io NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz -NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json -NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml -NX_VEGA_ENV=STAGNET1 -NX_VEGA_EXPLORER_URL=https://explorer.stagnet1.vega.rocks +NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613 +NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml +NX_VEGA_ENV=TESTNET +NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\"} NX_VEGA_TOKEN_URL=https://governance.fairground.wtf NX_VEGA_WALLET_URL=http://localhost:1789 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases -NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json -NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72 +NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json +NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports +NX_VEGA_CONSOLE_URL=https://console.fairground.wtf NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/firefox/addon/vega-wallet-fairground - # Cosmic elevator flags NX_SUCCESSOR_MARKETS=true NX_STOP_ORDERS=true -# NX_ICEBERG_ORDERS +NX_ICEBERG_ORDERS=true # NX_PRODUCT_PERPETUALS -NX_METAMASK_SNAPS=true +NX_METAMASK_SNAPS=false -NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks -NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket +NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz +NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx index 16c20a96a..74289f8b8 100644 --- a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx +++ b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx @@ -11,8 +11,7 @@ import { AccountBreakdownDialog } from '@vegaprotocol/accounts'; import { formatRange, formatValue } from '@vegaprotocol/utils'; import { marketMarginDataProvider } from '@vegaprotocol/accounts'; import { useDataProvider } from '@vegaprotocol/data-provider'; - -import * as Accordion from '@radix-ui/react-accordion'; +import * as AccordionPrimitive from '@radix-ui/react-accordion'; import { MARGIN_DIFF_TOOLTIP_TEXT, @@ -24,7 +23,13 @@ import { } from '../../constants'; import { useEstimateFees } from '../../hooks'; import { KeyValue } from './key-value'; -import { TOOLTIP_TRIGGER_CLASS_NAME } from '@vegaprotocol/ui-toolkit'; +import { + Accordion, + AccordionChevron, + AccordionPanel, + Tooltip, +} from '@vegaprotocol/ui-toolkit'; +import classNames from 'classnames'; const emptyValue = '-'; @@ -246,31 +251,56 @@ export const DealTicketMarginDetails = ({ const quoteName = market.tradableInstrument.instrument.product.quoteName; return ( - <> - - - - {t('Margin required')} - - } - value={formatRange( - marginRequiredBestCase, - marginRequiredWorstCase, - assetDecimals - )} - formattedValue={formatRange( - marginRequiredBestCase, - marginRequiredWorstCase, - assetDecimals, - quantum - )} - labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)} - symbol={assetSymbol} - /> - +
+ + +
+
+ + {t('Margin required')} + + + +
+ +
+ {formatRange( + marginRequiredBestCase, + marginRequiredWorstCase, + assetDecimals, + quantum + )}{' '} + {assetSymbol || ''} +
+
+
+ + } + > +
- - - +
+
+
{projectedMargin} )} - +
); }; 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 8abb895bb..9daafbcb5 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 @@ -538,7 +538,7 @@ const NotionalAndFees = ({ market.positionDecimalPlaces ); return ( -
+
)} -
+
{ const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`; const valueElement = onClick ? ( - ) : ( -
{displayValue}
+
{displayValue}
); return (
-
{label}
+
{label}
- + {valueElement}
diff --git a/libs/deal-ticket/src/constants.ts b/libs/deal-ticket/src/constants.ts index 1517df713..92c5c6bdf 100644 --- a/libs/deal-ticket/src/constants.ts +++ b/libs/deal-ticket/src/constants.ts @@ -8,7 +8,7 @@ export const EST_MARGIN_TOOLTIP_TEXT = (settlementAsset: string) => [settlementAsset] ); export const EST_TOTAL_MARGIN_TOOLTIP_TEXT = t( - 'Estimated total margin that will cover open position, active orders and this order.' + 'Estimated total margin that will cover open positions, active orders and this order.' ); export const MARGIN_ACCOUNT_TOOLTIP_TEXT = t('Margin account balance.'); export const MARGIN_DIFF_TOOLTIP_TEXT = (settlementAsset: string) => @@ -60,7 +60,7 @@ export const EST_FEES_TOOLTIP_TEXT = t( ); export const LIQUIDATION_PRICE_ESTIMATE_TOOLTIP_TEXT = t( - 'This is a approximation to the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.' + 'This is an approximation (or a range) for the liquidation price for that particular contract position, assuming nothing else changes, which may affect your margin and collateral balances.' ); export const EST_SLIPPAGE = t( diff --git a/libs/ui-toolkit/src/components/accordion/accordion.tsx b/libs/ui-toolkit/src/components/accordion/accordion.tsx index 9e52f8250..190060525 100644 --- a/libs/ui-toolkit/src/components/accordion/accordion.tsx +++ b/libs/ui-toolkit/src/components/accordion/accordion.tsx @@ -1,5 +1,6 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion'; import classNames from 'classnames'; +import type { VegaIconProps } from '../icon'; import { VegaIcon, VegaIconNames } from '../icon'; export interface AccordionItemProps { @@ -24,6 +25,28 @@ export const Accordion = ({ panels, children }: AccordionProps) => { ); }; +export const AccordionPanel = ({ + trigger, + children, + itemId, +}: { + trigger: React.ReactNode; + children: React.ReactNode; + itemId: string; +}) => { + return ( + + {trigger} + + {children} + + + ); +}; + export const AccordionItem = ({ title, content, @@ -31,7 +54,7 @@ export const AccordionItem = ({ }: AccordionPanelProps) => { const triggerClassNames = classNames( 'w-full py-2', - 'flex items-center justify-between border-b border-vega-light-200 dark:border-vega-dark-200 text-sm', + 'flex items-center justify-between gap-2 border-b border-vega-light-200 dark:border-vega-dark-200 text-sm', 'group' ); return ( @@ -41,7 +64,9 @@ export const AccordionItem = ({ data-testid="accordion-toggle" className={triggerClassNames} > - {title} + + {title} + @@ -55,15 +80,17 @@ export const AccordionItem = ({ ); }; -export const AccordionChevron = () => { +export const AccordionChevron = ({ + size = 16, +}: Pick) => { return ( - + ); }; diff --git a/libs/ui-toolkit/src/components/tooltip/tooltip.tsx b/libs/ui-toolkit/src/components/tooltip/tooltip.tsx index fdbae9814..1b3d8f30c 100644 --- a/libs/ui-toolkit/src/components/tooltip/tooltip.tsx +++ b/libs/ui-toolkit/src/components/tooltip/tooltip.tsx @@ -8,6 +8,7 @@ import { Portal, } from '@radix-ui/react-tooltip'; import type { ITooltipParams } from 'ag-grid-community'; +import classNames from 'classnames'; const tooltipContentClasses = 'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs text-black dark:text-white break-word'; @@ -18,10 +19,14 @@ export interface TooltipProps { align?: 'start' | 'center' | 'end'; side?: 'top' | 'right' | 'bottom' | 'left'; sideOffset?: number; + noUnderline?: boolean; } -export const TOOLTIP_TRIGGER_CLASS_NAME = - 'underline underline-offset-2 decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed'; +export const TOOLTIP_TRIGGER_CLASS_NAME = (noUnderline?: boolean) => + classNames( + { 'underline underline-offset-2': !noUnderline }, + 'decoration-neutral-400 dark:decoration-neutral-400 decoration-dashed' + ); // Conditionally rendered tooltip if description content is provided. export const Tooltip = ({ @@ -31,11 +36,12 @@ export const Tooltip = ({ sideOffset, align = 'start', side = 'bottom', + noUnderline, }: TooltipProps) => description ? ( - + {children} {description && (