feat(trading): add tooltips for iceberg and post or reduce only

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

@@ -12,6 +12,7 @@ import {
   SPECIAL_CASE_NETWORK,
   SPECIAL_CASE_NETWORK_ID,
 } from '../../links/party-link/party-link';
+import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
 
 type Transfer = components['schemas']['commandsv1Transfer'];
 
@@ -63,10 +64,16 @@ export const TxDetailsTransfer = ({
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
-        <TableRow modifier="bordered">
+        <TableRow modifier="bordered" data-testid="type">
           <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
           <TableCell>{getTypeLabelForTransfer(transfer)}</TableCell>
         </TableRow>
+        <TableRow modifier="bordered" data-testid="id">
+          <TableCell {...sharedHeaderProps}>{t('Transfer ID')}</TableCell>
+          <TableCell>
+            {txSignatureToDeterministicId(txData.signature.value)}
+          </TableCell>
+        </TableRow>
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}
@@ -74,7 +81,7 @@ export const TxDetailsTransfer = ({
           hideTypeRow={true}
         />
         {from ? (
-          <TableRow modifier="bordered">
+          <TableRow modifier="bordered" data-testid="from">
             <TableCell>{t('From')}</TableCell>
             <TableCell>
               <PartyLink id={from} />
@@ -82,7 +89,7 @@ export const TxDetailsTransfer = ({
           </TableRow>
         ) : null}
         {transfer.to ? (
-          <TableRow modifier="bordered">
+          <TableRow modifier="bordered" data-testid="to">
             <TableCell>{t('To')}</TableCell>
             <TableCell>
               <PartyLink id={transfer.to} />
@@ -90,7 +97,7 @@ export const TxDetailsTransfer = ({
           </TableRow>
         ) : null}
         {transfer.asset && transfer.amount ? (
-          <TableRow modifier="bordered">
+          <TableRow modifier="bordered" data-testid="amount">
             <TableCell>{t('Amount')}</TableCell>
             <TableCell>
               <SizeInAsset assetId={transfer.asset} size={transfer.amount} />

apps/explorer/src/app/components/txs/tx-transfer.spec.tsx

@@ -1,6 +1,15 @@
-import { getTypeLabelForTransfer } from './details/tx-transfer';
+import type { BlockExplorerTransactionResult } from '../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../routes/blocks/tendermint-blocks-response';
 import type { components } from '../../../types/explorer';
 
+import {
+  TxDetailsTransfer,
+  getTypeLabelForTransfer,
+} from './details/tx-transfer';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+
 type Transfer = components['schemas']['commandsv1Transfer'];
 
 describe('TX: Transfer: getLabelForTransfer', () => {
@@ -56,3 +65,70 @@ describe('TX: Transfer: getLabelForTransfer', () => {
     expect(getTypeLabelForTransfer(mock)).toEqual('Transfer');
   });
 });
+
+describe('TxDetailsTransfer', () => {
+  const mockBlockData = {
+    result: {
+      block: {
+        header: {
+          height: '123',
+        },
+      },
+    },
+  };
+
+  const mockTxData: Partial<BlockExplorerTransactionResult> = {
+    hash: 'test',
+    submitter:
+      'e1943eea46fed576cf2be42972f3c5515ad3d0ac7ac013f56677c12a53a1b3ed',
+    command: {
+      nonce: '5188810881378065222',
+      blockHeight: '14951513',
+      transfer: {
+        fromAccountType: 'ACCOUNT_TYPE_GENERAL',
+        to: '78432a2808f20b18a46ccc6a917bdc4d63c2b9e7007f777bdcab5a9f462c5ba6',
+        toAccountType: 'ACCOUNT_TYPE_GENERAL',
+        asset:
+          'dd20590509d30d20bdbbe64dc1090c1140c7690121a9b9940bc66f62dfa2e599',
+        amount: '4800000000',
+        reference: '',
+        oneOff: {
+          deliverOn: '0',
+        },
+      },
+    },
+    signature: {
+      value:
+        '610c2e196a7d4fed4413b9e82af267b1ff3e30e943df3a3d28096fd60604d430d752fbaf6dd4f84d496be78885bb6118f40560bff7832c06bd7a3d67b718b700',
+    },
+  };
+
+  it('renders basic transfer details', () => {
+    const { getByTestId } = render(
+      <MockedProvider>
+        <MemoryRouter>
+          <TxDetailsTransfer
+            txData={mockTxData as BlockExplorerTransactionResult}
+            pubKey={mockTxData.command.submitter}
+            blockData={mockBlockData as TendermintBlocksResponse}
+          />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    const id = getByTestId('id');
+    expect(id.children[0].textContent).toEqual('Transfer ID');
+    expect(id.children[1].textContent).toEqual(
+      '51f3bab5eb2637651012507a64d497790a734248792c16e5cf36df8984074fbd'
+    );
+
+    const type = getByTestId('type');
+    expect(type.children[1].textContent).toEqual('Transfer');
+
+    const from = getByTestId('from');
+    expect(from.children[1].textContent).toEqual(mockTxData.submitter);
+
+    const to = getByTestId('to');
+    expect(to.children[1].textContent).toEqual(mockTxData.command.transfer.to);
+  });
+});

apps/trading/client-pages/referrals/landing-banner.tsx

@@ -8,17 +8,22 @@ export const LandingBanner = () => {
       <div className="">
         <div
           aria-hidden
-          className="absolute top-20 right-[120px] md:right-[240px] max-sm:hidden"
+          className="absolute top-64 right-[220px] md:right-[340px] max-sm:hidden"
         >
           <AnimatedDudeWithWire />
         </div>
-        <div className="pt-20 sm:w-[50%]">
+        <div className="pt-32 sm:w-[50%]">
           <h1 className="text-6xl font-alpha calt mb-10">
             {t('Earn commission & stake rewards')}
           </h1>
           <p className="text-lg mb-10">
             {t(
-              'Invite friends and earn rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
+              'Invite friends and earn commission in the form of Vega rewards from the trading fees they pay. Stake those rewards to earn multipliers on future rewards.'
+            )}
+          </p>
+          <p className="text-lg">
+            {t(
+              'Any friends that join using the code will receive discounts off trading fees.'
             )}
           </p>
         </div>

apps/trading/client-pages/referrals/layout.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import type { HTMLAttributes } from 'react';
 import { SKY_BACKGROUND } from './constants';
 import { Outlet } from 'react-router-dom';
-import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 
 export const Layout = ({
   className,
@@ -29,10 +28,8 @@ export const LayoutWithSky = ({
   ...props
 }: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <TinyScroll
-      className={classNames('max-h-full overflow-auto', SKY_BACKGROUND)}
-    >
+    <div className={classNames('h-full overflow-auto', SKY_BACKGROUND)}>
       <Layout className={className} {...props} />
-    </TinyScroll>
+    </div>
   );
 };

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -27,7 +27,7 @@ export const LayoutWithSidebar = ({
     <div className={gridClasses}>
       <div className="col-span-full">{header}</div>
       <main
-        className={classNames('col-start-1 col-end-1 overflow-hidden', {
+        className={classNames('col-start-1 col-end-1', {
           'lg:col-end-3': !sidebarOpen,
           'hidden lg:block lg:col-end-2': sidebarOpen,
         })}

apps/trading/pages/client-router.tsx

@@ -55,14 +55,10 @@ export const routerConfig: RouteObject[] = compact([
   FLAGS.REFERRALS
     ? {
         path: AppRoutes.REFERRALS,
-        element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
+        element: <LayoutWithSky />,
         children: [
           {
-            element: (
-              <LayoutWithSky>
-                <Referrals />
-              </LayoutWithSky>
-            ),
+            element: <Referrals />,
             children: [
               {
                 index: true,

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

@@ -24,6 +24,7 @@ import {
   Tooltip,
   TradingButton as Button,
   Pill,
+  ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 
 import { useOpenVolume } from '@vegaprotocol/positions';
@@ -77,6 +78,7 @@ import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
 import { isNonPersistentOrder } from '../../utils/time-in-force-persistance';
 import { KeyValue } from './key-value';
+import { DocsLinks } from '@vegaprotocol/environment';
 
 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.';
@@ -548,15 +550,20 @@ export const DealTicket = ({
           render={({ field }) => (
             <Tooltip
               description={
-                <span>
-                  {disablePostOnlyCheckbox
-                    ? t(
-                        '"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.'
-                      )
-                    : t(
-                        '"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.'
-                      )}
-                </span>
+                <>
+                  <span>
+                    {disablePostOnlyCheckbox
+                      ? t(
+                          '"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.'
+                        )
+                      : t(
+                          '"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.'
+                        )}
+                  </span>{' '}
+                  <ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}>
+                    {t('Find out more')}
+                  </ExternalLink>
+                </>
               }
             >
               <div>
@@ -580,13 +587,18 @@ export const DealTicket = ({
           render={({ field }) => (
             <Tooltip
               description={
-                <span>
-                  {disableReduceOnlyCheckbox
-                    ? t(
-                        '"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".'
-                      )
-                    : t(REDUCE_ONLY_TOOLTIP)}
-                </span>
+                <>
+                  <span>
+                    {disableReduceOnlyCheckbox
+                      ? t(
+                          '"Reduce only" can be used only with non-persistent orders, such as "Fill or Kill" or "Immediate or Cancel".'
+                        )
+                      : t(REDUCE_ONLY_TOOLTIP)}
+                  </span>{' '}
+                  <ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}>
+                    {t('Find out more')}
+                  </ExternalLink>
+                </>
               }
             >
               <div>
@@ -618,7 +630,10 @@ export const DealTicket = ({
                       {t(`Trade only a fraction of the order size at once.
                             After the peak size of the order has traded, the size is reset. This is repeated until the order is cancelled, expires, or its full volume trades away.
                             For example, an iceberg order with a size of 1000 and a peak size of 100 will effectively be split into 10 orders with a size of 100 each.
-                            Note that the full volume of the order is not hidden and is still reflected in the order book.`)}
+                            Note that the full volume of the order is not hidden and is still reflected in the order book.`)}{' '}
+                      <ExternalLink href={DocsLinks?.ICEBERG_ORDERS}>
+                        {t('Find out more')}
+                      </ExternalLink>{' '}
                     </p>
                   }
                 >

libs/environment/src/hooks/use-links.ts

@@ -82,6 +82,8 @@ export const DocsLinks = VEGA_DOCS_URL
       VALIDATOR_SCORES_REWARDS: `${VEGA_DOCS_URL}/concepts/vega-chain/validator-scores-and-rewards`,
       MARKET_LIFECYCLE: `${VEGA_DOCS_URL}/concepts/trading-on-vega/market-lifecycle`,
       ETH_DATA_SOURCES: `${VEGA_DOCS_URL}/concepts/trading-on-vega/data-sources#ethereum-data-sources`,
+      ICEBERG_ORDERS: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#iceberg-order`,
+      POST_REDUCE_ONLY: `${VEGA_DOCS_URL}/concepts/trading-on-vega/orders#conditional-order-parameters`,
     }
   : undefined;