feat(governance): view as button (#4501)

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"
 }

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} />;
   }
 );