feat(trading): improve connect wallet description (#4726)

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

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

@@ -12,10 +12,7 @@ import { useVegaWallet } from '../use-vega-wallet';
 
 export const ConnectDialogTitle = ({ children }: { children: ReactNode }) => {
   return (
-    <h1
+    <h1 data-testid="wallet-dialog-title" className="mb-6 text-2xl font-alpha">
-      data-testid="wallet-dialog-title"
-      className="mb-6 text-2xl uppercase font-alpha calt"
-    >
       {children}
     </h1>
   );

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

@@ -111,7 +111,7 @@ describe('VegaConnectDialog', () => {
     rerender(generateJSX());
     const list = await screen.findByTestId('connectors-list');
     expect(list).toBeInTheDocument();
-    expect(list.children).toHaveLength(3);
+    expect(list.children).toHaveLength(2);
     expect(screen.getByTestId('connector-jsonRpc')).toHaveTextContent(
       'Use the Desktop App/CLI'
     );
@@ -122,7 +122,7 @@ describe('VegaConnectDialog', () => {
     mockBrowserWallet();
     render(generateJSX());
     const list = await screen.findByTestId('connectors-list');
-    expect(list.children).toHaveLength(3);
+    expect(list.children).toHaveLength(2);
     expect(screen.getByTestId('connector-injected')).toHaveTextContent(
       'Connect'
     );

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

@@ -224,28 +224,66 @@ const ConnectorList = ({
       />
     </>
   );
+  const isItChrome = window.navigator.userAgent.includes('Chrome');
+  const isItMozilla =
+    window.navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+  const browserName = isItChrome
+    ? 'Chrome'
+    : isItMozilla
+    ? 'Firefox'
+    : 'your browser';
 
   return (
     <>
       <ConnectDialogTitle>{title}</ConnectDialogTitle>
-      <p>
+      <p className="text-md">
         {t(
           'Connect securely, deposit funds and approve or reject transactions with the Vega wallet'
         )}
       </p>
-      <div data-testid="connectors-list" className="flex flex-col mt-6 gap-2">
+      <div data-testid="connectors-list" className="flex flex-col mt-4 gap-4">
-        <div className="last:mb-0">
+        <div>
           {isBrowserWalletInstalled() ? (
-            <ConnectionOption
+            <ConnectionOptionWithDescription
               type="injected"
               text={extendedText}
               onClick={() => onSelect('injected')}
+              title={
+                <>
+                  <span>{t('Vega Wallet')}</span>
+                  {'  '}
+                  <span className="text-xs">{t('full featured')}</span>
+                </>
+              }
+              description={t(
+                `Connect Vega Wallet extension
+              for %s to access all features including key
+              management and detailed transaction views from your
+              browser.`,
+                [browserName]
+              )}
             />
           ) : (
+            <div className="py-2">
+              <h1 className="px-2 text-lg">
+                <span>{t('Vega Wallet')}</span>
+                {'  '}
+                <span className="text-xs"> {t('full featured')}</span>
+              </h1>
+              <p className="p-2 text-sm">
+                {t(
+                  `Install Vega Wallet extension
+              for %s to access all features including key
+              management and detailed transaction views from your
+              browser.`,
+                  [browserName]
+                )}
+              </p>
               <GetWalletButton
                 chromeExtensionUrl={links.chromeExtensionUrl}
                 mozillaExtensionUrl={links.mozillaExtensionUrl}
               />
+            </div>
           )}
         </div>
         {connectors['snap'] !== undefined ? (
@@ -269,9 +307,19 @@ const ConnectorList = ({
               />
             ) : (
               <>
-                <ConnectionOption
+                <ConnectionOptionWithDescription
                   type="snap"
                   disabled={snapStatus === SnapStatus.NOT_SUPPORTED}
+                  title={
+                    <>
+                      <span>{t('Metamask Snap')}</span>
+                      {'  '}
+                      <span className="text-xs"> {t('quick start')}</span>
+                    </>
+                  }
+                  description={t(
+                    `Connect directly via Metamask with the Vega Snap for single key support without advanced features.`
+                  )}
                   text={
                     <>
                       <div className="flex items-center justify-center w-full h-full text-base gap-1">
@@ -287,7 +335,7 @@ const ConnectorList = ({
                   }}
                 />
                 {snapStatus === SnapStatus.NOT_SUPPORTED ? (
-                  <p className="pt-2 text-sm text-default">
+                  <p className="pt-1 text-xs leading-tight text-default">
                     {t('No MetaMask version that supports snaps detected.')}{' '}
                     {t('Learn more about')}{' '}
                     <ExternalLink href="https://metamask.io/snaps/">
@@ -300,14 +348,14 @@ const ConnectorList = ({
           </div>
         ) : null}
         <div>
+          <h1 className="my-1 text-md">{t('Advanced / Other options...')}</h1>
           <ConnectionOption
             type="view"
             text={t('View as party')}
             onClick={() => onSelect('view')}
             disabled={Boolean(pubKey)}
           />
-        </div>
+          <div className="mt-2">
-        <div className="last:mb-0">
             <CustomUrlInput
               walletUrl={walletUrl}
               setWalletUrl={setWalletUrl}
@@ -316,6 +364,7 @@ const ConnectorList = ({
             />
           </div>
         </div>
+      </div>
     </>
   );
 };
@@ -451,6 +500,38 @@ export const GetWalletButton = ({
   );
 };
 
+const ConnectionOptionWithDescription = ({
+  disabled,
+  type,
+  text,
+  onClick,
+  icon,
+  description,
+  title,
+}: {
+  type: WalletType;
+  text: string | ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+  icon?: ReactNode;
+  description?: string | ReactNode;
+  title?: string | ReactNode;
+}) => {
+  return (
+    <div>
+      <h1 className="text-md">{title}</h1>
+      <p className="pb-2 text-sm text-gray-60 text-muted">{description}</p>
+      <ConnectionOption
+        disabled={disabled}
+        type={type}
+        text={text}
+        onClick={onClick}
+        icon={icon}
+      />
+    </div>
+  );
+};
+
 const ConnectionOption = ({
   disabled,
   type,
@@ -531,7 +612,7 @@ const CustomUrlInput = ({
         onClick={() => onSelect('jsonRpc')}
       />
       {isDesktopWalletRunning !== null && (
-        <p className="pt-2 mb-6 text-sm">
+        <p className="pt-1 mb-2 text-sm leading-tight">
           {isDesktopWalletRunning ? (
             <button
               className="underline text-default"
@@ -543,13 +624,13 @@ const CustomUrlInput = ({
             </button>
           ) : (
             <>
-              <span className="text-default">
+              <span className="text-xs">
                 {t(
                   'No running Desktop App/CLI detected. Open your app now to connect or enter a'
                 )}
               </span>{' '}
               <button
-                className="underline"
+                className="text-xs underline"
                 onClick={() => setUrlInputExpanded(true)}
                 disabled={Boolean(pubKey)}
               >