From 58ef07adaff2f720e4f0e17ed5627501bdbace68 Mon Sep 17 00:00:00 2001
From: Edd <edd@vega.xyz>
Date: Mon, 26 Feb 2024 15:57:25 +0000
Subject: [PATCH] feat(explorer): intro on treasury page now has links

---
 .../links/governance-link/governance-link.tsx  | 18 ++++++++++++++++++
 .../app/routes/treasury/network-treasury.tsx   | 14 ++++++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 apps/explorer/src/app/components/links/governance-link/governance-link.tsx

diff --git a/apps/explorer/src/app/components/links/governance-link/governance-link.tsx b/apps/explorer/src/app/components/links/governance-link/governance-link.tsx
new file mode 100644
index 000000000..5a4f37c71
--- /dev/null
+++ b/apps/explorer/src/app/components/links/governance-link/governance-link.tsx
@@ -0,0 +1,18 @@
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { ENV } from '../../../config/env';
+import { t } from '@vegaprotocol/i18n';
+
+export type GovernanceLinkProps = {
+  text?: string;
+};
+
+/**
+ * Just a link to the governance page, with optional text
+ */
+const GovernanceLink = ({ text = t('Goveranance') }: GovernanceLinkProps) => {
+  const base = ENV.dataSources.governanceUrl;
+
+  return <ExternalLink href={base}>{text}</ExternalLink>;
+};
+
+export default GovernanceLink;
diff --git a/apps/explorer/src/app/routes/treasury/network-treasury.tsx b/apps/explorer/src/app/routes/treasury/network-treasury.tsx
index 807fdcfdf..ddbd64f27 100644
--- a/apps/explorer/src/app/routes/treasury/network-treasury.tsx
+++ b/apps/explorer/src/app/routes/treasury/network-treasury.tsx
@@ -4,6 +4,7 @@ import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../components/route-title';
 import { NetworkAccountsTable } from './components/network-accounts-table';
 import { NetworkTransfersTable } from './components/network-transfers-table';
+import GovernanceLink from '../../components/links/governance-link/governance-link';
 
 export type NonZeroAccount = {
   assetId: string;
@@ -16,7 +17,7 @@ export const NetworkTreasury = () => {
   return (
     <section>
       <RouteTitle data-testid="block-header">{t(`Treasury`)}</RouteTitle>
-      <details className="w-3/5 cursor-pointer shadow-lg p-5 dark:border-l-2 dark:border-vega-green">
+      <details className="w-full md:w-3/5 cursor-pointer shadow-lg p-5 dark:border-l-2 dark:border-vega-green">
         <summary>{t('About the Network Treasury')}</summary>
         <section className="mt-4 b-1 border-grey">
           <p className="mb-2">
@@ -27,9 +28,14 @@ export const NetworkTreasury = () => {
           </p>
           <p className="mb-2">
             Funds in the network treasury can be used by creating governance
-            initiated transfers via community governance. These transfers can be
-            initiated by anyone and be used to fund reward pools, or can be used
-            to fund other activities the CAF is exploring.
+            initiated transfers via{' '}
+            <GovernanceLink text={t('community governance')} />. These transfers
+            can be initiated by anyone and be used to fund reward pools, or can
+            be used to fund other activities the{' '}
+            <abbr className="decoration-dotted" title="Community Adoption Fund">
+              CAF
+            </abbr>{' '}
+            is exploring.
           </p>
           <p>
             This page shows details of the balances in the treasury, pending