feat(governance): view as button

apps/explorer/src/app/components/footer/footer.tsx

@@ -23,7 +23,7 @@ export const Footer = () => {
   );
 
   return (
-    <footer className="grid grid-rows-2 lg:grid-cols-[1fr_auto] text-xs md:text-md lg:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
+    <footer className="grid grid-cols-[1fr_auto] items-center text-xs md:text-md lg:flex md:col-span-2 px-4 pt-2 pb-3 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
       <div className="flex justify-between gap-2 align-middle">
         {GIT_COMMIT_HASH && (
           <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
@@ -43,9 +43,12 @@ export const Footer = () => {
           </div>
         )}
 
-        <div className="content-center flex pl-2 md:border-r border-neutral-700 dark:border-neutral-300 pr-4">
-          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
-          <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
+        <div className="content-center flex pr-4 md:border-r border-neutral-700 dark:border-neutral-300">
+          <span className="pr-2">{VEGA_URL && <NodeUrl url={VEGA_URL} />}</span>
+          <Link
+            className="ml-2 underline-offset-4"
+            onClick={() => setNodeSwitcherOpen(true)}
+          >
             {t('Change')}
           </Link>
         </div>
@@ -59,7 +62,10 @@ export const Footer = () => {
         ) : null}
       </div>
       <div className="pl-2 align-center lg:align-right lg:flex lg:justify-end gap-2 align-middle lg:max-w-xs lg:ml-auto">
-        <RouteLink to={`/${Routes.DISCLAIMER}`} className="underline">
+        <RouteLink
+          to={`/${Routes.DISCLAIMER}`}
+          className="underline underline-offset-4"
+        >
           Disclaimer
         </RouteLink>
       </div>

apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx

@@ -1,4 +1,8 @@
-import { VegaConnectDialog, VegaManageDialog } from '@vegaprotocol/wallet';
+import {
+  VegaConnectDialog,
+  VegaManageDialog,
+  ViewAsDialog,
+} from '@vegaprotocol/wallet';
 import {
   AppStateActionType,
   useAppState,
@@ -25,6 +29,8 @@ export const VegaWalletDialogs = () => {
           })
         }
       />
+
+      <ViewAsDialog connector={Connectors.view} />
     </>
   );
 };

apps/governance/src/components/vega-wallet/download-wallet-prompt.tsx

@@ -1,17 +0,0 @@
-import { Link } from '@vegaprotocol/ui-toolkit';
-import { useTranslation } from 'react-i18next';
-import { ExternalLinks } from '@vegaprotocol/environment';
-
-export const DownloadWalletPrompt = () => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <h3 className="mt-4 mb-2">{t('getWallet')}</h3>
-      <p>
-        <Link className="text-neutral-500" href={ExternalLinks.VEGA_WALLET_URL}>
-          {t('getWalletLink')}
-        </Link>
-      </p>
-    </>
-  );
-};

apps/governance/src/components/vega-wallet/vega-wallet-prompt.tsx

@@ -0,0 +1,25 @@
+import { ButtonLink, Link } from '@vegaprotocol/ui-toolkit';
+import { useTranslation } from 'react-i18next';
+import { ExternalLinks } from '@vegaprotocol/environment';
+import { useViewAsDialog } from '@vegaprotocol/wallet';
+
+export const VegaWalletPrompt = () => {
+  const { t } = useTranslation();
+  const setViewAsDialog = useViewAsDialog((state) => state.setOpen);
+  return (
+    <>
+      <h3 className="mt-4 mb-2">{t('getWallet')}</h3>
+      <div className="flex flex-row gap-4">
+        <Link className="text-neutral-500" href={ExternalLinks.VEGA_WALLET_URL}>
+          {t('getWalletLink')}
+        </Link>
+        <ButtonLink
+          className="text-neutral-500"
+          onClick={() => setViewAsDialog(true)}
+        >
+          {t('viewAsParty')}
+        </ButtonLink>
+      </div>
+    </>
+  );
+};

apps/governance/src/components/vega-wallet/vega-wallet.tsx

@@ -20,7 +20,7 @@ import {
   WalletCardHeader,
   WalletCardRow,
 } from '../wallet-card';
-import { DownloadWalletPrompt } from './download-wallet-prompt';
+import { VegaWalletPrompt } from './vega-wallet-prompt';
 import { usePollForDelegations } from './hooks';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Button, ButtonLink } from '@vegaprotocol/ui-toolkit';
@@ -85,7 +85,7 @@ const VegaWalletNotConnected = () => {
       >
         {t('connectVegaWalletToUseAssociated')}
       </Button>
-      <DownloadWalletPrompt />
+      <VegaWalletPrompt />
     </>
   );
 };

apps/governance/src/i18n/translations/dev.json

@@ -855,5 +855,6 @@
   "Estimated time to upgrade": "Estimated time to upgrade",
   "Upgraded at": "Upgraded at",
   "dataIsIdentical": "Data is identical",
-  "updatesToMarket": "Updates to market"
+  "updatesToMarket": "Updates to market",
+  "viewAsParty": "View as party"
 }

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

@@ -0,0 +1,31 @@
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { GetStarted } from './get-started';
+import { render, screen } from '@testing-library/react';
+
+describe('GetStarted', () => {
+  const renderComponent = (context: Partial<VegaWalletContextShape> = {}) => {
+    return render(
+      <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
+        <GetStarted />
+      </VegaWalletContext.Provider>
+    );
+  };
+
+  it('renders full get started content if not connected and no browser wallet detected', () => {
+    renderComponent();
+    expect(screen.getByTestId('get-started-banner')).toBeInTheDocument();
+  });
+
+  it('renders connect prompt if no pubKey but wallet installed', () => {
+    globalThis.window.vega = {} as Vega;
+    renderComponent();
+    expect(screen.getByTestId('order-connect-wallet')).toBeInTheDocument();
+    globalThis.window.vega = undefined as unknown as Vega;
+  });
+
+  it('renders nothing if connected', () => {
+    const { container } = renderComponent({ pubKey: 'my-pubkey' });
+    expect(container).toBeEmptyDOMElement();
+  });
+});

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

@@ -16,7 +16,6 @@ interface Props {
 
 export const GetStarted = ({ lead }: Props) => {
   const { pubKey } = useVegaWallet();
-
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
   const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
 
@@ -40,7 +39,7 @@ export const GetStarted = ({ lead }: Props) => {
     { 'mt-8': !lead }
   );
 
-  if (!isBrowserWalletInstalled()) {
+  if (!pubKey && !isBrowserWalletInstalled()) {
     return (
       <div className={wrapperClasses} data-testid="get-started-banner">
         {lead && <h2>{lead}</h2>}

libs/markets/src/lib/SuccessorMarket.graphql

@@ -34,5 +34,8 @@ query SuccessorMarket($marketId: ID!) {
         code
       }
     }
+    proposal {
+      id
+    }
   }
 }

libs/markets/src/lib/__generated__/SuccessorMarket.ts

@@ -27,7 +27,7 @@ export type SuccessorMarketQueryVariables = Types.Exact<{
 }>;
 
 
-export type SuccessorMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, state: Types.MarketState, tradingMode: Types.MarketTradingMode, positionDecimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } } } | null };
+export type SuccessorMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, state: Types.MarketState, tradingMode: Types.MarketTradingMode, positionDecimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null } | null };
 
 
 export const SuccessorMarketIdDocument = gql`
@@ -153,6 +153,9 @@ export const SuccessorMarketDocument = gql`
         code
       }
     }
+    proposal {
+      id
+    }
   }
 }
     `;

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

@@ -1,4 +1,8 @@
-import { TokenStaticLinks, useEnvironment } from '@vegaprotocol/environment';
+import {
+  FLAGS,
+  TokenStaticLinks,
+  useEnvironment,
+} from '@vegaprotocol/environment';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@@ -34,6 +38,7 @@ import {
   RiskModelInfoPanel,
   RiskParametersInfoPanel,
   SettlementAssetInfoPanel,
+  SuccessionLineInfoPanel,
 } from './market-info-panels';
 import type { DataSourceDefinition } from '@vegaprotocol/types';
 import isEqual from 'lodash/isEqual';
@@ -291,6 +296,13 @@ export const MarketInfoAccordion = ({
                 </>
               }
             />
+            {FLAGS.SUCCESSOR_MARKETS && (
+              <AccordionItem
+                itemId="succession-line"
+                title={t('Succession line')}
+                content={<SuccessionLineInfoPanel market={market} />}
+              />
+            )}
           </Accordion>
         </div>
       )}

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

@@ -1,9 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import {
   ConditionOperator,
   ConditionOperatorMapping,
 } from '@vegaprotocol/types';
-import { DataSourceProof } from './market-info-panels';
+import { DataSourceProof, SuccessionLineInfoPanel } from './market-info-panels';
+import { MockedProvider } from '@apollo/react-testing';
+import { SuccessorMarketIdsDocument } from '../../__generated__';
 
 jest.mock('../../hooks/use-oracle-markets', () => ({
   useOracleMarkets: () => [],
@@ -137,3 +139,93 @@ describe('DataSourceProof', () => {
     ).toBeInTheDocument();
   });
 });
+
+describe('SuccessionLineInfoPanel', () => {
+  const mocks = [
+    {
+      request: {
+        query: SuccessorMarketIdsDocument,
+      },
+      result: {
+        data: {
+          __typename: 'Query',
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'abc',
+                  successorMarketID: 'def',
+                  parentMarketID: null,
+                },
+              },
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'def',
+                  successorMarketID: 'ghi',
+                  parentMarketID: 'abc',
+                },
+              },
+              {
+                __typename: 'MarketEdge',
+                node: {
+                  __typename: 'Market',
+                  id: 'ghi',
+                  successorMarketID: null,
+                  parentMarketID: 'def',
+                },
+              },
+            ],
+          },
+        },
+      },
+    },
+  ];
+
+  it.each([
+    ['abc', 1],
+    ['def', 2],
+    ['ghi', 3],
+  ])(
+    'renders succession line for %s (current position %d)',
+    async (id, number) => {
+      render(
+        <MockedProvider mocks={mocks}>
+          <SuccessionLineInfoPanel
+            market={{
+              id,
+            }}
+          />
+        </MockedProvider>
+      );
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('succession-line-item');
+        expect(items.length).toBe(3);
+        expect(
+          items[0].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('abc');
+        expect(
+          items[1].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('def');
+        expect(
+          items[2].querySelector(
+            '[data-testid="succession-line-item-market-id"]'
+          )?.textContent
+        ).toBe('ghi');
+
+        expect(
+          items[number - 1].querySelector('[data-testid="icon-bullet"]')
+        ).toBeInTheDocument();
+      });
+    }
+  );
+});

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

@@ -1,11 +1,17 @@
 import type { ReactNode } from 'react';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useMemo } 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, Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  ExternalLink,
+  Splash,
+  Tooltip,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import {
   addDecimalsFormatNumber,
   formatNumber,
@@ -23,14 +29,26 @@ import BigNumber from 'bignumber.js';
 import type { DataSourceDefinition, SignerKind } from '@vegaprotocol/types';
 import { ConditionOperatorMapping } from '@vegaprotocol/types';
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
-import { FLAGS, useEnvironment } from '@vegaprotocol/environment';
+import {
+  DApp,
+  FLAGS,
+  TOKEN_PROPOSAL,
+  useEnvironment,
+  useLinks,
+} from '@vegaprotocol/environment';
 import type { Provider } from '../../oracle-schema';
 import { OracleBasicProfile } from '../../components/oracle-basic-profile';
 import { useOracleProofs } from '../../hooks';
 import { OracleDialog } from '../oracle-dialog/oracle-dialog';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { useParentMarketIdQuery } from '../../__generated__';
+import {
+  useParentMarketIdQuery,
+  useSuccessorMarketIdsQuery,
+  useSuccessorMarketQuery,
+} from '../../__generated__';
 import { useSuccessorMarketProposalDetailsQuery } from '@vegaprotocol/proposals';
+import classNames from 'classnames';
+import compact from 'lodash/compact';
 
 type MarketInfoProps = {
   market: MarketInfo;
@@ -191,6 +209,126 @@ export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
   );
 };
 
+const SuccessionLineItem = ({
+  marketId,
+  isCurrent,
+}: {
+  marketId: string;
+  isCurrent?: boolean;
+}) => {
+  const { data } = useSuccessorMarketQuery({
+    variables: {
+      marketId,
+    },
+  });
+
+  const marketData = data?.market;
+  const governanceLink = useLinks(DApp.Token);
+  const proposalLink = marketData?.proposal?.id
+    ? governanceLink(TOKEN_PROPOSAL.replace(':id', marketData?.proposal?.id))
+    : undefined;
+
+  return (
+    <div
+      data-testid="succession-line-item"
+      className={classNames(
+        'rounded p-2 bg-vega-clight-700 dark:bg-vega-cdark-700',
+        'font-alpha',
+        'flex flex-col '
+      )}
+    >
+      <div className="flex justify-between">
+        <div>
+          {marketData ? (
+            proposalLink ? (
+              <ExternalLink href={proposalLink}>
+                {marketData.tradableInstrument.instrument.code}
+              </ExternalLink>
+            ) : (
+              marketData.tradableInstrument.instrument.code
+            )
+          ) : (
+            <span className="block w-20 h-4 mb-1 bg-vega-clight-500 dark:bg-vega-cdark-500 animate-pulse"></span>
+          )}
+        </div>
+        {isCurrent && (
+          <Tooltip description={t('This market')}>
+            <div className="text-vega-clight-200 dark:text-vega-cdark-200 cursor-help">
+              <VegaIcon name={VegaIconNames.BULLET} size={16} />
+            </div>
+          </Tooltip>
+        )}
+      </div>
+      <div className="text-xs">
+        {marketData ? (
+          marketData.tradableInstrument.instrument.name
+        ) : (
+          <span className="block w-28 h-4 bg-vega-clight-500 dark:bg-vega-cdark-500 animate-pulse"></span>
+        )}
+      </div>
+      <div
+        data-testid="succession-line-item-market-id"
+        className="text-xs truncate mt-1"
+      >
+        {marketId}
+      </div>
+    </div>
+  );
+};
+
+const SuccessionLink = () => (
+  <div className="text-center leading-none" aria-hidden>
+    <VegaIcon name={VegaIconNames.ARROW_DOWN} size={12} />
+  </div>
+);
+
+const buildSuccessionLine = (
+  all: {
+    id: string;
+    successorMarketID?: string | null | undefined;
+    parentMarketID?: string | null | undefined;
+  }[],
+  id: string
+) => {
+  let line = [id];
+  const find = (id: string, dir?: 'up' | 'down') => {
+    const item = all.find((a) => a.id === id);
+    const anc = dir === 'up' && item?.parentMarketID;
+    const des = dir === 'down' && item?.successorMarketID;
+    if (anc) {
+      line = [anc, ...line];
+      find(anc, 'up');
+    }
+    if (des) {
+      line = [...line, des];
+      find(des, 'down');
+    }
+  };
+  find(id, 'up');
+  find(id, 'down');
+  return line;
+};
+export const SuccessionLineInfoPanel = ({
+  market,
+}: {
+  market: Pick<MarketInfo, 'id'>;
+}) => {
+  const { data } = useSuccessorMarketIdsQuery();
+  const ids = compact(data?.marketsConnection?.edges.map((e) => e.node));
+  const line = buildSuccessionLine(ids, market.id);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {line.map((id, i) => (
+        <Fragment key={i}>
+          {i > 0 && <SuccessionLink />}
+          <SuccessionLineItem marketId={id} isCurrent={id === market.id} />
+        </Fragment>
+      ))}
+    </div>
+  );
+};
+
 export const InstrumentInfoPanel = ({ market }: MarketInfoProps) => (
   <MarketInfoTable
     data={{

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

@@ -136,15 +136,12 @@ export const AnchorButton = forwardRef<HTMLAnchorElement, AnchorButtonProps>(
   }
 );
 
-type ButtonLinkProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'className' | 'style'
->;
+type ButtonLinkProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'style'>;
 
 export const ButtonLink = forwardRef<HTMLButtonElement, ButtonLinkProps>(
-  ({ type = 'button', ...props }, ref) => {
-    const className = classnames('inline underline');
-    return <button ref={ref} className={className} type={type} {...props} />;
+  ({ type = 'button', className, ...props }, ref) => {
+    const style = classnames('inline underline', className);
+    return <button ref={ref} className={style} type={type} {...props} />;
   }
 );