chore: use long press for tooltip on touch device

apps/trading/client-pages/fees/fees.tsx

@@ -1,27 +1,20 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { FeesContainer } from '../../components/fees-container';
 import { useT } from '../../lib/use-t';
-import { usePageTitleStore } from '../../stores';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const Fees = () => {
   const t = useT();
   const title = t('Fees');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
+  usePageTitle(title);
 
   return (
     <ErrorBoundary feature="fees">
-      <div className="container p-4 mx-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+      <TinyScroll className="p-4 max-h-full overflow-auto">
+        <h1 className="md:px-4 pb-4 text-2xl">{title}</h1>
         <FeesContainer />
-      </div>
+      </TinyScroll>
     </ErrorBoundary>
   );
 };

apps/trading/client-pages/markets/markets-page.tsx

@@ -1,5 +1,3 @@
-import React, { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
 import {
   LocalStoragePersistTabs as Tabs,
   Tab,
@@ -7,7 +5,6 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { OpenMarkets } from './open-markets';
 import { Proposed } from './proposed';
-import { usePageTitleStore } from '../../stores';
 import { Closed } from './closed';
 import {
   DApp,
@@ -17,19 +14,14 @@ import {
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
 import { MarketsSettings } from './markets-settings';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const MarketsPage = () => {
   const t = useT();
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
   const governanceLink = useLinks(DApp.Governance);
   const externalLink = governanceLink(TOKEN_NEW_MARKET_PROPOSAL);
 
-  useEffect(() => {
-    updateTitle(titlefy([t('Markets')]));
-  }, [updateTitle, t]);
+  usePageTitle(t('Markets'));
 
   return (
     <div className="h-full pt-0.5 pb-3 px-1.5">

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -1,10 +1,8 @@
 import { useEffect } from 'react';
 import type { ReactNode } from 'react';
 import { LayoutPriority } from 'allotment';
-import { titlefy } from '@vegaprotocol/utils';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { usePageTitleStore } from '../../stores';
 import {
   AccountsContainer,
   AccountsSettings,
@@ -41,6 +39,7 @@ import { WithdrawalsMenu } from '../../components/withdrawals-menu';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 const WithdrawalsIndicator = () => {
   const { ready } = useIncompleteWithdrawals();
@@ -69,14 +68,7 @@ const SidebarViewInitializer = () => {
 
 export const Portfolio = () => {
   const t = useT();
-
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-
-  useEffect(() => {
-    updateTitle(titlefy([t('Portfolio')]));
-  }, [updateTitle, t]);
+  usePageTitle(t('Portfolio'));
 
   const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
   const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';

apps/trading/client-pages/rewards/rewards.tsx

@@ -1,24 +1,18 @@
-import { useEffect } from 'react';
-import { titlefy } from '@vegaprotocol/utils';
+import { TinyScroll } from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
 import { RewardsContainer } from '../../components/rewards-container';
-import { usePageTitleStore } from '../../stores';
 import { ErrorBoundary } from '../../components/error-boundary';
-import { TinyScroll } from '@vegaprotocol/ui-toolkit';
+import { usePageTitle } from '../../lib/hooks/use-page-title';
 
 export const Rewards = () => {
   const t = useT();
   const title = t('Rewards');
-  const { updateTitle } = usePageTitleStore((store) => ({
-    updateTitle: store.updateTitle,
-  }));
-  useEffect(() => {
-    updateTitle(titlefy([title]));
-  }, [updateTitle, title]);
+  usePageTitle(title);
+
   return (
     <ErrorBoundary feature="rewards">
       <TinyScroll className="p-4 max-h-full overflow-auto">
-        <h1 className="px-4 pb-4 text-2xl">{title}</h1>
+        <h1 className="md:px-4 pb-4 text-2xl">{title}</h1>
         <RewardsContainer />
       </TinyScroll>
     </ErrorBoundary>

libs/proposals/src/components/protocol-upgrade-in-progress-notification.tsx

@@ -4,7 +4,6 @@ import {
   ExternalLink,
   Intent,
   NotificationBanner,
-  SHORT,
 } from '@vegaprotocol/ui-toolkit';
 import type { StoredNextProtocolUpgradeData } from '../lib';
 import {
@@ -70,7 +69,7 @@ export const ProtocolUpgradeInProgressNotification = () => {
   if (!upgradeInProgress) return null;
 
   return (
-    <NotificationBanner intent={Intent.Danger} className={SHORT}>
+    <NotificationBanner intent={Intent.Danger}>
       <div className="uppercase">
         {t('The network is being upgraded to {{vegaReleaseTag}}', {
           vegaReleaseTag,

libs/ui-toolkit/src/components/notification-banner/notification-banner.tsx

@@ -4,8 +4,6 @@ import { Intent } from '../../utils/intent';
 import { Icon, VegaIcon, VegaIconNames } from '../icon';
 import type { HTMLAttributes } from 'react';
 
-export const SHORT = '!px-1 !py-1 min-h-fit';
-
 interface NotificationBannerProps {
   intent?: Intent;
   children?: React.ReactNode;
@@ -23,7 +21,7 @@ export const NotificationBanner = ({
   return (
     <div
       className={classNames(
-        'flex items-center border-b px-2',
+        'flex items-center border-b pl-3 pr-2',
         'text-xs leading-tight font-normal',
         {
           'bg-vega-light-100 dark:bg-vega-dark-100 ': intent === Intent.None,

libs/ui-toolkit/src/components/tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import React from 'react';
+import type { ReactNode, TouchEvent } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Provider,
   Root,
@@ -12,10 +12,10 @@ import classNames from 'classnames';
 
 const tooltipContentClasses =
   'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs text-black dark:text-white break-word';
+
 export interface TooltipProps {
   children: React.ReactElement;
   description?: string | ReactNode;
-  open?: boolean;
   align?: 'start' | 'center' | 'end';
   side?: 'top' | 'right' | 'bottom' | 'left';
   sideOffset?: number;
@@ -28,20 +28,50 @@ export const TOOLTIP_TRIGGER_CLASS_NAME = (underline?: boolean) =>
       underline,
   });
 
+const useLongPress = (callback: (e: TouchEvent<HTMLElement>) => void) => {
+  const timer = useRef<number>();
+
+  const onTouchStart = (e: TouchEvent<HTMLElement>) => {
+    e.preventDefault();
+    timer.current = setTimeout(callback, 1000);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timer.current) {
+        clearInterval(timer.current);
+      }
+    };
+  }, []);
+
+  return {
+    onTouchStart,
+  };
+};
+
 // Conditionally rendered tooltip if description content is provided.
 export const Tooltip = ({
   children,
   description,
-  open,
   sideOffset,
   align = 'start',
   side = 'bottom',
   underline,
-}: TooltipProps) =>
-  description ? (
+}: TooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  const { onTouchStart } = useLongPress(() => {
+    setOpen(true);
+  });
+
+  return description ? (
     <Provider delayDuration={200} skipDelayDuration={100}>
-      <Root open={open}>
-        <Trigger asChild className={TOOLTIP_TRIGGER_CLASS_NAME(underline)}>
+      <Root open={open} onOpenChange={setOpen}>
+        <Trigger
+          asChild
+          className={TOOLTIP_TRIGGER_CLASS_NAME(underline)}
+          onTouchStart={onTouchStart}
+        >
           {children}
         </Trigger>
         {description && (
@@ -67,6 +97,7 @@ export const Tooltip = ({
   ) : (
     children
   );
+};
 
 export const TextChildrenTooltip = ({
   children,

libs/ui-toolkit/src/components/viewing-as-user/index.tsx

@@ -1,4 +1,4 @@
-import { NotificationBanner, SHORT } from '../notification-banner';
+import { NotificationBanner } from '../notification-banner';
 import { Intent } from '../../utils/intent';
 import { TradingButton } from '../trading-button';
 import { useT } from '../../use-t';
@@ -23,7 +23,7 @@ export const ViewingAsBanner = ({
 }: ViewingAsBannerProps) => {
   const t = useT();
   return (
-    <NotificationBanner intent={Intent.None} className={SHORT}>
+    <NotificationBanner>
       <div className="flex items-baseline justify-between">
         <span data-testid="view-banner">
           {t('Viewing as Vega user: {{pubKey}}', {