feat(trading): use custom toast content for stop order related transactions (#4476)

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

@@ -150,3 +150,9 @@ query StopOrders($partyId: ID!) {
     }
   }
 }
+
+query StopOrderById($stopOrderId: ID!) {
+  stopOrder(id: $stopOrderId) {
+    ...StopOrderFields
+  }
+}

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

@@ -32,7 +32,7 @@ export type OrdersUpdateSubscriptionVariables = Types.Exact<{
 
 export type OrdersUpdateSubscription = { __typename?: 'Subscription', orders?: Array<{ __typename?: 'OrderUpdate', id: string, marketId: 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, liquidityProvisionId?: string | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null }> | null };
 
-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 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 } | null, 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 } };
 
@@ -43,6 +43,13 @@ export type StopOrdersQueryVariables = Types.Exact<{
 
 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 } | null, 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 } | null, 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 OrderFieldsFragmentDoc = gql`
     fragment OrderFields on Order {
   id
@@ -309,4 +316,39 @@ export function useStopOrdersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions
         }
 export type StopOrdersQueryHookResult = ReturnType<typeof useStopOrdersQuery>;
 export type StopOrdersLazyQueryHookResult = ReturnType<typeof useStopOrdersLazyQuery>;
-export type StopOrdersQueryResult = Apollo.QueryResult<StopOrdersQuery, StopOrdersQueryVariables>;
+export type StopOrdersQueryResult = Apollo.QueryResult<StopOrdersQuery, StopOrdersQueryVariables>;
+export const StopOrderByIdDocument = gql`
+    query StopOrderById($stopOrderId: ID!) {
+  stopOrder(id: $stopOrderId) {
+    ...StopOrderFields
+  }
+}
+    ${StopOrderFieldsFragmentDoc}`;
+
+/**
+ * __useStopOrderByIdQuery__
+ *
+ * To run a query within a React component, call `useStopOrderByIdQuery` and pass it any options that fit your needs.
+ * When your component renders, `useStopOrderByIdQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useStopOrderByIdQuery({
+ *   variables: {
+ *      stopOrderId: // value for 'stopOrderId'
+ *   },
+ * });
+ */
+export function useStopOrderByIdQuery(baseOptions: Apollo.QueryHookOptions<StopOrderByIdQuery, StopOrderByIdQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<StopOrderByIdQuery, StopOrderByIdQueryVariables>(StopOrderByIdDocument, options);
+      }
+export function useStopOrderByIdLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<StopOrderByIdQuery, StopOrderByIdQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<StopOrderByIdQuery, StopOrderByIdQueryVariables>(StopOrderByIdDocument, options);
+        }
+export type StopOrderByIdQueryHookResult = ReturnType<typeof useStopOrderByIdQuery>;
+export type StopOrderByIdLazyQueryHookResult = ReturnType<typeof useStopOrderByIdLazyQuery>;
+export type StopOrderByIdQueryResult = Apollo.QueryResult<StopOrderByIdQuery, StopOrderByIdQueryVariables>;

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

@@ -3,6 +3,7 @@ import {
   getDateTimeFormat,
   isNumeric,
   toBigNum,
+  formatTrigger,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
@@ -55,29 +56,8 @@ export const StopOrdersTable = memo<
         sortable: false,
         valueFormatter: ({
           data,
-          value,
+        }: VegaValueFormatterParams<StopOrder, 'trigger'>): string =>
-        }: VegaValueFormatterParams<StopOrder, 'trigger'>): string => {
+          data ? formatTrigger(data, data.market.decimalPlaces) : '',
-          if (data && value?.__typename === 'StopOrderPrice') {
-            return `${t('Mark')} ${
-              data?.triggerDirection ===
-              Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
-                ? '<'
-                : '>'
-            } ${addDecimalsFormatNumber(
-              value.price,
-              data.market.decimalPlaces
-            )}`;
-          }
-          if (data && value?.__typename === 'StopOrderTrailingPercentOffset') {
-            return `${t('Mark')} ${
-              data?.triggerDirection ===
-              Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
-                ? '+'
-                : '-'
-            }${(Number(value.trailingPercentOffset) * 100).toFixed(1)}%`;
-          }
-          return '-';
-        },
         minWidth: 100,
       },
       {

libs/utils/src/lib/format/index.ts

@@ -3,3 +3,4 @@ export * from './number';
 export * from './range';
 export * from './size';
 export * from './strings';
+export * from './trigger';

libs/utils/src/lib/format/trigger.ts

@@ -0,0 +1,27 @@
+import * as Schema from '@vegaprotocol/types';
+import { t } from '@vegaprotocol/i18n';
+import { addDecimalsFormatNumber } from './number';
+
+export const formatTrigger = (
+  data: Pick<Schema.StopOrder, 'trigger' | 'triggerDirection'> | undefined,
+  marketDecimalPlaces: number,
+  defaultValue = '-'
+) => {
+  if (data && data?.trigger?.__typename === 'StopOrderPrice') {
+    return `${t('Mark')} ${
+      data?.triggerDirection ===
+      Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
+        ? '<'
+        : '>'
+    } ${addDecimalsFormatNumber(data.trigger.price, marketDecimalPlaces)}`;
+  }
+  if (data && data?.trigger?.__typename === 'StopOrderTrailingPercentOffset') {
+    return `${t('Mark')} ${
+      data?.triggerDirection ===
+      Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
+        ? '+'
+        : '-'
+    }${(Number(data?.trigger.trailingPercentOffset) * 100).toFixed(1)}%`;
+  }
+  return defaultValue;
+};

libs/web3/src/lib/use-vega-transaction-toasts.spec.tsx

@@ -12,6 +12,7 @@ import {
   getVegaTransactionContentIntent,
 } from './use-vega-transaction-toasts';
 import { Intent } from '@vegaprotocol/ui-toolkit';
+import type { OrderByIdQuery, StopOrderByIdQuery } from '@vegaprotocol/orders';
 
 jest.mock('@vegaprotocol/assets', () => {
   const A1 = {
@@ -23,7 +24,7 @@ jest.mock('@vegaprotocol/assets', () => {
   };
   return {
     ...jest.requireActual('@vegaprotocol/assets'),
-    useAssetsDataProvider: jest.fn(() => ({ data: [A1] })),
+    useAssetsMapProvider: jest.fn(() => ({ data: { [A1.id]: A1 } })),
   };
 });
 
@@ -50,7 +51,7 @@ jest.mock('@vegaprotocol/markets', () => {
   };
   return {
     ...jest.requireActual('@vegaprotocol/markets'),
-    useMarketList: jest.fn(() => ({ data: [M1] })),
+    useMarketsMapProvider: jest.fn(() => ({ data: { [M1.id]: M1 } })),
   };
 });
 
@@ -59,20 +60,64 @@ jest.mock('@vegaprotocol/orders', () => {
     ...jest.requireActual('@vegaprotocol/orders'),
     useOrderByIdQuery: jest.fn(({ variables: { orderId } }) => {
       if (orderId === '0') {
-        return {
+        const data: OrderByIdQuery = {
-          data: {
+          orderByID: {
-            orderByID: {
+            id: '0',
-              id: '0',
+            side: 'SIDE_BUY',
-              side: 'SIDE_BUY',
+            size: '10',
-              size: '10',
+            remaining: '10',
-              timeInForce: 'TIME_IN_FORCE_FOK',
+            timeInForce: 'TIME_IN_FORCE_FOK',
-              type: 'TYPE_MARKET',
+            type: 'TYPE_MARKET',
-              price: '1234',
+            price: '1234',
-              createdAt: new Date(),
+            createdAt: new Date(),
-              status: 'STATUS_ACTIVE',
+            status: 'STATUS_ACTIVE',
-              market: { id: 'market-1' },
+            market: { id: 'market-1' },
-            },
           },
+        } as OrderByIdQuery;
+        return {
+          data,
+        };
+      } else {
+        return { data: undefined };
+      }
+    }),
+    useStopOrderByIdQuery: jest.fn(({ variables: { stopOrderId } }) => {
+      if (stopOrderId === '0') {
+        const data: StopOrderByIdQuery = {
+          stopOrder: {
+            id: '0',
+            ocoLinkId: null,
+            expiresAt: null,
+            expiryStrategy: null,
+            triggerDirection: 'TRIGGER_DIRECTION_RISES_ABOVE',
+            status: 'STATUS_CANCELLED',
+            createdAt: '2023-08-03T07:12:36.325927Z',
+            updatedAt: null,
+            partyId: 'party-id',
+            marketId: 'market-1',
+            trigger: {
+              price: '1234',
+              __typename: 'StopOrderPrice',
+            },
+            submission: {
+              marketId: 'market-1',
+              price: '1234',
+              size: '10',
+              side: 'SIDE_SELL',
+              timeInForce: 'TIME_IN_FORCE_FOK',
+              expiresAt: null,
+              type: 'TYPE_MARKET',
+              reference: '',
+              peggedOrder: null,
+              postOnly: false,
+              reduceOnly: true,
+              __typename: 'OrderSubmission',
+            },
+            __typename: 'StopOrder',
+          },
+        } as StopOrderByIdQuery;
+        return {
+          data,
         };
       } else {
         return { data: undefined };
@@ -143,6 +188,31 @@ const submitOrder: VegaStoredTxState = {
   },
 };
 
+const submitStopOrder: VegaStoredTxState = {
+  id: 0,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  body: {
+    stopOrdersSubmission: {
+      risesAbove: {
+        price: '1234',
+        orderSubmission: {
+          marketId: 'market-1',
+          side: Side.SIDE_BUY,
+          size: '10',
+          timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
+          type: OrderType.TYPE_MARKET,
+        },
+      },
+    },
+  },
+  status: VegaTxStatus.Default,
+  error: null,
+  txHash: null,
+  signature: null,
+  dialogOpen: false,
+};
+
 const editOrder: VegaStoredTxState = {
   id: 0,
   createdAt: new Date(),
@@ -208,6 +278,23 @@ const cancelAll: VegaStoredTxState = {
   dialogOpen: false,
 };
 
+const cancelStopOrder: VegaStoredTxState = {
+  id: 0,
+  createdAt: new Date(),
+  updatedAt: new Date(),
+  body: {
+    stopOrdersCancellation: {
+      marketId: 'market-1',
+      stopOrderId: '0',
+    },
+  },
+  status: VegaTxStatus.Default,
+  error: null,
+  txHash: null,
+  signature: null,
+  dialogOpen: false,
+};
+
 const closePosition: VegaStoredTxState = {
   id: 0,
   createdAt: new Date(),
@@ -269,12 +356,20 @@ describe('VegaTransactionDetails', () => {
   it.each([
     { tx: withdraw, details: 'Withdraw 12.34 $A' },
     { tx: submitOrder, details: 'Submit order - activeM1+0.10 @ 12.34 $A' },
+    {
+      tx: submitStopOrder,
+      details: 'Submit stop orderM1+0.10 @ ~ $AMark > 12.34',
+    },
     {
       tx: editOrder,
       details: 'Edit order - activeM1+0.10 @ 12.34 $A+0.11 @ 10.00 $A',
     },
     { tx: cancelOrder, details: 'Cancel orderM1+0.10 @ 12.34 $A' },
     { tx: cancelAll, details: 'Cancel all orders' },
+    {
+      tx: cancelStopOrder,
+      details: 'Cancel stop orderM1-0.10 @ 12.34 $AMark > 12.34',
+    },
     { tx: closePosition, details: 'Close position for M1' },
     { tx: batch, details: 'Batch market instruction' },
   ])('display details for transaction', ({ tx, details }) => {
@@ -291,12 +386,18 @@ describe('getVegaTransactionContentIntent', () => {
     expect(getVegaTransactionContentIntent(submitOrder).intent).toBe(
       Intent.Success
     );
+    expect(getVegaTransactionContentIntent(submitStopOrder).intent).toBe(
+      Intent.Primary
+    );
     expect(getVegaTransactionContentIntent(editOrder).intent).toBe(
       Intent.Primary
     );
     expect(getVegaTransactionContentIntent(cancelOrder).intent).toBe(
       Intent.Primary
     );
+    expect(getVegaTransactionContentIntent(cancelStopOrder).intent).toBe(
+      Intent.Primary
+    );
     expect(getVegaTransactionContentIntent(cancelAll).intent).toBe(
       Intent.Primary
     );

libs/web3/src/lib/use-vega-transaction-toasts.tsx

@@ -5,10 +5,10 @@ import type {
   BatchMarketInstructionSubmissionBody,
   OrderAmendment,
   OrderTxUpdateFieldsFragment,
-  OrderCancellationBody,
   OrderSubmission,
   VegaStoredTxState,
   WithdrawalBusEventFieldsFragment,
+  StopOrdersSubmission,
 } from '@vegaprotocol/wallet';
 import {
   isTransferTransaction,
@@ -36,9 +36,10 @@ import {
   formatNumber,
   toBigNum,
   truncateByChars,
+  formatTrigger,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { useAssetsDataProvider } from '@vegaprotocol/assets';
+import { useAssetsMapProvider } from '@vegaprotocol/assets';
 import { useEthWithdrawApprovalsStore } from './use-ethereum-withdraw-approvals-store';
 import { DApp, EXPLORER_TX, useLinks } from '@vegaprotocol/environment';
 import {
@@ -46,8 +47,9 @@ import {
   getOrderToastTitle,
   getRejectionReason,
   useOrderByIdQuery,
+  useStopOrderByIdQuery,
 } from '@vegaprotocol/orders';
-import { useMarketList } from '@vegaprotocol/markets';
+import { useMarketsMapProvider } from '@vegaprotocol/markets';
 import type { Side } from '@vegaprotocol/types';
 import { OrderStatusMapping } from '@vegaprotocol/types';
 import { Size } from '@vegaprotocol/datagrid';
@@ -136,8 +138,8 @@ const SubmitOrderDetails = ({
   data: OrderSubmission;
   order?: OrderTxUpdateFieldsFragment;
 }) => {
-  const { data: markets } = useMarketList();
+  const { data: markets } = useMarketsMapProvider();
-  const market = markets?.find((m) => m.id === order?.marketId);
+  const market = markets?.[order?.marketId || ''];
   if (!market) return null;
 
   const price = order ? order.price : data.price;
@@ -172,6 +174,58 @@ const SubmitOrderDetails = ({
   );
 };
 
+const SubmitStopOrderDetails = ({ data }: { data: StopOrdersSubmission }) => {
+  const { data: markets } = useMarketsMapProvider();
+  const stopOrderSetup = data.risesAbove || data.fallsBelow;
+  if (!stopOrderSetup) return null;
+  const market = markets?.[stopOrderSetup?.orderSubmission.marketId];
+  if (!market || !stopOrderSetup) return null;
+
+  const { price, size, side } = stopOrderSetup.orderSubmission;
+  let trigger: Schema.StopOrderTrigger | null = null;
+  if (stopOrderSetup.price) {
+    trigger = { price: stopOrderSetup.price, __typename: 'StopOrderPrice' };
+  } else if (stopOrderSetup.trailingPercentOffset) {
+    trigger = {
+      trailingPercentOffset: stopOrderSetup.trailingPercentOffset,
+      __typename: 'StopOrderTrailingPercentOffset',
+    };
+  }
+  const triggerDirection = data.risesAbove
+    ? Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_RISES_ABOVE
+    : Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW;
+  return (
+    <Panel>
+      <h4>{t('Submit stop order')}</h4>
+      <p>{market?.tradableInstrument.instrument.code}</p>
+      <p>
+        <SizeAtPrice
+          meta={{
+            positionDecimalPlaces: market.positionDecimalPlaces,
+            decimalPlaces: market.decimalPlaces,
+            asset:
+              market.tradableInstrument.instrument.product.settlementAsset
+                .symbol,
+          }}
+          side={side}
+          size={size}
+          price={price}
+        />
+        <br />
+        {trigger &&
+          formatTrigger(
+            {
+              triggerDirection,
+              trigger,
+            },
+            market.decimalPlaces,
+            ''
+          )}
+      </p>
+    </Panel>
+  );
+};
+
 const EditOrderDetails = ({
   data,
   order,
@@ -183,13 +237,12 @@ const EditOrderDetails = ({
     variables: { orderId: data.orderId },
     fetchPolicy: 'no-cache',
   });
-  const { data: markets } = useMarketList();
+  const { data: markets } = useMarketsMapProvider();
 
   const originalOrder = order || orderById?.orderByID;
   const marketId = order?.marketId || orderById?.orderByID.market.id;
-  if (!originalOrder) return null;
+  const market = markets?.[marketId || ''];
-  const market = markets?.find((m) => m.id === marketId);
+  if (!originalOrder || !market) return null;
-  if (!market) return null;
 
   const original = (
     <SizeAtPrice
@@ -245,11 +298,11 @@ const CancelOrderDetails = ({
   const { data: orderById } = useOrderByIdQuery({
     variables: { orderId },
   });
-  const { data: markets } = useMarketList();
+  const { data: markets } = useMarketsMapProvider();
 
   const originalOrder = orderById?.orderByID;
   if (!originalOrder) return null;
-  const market = markets?.find((m) => m.id === originalOrder.market.id);
+  const market = markets?.[originalOrder.market.id];
   if (!market) return null;
 
   const original = (
@@ -282,15 +335,52 @@ const CancelOrderDetails = ({
   );
 };
 
+const CancelStopOrderDetails = ({ stopOrderId }: { stopOrderId: string }) => {
+  const { data: orderById } = useStopOrderByIdQuery({
+    variables: { stopOrderId },
+  });
+  const { data: markets } = useMarketsMapProvider();
+
+  const originalOrder = orderById?.stopOrder;
+  if (!originalOrder) return null;
+  const market = markets?.[originalOrder.marketId];
+  if (!market) return null;
+
+  const original = (
+    <>
+      <SizeAtPrice
+        side={originalOrder.submission.side}
+        size={originalOrder.submission.size}
+        price={originalOrder.submission.price}
+        meta={{
+          positionDecimalPlaces: market.positionDecimalPlaces,
+          decimalPlaces: market.decimalPlaces,
+          asset:
+            market.tradableInstrument.instrument.product.settlementAsset.symbol,
+        }}
+      />
+      <br />
+      {formatTrigger(originalOrder, market.decimalPlaces, '')}
+    </>
+  );
+  return (
+    <Panel title={stopOrderId}>
+      <h4>{t('Cancel stop order')}</h4>
+      <p>{market?.tradableInstrument.instrument.code}</p>
+      <p>
+        <s>{original}</s>
+      </p>
+    </Panel>
+  );
+};
+
 export const VegaTransactionDetails = ({ tx }: { tx: VegaStoredTxState }) => {
-  const { data: assets } = useAssetsDataProvider();
+  const { data: assets } = useAssetsMapProvider();
-  const { data: markets } = useMarketList();
+  const { data: markets } = useMarketsMapProvider();
 
   if (isWithdrawTransaction(tx.body)) {
     const transactionDetails = tx.body;
-    const asset = assets?.find(
+    const asset = assets?.[transactionDetails.withdrawSubmission.asset];
-      (a) => a.id === transactionDetails.withdrawSubmission.asset
-    );
     if (asset) {
       const num = formatNumber(
         toBigNum(transactionDetails.withdrawSubmission.amount, asset.decimals),
@@ -312,15 +402,11 @@ export const VegaTransactionDetails = ({ tx }: { tx: VegaStoredTxState }) => {
     );
   }
 
-  if (isOrderCancellationTransaction(tx.body)) {
+  if (isStopOrdersSubmissionTransaction(tx.body)) {
-    // CANCEL ALL (from Portfolio)
+    return <SubmitStopOrderDetails data={tx.body.stopOrdersSubmission} />;
-    if (
+  }
-      tx.body.orderCancellation.marketId === undefined &&
-      tx.body.orderCancellation.orderId === undefined
-    ) {
-      return <Panel>{t('Cancel all orders')}</Panel>;
-    }
 
+  if (isOrderCancellationTransaction(tx.body)) {
     // CANCEL
     if (
       tx.body.orderCancellation.orderId &&
@@ -336,22 +422,50 @@ export const VegaTransactionDetails = ({ tx }: { tx: VegaStoredTxState }) => {
 
     // CANCEL ALL (from Trading)
     if (tx.body.orderCancellation.marketId) {
-      const marketName = markets?.find(
+      const marketName =
-        (m) =>
+        markets?.[tx.body.orderCancellation.marketId]?.tradableInstrument
-          m.id === (tx.body as OrderCancellationBody).orderCancellation.marketId
+          .instrument.code;
-      )?.tradableInstrument.instrument.code;
+      if (marketName) {
+        return (
+          <Panel>
+            {t('Cancel all orders for')} <strong>{marketName}</strong>
+          </Panel>
+        );
+      }
+    }
+    // CANCEL ALL (from Portfolio)
+    return <Panel>{t('Cancel all orders')}</Panel>;
+  }
+
+  if (isStopOrdersCancellationTransaction(tx.body)) {
+    // CANCEL
+    if (
+      tx.body.stopOrdersCancellation.stopOrderId &&
+      tx.body.stopOrdersCancellation.marketId
+    ) {
       return (
-        <Panel>
+        <CancelStopOrderDetails
-          {marketName ? (
+          stopOrderId={String(tx.body.stopOrdersCancellation.stopOrderId)}
-            <>
+        />
-              {t('Cancel all orders for')} <strong>{marketName}</strong>
-            </>
-          ) : (
-            t('Cancel all orders')
-          )}
-        </Panel>
       );
     }
+
+    // CANCEL ALL for market
+    if (tx.body.stopOrdersCancellation.marketId) {
+      const marketName =
+        markets?.[tx.body.stopOrdersCancellation.marketId]?.tradableInstrument
+          .instrument.code;
+      if (marketName) {
+        return (
+          <Panel>
+            {t('Cancel all stop orders for')} <strong>{marketName}</strong>
+          </Panel>
+        );
+      }
+    }
+
+    // CANCEL ALL
+    return <Panel>{t('Cancel all stop orders')}</Panel>;
   }
 
   if (isOrderAmendmentTransaction(tx.body)) {
@@ -368,7 +482,7 @@ export const VegaTransactionDetails = ({ tx }: { tx: VegaStoredTxState }) => {
     const marketId = first(
       transaction.batchMarketInstructions.cancellations
     )?.marketId;
-    const market = marketId && markets?.find((m) => m.id === marketId);
+    const market = markets?.[marketId || ''];
     if (market) {
       return (
         <Panel>
@@ -385,7 +499,7 @@ export const VegaTransactionDetails = ({ tx }: { tx: VegaStoredTxState }) => {
 
   if (isTransferTransaction(tx.body)) {
     const { amount, to, asset } = tx.body.transfer;
-    const transferAsset = assets?.find((a) => a.id === asset);
+    const transferAsset = assets?.[asset];
     // only render if we have an asset to avoid unformatted amounts showing
     if (transferAsset) {
       const value = addDecimalsFormatNumber(amount, transferAsset.decimals);