chore(#1931): create single location for all external links (#1971)

* fix: #1826 fix vega docs links

* chore: #1931 create single location for docs links

* chore: #1931 token and wallet use react-helpers external links

* chore: #1931 rename links lib, delete unused links

* fix: #1931 environment links enforce url

* fix: #1931 fix staking-intro.spec.tsx

* fix: #1931 fix link on staking intro

* fix: don't use aliases for external links

* fix(#1931): restrict docsUrl type

* fix: fix withdrawals tests

* fix(#1931): fix staking and strading mode build

* chore: remove hardcoded docs urls and unnecessary type

* chore: remove stray DocsType link

* chore: add docs url to token e2e env

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

apps/token-e2e/.env

@@ -11,6 +11,7 @@ NX_ETH_URL_CONNECT=1
 NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit supply green clown session
 NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token-e2e/src/integration/view/staking.cy.js

@@ -37,7 +37,7 @@ context('Staking Page - verify elements on page', function () {
           .and(
             'have.attr',
             'href',
-            'https://docs.vega.xyz/docs/mainnet/concepts/vega-chain/#staking-on-vega'
+            'https://docs.vega.xyz/mainnet/concepts/vega-chain/#staking-on-vega'
           );
       });
     });

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

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

apps/token/src/config/index.ts

@@ -1,3 +1,2 @@
 export * from './flags';
-export * from './links';
 export * from './env';

apps/token/src/config/links.ts

@@ -1,16 +0,0 @@
-export const Links = {
-  WALLET_PAGE: 'https://vega.xyz/wallet',
-  SUSHI_PAIRS: 'https://analytics.sushi.com/pairs/',
-  SUSHI_ONSEN_MENU: 'https://app.sushi.com/farm',
-  SUSHI_ONSEN_WHAT_IS:
-    'https://docs.sushi.com/products/yield-farming/what-is-onsen',
-  SUSHI_ONSEN_FAQ: 'https://docs.sushi.com/faq-1/onsen-faq',
-  FEEDBACK: 'https://github.com/vegaprotocol/feedback/discussions',
-  GITHUB: 'https://github.com/vegaprotocol/token-frontend',
-  DISCORD: 'https://vega.xyz/discord',
-  STAKING_GUIDE:
-    'https://docs.vega.xyz/docs/mainnet/concepts/vega-chain/#staking-on-vega',
-  GOVERNANCE_PAGE: 'https://vega.xyz/governance',
-  PROPOSALS_GUIDE: 'https://docs.vega.xyz/docs/mainnet/tutorials/proposals',
-  VALIDATOR_FORUM: 'https://community.vega.xyz/c/mainnet-validator-candidates',
-};

apps/token/src/routes/governance/components/proposals-list/proposals-list.tsx

@@ -8,7 +8,7 @@ import Routes from '../../../routes';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { Link } from 'react-router-dom';
 import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
-import { Links } from '../../../../config';
+import { ExternalLinks } from '@vegaprotocol/react-helpers';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 
 interface ProposalsListProps {
@@ -68,7 +68,7 @@ export const ProposalsList = ({ proposals }: ProposalsListProps) => {
           )}{' '}
           <ExternalLink
             data-testid="proposal-documentation-link"
-            href={Links.GOVERNANCE_PAGE}
+            href={ExternalLinks.GOVERNANCE_PAGE}
             className="text-white"
           >
             {t(`Find out more about Vega governance`)}

apps/token/src/routes/home/index.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import { Heading } from '../../components/heading';
-import { Links } from '../../config';
+import { ExternalLinks } from '@vegaprotocol/react-helpers';
 import { useAppState } from '../../contexts/app-state/app-state-context';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import { BigNumber } from '../../lib/bignumber';
@@ -92,7 +92,7 @@ const Home = ({ name }: RouteChildProps) => {
         <p>
           <a
             data-testid="get-vega-wallet-link"
-            href={Links.WALLET_PAGE}
+            href={ExternalLinks.VEGA_WALLET_URL}
             className="underline text-white"
             target="_blank"
             rel="nofollow noreferrer"

apps/token/src/routes/staking/home/staking-intro.spec.tsx

@@ -2,6 +2,12 @@ import { render, screen } from '@testing-library/react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { StakingIntro } from './staking-intro';
 
+jest.mock('@vegaprotocol/environment', () => ({
+  useEnvironment: () => ({
+    VEGA_DOCS_URL: 'https://docs.vega.xyz',
+  }),
+}));
+
 describe('Staking', () => {
   it('should render the component', () => {
     render(

apps/token/src/routes/staking/home/staking-intro.tsx

@@ -6,10 +6,12 @@ import {
   Intent,
   Link as UTLink,
 } from '@vegaprotocol/ui-toolkit';
-import { Links } from '../../../config';
+import { createDocsLinks, ExternalLinks } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 export const StakingIntro = () => {
   const { t } = useTranslation();
+  const { VEGA_DOCS_URL } = useEnvironment();
 
   return (
     <section className="mb-8" data-testid="staking-intro">
@@ -32,7 +34,7 @@ export const StakingIntro = () => {
           <li>
             {t('stakingDescription2')}{' '}
             <UTLink
-              href={Links.VALIDATOR_FORUM}
+              href={ExternalLinks.VALIDATOR_FORUM}
               target="_blank"
               data-testid="validator-forum-link"
             >
@@ -42,14 +44,15 @@ export const StakingIntro = () => {
           <li>{t('stakingDescription3')}</li>
           <li>{t('stakingDescription4')}</li>
         </ol>
-
+        {VEGA_DOCS_URL && (
           <UTLink
-          href={Links.STAKING_GUIDE}
+            href={createDocsLinks(VEGA_DOCS_URL).STAKING_GUIDE}
             target="_blank"
             data-testid="staking-guide-link"
           >
             <Button>{t('readMoreStaking')}</Button>
           </UTLink>
+        )}
       </Callout>
     </section>
   );

libs/deal-ticket/src/components/trading-mode-tooltip/trading-mode-tooltip.tsx

@@ -1,10 +1,12 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { AuctionTrigger, MarketTradingMode } from '@vegaprotocol/types';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-
+import { createDocsLinks } from '@vegaprotocol/react-helpers';
 import { MarketDataGrid } from './market-data-grid';
 
 import type { ReactNode } from 'react';
+import { useEnvironment } from '@vegaprotocol/environment';
+
 type TradingModeTooltipProps = {
   tradingMode: MarketTradingMode | null;
   trigger: AuctionTrigger | null;
@@ -16,6 +18,7 @@ export const TradingModeTooltip = ({
   trigger,
   compiledGrid,
 }: TradingModeTooltipProps) => {
+  const { VEGA_DOCS_URL } = useEnvironment();
   switch (tradingMode) {
     case MarketTradingMode.TRADING_MODE_CONTINUOUS: {
       return (
@@ -35,9 +38,13 @@ export const TradingModeTooltip = ({
                 'This new market is in an opening auction to determine a fair mid-price before starting continuous trading.'
               )}
             </span>{' '}
-            <ExternalLink href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/trading-modes#auction-type-opening">
+            {VEGA_DOCS_URL && (
+              <ExternalLink
+                href={createDocsLinks(VEGA_DOCS_URL).AUCTION_TYPE_OPENING}
+              >
                 {t('Find out more')}
               </ExternalLink>
+            )}
           </p>
           {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
         </section>
@@ -54,9 +61,16 @@ export const TradingModeTooltip = ({
                     'This market is in auction until it reaches sufficient liquidity.'
                   )}
                 </span>{' '}
-                <ExternalLink href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/trading-modes#auction-type-liquidity-monitoring">
+                {VEGA_DOCS_URL && (
+                  <ExternalLink
+                    href={
+                      createDocsLinks(VEGA_DOCS_URL)
+                        .AUCTION_TYPE_LIQUIDITY_MONITORING
+                    }
+                  >
                     {t('Find out more')}
                   </ExternalLink>
+                )}
               </p>
               {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
             </section>
@@ -69,9 +83,16 @@ export const TradingModeTooltip = ({
                 <span>
                   {t('This market is in auction due to high price volatility.')}
                 </span>{' '}
-                <ExternalLink href="https://docs.vega.xyz/testnet/concepts/trading-on-vega/trading-modes#auction-type-price-monitoring">
+                {VEGA_DOCS_URL && (
+                  <ExternalLink
+                    href={
+                      createDocsLinks(VEGA_DOCS_URL)
+                        .AUCTION_TYPE_PRICE_MONITORING
+                    }
+                  >
                     {t('Find out more')}
                   </ExternalLink>
+                )}
               </p>
               {compiledGrid && <MarketDataGrid grid={compiledGrid} />}
             </section>

libs/market-info/src/components/market-info/tooltip-mapping.tsx

@@ -1,5 +1,5 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { ExternalLinks, t } from '@vegaprotocol/react-helpers';
-import { Link } from '@vegaprotocol/ui-toolkit';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import type { ReactNode } from 'react';
 
 export const tooltipMapping: Record<string, ReactNode> = {
@@ -65,24 +65,18 @@ export const tooltipMapping: Record<string, ReactNode> = {
   tau: (
     <span>
       {t('Projection horizon measured as a year fraction used in ')}
-      <Link
+      <ExternalLink href={ExternalLinks.MARGIN_CREDIT_RISK}>
-        href="https://vega.xyz/papers/margins-and-credit-risk.pdf#page=7"
-        target="__blank"
-      >
         {t('Expected Shortfall')}
-      </Link>
+      </ExternalLink>
       {t(' calculation when obtaining Risk Factor Long and Risk Factor Short')}
     </span>
   ),
   riskAversionParameter: (
     <span>
       {t('Probability level used in ')}
-      <Link
+      <ExternalLink href={ExternalLinks.MARGIN_CREDIT_RISK}>
-        href="https://vega.xyz/papers/margins-and-credit-risk.pdf#page=7"
-        target="__blank"
-      >
         {t('Expected Shortfall')}
-      </Link>
+      </ExternalLink>
       {t(' calculation when obtaining Risk Factor Long and Risk Factor Short')}
     </span>
   ),

libs/react-helpers/src/index.ts

@@ -11,4 +11,5 @@ export * from './lib/remove-0x';
 export * from './lib/storage';
 export * from './lib/time';
 export * from './lib/validate';
+export * from './lib/links';
 export * from './lib/__generated__/ChainId';

libs/react-helpers/src/lib/index.ts

@@ -3,7 +3,6 @@ export * from './format';
 export * from './grid';
 export * from './storage';
 export * from './validate';
-export * from './assets';
 export * from './generic-data-provider';
 export * from './get-nodes';
 export * from './get-events';
@@ -11,3 +10,4 @@ export * from './i18n';
 export * from './pagination';
 export * from './remove-0x';
 export * from './time';
+export * from './links';

libs/react-helpers/src/lib/links/index.ts

@@ -0,0 +1 @@
+export * from './links';

libs/react-helpers/src/lib/links/links.ts

@@ -0,0 +1,25 @@
+/** createDocsLinks returns external documentation links that are specific to an environment
+ * @param {string} docsUrl - the documentation URL for the environment ex. https://docs.vega.xyz/testnet or https://docs.vega.xyz/mainnet (NX_VEGA_DOCS_URL)
+ */
+
+export const createDocsLinks = (docsUrl: string) => ({
+  AUCTION_TYPE_OPENING: `${docsUrl}/concepts/trading-on-vega/trading-modes#auction-type-opening`,
+  AUCTION_TYPE_LIQUIDITY_MONITORING: `${docsUrl}/concepts/trading-on-vega/trading-modes#auction-type-liquidity-monitoring`,
+  AUCTION_TYPE_PRICE_MONITORING: `${docsUrl}/concepts/trading-on-vega/trading-modes#auction-type-price-monitoring`,
+  AUCTION_TYPE_CLOSING: `${docsUrl}/concepts/trading-on-vega/trading-modes#auction-type-closing`,
+  STAKING_GUIDE: `${docsUrl}/concepts/vega-chain/#staking-on-vega`,
+  VEGA_WALLET_CONCEPTS_URL: `${docsUrl}/concepts/vega-wallet`,
+});
+
+export const ExternalLinks = {
+  FEEDBACK: 'https://github.com/vegaprotocol/feedback/discussions',
+  GITHUB: 'https://github.com/vegaprotocol/token-frontend',
+  DISCORD: 'https://vega.xyz/discord',
+  GOVERNANCE_PAGE: 'https://vega.xyz/governance',
+  PROPOSALS_GUIDE: 'https://docs.vega.xyz/docs/mainnet/tutorials/proposals',
+  VALIDATOR_FORUM: 'https://community.vega.xyz/c/mainnet-validator-candidates',
+  MARGIN_CREDIT_RISK:
+    'https://vega.xyz/papers/margins-and-credit-risk.pdf#page=7',
+  VEGA_WALLET_URL: 'https://vega.xyz/wallet',
+  VEGA_WALLET_HOSTED_URL: 'https://vega-hosted-wallet.on.fleek.co/',
+};

libs/wallet/src/connect-dialog/connect-dialog-elements.tsx

@@ -1,7 +1,7 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { createDocsLinks, ExternalLinks, t } from '@vegaprotocol/react-helpers';
 import { Link } from '@vegaprotocol/ui-toolkit';
 import type { ReactNode } from 'react';
-import { VEGA_WALLET_CONCEPTS_URL, VEGA_WALLET_URL } from '../constants';
 
 export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
   return (
@@ -19,15 +19,24 @@ export const ConnectDialogContent = ({ children }: { children: ReactNode }) => {
 };
 
 export const ConnectDialogFooter = ({ children }: { children?: ReactNode }) => {
+  const { VEGA_DOCS_URL } = useEnvironment();
   return (
     <footer className="flex justify-center gap-4 px-4 md:px-8 pt-4 md:pt-6 -mx-4 md:-mx-8 border-t border-neutral-500 text-neutral-500 dark:text-neutral-400">
       {children ? (
         children
       ) : (
         <>
-          <Link href={VEGA_WALLET_URL}>{t('Get a Vega Wallet')}</Link>
+          <Link href={ExternalLinks.VEGA_WALLET_URL}>
+            {t('Get a Vega Wallet')}
+          </Link>
           {' | '}
-          <Link href={VEGA_WALLET_CONCEPTS_URL}>{t('Having trouble?')}</Link>
+          {VEGA_DOCS_URL && (
+            <Link
+              href={createDocsLinks(VEGA_DOCS_URL).VEGA_WALLET_CONCEPTS_URL}
+            >
+              {t('Having trouble?')}
+            </Link>
+          )}
         </>
       )}
     </footer>

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -9,7 +9,7 @@ import {
   Loader,
 } from '@vegaprotocol/ui-toolkit';
 import { useCallback, useState } from 'react';
-import { t, useChainIdQuery } from '@vegaprotocol/react-helpers';
+import { ExternalLinks, t, useChainIdQuery } from '@vegaprotocol/react-helpers';
 import type { VegaConnector, WalletError } from '../connectors';
 import { JsonRpcConnector, RestConnector } from '../connectors';
 import { RestConnectorForm } from './rest-connector-form';
@@ -22,7 +22,6 @@ import {
 } from './connect-dialog-elements';
 import type { Status } from '../use-json-rpc-connect';
 import { useJsonRpcConnect } from '../use-json-rpc-connect';
-import * as constants from '../constants';
 
 export const CLOSE_DELAY = 1700;
 type Connectors = { [key: string]: VegaConnector };
@@ -265,14 +264,14 @@ const SelectedForm = ({
             <p className="text-center">
               {t('For demo purposes get a ')}
               <Link
-                href={constants.VEGA_WALLET_HOSTED_URL}
+                href={ExternalLinks.VEGA_WALLET_HOSTED_URL}
                 target="_blank"
                 rel="noreferrer"
               >
                 {t('hosted wallet')}
               </Link>
               {t(', or for the real experience create a wallet in the ')}
-              <Link href={constants.VEGA_WALLET_URL}>
+              <Link href={ExternalLinks.VEGA_WALLET_URL}>
                 {t('Vega wallet app')}
               </Link>
             </p>

libs/wallet/src/connect-dialog/json-rpc-connector-form.tsx

@@ -1,5 +1,5 @@
 import capitalize from 'lodash/capitalize';
-import { t } from '@vegaprotocol/react-helpers';
+import { createDocsLinks, t } from '@vegaprotocol/react-helpers';
 import {
   ButtonLink,
   Cross,
@@ -14,7 +14,7 @@ import { ClientErrors } from '../connectors';
 import type { WalletError } from '../connectors';
 import { ConnectDialogTitle } from './connect-dialog-elements';
 import { Status } from '../use-json-rpc-connect';
-import { VEGA_WALLET_CONCEPTS_URL } from '../constants';
+import { useEnvironment } from '@vegaprotocol/environment';
 
 export const ServiceErrors = {
   NO_HEALTHY_NODE: 1000,
@@ -169,6 +169,7 @@ const Error = ({
       <ButtonLink onClick={onTryAgain}>{t('Try again')}</ButtonLink>
     </p>
   );
+  const { VEGA_DOCS_URL } = useEnvironment();
 
   if (error) {
     if (error.code === ClientErrors.NO_SERVICE.code) {
@@ -186,9 +187,13 @@ const Error = ({
         <>
           {capitalize(error.data)}
           {'. '}
-          <Link href={VEGA_WALLET_CONCEPTS_URL}>
+          {VEGA_DOCS_URL && (
+            <Link
+              href={createDocsLinks(VEGA_DOCS_URL).VEGA_WALLET_CONCEPTS_URL}
+            >
               {t('Read the docs to troubleshoot')}
             </Link>
+          )}
         </>
       );
     } else if (error.code === ServiceErrors.REQUEST_PROCESSING) {

libs/wallet/src/constants.ts

@@ -1,4 +0,0 @@
-export const VEGA_WALLET_URL = 'https://vega.xyz/wallet';
-export const VEGA_WALLET_CONCEPTS_URL =
-  'https://docs.vega.xyz/docs/mainnet/concepts/vega-wallet';
-export const VEGA_WALLET_HOSTED_URL = 'https://vega-hosted-wallet.on.fleek.co/';

libs/wallet/src/index.ts

@@ -9,5 +9,4 @@ export * from './vega-transaction-dialog';
 export * from './provider';
 export * from './connect-dialog';
 export * from './utils';
-export * from './constants';
 export * from './__generated__/TransactionResult';

libs/withdraws/src/lib/withdraw-limits.tsx

@@ -47,7 +47,7 @@ export const WithdrawLimits = ({
   return (
     <KeyValueTable>
       {limits.map(({ key, label, rawValue, value }) => (
-        <KeyValueTableRow>
+        <KeyValueTableRow key={key}>
           <div data-testid={`${key}_label`}>{label}</div>
           <div
             data-testid={`${key}_value`}