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

fix(trading): re-use input errors instead of notification component (#2924)

Browse Source
This commit is contained in:
m.ray 2023-02-20 02:53:16 -05:00 committed by GitHub
parent 0059050440
commit 94c40cce7d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 24 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx
View File

@ -1,4 +1,4 @@
import { FormGroup, Input, NotificationError } from '@vegaprotocol/ui-toolkit';
import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
import { t, toDecimal, validateAmount } from '@vegaprotocol/react-helpers';
import type { DealTicketAmountProps } from './deal-ticket-amount';
@ -20,17 +20,17 @@ export const DealTicketLimitAmount = ({
const renderError = () => {
if (sizeError) {
return (
<NotificationError testId="dealticket-error-message-size-limit">
<InputError testId="dealticket-error-message-size-limit">
{sizeError}
</NotificationError>
</InputError>
);
}
if (priceError) {
return (
<NotificationError testId="dealticket-error-message-price-limit">
<InputError testId="dealticket-error-message-price-limit">
{priceError}
</NotificationError>
</InputError>
);
}

6
libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
View File

@ -4,7 +4,7 @@ import {
toDecimal,
validateAmount,
} from '@vegaprotocol/react-helpers';
import { Input, NotificationError, Tooltip } from '@vegaprotocol/ui-toolkit';
import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
import { isMarketInAuction } from '../../utils';
import type { DealTicketAmountProps } from './deal-ticket-amount';
import { getMarketPrice } from '../../utils/get-price';
@ -77,12 +77,12 @@ export const DealTicketMarketAmount = ({
</div>
</div>
{sizeError && (
<NotificationError
<InputError
intent="danger"
testId="dealticket-error-message-size-market"
>
{sizeError}
</NotificationError>
</InputError>
)}
</div>
);

10
libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
View File

@ -15,7 +15,7 @@ import { normalizeOrderSubmission } from '@vegaprotocol/wallet';
import { useVegaWallet } from '@vegaprotocol/wallet';
import {
ExternalLink,
NotificationError,
InputError,
Intent,
Notification,
} from '@vegaprotocol/ui-toolkit';
@ -308,11 +308,11 @@ const SummaryMessage = memo(
if (isReadOnly) {
return (
<div className="mb-4">
<NotificationError testId="dealticket-error-message-summary">
<InputError testId="dealticket-error-message-summary">
{
'You need to connect your own wallet to start trading on this market'
}
</NotificationError>
</InputError>
</div>
);
}
@ -353,9 +353,9 @@ const SummaryMessage = memo(
if (errorMessage) {
return (
<div className="mb-4">
<NotificationError testId="dealticket-error-message-summary">
<InputError testId="dealticket-error-message-summary">
{errorMessage}
</NotificationError>
</InputError>
</div>
);
}

6
libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
View File

@ -1,4 +1,4 @@
import { FormGroup, Input, NotificationError } from '@vegaprotocol/ui-toolkit';
import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
import { formatForInput } from '@vegaprotocol/react-helpers';
import { t } from '@vegaprotocol/react-helpers';
import type { UseFormRegister } from 'react-hook-form';
@ -35,9 +35,9 @@ export const ExpirySelector = ({
})}
/>
{errorMessage && (
<NotificationError testId="dealticket-error-message-expiry">
<InputError testId="dealticket-error-message-expiry">
{errorMessage}
</NotificationError>
</InputError>
)}
</FormGroup>
);

6
libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import {
FormGroup,
NotificationError,
InputError,
Select,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
@ -139,9 +139,9 @@ export const TimeInForceSelector = ({
))}
</Select>
{errorMessage && (
<NotificationError testId="dealticket-error-message-tif">
<InputError testId="dealticket-error-message-tif">
{renderError(errorMessage)}
</NotificationError>
</InputError>
)}
</FormGroup>
);

10
libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
View File

@ -1,8 +1,4 @@
import {
FormGroup,
NotificationError,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
import { FormGroup, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
import { DataGrid, t } from '@vegaprotocol/react-helpers';
import * as Schema from '@vegaprotocol/types';
import { Toggle } from '@vegaprotocol/ui-toolkit';
@ -82,9 +78,9 @@ export const TypeSelector = ({
onChange={(e) => onSelect(e.target.value as Schema.OrderType)}
/>
{errorMessage && (
<NotificationError testId="dealticket-error-message-type">
<InputError testId="dealticket-error-message-type">
{renderError(errorMessage as MarketModeValidationType)}
</NotificationError>
</InputError>
)}
</FormGroup>
);

38
libs/ui-toolkit/src/components/input-error/input-error.tsx
View File

@ -1,52 +1,18 @@
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
import { Intent } from '../../utils/intent';
import { Notification } from '../notification';
interface InputErrorProps extends HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
intent?: 'danger' | 'warning';
forInput?: string;
}
interface NotificationErrorProps extends HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
intent?: Intent | 'danger' | 'warning';
forInput?: string;
testId?: string;
}
const getIntent = (intent: Intent | 'danger' | 'warning') => {
switch (intent) {
case 'danger':
return Intent.Danger;
case 'warning':
return Intent.Warning;
default:
return intent;
}
};
export const NotificationError = ({
intent = Intent.Danger,
children,
forInput,
testId,
}: NotificationErrorProps) => {
return (
<Notification
intent={getIntent(intent)}
testId={testId || 'input-error-text'}
message={<div className="role">{children}</div>}
aria-describedby={forInput}
/>
);
};
export const InputError = ({
intent = 'danger',
children,
forInput,
testId,
...props
}: InputErrorProps) => {
const effectiveClassName = classNames(
@ -63,7 +29,7 @@ export const InputError = ({
);
return (
<div
data-testid="input-error-text"
data-testid={testId || 'input-error-text'}
aria-describedby={forInput}
className={effectiveClassName}
{...props}