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

chore: switch components to use trading versions

Browse Source
This commit is contained in:
Matthew Russell
2023-08-22 09:19:24 +01:00
parent e2deab3b0c
commit bb6eea1087
42 changed files with 369 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/trading/components/market-selector/market-selector.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import { t } from '@vegaprotocol/i18n';
import uniqBy from 'lodash/uniqBy';
import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
import {
Input,
TradingInput,
TinyScroll,
VegaIcon,
VegaIconNames,
@@ -57,7 +57,7 @@ export const MarketSelector = ({
/>
<div className="text-sm grid grid-cols-[2fr_1fr_1fr] gap-1 ">
<div className="flex-1">
<Input
<TradingInput
onChange={(e) =>
setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
}
apps/trading/components/welcome-dialog/telemetry-approval.tsx
+2 -2
View File
@@ -1,4 +1,4 @@
import { Checkbox } from '@vegaprotocol/ui-toolkit';
import { TradingCheckbox } from '@vegaprotocol/ui-toolkit';
import { t } from '@vegaprotocol/i18n';
import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
@@ -7,7 +7,7 @@ export const TelemetryApproval = ({ helpText }: { helpText: string }) => {
return (
<div className="flex flex-col py-3">
<div className="mr-4" role="form">
<Checkbox
<TradingCheckbox
label={<span className="text-lg pl-1">{t('Share usage data')}</span>}
checked={isApproved}
name="telemetry-approval"
libs/accounts/src/lib/transfer-form.tsx
+31 -23
View File
@@ -9,13 +9,13 @@ import {
import { t } from '@vegaprotocol/i18n';
import {
Button,
FormGroup,
Input,
InputError,
RichSelect,
Select,
TradingFormGroup,
TradingInput,
TradingInputError,
TradingRichSelect,
TradingSelect,
Tooltip,
Checkbox,
TradingCheckbox,
} from '@vegaprotocol/ui-toolkit';
import type { Transfer } from '@vegaprotocol/wallet';
import { normalizeTransfer } from '@vegaprotocol/wallet';
@@ -130,12 +130,16 @@ export const TransferForm = ({
className="text-sm"
data-testid="transfer-form"
>
<FormGroup label="Vega key" labelFor="to-address">
<TradingFormGroup label="Vega key" labelFor="to-address">
<AddressField
pubKeys={pubKeys}
onChange={() => setValue('toAddress', '')}
select={
<Select {...register('toAddress')} id="to-address" defaultValue="">
<TradingSelect
{...register('toAddress')}
id="to-address"
defaultValue=""
>
<option value="" disabled={true}>
{t('Please select')}
</option>
@@ -147,10 +151,10 @@ export const TransferForm = ({
{pk}
</option>
))}
</Select>
</TradingSelect>
}
input={
<Input
<TradingInput
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={true} // focus input immediately after is shown
id="to-address"
@@ -171,12 +175,12 @@ export const TransferForm = ({
}
/>
{errors.toAddress?.message && (
<InputError forInput="to-address">
<TradingInputError forInput="to-address">
{errors.toAddress.message}
</InputError>
</TradingInputError>
)}
</FormGroup>
<FormGroup label="Asset" labelFor="asset">
</TradingFormGroup>
<TradingFormGroup label="Asset" labelFor="asset">
<Controller
control={control}
name="asset"
@@ -186,7 +190,7 @@ export const TransferForm = ({
},
}}
render={({ field }) => (
<RichSelect
<TradingRichSelect
data-testid="select-asset"
id={field.name}
name={field.name}
@@ -208,15 +212,17 @@ export const TransferForm = ({
}
/>
))}
</RichSelect>
</TradingRichSelect>
)}
/>
{errors.asset?.message && (
<InputError forInput="asset">{errors.asset.message}</InputError>
<TradingInputError forInput="asset">
{errors.asset.message}
</TradingInputError>
)}
</FormGroup>
<FormGroup label="Amount" labelFor="amount">
<Input
</TradingFormGroup>
<TradingFormGroup label="Amount" labelFor="amount">
<TradingInput
id="amount"
autoComplete="off"
appendElement={
@@ -239,11 +245,13 @@ export const TransferForm = ({
})}
/>
{errors.amount?.message && (
<InputError forInput="amount">{errors.amount.message}</InputError>
<TradingInputError forInput="amount">
{errors.amount.message}
</TradingInputError>
)}
</FormGroup>
</TradingFormGroup>
<div className="mb-4">
<Checkbox
<TradingCheckbox
name="include-transfer-fee"
disabled={!transferAmount}
label={
libs/assets/src/lib/asset-option.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { Option } from '@vegaprotocol/ui-toolkit';
import { TradingOption } from '@vegaprotocol/ui-toolkit';
import type { AssetFieldsFragment } from './__generated__/Asset';
import classNames from 'classnames';
import { t } from '@vegaprotocol/i18n';
@@ -28,7 +28,7 @@ export const Balance = ({
export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
return (
<Option key={asset.id} value={asset.id}>
<TradingOption key={asset.id} value={asset.id}>
<div className="flex flex-col items-start">
<div className="flex flex-row align-baseline gap-2">
<span>{asset.name}</span>{' '}
@@ -49,6 +49,6 @@ export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
</span>
</div>
</div>
</Option>
</TradingOption>
);
};
libs/datagrid/src/lib/filters/date-range-filter.tsx
+2 -2
View File
@@ -15,7 +15,7 @@ import {
} from 'date-fns';
import { formatForInput } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { InputError } from '@vegaprotocol/ui-toolkit';
import { TradingInputError } from '@vegaprotocol/ui-toolkit';
const defaultValue: Schema.DateRange = {};
export interface DateRangeFilterProps extends IFilterParams {
@@ -195,7 +195,7 @@ export const DateRangeFilter = forwardRef(
}, [value, props]);
const notification = useMemo(() => {
const not = error ? <InputError>{error}</InputError> : null;
const not = error ? <TradingInputError>{error}</TradingInputError> : null;
return (
<div className="ag-filter-apply-panel flex min-h-[2rem]">{not}</div>
);
libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx
+15 -11
View File
@@ -1,4 +1,8 @@
import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
import {
TradingFormGroup,
TradingInput,
TradingInputError,
} from '@vegaprotocol/ui-toolkit';
import { toDecimal, validateAmount } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import type { DealTicketAmountProps } from './deal-ticket-amount';
@@ -22,17 +26,17 @@ export const DealTicketLimitAmount = ({
const renderError = () => {
if (sizeError) {
return (
<InputError testId="deal-ticket-error-message-size-limit">
<TradingInputError testId="deal-ticket-error-message-size-limit">
{sizeError}
</InputError>
</TradingInputError>
);
}
if (priceError) {
return (
<InputError testId="deal-ticket-error-message-price-limit">
<TradingInputError testId="deal-ticket-error-message-price-limit">
{priceError}
</InputError>
</TradingInputError>
);
}
@@ -43,7 +47,7 @@ export const DealTicketLimitAmount = ({
<div className="mb-2">
<div className="flex items-start gap-4">
<div className="flex-1">
<FormGroup
<TradingFormGroup
label={t('Size')}
labelFor="input-order-size-limit"
className="!mb-0"
@@ -60,7 +64,7 @@ export const DealTicketLimitAmount = ({
validate: validateAmount(sizeStep, 'Size'),
}}
render={({ field, fieldState }) => (
<Input
<TradingInput
id="input-order-size-limit"
className="w-full"
type="number"
@@ -73,11 +77,11 @@ export const DealTicketLimitAmount = ({
/>
)}
/>
</FormGroup>
</TradingFormGroup>
</div>
<div className="pt-5 leading-10">@</div>
<div className="flex-1">
<FormGroup
<TradingFormGroup
labelFor="input-price-quote"
label={t(`Price (${quoteName})`)}
labelAlign="right"
@@ -95,7 +99,7 @@ export const DealTicketLimitAmount = ({
validate: validateAmount(priceStep, 'Price'),
}}
render={({ field, fieldState }) => (
<Input
<TradingInput
id="input-price-quote"
className="w-full"
type="number"
@@ -107,7 +111,7 @@ export const DealTicketLimitAmount = ({
/>
)}
/>
</FormGroup>
</TradingFormGroup>
</div>
</div>
{renderError()}
libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx
+8 -4
View File
@@ -4,7 +4,11 @@ import {
validateAmount,
} from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
import {
TradingInput,
TradingInputError,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
import { isMarketInAuction } from '@vegaprotocol/markets';
import type { DealTicketAmountProps } from './deal-ticket-amount';
import { Controller } from 'react-hook-form';
@@ -46,7 +50,7 @@ export const DealTicketMarketAmount = ({
validate: validateAmount(sizeStep, 'Size'),
}}
render={({ field, fieldState }) => (
<Input
<TradingInput
id="input-order-size-market"
className="w-full"
type="number"
@@ -86,12 +90,12 @@ export const DealTicketMarketAmount = ({
</div>
</div>
{sizeError && (
<InputError
<TradingInputError
intent="danger"
testId="deal-ticket-error-message-size-market"
>
{sizeError}
</InputError>
</TradingInputError>
)}
</div>
);
libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx
+13 -13
View File
@@ -4,9 +4,9 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
import { toDecimal, validateAmount } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import {
FormGroup,
Input,
InputError,
TradingFormGroup,
TradingInput,
TradingInputError,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
@@ -32,9 +32,9 @@ export const DealTicketSizeIceberg = ({
const renderPeakSizeError = () => {
if (peakSizeError) {
return (
<InputError testId="deal-ticket-peak-error-message-size-limit">
<TradingInputError testId="deal-ticket-peak-error-message-size-limit">
{peakSizeError}
</InputError>
</TradingInputError>
);
}
@@ -44,9 +44,9 @@ export const DealTicketSizeIceberg = ({
const renderMinimumSizeError = () => {
if (minimumVisibleSizeError) {
return (
<InputError testId="deal-ticket-minimum-error-message-size-limit">
<TradingInputError testId="deal-ticket-minimum-error-message-size-limit">
{minimumVisibleSizeError}
</InputError>
</TradingInputError>
);
}
@@ -57,7 +57,7 @@ export const DealTicketSizeIceberg = ({
<div className="mb-2">
<div className="flex items-center gap-4">
<div className="flex-1">
<FormGroup
<TradingFormGroup
label={
<Tooltip
description={
@@ -93,7 +93,7 @@ export const DealTicketSizeIceberg = ({
validate: validateAmount(sizeStep, 'peakSize'),
}}
render={({ field }) => (
<Input
<TradingInput
id="input-order-peak-size"
className="w-full"
type="number"
@@ -106,14 +106,14 @@ export const DealTicketSizeIceberg = ({
/>
)}
/>
</FormGroup>
</TradingFormGroup>
</div>
<div className="flex-0 items-center">
<div className="flex"></div>
<div className="flex"></div>
</div>
<div className="flex-1">
<FormGroup
<TradingFormGroup
label={
<Tooltip
description={
@@ -151,7 +151,7 @@ export const DealTicketSizeIceberg = ({
validate: validateAmount(sizeStep, 'minimumVisibleSize'),
}}
render={({ field }) => (
<Input
<TradingInput
id="input-order-minimum-size"
className="w-full"
type="number"
@@ -164,7 +164,7 @@ export const DealTicketSizeIceberg = ({
/>
)}
/>
</FormGroup>
</TradingFormGroup>
</div>
</div>
{renderPeakSizeError()}
libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
+53 -49
View File
@@ -10,13 +10,13 @@ import {
import { useForm, Controller, useController } from 'react-hook-form';
import * as Schema from '@vegaprotocol/types';
import {
Radio,
RadioGroup,
Input,
Checkbox,
FormGroup,
InputError,
Select,
TradingRadio,
TradingRadioGroup,
TradingInput,
TradingCheckbox,
TradingFormGroup,
TradingInputError,
TradingSelect,
Tooltip,
} from '@vegaprotocol/ui-toolkit';
import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
@@ -187,9 +187,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
}}
/>
{errors.type && (
<InputError testId="stop-order-error-message-type">
<TradingInputError testId="stop-order-error-message-type">
{errors.type.message}
</InputError>
</TradingInputError>
)}
<Controller
@@ -199,21 +199,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
<SideSelector value={field.value} onValueChange={field.onChange} />
)}
/>
<FormGroup label={t('Trigger')} compact={true} labelFor="">
<TradingFormGroup label={t('Trigger')} compact={true} labelFor="">
<Controller
name="triggerDirection"
control={control}
render={({ field }) => {
const { onChange, value } = field;
return (
<RadioGroup
<TradingRadioGroup
name="triggerDirection"
onChange={onChange}
value={value}
orientation="horizontal"
className="mb-2"
>
<Radio
<TradingRadio
value={
Schema.StopOrderTriggerDirection
.TRIGGER_DIRECTION_RISES_ABOVE
@@ -221,7 +221,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
id="triggerDirection-risesAbove"
label={'Rises above'}
/>
<Radio
<TradingRadio
value={
Schema.StopOrderTriggerDirection
.TRIGGER_DIRECTION_FALLS_BELOW
@@ -229,7 +229,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
id="triggerDirection-fallsBelow"
label={'Falls below'}
/>
</RadioGroup>
</TradingRadioGroup>
);
}}
/>
@@ -250,7 +250,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
const { value, ...props } = field;
return (
<div className="mb-2">
<Input
<TradingInput
data-testid="triggerPrice"
type="number"
step={priceStep}
@@ -264,9 +264,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
}}
/>
{errors.triggerPrice && (
<InputError testId="stop-order-error-message-trigger-price">
<TradingInputError testId="stop-order-error-message-trigger-price">
{errors.triggerPrice.message}
</InputError>
</TradingInputError>
)}
</div>
)}
@@ -299,7 +299,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
const { value, ...props } = field;
return (
<div className="mb-2">
<Input
<TradingInput
type="number"
step={trailingPercentOffsetStep}
appendElement="%"
@@ -313,9 +313,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
}}
/>
{errors.triggerTrailingPercentOffset && (
<InputError testId="stop-order-error-message-trigger-trailing-percent-offset">
<TradingInputError testId="stop-order-error-message-trigger-trailing-percent-offset">
{errors.triggerTrailingPercentOffset.message}
</InputError>
</TradingInputError>
)}
</div>
)}
@@ -326,25 +326,29 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
render={({ field }) => {
const { onChange, value } = field;
return (
<RadioGroup
<TradingRadioGroup
onChange={onChange}
value={value}
orientation="horizontal"
>
<Radio value="price" id="triggerType-price" label={'Price'} />
<Radio
<TradingRadio
value="price"
id="triggerType-price"
label={'Price'}
/>
<TradingRadio
value="trailingPercentOffset"
id="triggerType-trailingPercentOffset"
label={'Trailing Percent Offset'}
/>
</RadioGroup>
</TradingRadioGroup>
);
}}
/>
</FormGroup>
</TradingFormGroup>
<div className="mb-2">
<div className="flex items-start gap-4">
<FormGroup
<TradingFormGroup
labelFor="input-price-quote"
label={t(`Size`)}
className="!mb-0 flex-1"
@@ -363,7 +367,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
render={({ field, fieldState }) => {
const { value, ...props } = field;
return (
<Input
<TradingInput
id="order-size"
className="w-full"
type="number"
@@ -378,11 +382,11 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
);
}}
/>
</FormGroup>
</TradingFormGroup>
<div className="pt-5 leading-10">@</div>
<div className="flex-1">
{type === Schema.OrderType.TYPE_LIMIT ? (
<FormGroup
<TradingFormGroup
labelFor="input-price-quote"
label={t(`Price (${quoteName})`)}
labelAlign="right"
@@ -403,7 +407,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
render={({ field, fieldState }) => {
const { value, ...props } = field;
return (
<Input
<TradingInput
id="input-price-quote"
className="w-full"
type="number"
@@ -417,7 +421,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
);
}}
/>
</FormGroup>
</TradingFormGroup>
) : (
<div
className="text-sm text-right pt-5 leading-10"
@@ -431,21 +435,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
</div>
</div>
{errors.size && (
<InputError testId="stop-order-error-message-size">
<TradingInputError testId="stop-order-error-message-size">
{errors.size.message}
</InputError>
</TradingInputError>
)}
{!errors.size &&
errors.price &&
type === Schema.OrderType.TYPE_LIMIT && (
<InputError testId="stop-order-error-message-price">
<TradingInputError testId="stop-order-error-message-price">
{errors.price.message}
</InputError>
</TradingInputError>
)}
</div>
<div className="mb-2">
<FormGroup
<TradingFormGroup
label={t('Time in force')}
labelFor="select-time-in-force"
compact={true}
@@ -454,7 +458,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
name="timeInForce"
control={control}
render={({ field, fieldState }) => (
<Select
<TradingSelect
id="select-time-in-force"
className="w-full"
data-testid="order-tif"
@@ -473,14 +477,14 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
>
{timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
</option>
</Select>
</TradingSelect>
)}
/>
</FormGroup>
</TradingFormGroup>
{errors.timeInForce && (
<InputError testId="stop-error-message-tif">
<TradingInputError testId="stop-error-message-tif">
{errors.timeInForce.message}
</InputError>
</TradingInputError>
)}
</div>
<div className="flex gap-2 pb-2 justify-between">
@@ -490,7 +494,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
render={({ field }) => {
const { onChange: onCheckedChange, value } = field;
return (
<Checkbox
<TradingCheckbox
onCheckedChange={onCheckedChange}
checked={value}
name="expire"
@@ -499,7 +503,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
);
}}
/>
<Checkbox
<TradingCheckbox
name="reduce-only"
checked={true}
disabled={true}
@@ -512,7 +516,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
</div>
{expire && (
<>
<FormGroup
<TradingFormGroup
label={t('Strategy')}
labelFor="expiryStrategy"
compact={true}
@@ -522,26 +526,26 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
control={control}
render={({ field }) => {
return (
<RadioGroup orientation="horizontal" {...field}>
<Radio
<TradingRadioGroup orientation="horizontal" {...field}>
<TradingRadio
value={
Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
}
id="expiryStrategy-submit"
label={'Submit'}
/>
<Radio
<TradingRadio
value={
Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
}
id="expiryStrategy-cancel"
label={'Cancel'}
/>
</RadioGroup>
</TradingRadioGroup>
);
}}
/>
</FormGroup>
</TradingFormGroup>
<div className="mb-2">
<Controller
name="expiresAt"
libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx
+9 -9
View File
@@ -17,8 +17,8 @@ import type { OrderSubmission } from '@vegaprotocol/wallet';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
import {
Checkbox,
InputError,
TradingCheckbox,
TradingInputError,
Intent,
Notification,
Tooltip,
@@ -417,7 +417,7 @@ export const DealTicket = ({
name="postOnly"
control={control}
render={({ field }) => (
<Checkbox
<TradingCheckbox
name="post-only"
checked={!disablePostOnlyCheckbox && field.value}
disabled={disablePostOnlyCheckbox}
@@ -449,7 +449,7 @@ export const DealTicket = ({
name="reduceOnly"
control={control}
render={({ field }) => (
<Checkbox
<TradingCheckbox
name="reduce-only"
checked={!disableReduceOnlyCheckbox && field.value}
disabled={disableReduceOnlyCheckbox}
@@ -483,7 +483,7 @@ export const DealTicket = ({
name="iceberg"
control={control}
render={({ field }) => (
<Checkbox
<TradingCheckbox
name="iceberg"
checked={field.value}
onCheckedChange={field.onChange}
@@ -572,11 +572,11 @@ export const NoWalletWarning = ({
if (isReadOnly) {
return (
<div className="mb-2">
<InputError testId="deal-ticket-error-message-summary">
<TradingInputError testId="deal-ticket-error-message-summary">
{
'You need to connect your own wallet to start trading on this market'
}
</InputError>
</TradingInputError>
</div>
);
}
@@ -613,9 +613,9 @@ const SummaryMessage = memo(
if (error?.message) {
return (
<div className="mb-2">
<InputError testId="deal-ticket-error-message-summary">
<TradingInputError testId="deal-ticket-error-message-summary">
{error?.message}
</InputError>
</TradingInputError>
</div>
);
}
libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx
+10 -6
View File
@@ -1,4 +1,8 @@
import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
import {
TradingFormGroup,
TradingInput,
TradingInputError,
} from '@vegaprotocol/ui-toolkit';
import { formatForInput } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { useRef } from 'react';
@@ -19,12 +23,12 @@ export const ExpirySelector = ({
const dateFormatted = formatForInput(date);
const minDate = formatForInput(date);
return (
<FormGroup
<TradingFormGroup
label={t('Expiry time/date')}
labelFor="expiration"
compact={true}
>
<Input
<TradingInput
data-testid="date-picker-field"
id="expiration"
type="datetime-local"
@@ -34,10 +38,10 @@ export const ExpirySelector = ({
hasError={!!errorMessage}
/>
{errorMessage && (
<InputError testId="deal-ticket-error-message-expiry">
<TradingInputError testId="deal-ticket-error-message-expiry">
{errorMessage}
</InputError>
</TradingInputError>
)}
</FormGroup>
</TradingFormGroup>
);
};
libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx
+9 -9
View File
@@ -1,7 +1,7 @@
import {
FormGroup,
InputError,
Select,
TradingFormGroup,
TradingInputError,
TradingSelect,
Tooltip,
SimpleGrid,
} from '@vegaprotocol/ui-toolkit';
@@ -90,12 +90,12 @@ export const TimeInForceSelector = ({
};
return (
<FormGroup
<TradingFormGroup
label={t('Time in force')}
labelFor="select-time-in-force"
compact={true}
>
<Select
<TradingSelect
id="select-time-in-force"
value={value}
onChange={(e) => {
@@ -110,12 +110,12 @@ export const TimeInForceSelector = ({
{timeInForceLabel(value)}
</option>
))}
</Select>
</TradingSelect>
{errorMessage && (
<InputError testId="deal-ticket-error-message-tif">
<TradingInputError testId="deal-ticket-error-message-tif">
{renderError(errorMessage)}
</InputError>
</TradingInputError>
)}
</FormGroup>
</TradingFormGroup>
);
};
libs/deal-ticket/src/components/deal-ticket/type-selector.tsx
+3 -3
View File
@@ -1,5 +1,5 @@
import {
InputError,
TradingInputError,
SimpleGrid,
Tooltip,
TradingDropdown,
@@ -178,9 +178,9 @@ export const TypeSelector = ({
value={value}
/>
{errorMessage && (
<InputError testId="deal-ticket-error-message-type">
<TradingInputError testId="deal-ticket-error-message-type">
{renderError(errorMessage as MarketModeValidationType)}
</InputError>
</TradingInputError>
)}
</>
);
libs/deposits/src/lib/deposit-form.tsx
+28 -26
View File
@@ -14,14 +14,14 @@ import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import {
Button,
FormGroup,
Input,
InputError,
RichSelect,
TradingFormGroup,
TradingInput,
TradingInputError,
TradingRichSelect,
Notification,
Intent,
ButtonLink,
Select,
TradingSelect,
} from '@vegaprotocol/ui-toolkit';
import { useVegaWallet } from '@vegaprotocol/wallet';
import { useWeb3React } from '@web3-react/core';
@@ -151,7 +151,7 @@ export const DepositForm = ({
noValidate={true}
data-testid="deposit-form"
>
<FormGroup
<TradingFormGroup
label={t('From (Ethereum address)')}
labelFor="ethereum-address"
>
@@ -197,15 +197,17 @@ export const DepositForm = ({
}}
/>
{errors.from?.message && (
<InputError intent="danger">{errors.from.message}</InputError>
<TradingInputError intent="danger">
{errors.from.message}
</TradingInputError>
)}
</FormGroup>
<FormGroup label={t('To (Vega key)')} labelFor="to">
</TradingFormGroup>
<TradingFormGroup label={t('To (Vega key)')} labelFor="to">
<AddressField
pubKeys={pubKeys}
onChange={() => setValue('to', '')}
select={
<Select {...register('to')} id="to" defaultValue="">
<TradingSelect {...register('to')} id="to" defaultValue="">
<option value="" disabled>
{t('Please select')}
</option>
@@ -215,10 +217,10 @@ export const DepositForm = ({
{pk}
</option>
))}
</Select>
</TradingSelect>
}
input={
<Input
<TradingInput
// eslint-disable-next-line jsx-a11y/no-autofocus
autoFocus={true} // focus input immediately after is shown
id="to"
@@ -233,12 +235,12 @@ export const DepositForm = ({
}
/>
{errors.to?.message && (
<InputError intent="danger" forInput="to">
<TradingInputError intent="danger" forInput="to">
{errors.to.message}
</InputError>
</TradingInputError>
)}
</FormGroup>
<FormGroup label={t('Asset')} labelFor="asset">
</TradingFormGroup>
<TradingFormGroup label={t('Asset')} labelFor="asset">
<Controller
control={control}
name="asset"
@@ -248,7 +250,7 @@ export const DepositForm = ({
},
}}
render={({ field }) => (
<RichSelect
<TradingRichSelect
data-testid="select-asset"
id={field.name}
name={field.name}
@@ -271,13 +273,13 @@ export const DepositForm = ({
}
/>
))}
</RichSelect>
</TradingRichSelect>
)}
/>
{errors.asset?.message && (
<InputError intent="danger" forInput="asset">
<TradingInputError intent="danger" forInput="asset">
{errors.asset.message}
</InputError>
</TradingInputError>
)}
{isActive && isFaucetable && selectedAsset && (
<UseButton onClick={submitFaucet}>
@@ -296,7 +298,7 @@ export const DepositForm = ({
{t('View asset details')}
</button>
)}
</FormGroup>
</TradingFormGroup>
<FaucetNotification
isActive={isActive}
selectedAsset={selectedAsset}
@@ -308,8 +310,8 @@ export const DepositForm = ({
</div>
)}
{approved && (
<FormGroup label={t('Amount')} labelFor="amount">
<Input
<TradingFormGroup label={t('Amount')} labelFor="amount">
<TradingInput
type="number"
autoComplete="off"
id="amount"
@@ -374,9 +376,9 @@ export const DepositForm = ({
})}
/>
{errors.amount?.message && (
<InputError intent="danger" forInput="amount">
<TradingInputError intent="danger" forInput="amount">
{errors.amount.message}
</InputError>
</TradingInputError>
)}
{selectedAsset && balances && (
<UseButton
@@ -390,7 +392,7 @@ export const DepositForm = ({
{t('Use maximum')}
</UseButton>
)}
</FormGroup>
</TradingFormGroup>
)}
<ApproveNotification
isActive={isActive}
libs/environment/src/components/node-switcher/node-switcher.tsx
+7 -7
View File
@@ -4,10 +4,10 @@ import { t } from '@vegaprotocol/i18n';
import {
Button,
ButtonLink,
Input,
TradingInput,
Loader,
Radio,
RadioGroup,
TradingRadio,
TradingRadioGroup,
} from '@vegaprotocol/ui-toolkit';
import { useEnvironment } from '../../hooks';
import { CUSTOM_NODE_KEY } from '../../types';
@@ -76,7 +76,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
`This app will only work on ${VEGA_ENV}. Select a node to connect to.`
)}
</p>
<RadioGroup
<TradingRadioGroup
value={nodeRadio}
onChange={(value) => setNodeRadio(value)}
>
@@ -112,7 +112,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
/>
</div>
</div>
</RadioGroup>
</TradingRadioGroup>
<div className="mt-4">
<Button
fill={true}
@@ -161,7 +161,7 @@ const CustomRowWrapper = ({
<LayoutRow dataTestId="custom-row">
<div className="flex w-full mb-2">
{nodes.length > 0 && (
<Radio
<TradingRadio
id="node-url-custom"
value={CUSTOM_NODE_KEY}
label={nodeRadio === CUSTOM_NODE_KEY ? '' : t('Other')}
@@ -172,7 +172,7 @@ const CustomRowWrapper = ({
data-testid="custom-node"
className="flex items-center w-full gap-2"
>
<Input
<TradingInput
placeholder="https://"
value={inputText}
hasError={Boolean(error)}
libs/environment/src/components/node-switcher/row-data.tsx
+2 -2
View File
@@ -2,7 +2,7 @@ import type { ApolloError } from '@apollo/client';
import { useHeaderStore } from '@vegaprotocol/apollo-client';
import { isValidUrl } from '@vegaprotocol/utils';
import { t } from '@vegaprotocol/i18n';
import { Radio } from '@vegaprotocol/ui-toolkit';
import { TradingRadio } from '@vegaprotocol/ui-toolkit';
import { useEffect, useState } from 'react';
import { CUSTOM_NODE_KEY } from '../../types';
import {
@@ -138,7 +138,7 @@ export const RowData = ({
<>
{id !== CUSTOM_NODE_KEY && (
<div className="break-all" data-testid="node">
<Radio id={`node-url-${id}`} value={url} label={url} />
<TradingRadio id={`node-url-${id}`} value={url} label={url} />
</div>
)}
<LayoutCell
libs/orders/src/lib/components/order-list/order-edit-dialog.tsx
+18 -12
View File
@@ -9,9 +9,9 @@ import { t } from '@vegaprotocol/i18n';
import { Size } from '@vegaprotocol/datagrid';
import * as Schema from '@vegaprotocol/types';
import {
FormGroup,
Input,
InputError,
TradingFormGroup,
TradingInput,
TradingInputError,
Button,
Dialog,
Icon,
@@ -102,8 +102,12 @@ export const OrderEditDialog = ({
noValidate
>
<div className="flex flex-col md:flex-row gap-4">
<FormGroup label={t('Price')} labelFor="limitPrice" className="grow">
<Input
<TradingFormGroup
label={t('Price')}
labelFor="limitPrice"
className="grow"
>
<TradingInput
type="number"
step={step}
{...register('limitPrice', {
@@ -119,13 +123,13 @@ export const OrderEditDialog = ({
id="limitPrice"
/>
{errors.limitPrice?.message && (
<InputError intent="danger">
<TradingInputError intent="danger">
{errors.limitPrice.message}
</InputError>
</TradingInputError>
)}
</FormGroup>
<FormGroup label={t('Size')} labelFor="size" className="grow">
<Input
</TradingFormGroup>
<TradingFormGroup label={t('Size')} labelFor="size" className="grow">
<TradingInput
type="number"
step={stepSize}
{...register('size', {
@@ -139,9 +143,11 @@ export const OrderEditDialog = ({
id="size"
/>
{errors.size?.message && (
<InputError intent="danger">{errors.size.message}</InputError>
<TradingInputError intent="danger">
{errors.size.message}
</TradingInputError>
)}
</FormGroup>
</TradingFormGroup>
</div>
<Button variant="primary" size="md" type="submit">
{t('Update')}
libs/ui-toolkit/src/components/index.ts
+14 -6
View File
@@ -6,18 +6,18 @@ export * from './background-video';
export * from './breadcrumbs';
export * from './button';
export * from './callout';
export * from './trading-checkbox';
export * from './checkbox';
export * from './copy-with-tooltip';
export * from './dialog';
export * from './divider';
export * from './drawer';
export * from './dropdown-menu';
export * from './trading-form-group';
export * from './form-group';
export * from './healthbar';
export * from './icon';
export * from './indicator';
export * from './trading-input-error';
export * from './trading-input';
export * from './input';
export * from './input-error';
export * from './key-value-table';
export * from './link';
export * from './loader';
@@ -48,10 +48,18 @@ export * from './tiny-scroll';
export * from './toast';
export * from './toggle';
export * from './tooltip';
export * from './trading-button';
export * from './trading-dropdown';
export * from './traffic-light';
export * from './vega-icons';
export * from './vega-logo';
export * from './viewing-as-user';
export * from './pill';
// Trading specific components
export * from './trading-button';
export * from './trading-checkbox';
export * from './trading-dropdown';
export * from './trading-form-group';
export * from './trading-input-error';
export * from './trading-input';
export * from './trading-radio-group';
export * from './trading-select';
libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx
+10 -6
View File
@@ -1,24 +1,24 @@
import { fireEvent, render, screen } from '@testing-library/react';
import { Checkbox } from './checkbox';
import { TradingCheckbox } from './checkbox';
describe('Checkbox', () => {
it('should render checkbox with label successfully', () => {
render(<Checkbox label="test" />);
render(<TradingCheckbox label="test" />);
expect(screen.getByText('test')).toBeInTheDocument();
});
it('should render a checked checkbox if specified in state', () => {
render(<Checkbox label="label" checked={true} />);
render(<TradingCheckbox label="label" checked={true} />);
expect(screen.getByRole('img')).toBeInTheDocument();
});
it('should render an unchecked checkbox if specified in state', () => {
render(<Checkbox label="unchecked" checked={false} />);
render(<TradingCheckbox label="unchecked" checked={false} />);
expect(screen.queryByRole('img')).not.toBeInTheDocument();
});
it('should render an indeterminate checkbox if specified in state', () => {
render(<Checkbox label="indeterminate" checked="indeterminate" />);
render(<TradingCheckbox label="indeterminate" checked="indeterminate" />);
expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument();
});
@@ -26,7 +26,11 @@ describe('Checkbox', () => {
const callback = jest.fn();
render(
<Checkbox name="test" label="onchange" onCheckedChange={callback} />
<TradingCheckbox
name="test"
label="onchange"
onCheckedChange={callback}
/>
);
const checkbox = screen.getByText('onchange');
libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx
+7 -5
View File
@@ -1,13 +1,15 @@
import type { Meta, StoryFn } from '@storybook/react';
import type { CheckboxProps } from './checkbox';
import { Checkbox } from './checkbox';
import type { TradingCheckboxProps } from './checkbox';
import { TradingCheckbox } from './checkbox';
export default {
component: Checkbox,
component: TradingCheckbox,
title: 'Checkbox',
} as Meta<typeof Checkbox>;
} as Meta<typeof TradingCheckbox>;
const Template: StoryFn<CheckboxProps> = (args) => <Checkbox {...args} />;
const Template: StoryFn<TradingCheckboxProps> = (args) => (
<TradingCheckbox {...args} />
);
export const Default = Template.bind({});
Default.args = {
libs/ui-toolkit/src/components/trading-checkbox/checkbox.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import classNames from 'classnames';
import type { ReactNode } from 'react';
type CheckedState = boolean | 'indeterminate';
export interface CheckboxProps {
export interface TradingCheckboxProps {
checked?: CheckedState;
label?: ReactNode;
name?: string;
@@ -12,13 +12,13 @@ export interface CheckboxProps {
disabled?: boolean;
}
export const Checkbox = ({
export const TradingCheckbox = ({
checked,
label,
name,
onCheckedChange,
disabled = false,
}: CheckboxProps) => {
}: TradingCheckboxProps) => {
const rootClasses = classNames(
'relative flex justify-center items-center w-3 h-3',
'border rounded-sm overflow-hidden',
libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx
+5 -5
View File
@@ -1,22 +1,22 @@
import { render, screen } from '@testing-library/react';
import { FormGroup } from './form-group';
import { TradingFormGroup } from './form-group';
describe('FormGroup', () => {
it('should render label if given a label', () => {
render(
<FormGroup label="label" labelFor="test">
<TradingFormGroup label="label" labelFor="test">
<input id="test"></input>
</FormGroup>
</TradingFormGroup>
);
expect(screen.getByLabelText('label')).toBeInTheDocument();
});
it('should render children', () => {
render(
<FormGroup label="label" labelFor="test">
<TradingFormGroup label="label" labelFor="test">
<input data-testid="foo" id="test"></input>
</FormGroup>
</TradingFormGroup>
);
expect(screen.getByTestId('foo')).toBeInTheDocument();
});
libs/ui-toolkit/src/components/trading-form-group/form-group.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import classNames from 'classnames';
import type { ReactNode } from 'react';
export interface FormGroupProps {
export interface TradingFormGroupProps {
children: ReactNode;
className?: string;
label: string | ReactNode; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then use the hideLabel prop"
@@ -13,7 +13,7 @@ export interface FormGroupProps {
compact?: boolean;
}
export const FormGroup = ({
export const TradingFormGroup = ({
children,
className,
label,
@@ -23,7 +23,7 @@ export const FormGroup = ({
hideLabel = false,
compact = false,
disabled = false,
}: FormGroupProps) => {
}: TradingFormGroupProps) => {
const wrapperClasses = classNames(
'relative',
{
libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx
+8 -8
View File
@@ -1,9 +1,9 @@
import type { StoryFn, Meta } from '@storybook/react';
import { Input } from '../trading-input';
import type { FormGroupProps } from './form-group';
import { FormGroup } from './form-group';
import { TradingInput } from '../trading-input';
import type { TradingFormGroupProps } from './form-group';
import { TradingFormGroup } from './form-group';
export default {
component: FormGroup,
component: TradingFormGroup,
title: 'FormGroup',
argTypes: {
label: {
@@ -27,10 +27,10 @@ export default {
},
} as Meta;
const Template: StoryFn<FormGroupProps> = (args) => (
<FormGroup {...args}>
<Input id="labelFor" />
</FormGroup>
const Template: StoryFn<TradingFormGroupProps> = (args) => (
<TradingFormGroup {...args}>
<TradingInput id="labelFor" />
</TradingFormGroup>
);
export const Default = Template.bind({});
libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { render } from '@testing-library/react';
import { InputError } from './input-error';
import { TradingInputError } from './input-error';
describe('InputError', () => {
it('should render successfully', () => {
const { baseElement } = render(<InputError />);
const { baseElement } = render(<TradingInputError />);
expect(baseElement).toBeTruthy();
});
});
libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx
+3 -3
View File
@@ -1,12 +1,12 @@
import type { StoryFn, Meta } from '@storybook/react';
import { InputError } from './input-error';
import { TradingInputError } from './input-error';
export default {
component: InputError,
component: TradingInputError,
title: 'InputError',
} as Meta;
const Template: StoryFn = (args) => <InputError {...args} />;
const Template: StoryFn = (args) => <TradingInputError {...args} />;
export const Danger = Template.bind({});
Danger.args = {
libs/ui-toolkit/src/components/trading-input-error/input-error.tsx
+3 -3
View File
@@ -1,21 +1,21 @@
import classNames from 'classnames';
import type { HTMLAttributes } from 'react';
interface InputErrorProps extends HTMLAttributes<HTMLDivElement> {
interface TradingInputErrorProps extends HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
intent?: 'danger' | 'warning';
forInput?: string;
testId?: string;
}
export const InputError = ({
export const TradingInputError = ({
intent = 'danger',
children,
forInput,
testId,
className,
...props
}: InputErrorProps) => {
}: TradingInputErrorProps) => {
const effectiveClassName = classNames(
'text-xs flex items-center first-letter:uppercase',
'mt-2',
libs/ui-toolkit/src/components/trading-input/input.spec.tsx
+2 -2
View File
@@ -1,10 +1,10 @@
import { render } from '@testing-library/react';
import { Input } from './input';
import { TradingInput } from './input';
describe('Input', () => {
it('should render successfully', () => {
const { baseElement } = render(<Input />);
const { baseElement } = render(<TradingInput />);
expect(baseElement).toBeTruthy();
});
});
libs/ui-toolkit/src/components/trading-input/input.stories.tsx
+3 -3
View File
@@ -1,14 +1,14 @@
import type { StoryFn, Meta } from '@storybook/react';
import { Input } from './input';
import { TradingInput } from './input';
import { FormGroup } from '../form-group';
export default {
component: Input,
component: TradingInput,
title: 'Input',
} as Meta;
const Template: StoryFn = (args) => (
<FormGroup label="Hello" labelFor={args.id}>
<Input value="I type words" {...args} />
<TradingInput value="I type words" {...args} />
</FormGroup>
);
libs/ui-toolkit/src/components/trading-input/input.tsx
+4 -4
View File
@@ -55,9 +55,9 @@ type InputAppend = NoPrepend &
type AffixProps = InputPrepend | InputAppend;
export type InputProps = InputRootProps & AffixProps;
export type TradingInputProps = InputRootProps & AffixProps;
export const inputStyle = ({
export const tradingInputStyle = ({
style,
disabled,
}: {
@@ -79,7 +79,7 @@ const getAffixElement = ({
appendElement,
appendIconName,
appendIconDescription,
}: Pick<InputProps, keyof AffixProps>) => {
}: Pick<TradingInputProps, keyof AffixProps>) => {
const position = prependIconName || prependElement ? 'pre' : 'post';
const className = classNames(
@@ -112,7 +112,7 @@ const getAffixElement = ({
return null;
};
export const Input = forwardRef<HTMLInputElement, InputProps>(
export const TradingInput = forwardRef<HTMLInputElement, TradingInputProps>(
(
{
prependIconName,
libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx
+9 -9
View File
@@ -1,18 +1,18 @@
import type { StoryFn, Meta } from '@storybook/react';
import type { RadioGroupProps } from './radio-group';
import { RadioGroup, Radio } from './radio-group';
import type { TradingRadioGroupProps } from './radio-group';
import { TradingRadioGroup, TradingRadio } from './radio-group';
export default {
component: RadioGroup,
component: TradingRadioGroup,
title: 'RadioGroup',
} as Meta;
const Template: StoryFn<RadioGroupProps> = (args) => (
<RadioGroup {...args}>
<Radio id="item-1" value="1" label="Item 1" />
<Radio id="item-2" value="2" label="Item 2" />
<Radio id="item-3" value="3" label="Disabled item" disabled={true} />
</RadioGroup>
const Template: StoryFn<TradingRadioGroupProps> = (args) => (
<TradingRadioGroup {...args}>
<TradingRadio id="item-1" value="1" label="Item 1" />
<TradingRadio id="item-2" value="2" label="Item 2" />
<TradingRadio id="item-3" value="3" label="Disabled item" disabled={true} />
</TradingRadioGroup>
);
export const Vertical = Template.bind({});
libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx
+7 -4
View File
@@ -3,7 +3,7 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import classNames from 'classnames';
import type { ReactNode } from 'react';
export interface RadioGroupProps {
export interface TradingRadioGroupProps {
name?: string;
children: ReactNode;
defaultValue?: string;
@@ -13,7 +13,10 @@ export interface RadioGroupProps {
className?: string;
}
export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
export const TradingRadioGroup = forwardRef<
HTMLDivElement,
TradingRadioGroupProps
>(
(
{
children,
@@ -22,7 +25,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
orientation = 'vertical',
onChange,
className,
}: RadioGroupProps,
}: TradingRadioGroupProps,
ref
) => {
const groupClasses = classNames(
@@ -55,7 +58,7 @@ interface RadioProps {
disabled?: boolean;
}
export const Radio = ({ id, value, label, disabled }: RadioProps) => {
export const TradingRadio = ({ id, value, label, disabled }: RadioProps) => {
const wrapperClasses = classNames('flex items-center gap-1.5 text-xs');
const itemClasses = classNames(
'flex justify-center items-center',
libs/ui-toolkit/src/components/trading-select/select.spec.tsx
+10 -10
View File
@@ -1,9 +1,9 @@
import { render } from '@testing-library/react';
import { RichSelect, Select, Option } from './select';
import { TradingRichSelect, TradingSelect, TradingOption } from './select';
describe('Select', () => {
it('should render successfully', () => {
const { baseElement } = render(<Select />);
const { baseElement } = render(<TradingSelect />);
expect(baseElement).toBeTruthy();
});
});
@@ -11,10 +11,10 @@ describe('Select', () => {
describe('RichSelect', () => {
it('should render select element with placeholder when no value is pre-selected', async () => {
const { findByTestId } = render(
<RichSelect placeholder={'Select'}>
<Option value={'1'}>1</Option>
<Option value={'2'}>2</Option>
</RichSelect>
<TradingRichSelect placeholder={'Select'}>
<TradingOption value={'1'}>1</TradingOption>
<TradingOption value={'2'}>2</TradingOption>
</TradingRichSelect>
);
const btn = (await findByTestId(
'rich-select-trigger'
@@ -24,10 +24,10 @@ describe('RichSelect', () => {
it('should render select element with pre-selected value', async () => {
const { findByTestId } = render(
<RichSelect placeholder={'Select'} value={'1'}>
<Option value={'1'}>1</Option>
<Option value={'2'}>2</Option>
</RichSelect>
<TradingRichSelect placeholder={'Select'} value={'1'}>
<TradingOption value={'1'}>1</TradingOption>
<TradingOption value={'2'}>2</TradingOption>
</TradingRichSelect>
);
const btn = (await findByTestId(
'rich-select-trigger'
libs/ui-toolkit/src/components/trading-select/select.stories.tsx
+17 -17
View File
@@ -1,25 +1,25 @@
import type { StoryFn, Meta } from '@storybook/react';
import { Option, Select, RichSelect } from './select';
import { TradingOption, TradingSelect, TradingRichSelect } from './select';
import { FormGroup } from '../form-group';
export default {
component: Select,
component: TradingSelect,
title: 'Select',
} as Meta;
const Template: StoryFn = (args) => (
<FormGroup label="Select an option" labelFor={args.id}>
<Select {...args}>
<TradingSelect {...args}>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</Select>
</TradingSelect>
</FormGroup>
);
const RichSelectTemplate: StoryFn = ({ placeholder, ...props }) => (
<FormGroup label="Select an option" labelFor={props.id}>
<RichSelect placeholder={placeholder} {...props} />
<TradingRichSelect placeholder={placeholder} {...props} />
</FormGroup>
);
@@ -51,42 +51,42 @@ RichDefaultSelect.args = {
},
children: (
<>
<Option value="1">
<TradingOption value="1">
<div className="flex flex-col justify-start items-start">
<span>Option One</span>
<span className="text-xs">First option</span>
</div>
</Option>
<Option value="2">
</TradingOption>
<TradingOption value="2">
<div className="flex flex-col justify-start items-start">
<span>Option Two</span>
<span className="text-xs">Second option</span>
</div>
</Option>
<Option value="3">
</TradingOption>
<TradingOption value="3">
<div className="flex flex-col justify-start items-start">
<span>Option Three</span>
<span className="text-xs">Third option</span>
</div>
</Option>
<Option value="4">
</TradingOption>
<TradingOption value="4">
<div className="flex flex-col justify-start items-start">
<span>Option Four</span>
<span className="text-xs">Fourth option</span>
</div>
</Option>
<Option value="5">
</TradingOption>
<TradingOption value="5">
<div className="flex flex-col justify-start items-start">
<span>Option Five</span>
<span className="text-xs">Fifth option</span>
</div>
</Option>
<Option value="6">
</TradingOption>
<TradingOption value="6">
<div className="flex flex-col justify-start items-start">
<span>Option Six</span>
<span className="text-xs">Sixth option</span>
</div>
</Option>
</TradingOption>
</>
),
};
libs/ui-toolkit/src/components/trading-select/select.tsx
+7 -6
View File
@@ -6,14 +6,15 @@ import { Icon } from '..';
import { defaultSelectElement } from '../../utils/shared';
import * as SelectPrimitive from '@radix-ui/react-select';
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
export interface TradingSelectProps
extends SelectHTMLAttributes<HTMLSelectElement> {
hasError?: boolean;
className?: string;
value?: string | number;
children?: React.ReactNode;
}
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
({ className, hasError, ...props }, ref) => (
<div className="flex items-center relative">
<select
@@ -33,7 +34,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
)
);
export type RichSelectProps = React.ComponentProps<
export type TradingRichSelectProps = React.ComponentProps<
typeof SelectPrimitive.Root
> & {
placeholder: string;
@@ -41,9 +42,9 @@ export type RichSelectProps = React.ComponentProps<
id?: string;
'data-testid'?: string;
};
export const RichSelect = forwardRef<
export const TradingRichSelect = forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
RichSelectProps
TradingRichSelectProps
>(({ id, children, placeholder, hasError, ...props }, forwardedRef) => {
const containerRef = useRef<HTMLDivElement>();
const contentRef = useRef<HTMLDivElement>();
@@ -98,7 +99,7 @@ export const RichSelect = forwardRef<
);
});
export const Option = forwardRef<
export const TradingOption = forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentProps<typeof SelectPrimitive.Item>
>(({ children, className, ...props }, forwardedRef) => (
libs/ui-toolkit/src/components/trading-text-area/index.ts
-1
View File
@@ -1 +0,0 @@
export * from './text-area';
libs/ui-toolkit/src/components/trading-text-area/text-area.spec.tsx
-10
View File
@@ -1,10 +0,0 @@
import { render } from '@testing-library/react';
import { TextArea } from './text-area';
describe('TextArea', () => {
it('should render successfully', () => {
const { baseElement } = render(<TextArea />);
expect(baseElement).toBeTruthy();
});
});
libs/ui-toolkit/src/components/trading-text-area/text-area.stories.tsx
-31
View File
@@ -1,31 +0,0 @@
import type { Story, Meta } from '@storybook/react';
import { FormGroup } from '../form-group';
import { TextArea } from './text-area';
export default {
component: TextArea,
title: 'TextArea',
} as Meta;
const Template: Story = (args, context) => (
<FormGroup labelClassName="sr-only" label="Hello" labelFor={args.id}>
<TextArea {...args} className="h-48" defaultValue="I type words" />
</FormGroup>
);
export const Default = Template.bind({});
Default.args = {
id: 'text-area-default',
};
export const WithError = Template.bind({});
WithError.args = {
id: 'text-area-error',
hasError: true,
};
export const Disabled = Template.bind({});
Disabled.args = {
id: 'text-area-disabled',
disabled: true,
};
libs/ui-toolkit/src/components/trading-text-area/text-area.tsx
-25
View File
@@ -1,25 +0,0 @@
import classNames from 'classnames';
import type { TextareaHTMLAttributes } from 'react';
import { forwardRef } from 'react';
import { defaultFormElement } from '../../utils/shared';
export interface TextAreaProps
extends TextareaHTMLAttributes<HTMLTextAreaElement> {
hasError?: boolean;
className?: string;
}
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
({ className, hasError, ...props }, ref) => {
const textAreaClassName = classNames(
'shadow-input dark:shadow-input-dark',
className
);
const classes = classNames(
defaultFormElement(hasError, props.disabled),
textAreaClassName
);
return <textarea {...props} ref={ref} className={classes} />;
}
);
libs/wallet/src/connect-dialog/connect-dialog.tsx
+5 -5
View File
@@ -2,11 +2,11 @@ import classNames from 'classnames';
import { create } from 'zustand';
import {
Dialog,
FormGroup,
Input,
Intent,
Pill,
TradingButton,
TradingFormGroup,
TradingInput,
VegaIcon,
VegaIconNames,
} from '@vegaprotocol/ui-toolkit';
@@ -421,17 +421,17 @@ const CustomUrlInput = ({
<VegaIcon name={VegaIconNames.ARROW_LEFT} /> {t('Go back')}
</button>
</div>
<FormGroup
<TradingFormGroup
labelFor="wallet-url"
label={t('Custom wallet location')}
hideLabel
>
<Input
<TradingInput
value={walletUrl}
onChange={(e) => setWalletUrl(e.target.value)}
name="wallet-url"
/>
</FormGroup>
</TradingFormGroup>
<ConnectionOption
disabled={!isDesktopWalletRunning}
type="jsonRpc"
libs/wallet/src/connect-dialog/view-connector-form.tsx
+9 -7
View File
@@ -1,8 +1,8 @@
import { t } from '@vegaprotocol/i18n';
import {
FormGroup,
Input,
InputError,
TradingFormGroup,
TradingInput,
TradingInputError,
Intent,
TradingButton,
VegaIcon,
@@ -60,8 +60,8 @@ export function ViewConnectorForm({
'Browse from the perspective of another Vega user in read-only mode.'
)}
</p>
<FormGroup label={t('Vega Pubkey')} labelFor="address">
<Input
<TradingFormGroup label={t('Vega Pubkey')} labelFor="address">
<TradingInput
{...register('address', {
required: t('Required'),
validate: validatePubkey,
@@ -71,9 +71,11 @@ export function ViewConnectorForm({
type="text"
/>
{errors.address?.message && (
<InputError intent="danger">{errors.address.message}</InputError>
<TradingInputError intent="danger">
{errors.address.message}
</TradingInputError>
)}
</FormGroup>
</TradingFormGroup>
<TradingButton
data-testid="connect"
intent={Intent.Info}
libs/withdraws/src/lib/withdraw-form.tsx
+23 -17
View File
@@ -12,11 +12,11 @@ import { t } from '@vegaprotocol/i18n';
import { useLocalStorage } from '@vegaprotocol/react-helpers';
import {
Button,
FormGroup,
Input,
InputError,
TradingFormGroup,
TradingInput,
TradingInputError,
Notification,
RichSelect,
TradingRichSelect,
ExternalLink,
Intent,
} from '@vegaprotocol/ui-toolkit';
@@ -150,7 +150,7 @@ export const WithdrawForm = ({
field: ControllerRenderProps<FormFields, 'asset'>;
}) => {
return (
<RichSelect
<TradingRichSelect
data-testid="select-asset"
id="asset"
name="asset"
@@ -170,7 +170,7 @@ export const WithdrawForm = ({
balance={<AssetBalance asset={a} />}
/>
))}
</RichSelect>
</TradingRichSelect>
);
};
@@ -193,7 +193,7 @@ export const WithdrawForm = ({
noValidate={true}
data-testid="withdraw-form"
>
<FormGroup label={t('Asset')} labelFor="asset">
<TradingFormGroup label={t('Asset')} labelFor="asset">
<Controller
control={control}
name="asset"
@@ -205,10 +205,12 @@ export const WithdrawForm = ({
render={renderAssetsSelector}
/>
{errors.asset?.message && (
<InputError intent="danger">{errors.asset.message}</InputError>
<TradingInputError intent="danger">
{errors.asset.message}
</TradingInputError>
)}
</FormGroup>
<FormGroup
</TradingFormGroup>
<TradingFormGroup
label={t('To (Ethereum address)')}
labelFor="ethereum-address"
>
@@ -218,15 +220,17 @@ export const WithdrawForm = ({
clearErrors('to');
}}
/>
<Input
<TradingInput
id="ethereum-address"
data-testid="eth-address-input"
{...register('to', { validate: { required, ethereumAddress } })}
/>
{errors.to?.message && (
<InputError intent="danger">{errors.to.message}</InputError>
<TradingInputError intent="danger">
{errors.to.message}
</TradingInputError>
)}
</FormGroup>
</TradingFormGroup>
{selectedAsset && threshold && (
<div className="mb-4">
<WithdrawLimits
@@ -238,8 +242,8 @@ export const WithdrawForm = ({
/>
</div>
)}
<FormGroup label={t('Amount')} labelFor="amount">
<Input
<TradingFormGroup label={t('Amount')} labelFor="amount">
<TradingInput
data-testid="amount-input"
type="number"
autoComplete="off"
@@ -259,7 +263,9 @@ export const WithdrawForm = ({
})}
/>
{errors.amount?.message && (
<InputError intent="danger">{errors.amount.message}</InputError>
<TradingInputError intent="danger">
{errors.amount.message}
</TradingInputError>
)}
{selectedAsset && (
<UseButton
@@ -282,7 +288,7 @@ export const WithdrawForm = ({
/>
</div>
)}
</FormGroup>
</TradingFormGroup>
<Button
data-testid="submit-withdrawal"
type="submit"