From 276d1d7c7b3537002048fa32ca3d98bead0036d7 Mon Sep 17 00:00:00 2001
From: Art <artur@vegaprotocol.io>
Date: Tue, 8 Aug 2023 09:50:19 +0200
Subject: [PATCH] feat(governance): view as button (#4501)

---
 .../vega-wallet-dialogs.tsx                   |  8 +++++-
 .../vega-wallet/download-wallet-prompt.tsx    | 17 -------------
 .../vega-wallet/vega-wallet-prompt.tsx        | 25 +++++++++++++++++++
 .../components/vega-wallet/vega-wallet.tsx    |  4 +--
 .../governance/src/i18n/translations/dev.json |  3 ++-
 .../src/components/button/button.tsx          | 11 +++-----
 6 files changed, 40 insertions(+), 28 deletions(-)
 delete mode 100644 apps/governance/src/components/vega-wallet/download-wallet-prompt.tsx
 create mode 100644 apps/governance/src/components/vega-wallet/vega-wallet-prompt.tsx

diff --git a/apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx b/apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx
index b9e100831..f93a8d6ce 100644
--- a/apps/governance/src/components/vega-wallet-dialogs/vega-wallet-dialogs.tsx
+++ b/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} />
     </>
   );
 };
diff --git a/apps/governance/src/components/vega-wallet/download-wallet-prompt.tsx b/apps/governance/src/components/vega-wallet/download-wallet-prompt.tsx
deleted file mode 100644
index 8f6cb5c47..000000000
--- a/apps/governance/src/components/vega-wallet/download-wallet-prompt.tsx
+++ /dev/null
@@ -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>
-    </>
-  );
-};
diff --git a/apps/governance/src/components/vega-wallet/vega-wallet-prompt.tsx b/apps/governance/src/components/vega-wallet/vega-wallet-prompt.tsx
new file mode 100644
index 000000000..c0de8471e
--- /dev/null
+++ b/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>
+    </>
+  );
+};
diff --git a/apps/governance/src/components/vega-wallet/vega-wallet.tsx b/apps/governance/src/components/vega-wallet/vega-wallet.tsx
index f39057696..b03e37409 100644
--- a/apps/governance/src/components/vega-wallet/vega-wallet.tsx
+++ b/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 />
     </>
   );
 };
diff --git a/apps/governance/src/i18n/translations/dev.json b/apps/governance/src/i18n/translations/dev.json
index 26568ff83..62f3a1911 100644
--- a/apps/governance/src/i18n/translations/dev.json
+++ b/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"
 }
diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx
index ebc865cd4..180dee0d1 100644
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/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} />;
   }
 );