feat: propose network parameter change link (578) (#2174)

* feat: propose network parameter change link (578)

* changeg stagnet3 url in trading e2e

apps/trading-e2e/src/integration/markets.cy.ts

@@ -93,7 +93,7 @@ describe('markets table', { tags: '@smoke' }, () => {
       .and(
         'have.attr',
         'href',
-        'https://token.fairground.wtf/governance/propose/new-market'
+        'https://stagnet3.token.vega.xyz/governance/propose/new-market'
       );
   });
 });

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

@@ -1,17 +1,15 @@
 import { t } from '@vegaprotocol/react-helpers';
-import { useEnvironment } from '@vegaprotocol/environment';
+import {
+  DApp,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  useLinks,
+} from '@vegaprotocol/environment';
 import { ProposalsList } from '@vegaprotocol/governance';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import {
-  NEW_PROPOSAL_LINK,
-  TOKEN_DEFAULT_DOMAIN,
-} from '../../components/constants';
 
 export const Proposed = () => {
-  const { VEGA_TOKEN_URL } = useEnvironment();
-  const externalLink = `${
-    VEGA_TOKEN_URL || TOKEN_DEFAULT_DOMAIN
-  }${NEW_PROPOSAL_LINK}`;
+  const tokenLink = useLinks(DApp.Token);
+  const externalLink = tokenLink(TOKEN_NEW_MARKET_PROPOSAL);
   return (
     <>
       <ProposalsList />

apps/trading/components/constants.ts

@@ -1,7 +1,2 @@
 export const DEBOUNCE_UPDATE_TIME = 500;
 export const EMPTY_MARKET_ID = 'empty';
-
-// Token dApp
-export const TOKEN_DEFAULT_DOMAIN = 'https://token.fairground.wtf';
-export const GOVERNANCE_LINK = '/governance';
-export const NEW_PROPOSAL_LINK = '/governance/propose/new-market';

apps/trading/components/select-market/select-market.tsx

@@ -33,8 +33,11 @@ import type {
 import type { PositionFieldsFragment } from '@vegaprotocol/positions';
 import type { Column, OnCellClickHandler } from './select-market-columns';
 import { Link } from 'react-router-dom';
-import { useLinks } from '../../lib/use-links';
-import { NEW_PROPOSAL_LINK } from '../constants';
+import {
+  DApp,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  useLinks,
+} from '@vegaprotocol/environment';
 
 type Market = MarketWithCandles & MarketWithData;
 
@@ -95,7 +98,7 @@ export const SelectAllMarketsTableBody = ({
   headers?: Column[];
   tableColumns?: (market: Market, openVolume?: string) => Column[];
 }) => {
-  const tokenLink = useLinks('token');
+  const tokenLink = useLinks(DApp.Token);
   if (!markets) return null;
   return (
     <>
@@ -121,7 +124,7 @@ export const SelectAllMarketsTableBody = ({
         ) : (
           <SelectMarketTableRowSplash colSpan={12}>
             {t('No markets ')}
-            <ExternalLink href={tokenLink(NEW_PROPOSAL_LINK)}>
+            <ExternalLink href={tokenLink(TOKEN_NEW_MARKET_PROPOSAL)}>
               {t('Propose a new market')}
             </ExternalLink>
           </SelectMarketTableRowSplash>

apps/trading/components/welcome-notice/welcome-notice-dialog.tsx

@@ -5,9 +5,16 @@ import { t, useDataProvider } from '@vegaprotocol/react-helpers';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useGlobalStore } from '../../stores';
 import take from 'lodash/take';
-import { useLinks } from '../../lib/use-links';
-import { GOVERNANCE_LINK, NEW_PROPOSAL_LINK } from '../constants';
 import { activeMarketsProvider } from '@vegaprotocol/market-list';
+import {
+  BLOG,
+  DApp,
+  Networks,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  TOKEN_PROPOSAL,
+  TOKEN_PROPOSALS,
+  useLinks,
+} from '@vegaprotocol/environment';
 
 export const WelcomeNoticeDialog = () => {
   const [welcomeNoticeDialog, update] = useGlobalStore((store) => [
@@ -50,8 +57,8 @@ export const WelcomeNoticeDialog = () => {
       proposal.terms.change.instrument.code,
   }));
 
-  const tokenLink = useLinks('token');
-  const consoleFairgroundLink = useLinks('console-fairground');
+  const tokenLink = useLinks(DApp.Token);
+  const consoleFairgroundLink = useLinks(DApp.Console, Networks.TESTNET);
 
   const proposedMarkets = useMemo(
     () =>
@@ -65,14 +72,16 @@ export const WelcomeNoticeDialog = () => {
               <div className="pt-1 flex justify-between" key={i}>
                 <dl>{displayName}</dl>
                 <dt>
-                  <ExternalLink href={tokenLink(`${GOVERNANCE_LINK}/${id}`)}>
+                  <ExternalLink
+                    href={tokenLink(TOKEN_PROPOSAL.replace(':id', id || ''))}
+                  >
                     {t('View or vote')}
                   </ExternalLink>
                 </dt>
               </div>
             ))}
           </dl>
-          <ExternalLink href={tokenLink(GOVERNANCE_LINK)}>
+          <ExternalLink href={tokenLink(TOKEN_PROPOSALS)}>
             {t('View all proposed markets')}
           </ExternalLink>
         </div>
@@ -101,17 +110,20 @@ export const WelcomeNoticeDialog = () => {
           {t(' on Fairground, our Testnet')}
         </li>
         <li>
-          <ExternalLink target="_blank" href={tokenLink(GOVERNANCE_LINK)}>
+          <ExternalLink target="_blank" href={tokenLink(TOKEN_PROPOSALS)}>
             {t('View and vote for proposed markets')}
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink target="_blank" href={tokenLink(NEW_PROPOSAL_LINK)}>
+          <ExternalLink
+            target="_blank"
+            href={tokenLink(TOKEN_NEW_MARKET_PROPOSAL)}
+          >
             {t('Propose your own markets')}
           </ExternalLink>
         </li>
         <li>
-          <ExternalLink target="_blank" href={tokenLink()}>
+          <ExternalLink target="_blank" href={BLOG}>
             {t('Read about the mainnet launch')}
           </ExternalLink>
         </li>

apps/trading/lib/use-links.ts

@@ -1,24 +0,0 @@
-import trim from 'lodash/trim';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { useCallback } from 'react';
-
-type DApp = 'console' | 'console-fairground' | 'token' | 'explorer';
-export const useLinks = (dapp: DApp) => {
-  const { VEGA_ENV, VEGA_NETWORKS, VEGA_TOKEN_URL, VEGA_EXPLORER_URL } =
-    useEnvironment();
-
-  const urls: { [k in DApp]: string } = {
-    console: (VEGA_NETWORKS && VEGA_NETWORKS[VEGA_ENV]) || '',
-    'console-fairground':
-      (VEGA_NETWORKS && VEGA_NETWORKS[Networks.TESTNET]) || '',
-    token: VEGA_TOKEN_URL || '',
-    explorer: VEGA_EXPLORER_URL || '',
-  };
-  const baseUrl = trim(urls[dapp], '/');
-
-  const link = useCallback(
-    (url?: string) => `${baseUrl}/${trim(url, '/') || ''}`,
-    [baseUrl]
-  );
-  return link;
-};

libs/environment/src/components/network-switcher/network-switcher.tsx

@@ -6,9 +6,11 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
+  ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '../../hooks/use-environment';
 import { Networks } from '../../types';
+import { DApp, TOKEN_NEW_NETWORK_PARAM_PROPOSAL, useLinks } from '../../hooks';
 
 export const envNameMapping: Record<Networks, string> = {
   [Networks.CUSTOM]: t('Custom'),
@@ -74,6 +76,7 @@ const NetworkLabel = ({
 
 export const NetworkSwitcher = () => {
   const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
+  const tokenLink = useLinks(DApp.Token);
   const [isOpen, setOpen] = useState(false);
   const [isAdvancedView, setAdvancedView] = useState(false);
 
@@ -137,6 +140,14 @@ export const NetworkSwitcher = () => {
             ))}
           </>
         )}
+        <div
+          className="relative flex items-center justify-between mx-2 py-2 border-t border-neutral-400 pt-2 text-sm"
+          key="propose-network-param"
+        >
+          <ExternalLink href={tokenLink(TOKEN_NEW_NETWORK_PARAM_PROPOSAL)}>
+            {t('Propose a network parameter change')}
+          </ExternalLink>
+        </div>
       </DropdownMenuContent>
     </DropdownMenu>
   );

libs/environment/src/hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-environment';
+export * from './use-links';

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

@@ -0,0 +1,84 @@
+import trim from 'lodash/trim';
+import { useCallback } from 'react';
+import { Networks } from '../types';
+import { useEnvironment } from './use-environment';
+
+type Net = Exclude<Networks, 'CUSTOM' | 'SANDBOX'>;
+export enum DApp {
+  Explorer = 'Explorer',
+  Console = 'Console',
+  Token = 'Token',
+}
+
+type DAppLinks = {
+  [k in Net]: string;
+};
+
+const EmptyLinks: DAppLinks = {
+  [Networks.DEVNET]: '',
+  [Networks.STAGNET1]: '',
+  [Networks.STAGNET3]: '',
+  [Networks.TESTNET]: '',
+  [Networks.MAINNET]: '',
+};
+
+const ExplorerLinks = {
+  ...EmptyLinks,
+  [Networks.TESTNET]: 'https://explorer.fairground.wtf',
+  [Networks.MAINNET]: 'https://explorer.vega.xyz',
+};
+
+const ConsoleLinks = {
+  ...EmptyLinks,
+  [Networks.STAGNET1]: 'https://stagnet1.console.vega.xyz',
+  [Networks.STAGNET3]: 'https://stagnet3.console.vega.xyz',
+  [Networks.TESTNET]: 'https://console.fairground.wtf',
+};
+
+const TokenLinks = {
+  ...EmptyLinks,
+  [Networks.DEVNET]: 'https://dev.token.vega.xyz',
+  [Networks.STAGNET3]: 'https://stagnet3.token.vega.xyz',
+  [Networks.TESTNET]: 'https://token.fairground.wtf',
+  [Networks.MAINNET]: 'https://token.vega.xyz',
+};
+
+const Links: { [k in DApp]: DAppLinks } = {
+  [DApp.Explorer]: ExplorerLinks,
+  [DApp.Console]: ConsoleLinks,
+  [DApp.Token]: TokenLinks,
+};
+
+export const useLinks = (dapp: DApp, network?: Net) => {
+  const { VEGA_ENV, VEGA_EXPLORER_URL, VEGA_TOKEN_URL } = useEnvironment();
+  const fallback = {
+    [DApp.Explorer]: VEGA_EXPLORER_URL,
+    [DApp.Token]: VEGA_TOKEN_URL,
+  };
+
+  let net = network || VEGA_ENV;
+  if (net === Networks.CUSTOM || net === Networks.SANDBOX) {
+    net = Networks.TESTNET;
+  }
+
+  let baseUrl = trim(Links[dapp][net], '/');
+  if (baseUrl.length === 0 && Object.keys(fallback).includes(dapp)) {
+    baseUrl = trim(fallback[dapp as DApp.Explorer | DApp.Token] || '', '/');
+  }
+
+  const link = useCallback(
+    (url?: string) => `${baseUrl}/${trim(url, '/') || ''}`,
+    [baseUrl]
+  );
+  return link;
+};
+
+// Vega blog
+export const BLOG = 'https://blog.vega.xyz/';
+
+// Token pages
+export const TOKEN_NEW_MARKET_PROPOSAL = '/governance/propose/new-market';
+export const TOKEN_NEW_NETWORK_PARAM_PROPOSAL =
+  '/governance/propose/network-parameter';
+export const TOKEN_PROPOSALS = '/governance';
+export const TOKEN_PROPOSAL = '/governance/:id';