,
- 'children' | 'noBorder'
->;
-
type MarketInfoProps = {
market: MarketInfo;
+ children?: ReactNode;
};
-export const CurrentFeesInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => (
+export const CurrentFeesInfoPanel = ({ market }: MarketInfoProps) => (
<>
{t(
@@ -62,10 +54,7 @@ export const CurrentFeesInfoPanel = ({
);
-export const MarketPriceInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const MarketPriceInfoPanel = ({ market }: MarketInfoProps) => {
const assetSymbol =
market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
const quoteUnit =
@@ -84,9 +73,8 @@ export const MarketPriceInfoPanel = ({
quoteUnit: market.tradableInstrument.instrument.product.quoteName,
}}
decimalPlaces={market.decimalPlaces}
- {...props}
/>
-
+
{t(
'There is 1 unit of the settlement asset (%s) to every 1 quote unit (%s).',
[assetSymbol, quoteUnit]
@@ -96,10 +84,7 @@ export const MarketPriceInfoPanel = ({
);
};
-export const MarketVolumeInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const MarketVolumeInfoPanel = ({ market }: MarketInfoProps) => {
const { data } = useDataProvider({
dataProvider: marketDataProvider,
variables: { marketId: market.id },
@@ -124,7 +109,6 @@ export const MarketVolumeInfoPanel = ({
bestStaticOfferVolume: dash(data?.bestStaticOfferVolume),
}}
decimalPlaces={market.positionDecimalPlaces}
- {...props}
/>
);
};
@@ -132,13 +116,11 @@ export const MarketVolumeInfoPanel = ({
export const InsurancePoolInfoPanel = ({
market,
account,
- ...props
}: {
account: NonNullable<
Get
>;
-} & MarketInfoProps &
- PanelProps) => {
+} & MarketInfoProps) => {
const assetSymbol =
market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
return (
@@ -150,14 +132,11 @@ export const InsurancePoolInfoPanel = ({
decimalPlaces={
market.tradableInstrument.instrument.product.settlementAsset.decimals
}
- {...props}
/>
);
};
-export const KeyDetailsInfoPanel = ({
- market,
-}: MarketInfoProps & PanelProps) => {
+export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
const assetDecimals =
market.tradableInstrument.instrument.product.settlementAsset.decimals;
return (
@@ -175,10 +154,7 @@ export const KeyDetailsInfoPanel = ({
);
};
-export const InstrumentInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => (
+export const InstrumentInfoPanel = ({ market }: MarketInfoProps) => (
);
-export const SettlementAssetInfoPanel = ({
- market,
- noBorder = true,
-}: MarketInfoProps & PanelProps) => {
+export const SettlementAssetInfoPanel = ({ market }: MarketInfoProps) => {
const assetSymbol =
market?.tradableInstrument.instrument.product?.settlementAsset.symbol || '';
const quoteUnit =
@@ -208,7 +180,7 @@ export const SettlementAssetInfoPanel = ({
@@ -224,10 +196,7 @@ export const SettlementAssetInfoPanel = ({
);
};
-export const MetadataInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => (
+export const MetadataInfoPanel = ({ market }: MarketInfoProps) => (
({ ...acc, ...curr }), {}),
}}
- {...props}
/>
);
-export const RiskModelInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const RiskModelInfoPanel = ({ market }: MarketInfoProps) => {
if (market.tradableInstrument.riskModel.__typename !== 'LogNormalRiskModel') {
return null;
}
const { tau, riskAversionParameter } = market.tradableInstrument.riskModel;
- return (
-
- );
+ return ;
};
-export const RiskParametersInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const RiskParametersInfoPanel = ({ market }: MarketInfoProps) => {
if (market.tradableInstrument.riskModel.__typename === 'LogNormalRiskModel') {
const { r, sigma, mu } = market.tradableInstrument.riskModel.params;
- return ;
+ return ;
}
if (market.tradableInstrument.riskModel.__typename === 'SimpleRiskModel') {
const { factorLong, factorShort } =
market.tradableInstrument.riskModel.params;
- return (
-
- );
+ return ;
}
return null;
};
-export const RiskFactorsInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const RiskFactorsInfoPanel = ({ market }: MarketInfoProps) => {
if (!market.riskFactors) {
return null;
}
const { short, long } = market.riskFactors;
- return ;
+ return ;
};
export const PriceMonitoringBoundsInfoPanel = ({
market,
triggerIndex,
- ...props
-}: {
+}: MarketInfoProps & {
triggerIndex: number;
-} & MarketInfoProps &
- PanelProps) => {
+}) => {
const { data } = useDataProvider({
dataProvider: marketDataProvider,
variables: { marketId: market.id },
@@ -318,8 +263,8 @@ export const PriceMonitoringBoundsInfoPanel = ({
return null;
}
return (
-
-
+ <>
+
{t('%s probability price bounds', [
formatNumberPercentage(
@@ -331,32 +276,28 @@ export const PriceMonitoringBoundsInfoPanel = ({
{t('Within %s seconds', [formatNumber(trigger.horizonSecs)])}
-
- {bounds && (
-
- )}
-
-
+ {bounds && (
+
+ )}
+
{t('Results in %s seconds auction if breached', [
trigger.auctionExtensionSecs.toString(),
])}
-
+
);
};
export const LiquidityMonitoringParametersInfoPanel = ({
market,
- ...props
-}: MarketInfoProps & PanelProps) => (
+}: MarketInfoProps) => (
);
-export const LiquidityInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const LiquidityInfoPanel = ({ market, children }: MarketInfoProps) => {
const assetDecimals =
market.tradableInstrument.instrument.product.settlementAsset.decimals;
const assetSymbol =
@@ -383,23 +320,22 @@ export const LiquidityInfoPanel = ({
variables: { marketId: market.id },
});
return (
-
+ <>
+
+ {children}
+
);
};
-export const LiquidityPriceRangeInfoPanel = ({
- market,
- ...props
-}: MarketInfoProps & PanelProps) => {
+export const LiquidityPriceRangeInfoPanel = ({ market }: MarketInfoProps) => {
const quoteUnit =
market?.tradableInstrument.instrument.product?.quoteName || '';
const liquidityPriceRange = formatNumberPercentage(
@@ -411,39 +347,37 @@ export const LiquidityPriceRangeInfoPanel = ({
});
return (
<>
-
+
{`For liquidity orders to count towards a commitment, they must be
within the liquidity monitoring bounds.`}
-
+
{`The liquidity price range is a ${liquidityPriceRange} difference from the mid
price.`}
-
-
-
+
);
};
@@ -451,8 +385,7 @@ export const LiquidityPriceRangeInfoPanel = ({
export const OracleInfoPanel = ({
market,
type,
-}: MarketInfoProps &
- PanelProps & { type: 'settlementData' | 'termination' }) => {
+}: MarketInfoProps & { type: 'settlementData' | 'termination' }) => {
const product = market.tradableInstrument.instrument.product;
const { VEGA_EXPLORER_URL, ORACLE_PROOFS_URL } = useEnvironment();
const { data } = useOracleProofs(ORACLE_PROOFS_URL);
@@ -469,7 +402,7 @@ export const OracleInfoPanel = ({
) as DataSourceDefinition;
return (
-
+
+
{signerProviders.map((provider) => (
-
{message}
-
- {oracleMarkets &&
- t('Involved in %s %s', [
+
+ {message}
+
+ {oracleMarkets && (
+
+ {t('Involved in %s %s', [
oracleMarkets.length.toString(),
oracleMarkets.length !== 1 ? t('markets') : t('market'),
])}
-
+
+ )}
{links.length > 0 && (
-
+
{links.map((link) => (
-
-
+
+
-
-
- {link.type}
+ {link.type}
diff --git a/libs/ui-toolkit/src/components/accordion/accordion.spec.tsx b/libs/ui-toolkit/src/components/accordion/accordion.spec.tsx
index b6f2f9c20..a3c82b9f5 100644
--- a/libs/ui-toolkit/src/components/accordion/accordion.spec.tsx
+++ b/libs/ui-toolkit/src/components/accordion/accordion.spec.tsx
@@ -1,15 +1,17 @@
import { fireEvent, render, screen } from '@testing-library/react';
-import { Accordion } from './accordion';
+import { Accordion, AccordionItem } from './accordion';
describe('Accordion', () => {
it('should render successfully', () => {
render(
-
+
+
+
);
expect(screen.queryByTestId('accordion-title')).toHaveTextContent(
'Lorem ipsum title'
@@ -18,11 +20,13 @@ describe('Accordion', () => {
it('should toggle and open expansion panel', () => {
render(
-
+
+
+
);
fireEvent.click(screen.getByTestId('accordion-toggle'));
expect(screen.queryByTestId('accordion-title')).toHaveTextContent(
diff --git a/libs/ui-toolkit/src/components/accordion/accordion.stories.tsx b/libs/ui-toolkit/src/components/accordion/accordion.stories.tsx
index 775d7d807..99b542e20 100644
--- a/libs/ui-toolkit/src/components/accordion/accordion.stories.tsx
+++ b/libs/ui-toolkit/src/components/accordion/accordion.stories.tsx
@@ -1,5 +1,5 @@
import type { Story, Meta } from '@storybook/react';
-import { Accordion } from './accordion';
+import { Accordion, AccordionItem } from './accordion';
export default {
component: Accordion,
@@ -10,18 +10,21 @@ const Template: Story = (args) => ;
export const Default = Template.bind({});
Default.args = {
- panels: [
- {
- title: 'Title of expansion panel',
- content: 'Lorem ipsum',
- },
- {
- title: 'Title of expansion panel',
- content: 'Lorem ipsum',
- },
- {
- title: 'Title of expansion panel',
- content: 'Lorem ipsum',
- },
+ children: [
+ ,
+ ,
+ ,
],
};
diff --git a/libs/ui-toolkit/src/components/accordion/accordion.tsx b/libs/ui-toolkit/src/components/accordion/accordion.tsx
index 41f9525bc..9e52f8250 100644
--- a/libs/ui-toolkit/src/components/accordion/accordion.tsx
+++ b/libs/ui-toolkit/src/components/accordion/accordion.tsx
@@ -1,7 +1,6 @@
-import React, { useState } from 'react';
import * as AccordionPrimitive from '@radix-ui/react-accordion';
import classNames from 'classnames';
-import { Icon } from '../icon';
+import { VegaIcon, VegaIconNames } from '../icon';
export interface AccordionItemProps {
title: React.ReactNode;
@@ -10,7 +9,6 @@ export interface AccordionItemProps {
export interface AccordionPanelProps extends AccordionItemProps {
itemId: string;
- active: boolean;
}
export interface AccordionProps {
@@ -19,23 +17,8 @@ export interface AccordionProps {
}
export const Accordion = ({ panels, children }: AccordionProps) => {
- const [values, setValues] = useState([]);
-
return (
-
- {panels?.map(({ title, content }, i) => (
-
- ))}
+
{children}
);
@@ -45,11 +28,11 @@ export const AccordionItem = ({
title,
content,
itemId,
- active,
}: AccordionPanelProps) => {
const triggerClassNames = classNames(
'w-full py-2',
- 'flex items-center justify-between border-b border-neutral-500 text-sm'
+ 'flex items-center justify-between border-b border-vega-light-200 dark:border-vega-dark-200 text-sm',
+ 'group'
);
return (
@@ -59,26 +42,28 @@ export const AccordionItem = ({
className={triggerClassNames}
>
{title}
-
+
-
-
- {content}
-
+
+ {content}
);
};
-export const AccordionChevron = ({ active }: { active: boolean }) => {
+export const AccordionChevron = () => {
return (
-
+
+
+
);
};
diff --git a/libs/ui-toolkit/src/components/link/link.tsx b/libs/ui-toolkit/src/components/link/link.tsx
index 2059a5e62..524ba3fd6 100644
--- a/libs/ui-toolkit/src/components/link/link.tsx
+++ b/libs/ui-toolkit/src/components/link/link.tsx
@@ -43,8 +43,8 @@ Link.displayName = 'Link';
export const ExternalLink = ({ children, className, ...props }: LinkProps) => (
- {description}
+
+ {description}
+
)}