chore(explorer): remove voting column from proposal table

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

@@ -24,10 +24,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
           cy.get_element_by_col_id('title').should('have.text', proposalTitle);
           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);
@@ -73,10 +69,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
             '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);

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -1,5 +1,4 @@
 import { type ProposalListFieldsFragment } from '@vegaprotocol/proposals';
-import { VoteProgress } from '@vegaprotocol/proposals';
 import { type AgGridReact } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGrid } from '@vegaprotocol/datagrid';
@@ -12,12 +11,7 @@ import { type ColDef } from 'ag-grid-community';
 import type { RowClickedEvent } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import {
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
 import { ProposalStateMapping } from '@vegaprotocol/types';
-import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { JsonViewerDialog } from '../dialogs/json-viewer-dialog';
@@ -31,15 +25,7 @@ type ProposalsTableProps = {
   data: ProposalListFieldsFragment[] | null;
 };
 export const ProposalsTable = ({ data }: ProposalsTableProps) => {
-  const { params } = useNetworkParams([
-    NetworkParams.governance_proposal_market_requiredMajority,
-  ]);
   const tokenLink = useLinks(DApp.Governance);
-  const requiredMajorityPercentage = useMemo(() => {
-    const requiredMajority =
-      params?.governance_proposal_market_requiredMajority ?? 1;
-    return new BigNumber(requiredMajority).times(100);
-  }, [params?.governance_proposal_market_requiredMajority]);
 
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
@@ -90,33 +76,6 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
           return value ? ProposalStateMapping[value] : '-';
         },
       },
-      {
-        colId: 'voting',
-        maxWidth: 100,
-        hide: window.innerWidth <= BREAKPOINT_MD,
-        headerName: t('Voting'),
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
-          if (data) {
-            const yesTokens = new BigNumber(data.votes.yes.totalTokens);
-            const noTokens = new BigNumber(data.votes.no.totalTokens);
-            const totalTokensVoted = yesTokens.plus(noTokens);
-            const yesPercentage = totalTokensVoted.isZero()
-              ? new BigNumber(0)
-              : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
-            return (
-              <div className="flex h-full items-center justify-center pt-2 uppercase">
-                <VoteProgress
-                  threshold={requiredMajorityPercentage}
-                  progress={yesPercentage}
-                />
-              </div>
-            );
-          }
-          return '-';
-        },
-      },
       {
         colId: 'cDate',
         maxWidth: 150,
@@ -184,7 +143,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
         },
       },
     ],
-    [requiredMajorityPercentage, tokenLink]
+    [tokenLink]
   );
   return (
     <>

apps/trading/client-pages/competitions/competitions-create-team.tsx

@@ -1,10 +1,5 @@
-import { Link, useSearchParams } from 'react-router-dom';
-import {
-  Intent,
-  TradingAnchorButton,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { useSearchParams } from 'react-router-dom';
+import { Intent, TradingAnchorButton } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { useT } from '../../lib/use-t';
@@ -35,19 +30,6 @@ export const CompetitionsCreateTeam = () => {
       <LayoutWithGradient>
         <div className="mx-auto md:w-2/3 max-w-xl">
           <Box className="flex flex-col gap-4">
-            <Link
-              to={Links.COMPETITIONS()}
-              className="text-xs inline-flex items-center gap-1 group"
-            >
-              <VegaIcon
-                name={VegaIconNames.CHEVRON_LEFT}
-                size={12}
-                className="text-vega-clight-100 dark:text-vega-cdark-100"
-              />{' '}
-              <span className="group-hover:underline">
-                {t('Go back to the competitions')}
-              </span>
-            </Link>
             <h1 className="calt text-2xl lg:text-3xl xl:text-4xl">
               {isSolo ? t('Create solo team') : t('Create a team')}
             </h1>
@@ -96,17 +78,15 @@ const CreateTeamFormContainer = ({ isSolo }: { isSolo: boolean }) => {
         <p className="text-sm">{t('Team creation transaction successful')}</p>
         {code && (
           <>
-            <dl>
-              <dt className="text-sm">{t('Your team ID:')}</dt>
-              <dl>
-                <span
-                  className="font-mono break-all bg-rainbow bg-clip-text text-transparent text-2xl"
-                  data-testid="team-id-display"
-                >
-                  {code}
-                </span>
-              </dl>
-            </dl>
+            <p className="text-sm">
+              Your team ID is:{' '}
+              <span
+                className="font-mono break-all"
+                data-testid="team-id-display"
+              >
+                {code}
+              </span>
+            </p>
             <TradingAnchorButton
               href={Links.COMPETITIONS_TEAM(code)}
               intent={Intent.Info}

apps/trading/client-pages/competitions/competitions-update-team.tsx

@@ -3,14 +3,7 @@ import { usePageTitle } from '../../lib/hooks/use-page-title';
 import { Box } from '../../components/competitions/box';
 import { useT } from '../../lib/use-t';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import {
-  Intent,
-  Loader,
-  Splash,
-  TradingAnchorButton,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
 import { RainbowButton } from '../../components/rainbow-button';
 import { Link, Navigate, useParams } from 'react-router-dom';
 import { Links } from '../../lib/links';
@@ -18,7 +11,6 @@ import { useReferralSetTransaction } from '../../lib/hooks/use-referral-set-tran
 import { type FormFields, TeamForm, TransactionType } from './team-form';
 import { useTeam } from '../../lib/hooks/use-team';
 import { LayoutWithGradient } from '../../components/layouts-inner';
-import { useEffect, useState } from 'react';
 
 export const CompetitionsUpdateTeam = () => {
   const t = useT();
@@ -37,19 +29,6 @@ export const CompetitionsUpdateTeam = () => {
       <LayoutWithGradient>
         <div className="mx-auto md:w-2/3 max-w-xl">
           <Box className="flex flex-col gap-4">
-            <Link
-              to={Links.COMPETITIONS_TEAM(teamId)}
-              className="text-xs inline-flex items-center gap-1 group"
-            >
-              <VegaIcon
-                name={VegaIconNames.CHEVRON_LEFT}
-                size={12}
-                className="text-vega-clight-100 dark:text-vega-cdark-100"
-              />{' '}
-              <span className="group-hover:underline">
-                {t('Go back to the team profile')}
-              </span>
-            </Link>
             <h1 className="calt text-2xl lg:text-3xl xl:text-5xl">
               {t('Update a team')}
             </h1>
@@ -78,8 +57,7 @@ const UpdateTeamFormContainer = ({
   pubKey: string;
 }) => {
   const t = useT();
-  const [refetching, setRefetching] = useState<boolean>(false);
-  const { team, loading, error, refetch } = useTeam(teamId, pubKey);
+  const { team, loading, error } = useTeam(teamId, pubKey);
 
   const { err, status, onSubmit } = useReferralSetTransaction({
     onSuccess: () => {
@@ -87,15 +65,7 @@ const UpdateTeamFormContainer = ({
     },
   });
 
-  // refetch when saved
-  useEffect(() => {
-    if (refetch && status === 'confirmed') {
-      refetch();
-      setRefetching(true);
-    }
-  }, [refetch, status]);
-
-  if (loading && !refetching) {
+  if (loading) {
     return <Loader size="small" />;
   }
   if (error) {
@@ -114,33 +84,6 @@ const UpdateTeamFormContainer = ({
     return <Navigate to={Links.COMPETITIONS_TEAM(teamId)} />;
   }
 
-  if (status === 'confirmed') {
-    return (
-      <div
-        className="flex flex-col items-start gap-2"
-        data-testid="team-creation-success-message"
-      >
-        <p className="text-sm">
-          <VegaIcon
-            name={VegaIconNames.TICK}
-            size={18}
-            className="text-vega-green-500"
-          />{' '}
-          {t('Changes successfully saved to your team.')}
-        </p>
-
-        <TradingAnchorButton
-          href={Links.COMPETITIONS_TEAM(teamId)}
-          intent={Intent.Info}
-          size="small"
-          data-testid="view-team-button"
-        >
-          {t('View team')}
-        </TradingAnchorButton>
-      </div>
-    );
-  }
-
   const defaultValues: FormFields = {
     id: team.teamId,
     name: team.name,

apps/trading/client-pages/markets/mobile-buttons.tsx

@@ -1,235 +0,0 @@
-import { Route, Routes } from 'react-router-dom';
-import {
-  Intent,
-  MobileActionsDropdown,
-  Tooltip,
-  TradingButton,
-  TradingDropdownItem,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
-import { type BarView, ViewType, useSidebar } from '../../components/sidebar';
-import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
-import { useT } from '../../lib/use-t';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-import { useEffect } from 'react';
-import classNames from 'classnames';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-
-const ViewInitializer = () => {
-  const currentRouteId = useGetCurrentRouteId();
-  const { setViews, getView } = useSidebar();
-  const view = getView(currentRouteId);
-  const { screenSize } = useScreenDimensions();
-  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
-  useEffect(() => {
-    if (largeScreen && view === undefined) {
-      setViews({ type: ViewType.Order }, currentRouteId);
-    }
-  }, [setViews, view, currentRouteId, largeScreen]);
-  return null;
-};
-
-export const MarketsMobileSidebar = () => {
-  const t = useT();
-  const currentRouteId = useGetCurrentRouteId();
-  const { pubKeys, isReadOnly } = useVegaWallet();
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-
-  return (
-    <Routes>
-      <Route
-        path=":marketId"
-        element={
-          <>
-            <ViewInitializer />
-            <div className="grid grid-cols-3 grow md:grow-0 md:flex lg:flex-col items-center gap-2 lg:gap-4 p-1">
-              {!pubKeys || isReadOnly ? (
-                <>
-                  <TradingButton
-                    intent={Intent.Primary}
-                    size="medium"
-                    onClick={() => {
-                      openVegaWalletDialog();
-                    }}
-                  >
-                    {t('Connect')}
-                  </TradingButton>
-                  <MobileButton
-                    view={ViewType.Order}
-                    tooltip={t('Trade')}
-                    routeId={currentRouteId}
-                  />
-                  <MobileBarActionsDropdown currentRouteId={currentRouteId} />
-                </>
-              ) : (
-                <>
-                  <MobileButton
-                    view={ViewType.Order}
-                    tooltip={t('Trade')}
-                    routeId={currentRouteId}
-                  />
-                  <MobileButton
-                    view={ViewType.Deposit}
-                    tooltip={t('Deposit')}
-                    routeId={currentRouteId}
-                  />
-                  <MobileBarActionsDropdown currentRouteId={currentRouteId} />
-                </>
-              )}
-            </div>
-          </>
-        }
-      />
-    </Routes>
-  );
-};
-
-export const MobileButton = ({
-  view,
-  tooltip: label,
-  disabled = false,
-  onClick,
-  routeId,
-}: {
-  view?: ViewType;
-  tooltip: string;
-  disabled?: boolean;
-  onClick?: () => void;
-  routeId: string;
-}) => {
-  const { setViews, getView } = useSidebar((store) => ({
-    setViews: store.setViews,
-    getView: store.getView,
-  }));
-  const currView = getView(routeId);
-  const onSelect = (view: BarView['type']) => {
-    if (view === currView?.type) {
-      setViews(null, routeId);
-    } else {
-      setViews({ type: view }, routeId);
-    }
-  };
-
-  const buttonClasses = classNames(
-    'flex items-center p-1 rounded',
-    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
-    {
-      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
-        !view || view !== currView?.type,
-      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
-        view && view === currView?.type,
-    }
-  );
-
-  return (
-    <Tooltip description={label} align="center" side="right" sideOffset={10}>
-      <TradingButton
-        className={buttonClasses}
-        data-testid={view}
-        onClick={onClick || (() => onSelect(view as BarView['type']))}
-        disabled={disabled}
-      >
-        {label}
-      </TradingButton>
-    </Tooltip>
-  );
-};
-
-export const MobileDropdownItem = ({
-  view,
-  icon,
-  tooltip,
-  disabled = false,
-  onClick,
-  routeId,
-}: {
-  view?: ViewType;
-  icon: VegaIconNames;
-  tooltip: string;
-  disabled?: boolean;
-  onClick?: () => void;
-  routeId: string;
-}) => {
-  const { setViews, getView } = useSidebar((store) => ({
-    setViews: store.setViews,
-    getView: store.getView,
-  }));
-  const currView = getView(routeId);
-  const onSelect = (view: BarView['type']) => {
-    if (view === currView?.type) {
-      setViews(null, routeId);
-    } else {
-      setViews({ type: view }, routeId);
-    }
-  };
-
-  const buttonClasses = classNames(
-    'flex items-center p-1 rounded',
-    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
-    {
-      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
-        !view || view !== currView?.type,
-      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
-        view && view === currView?.type,
-    }
-  );
-
-  return (
-    <Tooltip description={tooltip} align="center" side="right" sideOffset={10}>
-      <TradingDropdownItem
-        className={buttonClasses}
-        data-testid={view}
-        onClick={onClick || (() => onSelect(view as BarView['type']))}
-        disabled={disabled}
-      >
-        <VegaIcon name={icon} size={20} />
-        {tooltip}
-      </TradingDropdownItem>
-    </Tooltip>
-  );
-};
-
-export const MobileBarActionsDropdown = ({
-  currentRouteId,
-}: {
-  currentRouteId: string;
-}) => {
-  const t = useT();
-  return (
-    <MobileActionsDropdown>
-      <MobileDropdownItem
-        view={ViewType.Deposit}
-        icon={VegaIconNames.DEPOSIT}
-        tooltip={t('Deposit')}
-        routeId={currentRouteId}
-      />
-      <MobileDropdownItem
-        view={ViewType.Withdraw}
-        icon={VegaIconNames.WITHDRAW}
-        tooltip={t('Withdraw')}
-        routeId={currentRouteId}
-      />
-      <MobileDropdownItem
-        view={ViewType.Transfer}
-        icon={VegaIconNames.TRANSFER}
-        tooltip={t('Transfer')}
-        routeId={currentRouteId}
-      />
-      <MobileDropdownItem
-        view={ViewType.Info}
-        icon={VegaIconNames.BREAKDOWN}
-        tooltip={t('Market specification')}
-        routeId={currentRouteId}
-      />
-      <MobileDropdownItem
-        view={ViewType.Settings}
-        icon={VegaIconNames.COG}
-        tooltip={t('Settings')}
-        routeId={currentRouteId}
-      />
-    </MobileActionsDropdown>
-  );
-};

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

@@ -2,7 +2,6 @@ import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { SidebarButton, ViewType } from '../../components/sidebar';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
-import { MobileButton } from '../markets/mobile-buttons';
 
 export const PortfolioSidebar = () => {
   const t = useT();
@@ -31,28 +30,3 @@ export const PortfolioSidebar = () => {
     </>
   );
 };
-
-export const PortfolioMobileSidebar = () => {
-  const t = useT();
-  const currentRouteId = useGetCurrentRouteId();
-
-  return (
-    <div className="grid grid-cols-3 grow md:grow-0 md:flex lg:flex-col items-center gap-2 lg:gap-4 p-1">
-      <MobileButton
-        view={ViewType.Deposit}
-        tooltip={t('Deposit')}
-        routeId={currentRouteId}
-      />
-      <MobileButton
-        view={ViewType.Withdraw}
-        tooltip={t('Withdraw')}
-        routeId={currentRouteId}
-      />
-      <MobileButton
-        view={ViewType.Transfer}
-        tooltip={t('Transfer')}
-        routeId={currentRouteId}
-      />
-    </div>
-  );
-};

apps/trading/components/competitions/team-avatar.tsx

@@ -1,6 +1,4 @@
-import { isValidUrl } from '@vegaprotocol/utils';
 import classNames from 'classnames';
-import { useEffect, useState } from 'react';
 
 const NUM_AVATARS = 20;
 const AVATAR_PATHNAME_PATTERN = '/team-avatars/{id}.png';
@@ -13,26 +11,6 @@ export const getFallbackAvatar = (teamId: string) => {
   return AVATAR_PATHNAME_PATTERN.replace('{id}', avatarId);
 };
 
-const useAvatar = (teamId: string, url: string) => {
-  const fallback = getFallbackAvatar(teamId);
-  const [avatar, setAvatar] = useState<string>(fallback);
-
-  useEffect(() => {
-    if (!isValidUrl(url)) return;
-    fetch(url, { cache: 'force-cache' })
-      .then((response) => {
-        if (response.ok) {
-          setAvatar(url);
-        }
-      })
-      .catch(() => {
-        /** noop */
-      });
-  });
-
-  return avatar;
-};
-
 export const TeamAvatar = ({
   teamId,
   imgUrl,
@@ -44,7 +22,7 @@ export const TeamAvatar = ({
   alt?: string;
   size?: 'large' | 'small';
 }) => {
-  const img = useAvatar(teamId, imgUrl);
+  const img = imgUrl && imgUrl.length > 0 ? imgUrl : getFallbackAvatar(teamId);
   return (
     // eslint-disable-next-line @next/next/no-img-element
     <img

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

@@ -16,7 +16,7 @@ export const LayoutWithSidebar = ({
   const sidebarOpen = sidebarView !== null;
   const gridClasses = classNames(
     'h-full relative z-0 grid',
-    'grid-rows-[min-content_1fr_50px]',
+    'grid-rows-[min-content_1fr_40px]',
     'lg:grid-rows-[min-content_1fr]',
     'lg:grid-cols-[1fr_280px_40px]',
     'xxxl:grid-cols-[1fr_320px_40px]'

apps/trading/components/sidebar/sidebar.tsx

@@ -17,7 +17,6 @@ import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 import { useGetCurrentRouteId } from '../../lib/hooks/use-get-current-route-id';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../error-boundary';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
 export enum ViewType {
   Order = 'Order',
@@ -27,10 +26,9 @@ export enum ViewType {
   Transfer = 'Transfer',
   Settings = 'Settings',
   ViewAs = 'ViewAs',
-  Close = 'Close',
 }
 
-export type BarView =
+type SidebarView =
   | {
       type: ViewType.Deposit;
       assetId?: string;
@@ -51,9 +49,6 @@ export type BarView =
     }
   | {
       type: ViewType.Settings;
-    }
-  | {
-      type: ViewType.Close;
     };
 
 export const Sidebar = ({ options }: { options?: ReactNode }) => {
@@ -62,52 +57,26 @@ export const Sidebar = ({ options }: { options?: ReactNode }) => {
   const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
   const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
   const { pubKeys } = useVegaWallet();
-  const { isMobile } = useScreenDimensions();
-  const { getView } = useSidebar((store) => ({
-    setViews: store.setViews,
-    getView: store.getView,
-  }));
-  const currView = getView(currentRouteId);
   return (
-    <div className="flex h-full lg:flex-col gap-1" data-testid="sidebar">
-      {options && (
-        <nav className={classNames(navClasses, 'flex grow')}>{options}</nav>
-      )}
-      <nav
-        className={classNames(
-          navClasses,
-          'ml-auto lg:mt-auto lg:ml-0 shrink-0'
-        )}
-      >
-        {!isMobile ? (
-          <>
-            <SidebarButton
-              view={ViewType.ViewAs}
-              onClick={() => {
-                setViewAsDialogOpen(true);
-              }}
-              icon={VegaIconNames.EYE}
-              tooltip={t('View as party')}
-              disabled={Boolean(pubKeys)}
-              routeId={currentRouteId}
-            />
-            <SidebarButton
-              view={ViewType.Settings}
-              icon={VegaIconNames.COG}
-              tooltip={t('Settings')}
-              routeId={currentRouteId}
-            />
-          </>
-        ) : (
-          currView && (
-            <SidebarButton
-              view={ViewType.Close}
-              icon={VegaIconNames.ARROW_LEFT}
-              tooltip={t('Back')}
-              routeId={currentRouteId}
-            />
-          )
-        )}
+    <div className="flex h-full p-1 lg:flex-col gap-2" data-testid="sidebar">
+      {options && <nav className={navClasses}>{options}</nav>}
+      <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
+        <SidebarButton
+          view={ViewType.ViewAs}
+          onClick={() => {
+            setViewAsDialogOpen(true);
+          }}
+          icon={VegaIconNames.EYE}
+          tooltip={t('View as party')}
+          disabled={Boolean(pubKeys)}
+          routeId={currentRouteId}
+        />
+        <SidebarButton
+          view={ViewType.Settings}
+          icon={VegaIconNames.COG}
+          tooltip={t('Settings')}
+          routeId={currentRouteId}
+        />
         <NodeHealthContainer />
       </nav>
     </div>
@@ -134,7 +103,7 @@ export const SidebarButton = ({
     getView: store.getView,
   }));
   const currView = getView(routeId);
-  const onSelect = (view: BarView['type']) => {
+  const onSelect = (view: SidebarView['type']) => {
     if (view === currView?.type) {
       setViews(null, routeId);
     } else {
@@ -164,7 +133,7 @@ export const SidebarButton = ({
       <button
         className={buttonClasses}
         data-testid={view}
-        onClick={onClick || (() => onSelect(view as BarView['type']))}
+        onClick={onClick || (() => onSelect(view as SidebarView['type']))}
         disabled={disabled}
       >
         <VegaIcon name={icon} size={20} />
@@ -211,10 +180,6 @@ export const SidebarContent = () => {
     }
   }
 
-  if (view.type === ViewType.Close) {
-    return <CloseSidebar />;
-  }
-
   if (view.type === ViewType.Info) {
     if (params.marketId) {
       return (
@@ -302,9 +267,9 @@ const CloseSidebar = () => {
 };
 
 export const useSidebar = create<{
-  views: { [key: string]: BarView | null };
-  setViews: (view: BarView | null, routeId: string) => void;
-  getView: (routeId: string) => BarView | null | undefined;
+  views: { [key: string]: SidebarView | null };
+  setViews: (view: SidebarView | null, routeId: string) => void;
+  getView: (routeId: string) => SidebarView | null | undefined;
 }>()((set, get) => ({
   views: {},
   setViews: (x, routeId) =>

apps/trading/pages/client-router.tsx

@@ -24,10 +24,7 @@ import { compact } from 'lodash';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import { LiquidityHeader } from '../components/liquidity-header';
 import { MarketHeader, MobileMarketHeader } from '../components/market-header';
-import {
-  PortfolioMobileSidebar,
-  PortfolioSidebar,
-} from '../client-pages/portfolio/portfolio-sidebar';
+import { PortfolioSidebar } from '../client-pages/portfolio/portfolio-sidebar';
 import { LiquiditySidebar } from '../client-pages/liquidity/liquidity-sidebar';
 import { MarketsSidebar } from '../client-pages/markets/markets-sidebar';
 import { useT } from '../lib/use-t';
@@ -36,10 +33,9 @@ import { CompetitionsTeams } from '../client-pages/competitions/competitions-tea
 import { CompetitionsTeam } from '../client-pages/competitions/competitions-team';
 import { CompetitionsCreateTeam } from '../client-pages/competitions/competitions-create-team';
 import { CompetitionsUpdateTeam } from '../client-pages/competitions/competitions-update-team';
-import { MarketsMobileSidebar } from '../client-pages/markets/mobile-buttons';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 
-// These must remain dynamically imported as pennant cannot be compiled by Next.js due to ESM
+// These must remain dynamically imported as pennant cannot be compiled by nextjs due to ESM
 // Using dynamic imports is a workaround for this until pennant is published as ESM
 const MarketPage = lazy(() => import('../client-pages/market'));
 const Portfolio = lazy(() => import('../client-pages/portfolio'));
@@ -58,17 +54,6 @@ export const useRouterConfig = (): RouteObject[] => {
   const { screenSize } = useScreenDimensions();
   const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
   const marketHeader = largeScreen ? <MarketHeader /> : <MobileMarketHeader />;
-  const marketsSidebar = largeScreen ? (
-    <MarketsSidebar />
-  ) : (
-    <MarketsMobileSidebar />
-  );
-  const portfolioSidebar = largeScreen ? (
-    <PortfolioSidebar />
-  ) : (
-    <PortfolioMobileSidebar />
-  );
-
   const routeConfig = compact([
     {
       index: true,
@@ -85,7 +70,7 @@ export const useRouterConfig = (): RouteObject[] => {
     featureFlags.REFERRALS
       ? {
           path: AppRoutes.REFERRALS,
-          element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
           children: [
             {
               element: (
@@ -118,7 +103,7 @@ export const useRouterConfig = (): RouteObject[] => {
     featureFlags.TEAM_COMPETITION
       ? {
           path: AppRoutes.COMPETITIONS,
-          element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+          element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
           children: [
             // pages with planets and stars
             {
@@ -149,7 +134,7 @@ export const useRouterConfig = (): RouteObject[] => {
       : undefined,
     {
       path: 'fees/*',
-      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
       children: [
         {
           index: true,
@@ -159,7 +144,7 @@ export const useRouterConfig = (): RouteObject[] => {
     },
     {
       path: 'rewards/*',
-      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
       children: [
         {
           index: true,
@@ -170,7 +155,7 @@ export const useRouterConfig = (): RouteObject[] => {
     {
       path: 'markets/*',
       element: (
-        <LayoutWithSidebar header={marketHeader} sidebar={marketsSidebar} />
+        <LayoutWithSidebar header={marketHeader} sidebar={<MarketsSidebar />} />
       ),
       children: [
         {
@@ -191,7 +176,7 @@ export const useRouterConfig = (): RouteObject[] => {
     },
     {
       path: 'portfolio/*',
-      element: <LayoutWithSidebar sidebar={portfolioSidebar} />,
+      element: <LayoutWithSidebar sidebar={<PortfolioSidebar />} />,
       children: [
         {
           index: true,

libs/i18n/src/locales/en/trading.json

@@ -446,9 +446,5 @@
   "Choose a team": "Choose a team",
   "Join a team": "Join a team",
   "Solo team / lone wolf": "Solo team / lone wolf",
-  "Choose a team to get involved": "Choose a team to get involved",
-  "Go back to the team's profile": "Go back to the team's profile",
-  "Go back to the competitions": "Go back to the competitions",
-  "Your team ID:": "Your team ID:",
-  "Changes successfully saved to your team.": "Changes successfully saved to your team."
+  "Choose a team to get involved": "Choose a team to get involved"
 }

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

@@ -38,7 +38,7 @@ export function Dialog({
   );
   const wrapperClasses = classNames(
     // Dimensions
-    'max-w-[95vw] sm:max-w-[90vw] p-4 md:p-8',
+    'w-screen sm:max-w-[90vw] p-4 md:p-8',
     // Need to apply background and text colors again as content is rendered in a portal
     'dark:bg-black bg-white dark:text-white',
     getIntentBorder(intent),

libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx

@@ -1,5 +1,4 @@
 import { VegaIcon, VegaIconNames } from '../icon';
-import { TradingButton } from '../trading-button';
 import {
   TradingDropdown,
   TradingDropdownContent,
@@ -16,16 +15,6 @@ export const ActionsDropdownTrigger = () => {
   );
 };
 
-export const MobileActionsDropdownTrigger = () => {
-  return (
-    <TradingDropdownTrigger data-testid="dropdown-menu">
-      <TradingButton size="medium">
-        <VegaIcon name={VegaIconNames.KEBAB} />
-      </TradingButton>
-    </TradingDropdownTrigger>
-  );
-};
-
 type ActionMenuContentProps = React.ComponentProps<
   typeof TradingDropdownContent
 >;
@@ -37,11 +26,3 @@ export const ActionsDropdown = (props: ActionMenuContentProps) => {
     </TradingDropdown>
   );
 };
-
-export const MobileActionsDropdown = (props: ActionMenuContentProps) => {
-  return (
-    <TradingDropdown trigger={<MobileActionsDropdownTrigger />}>
-      <TradingDropdownContent {...props} side="bottom" align="end" />
-    </TradingDropdown>
-  );
-};

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

@@ -1,2 +1,2 @@
-export * from './actions-dropdown';
 export * from './trading-dropdown';
+export * from './actions-dropdown';