chore: merge tif handling for iceberg and expiry

Co-authored-by: Joe <joe@vega.xyz>

.github/workflows/console-test-run.yml

@@ -125,7 +125,7 @@ jobs:
       #----------------------------------------------
       - name: Run tests
         working-directory: ./console-test
-        run: poetry run pytest -s --numprocesses auto
+        run: poetry run pytest -v -s --numprocesses auto --dist loadfile --durations=20
       - name: Check files
         run: |
           ls -al .

apps/explorer-e2e/src/fixtures/mocks/new-asset-proposal.json

@@ -0,0 +1,26 @@
+{
+  "proposalSubmission": {
+    "rationale": {
+      "title": "Test new asset proposal",
+      "description": "E2E test for proposals"
+    },
+    "terms": {
+      "newAsset": {
+        "changes": {
+          "name": "USDT Coin",
+          "symbol": "USDT",
+          "decimals": "18",
+          "quantum": "1",
+          "erc20": {
+            "contractAddress": "0xb404c51bbc10dcbe948077f18a4b8e553d160084",
+            "withdrawThreshold": "10",
+            "lifetimeLimit": "10"
+          }
+        }
+      },
+      "closingTimestamp": 1724339572,
+      "enactmentTimestamp": 1724339572,
+      "validationTimestamp": 1692799617
+    }
+  }
+}

apps/explorer-e2e/src/integration/proposal.cy.js

@@ -1,9 +1,10 @@
+import { getNewAssetTxBody } from '../support/governance.functions';
+
 context('Proposal page', { tags: '@smoke' }, function () {
   describe('Verify elements on page', function () {
     const proposalHeading = 'proposals-heading';
     const dateTimeRegex =
       /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
-    const proposalTitle = 'Add Lorem Ipsum market';
 
     before('Create market proposal', function () {
       cy.visit('/');
@@ -11,6 +12,8 @@ context('Proposal page', { tags: '@smoke' }, function () {
     });
 
     it('Able to view proposal', function () {
+      const proposalTitle = 'Add Lorem Ipsum market';
+
       cy.navigate_to('governanceProposals');
       cy.getByTestId(proposalHeading).should('be.visible');
       cy.contains(proposalTitle)
@@ -22,6 +25,9 @@ context('Proposal page', { tags: '@smoke' }, function () {
           cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
           cy.get_element_by_col_id('state').should('have.text', 'Enacted');
           cy.getByTestId('vote-progress').should('be.visible');
+          cy.getByTestId('vote-progress-bar-for')
+            .invoke('attr', 'style')
+            .should('eq', 'width: 100%;');
           cy.get('[col-id="cDate"]')
             .invoke('text')
             .should('match', dateTimeRegex);
@@ -35,9 +41,12 @@ context('Proposal page', { tags: '@smoke' }, function () {
         });
       cy.getByTestId('dialog-title').should('have.text', proposalTitle);
       cy.get('.language-json').should('exist');
+      cy.getByTestId('icon-cross').click();
     });
 
     it.skip('Proposal page displayed on mobile', function () {
+      const proposalTitle = 'Add Lorem Ipsum market';
+
       cy.common_switch_to_mobile_and_click_toggle();
       cy.navigate_to('governanceProposals', true);
       cy.getByTestId(proposalHeading).should('be.visible');
@@ -45,5 +54,40 @@ context('Proposal page', { tags: '@smoke' }, function () {
         cy.get_element_by_col_id('title').should('have.text', proposalTitle);
       });
     });
+
+    it('Able to view new asset proposal', function () {
+      const proposalTitle = 'Test new asset proposal';
+      const newAssetProposalBody = getNewAssetTxBody();
+      cy.VegaWalletSubmitProposal(newAssetProposalBody);
+
+      cy.visit('/');
+      cy.navigate_to('governanceProposals');
+      cy.contains(proposalTitle)
+        .parent()
+        .parent()
+        .parent()
+        .within(() => {
+          cy.get_element_by_col_id('title').should('have.text', proposalTitle);
+          cy.get_element_by_col_id('type').should('have.text', 'NewAsset');
+          cy.get_element_by_col_id('state').should(
+            'have.text',
+            'Waiting for Node Vote'
+          );
+          cy.getByTestId('vote-progress').should('be.visible');
+          cy.getByTestId('vote-progress-bar-against')
+            .invoke('attr', 'style')
+            .should('eq', 'width: 100%;');
+          cy.get('[col-id="cDate"]')
+            .invoke('text')
+            .should('match', dateTimeRegex);
+          cy.get('[col-id="eDate"]')
+            .invoke('text')
+            .should('match', dateTimeRegex);
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and('contains', 'https://governance.fairground.wtf/proposals/');
+          cy.contains('View terms').should('exist').click();
+        });
+    });
   });
 });

apps/explorer-e2e/src/support/governance.functions.js

@@ -1,8 +1,18 @@
+import { addSeconds, millisecondsToSeconds } from 'date-fns';
+
 export function createSuccessorMarketProposal(parentMarketId) {
   cy.VegaWalletSubmitProposal(getSuccessorTxBody(parentMarketId));
 }
 
 function getSuccessorTxBody(parentMarketId) {
+  const MIN_CLOSE_SEC = 500;
+  const MIN_ENACT_SEC = 700;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+
   return {
     proposalSubmission: {
       rationale: {
@@ -122,8 +132,49 @@ function getSuccessorTxBody(parentMarketId) {
             },
           },
         },
-        closingTimestamp: 1695666618,
-        enactmentTimestamp: 1695666618,
+        closingTimestamp,
+        enactmentTimestamp,
+      },
+    },
+  };
+}
+
+export function getNewAssetTxBody() {
+  const MIN_CLOSE_SEC = 500;
+  const MIN_ENACT_SEC = 700;
+  const MIN_VALID_SEC = 60;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const validationDate = addSeconds(new Date(), MIN_VALID_SEC);
+
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+  const validationTimestamp = millisecondsToSeconds(validationDate.getTime());
+
+  return {
+    proposalSubmission: {
+      rationale: {
+        title: 'Test new asset proposal',
+        description: 'E2E test for proposals',
+      },
+      terms: {
+        newAsset: {
+          changes: {
+            name: 'USDT Coin',
+            symbol: 'USDT',
+            decimals: '18',
+            quantum: '1',
+            erc20: {
+              contractAddress: '0xb404c51bbc10dcbe948077f18a4b8e553d160084',
+              withdrawThreshold: '10',
+              lifetimeLimit: '10',
+            },
+          },
+        },
+        closingTimestamp,
+        enactmentTimestamp,
+        validationTimestamp,
       },
     },
   };

apps/explorer/src/app/components/txs/details/tx-issue-signatures.tsx

@@ -41,7 +41,7 @@ export const TxDetailsIssueSignatures = ({
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
-  const cmd: Command = txData.command;
+  const cmd: Command = txData.command.issueSignatures;
   const k = cmd.kind ? kind[cmd.kind] : null;
 
   return (

apps/governance/src/routes/proposals/components/proposal-description/proposal-description.tsx

@@ -1,44 +1,27 @@
 import ReactMarkdown from 'react-markdown';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { RoundedWrapper } from '@vegaprotocol/ui-toolkit';
-import { SubHeading } from '../../../../components/heading';
-import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
+import { RoundedWrapper, ShowMore } from '@vegaprotocol/ui-toolkit';
 
 export const ProposalDescription = ({
   description,
 }: {
   description: string;
-}) => {
-  const { t } = useTranslation();
-  const [showDescription, setShowDescription] = useState(false);
-
-  return (
-    <section data-testid="proposal-description">
-      <CollapsibleToggle
-        toggleState={showDescription}
-        setToggleState={setShowDescription}
-        dataTestId={'proposal-description-toggle'}
-      >
-        <SubHeading title={t('proposalDescription')} />
-      </CollapsibleToggle>
-
-      {showDescription && (
-        <RoundedWrapper paddingBottom={true} marginBottomLarge={true}>
-          <div className="p-2">
-            <ReactMarkdown
-              className="react-markdown-container"
-              /* Prevents HTML embedded in the description from rendering */
-              skipHtml={true}
-              /* Stops users embedding images which could be used for tracking  */
-              disallowedElements={['img']}
-              linkTarget="_blank"
-            >
-              {description}
-            </ReactMarkdown>
-          </div>
-        </RoundedWrapper>
-      )}
-    </section>
-  );
-};
+}) => (
+  <section data-testid="proposal-description">
+    <RoundedWrapper paddingBottom={true} marginBottomLarge={true}>
+      <div className="p-2">
+        <ShowMore>
+          <ReactMarkdown
+            className="react-markdown-container"
+            /* Prevents HTML embedded in the description from rendering */
+            skipHtml={true}
+            /* Stops users embedding images which could be used for tracking  */
+            disallowedElements={['img']}
+            linkTarget="_blank"
+          >
+            {description}
+          </ReactMarkdown>
+        </ShowMore>
+      </div>
+    </RoundedWrapper>
+  </section>
+);

apps/governance/src/routes/proposals/components/proposal-market-data/proposal-market-data.tsx

@@ -15,8 +15,6 @@ import {
   SettlementAssetInfoPanel,
 } from '@vegaprotocol/markets';
 import {
-  Accordion,
-  AccordionItem,
   Button,
   CopyWithTooltip,
   Dialog,
@@ -43,6 +41,9 @@ export const useMarketDataDialogStore = create<MarketDataDialogState>(
   })
 );
 
+const marketDataHeaderStyles =
+  'font-alpha calt text-base border-b border-vega-dark-200 mt-2 py-2';
+
 export const ProposalMarketData = ({
   marketData,
   parentMarketData,
@@ -76,6 +77,14 @@ export const ProposalMarketData = ({
     parentTerminationData !== undefined &&
     isEqual(terminationData, parentTerminationData);
 
+  const showParentPriceMonitoringBounds =
+    parentMarketData?.priceMonitoringSettings?.parameters?.triggers !==
+      undefined &&
+    !isEqual(
+      marketData.priceMonitoringSettings?.parameters?.triggers,
+      parentMarketData?.priceMonitoringSettings?.parameters?.triggers
+    );
+
   const getSigners = (data: DataSourceDefinition) => {
     if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
       const signers = data.sourceType.sourceType.signers || [];
@@ -108,164 +117,141 @@ export const ProposalMarketData = ({
             </Button>
           </div>
           <div className="mb-10">
-            <Accordion>
-              <AccordionItem
-                itemId="key-details"
-                title={t('Key details')}
-                content={
-                  <KeyDetailsInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              <AccordionItem
-                itemId="instrument"
-                title={t('Instrument')}
-                content={
-                  <InstrumentInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              {isEqual(
-                getSigners(settlementData),
-                getSigners(terminationData)
-              ) ? (
-                <AccordionItem
-                  itemId="oracles"
-                  title={t('Oracle')}
-                  content={
-                    <OracleInfoPanel
-                      market={marketData}
-                      type="settlementData"
-                      parentMarket={
-                        isParentSettlementDataEqual
-                          ? undefined
-                          : parentMarketData
-                      }
-                    />
+            <h2 className={marketDataHeaderStyles}>{t('Key details')}</h2>
+            <KeyDetailsInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            <h2 className={marketDataHeaderStyles}>{t('Instrument')}</h2>
+            <InstrumentInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            {isEqual(
+              getSigners(settlementData),
+              getSigners(terminationData)
+            ) ? (
+              <>
+                <h2 className={marketDataHeaderStyles}>{t('Oracle')}</h2>
+
+                <OracleInfoPanel
+                  market={marketData}
+                  type="settlementData"
+                  parentMarket={
+                    isParentSettlementDataEqual ? undefined : parentMarketData
+                  }
+                />
+              </>
+            ) : (
+              <>
+                <h2 className={marketDataHeaderStyles}>
+                  {t('Settlement Oracle')}
+                </h2>
+                <OracleInfoPanel
+                  market={marketData}
+                  type="settlementData"
+                  parentMarket={
+                    isParentSettlementDataEqual ? undefined : parentMarketData
                   }
                 />
-              ) : (
-                <>
-                  <AccordionItem
-                    itemId="settlement-oracle"
-                    title={t('Settlement Oracle')}
-                    content={
-                      <OracleInfoPanel
-                        market={marketData}
-                        type="settlementData"
-                        parentMarket={
-                          isParentSettlementDataEqual
-                            ? undefined
-                            : parentMarketData
-                        }
-                      />
-                    }
-                  />
 
-                  <AccordionItem
-                    itemId="termination-oracle"
-                    title={t('Termination Oracle')}
-                    content={
-                      <OracleInfoPanel
-                        market={marketData}
-                        type="termination"
-                        parentMarket={
-                          isParentTerminationDataEqual
-                            ? undefined
-                            : parentMarketData
-                        }
-                      />
-                    }
-                  />
-                </>
-              )}
-              {/*Note: successor markets will not differ in their settlement*/}
-              {/*assets, so no need to pass in parent market data for comparison.*/}
-              <AccordionItem
-                itemId="settlement-asset"
-                title={t('Settlement asset')}
-                content={<SettlementAssetInfoPanel market={marketData} />}
-              />
-              <AccordionItem
-                itemId="metadata"
-                title={t('Metadata')}
-                content={
-                  <MetadataInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              <AccordionItem
-                itemId="risk-model"
-                title={t('Risk model')}
-                content={
-                  <RiskModelInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              <AccordionItem
-                itemId="risk-parameters"
-                title={t('Risk parameters')}
-                content={
-                  <RiskParametersInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              <AccordionItem
-                itemId="risk-factors"
-                title={t('Risk factors')}
-                content={
-                  <RiskFactorsInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              {(
-                marketData.priceMonitoringSettings?.parameters?.triggers || []
+                <h2 className={marketDataHeaderStyles}>
+                  {t('Termination Oracle')}
+                </h2>
+                <OracleInfoPanel
+                  market={marketData}
+                  type="termination"
+                  parentMarket={
+                    isParentTerminationDataEqual ? undefined : parentMarketData
+                  }
+                />
+              </>
+            )}
+
+            {/*Note: successor markets will not differ in their settlement*/}
+            {/*assets, so no need to pass in parent market data for comparison.*/}
+
+            <h2 className={marketDataHeaderStyles}>{t('Settlement assets')}</h2>
+            <SettlementAssetInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            <h2 className={marketDataHeaderStyles}>{t('Metadata')}</h2>
+            <MetadataInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            <h2 className={marketDataHeaderStyles}>{t('Risk model')}</h2>
+            <RiskModelInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            <h2 className={marketDataHeaderStyles}>{t('Risk parameters')}</h2>
+            <RiskParametersInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            <h2 className={marketDataHeaderStyles}>{t('Risk factors')}</h2>
+            <RiskFactorsInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            {showParentPriceMonitoringBounds &&
+              (
+                parentMarketData?.priceMonitoringSettings?.parameters
+                  ?.triggers || []
               ).map((_, triggerIndex) => (
-                <AccordionItem
-                  itemId={`trigger-${triggerIndex}`}
-                  title={t(`Price monitoring bounds ${triggerIndex + 1}`)}
-                  content={
+                <>
+                  <h2 className={marketDataHeaderStyles}>
+                    {t(`Parent price monitoring bounds ${triggerIndex + 1}`)}
+                  </h2>
+
+                  <div className="text-vega-dark-300 line-through">
                     <PriceMonitoringBoundsInfoPanel
-                      market={marketData}
-                      parentMarket={parentMarketData}
+                      market={parentMarketData}
                       triggerIndex={triggerIndex}
                     />
-                  }
-                />
+                  </div>
+                </>
               ))}
-              <AccordionItem
-                itemId="liqudity-monitoring-parameters"
-                title={t('Liquidity monitoring parameters')}
-                content={
-                  <LiquidityMonitoringParametersInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-              <AccordionItem
-                itemId="liquidity-price-range"
-                title={t('Liquidity price range')}
-                content={
-                  <LiquidityPriceRangeInfoPanel
-                    market={marketData}
-                    parentMarket={parentMarketData}
-                  />
-                }
-              />
-            </Accordion>
+
+            {(
+              marketData.priceMonitoringSettings?.parameters?.triggers || []
+            ).map((_, triggerIndex) => (
+              <>
+                <h2 className={marketDataHeaderStyles}>
+                  {t(`Price monitoring bounds ${triggerIndex + 1}`)}
+                </h2>
+
+                <PriceMonitoringBoundsInfoPanel
+                  market={marketData}
+                  triggerIndex={triggerIndex}
+                />
+              </>
+            ))}
+
+            <h2 className={marketDataHeaderStyles}>
+              {t('Liquidity monitoring parameters')}
+            </h2>
+            <LiquidityMonitoringParametersInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
+
+            <h2 className={marketDataHeaderStyles}>
+              {t('Liquidity price range')}
+            </h2>
+            <LiquidityPriceRangeInfoPanel
+              market={marketData}
+              parentMarket={parentMarketData}
+            />
           </div>
         </>
       )}

apps/trading-e2e/src/integration/closed-markets.cy.ts

@@ -259,6 +259,12 @@ describe('Closed markets', { tags: '@smoke' }, () => {
       .find('[data-testid="market-code"]')
       .should('have.text', settledMarket.tradableInstrument.instrument.code);
 
+    // 6001-MARK-071
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
     // 6001-MARK-002
     cy.get(rowSelector)
       .first()

apps/trading-e2e/src/integration/market-all.cy.ts

@@ -69,6 +69,12 @@ describe('markets all table', { tags: '@smoke' }, () => {
       .find(colInstrumentCode)
       .should('have.text', 'SOLUSD');
 
+    // 6001-MARK-073
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
     //  6001-MARK-036
     cy.get(rowSelector)
       .first()

apps/trading-e2e/src/integration/markets-proposed.cy.ts

@@ -1,233 +0,0 @@
-import { aliasGQLQuery, checkSorting } from '@vegaprotocol/cypress';
-import type { ProposalsListQuery } from '@vegaprotocol/proposals';
-
-const rowSelector =
-  '[data-testid="tab-proposed-markets"] .ag-center-cols-container .ag-row';
-const colMarketId = '[col-id="market"] [data-testid="market-code"]';
-
-describe('markets proposed table', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setOnBoardingViewed();
-    cy.visit('/#/markets/all');
-    cy.get('[data-testid="Proposed markets"]').click();
-  });
-
-  it('can see table headers', () => {
-    const headers = [
-      'Market',
-      'Description',
-      'Settlement asset',
-      'State',
-      'Parent market',
-      'Voting',
-      'Closing date',
-      'Enactment date',
-      '',
-    ];
-    cy.getByTestId('tab-proposed-markets').within(($headers) => {
-      cy.wrap($headers)
-        .get('.ag-header-cell-text')
-        .each(($header, i) => {
-          cy.wrap($header).should('have.text', headers[i]);
-        });
-    });
-  });
-
-  it('renders markets correctly', () => {
-    // 6001-MARK-049
-    cy.get(rowSelector).first().find(colMarketId).should('have.text', 'ETHUSD');
-
-    //  6001-MARK-050
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="description"]')
-      .should('have.text', 'ETHUSD');
-
-    //  6001-MARK-051
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="asset"]')
-      .should('have.text', 'tDAI TEST');
-
-    //  6001-MARK-052
-    //  6001-MARK-053
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="state"]')
-      .should('have.text', 'Open');
-
-    //  6001-MARK-054
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="voting"]')
-      .should('have.text', '');
-
-    //  6001-MARK-056
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="closing-date"]')
-      .should('not.be.empty');
-
-    //  6001-MARK-057
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="enactment-date"]')
-      .should('not.be.empty');
-  });
-
-  it('can open row actions', () => {
-    // 6001-MARK-058
-    cy.get('.ag-pinned-right-cols-container')
-      .find('[col-id="proposal-actions"]')
-      .first()
-      .find('button')
-      .click();
-
-    const dropdownContent = '[data-testid="proposal-actions-content"]';
-    const dropdownContentItem = '[role="menuitem"]';
-
-    // 6001-MARK-059
-    cy.get(dropdownContent)
-      .find(dropdownContentItem)
-      .eq(0)
-      .find('a')
-      .should('have.text', 'View proposal')
-      .and(
-        'have.attr',
-        'href',
-        `${Cypress.env(
-          'VEGA_TOKEN_URL'
-        )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
-      );
-  });
-
-  // 6001-MARK-060
-  it('can see proposed market link', () => {
-    cy.getByTestId('tab-proposed-markets')
-      .find('[data-testid="external-link"]')
-      .should('have.length', 11)
-      .last()
-      .should('have.text', 'Propose a new market')
-      .and(
-        'have.attr',
-        'href',
-        `${Cypress.env('VEGA_TOKEN_URL')}/proposals/propose/new-market`
-      );
-  });
-  it('proposed markets tab should be sorted properly', () => {
-    // 6001-MARK-062
-    cy.get('[data-testid="Proposed markets"]').click({ force: true });
-    const marketColDefault = [
-      'ETHUSD',
-      'LINKUSD',
-      'ETHUSD',
-      'ETHDAI.MF21',
-      'AAPL.MF21',
-      'BTCUSD.MF21',
-      'TSLA.QM21',
-      'AAVEDAI.MF21',
-      'ETHBTC.QM21',
-      'UNIDAI.MF21',
-    ];
-    const marketColAsc = [
-      'AAPL.MF21',
-      'AAVEDAI.MF21',
-      'BTCUSD.MF21',
-      'ETHBTC.QM21',
-      'ETHDAI.MF21',
-      'ETHUSD',
-      'ETHUSD',
-      'LINKUSD',
-      'TSLA.QM21',
-      'UNIDAI.MF21',
-    ];
-    const marketColDesc = [
-      'UNIDAI.MF21',
-      'TSLA.QM21',
-      'LINKUSD',
-      'ETHUSD',
-      'ETHUSD',
-      'ETHDAI.MF21',
-      'ETHBTC.QM21',
-      'BTCUSD.MF21',
-      'AAVEDAI.MF21',
-      'AAPL.MF21',
-    ];
-    checkSorting(
-      'market',
-      marketColDefault,
-      marketColAsc,
-      marketColDesc,
-      ' [data-testid="market-code"]'
-    );
-
-    const stateColDefault = [
-      'Open',
-      'Passed',
-      'Waiting for Node Vote',
-      'Open',
-      'Passed',
-      'Open',
-      'Passed',
-      'Open',
-      'Waiting for Node Vote',
-      'Open',
-    ];
-    const stateColAsc = [
-      'Open',
-      'Open',
-      'Open',
-      'Open',
-      'Open',
-      'Passed',
-      'Passed',
-      'Passed',
-      'Waiting for Node Vote',
-      'Waiting for Node Vote',
-    ];
-    const stateColDesc = [
-      'Waiting for Node Vote',
-      'Waiting for Node Vote',
-      'Passed',
-      'Passed',
-      'Passed',
-      'Open',
-      'Open',
-      'Open',
-      'Open',
-      'Open',
-    ];
-    checkSorting('state', stateColDefault, stateColAsc, stateColDesc);
-  });
-
-  it('can drag and drop columns', () => {
-    // 6001-MARK-063
-    cy.get(colMarketId).realMouseDown().realMouseMove(700, 15).realMouseUp();
-    cy.get(colMarketId).should(($element) => {
-      const attributeValue = $element.attr('aria-colindex');
-      expect(attributeValue).not.to.equal('1');
-    });
-  });
-});
-
-describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
-  before(() => {
-    cy.mockTradingPage();
-    const proposal: ProposalsListQuery = {};
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'ProposalsList', proposal);
-    });
-    cy.mockSubscription();
-    cy.setOnBoardingViewed();
-  });
-
-  it.skip('can see no markets message', () => {
-    cy.visit('/#/markets/all');
-    cy.get('[data-testid="Proposed markets"]').click();
-
-    // 6001-MARK-061
-    cy.getByTestId('tab-proposed-markets').should('contain.text', 'No markets');
-  });
-});

apps/trading-e2e/src/integration/trading-deal-ticket-basic-submit.cy.ts

@@ -1,110 +0,0 @@
-import * as Schema from '@vegaprotocol/types';
-import { testOrderSubmission } from '../support/order-validation';
-import type { OrderSubmission } from '@vegaprotocol/wallet';
-import { createOrder } from '../support/create-order';
-
-describe.skip('must submit order', { tags: '@smoke' }, () => {
-  // 7002-SORD-039
-  before(() => {
-    cy.setVegaWallet();
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/#/markets/market-0');
-    cy.wait('@Markets');
-  });
-
-  beforeEach(() => {
-    cy.setVegaWallet();
-  });
-
-  it('successfully places market buy order', () => {
-    // 7002-SORD-010
-    // 0003-WTXN-012
-    // 0003-WTXN-003
-    cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
-      marketId: 'market-0',
-      type: Schema.OrderType.TYPE_MARKET,
-      side: Schema.Side.SIDE_BUY,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
-      postOnly: false,
-      reduceOnly: false,
-      size: '100',
-    };
-    createOrder(order);
-    testOrderSubmission(order);
-  });
-
-  it('successfully places market sell order', () => {
-    cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
-      marketId: 'market-0',
-      type: Schema.OrderType.TYPE_MARKET,
-      side: Schema.Side.SIDE_SELL,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
-      size: '100',
-      postOnly: false,
-      reduceOnly: false,
-    };
-    createOrder(order);
-    testOrderSubmission(order);
-  });
-
-  it('successfully places limit buy order', () => {
-    // 7002-SORD-017
-    cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
-      marketId: 'market-0',
-      type: Schema.OrderType.TYPE_LIMIT,
-      side: Schema.Side.SIDE_BUY,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
-      size: '100',
-      postOnly: false,
-      reduceOnly: false,
-      price: '200',
-    };
-    createOrder(order);
-    testOrderSubmission(order, { price: '20000000' });
-  });
-
-  it('successfully places limit sell order', () => {
-    cy.mockVegaWalletTransaction();
-    const order: OrderSubmission = {
-      marketId: 'market-0',
-      type: Schema.OrderType.TYPE_LIMIT,
-      side: Schema.Side.SIDE_SELL,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GFN,
-      size: '100',
-      postOnly: false,
-      reduceOnly: false,
-      price: '50000',
-    };
-    createOrder(order);
-    testOrderSubmission(order, { price: '5000000000' });
-  });
-
-  it('successfully places GTT limit buy order', () => {
-    cy.mockVegaWalletTransaction();
-    const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000);
-    const order: OrderSubmission = {
-      marketId: 'market-0',
-      type: Schema.OrderType.TYPE_LIMIT,
-      side: Schema.Side.SIDE_SELL,
-      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
-      size: '100',
-      price: '1.00',
-      expiresAt: expiresAt.toISOString().substring(0, 16),
-      postOnly: false,
-      reduceOnly: false,
-    };
-
-    createOrder(order);
-    testOrderSubmission(order, {
-      price: '100000',
-      expiresAt:
-        new Date(order.expiresAt as string).getTime().toString() + '000000',
-      postOnly: false,
-      reduceOnly: false,
-    });
-  });
-});

apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts

@@ -54,6 +54,15 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     cy.getByTestId(toggleLimit).next('input').should('be.checked');
     cy.getByTestId(orderPriceField).should('have.value', '101');
   });
+
+  it('sidebar should be open after reload', () => {
+    cy.mockTradingPage();
+    cy.getByTestId('deal-ticket-form').should('be.visible');
+    cy.getByTestId('Order').click();
+    cy.getByTestId('deal-ticket-form').should('not.exist');
+    cy.reload();
+    cy.getByTestId('deal-ticket-form').should('be.visible');
+  });
 });
 
 describe(

apps/trading-e2e/src/integration/trading-deal-ticket-order.cy.ts

@@ -64,7 +64,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1');
       cy.getByTestId(orderPriceField).clear().type('1.123456');
       cy.getByTestId(placeOrderBtn).click();
-      cy.getByTestId('deal-ticket-error-message-price-limit').should(
+      cy.getByTestId('deal-ticket-error-message-price').should(
         'have.text',
         'Price accepts up to 5 decimal places'
       );
@@ -87,7 +87,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1.234');
       // 7002-SORD-060
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('deal-ticket-error-message-size-market').should(
+      cy.getByTestId('deal-ticket-error-message-size').should(
         'have.text',
         'Size must be whole numbers for this market'
       );
@@ -96,7 +96,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
     it('must warn if order size is set to 0', function () {
       cy.getByTestId(orderSizeField).clear().type('0');
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('deal-ticket-error-message-size-market').should(
+      cy.getByTestId('deal-ticket-error-message-size').should(
         'have.text',
         'Size cannot be lower than 1'
       );

apps/trading-e2e/src/integration/trading-orders.cy.ts

@@ -222,12 +222,17 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
 
   it('must see a filled order', () => {
     // 7002-SORD-046
+    // 7003-MORD-020
     // NOT COVERED:  Must be able to see/link to all trades that were created from this order
     updateOrder({
       id: orderId,
       status: Schema.OrderStatus.STATUS_FILLED,
     });
     cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
+    cy.get('[col-id="market.tradableInstrument.instrument.code"]').contains(
+      '[title="Future"]',
+      'Futr'
+    );
   });
 
   it('must see a rejected order', () => {

apps/trading/components/market-banner/market-successor-proposal-banner.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import type {
   SuccessorProposalListFieldsFragment,
   NewMarketSuccessorFieldsFragment,
@@ -52,7 +52,7 @@ export const MarketSuccessorProposalBanner = ({
               TOKEN_PROPOSAL.replace(':id', item.id || '')
             );
             return (
-              <>
+              <Fragment key={i}>
                 <ExternalLink href={externalLink} key={i}>
                   {
                     (item.terms?.change as NewMarketSuccessorFieldsFragment)
@@ -60,7 +60,7 @@ export const MarketSuccessorProposalBanner = ({
                   }
                 </ExternalLink>
                 {i < successors.length - 1 && ', '}
-              </>
+              </Fragment>
             );
           })}
         </div>

apps/trading/components/market-header/market-header.tsx

@@ -3,7 +3,7 @@ import { Header, HeaderTitle } from '../header';
 import { useParams } from 'react-router-dom';
 import { MarketSelector } from '../../components/market-selector/market-selector';
 import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
-import { useMarket } from '@vegaprotocol/markets';
+import { useMarket, useMarketList } from '@vegaprotocol/markets';
 import { useState } from 'react';
 
 export const MarketHeader = () => {
@@ -11,6 +11,10 @@ export const MarketHeader = () => {
   const { data } = useMarket(marketId);
   const [open, setOpen] = useState(false);
 
+  // Ensure that markets are kept cached so opening the list
+  // shows all markets instantly
+  useMarketList();
+
   if (!data) return null;
 
   return (

apps/trading/components/market-selector/market-selector.spec.tsx

@@ -132,6 +132,7 @@ describe('MarketSelector', () => {
     data: markets,
     loading: false,
     error: undefined,
+    reload: jest.fn(),
   });
 
   it('Button "All" should be selected by default', () => {

apps/trading/components/market-selector/market-selector.tsx

@@ -1,14 +1,14 @@
 import { t } from '@vegaprotocol/i18n';
 import uniqBy from 'lodash/uniqBy';
-import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
+import { type MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
 import {
-  Input,
+  TradingInput,
   TinyScroll,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useCallback, useState, useMemo, useRef } from 'react';
+import { useCallback, useState, useMemo, useRef, useEffect } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useMarketSelectorList } from './use-market-selector-list';
 import type { ProductType } from './product-selector';
@@ -44,7 +44,12 @@ export const MarketSelector = ({
     assets: [],
   });
   const allProducts = filter.product === Product.All;
-  const { markets, data, loading, error } = useMarketSelectorList(filter);
+  const { markets, data, loading, error, reload } =
+    useMarketSelectorList(filter);
+
+  useEffect(() => {
+    reload();
+  }, [reload]);
 
   return (
     <div data-testid="market-selector">
@@ -57,7 +62,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/market-selector/sort-dropdown.tsx

@@ -15,6 +15,7 @@ export const Sort = {
   Gained: 'Gained',
   Lost: 'Lost',
   New: 'New',
+  TopTraded: 'TopTraded',
 } as const;
 
 export type SortType = keyof typeof Sort;
@@ -26,6 +27,7 @@ export const SortTypeMapping: {
   [Sort.Gained]: 'Top gaining',
   [Sort.Lost]: 'Top losing',
   [Sort.New]: 'New markets',
+  [Sort.TopTraded]: 'Top traded',
 };
 
 const SortIconMapping: {
@@ -35,6 +37,7 @@ const SortIconMapping: {
   [Sort.Gained]: VegaIconNames.TREND_UP,
   [Sort.Lost]: VegaIconNames.TREND_DOWN,
   [Sort.New]: VegaIconNames.STAR,
+  [Sort.TopTraded]: VegaIconNames.ARROW_UP,
 };
 
 export const SortDropdown = ({

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import orderBy from 'lodash/orderBy';
 import { MarketState } from '@vegaprotocol/types';
-import { calcCandleVolume, useMarketList } from '@vegaprotocol/markets';
+import {
+  calcCandleVolume,
+  calcTradedFactor,
+  useMarketList,
+} from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
 import type { Filter } from '../../components/market-selector/market-selector';
 import { Sort } from './sort-dropdown';
@@ -20,7 +24,7 @@ export const useMarketSelectorList = ({
   sort,
   searchTerm,
 }: Filter) => {
-  const { data, loading, error } = useMarketList();
+  const { data, loading, error, reload } = useMarketList();
 
   const markets = useMemo(() => {
     if (!data?.length) return [];
@@ -94,10 +98,14 @@ export const useMarketSelectorList = ({
       );
     }
 
+    if (sort === Sort.TopTraded) {
+      return orderBy(markets, [(m) => calcTradedFactor(m)], ['desc']);
+    }
+
     return markets;
   }, [data, product, searchTerm, assets, sort]);
 
-  return { markets, data, loading, error };
+  return { markets, data, loading, error, reload };
 };
 
 export const isMarketActive = (state: MarketState) => {

apps/trading/components/navbar/nav-header.tsx

@@ -1,6 +1,6 @@
 import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { MarketSelector } from '../market-selector';
-import { useMarket } from '@vegaprotocol/markets';
+import { useMarket, useMarketList } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { useParams } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -14,6 +14,10 @@ export const NavHeader = () => {
   const { data } = useMarket(marketId);
   const [open, setOpen] = useState(false);
 
+  // Ensure that markets are kept cached so opening the list
+  // shows all markets instantly
+  useMarketList();
+
   if (!marketId) return null;
 
   return (

apps/trading/components/sidebar/sidebar.tsx

@@ -14,12 +14,9 @@ import { Settings } from '../settings';
 import { Tooltip } from '../../components/tooltip';
 import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
-import { persist } from 'zustand/middleware';
 import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 
-const STORAGE_KEY = 'vega_sidebar_store';
-
 export enum ViewType {
   Order = 'Order',
   Info = 'Info',
@@ -302,22 +299,14 @@ export const useSidebar = create<{
   init: boolean;
   view: SidebarView | null;
   setView: (view: SidebarView | null) => void;
-}>()(
-  persist(
-    (set) => ({
-      init: true,
-      view: null,
-      setView: (x) =>
-        set(() => {
-          if (x == null) {
-            return { view: null, init: false };
-          }
-
-          return { view: x, init: false };
-        }),
+}>()((set) => ({
+  init: true,
+  view: null,
+  setView: (x) =>
+    set(() => {
+      if (x == null) {
+        return { view: null, init: false };
+      }
+      return { view: x, init: false };
     }),
-    {
-      name: STORAGE_KEY,
-    }
-  )
-);
+}));

apps/trading/components/stop-orders-container/stop-orders-container.tsx

@@ -36,6 +36,6 @@ export const StopOrdersContainer = () => {
 
 const useStopOrdersStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
-    name: 'vega_fills_store',
+    name: 'vega_stop_orders_store',
   })
 );

apps/trading/components/welcome-dialog/get-started.tsx

@@ -105,38 +105,29 @@ export const GetStarted = ({ lead }: Props) => {
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-inside -ml-5" role="list">
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">1. {t('Get a Vega wallet')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {(currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP ||
-                  pubKey) && <VegaIcon name={VegaIconNames.TICK} size={20} />}
-              </div>
-              <div className="ml-1">2. {t('Connect')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">3. {t('Deposit funds')}</div>
-            </li>
-            <li className="flex">
-              <div className="w-5">
-                {currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && (
-                  <VegaIcon name={VegaIconNames.TICK} size={20} />
-                )}
-              </div>
-              <div className="ml-1">4. {t('Open a position')}</div>
-            </li>
+          <ul className="list-none">
+            <Step
+              step={1}
+              text={t('Get a Vega wallet')}
+              complete={currentStep > OnboardingStep.ONBOARDING_WALLET_STEP}
+            />
+            <Step
+              step={2}
+              text={t('Connect')}
+              complete={Boolean(
+                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
+              )}
+            />
+            <Step
+              step={3}
+              text={t('Deposit funds')}
+              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
+            />
+            <Step
+              step={4}
+              text={t('Open a position')}
+              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
+            />
           </ul>
         </div>
         <div>
@@ -165,7 +156,7 @@ export const GetStarted = ({ lead }: Props) => {
   if (!pubKey) {
     return (
       <div className={wrapperClasses}>
-        <p className="text-sm mb-1">
+        <p className="mb-1 text-sm">
           You need a{' '}
           <ExternalLink href="https://vega.xyz/wallet">
             Vega wallet
@@ -186,3 +177,34 @@ export const GetStarted = ({ lead }: Props) => {
 
   return null;
 };
+
+const Step = ({
+  step,
+  text,
+  complete,
+}: {
+  step: number;
+  text: string;
+  complete: boolean;
+}) => {
+  return (
+    <li
+      className={classNames('flex', {
+        'text-vega-clight-200 dark:text-vega-cdark-200': complete,
+      })}
+    >
+      <div className="flex justify-center w-5">
+        {complete ? <Tick /> : <span>{step}.</span>}
+      </div>
+      <div className="ml-1">{text}</div>
+    </li>
+  );
+};
+
+const Tick = () => {
+  return (
+    <span className="relative right-[2px]">
+      <VegaIcon name={VegaIconNames.TICK} size={18} />
+    </span>
+  );
+};

apps/trading/components/welcome-dialog/telemetry-approval.tsx

@@ -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"

apps/trading/pages/_document.page.tsx

@@ -1,40 +1,10 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html>
+    <>
       <Head>
         <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta charSet="utf-8" />
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <meta name="description" content="Vega Protocol - VEGA Console" />
-        <meta name="og:type" content="website" />
-        <meta name="og:url" content="https://console.vega.xyz/" />
-        <meta name="og:title" content="Vega Protocol - Console" />
-        <meta name="og:site_name" content="Vega Protocol - Console" />
-        <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
-
-        <meta
-          name="twitter:card"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="twitter:title" content="Vega Protocol - Console" />
-        <meta name="twitter:description" content="Vega Protocol - Console" />
-        <meta
-          name="twitter:image"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="twitter:image:alt" content="VEGA logo" />
-        <meta name="twitter:site" content="@vegaprotocol" />
-
-        <meta name="description" content="Vega Protocol - Console" />
         <link
           rel="apple-touch-icon"
           content="https://static.vega.xyz/favicon.ico"
@@ -45,8 +15,6 @@ export default function Document() {
           as="font"
           type="font/woff2"
         />
-        {/* eslint-disable-next-line @next/next/no-css-tags */}
-        <link rel="stylesheet" href="/preloader.css" media="all" />
         <link
           rel="icon"
           type="image/x-icon"
@@ -54,10 +22,12 @@ export default function Document() {
         />
         <script src="/theme-setter.js" type="text/javascript" async />
       </Head>
-      <body className="bg-white dark:bg-vega-cdark-900 text-default font-alpha">
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
+      <Html>
+        <body className="bg-white dark:bg-vega-cdark-900 text-default font-alpha">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    </>
   );
 }

apps/trading/pages/index.page.tsx

@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { ClientRouter } from './client-router';
 
 /**
@@ -6,5 +7,60 @@ import { ClientRouter } from './client-router';
  * have to serve a static site via next export
  */
 export default function Index() {
-  return <ClientRouter />;
+  return (
+    <>
+      <Head>
+        <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta charSet="utf-8" />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Vega Protocol - VEGA Console" />
+        <meta name="og:type" content="website" />
+        <meta name="og:url" content="https://console.vega.xyz/" />
+        <meta name="og:title" content="Vega Protocol - Console" />
+        <meta name="og:site_name" content="Vega Protocol - Console" />
+        <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
+
+        <meta
+          name="twitter:card"
+          content="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="twitter:title" content="Vega Protocol - Console" />
+        <meta name="twitter:description" content="Vega Protocol - Console" />
+        <meta
+          name="twitter:image"
+          content="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="twitter:image:alt" content="VEGA logo" />
+        <meta name="twitter:site" content="@vegaprotocol" />
+
+        <meta name="description" content="Vega Protocol - Console" />
+        <link
+          rel="apple-touch-icon"
+          content="https://static.vega.xyz/favicon.ico"
+        />
+        <link
+          rel="preload"
+          href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+          as="font"
+          type="font/woff2"
+        />
+        {/* eslint-disable-next-line @next/next/no-css-tags */}
+        <link rel="stylesheet" href="/preloader.css" media="all" />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://static.vega.xyz/favicon.ico"
+        />
+        <script src="/theme-setter.js" type="text/javascript" async />
+      </Head>
+      <ClientRouter />
+    </>
+  );
 }

apps/trading/pages/styles.css

@@ -209,3 +209,15 @@ html [data-theme='dark'] {
   box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
   background-color: #999;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}

libs/accounts/src/lib/transfer-form.tsx

@@ -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/announcements/package.json

@@ -1,4 +1,8 @@
 {
   "name": "@vegaprotocol/announcements",
-  "version": "0.0.2"
+  "version": "0.0.2",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
 }

libs/assets/src/lib/asset-option.tsx

@@ -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/cypress/src/lib/capsule/propose-market.ts

@@ -153,8 +153,10 @@ export function waitForProposal(id: string): Promise<{ id: string }> {
       try {
         const res = await getProposal(id);
         if (
-          res.proposal !== null &&
-          res.proposal.state === Schema.ProposalState.STATE_OPEN
+          (res.proposal !== null &&
+            res.proposal.state === Schema.ProposalState.STATE_OPEN) ||
+          res.proposal.state ===
+            Schema.ProposalState.STATE_WAITING_FOR_NODE_VOTE
         ) {
           clearInterval(interval);
           resolve(res.proposal);

libs/datagrid/src/lib/filters/date-range-filter.tsx

@@ -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-amount.tsx

@@ -1,39 +0,0 @@
-import type { Control } from 'react-hook-form';
-import type { Market, StaticMarketData } from '@vegaprotocol/markets';
-import { DealTicketMarketAmount } from './deal-ticket-market-amount';
-import { DealTicketLimitAmount } from './deal-ticket-limit-amount';
-import * as Schema from '@vegaprotocol/types';
-import type { OrderFormValues } from '../../hooks/use-form-values';
-
-export interface DealTicketAmountProps {
-  control: Control<OrderFormValues>;
-  type: Schema.OrderType;
-  marketData: StaticMarketData;
-  marketPrice?: string;
-  market: Market;
-  sizeError?: string;
-  priceError?: string;
-}
-
-export const DealTicketAmount = ({
-  type,
-  marketData,
-  marketPrice,
-  ...props
-}: DealTicketAmountProps) => {
-  switch (type) {
-    case Schema.OrderType.TYPE_MARKET:
-      return (
-        <DealTicketMarketAmount
-          {...props}
-          marketData={marketData}
-          marketPrice={marketPrice}
-        />
-      );
-    case Schema.OrderType.TYPE_LIMIT:
-      return <DealTicketLimitAmount {...props} />;
-    default: {
-      throw new Error('Invalid ticket type ' + type);
-    }
-  }
-};

libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx

@@ -1,114 +0,0 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
-import { toDecimal, validateAmount } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import type { DealTicketAmountProps } from './deal-ticket-amount';
-import { Controller } from 'react-hook-form';
-
-export type DealTicketLimitAmountProps = Omit<
-  DealTicketAmountProps,
-  'marketData' | 'type'
->;
-
-export const DealTicketLimitAmount = ({
-  control,
-  market,
-  sizeError,
-  priceError,
-}: DealTicketLimitAmountProps) => {
-  const priceStep = toDecimal(market?.decimalPlaces);
-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const quoteName = market.tradableInstrument.instrument.product.quoteName;
-
-  const renderError = () => {
-    if (sizeError) {
-      return (
-        <InputError testId="deal-ticket-error-message-size-limit">
-          {sizeError}
-        </InputError>
-      );
-    }
-
-    if (priceError) {
-      return (
-        <InputError testId="deal-ticket-error-message-price-limit">
-          {priceError}
-        </InputError>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <div className="mb-2">
-      <div className="flex items-start gap-4">
-        <div className="flex-1">
-          <FormGroup
-            label={t('Size')}
-            labelFor="input-order-size-limit"
-            className="!mb-0"
-          >
-            <Controller
-              name="size"
-              control={control}
-              rules={{
-                required: t('You need to provide a size'),
-                min: {
-                  value: sizeStep,
-                  message: t('Size cannot be lower than ' + sizeStep),
-                },
-                validate: validateAmount(sizeStep, 'Size'),
-              }}
-              render={({ field }) => (
-                <Input
-                  id="input-order-size-limit"
-                  className="w-full"
-                  type="number"
-                  step={sizeStep}
-                  min={sizeStep}
-                  data-testid="order-size"
-                  onWheel={(e) => e.currentTarget.blur()}
-                  {...field}
-                />
-              )}
-            />
-          </FormGroup>
-        </div>
-        <div className="pt-7 leading-10">@</div>
-        <div className="flex-1">
-          <FormGroup
-            labelFor="input-price-quote"
-            label={t(`Price (${quoteName})`)}
-            labelAlign="right"
-            className="!mb-0"
-          >
-            <Controller
-              name="price"
-              control={control}
-              rules={{
-                required: t('You need provide a price'),
-                min: {
-                  value: priceStep,
-                  message: t('Price cannot be lower than ' + priceStep),
-                },
-                validate: validateAmount(priceStep, 'Price'),
-              }}
-              render={({ field }) => (
-                <Input
-                  id="input-price-quote"
-                  className="w-full"
-                  type="number"
-                  step={priceStep}
-                  data-testid="order-price"
-                  onWheel={(e) => e.currentTarget.blur()}
-                  {...field}
-                />
-              )}
-            />
-          </FormGroup>
-        </div>
-      </div>
-      {renderError()}
-    </div>
-  );
-};

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -1,97 +0,0 @@
-import {
-  addDecimalsFormatNumber,
-  toDecimal,
-  validateAmount,
-} from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { isMarketInAuction } from '@vegaprotocol/markets';
-import type { DealTicketAmountProps } from './deal-ticket-amount';
-import { Controller } from 'react-hook-form';
-import classNames from 'classnames';
-
-export type DealTicketMarketAmountProps = Omit<DealTicketAmountProps, 'type'>;
-
-export const DealTicketMarketAmount = ({
-  control,
-  market,
-  marketData,
-  marketPrice,
-  sizeError,
-}: DealTicketMarketAmountProps) => {
-  const quoteName = market.tradableInstrument.instrument.product.quoteName;
-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const price = marketPrice;
-
-  const priceFormatted = price
-    ? addDecimalsFormatNumber(price, market.decimalPlaces)
-    : undefined;
-
-  const inAuction = isMarketInAuction(marketData.marketTradingMode);
-
-  return (
-    <div className="mb-2">
-      <div className="flex items-start gap-4">
-        <div className="flex-1">
-          <div className="mb-2 text-sm">{t('Size')}</div>
-          <Controller
-            name="size"
-            control={control}
-            rules={{
-              required: t('You need to provide a size'),
-              min: {
-                value: sizeStep,
-                message: t('Size cannot be lower than ' + sizeStep),
-              },
-              validate: validateAmount(sizeStep, 'Size'),
-            }}
-            render={({ field }) => (
-              <Input
-                id="input-order-size-market"
-                className="w-full"
-                type="number"
-                step={sizeStep}
-                min={sizeStep}
-                onWheel={(e) => e.currentTarget.blur()}
-                data-testid="order-size"
-                {...field}
-              />
-            )}
-          />
-        </div>
-        <div className="pt-7 leading-10">@</div>
-        <div className="flex-1 text-sm text-right">
-          {inAuction && (
-            <Tooltip
-              description={t(
-                'This market is in auction. The uncrossing price is an indication of what the price is expected to be when the auction ends.'
-              )}
-            >
-              <div className="mb-2">{t(`Indicative price`)}</div>
-            </Tooltip>
-          )}
-          <div
-            data-testid="last-price"
-            className={classNames('leading-10', { 'pt-7': !inAuction })}
-          >
-            {priceFormatted && quoteName ? (
-              <>
-                ~{priceFormatted} {quoteName}
-              </>
-            ) : (
-              '-'
-            )}
-          </div>
-        </div>
-      </div>
-      {sizeError && (
-        <InputError
-          intent="danger"
-          testId="deal-ticket-error-message-size-market"
-        >
-          {sizeError}
-        </InputError>
-      )}
-    </div>
-  );
-};

libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx

@@ -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.spec.tsx

@@ -72,6 +72,7 @@ const timeInForce = 'order-tif';
 const sizeErrorMessage = 'stop-order-error-message-size';
 const priceErrorMessage = 'stop-order-error-message-price';
 const triggerPriceErrorMessage = 'stop-order-error-message-trigger-price';
+const triggerPriceWarningMessage = 'stop-order-warning-message-trigger-price';
 const triggerTrailingPercentOffsetErrorMessage =
   'stop-order-error-message-trigger-trailing-percent-offset';
 
@@ -114,14 +115,6 @@ describe('StopOrder', () => {
     });
   });
 
-  it('should display trigger price as price for market type order', async () => {
-    render(generateJsx());
-    await userEvent.click(screen.getByTestId(orderTypeTrigger));
-    await userEvent.click(screen.getByTestId(orderTypeMarket));
-    await userEvent.type(screen.getByTestId(triggerPriceInput), '10');
-    expect(screen.getByTestId('price')).toHaveTextContent('10.0');
-  });
-
   it('should use local storage state for initial values', async () => {
     const values: Partial<StopOrderFormValues> = {
       type: Schema.OrderType.TYPE_LIMIT,
@@ -203,8 +196,8 @@ describe('StopOrder', () => {
 
     await userEvent.click(screen.getByTestId(submitButton));
     // price error message should not show if size has error
-    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
-    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+    // expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+    // await userEvent.type(screen.getByTestId(sizeInput), '0.1');
     expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
     await userEvent.type(screen.getByTestId(priceInput), '0.001');
     expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
@@ -249,10 +242,17 @@ describe('StopOrder', () => {
     await userEvent.type(screen.getByTestId(triggerPriceInput), '0.001');
     expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
 
-    // clear and fill using valid value
+    // clear and fill using value causing immediate trigger
     await userEvent.clear(screen.getByTestId(triggerPriceInput));
     await userEvent.type(screen.getByTestId(triggerPriceInput), '0.01');
     expect(screen.queryByTestId(triggerPriceErrorMessage)).toBeNull();
+    expect(
+      screen.queryByTestId(triggerPriceWarningMessage)
+    ).toBeInTheDocument();
+
+    // change to correct value
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '2');
+    expect(screen.queryByTestId(triggerPriceWarningMessage)).toBeNull();
   });
 
   it('validates trigger trailing percentage offset field', async () => {

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx

@@ -2,24 +2,26 @@ import { useRef, useCallback, useEffect } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { StopOrdersSubmission } from '@vegaprotocol/wallet';
 import {
-  formatNumber,
+  formatForInput,
   removeDecimal,
   toDecimal,
   validateAmount,
 } from '@vegaprotocol/utils';
+import type { Control, UseFormWatch } from 'react-hook-form';
 import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
 import {
-  Radio,
-  RadioGroup,
-  Input,
-  Checkbox,
-  FormGroup,
-  InputError,
-  Select,
+  TradingRadio as Radio,
+  TradingRadioGroup as RadioGroup,
+  TradingInput as Input,
+  TradingCheckbox as Checkbox,
+  TradingFormGroup as FormGroup,
+  TradingInputError as InputError,
+  TradingSelect as Select,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
-import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
+import { getDerivedPrice } from '@vegaprotocol/markets';
+import type { Market } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { ExpirySelector } from './expiry-selector';
 import { SideSelector } from './side-selector';
@@ -34,10 +36,10 @@ import { TypeToggle } from './type-selector';
 import {
   useDealTicketFormValues,
   DealTicketType,
-  type StopOrderFormValues,
   dealTicketTypeToOrderType,
   isStopOrderType,
 } from '../../hooks/use-form-values';
+import type { StopOrderFormValues } from '../../hooks/use-form-values';
 import { mapFormValuesToStopOrdersSubmission } from '../../utils/map-form-values-to-submission';
 import { DealTicketButton } from './deal-ticket-button';
 import { DealTicketFeeDetails } from './deal-ticket-fee-details';
@@ -49,6 +51,8 @@ export interface StopOrderProps {
   submit: (order: StopOrdersSubmission) => void;
 }
 
+const trailingPercentOffsetStep = '0.1';
+
 const getDefaultValues = (
   type: Schema.OrderType,
   storedValues?: Partial<StopOrderFormValues>
@@ -62,9 +66,426 @@ const getDefaultValues = (
   expire: false,
   expiryStrategy: Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT,
   size: '0',
+  oco: false,
+  ocoType: type,
+  ocoTimeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+  ocoTriggerType: 'price',
+  ocoSize: '0',
   ...storedValues,
 });
 
+const Trigger = ({
+  control,
+  watch,
+  priceStep,
+  assetSymbol,
+  oco,
+  marketPrice,
+  decimalPlaces,
+}: {
+  control: Control<StopOrderFormValues>;
+  watch: UseFormWatch<StopOrderFormValues>;
+  priceStep: string;
+  assetSymbol: string;
+  oco?: boolean;
+  marketPrice?: string | null;
+  decimalPlaces: number;
+}) => {
+  const triggerType = watch(oco ? 'ocoTriggerType' : 'triggerType');
+  const triggerDirection = watch('triggerDirection');
+  const isPriceTrigger = triggerType === 'price';
+  return (
+    <FormGroup label={t('Trigger')} labelFor="">
+      <Controller
+        name="triggerDirection"
+        control={control}
+        render={({ field }) => {
+          const { value, onChange } = field;
+          return (
+            <RadioGroup
+              name="triggerDirection"
+              onChange={onChange}
+              value={value}
+              orientation="horizontal"
+              className="mb-2"
+            >
+              <Radio
+                value={
+                  oco
+                    ? Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_FALLS_BELOW
+                    : Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_RISES_ABOVE
+                }
+                id={`triggerDirection-risesAbove${oco ? '-oco' : ''}`}
+                label={'Rises above'}
+              />
+              <Radio
+                value={
+                  !oco
+                    ? Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_FALLS_BELOW
+                    : Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_RISES_ABOVE
+                }
+                id={`triggerDirection-fallsBelow${oco ? '-oco' : ''}`}
+                label={'Falls below'}
+              />
+            </RadioGroup>
+          );
+        }}
+      />
+      {isPriceTrigger && (
+        <div className="mb-2">
+          <Controller
+            name={oco ? 'ocoTriggerPrice' : 'triggerPrice'}
+            rules={{
+              required: t('You need provide a price'),
+              min: {
+                value: priceStep,
+                message: t('Price cannot be lower than ' + priceStep),
+              },
+              validate: validateAmount(priceStep, 'Price'),
+            }}
+            control={control}
+            render={({ field, fieldState }) => {
+              const { value, ...props } = field;
+              let triggerWarning = false;
+
+              if (marketPrice && value) {
+                const condition =
+                  (!oco &&
+                    triggerDirection ===
+                      Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_RISES_ABOVE) ||
+                  (oco &&
+                    triggerDirection ===
+                      Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_FALLS_BELOW)
+                    ? '>'
+                    : '<';
+                const diff =
+                  BigInt(marketPrice) -
+                  BigInt(removeDecimal(value, decimalPlaces));
+                if (
+                  (condition === '>' && diff > 0) ||
+                  (condition === '<' && diff < 0)
+                ) {
+                  triggerWarning = true;
+                }
+              }
+              return (
+                <>
+                  <div className="mb-2">
+                    <Input
+                      data-testid={`triggerPrice${oco ? '-oco' : ''}`}
+                      type="number"
+                      step={priceStep}
+                      appendElement={assetSymbol}
+                      value={value || ''}
+                      hasError={!!fieldState.error}
+                      {...props}
+                    />
+                  </div>
+                  {fieldState.error && (
+                    <InputError
+                      testId={`stop-order-error-message-trigger-price${
+                        oco ? '-oco' : ''
+                      }`}
+                    >
+                      {fieldState.error.message}
+                    </InputError>
+                  )}
+                  {!fieldState.error && triggerWarning && (
+                    <InputError
+                      intent="warning"
+                      testId={`stop-order-warning-message-trigger-price${
+                        oco ? '-oco' : ''
+                      }`}
+                    >
+                      {t('Stop order will be triggered immediately')}
+                    </InputError>
+                  )}
+                </>
+              );
+            }}
+          />
+        </div>
+      )}
+      {!isPriceTrigger && (
+        <div className="mb-2">
+          <Controller
+            name={
+              oco
+                ? 'ocoTriggerTrailingPercentOffset'
+                : 'triggerTrailingPercentOffset'
+            }
+            control={control}
+            rules={{
+              required: t('You need provide a trailing percent offset'),
+              min: {
+                value: trailingPercentOffsetStep,
+                message: t(
+                  'Trailing percent offset cannot be lower than ' +
+                    trailingPercentOffsetStep
+                ),
+              },
+              max: {
+                value: '99.9',
+                message: t(
+                  'Trailing percent offset cannot be higher than 99.9'
+                ),
+              },
+              validate: validateAmount(
+                trailingPercentOffsetStep,
+                'Trailing percentage offset'
+              ),
+            }}
+            render={({ field, fieldState }) => {
+              const { value, ...props } = field;
+              return (
+                <>
+                  <div className="mb-2">
+                    <Input
+                      type="number"
+                      step={trailingPercentOffsetStep}
+                      appendElement="%"
+                      data-testid={`triggerTrailingPercentOffset${
+                        oco ? '-oco' : ''
+                      }`}
+                      value={value || ''}
+                      hasError={!!fieldState.error}
+                      {...props}
+                    />
+                  </div>
+                  {fieldState.error && (
+                    <InputError
+                      testId={`stop-order-error-message-trigger-trailing-percent-offset${
+                        oco ? '-oco' : ''
+                      }`}
+                    >
+                      {fieldState.error.message}
+                    </InputError>
+                  )}
+                </>
+              );
+            }}
+          />
+        </div>
+      )}
+      <Controller
+        name={oco ? 'ocoTriggerType' : 'triggerType'}
+        control={control}
+        rules={{
+          deps: oco
+            ? ['ocoTriggerTrailingPercentOffset', 'ocoTriggerPrice']
+            : ['triggerTrailingPercentOffset', 'triggerPrice'],
+        }}
+        render={({ field }) => {
+          const { onChange, value } = field;
+          return (
+            <RadioGroup
+              onChange={onChange}
+              value={value}
+              orientation="horizontal"
+            >
+              <Radio
+                value="price"
+                id={`triggerType-price${oco ? '-oco' : ''}`}
+                label={'Price'}
+              />
+              <Radio
+                value="trailingPercentOffset"
+                id={`triggerType-trailingPercentOffset${oco ? '-oco' : ''}`}
+                label={'Trailing Percent Offset'}
+              />
+            </RadioGroup>
+          );
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+const Size = ({
+  control,
+  sizeStep,
+  oco,
+}: {
+  control: Control<StopOrderFormValues>;
+  sizeStep: string;
+  oco?: boolean;
+}) => {
+  return (
+    <Controller
+      name={oco ? 'ocoSize' : 'size'}
+      control={control}
+      rules={{
+        required: t('You need to provide a size'),
+        min: {
+          value: sizeStep,
+          message: t('Size cannot be lower than ' + sizeStep),
+        },
+        validate: validateAmount(sizeStep, 'Size'),
+      }}
+      render={({ field, fieldState }) => {
+        const { value, ...props } = field;
+        const id = `order-size${oco ? '-oco' : ''}`;
+        return (
+          <div className="mb-4">
+            <FormGroup labelFor={id} label={t(`Size`)} compact>
+              <Input
+                id={id}
+                className="w-full"
+                type="number"
+                step={sizeStep}
+                min={sizeStep}
+                onWheel={(e) => e.currentTarget.blur()}
+                data-testid={id}
+                value={value || ''}
+                hasError={!!fieldState.error}
+                {...props}
+              />
+            </FormGroup>
+            {fieldState.error && (
+              <InputError
+                testId={`stop-order-error-message-size${oco ? '-oco' : ''}`}
+              >
+                {fieldState.error.message}
+              </InputError>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+const Price = ({
+  control,
+  watch,
+  priceStep,
+  quoteName,
+  oco,
+}: {
+  control: Control<StopOrderFormValues>;
+  watch: UseFormWatch<StopOrderFormValues>;
+  priceStep: string;
+  quoteName: string;
+  oco?: boolean;
+}) => {
+  if (watch(oco ? 'ocoType' : 'type') === Schema.OrderType.TYPE_MARKET) {
+    return null;
+  }
+  return (
+    <Controller
+      name={oco ? 'ocoPrice' : 'price'}
+      control={control}
+      rules={{
+        deps: 'type',
+        required: t('You need provide a price'),
+        min: {
+          value: priceStep,
+          message: t('Price cannot be lower than ' + priceStep),
+        },
+        validate: validateAmount(priceStep, 'Price'),
+      }}
+      render={({ field, fieldState }) => {
+        const { value, ...props } = field;
+        const id = `order-price${oco ? '-oco' : ''}`;
+        return (
+          <div className="mb-4">
+            <FormGroup
+              labelFor={id}
+              label={t(`Price (${quoteName})`)}
+              compact={true}
+            >
+              <Input
+                id={id}
+                className="w-full"
+                type="number"
+                step={priceStep}
+                data-testid={id}
+                onWheel={(e) => e.currentTarget.blur()}
+                value={value || ''}
+                hasError={!!fieldState.error}
+                {...props}
+              />
+            </FormGroup>
+            {fieldState.error && (
+              <InputError
+                testId={`stop-order-error-message-price${oco ? '-oco' : ''}`}
+              >
+                {fieldState.error.message}
+              </InputError>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+const TimeInForce = ({
+  control,
+  oco,
+}: {
+  control: Control<StopOrderFormValues>;
+  oco?: boolean;
+}) => (
+  <Controller
+    name="timeInForce"
+    control={control}
+    render={({ field, fieldState }) => {
+      const id = `select-time-in-force${oco ? '-oco' : ''}`;
+      return (
+        <div className="mb-2">
+          <FormGroup label={t('Time in force')} labelFor={id} compact={true}>
+            <Select
+              id={id}
+              className="w-full"
+              data-testid="order-tif"
+              hasError={!!fieldState.error}
+              {...field}
+            >
+              <option
+                key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
+                value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
+              >
+                {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
+              </option>
+              <option
+                key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
+                value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
+              >
+                {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
+              </option>
+            </Select>
+          </FormGroup>
+          {fieldState.error && (
+            <InputError testId={`stop-error-message-tif${oco ? '-oco' : ''}`}>
+              {fieldState.error.message}
+            </InputError>
+          )}
+        </div>
+      );
+    }}
+  />
+);
+
+const ReduceOnly = () => (
+  <Checkbox
+    name="reduce-only"
+    checked={true}
+    disabled={true}
+    label={
+      <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
+        <>{t('Reduce only')}</>
+      </Tooltip>
+    }
+  />
+);
+
 export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const setType = useDealTicketFormValues((state) => state.setType);
@@ -107,6 +528,8 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const timeInForce = watch('timeInForce');
   const rawPrice = watch('price');
   const rawSize = watch('size');
+  const oco = watch('oco');
+  const expiresAt = watch('expiresAt');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -155,12 +578,6 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
 
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
   const priceStep = toDecimal(market?.decimalPlaces);
-  const trailingPercentOffsetStep = '0.1';
-
-  const priceFormatted =
-    isPriceTrigger && triggerPrice
-      ? formatNumber(triggerPrice, market.decimalPlaces)
-      : undefined;
 
   useController({
     name: 'type',
@@ -199,286 +616,110 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-      <FormGroup label={t('Trigger')} compact={true} labelFor="">
+      <Trigger
+        control={control}
+        watch={watch}
+        priceStep={priceStep}
+        assetSymbol={asset.symbol}
+        marketPrice={marketPrice}
+        decimalPlaces={market.decimalPlaces}
+      />
+      <hr className="mb-4 border-vega-clight-500 dark:border-vega-cdark-500" />
+      <Price
+        control={control}
+        watch={watch}
+        priceStep={priceStep}
+        quoteName={quoteName}
+      />
+      <Size control={control} sizeStep={sizeStep} />
+      <TimeInForce control={control} />
+      <div className="flex justify-end pb-3 gap-2">
+        <ReduceOnly />
+      </div>
+      <hr className="mb-4 border-vega-clight-500 dark:border-vega-cdark-500" />
+      <div className="flex justify-between pb-2 gap-2">
         <Controller
-          name="triggerDirection"
+          name="oco"
           control={control}
           render={({ field }) => {
             const { onChange, value } = field;
             return (
-              <RadioGroup
-                name="triggerDirection"
-                onChange={onChange}
-                value={value}
-                orientation="horizontal"
-                className="mb-2"
-              >
-                <Radio
-                  value={
-                    Schema.StopOrderTriggerDirection
-                      .TRIGGER_DIRECTION_RISES_ABOVE
-                  }
-                  id="triggerDirection-risesAbove"
-                  label={'Rises above'}
-                />
-                <Radio
-                  value={
-                    Schema.StopOrderTriggerDirection
-                      .TRIGGER_DIRECTION_FALLS_BELOW
-                  }
-                  id="triggerDirection-fallsBelow"
-                  label={'Falls below'}
-                />
-              </RadioGroup>
+              <Checkbox
+                onCheckedChange={(state) => {
+                  onChange(state);
+                  setValue(
+                    'expiryStrategy',
+                    Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
+                  );
+                }}
+                checked={value}
+                name="oco"
+                label={
+                  <Tooltip
+                    description={<span>{t('One cancels another')}</span>}
+                  >
+                    <>{t('OCO')}</>
+                  </Tooltip>
+                }
+              />
             );
           }}
         />
-        {isPriceTrigger && (
-          <div className="mb-2">
+      </div>
+      {oco && (
+        <>
+          <FormGroup label={t('Type')} labelFor="">
             <Controller
-              name="triggerPrice"
-              rules={{
-                required: t('You need provide a price'),
-                min: {
-                  value: priceStep,
-                  message: t('Price cannot be lower than ' + priceStep),
-                },
-                validate: validateAmount(priceStep, 'Price'),
-              }}
+              name={`ocoType`}
               control={control}
               render={({ field }) => {
-                const { value, ...props } = field;
+                const { onChange, value } = field;
                 return (
-                  <div className="mb-2">
-                    <Input
-                      data-testid="triggerPrice"
-                      type="number"
-                      step={priceStep}
-                      appendElement={asset.symbol}
-                      value={value || ''}
-                      {...props}
+                  <RadioGroup
+                    onChange={onChange}
+                    value={value}
+                    orientation="horizontal"
+                  >
+                    <Radio
+                      value={Schema.OrderType.TYPE_MARKET}
+                      id={`ocoTypeMarket`}
+                      label={'Market'}
                     />
-                  </div>
-                );
-              }}
-            />
-            {errors.triggerPrice && (
-              <InputError testId="stop-order-error-message-trigger-price">
-                {errors.triggerPrice.message}
-              </InputError>
-            )}
-          </div>
-        )}
-        {!isPriceTrigger && (
-          <div className="mb-2">
-            <Controller
-              name="triggerTrailingPercentOffset"
-              control={control}
-              rules={{
-                required: t('You need provide a trailing percent offset'),
-                min: {
-                  value: trailingPercentOffsetStep,
-                  message: t(
-                    'Trailing percent offset cannot be lower than ' +
-                      trailingPercentOffsetStep
-                  ),
-                },
-                max: {
-                  value: '99.9',
-                  message: t(
-                    'Trailing percent offset cannot be higher than 99.9'
-                  ),
-                },
-                validate: validateAmount(
-                  trailingPercentOffsetStep,
-                  'Trailing percentage offset'
-                ),
-              }}
-              render={({ field }) => {
-                const { value, ...props } = field;
-                return (
-                  <div className="mb-2">
-                    <Input
-                      type="number"
-                      step={trailingPercentOffsetStep}
-                      appendElement="%"
-                      data-testid="triggerTrailingPercentOffset"
-                      value={value || ''}
-                      {...props}
+                    <Radio
+                      value={Schema.OrderType.TYPE_LIMIT}
+                      id={`ocoTypeLimit`}
+                      label={'Limit'}
                     />
-                  </div>
-                );
-              }}
-            />
-            {errors.triggerTrailingPercentOffset && (
-              <InputError testId="stop-order-error-message-trigger-trailing-percent-offset">
-                {errors.triggerTrailingPercentOffset.message}
-              </InputError>
-            )}
-          </div>
-        )}
-        <Controller
-          name="triggerType"
-          control={control}
-          rules={{ deps: ['triggerTrailingPercentOffset', 'triggerPrice'] }}
-          render={({ field }) => {
-            const { onChange, value } = field;
-            return (
-              <RadioGroup
-                onChange={onChange}
-                value={value}
-                orientation="horizontal"
-              >
-                <Radio value="price" id="triggerType-price" label={'Price'} />
-                <Radio
-                  value="trailingPercentOffset"
-                  id="triggerType-trailingPercentOffset"
-                  label={'Trailing Percent Offset'}
-                />
-              </RadioGroup>
-            );
-          }}
-        />
-      </FormGroup>
-      <div className="mb-2">
-        <div className="flex items-start gap-4">
-          <FormGroup
-            labelFor="input-price-quote"
-            label={t(`Size`)}
-            className="!mb-0 flex-1"
-          >
-            <Controller
-              name="size"
-              control={control}
-              rules={{
-                required: t('You need to provide a size'),
-                min: {
-                  value: sizeStep,
-                  message: t('Size cannot be lower than ' + sizeStep),
-                },
-                validate: validateAmount(sizeStep, 'Size'),
-              }}
-              render={({ field }) => {
-                const { value, ...props } = field;
-                return (
-                  <Input
-                    id="order-size"
-                    className="w-full"
-                    type="number"
-                    step={sizeStep}
-                    min={sizeStep}
-                    onWheel={(e) => e.currentTarget.blur()}
-                    data-testid="order-size"
-                    value={value || ''}
-                    {...props}
-                  />
+                  </RadioGroup>
                 );
               }}
             />
           </FormGroup>
-          <div className="pt-7 leading-10">@</div>
-          <div className="flex-1">
-            {type === Schema.OrderType.TYPE_LIMIT ? (
-              <FormGroup
-                labelFor="input-price-quote"
-                label={t(`Price (${quoteName})`)}
-                labelAlign="right"
-                className="!mb-0"
-              >
-                <Controller
-                  name="price"
-                  control={control}
-                  rules={{
-                    deps: 'type',
-                    required: t('You need provide a price'),
-                    min: {
-                      value: priceStep,
-                      message: t('Price cannot be lower than ' + priceStep),
-                    },
-                    validate: validateAmount(priceStep, 'Price'),
-                  }}
-                  render={({ field }) => {
-                    const { value, ...props } = field;
-                    return (
-                      <Input
-                        id="input-price-quote"
-                        className="w-full"
-                        type="number"
-                        step={priceStep}
-                        data-testid="order-price"
-                        onWheel={(e) => e.currentTarget.blur()}
-                        value={value || ''}
-                        {...props}
-                      />
-                    );
-                  }}
-                />
-              </FormGroup>
-            ) : (
-              <div
-                className="text-sm text-right pt-7 leading-10"
-                data-testid="price"
-              >
-                {priceFormatted && quoteName
-                  ? `~${priceFormatted} ${quoteName}`
-                  : '-'}
-              </div>
-            )}
-          </div>
-        </div>
-        {errors.size && (
-          <InputError testId="stop-order-error-message-size">
-            {errors.size.message}
-          </InputError>
-        )}
-
-        {!errors.size &&
-          errors.price &&
-          type === Schema.OrderType.TYPE_LIMIT && (
-            <InputError testId="stop-order-error-message-price">
-              {errors.price.message}
-            </InputError>
-          )}
-      </div>
-      <div className="mb-2">
-        <FormGroup
-          label={t('Time in force')}
-          labelFor="select-time-in-force"
-          compact={true}
-        >
-          <Controller
-            name="timeInForce"
+          <Trigger
             control={control}
-            render={({ field }) => (
-              <Select
-                id="select-time-in-force"
-                className="w-full"
-                data-testid="order-tif"
-                {...field}
-              >
-                <option
-                  key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
-                  value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
-                >
-                  {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
-                </option>
-                <option
-                  key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
-                  value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
-                >
-                  {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
-                </option>
-              </Select>
-            )}
+            watch={watch}
+            priceStep={priceStep}
+            assetSymbol={asset.symbol}
+            marketPrice={marketPrice}
+            decimalPlaces={market.decimalPlaces}
+            oco
           />
-        </FormGroup>
-        {errors.timeInForce && (
-          <InputError testId="stop-error-message-tif">
-            {errors.timeInForce.message}
-          </InputError>
-        )}
-      </div>
-      <div className="flex gap-2 pb-2 justify-between">
+          <hr className="mb-2 border-vega-clight-500 dark:border-vega-cdark-500" />
+          <Price
+            control={control}
+            watch={watch}
+            priceStep={priceStep}
+            quoteName={quoteName}
+            oco
+          />
+          <Size control={control} sizeStep={sizeStep} oco />
+          <TimeInForce control={control} oco />
+          <div className="flex justify-end mb-2 gap-2">
+            <ReduceOnly />
+          </div>
+        </>
+      )}
+      <div className="mb-2">
         <Controller
           name="expire"
           control={control}
@@ -486,39 +727,41 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
             const { onChange: onCheckedChange, value } = field;
             return (
               <Checkbox
-                onCheckedChange={onCheckedChange}
+                onCheckedChange={(value) => {
+                  if (
+                    value &&
+                    (!expiresAt || new Date(expiresAt).getTime() < Date.now())
+                  ) {
+                    setValue('expiresAt', formatForInput(new Date()), {
+                      shouldValidate: true,
+                    });
+                  }
+                  onCheckedChange(value);
+                }}
                 checked={value}
                 name="expire"
-                label={<span className="text-xs">{t('Expire')}</span>}
+                label={t('Expire')}
               />
             );
           }}
         />
-        <Checkbox
-          name="reduce-only"
-          checked={true}
-          disabled={true}
-          label={
-            <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
-              <span className="text-xs">{t('Reduce only')}</span>
-            </Tooltip>
-          }
-        />
       </div>
       {expire && (
         <>
-          <FormGroup
-            label={t('Strategy')}
-            labelFor="expiryStrategy"
-            compact={true}
-          >
+          <FormGroup label={t('Strategy')} labelFor="expiryStrategy">
             <Controller
               name="expiryStrategy"
               control={control}
               render={({ field }) => {
+                const { onChange, value } = field;
                 return (
-                  <RadioGroup orientation="horizontal" {...field}>
+                  <RadioGroup
+                    onChange={onChange}
+                    value={value}
+                    orientation="horizontal"
+                  >
                     <Radio
+                      disabled={oco}
                       value={
                         Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
                       }
@@ -537,11 +780,12 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               }}
             />
           </FormGroup>
-          <div className="mb-2">
+          <div className="mb-4">
             <Controller
               name="expiresAt"
               control={control}
               rules={{
+                required: t('You need provide a expiry time/date'),
                 validate: validateExpiration,
               }}
               render={({ field }) => {

libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx

@@ -7,7 +7,6 @@ import { DealTicket } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
-import { addDecimal } from '@vegaprotocol/utils';
 import type { OrdersQuery } from '@vegaprotocol/orders';
 import {
   DealTicketType,
@@ -135,20 +134,6 @@ describe('DealTicket', () => {
     );
   });
 
-  it('should display last price for market type order', () => {
-    render(generateJsx());
-    act(() => {
-      screen.getByTestId('order-type-Market').click();
-    });
-    // Assert last price is shown
-    expect(screen.getByTestId('last-price')).toHaveTextContent(
-      // eslint-disable-next-line
-      `~${addDecimal(marketPrice, market.decimalPlaces)} ${
-        market.tradableInstrument.instrument.product.quoteName
-      }`
-    );
-  });
-
   it('should use local storage state for initial values', () => {
     const expectedOrder = {
       marketId: market.id,

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -3,7 +3,6 @@ import * as Schema from '@vegaprotocol/types';
 import type { FormEventHandler } from 'react';
 import { memo, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Controller, useController, useForm } from 'react-hook-form';
-import { DealTicketAmount } from './deal-ticket-amount';
 import { DealTicketButton } from './deal-ticket-button';
 import {
   DealTicketFeeDetails,
@@ -17,8 +16,10 @@ import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
 import {
-  Checkbox,
-  InputError,
+  TradingInput as Input,
+  TradingCheckbox as Checkbox,
+  TradingFormGroup as FormGroup,
+  TradingInputError as InputError,
   Intent,
   Notification,
   Tooltip,
@@ -28,11 +29,15 @@ import {
   useEstimatePositionQuery,
   useOpenVolume,
 } from '@vegaprotocol/positions';
-import { toBigNum, removeDecimal } from '@vegaprotocol/utils';
+import {
+  toBigNum,
+  removeDecimal,
+  validateAmount,
+  toDecimal,
+  formatForInput,
+} from '@vegaprotocol/utils';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { getDerivedPrice } from '@vegaprotocol/markets';
-import type { OrderInfo } from '@vegaprotocol/types';
-
 import {
   validateExpiration,
   validateMarketState,
@@ -52,8 +57,6 @@ import {
   useMarketAccountBalance,
   useAccountBalance,
 } from '@vegaprotocol/accounts';
-
-import { OrderType } from '@vegaprotocol/types';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import {
   DealTicketType,
@@ -64,6 +67,7 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
 import { useDealTicketFormValues } from '../../hooks/use-form-values';
 import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
+import { isNonPersistentOrder } from '../../utils/time-in-force-persistance';
 
 export const REDUCE_ONLY_TOOLTIP =
   '"Reduce only" will ensure that this order will not increase the size of an open position. When the order is matched, it will only trade enough volume to bring your open volume towards 0 but never change the direction of your position. If applied to a limit order that is not instantly filled, the order will be stopped.';
@@ -168,6 +172,7 @@ export const DealTicket = ({
   const rawPrice = watch('price');
   const iceberg = watch('iceberg');
   const peakSize = watch('peakSize');
+  const expiresAt = watch('expiresAt');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -222,8 +227,8 @@ export const DealTicket = ({
   });
   const openVolume = useOpenVolume(pubKey, market.id) ?? '0';
   const orders = activeOrders
-    ? activeOrders.map<OrderInfo>((order) => ({
-        isMarketOrder: order.type === OrderType.TYPE_MARKET,
+    ? activeOrders.map<Schema.OrderInfo>((order) => ({
+        isMarketOrder: order.type === Schema.OrderType.TYPE_MARKET,
         price: order.price,
         remaining: order.remaining,
         side: order.side,
@@ -231,7 +236,7 @@ export const DealTicket = ({
     : [];
   if (normalizedOrder) {
     orders.push({
-      isMarketOrder: normalizedOrder.type === OrderType.TYPE_MARKET,
+      isMarketOrder: normalizedOrder.type === Schema.OrderType.TYPE_MARKET,
       price: normalizedOrder.price ?? '0',
       remaining: normalizedOrder.size,
       side: normalizedOrder.side,
@@ -299,12 +304,10 @@ export const DealTicket = ({
     pubKey,
   ]);
 
-  const disablePostOnlyCheckbox = [
-    Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
-    Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
-  ].includes(timeInForce);
-
-  const disableReduceOnlyCheckbox = !disablePostOnlyCheckbox;
+  const nonPersistentOrder = isNonPersistentOrder(timeInForce);
+  const disablePostOnlyCheckbox = nonPersistentOrder;
+  const disableReduceOnlyCheckbox = !nonPersistentOrder;
+  const disableIcebergCheckbox = nonPersistentOrder;
 
   const onSubmit = useCallback(
     (formValues: OrderFormValues) => {
@@ -332,6 +335,10 @@ export const DealTicket = ({
     },
   });
 
+  const priceStep = toDecimal(market?.decimalPlaces);
+  const sizeStep = toDecimal(market?.positionDecimalPlaces);
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
+
   return (
     <form
       onSubmit={
@@ -366,15 +373,82 @@ export const DealTicket = ({
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-      <DealTicketAmount
-        type={type}
+
+      <Controller
+        name="size"
         control={control}
-        market={market}
-        marketData={marketData}
-        marketPrice={marketPrice || undefined}
-        sizeError={errors.size?.message}
-        priceError={errors.price?.message}
+        rules={{
+          required: t('You need to provide a size'),
+          min: {
+            value: sizeStep,
+            message: t('Size cannot be lower than ' + sizeStep),
+          },
+          validate: validateAmount(sizeStep, 'Size'),
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-4">
+            <FormGroup
+              label={t('Size')}
+              labelFor="input-order-size-limit"
+              compact
+            >
+              <Input
+                id="input-order-size-limit"
+                className="w-full"
+                type="number"
+                step={sizeStep}
+                min={sizeStep}
+                data-testid="order-size"
+                onWheel={(e) => e.currentTarget.blur()}
+                {...field}
+              />
+            </FormGroup>
+            {fieldState.error && (
+              <InputError testId="deal-ticket-error-message-size">
+                {fieldState.error.message}
+              </InputError>
+            )}
+          </div>
+        )}
       />
+      {type === Schema.OrderType.TYPE_LIMIT && (
+        <Controller
+          name="price"
+          control={control}
+          rules={{
+            required: t('You need provide a price'),
+            min: {
+              value: priceStep,
+              message: t('Price cannot be lower than ' + priceStep),
+            },
+            validate: validateAmount(priceStep, 'Price'),
+          }}
+          render={({ field, fieldState }) => (
+            <div className="mb-4">
+              <FormGroup
+                labelFor="input-price-quote"
+                label={t(`Price (${quoteName})`)}
+                compact
+              >
+                <Input
+                  id="input-price-quote"
+                  className="w-full"
+                  type="number"
+                  step={priceStep}
+                  data-testid="order-price"
+                  onWheel={(e) => e.currentTarget.blur()}
+                  {...field}
+                />
+              </FormGroup>
+              {fieldState.error && (
+                <InputError testId="deal-ticket-error-message-price">
+                  {fieldState.error.message}
+                </InputError>
+              )}
+            </div>
+          )}
+        />
+      )}
       <Controller
         name="timeInForce"
         control={control}
@@ -388,7 +462,25 @@ export const DealTicket = ({
           <TimeInForceSelector
             value={field.value}
             orderType={type}
-            onSelect={field.onChange}
+            onSelect={(value) => {
+              // If GTT is selected and no expiresAt time is set, or its
+              // behind current time then reset the value to current time
+              if (
+                value === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT &&
+                (!expiresAt || new Date(expiresAt).getTime() < Date.now())
+              ) {
+                setValue('expiresAt', formatForInput(new Date()), {
+                  shouldValidate: true,
+                });
+              }
+
+              // iceberg orders must be persistent orders, so if user
+              // switches to to a non persisten tif value, remove iceberg selection
+              if (iceberg && isNonPersistentOrder(value)) {
+                setValue('iceberg', false);
+              }
+              field.onChange(value);
+            }}
             market={market}
             marketData={marketData}
             errorMessage={errors.timeInForce?.message}
@@ -401,6 +493,7 @@ export const DealTicket = ({
             name="expiresAt"
             control={control}
             rules={{
+              required: t('You need provide a expiry time/date'),
               validate: validateExpiration,
             }}
             render={({ field }) => (
@@ -412,7 +505,7 @@ export const DealTicket = ({
             )}
           />
         )}
-      <div className="flex gap-2 pb-2 justify-between">
+      <div className="flex justify-between pb-2 gap-2">
         <Controller
           name="postOnly"
           control={control}
@@ -478,7 +571,7 @@ export const DealTicket = ({
       </div>
       {type === Schema.OrderType.TYPE_LIMIT && (
         <>
-          <div className="flex gap-2 pb-2 justify-between">
+          <div className="flex justify-between pb-2 gap-2">
             <Controller
               name="iceberg"
               control={control}
@@ -487,6 +580,7 @@ export const DealTicket = ({
                   name="iceberg"
                   checked={field.value}
                   onCheckedChange={field.onChange}
+                  disabled={disableIcebergCheckbox}
                   label={
                     <Tooltip
                       description={

libs/deal-ticket/src/components/deal-ticket/expiry-selector.tsx

@@ -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';
@@ -14,29 +18,30 @@ export const ExpirySelector = ({
   onSelect,
   errorMessage,
 }: ExpirySelectorProps) => {
-  const now = useRef(new Date());
-  const date = value ? new Date(value) : now.current;
-  const dateFormatted = formatForInput(date);
-  const minDate = formatForInput(date);
+  const minDateRef = useRef(new Date());
+
   return (
-    <FormGroup
-      label={t('Expiry time/date')}
-      labelFor="expiration"
-      compact={true}
-    >
-      <Input
-        data-testid="date-picker-field"
-        id="expiration"
-        type="datetime-local"
-        value={dateFormatted}
-        onChange={(e) => onSelect(e.target.value)}
-        min={minDate}
-      />
-      {errorMessage && (
-        <InputError testId="deal-ticket-error-message-expiry">
-          {errorMessage}
-        </InputError>
-      )}
-    </FormGroup>
+    <div className="mb-4">
+      <TradingFormGroup
+        label={t('Expiry time/date')}
+        labelFor="expiration"
+        compact
+      >
+        <TradingInput
+          data-testid="date-picker-field"
+          id="expiration"
+          type="datetime-local"
+          value={value && formatForInput(new Date(value))}
+          onChange={(e) => onSelect(e.target.value)}
+          min={formatForInput(minDateRef.current)}
+          hasError={!!errorMessage}
+        />
+        {errorMessage && (
+          <TradingInputError testId="deal-ticket-error-message-expiry">
+            {errorMessage}
+          </TradingInputError>
+        )}
+      </TradingFormGroup>
+    </div>
   );
 };

libs/deal-ticket/src/components/deal-ticket/index.ts

@@ -1,7 +1,4 @@
-export * from './deal-ticket-amount';
 export * from './deal-ticket-container';
-export * from './deal-ticket-limit-amount';
-export * from './deal-ticket-market-amount';
 export * from './deal-ticket';
 export * from './deal-ticket-stop-order';
 export * from './deal-ticket-container';

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

@@ -1,7 +1,7 @@
 import {
-  FormGroup,
-  InputError,
-  Select,
+  TradingFormGroup,
+  TradingInputError,
+  TradingSelect,
   Tooltip,
   SimpleGrid,
 } from '@vegaprotocol/ui-toolkit';
@@ -90,31 +90,34 @@ export const TimeInForceSelector = ({
   };
 
   return (
-    <FormGroup
-      label={t('Time in force')}
-      labelFor="select-time-in-force"
-      compact={true}
-    >
-      <Select
-        id="select-time-in-force"
-        value={value}
-        onChange={(e) => {
-          onSelect(e.target.value as Schema.OrderTimeInForce);
-        }}
-        className="w-full"
-        data-testid="order-tif"
+    <div className="mb-4">
+      <TradingFormGroup
+        label={t('Time in force')}
+        labelFor="select-time-in-force"
+        compact={true}
       >
-        {options.map(([key, value]) => (
-          <option key={key} value={value}>
-            {timeInForceLabel(value)}
-          </option>
-        ))}
-      </Select>
-      {errorMessage && (
-        <InputError testId="deal-ticket-error-message-tif">
-          {renderError(errorMessage)}
-        </InputError>
-      )}
-    </FormGroup>
+        <TradingSelect
+          id="select-time-in-force"
+          value={value}
+          onChange={(e) => {
+            onSelect(e.target.value as Schema.OrderTimeInForce);
+          }}
+          className="w-full"
+          data-testid="order-tif"
+          hasError={!!errorMessage}
+        >
+          {options.map(([key, value]) => (
+            <option key={key} value={value}>
+              {timeInForceLabel(value)}
+            </option>
+          ))}
+        </TradingSelect>
+        {errorMessage && (
+          <TradingInputError testId="deal-ticket-error-message-tif">
+            {renderError(errorMessage)}
+          </TradingInputError>
+        )}
+      </TradingFormGroup>
+    </div>
   );
 };

libs/deal-ticket/src/components/deal-ticket/type-selector.tsx

@@ -1,5 +1,5 @@
 import {
-  InputError,
+  TradingInputError,
   SimpleGrid,
   Tooltip,
   TradingDropdown,
@@ -76,7 +76,7 @@ export const TypeToggle = ({
             <TradingDropdownTrigger
               data-testid="order-type-Stop"
               className={classNames(
-                'rounded px-3 flex flex-nowrap items-center justify-center',
+                'rounded px-2 flex flex-nowrap items-center justify-center',
                 {
                   'bg-vega-clight-500 dark:bg-vega-cdark-500': selectedOption,
                 }
@@ -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/deal-ticket/src/hooks/use-form-values.ts

@@ -28,6 +28,17 @@ export interface StopOrderFormValues {
   expire: boolean;
   expiryStrategy?: Schema.StopOrderExpiryStrategy;
   expiresAt?: string;
+
+  oco?: boolean;
+
+  ocoTriggerType: 'price' | 'trailingPercentOffset';
+  ocoTriggerPrice?: string;
+  ocoTriggerTrailingPercentOffset?: string;
+
+  ocoType: OrderType;
+  ocoSize: string;
+  ocoTimeInForce: OrderTimeInForce;
+  ocoPrice?: string;
 }
 
 export type OrderFormValues = {
@@ -138,6 +149,7 @@ export const useDealTicketFormValues = create<Store>()(
       })),
       {
         name: 'vega_deal_ticket_store',
+        version: 1,
       }
     )
   )

libs/deal-ticket/src/utils/map-form-values-to-submission.ts

@@ -9,6 +9,7 @@ import type {
 } from '../hooks/use-form-values';
 import * as Schema from '@vegaprotocol/types';
 import { removeDecimal, toNanoSeconds } from '@vegaprotocol/utils';
+import { isPersistentOrder } from './time-in-force-persistance';
 
 export const mapFormValuesToOrderSubmission = (
   order: OrderFormValues,
@@ -41,11 +42,8 @@ export const mapFormValuesToOrderSubmission = (
       ? false
       : order.reduceOnly,
   icebergOpts:
-    (order.type === Schema.OrderType.TYPE_MARKET ||
-      [
-        Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
-        Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
-      ].includes(order.timeInForce)) &&
+    order.type === Schema.OrderType.TYPE_LIMIT &&
+    isPersistentOrder(order.timeInForce) &&
     order.iceberg &&
     order.peakSize &&
     order.minimumVisibleSize
@@ -59,6 +57,22 @@ export const mapFormValuesToOrderSubmission = (
       : undefined,
 });
 
+const setTrigger = (
+  stopOrderSetup: StopOrderSetup,
+  triggerType: StopOrderFormValues['triggerPrice'],
+  triggerPrice: StopOrderFormValues['triggerPrice'],
+  triggerTrailingPercentOffset: StopOrderFormValues['triggerTrailingPercentOffset'],
+  decimalPlaces: number
+) => {
+  if (triggerType === 'price') {
+    stopOrderSetup.price = removeDecimal(triggerPrice ?? '', decimalPlaces);
+  } else if (triggerType === 'trailingPercentOffset') {
+    stopOrderSetup.trailingPercentOffset = (
+      Number(triggerTrailingPercentOffset) / 100
+    ).toFixed(3);
+  }
+};
+
 export const mapFormValuesToStopOrdersSubmission = (
   data: StopOrderFormValues,
   marketId: string,
@@ -81,31 +95,46 @@ export const mapFormValuesToStopOrdersSubmission = (
       positionDecimalPlaces
     ),
   };
-  if (data.triggerType === 'price') {
-    stopOrderSetup.price = removeDecimal(
-      data.triggerPrice ?? '',
+  setTrigger(
+    stopOrderSetup,
+    data.triggerType,
+    data.triggerPrice,
+    data.triggerTrailingPercentOffset,
+    decimalPlaces
+  );
+  let oppositeStopOrderSetup: StopOrderSetup | undefined = undefined;
+  if (data.oco) {
+    oppositeStopOrderSetup = {
+      orderSubmission: mapFormValuesToOrderSubmission(
+        {
+          type: data.ocoType,
+          side: data.side,
+          size: data.ocoSize,
+          timeInForce: data.ocoTimeInForce,
+          price: data.ocoPrice,
+          reduceOnly: true,
+        },
+        marketId,
+        decimalPlaces,
+        positionDecimalPlaces
+      ),
+    };
+    setTrigger(
+      oppositeStopOrderSetup,
+      data.ocoTriggerType,
+      data.ocoTriggerPrice,
+      data.ocoTriggerTrailingPercentOffset,
       decimalPlaces
     );
-  } else if (data.triggerType === 'trailingPercentOffset') {
-    stopOrderSetup.trailingPercentOffset = (
-      Number(data.triggerTrailingPercentOffset) / 100
-    ).toFixed(3);
   }
 
   if (data.expire) {
-    stopOrderSetup.expiresAt = data.expiresAt && toNanoSeconds(data.expiresAt);
-    if (
-      data.expiryStrategy ===
-      Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
-    ) {
-      stopOrderSetup.expiryStrategy =
-        Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS;
-    } else if (
-      data.expiryStrategy ===
-      Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
-    ) {
-      stopOrderSetup.expiryStrategy =
-        Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT;
+    const expiresAt = data.expiresAt && toNanoSeconds(data.expiresAt);
+    stopOrderSetup.expiresAt = expiresAt;
+    stopOrderSetup.expiryStrategy = data.expiryStrategy;
+    if (oppositeStopOrderSetup) {
+      oppositeStopOrderSetup.expiresAt = expiresAt;
+      oppositeStopOrderSetup.expiryStrategy = data.expiryStrategy;
     }
   }
 
@@ -114,12 +143,14 @@ export const mapFormValuesToStopOrdersSubmission = (
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_RISES_ABOVE
   ) {
     submission.risesAbove = stopOrderSetup;
+    submission.fallsBelow = oppositeStopOrderSetup;
   }
   if (
     data.triggerDirection ===
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
   ) {
     submission.fallsBelow = stopOrderSetup;
+    submission.risesAbove = oppositeStopOrderSetup;
   }
 
   return submission;

libs/deal-ticket/src/utils/map-form-values-to-submisstion.spec.ts

@@ -1,6 +1,8 @@
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from './map-form-values-to-submission';
 import * as Schema from '@vegaprotocol/types';
+import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
+import type { OrderFormValues } from '../hooks';
 
 describe('mapFormValuesToOrderSubmission', () => {
   it('sets and formats price only for limit orders', () => {
@@ -25,7 +27,7 @@ describe('mapFormValuesToOrderSubmission', () => {
     ).toEqual('10000');
   });
 
-  it('sets and formats expiresAt only for time in force orders', () => {
+  it('sets and formats expiresAt only for GTT orders', () => {
     expect(
       mapFormValuesToOrderSubmission(
         {
@@ -49,6 +51,41 @@ describe('mapFormValuesToOrderSubmission', () => {
     ).toEqual('1640995200000000000');
   });
 
+  it('sets and formats icebergOpts only for persisted orders', () => {
+    expect(
+      mapFormValuesToOrderSubmission(
+        {
+          type: OrderType.TYPE_LIMIT,
+          timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
+          iceberg: true,
+          peakSize: '10.00',
+          minimumVisibleSize: '10.00',
+        } as OrderFormValues,
+        'marketId',
+        2,
+        2
+      ).icebergOpts
+    ).toEqual(undefined);
+
+    expect(
+      mapFormValuesToOrderSubmission(
+        {
+          type: OrderType.TYPE_LIMIT,
+          timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+          iceberg: true,
+          peakSize: '10.00',
+          minimumVisibleSize: '10.00',
+        } as OrderFormValues,
+        'marketId',
+        2,
+        2
+      ).icebergOpts
+    ).toEqual({
+      peakSize: '1000',
+      minimumVisibleSize: '1000',
+    });
+  });
+
   it('formats size', () => {
     expect(
       mapFormValuesToOrderSubmission(

libs/deal-ticket/src/utils/time-in-force-persistance.spec.ts

@@ -0,0 +1,23 @@
+import { OrderTimeInForce } from '@vegaprotocol/types';
+import {
+  isNonPersistentOrder,
+  isPersistentOrder,
+} from './time-in-force-persistance';
+
+it('isNonPeristentOrder', () => {
+  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(true);
+  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(true);
+  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(false);
+  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(false);
+  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(false);
+  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(false);
+});
+
+it('isPeristentOrder', () => {
+  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(false);
+  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(false);
+  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(true);
+  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(true);
+  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(true);
+  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(true);
+});

libs/deal-ticket/src/utils/time-in-force-persistance.ts

@@ -0,0 +1,12 @@
+import { OrderTimeInForce } from '@vegaprotocol/types';
+
+export const isNonPersistentOrder = (timeInForce: OrderTimeInForce) => {
+  return [
+    OrderTimeInForce.TIME_IN_FORCE_FOK,
+    OrderTimeInForce.TIME_IN_FORCE_IOC,
+  ].includes(timeInForce);
+};
+
+export const isPersistentOrder = (timeInForce: OrderTimeInForce) => {
+  return !isNonPersistentOrder(timeInForce);
+};

libs/deposits/src/lib/deposit-form.tsx

@@ -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

@@ -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,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/markets/src/lib/components/market-info/info-key-value-table.tsx

@@ -98,7 +98,7 @@ export const Row = ({
       <div style={{ wordBreak: 'break-word' }}>
         {valueDiffersFromParentMarket ? (
           <div className="flex items-center gap-3">
-            <span className="line-through">
+            <span className="line-through dark:text-vega-dark-300">
               {getFormattedValue(parentValue)}
             </span>
             <span>{formattedValue}</span>

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -1,13 +1,14 @@
 import isEqual from 'lodash/isEqual';
 import type { ReactNode } from 'react';
-import { Fragment, useState } from 'react';
-import { useMemo } from 'react';
+import { Fragment, useMemo, useState } from 'react';
 import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/i18n';
 import { marketDataProvider } from '../../market-data-provider';
 import { totalFeesPercentage } from '../../market-utils';
 import {
   ExternalLink,
+  Intent,
+  Lozenge,
   Splash,
   Tooltip,
   VegaIcon,
@@ -27,9 +28,15 @@ import type {
 } from './market-info-data-provider';
 import { Last24hVolume } from '../last-24h-volume';
 import BigNumber from 'bignumber.js';
-import type { DataSourceDefinition, SignerKind } from '@vegaprotocol/types';
-import { ConditionOperatorMapping } from '@vegaprotocol/types';
-import { MarketTradingModeMapping } from '@vegaprotocol/types';
+import type {
+  DataSourceDefinition,
+  MarketTradingMode,
+  SignerKind,
+} from '@vegaprotocol/types';
+import {
+  ConditionOperatorMapping,
+  MarketTradingModeMapping,
+} from '@vegaprotocol/types';
 import {
   DApp,
   FLAGS,
@@ -48,8 +55,6 @@ import {
   useSuccessorMarketQuery,
 } from '../../__generated__';
 import { useSuccessorMarketProposalDetailsQuery } from '@vegaprotocol/proposals';
-import type { MarketTradingMode } from '@vegaprotocol/types';
-import type { Signer } from '@vegaprotocol/types';
 import classNames from 'classnames';
 import compact from 'lodash/compact';
 
@@ -575,7 +580,6 @@ export const RiskFactorsInfoPanel = ({
 export const PriceMonitoringBoundsInfoPanel = ({
   market,
   triggerIndex,
-  parentMarket,
 }: MarketInfoProps & {
   triggerIndex: number;
 }) => {
@@ -584,33 +588,13 @@ export const PriceMonitoringBoundsInfoPanel = ({
     variables: { marketId: market.id },
   });
 
-  const { data: parentData } = useDataProvider({
-    dataProvider: marketDataProvider,
-    variables: { marketId: parentMarket?.id || '' },
-    skip:
-      !parentMarket ||
-      !parentMarket?.priceMonitoringSettings?.parameters?.triggers?.[
-        triggerIndex
-      ],
-  });
-
   const quoteUnit =
     market?.tradableInstrument.instrument.product?.quoteName || '';
-  const parentQuoteUnit =
-    parentMarket?.tradableInstrument.instrument.product?.quoteName || '';
-  const isParentQuoteUnitEqual = quoteUnit === parentQuoteUnit;
 
   const trigger =
     market.priceMonitoringSettings?.parameters?.triggers?.[triggerIndex];
-  const parentTrigger =
-    parentMarket?.priceMonitoringSettings?.parameters?.triggers?.[triggerIndex];
-  const isParentTriggerEqual = isEqual(trigger, parentTrigger);
 
   const bounds = data?.priceMonitoringBounds?.[triggerIndex];
-  const parentBounds = parentData?.priceMonitoringBounds?.[triggerIndex];
-
-  const shouldShowParentData =
-    isParentQuoteUnitEqual && isParentTriggerEqual && !!parentBounds;
 
   if (!trigger) {
     console.error(
@@ -638,14 +622,6 @@ export const PriceMonitoringBoundsInfoPanel = ({
             highestPrice: bounds.maxValidPrice,
             lowestPrice: bounds.minValidPrice,
           }}
-          parentData={
-            shouldShowParentData
-              ? {
-                  highestPrice: parentBounds.maxValidPrice,
-                  lowestPrice: parentBounds.minValidPrice,
-                }
-              : undefined
-          }
           decimalPlaces={market.decimalPlaces}
           assetSymbol={quoteUnit}
         />
@@ -839,45 +815,76 @@ export const OracleInfoPanel = ({
       : (parentProduct?.dataSourceSpecForTradingTermination
           ?.data as DataSourceDefinition);
 
-  const isParentDataSourceSpecEqual =
-    parentDataSourceSpec !== undefined &&
-    dataSourceSpec === parentDataSourceSpec;
-  const isParentDataSourceSpecIdEqual =
+  const shouldShowParentData =
+    parentMarket !== undefined &&
     parentDataSourceSpecId !== undefined &&
-    dataSourceSpecId === parentDataSourceSpecId;
+    !isEqual(dataSourceSpec, parentDataSourceSpec);
+
+  const wrapperClasses = classNames('mb-4', {
+    'flex items-center gap-6': shouldShowParentData,
+  });
 
-  // We'll only provide successor parent data (if it differs) to the
-  // DataSourceProof component. Having an old external link struck through
-  // is unlikely to be useful.
   return (
-    <div className="flex flex-col gap-2">
-      <DataSourceProof
-        data-testid="oracle-proof-links"
-        data={dataSourceSpec}
-        providers={data}
-        type={type}
-        dataSourceSpecId={dataSourceSpecId}
-        parentData={
-          isParentDataSourceSpecEqual ? undefined : parentDataSourceSpec
-        }
-        parentDataSourceSpecId={
-          isParentDataSourceSpecIdEqual ? undefined : parentDataSourceSpecId
-        }
-      />
+    <>
+      {shouldShowParentData && (
+        <Lozenge variant={Intent.Primary} className="text-sm">
+          {t('Updated')}
+        </Lozenge>
+      )}
 
-      <ExternalLink
-        data-testid="oracle-spec-links"
-        href={`${VEGA_EXPLORER_URL}/oracles/${
-          type === 'settlementData'
-            ? product.dataSourceSpecForSettlementData.id
-            : product.dataSourceSpecForTradingTermination.id
-        }`}
-      >
-        {type === 'settlementData'
-          ? t('View settlement data specification')
-          : t('View termination specification')}
-      </ExternalLink>
-    </div>
+      <div className={wrapperClasses}>
+        {shouldShowParentData &&
+          parentDataSourceSpec &&
+          parentDataSourceSpecId &&
+          parentProduct && (
+            <div className="flex flex-col gap-2 text-vega-dark-300 line-through">
+              <DataSourceProof
+                data-testid="oracle-proof-links"
+                data={parentDataSourceSpec}
+                providers={data}
+                type={type}
+                dataSourceSpecId={parentDataSourceSpecId}
+              />
+
+              <ExternalLink
+                data-testid="oracle-spec-links"
+                href={`${VEGA_EXPLORER_URL}/oracles/${
+                  type === 'settlementData'
+                    ? parentProduct.dataSourceSpecForSettlementData.id
+                    : parentProduct.dataSourceSpecForTradingTermination.id
+                }`}
+              >
+                {type === 'settlementData'
+                  ? t('View settlement data specification')
+                  : t('View termination specification')}
+              </ExternalLink>
+            </div>
+          )}
+
+        <div className="flex flex-col gap-2">
+          <DataSourceProof
+            data-testid="oracle-proof-links"
+            data={dataSourceSpec}
+            providers={data}
+            type={type}
+            dataSourceSpecId={dataSourceSpecId}
+          />
+
+          <ExternalLink
+            data-testid="oracle-spec-links"
+            href={`${VEGA_EXPLORER_URL}/oracles/${
+              type === 'settlementData'
+                ? product.dataSourceSpecForSettlementData.id
+                : product.dataSourceSpecForTradingTermination.id
+            }`}
+          >
+            {type === 'settlementData'
+              ? t('View settlement data specification')
+              : t('View termination specification')}
+          </ExternalLink>
+        </div>
+      </div>
+    </>
   );
 };
 
@@ -886,28 +893,14 @@ export const DataSourceProof = ({
   providers,
   type,
   dataSourceSpecId,
-  parentData,
-  parentDataSourceSpecId,
 }: {
   data: DataSourceDefinition;
   providers: Provider[] | undefined;
   type: 'settlementData' | 'termination';
   dataSourceSpecId: string;
-  parentData?: DataSourceDefinition;
-  parentDataSourceSpecId?: string;
 }) => {
-  // If this is a successor market, we'll only pass parent data to child
-  // components for comparison if the data differs from the parent market.
   if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
     const signers = data.sourceType.sourceType.signers || [];
-    let parentSigners: Signer[];
-
-    if (
-      parentData &&
-      parentData.sourceType.__typename === 'DataSourceDefinitionExternal'
-    ) {
-      parentSigners = parentData.sourceType.sourceType?.signers || [];
-    }
 
     if (!providers?.length) {
       return <NoOracleProof type={type} />;
@@ -915,34 +908,15 @@ export const DataSourceProof = ({
 
     return (
       <div className="flex flex-col gap-2">
-        {signers.map(({ signer }, i) => {
-          const parentSigner = parentSigners?.find(
-            ({ signer: ParentSigner }) =>
-              ParentSigner.__typename === signer.__typename
-          )?.signer;
-
-          const isParentSignerEqual = isEqual(signer, parentSigner);
-
-          return isParentSignerEqual ? (
-            <OracleLink
-              key={i}
-              providers={providers}
-              signer={signer}
-              type={type}
-              dataSourceSpecId={dataSourceSpecId}
-            />
-          ) : (
-            <OracleLink
-              key={i}
-              providers={providers}
-              signer={signer}
-              type={type}
-              dataSourceSpecId={dataSourceSpecId}
-              parentSigner={parentSigner}
-              parentDataSourceSpecId={parentDataSourceSpecId}
-            />
-          );
-        })}
+        {signers.map(({ signer }, i) => (
+          <OracleLink
+            key={i}
+            providers={providers}
+            signer={signer}
+            type={type}
+            dataSourceSpecId={dataSourceSpecId}
+          />
+        ))}
       </div>
     );
   }
@@ -1002,22 +976,13 @@ const OracleLink = ({
   signer,
   type,
   dataSourceSpecId,
-  parentSigner,
-  parentDataSourceSpecId,
 }: {
   providers: Provider[];
   signer: SignerKind;
   type: 'settlementData' | 'termination';
   dataSourceSpecId: string;
-  parentSigner?: SignerKind;
-  parentDataSourceSpecId?: string;
 }) => {
-  // If this is a successor market, the parent market data will only have been passed
-  // in if it differs from the current data.
   const signerProviders = getSignerProviders(signer, providers);
-  const parentSignerProviders = parentSigner
-    ? getSignerProviders(parentSigner, providers)
-    : [];
 
   if (!signerProviders.length) {
     return <NoOracleProof type={type} />;
@@ -1025,34 +990,13 @@ const OracleLink = ({
 
   return (
     <div className="mt-2">
-      {signerProviders.map((provider) => {
-        // Making the assumption here that if the provider name is the same,
-        // that it is the same provider that the parent market used.
-        const parentProvider = parentSignerProviders.find(
-          (p) => p.name === provider.name
-        );
-
-        const isParentProviderEqual =
-          parentProvider !== undefined && isEqual(provider, parentProvider);
-
-        // We only want to pass the parent data to the child component if the
-        // data differs from the parent market.
-        return isParentProviderEqual ? (
-          <OracleProfile
-            key={dataSourceSpecId}
-            provider={provider}
-            dataSourceSpecId={dataSourceSpecId}
-          />
-        ) : (
-          <OracleProfile
-            key={dataSourceSpecId}
-            provider={provider}
-            dataSourceSpecId={dataSourceSpecId}
-            parentProvider={parentProvider}
-            parentDataSourceSpecId={parentDataSourceSpecId}
-          />
-        );
-      })}
+      {signerProviders.map((provider) => (
+        <OracleProfile
+          key={dataSourceSpecId}
+          provider={provider}
+          dataSourceSpecId={dataSourceSpecId}
+        />
+      ))}
     </div>
   );
 };
@@ -1075,18 +1019,13 @@ const NoOracleProof = ({
 const OracleProfile = (props: {
   provider: Provider;
   dataSourceSpecId: string;
-  parentProvider?: Provider;
-  parentDataSourceSpecId?: string;
 }) => {
-  // If this is a successor market, the parent market data will only have been passed
-  // in if it differs from the current data.
   const [open, onChange] = useState(false);
   return (
     <div key={props.provider.name}>
       <OracleBasicProfile
         provider={props.provider}
         onClick={() => onChange(!open)}
-        parentProvider={props.parentProvider}
       />
       <OracleDialog {...props} open={open} onChange={onChange} />
     </div>

libs/markets/src/lib/components/oracle-basic-profile/oracle-basic-profile.tsx

@@ -5,7 +5,6 @@ import {
   ExternalLink,
   Icon,
   Intent,
-  Lozenge,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -60,12 +59,10 @@ export const OracleBasicProfile = ({
   provider,
   onClick,
   markets: oracleMarkets,
-  parentProvider,
 }: {
   provider: Provider;
   markets?: OracleMarketSpecFieldsFragment[] | undefined;
   onClick?: (value?: boolean) => void;
-  parentProvider?: Provider;
 }) => {
   const { icon, message, intent } = getVerifiedStatusIcon(provider);
 
@@ -81,14 +78,8 @@ export const OracleBasicProfile = ({
       icon: getLinkIcon(proof.type),
     }));
 
-  // If this is a successor market and there's a different parent provider,
-  // we'll just show that there's been a change, rather than add old data
-  // in alongside the new provider.
   return (
     <>
-      {parentProvider && (
-        <Lozenge variant={Intent.Primary}>{t('Updated')}</Lozenge>
-      )}
       <span className="flex gap-1">
         {provider.url && (
           <span className="flex align-items-bottom text-md gap-1">

libs/markets/src/lib/market-utils.spec.tsx

@@ -1,6 +1,10 @@
 import * as Schema from '@vegaprotocol/types';
-import type { Market } from './markets-provider';
-import { filterAndSortMarkets, totalFeesPercentage } from './market-utils';
+import type { Market, MarketMaybeWithDataAndCandles } from './markets-provider';
+import {
+  calcTradedFactor,
+  filterAndSortMarkets,
+  totalFeesPercentage,
+} from './market-utils';
 const { MarketState, MarketTradingMode } = Schema;
 
 const MARKET_A: Partial<Market> = {
@@ -77,3 +81,52 @@ describe('totalFees', () => {
     expect(totalFeesPercentage(i)).toEqual(o);
   });
 });
+
+describe('calcTradedFactor', () => {
+  const marketA = {
+    data: {
+      markPrice: '10',
+    },
+    candles: [
+      {
+        volume: '1000',
+      },
+    ],
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            decimals: 18,
+            quantum: '1000000000000000000', // 1
+          },
+        },
+      },
+    },
+  };
+  const marketB = {
+    data: {
+      markPrice: '10',
+    },
+    candles: [
+      {
+        volume: '1000',
+      },
+    ],
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            decimals: 18,
+            quantum: '1', // 0.0000000000000000001
+          },
+        },
+      },
+    },
+  };
+  it('a is "traded" more than b', () => {
+    const fa = calcTradedFactor(marketA as MarketMaybeWithDataAndCandles);
+    const fb = calcTradedFactor(marketB as MarketMaybeWithDataAndCandles);
+    // it should be true because market a's asset is "more valuable" than b's
+    expect(fa > fb).toBeTruthy();
+  });
+});

libs/markets/src/lib/market-utils.ts

@@ -1,8 +1,13 @@
-import { formatNumberPercentage } from '@vegaprotocol/utils';
+import { formatNumberPercentage, toBigNum } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import orderBy from 'lodash/orderBy';
-import type { Market, Candle, MarketMaybeWithData } from '../';
+import type {
+  Market,
+  Candle,
+  MarketMaybeWithData,
+  MarketMaybeWithDataAndCandles,
+} from '../';
 const { MarketState, MarketTradingMode } = Schema;
 
 export const totalFees = (fees: Market['fees']['factors']) => {
@@ -86,3 +91,18 @@ export const calcCandleHigh = (candles: Candle[]): string | undefined => {
 export const calcCandleVolume = (candles: Candle[]): string | undefined =>
   candles &&
   candles.reduce((acc, c) => new BigNumber(acc).plus(c.volume).toString(), '0');
+
+export const calcTradedFactor = (m: MarketMaybeWithDataAndCandles) => {
+  const volume = Number(calcCandleVolume(m.candles || []) || 0);
+  const price = m.data?.markPrice ? Number(m.data.markPrice) : 0;
+  const quantum = Number(
+    m.tradableInstrument.instrument.product.settlementAsset.quantum
+  );
+  const decimals = Number(
+    m.tradableInstrument.instrument.product.settlementAsset.decimals
+  );
+  const fp = toBigNum(price, decimals);
+  const fq = toBigNum(quantum, decimals);
+  const factor = fq.multipliedBy(fp).multipliedBy(volume);
+  return factor.toNumber();
+};

libs/orders/src/lib/components/order-data-provider/Orders.graphql

@@ -128,6 +128,9 @@ fragment StopOrderFields on StopOrder {
   updatedAt
   partyId
   marketId
+  order {
+    ...OrderFields
+  }
   trigger {
     ... on StopOrderPrice {
       price

libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts

@@ -34,22 +34,51 @@ export type OrdersUpdateSubscription = { __typename?: 'Subscription', orders?: A
 
 export type OrderSubmissionFieldsFragment = { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null };
 
-export type StopOrderFieldsFragment = { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } };
+export type StopOrderFieldsFragment = { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, order?: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null } | null, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } };
 
 export type StopOrdersQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type StopOrdersQuery = { __typename?: 'Query', stopOrders?: { __typename?: 'StopOrderConnection', edges?: Array<{ __typename?: 'StopOrderEdge', node?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null }> | null } | null };
+export type StopOrdersQuery = { __typename?: 'Query', stopOrders?: { __typename?: 'StopOrderConnection', edges?: Array<{ __typename?: 'StopOrderEdge', node?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, order?: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null } | null, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null }> | null } | null };
 
 export type StopOrderByIdQueryVariables = Types.Exact<{
   stopOrderId: Types.Scalars['ID'];
 }>;
 
 
-export type StopOrderByIdQuery = { __typename?: 'Query', stopOrder?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null };
+export type StopOrderByIdQuery = { __typename?: 'Query', stopOrder?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, order?: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null } | null, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null };
 
+export const OrderUpdateFieldsFragmentDoc = gql`
+    fragment OrderUpdateFields on OrderUpdate {
+  id
+  marketId
+  type
+  side
+  size
+  status
+  rejectionReason
+  price
+  timeInForce
+  remaining
+  expiresAt
+  createdAt
+  updatedAt
+  liquidityProvisionId
+  peggedOrder {
+    __typename
+    reference
+    offset
+  }
+  icebergOrder {
+    __typename
+    peakSize
+    minimumVisibleSize
+    reservedRemaining
+  }
+}
+    `;
 export const OrderFieldsFragmentDoc = gql`
     fragment OrderFields on Order {
   id
@@ -85,35 +114,6 @@ export const OrderFieldsFragmentDoc = gql`
   }
 }
     `;
-export const OrderUpdateFieldsFragmentDoc = gql`
-    fragment OrderUpdateFields on OrderUpdate {
-  id
-  marketId
-  type
-  side
-  size
-  status
-  rejectionReason
-  price
-  timeInForce
-  remaining
-  expiresAt
-  createdAt
-  updatedAt
-  liquidityProvisionId
-  peggedOrder {
-    __typename
-    reference
-    offset
-  }
-  icebergOrder {
-    __typename
-    peakSize
-    minimumVisibleSize
-    reservedRemaining
-  }
-}
-    `;
 export const OrderSubmissionFieldsFragmentDoc = gql`
     fragment OrderSubmissionFields on OrderSubmission {
   marketId
@@ -144,6 +144,9 @@ export const StopOrderFieldsFragmentDoc = gql`
   updatedAt
   partyId
   marketId
+  order {
+    ...OrderFields
+  }
   trigger {
     ... on StopOrderPrice {
       price
@@ -156,7 +159,8 @@ export const StopOrderFieldsFragmentDoc = gql`
     ...OrderSubmissionFields
   }
 }
-    ${OrderSubmissionFieldsFragmentDoc}`;
+    ${OrderFieldsFragmentDoc}
+${OrderSubmissionFieldsFragmentDoc}`;
 export const OrderByIdDocument = gql`
     query OrderById($orderId: ID!) {
   orderByID(id: $orderId) {

libs/orders/src/lib/components/order-list/order-edit-dialog.tsx

@@ -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/orders/src/lib/components/order-list/order-list.tsx

@@ -296,7 +296,7 @@ export const OrderListTable = memo<
                       </ButtonLink>
                     </>
                   )}
-                  <ActionsDropdown data-testid="market-actions-content">
+                  <ActionsDropdown data-testid="order-actions-content">
                     <TradingDropdownCopyItem
                       value={data.id}
                       text={t('Copy order ID')}

libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx

@@ -1,11 +1,13 @@
 import { t } from '@vegaprotocol/i18n';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { StopOrdersTable } from '../stop-orders-table/stop-orders-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { stopOrdersWithMarketProvider } from '../order-data-provider/stop-orders-data-provider';
+import { OrderViewDialog } from '../order-list/order-view-dialog';
+import type { Order } from '../order-data-provider';
 
 export interface StopOrdersManagerProps {
   partyId: string;
@@ -23,6 +25,7 @@ export const StopOrdersManager = ({
   gridProps,
 }: StopOrdersManagerProps) => {
   const create = useVegaTransactionStore((state) => state.create);
+  const [viewOrder, setViewOrder] = useState<Order | null>(null);
   const variables = { partyId };
 
   const { data, error, reload } = useDataProvider({
@@ -53,14 +56,25 @@ export const StopOrdersManager = ({
   );
 
   return (
-    <StopOrdersTable
-      rowData={data}
-      onCancel={cancel}
-      onMarketClick={onMarketClick}
-      isReadOnly={isReadOnly}
-      suppressAutoSize
-      overlayNoRowsTemplate={error ? error.message : t('No stop orders')}
-      {...gridProps}
-    />
+    <>
+      <StopOrdersTable
+        rowData={data}
+        onCancel={cancel}
+        onView={setViewOrder}
+        onMarketClick={onMarketClick}
+        isReadOnly={isReadOnly}
+        suppressAutoSize
+        overlayNoRowsTemplate={error ? error.message : t('No stop orders')}
+        {...gridProps}
+      />
+      {viewOrder && (
+        <OrderViewDialog
+          isOpen={Boolean(viewOrder)}
+          order={viewOrder}
+          onChange={() => setViewOrder(null)}
+          onMarketClick={onMarketClick}
+        />
+      )}
+    </>
   );
 };

libs/orders/src/lib/components/stop-orders-table/stop-orders-table.spec.tsx

@@ -4,6 +4,7 @@ import type { PartialDeep } from 'type-fest';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MockedProvider } from '@apollo/client/testing';
+import userEvent from '@testing-library/user-event';
 import {
   StopOrdersTable,
   type StopOrdersTableProps,
@@ -27,6 +28,7 @@ jest.mock('@vegaprotocol/utils', () => ({
 }));
 
 const defaultProps: StopOrdersTableProps = {
+  onView: jest.fn(),
   rowData: [],
   onCancel: jest.fn(),
   isReadOnly: false,
@@ -104,6 +106,7 @@ const rowData = [
   generateStopOrder({
     id: 'stop-order-6',
     status: Schema.StopOrderStatus.STATUS_TRIGGERED,
+    order: { id: 'order-id' },
   }),
 ];
 
@@ -234,4 +237,37 @@ describe('StopOrdersTable', () => {
       );
     });
   });
+
+  it('shows actions dropdown only for triggered stop orders', async () => {
+    await act(async () => {
+      render(generateJsx({ rowData }));
+    });
+    const dropdownMenuButtons = screen.getAllByTestId('dropdown-menu');
+    expect(dropdownMenuButtons).toHaveLength(1);
+    dropdownMenuButtons.forEach((dropdownMenuButton) => {
+      const id = dropdownMenuButton
+        .closest('[role="row"]')
+        ?.getAttribute('row-id');
+      expect(rowData.find((row) => row.id === id)?.status).toEqual(
+        Schema.StopOrderStatus.STATUS_TRIGGERED
+      );
+    });
+  });
+
+  it('action dropdown has copy and view order actions', async () => {
+    const onView = jest.fn();
+    const user = userEvent.setup();
+    await act(async () => {
+      render(generateJsx({ rowData, onView }));
+    });
+    const dropdownMenuButtons = screen.getByTestId('dropdown-menu');
+    dropdownMenuButtons.click();
+    await user.click(dropdownMenuButtons as HTMLButtonElement);
+    const menuItems = screen.getAllByRole('menuitem');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveTextContent('Copy order ID');
+    expect(menuItems[1]).toHaveTextContent('View order details');
+    menuItems[1].click();
+    expect(onView).toBeCalled();
+  });
 });

libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx

@@ -7,8 +7,15 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { ForwardedRef } from 'react';
+import {
+  ActionsDropdown,
+  ButtonLink,
+  VegaIcon,
+  VegaIconNames,
+  DropdownMenuItem,
+  TradingDropdownCopyItem,
+  Pill,
+} from '@vegaprotocol/ui-toolkit';
 import { memo, useMemo } from 'react';
 import {
   AgGridLazy as AgGrid,
@@ -25,9 +32,9 @@ import type {
   VegaValueFormatterParams,
   VegaValueGetterParams,
 } from '@vegaprotocol/datagrid';
-import type { AgGridReact } from 'ag-grid-react';
 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';
 
 const defaultColDef = {
   resizable: true,
@@ -38,219 +45,253 @@ const defaultColDef = {
 export type StopOrdersTableProps = TypedDataAgGrid<StopOrder> & {
   onCancel: (order: StopOrder) => void;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  onView: (order: Order) => void;
   isReadOnly: boolean;
 };
 
-export const StopOrdersTable = memo<
-  StopOrdersTableProps & { ref?: ForwardedRef<AgGridReact> }
->(({ onCancel, onMarketClick, ...props }: StopOrdersTableProps) => {
-  const showAllActions = !props.isReadOnly;
-  const columnDefs: ColDef[] = useMemo(
-    () => [
-      {
-        headerName: t('Market'),
-        field: 'market.tradableInstrument.instrument.code',
-        cellRenderer: 'MarketNameCell',
-        cellRendererParams: { idPath: 'market.id', onMarketClick },
-      },
-      {
-        headerName: t('Trigger'),
-        field: 'trigger',
-        cellClass: 'font-mono text-right',
-        type: 'rightAligned',
-        sortable: false,
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'trigger'>): string =>
-          data ? formatTrigger(data, data.market.decimalPlaces) : '',
-      },
-      {
-        field: 'expiresAt',
-        valueFormatter: ({
-          value,
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'expiresAt'>) => {
-          if (
-            data &&
-            value &&
-            data?.expiryStrategy !==
-              Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_UNSPECIFIED
-          ) {
-            const expiresAt = getDateTimeFormat().format(new Date(value));
-            const expiryStrategy =
-              data.expiryStrategy ===
-              Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
-                ? t('Submit')
-                : t('Cancels');
-            return `${expiryStrategy} ${expiresAt}`;
-          }
-          return '';
+export const StopOrdersTable = memo(
+  ({ onCancel, onMarketClick, onView, ...props }: StopOrdersTableProps) => {
+    const showAllActions = !props.isReadOnly;
+    const columnDefs: ColDef[] = useMemo(
+      () => [
+        {
+          headerName: t('Market'),
+          field: 'market.tradableInstrument.instrument.code',
+          cellRenderer: 'MarketNameCell',
+          cellRendererParams: { idPath: 'market.id', onMarketClick },
         },
-      },
-      {
-        headerName: t('Size'),
-        field: 'submission.size',
-        cellClass: 'font-mono text-right',
-        type: 'rightAligned',
-        cellClassRules: {
-          [positiveClassNames]: ({ data }: { data: StopOrder }) =>
-            data?.submission.size === Schema.Side.SIDE_BUY,
-          [negativeClassNames]: ({ data }: { data: StopOrder }) =>
-            data?.submission.size === Schema.Side.SIDE_SELL,
+        {
+          headerName: t('Trigger'),
+          field: 'trigger',
+          cellClass: 'font-mono text-right',
+          type: 'rightAligned',
+          sortable: false,
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'trigger'>): string =>
+            data ? formatTrigger(data, data.market.decimalPlaces) : '',
         },
-        valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) => {
-          return data?.submission.size && data.market
-            ? toBigNum(
-                data.submission.size,
-                data.market.positionDecimalPlaces ?? 0
-              )
-                .multipliedBy(
-                  data.submission.side === Schema.Side.SIDE_SELL ? -1 : 1
+        {
+          field: 'expiresAt',
+          valueFormatter: ({
+            value,
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'expiresAt'>) => {
+            if (
+              data &&
+              value &&
+              data?.expiryStrategy !==
+                Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_UNSPECIFIED
+            ) {
+              const expiresAt = getDateTimeFormat().format(new Date(value));
+              const expiryStrategy =
+                data.expiryStrategy ===
+                Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
+                  ? t('Submit')
+                  : t('Cancels');
+              return `${expiryStrategy} ${expiresAt}`;
+            }
+            return '';
+          },
+        },
+        {
+          headerName: t('Size'),
+          field: 'submission.size',
+          cellClass: 'font-mono text-right',
+          type: 'rightAligned',
+          cellClassRules: {
+            [positiveClassNames]: ({ data }: { data: StopOrder }) =>
+              data?.submission.size === Schema.Side.SIDE_BUY,
+            [negativeClassNames]: ({ data }: { data: StopOrder }) =>
+              data?.submission.size === Schema.Side.SIDE_SELL,
+          },
+          valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) => {
+            return data?.submission.size && data.market
+              ? toBigNum(
+                  data.submission.size,
+                  data.market.positionDecimalPlaces ?? 0
                 )
-                .toNumber()
-            : undefined;
+                  .multipliedBy(
+                    data.submission.side === Schema.Side.SIDE_SELL ? -1 : 1
+                  )
+                  .toNumber()
+              : undefined;
+          },
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'size'>) => {
+            if (!data) {
+              return '';
+            }
+            if (!data?.market || !isNumeric(data.submission.size)) {
+              return '-';
+            }
+            const prefix = data
+              ? data.submission.side === Schema.Side.SIDE_BUY
+                ? '+'
+                : '-'
+              : '';
+            return (
+              prefix +
+              addDecimalsFormatNumber(
+                data.submission.size,
+                data.market.positionDecimalPlaces
+              )
+            );
+          },
         },
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'size'>) => {
-          if (!data) {
-            return '';
-          }
-          if (!data?.market || !isNumeric(data.submission.size)) {
-            return '-';
-          }
-          const prefix = data
-            ? data.submission.side === Schema.Side.SIDE_BUY
-              ? '+'
-              : '-'
-            : '';
-          return (
-            prefix +
-            addDecimalsFormatNumber(
-              data.submission.size,
-              data.market.positionDecimalPlaces
-            )
-          );
+        {
+          field: 'submission.type',
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.OrderTypeMapping,
+          },
+          cellRenderer: ({
+            value,
+          }: VegaICellRendererParams<StopOrder, 'submission.type'>) =>
+            value ? Schema.OrderTypeMapping[value] : '',
         },
-      },
-      {
-        field: 'submission.type',
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.OrderTypeMapping,
+        {
+          field: 'status',
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.StopOrderStatusMapping,
+          },
+          valueFormatter: ({
+            value,
+          }: VegaValueFormatterParams<StopOrder, 'status'>) => {
+            return value ? Schema.StopOrderStatusMapping[value] : '';
+          },
+          cellRenderer: ({
+            valueFormatted,
+            data,
+          }: {
+            valueFormatted: string;
+            data: StopOrder;
+          }) => (
+            <>
+              <span data-testid={`order-status-${data?.id}`}>
+                {valueFormatted}
+              </span>
+              {data.ocoLinkId && (
+                <Pill
+                  size="xxs"
+                  className="uppercase ml-0.5"
+                  title={t('One Cancels the Other')}
+                >
+                  OCO
+                </Pill>
+              )}
+            </>
+          ),
         },
-        cellRenderer: ({
-          value,
-        }: VegaICellRendererParams<StopOrder, 'submission.type'>) =>
-          value ? Schema.OrderTypeMapping[value] : '',
-      },
-      {
-        field: 'status',
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.StopOrderStatusMapping,
+        {
+          field: 'submission.price',
+          type: 'rightAligned',
+          cellClass: 'font-mono text-right',
+          valueFormatter: ({
+            value,
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'submission.price'>) => {
+            if (!data) {
+              return '';
+            }
+            if (
+              !data?.market ||
+              data.submission.type === Schema.OrderType.TYPE_MARKET ||
+              !isNumeric(value)
+            ) {
+              return '-';
+            }
+            return addDecimalsFormatNumber(value, data.market.decimalPlaces);
+          },
         },
-        valueFormatter: ({
-          value,
-        }: VegaValueFormatterParams<StopOrder, 'status'>) => {
-          return value ? Schema.StopOrderStatusMapping[value] : '';
+        {
+          field: 'submission.timeInForce',
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.OrderTimeInForceMapping,
+          },
+          valueFormatter: ({
+            value,
+          }: VegaValueFormatterParams<StopOrder, 'submission.timeInForce'>) => {
+            return value ? Schema.OrderTimeInForceCode[value] : '';
+          },
         },
-        cellRenderer: ({
-          valueFormatted,
-          data,
-        }: {
-          valueFormatted: string;
-          data: StopOrder;
-        }) => (
-          <span data-testid={`order-status-${data?.id}`}>{valueFormatted}</span>
-        ),
-      },
-      {
-        field: 'submission.price',
-        type: 'rightAligned',
-        cellClass: 'font-mono text-right',
-        valueFormatter: ({
-          value,
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'submission.price'>) => {
-          if (!data) {
-            return '';
-          }
-          if (
-            !data?.market ||
-            data.submission.type === Schema.OrderType.TYPE_MARKET ||
-            !isNumeric(value)
-          ) {
-            return '-';
-          }
-          return addDecimalsFormatNumber(value, data.market.decimalPlaces);
+        {
+          field: 'updatedAt',
+          filter: DateRangeFilter,
+          valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) =>
+            data?.updatedAt || data?.createdAt,
+          cellRenderer: ({
+            data,
+          }: VegaICellRendererParams<StopOrder, 'createdAt'>) => {
+            if (!data) {
+              return undefined;
+            }
+            const value = data.updatedAt || data.createdAt;
+            return (
+              <span data-value={value}>
+                {value ? getDateTimeFormat().format(new Date(value)) : '-'}
+              </span>
+            );
+          },
         },
-      },
-      {
-        field: 'submission.timeInForce',
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.OrderTimeInForceMapping,
-        },
-        valueFormatter: ({
-          value,
-        }: VegaValueFormatterParams<StopOrder, 'submission.timeInForce'>) => {
-          return value ? Schema.OrderTimeInForceCode[value] : '';
-        },
-      },
-      {
-        field: 'updatedAt',
-        filter: DateRangeFilter,
-        valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) =>
-          data?.updatedAt || data?.createdAt,
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<StopOrder, 'createdAt'>) => {
-          if (!data) {
-            return undefined;
-          }
-          const value = data.updatedAt || data.createdAt;
-          return (
-            <span data-value={value}>
-              {value ? getDateTimeFormat().format(new Date(value)) : '-'}
-            </span>
-          );
-        },
-      },
-      {
-        colId: 'actions',
-        ...COL_DEFS.actions,
-        minWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
-        maxWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
-        cellRenderer: ({ data }: { data?: StopOrder }) => {
-          if (!data) return null;
+        {
+          colId: 'actions',
+          ...COL_DEFS.actions,
+          minWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+          maxWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+          cellRenderer: ({ data }: { data?: StopOrder }) => {
+            if (!data) return null;
 
-          return (
-            <div className="flex gap-2 items-center justify-end">
-              {data.status === Schema.StopOrderStatus.STATUS_PENDING &&
-                !props.isReadOnly && (
-                  <ButtonLink
-                    data-testid="cancel"
-                    onClick={() => onCancel(data)}
-                  >
-                    {t('Cancel')}
-                  </ButtonLink>
-                )}
-            </div>
-          );
+            return (
+              <div className="flex gap-2 items-center justify-end">
+                {data.status === Schema.StopOrderStatus.STATUS_PENDING &&
+                  !props.isReadOnly && (
+                    <ButtonLink
+                      data-testid="cancel"
+                      onClick={() => onCancel(data)}
+                    >
+                      {t('Cancel')}
+                    </ButtonLink>
+                  )}
+                {data.status === Schema.StopOrderStatus.STATUS_TRIGGERED &&
+                  data.order && (
+                    <ActionsDropdown data-testid="stop-order-actions-content">
+                      <TradingDropdownCopyItem
+                        value={data.order.id}
+                        text={t('Copy order ID')}
+                      />
+                      <DropdownMenuItem
+                        key={'view-order'}
+                        data-testid="view-order"
+                        onClick={() =>
+                          data.order &&
+                          onView({ ...data.order, market: data.market })
+                        }
+                      >
+                        <VegaIcon name={VegaIconNames.INFO} size={16} />
+                        {t('View order details')}
+                      </DropdownMenuItem>
+                    </ActionsDropdown>
+                  )}
+              </div>
+            );
+          },
         },
-      },
-    ],
-    [onCancel, onMarketClick, props.isReadOnly, showAllActions]
-  );
+      ],
+      [onCancel, onMarketClick, onView, props.isReadOnly, showAllActions]
+    );
 
-  return (
-    <AgGrid
-      defaultColDef={defaultColDef}
-      columnDefs={columnDefs}
-      getRowId={({ data }) => data.id}
-      components={{ MarketNameCell }}
-      {...props}
-    />
-  );
-});
+    return (
+      <AgGrid
+        defaultColDef={defaultColDef}
+        columnDefs={columnDefs}
+        getRowId={({ data }) => data.id}
+        components={{ MarketNameCell }}
+        {...props}
+      />
+    );
+  }
+);

libs/proposals/src/lib/proposals-data-provider/proposals-data-provider.tsx

@@ -17,4 +17,17 @@ export const proposalsDataProvider = makeDataProvider<
   never,
   never,
   ProposalsListQueryVariables
->({ query: ProposalsListDocument, getData });
+>({
+  query: ProposalsListDocument,
+  getData,
+  /**
+   * Ignores errors for not found settlement asset for NewMarket proposals.
+   *
+   * It can happen that a NewMarket proposal is incomplete and does not contain
+   * `futureProduct` details. This guard protects against that.
+   *
+   * GQL Path: `terms.change.instrument.futureProduct.settlementAsset`
+   */
+  errorPolicyGuard: (errors) =>
+    errors.every((e) => e.message.match(/failed to get asset for ID/)),
+});

libs/react-helpers/package.json

@@ -1,4 +1,8 @@
 {
   "name": "@vegaprotocol/react-helpers",
-  "version": "0.2.5"
+  "version": "0.2.5",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
 }

libs/tailwindcss-config/src/theme.js

@@ -172,7 +172,7 @@ module.exports = {
         900: '#F9FAFA',
       },
     },
-    danger: '#FF077F',
+    danger: '#EC003C',
     warning: '#FF8700',
     success: '#00F780',
   },

libs/types/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/types",
-  "version": "0.0.4"
+  "version": "0.0.5"
 }

libs/ui-toolkit/package.json

@@ -1,4 +1,8 @@
 {
   "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.12.7"
+  "version": "0.12.8",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
 }

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx

@@ -5,7 +5,7 @@ import { VegaIconNameMap } from './vega-icon-record';
 
 export interface VegaIconProps {
   name: VegaIconNames;
-  size?: 8 | 10 | 12 | 13 | 14 | 16 | 20 | 24 | 32;
+  size?: 8 | 10 | 12 | 13 | 14 | 16 | 18 | 20 | 24 | 32;
 }
 
 export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {

libs/ui-toolkit/src/components/index.ts

@@ -16,8 +16,8 @@ export * from './form-group';
 export * from './healthbar';
 export * from './icon';
 export * from './indicator';
-export * from './input-error';
 export * from './input';
+export * from './input-error';
 export * from './key-value-table';
 export * from './link';
 export * from './loader';
@@ -34,6 +34,7 @@ export * from './progress-bar';
 export * from './radio-group';
 export * from './rounded-wrapper';
 export * from './select';
+export * from './show-more';
 export * from './simple-grid';
 export * from './slider';
 export * from './sparkline';
@@ -48,10 +49,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/show-more/index.ts

@@ -0,0 +1 @@
+export * from './show-more';

libs/ui-toolkit/src/components/show-more/show-more.spec.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { ShowMore } from './show-more';
+
+describe('Button', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<ShowMore>test</ShowMore>);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/show-more/show-more.stories.tsx

@@ -0,0 +1,50 @@
+import type { Story, Meta } from '@storybook/react';
+import { ShowMore } from './show-more';
+
+export default {
+  component: ShowMore,
+  title: 'ShowMore',
+} as Meta;
+
+const Template: Story = (args) => (
+  <ShowMore {...args}>
+    <p>
+      Spaceflight will never tolerate carelessness, incapacity, and neglect.
+      Somewhere, somehow, we screwed up. It could have been in design, build, or
+      test. Whatever it was, we should have caught it. We were too gung ho about
+      the schedule and we locked out all of the problems we saw each day in our
+      work. “Every element of the program was in trouble and so were we. The
+      simulators were not working, Mission Control was behind in virtually every
+      area, and the flight and test procedures changed daily. Nothing we did had
+      any shelf life. Not one of us stood up and said, ‘Dammit, stop!’ I don’t
+      know what Thompson’s committee will find as the cause, but I know what I
+      find. We are the cause! We were not ready! We did not do our job. We were
+      rolling the dice, hoping that things would come together by launch day,
+      when in our hearts we knew it would take a miracle. We were pushing the
+      schedule and betting that the Cape would slip before we did. “From this
+      day forward, Flight Control will be known by two words: ‘Tough’ and
+      ‘Competent.’ Tough means we are forever accountable for what we do or what
+      we fail to do. We will never again compromise our responsibilities. Every
+      time we walk into Mission Control we will know what we stand for.
+      Competent means we will never take anything for granted. We will never be
+      found short in our knowledge and in our skills. Mission Control will be
+      perfect. When you leave this meeting today you will go to your office and
+      the first thing you will do there is to write ‘Tough and Competent’ on
+      your blackboards. It will never be erased. Each day when you enter the
+      room these words will remind you of the price paid by Grissom, White, and
+      Chaffee. These words are the price of admission to the ranks of Mission
+      Control.
+    </p>
+  </ShowMore>
+);
+
+export const Default = Template.bind({});
+export const CustomMaxHeight = Template.bind({});
+CustomMaxHeight.args = {
+  closedMaxHeightPx: 50,
+};
+
+export const CustomOverlayColour = Template.bind({});
+CustomOverlayColour.args = {
+  overlayColourOverrides: 'to-yellow-400',
+};

libs/ui-toolkit/src/components/show-more/show-more.tsx

@@ -0,0 +1,78 @@
+import classNames from 'classnames';
+import { useRef, useState, useEffect } from 'react';
+import { t } from '@vegaprotocol/i18n';
+import { Button } from '../button';
+import type { ReactNode } from 'react';
+
+type ShowMoreProps = {
+  children: ReactNode;
+  closedMaxHeightPx?: number;
+  overlayColourOverrides?: string;
+};
+
+export const ShowMore = ({
+  children,
+  closedMaxHeightPx = 125,
+  overlayColourOverrides,
+}: ShowMoreProps) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    const checkHeight = () => {
+      const container = containerRef.current;
+      if (container) {
+        container.scrollHeight < closedMaxHeightPx
+          ? setExpanded(true)
+          : setExpanded(false);
+      }
+    };
+
+    checkHeight();
+
+    window.addEventListener('resize', checkHeight);
+
+    return () => {
+      window.removeEventListener('resize', checkHeight);
+    };
+  }, [closedMaxHeightPx]);
+
+  const containerClasses = classNames(
+    'overflow-hidden transition-all ease-in-out duration-300',
+    {
+      'max-h-none': expanded,
+    }
+  );
+
+  const overlayClasses = classNames(
+    `absolute w-full h-16 bottom-0 left-0 transition-opacity duration-300 bg-gradient-to-b from-transparent ${
+      overlayColourOverrides ? overlayColourOverrides : 'to-white dark:to-black'
+    }`,
+    {
+      hidden: expanded,
+    }
+  );
+
+  return (
+    <>
+      <div className="relative">
+        <div
+          ref={containerRef}
+          className={containerClasses}
+          style={{ maxHeight: expanded ? 'none' : `${closedMaxHeightPx}px` }}
+        >
+          {children}
+        </div>
+        <div className={overlayClasses}></div>
+      </div>
+
+      {!expanded && (
+        <div className="mt-1 text-center">
+          <Button size={'sm'} onClick={() => setExpanded(true)}>
+            {t('Show more')}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};

libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx

@@ -0,0 +1,40 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { TradingCheckbox } from './checkbox';
+
+describe('Checkbox', () => {
+  it('should render checkbox with label successfully', () => {
+    render(<TradingCheckbox label="test" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+
+  it('should render a checked checkbox if specified in state', () => {
+    render(<TradingCheckbox label="label" checked={true} />);
+    expect(screen.getByTestId(/icon-/)).toBeInTheDocument();
+  });
+
+  it('should render an unchecked checkbox if specified in state', () => {
+    render(<TradingCheckbox label="unchecked" checked={false} />);
+    expect(screen.queryByTestId(/icon-/)).not.toBeInTheDocument();
+  });
+
+  it('should render an indeterminate checkbox if specified in state', () => {
+    render(<TradingCheckbox label="indeterminate" checked="indeterminate" />);
+    expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument();
+  });
+
+  it('fires callback on change if provided', () => {
+    const callback = jest.fn();
+
+    render(
+      <TradingCheckbox
+        name="test"
+        label="onchange"
+        onCheckedChange={callback}
+      />
+    );
+
+    const checkbox = screen.getByText('onchange');
+    fireEvent.click(checkbox);
+    expect(callback).toHaveBeenCalled();
+  });
+});

libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import type { TradingCheckboxProps } from './checkbox';
+import { TradingCheckbox } from './checkbox';
+
+export default {
+  component: TradingCheckbox,
+  title: 'Checkbox',
+} as Meta<typeof TradingCheckbox>;
+
+const Template: StoryFn<TradingCheckboxProps> = (args) => (
+  <TradingCheckbox {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'default',
+  label: 'Regular checkbox',
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  name: 'overflow',
+  label:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  label: 'Disabled',
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  name: 'default',
+  checked: 'indeterminate',
+  label: 'Indeterminate checkbox',
+};

libs/ui-toolkit/src/components/trading-checkbox/checkbox.tsx

@@ -0,0 +1,63 @@
+import { VegaIcon, VegaIconNames } from '../icon';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+type CheckedState = boolean | 'indeterminate';
+export interface TradingCheckboxProps {
+  checked?: CheckedState;
+  label?: ReactNode;
+  name?: string;
+  onCheckedChange?: (checked: CheckedState) => void;
+  disabled?: boolean;
+}
+
+export const TradingCheckbox = ({
+  checked,
+  label,
+  name,
+  onCheckedChange,
+  disabled = false,
+}: TradingCheckboxProps) => {
+  const rootClasses = classNames(
+    'relative flex justify-center items-center w-3 h-3',
+    'border rounded-sm overflow-hidden',
+    'border-vega-clight-500 dark:border-vega-cdark-500',
+    'aria-checked:border-vega-clight-400 dark:aria-checked:border-vega-cdark-400',
+    'disabled:border-vega-clight-600 dark:disabled:border-vega-cdark-600',
+    'bg-vega-clight-700 dark:bg-vega-cdark-700'
+  );
+
+  return (
+    <div className="flex gap-1.5 items-center">
+      <CheckboxPrimitive.Root
+        name={name}
+        id={name}
+        className={rootClasses}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        data-testid={name}
+      >
+        <CheckboxPrimitive.CheckboxIndicator className="flex justify-center items-center w-3 h-3">
+          {checked === 'indeterminate' ? (
+            <span
+              data-testid="indeterminate-icon"
+              className="absolute w-[8px] h-[2px] bg-vega-clight-50 dark:bg-vega-cdark-50"
+            />
+          ) : (
+            <VegaIcon name={VegaIconNames.TICK} size={10} />
+          )}
+        </CheckboxPrimitive.CheckboxIndicator>
+      </CheckboxPrimitive.Root>
+      <label
+        htmlFor={name}
+        className={classNames('text-xs flex-1', {
+          'text-vega-clight-200 dark:text-vega-cdark-200': disabled,
+        })}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};

libs/ui-toolkit/src/components/trading-checkbox/index.ts

@@ -0,0 +1 @@
+export * from './checkbox';

libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+
+import { TradingFormGroup } from './form-group';
+
+describe('FormGroup', () => {
+  it('should render label if given a label', () => {
+    render(
+      <TradingFormGroup label="label" labelFor="test">
+        <input id="test"></input>
+      </TradingFormGroup>
+    );
+    expect(screen.getByLabelText('label')).toBeInTheDocument();
+  });
+
+  it('should render children', () => {
+    render(
+      <TradingFormGroup label="label" labelFor="test">
+        <input data-testid="foo" id="test"></input>
+      </TradingFormGroup>
+    );
+    expect(screen.getByTestId('foo')).toBeInTheDocument();
+  });
+});

libs/ui-toolkit/src/components/trading-form-group/form-group.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+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"
+  labelFor: string; // Same as above
+  hideLabel?: boolean;
+  disabled?: boolean;
+  labelDescription?: string;
+  labelAlign?: 'left' | 'right';
+  compact?: boolean;
+}
+
+export const TradingFormGroup = ({
+  children,
+  className,
+  label,
+  labelFor,
+  labelDescription,
+  labelAlign = 'left',
+  hideLabel = false,
+  compact = false,
+  disabled = false,
+}: TradingFormGroupProps) => {
+  const wrapperClasses = classNames(
+    'relative',
+    {
+      'mb-2': compact,
+      'mb-4': !compact,
+    },
+    className
+  );
+  const labelClasses = classNames('block mb-2 text-xs', {
+    'text-right': labelAlign === 'right',
+    'sr-only': hideLabel,
+    'text-muted': disabled,
+  });
+  return (
+    <div data-testid="form-group" className={wrapperClasses}>
+      {label && (
+        <label htmlFor={labelFor} className={labelClasses}>
+          {label}
+          {labelDescription && (
+            <div className="font-light mt-1">{labelDescription}</div>
+          )}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};

libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx

@@ -0,0 +1,47 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import { TradingInput } from '../trading-input';
+import type { TradingFormGroupProps } from './form-group';
+import { TradingFormGroup } from './form-group';
+export default {
+  component: TradingFormGroup,
+  title: 'FormGroup',
+  argTypes: {
+    label: {
+      type: 'string',
+    },
+    labelFor: {
+      type: 'string',
+    },
+    labelDescription: {
+      type: 'string',
+    },
+    className: {
+      type: 'string',
+    },
+    hasError: {
+      type: 'boolean',
+    },
+    disabled: {
+      type: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: StoryFn<TradingFormGroupProps> = (args) => (
+  <TradingFormGroup {...args}>
+    <TradingInput id="labelFor" />
+  </TradingFormGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Label',
+  labelFor: 'labelFor',
+};
+
+export const WithLabelDescription = Template.bind({});
+WithLabelDescription.args = {
+  label: 'Label',
+  labelFor: 'labelFor',
+  labelDescription: 'Description text',
+};

libs/ui-toolkit/src/components/trading-form-group/index.tsx

@@ -0,0 +1 @@
+export * from './form-group';

libs/ui-toolkit/src/components/trading-input-error/index.ts

@@ -0,0 +1 @@
+export * from './input-error';

libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { TradingInputError } from './input-error';
+
+describe('InputError', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<TradingInputError />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import { TradingInputError } from './input-error';
+
+export default {
+  component: TradingInputError,
+  title: 'InputError',
+} as Meta;
+
+const Template: StoryFn = (args) => <TradingInputError {...args} />;
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: 'An error that might have happened',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+  children: 'Something that might be an issue',
+};

libs/ui-toolkit/src/components/trading-input-error/input-error.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import type { HTMLAttributes } from 'react';
+
+interface TradingInputErrorProps extends HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+  intent?: 'danger' | 'warning';
+  forInput?: string;
+  testId?: string;
+}
+
+export const TradingInputError = ({
+  intent = 'danger',
+  children,
+  forInput,
+  testId,
+  className,
+  ...props
+}: TradingInputErrorProps) => {
+  const effectiveClassName = classNames(
+    'text-xs flex items-center first-letter:uppercase',
+    'mt-2',
+    {
+      'border-danger': intent === 'danger',
+      'border-warning': intent === 'warning',
+    },
+    {
+      'text-warning': intent === 'warning',
+      'text-danger': intent === 'danger',
+    }
+  );
+  return (
+    <div
+      data-testid={testId || 'input-error-text'}
+      aria-describedby={forInput}
+      className={classNames(effectiveClassName, className)}
+      {...props}
+      role="alert"
+    >
+      {children}
+    </div>
+  );
+};

libs/ui-toolkit/src/components/trading-input/index.ts

@@ -0,0 +1 @@
+export * from './input';

libs/ui-toolkit/src/components/trading-input/input.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { TradingInput } from './input';
+
+describe('Input', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<TradingInput />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/trading-input/input.stories.tsx

@@ -0,0 +1,83 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import { TradingInput } from './input';
+import { FormGroup } from '../form-group';
+export default {
+  component: TradingInput,
+  title: 'Input',
+} as Meta;
+
+const Template: StoryFn = (args) => (
+  <FormGroup label="Hello" labelFor={args.id}>
+    <TradingInput value="I type words" {...args} />
+  </FormGroup>
+);
+
+const customElementPlaceholder = (
+  <span
+    style={{
+      fontFamily: 'monospace',
+      backgroundColor: 'grey',
+      padding: '4px',
+    }}
+  >
+    Ω
+  </span>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'input-default',
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  hasError: true,
+  id: 'input-has-error',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  id: 'input-disabled',
+};
+
+export const TypeDate = Template.bind({});
+TypeDate.args = {
+  type: 'date',
+  id: 'input-date',
+};
+
+export const TypeDateTime = Template.bind({});
+TypeDateTime.args = {
+  type: 'datetime-local',
+  id: 'input-datetime-local',
+  min: '2022-09-05T11:29:17',
+  max: '2023-09-05T10:29:49',
+};
+
+export const IconPrepend = Template.bind({});
+IconPrepend.args = {
+  prependIconName: 'search',
+  id: 'input-icon-prepend',
+};
+
+export const IconAppend = Template.bind({});
+IconAppend.args = {
+  value: 'I type words and even more words',
+  appendIconName: 'search',
+  id: 'input-icon-append',
+};
+
+export const ElementPrepend = Template.bind({});
+ElementPrepend.args = {
+  value: '<- custom element',
+  prependElement: customElementPlaceholder,
+  id: 'input-element-prepend',
+};
+
+export const ElementAppend = Template.bind({});
+ElementAppend.args = {
+  value: 'custom element ->',
+  appendElement: customElementPlaceholder,
+  id: 'input-element-append',
+};

libs/ui-toolkit/src/components/trading-input/input.tsx

@@ -0,0 +1,174 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import type { IconName } from '../icon';
+import { Icon } from '../icon';
+import { defaultFormElement } from '../../utils/shared';
+
+type InputRootProps = InputHTMLAttributes<HTMLInputElement> & {
+  hasError?: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+type NoPrepend = {
+  prependIconName?: never;
+  prependIconDescription?: string;
+  prependElement?: never;
+};
+
+type NoAppend = {
+  appendIconName?: never;
+  appendIconDescription?: string;
+  appendElement?: never;
+};
+
+type InputPrepend = NoAppend &
+  (
+    | NoPrepend
+    | {
+        prependIconName: IconName;
+        prependIconDescription?: string;
+        prependElement?: never;
+      }
+    | {
+        prependIconName?: never;
+        prependIconDescription?: never;
+        prependElement: ReactNode;
+      }
+  );
+
+type InputAppend = NoPrepend &
+  (
+    | NoAppend
+    | {
+        appendIconName: IconName;
+        appendIconDescription?: string;
+        appendElement?: never;
+      }
+    | {
+        appendIconName?: never;
+        appendIconDescription?: never;
+        appendElement: ReactNode;
+      }
+  );
+
+type AffixProps = InputPrepend | InputAppend;
+
+export type TradingInputProps = InputRootProps & AffixProps;
+
+export const tradingInputStyle = ({
+  style,
+  disabled,
+}: {
+  style?: React.CSSProperties;
+  disabled?: boolean;
+}) =>
+  disabled
+    ? {
+        ...style,
+        backgroundImage:
+          'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACNJREFUGFdjtLS0/M8ABcePH2eEsRlJl4BpBdHIuuFmEi0BABqjEQVjx/LTAAAAAElFTkSuQmCC)',
+      }
+    : style;
+
+const getAffixElement = ({
+  prependElement,
+  prependIconName,
+  prependIconDescription,
+  appendElement,
+  appendIconName,
+  appendIconDescription,
+}: Pick<TradingInputProps, keyof AffixProps>) => {
+  const position = prependIconName || prependElement ? 'pre' : 'post';
+
+  const className = classNames(
+    ['fill-black dark:fill-white', 'absolute', 'z-10'],
+    {
+      'left-3': position === 'pre',
+      'right-3': position === 'post',
+    }
+  );
+
+  const element = prependElement || appendElement;
+  const iconName = prependIconName || appendIconName;
+  const iconDescription = prependIconDescription || appendIconDescription;
+
+  if (element) {
+    return <div className={className}>{element}</div>;
+  }
+
+  if (iconName) {
+    return (
+      <Icon
+        name={iconName}
+        className={className}
+        aria-label={iconDescription}
+        aria-hidden={!iconDescription}
+      />
+    );
+  }
+
+  return null;
+};
+
+export const TradingInput = forwardRef<HTMLInputElement, TradingInputProps>(
+  (
+    {
+      prependIconName,
+      prependIconDescription,
+      appendIconName,
+      appendIconDescription,
+      prependElement,
+      appendElement,
+      className,
+      hasError,
+      ...props
+    },
+    ref
+  ) => {
+    const hasPrepended = !!(prependIconName || prependElement);
+    const hasAppended = !!(appendIconName || appendElement);
+
+    const inputClassName = classNames(
+      'appearance-none dark:color-scheme-dark px-3 h-8',
+      className,
+      {
+        'pl-9': hasPrepended,
+        'pr-9': hasAppended,
+      }
+    );
+
+    const input = (
+      <input
+        {...props}
+        ref={ref}
+        className={classNames(
+          defaultFormElement(hasError, props.disabled),
+          inputClassName
+        )}
+      />
+    );
+
+    const element = getAffixElement({
+      prependIconName,
+      prependIconDescription,
+      appendIconName,
+      appendIconDescription,
+      prependElement,
+      appendElement,
+    });
+
+    if (element) {
+      return (
+        <div className="flex items-center relative">
+          {hasPrepended && element}
+          {input}
+          {hasAppended && element}
+        </div>
+      );
+    }
+
+    return input;
+  }
+);

libs/ui-toolkit/src/components/trading-radio-group/index.ts

@@ -0,0 +1 @@
+export * from './radio-group';

libs/ui-toolkit/src/components/trading-radio-group/radio-group.stories.tsx

@@ -0,0 +1,22 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import type { TradingRadioGroupProps } from './radio-group';
+import { TradingRadioGroup, TradingRadio } from './radio-group';
+
+export default {
+  component: TradingRadioGroup,
+  title: 'RadioGroup',
+} as Meta;
+
+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({});
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  orientation: 'horizontal',
+};

libs/ui-toolkit/src/components/trading-radio-group/radio-group.tsx

@@ -0,0 +1,99 @@
+import { forwardRef } from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export interface TradingRadioGroupProps {
+  name?: string;
+  children: ReactNode;
+  defaultValue?: string;
+  value?: string;
+  orientation?: 'horizontal' | 'vertical';
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+export const TradingRadioGroup = forwardRef<
+  HTMLDivElement,
+  TradingRadioGroupProps
+>(
+  (
+    {
+      children,
+      name,
+      value,
+      orientation = 'vertical',
+      onChange,
+      className,
+    }: TradingRadioGroupProps,
+    ref
+  ) => {
+    const groupClasses = classNames(
+      'flex text-sm',
+      {
+        'flex-col gap-2': orientation === 'vertical',
+        'flex-row gap-4': orientation === 'horizontal',
+      },
+      className
+    );
+    return (
+      <RadioGroupPrimitive.Root
+        ref={ref}
+        name={name}
+        value={value}
+        onValueChange={onChange}
+        orientation={orientation}
+        className={groupClasses}
+      >
+        {children}
+      </RadioGroupPrimitive.Root>
+    );
+  }
+);
+
+interface RadioProps {
+  id: string;
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+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',
+    'w-3 h-3 rounded-full border',
+    'border-vega-clight-500 dark:border-vega-cdark-500',
+    'aria-checked:border-vega-clight-400 dark:aria-checked:border-vega-cdark-400',
+    'disabled:border-vega-clight-600 dark:disabled:border-vega-cdark-600',
+    'bg-vega-clight-700 dark:bg-vega-cdark-700'
+  );
+  const indicatorClasses = classNames(
+    'block w-2.5 h-2.5 border-2 rounded-full',
+    'bg-vega-clight-50 dark:bg-vega-cdark-50',
+    'border-vega-clight-700 dark:border-vega-cdark-700'
+  );
+  return (
+    <div className={wrapperClasses}>
+      <RadioGroupPrimitive.Item
+        value={value}
+        className={itemClasses}
+        id={id}
+        data-testid={id}
+        disabled={disabled}
+      >
+        <RadioGroupPrimitive.Indicator className={indicatorClasses} />
+      </RadioGroupPrimitive.Item>
+      <label
+        htmlFor={id}
+        className={
+          disabled
+            ? 'text-vega-clight-200 dark:text-vega-cdark-200'
+            : 'cursor-pointer'
+        }
+      >
+        {label}
+      </label>
+    </div>
+  );
+};

libs/ui-toolkit/src/components/trading-select/index.ts

@@ -0,0 +1 @@
+export * from './select';

libs/ui-toolkit/src/components/trading-select/select.spec.tsx

@@ -0,0 +1,37 @@
+import { render } from '@testing-library/react';
+import { TradingRichSelect, TradingSelect, TradingOption } from './select';
+
+describe('Select', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<TradingSelect />);
+    expect(baseElement).toBeTruthy();
+  });
+});
+
+describe('RichSelect', () => {
+  it('should render select element with placeholder when no value is pre-selected', async () => {
+    const { findByTestId } = render(
+      <TradingRichSelect placeholder={'Select'}>
+        <TradingOption value={'1'}>1</TradingOption>
+        <TradingOption value={'2'}>2</TradingOption>
+      </TradingRichSelect>
+    );
+    const btn = (await findByTestId(
+      'rich-select-trigger'
+    )) as HTMLButtonElement;
+    expect(btn.textContent).toEqual('Select');
+  });
+
+  it('should render select element with pre-selected value', async () => {
+    const { findByTestId } = render(
+      <TradingRichSelect placeholder={'Select'} value={'1'}>
+        <TradingOption value={'1'}>1</TradingOption>
+        <TradingOption value={'2'}>2</TradingOption>
+      </TradingRichSelect>
+    );
+    const btn = (await findByTestId(
+      'rich-select-trigger'
+    )) as HTMLButtonElement;
+    expect(btn.textContent).toEqual('1');
+  });
+});

libs/ui-toolkit/src/components/trading-select/select.stories.tsx

@@ -0,0 +1,92 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import { TradingOption, TradingSelect, TradingRichSelect } from './select';
+import { FormGroup } from '../form-group';
+
+export default {
+  component: TradingSelect,
+  title: 'Select',
+} as Meta;
+
+const Template: StoryFn = (args) => (
+  <FormGroup label="Select an option" labelFor={args.id}>
+    <TradingSelect {...args}>
+      <option value="Option 1">Option 1</option>
+      <option value="Option 2">Option 2</option>
+      <option value="Option 3">Option 3</option>
+    </TradingSelect>
+  </FormGroup>
+);
+
+const RichSelectTemplate: StoryFn = ({ placeholder, ...props }) => (
+  <FormGroup label="Select an option" labelFor={props.id}>
+    <TradingRichSelect placeholder={placeholder} {...props} />
+  </FormGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  id: 'select-default',
+};
+
+export const WithError = Template.bind({});
+WithError.args = {
+  id: 'select-has-error',
+  hasError: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  id: 'select-disabled',
+  disabled: true,
+};
+
+export const RichDefaultSelect = RichSelectTemplate.bind({});
+RichDefaultSelect.args = {
+  id: 'rich',
+  name: 'rich',
+  placeholder: 'Select an option',
+  onValueChange: (v: string) => {
+    // eslint-disable-next-line no-console
+    console.log(v);
+  },
+  children: (
+    <>
+      <TradingOption value="1">
+        <div className="flex flex-col justify-start items-start">
+          <span>Option One</span>
+          <span className="text-xs">First option</span>
+        </div>
+      </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>
+      </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>
+      </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>
+      </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>
+      </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>
+      </TradingOption>
+    </>
+  ),
+};

libs/ui-toolkit/src/components/trading-select/select.tsx

@@ -0,0 +1,129 @@
+import type { Ref, SelectHTMLAttributes } from 'react';
+import { useRef } from 'react';
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { Icon } from '..';
+import { defaultSelectElement } from '../../utils/shared';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+export interface TradingSelectProps
+  extends SelectHTMLAttributes<HTMLSelectElement> {
+  hasError?: boolean;
+  className?: string;
+  value?: string | number;
+  children?: React.ReactNode;
+}
+
+export const TradingSelect = forwardRef<HTMLSelectElement, TradingSelectProps>(
+  ({ className, hasError, ...props }, ref) => (
+    <div className="flex items-center relative">
+      <select
+        ref={ref}
+        {...props}
+        className={classNames(
+          defaultSelectElement(hasError, props.disabled),
+          className,
+          'appearance-none rounded-md'
+        )}
+      />
+      <Icon
+        name="chevron-down"
+        className="absolute right-4 z-10 pointer-events-none"
+      />
+    </div>
+  )
+);
+
+export type TradingRichSelectProps = React.ComponentProps<
+  typeof SelectPrimitive.Root
+> & {
+  placeholder: string;
+  hasError?: boolean;
+  id?: string;
+  'data-testid'?: string;
+};
+export const TradingRichSelect = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  TradingRichSelectProps
+>(({ id, children, placeholder, hasError, ...props }, forwardedRef) => {
+  const containerRef = useRef<HTMLDivElement>();
+  const contentRef = useRef<HTMLDivElement>();
+
+  return (
+    <div
+      ref={containerRef as Ref<HTMLDivElement>}
+      className="flex items-center relative"
+    >
+      <SelectPrimitive.Root {...props} defaultOpen={false}>
+        <SelectPrimitive.Trigger
+          data-testid={props['data-testid'] || 'rich-select-trigger'}
+          className={classNames(
+            defaultSelectElement(hasError, props.disabled),
+            'rounded-md pl-2 pr-11',
+            'max-w-full overflow-hidden break-all'
+          )}
+          id={id}
+          ref={forwardedRef}
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon className={classNames('absolute right-4')}>
+            <Icon name="chevron-down" />
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal container={containerRef.current}>
+          <SelectPrimitive.Content
+            ref={contentRef as Ref<HTMLDivElement>}
+            className={classNames(
+              'relative',
+              'z-20',
+              'bg-white dark:bg-black',
+              'border border-neutral-500 focus:border-black dark:focus:border-white rounded',
+              'overflow-hidden',
+              'shadow-lg'
+            )}
+            position={'item-aligned'}
+            side={'bottom'}
+            align={'center'}
+          >
+            <SelectPrimitive.ScrollUpButton className="flex items-center justify-center py-1 absolute w-full h-6 z-20 bg-gradient-to-t from-transparent to-neutral-50 dark:to-neutral-900">
+              <Icon name="chevron-up" />
+            </SelectPrimitive.ScrollUpButton>
+            <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
+            <SelectPrimitive.ScrollDownButton className="flex items-center justify-center py-1 absolute bottom-0 w-full h-6 z-20 bg-gradient-to-b from-transparent to-neutral-50 dark:to-neutral-900">
+              <Icon name="chevron-down" />
+            </SelectPrimitive.ScrollDownButton>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    </div>
+  );
+});
+
+export const TradingOption = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentProps<typeof SelectPrimitive.Item>
+>(({ children, className, ...props }, forwardedRef) => (
+  <SelectPrimitive.Item
+    data-testid="rich-select-option"
+    className={classNames(
+      'relative',
+      'text-black dark:text-white',
+      'cursor-pointer outline-none',
+      'hover:bg-neutral-100 dark:hover:bg-neutral-800',
+      'focus:bg-neutral-100 dark:focus:bg-neutral-800',
+      'pl-2 py-2',
+      'pr-12',
+      'w-full',
+      'text-sm',
+      'data-selected:bg-vega-yellow dark:data-selected:text-black dark:data-selected:bg-vega-yellow',
+      className
+    )}
+    {...props}
+    ref={forwardedRef}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    <SelectPrimitive.ItemIndicator className="absolute right-4 top-[50%] translate-y-[-50%]">
+      <Icon name="tick" />
+    </SelectPrimitive.ItemIndicator>
+  </SelectPrimitive.Item>
+));

libs/ui-toolkit/src/utils/shared.ts

@@ -1,18 +1,20 @@
 import classnames from 'classnames';
 
-export const defaultSelectElement = (hasError?: boolean) =>
-  classnames(defaultFormElement(hasError), 'pr-10 dark:bg-black');
+export const defaultSelectElement = (hasError?: boolean, disabled?: boolean) =>
+  classnames(defaultFormElement(hasError, disabled), 'pr-10 min-h-8 py-1');
 
-export const defaultFormElement = (hasError?: boolean) =>
+export const defaultFormElement = (hasError?: boolean, disabled?: boolean) =>
   classnames(
     'flex items-center w-full text-sm',
     'p-2 rounded whitespace-nowrap text-ellipsis overflow-hidden',
-    'bg-transparent',
     'border',
-    'focus:border-vega-light-300 dark:focus:border-vega-dark-300',
-    'disabled:opacity-60',
+    'focus:border-vega-clight-400 dark:focus:border-vega-cdark-400',
     {
-      'border-vega-pink text-vega-pink': hasError,
-      'border-vega-light-200 dark:border-vega-dark-200': !hasError,
+      'bg-vega-clight-700 dark:bg-vega-cdark-700': !disabled && !hasError,
+      'bg-transparent': disabled || hasError,
+      'border-vega-clight-600 dark:border-vega-cdark-600': disabled,
+      'border-vega-red-500': !disabled && hasError,
+      'border-vega-clight-500 dark:border-vega-cdark-500':
+        !disabled && !hasError,
     }
   );