feat: use trading button tidy mobile buttons

apps/trading/components/navbar/navbar.tsx

@@ -49,7 +49,7 @@ export const Navbar = ({ children }: { children?: ReactNode }) => {
   );
   return (
     <N.Root className="text-vega-clight-200 dark:text-vega-cdark-200 ">
-      <div className="flex items-center gap-2 h-10 px-3 lg:pl-5 pr-2 border-b border-default bg-vega-clight-800 dark:bg-vega-cdark-800">
+      <div className="flex items-center gap-2 h-10 pl-3 pr-1 border-b border-default bg-vega-clight-800 dark:bg-vega-cdark-800">
         <div className="pr-2">
           <VLogo className="w-4 text-default" />
         </div>
@@ -59,7 +59,7 @@ export const Navbar = ({ children }: { children?: ReactNode }) => {
         </div>
         <div className="ml-auto flex justify-end items-center gap-2">
           <button
-            className="lg:hidden flex items-center p-1 rounded hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500"
+            className="w-8 h-8 lg:hidden flex items-center p-1 rounded hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500"
             onClick={() => {
               if (isConnected) {
                 setMenu((x) => (x === 'wallet' ? null : 'wallet'));
@@ -68,10 +68,10 @@ export const Navbar = ({ children }: { children?: ReactNode }) => {
               }
             }}
           >
-            <WalletIcon />
+            <WalletIcon className="w-6" />
           </button>
           <button
-            className="lg:hidden flex itesm-center p-1 rounded hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500"
+            className="w-8 h-8 lg:hidden flex items-center p-1 rounded hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500"
             onClick={() => {
               setMenu((x) => (x === 'nav' ? null : 'nav'));
             }}
@@ -96,7 +96,7 @@ export const Navbar = ({ children }: { children?: ReactNode }) => {
             <div className="flex justify-end items-center h-10 p-1">
               <button
                 onClick={() => setMenu(null)}
-                className="flex flex-col justify-center p-2 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500 rounded"
+                className="w-8 h-8 flex flex-col justify-center p-1 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500 rounded"
               >
                 <VegaIcon name={VegaIconNames.CROSS} size={24} />
               </button>
@@ -388,7 +388,12 @@ const NavExternalLink = ({
 };
 
 const BurgerIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" className="stroke-current">
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 16 16"
+    className="w-full stroke-current"
+  >
     <line x1={0.5} x2={15.5} y1={3.5} y2={3.5} />
     <line x1={0.5} x2={15.5} y1={11.5} y2={11.5} />
   </svg>

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -1,10 +1,8 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import classNames from 'classnames';
 import { truncateByChars } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
-  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -12,138 +10,17 @@ import {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-  Drawer,
   DropdownMenuSeparator,
   VegaIcon,
   VegaIconNames,
+  TradingButton as Button,
+  Intent,
 } from '@vegaprotocol/ui-toolkit';
 import type { PubKey } from '@vegaprotocol/wallet';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { WalletIcon } from '../icons/wallet';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import { ViewType, useSidebar } from '../sidebar';
 
-const MobileWalletButton = ({
-  isConnected,
-  activeKey,
-}: {
-  isConnected?: boolean;
-  activeKey?: PubKey;
-}) => {
-  const { pubKeys, selectPubKey, disconnect, fetchPubKeys } = useVegaWallet();
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-  const setView = useSidebar((store) => store.setView);
-  const { VEGA_ENV } = useEnvironment();
-  const isYellow = VEGA_ENV === Networks.TESTNET;
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const mobileDisconnect = useCallback(() => {
-    setDrawerOpen(false);
-    disconnect();
-  }, [disconnect]);
-  const openDrawer = useCallback(() => {
-    if (!isConnected) {
-      openVegaWalletDialog();
-      setDrawerOpen(false);
-    } else {
-      if (fetchPubKeys) {
-        fetchPubKeys();
-      }
-      setDrawerOpen(!drawerOpen);
-    }
-  }, [drawerOpen, fetchPubKeys, isConnected, openVegaWalletDialog]);
-
-  const iconClass = drawerOpen
-    ? 'hidden'
-    : isYellow
-    ? 'fill-black'
-    : 'fill-white';
-  const [container, setContainer] = useState<HTMLElement | null>(null);
-
-  const walletButton = (
-    <button
-      className="my-2 transition-all flex flex-col justify-around gap-3 p-2 relative h-[34px]"
-      onClick={openDrawer}
-      data-testid="connect-vega-wallet-mobile"
-    >
-      <WalletIcon className={iconClass} />
-    </button>
-  );
-  const onSelectItem = useCallback(
-    (pubkey: string) => {
-      setDrawerOpen(false);
-      selectPubKey(pubkey);
-    },
-    [selectPubKey]
-  );
-  return (
-    <div className="lg:hidden overflow-hidden flex" ref={setContainer}>
-      <Drawer
-        dataTestId="wallets-drawer"
-        open={drawerOpen}
-        onChange={setDrawerOpen}
-        container={container}
-        trigger={walletButton}
-      >
-        <div className="border-l border-default p-2 gap-4 flex flex-col w-full h-full bg-white dark:bg-black dark:text-white justify-between">
-          <div className="flex h-5 justify-end">
-            <button
-              className="transition-all flex flex-col justify-around gap-3 p-2 relative h-[34px]"
-              onClick={() => setDrawerOpen(false)}
-              data-testid="connect-vega-wallet-mobile-close"
-            >
-              <>
-                <div
-                  className={classNames(
-                    'w-[26px] h-[2px] bg-black dark:bg-white transition-all translate-y-[7.5px] rotate-45',
-                    {
-                      hidden: !drawerOpen,
-                    }
-                  )}
-                />
-                <div
-                  className={classNames(
-                    'w-[26px] h-[2px] bg-black dark:bg-white transition-all -translate-y-[7.5px] -rotate-45',
-                    {
-                      hidden: !drawerOpen,
-                    }
-                  )}
-                />
-              </>
-            </button>
-          </div>
-          <div className="grow my-4" role="list">
-            {(pubKeys || []).map((pk) => (
-              <KeypairListItem
-                key={pk.publicKey}
-                pk={pk}
-                isActive={activeKey?.publicKey === pk.publicKey}
-                onSelectItem={onSelectItem}
-              />
-            ))}
-          </div>
-          <div className="flex flex-col gap-2 m-4">
-            <Button
-              onClick={() => {
-                setDrawerOpen(false);
-                setView({ type: ViewType.Transfer });
-              }}
-              fill
-            >
-              {t('Transfer')}
-            </Button>
-            <Button onClick={mobileDisconnect} fill>
-              {t('Disconnect')}
-            </Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  );
-};
-
 export const VegaWalletConnectButton = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const openVegaWalletDialog = useVegaWalletDialogStore(
@@ -166,82 +43,72 @@ export const VegaWalletConnectButton = () => {
 
   if (isConnected && pubKeys) {
     return (
-      <>
-        <div className="hidden lg:block">
-          <DropdownMenu
-            open={dropdownOpen}
-            trigger={
-              <DropdownMenuTrigger
-                data-testid="manage-vega-wallet"
+      <DropdownMenu
+        open={dropdownOpen}
+        trigger={
+          <DropdownMenuTrigger
+            data-testid="manage-vega-wallet"
+            onClick={() => {
+              if (fetchPubKeys) {
+                fetchPubKeys();
+              }
+              setDropdownOpen(!dropdownOpen);
+            }}
+          >
+            {activeKey && <span className="uppercase">{activeKey.name}</span>}
+            {': '}
+            {truncateByChars(pubKey)}
+          </DropdownMenuTrigger>
+        }
+      >
+        <DropdownMenuContent
+          onInteractOutside={() => setDropdownOpen(false)}
+          sideOffset={17}
+          side="bottom"
+          align="end"
+          onEscapeKeyDown={() => setDropdownOpen(false)}
+        >
+          <div className="min-w-[340px]" data-testid="keypair-list">
+            <DropdownMenuRadioGroup
+              value={pubKey}
+              onValueChange={(value) => {
+                selectPubKey(value);
+              }}
+            >
+              {pubKeys.map((pk) => (
+                <KeypairItem key={pk.publicKey} pk={pk} />
+              ))}
+            </DropdownMenuRadioGroup>
+            <DropdownMenuSeparator />
+            {!isReadOnly && (
+              <DropdownMenuItem
+                data-testid="wallet-transfer"
                 onClick={() => {
-                  if (fetchPubKeys) {
-                    fetchPubKeys();
-                  }
-                  setDropdownOpen(!dropdownOpen);
+                  setView({ type: ViewType.Transfer });
+                  setDropdownOpen(false);
                 }}
               >
-                {activeKey && (
-                  <span className="uppercase">{activeKey.name}</span>
-                )}
-                {': '}
-                {truncateByChars(pubKey)}
-              </DropdownMenuTrigger>
-            }
-          >
-            <DropdownMenuContent
-              onInteractOutside={() => setDropdownOpen(false)}
-              sideOffset={17}
-              side="bottom"
-              align="end"
-              onEscapeKeyDown={() => setDropdownOpen(false)}
-            >
-              <div className="min-w-[340px]" data-testid="keypair-list">
-                <DropdownMenuRadioGroup
-                  value={pubKey}
-                  onValueChange={(value) => {
-                    selectPubKey(value);
-                  }}
-                >
-                  {pubKeys.map((pk) => (
-                    <KeypairItem key={pk.publicKey} pk={pk} />
-                  ))}
-                </DropdownMenuRadioGroup>
-                <DropdownMenuSeparator />
-                {!isReadOnly && (
-                  <DropdownMenuItem
-                    data-testid="wallet-transfer"
-                    onClick={() => {
-                      setView({ type: ViewType.Transfer });
-                      setDropdownOpen(false);
-                    }}
-                  >
-                    {t('Transfer')}
-                  </DropdownMenuItem>
-                )}
-                <DropdownMenuItem data-testid="disconnect" onClick={disconnect}>
-                  {t('Disconnect')}
-                </DropdownMenuItem>
-              </div>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-        <MobileWalletButton isConnected activeKey={activeKey} />
-      </>
+                {t('Transfer')}
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem data-testid="disconnect" onClick={disconnect}>
+              {t('Disconnect')}
+            </DropdownMenuItem>
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
     );
   }
 
   return (
-    <>
-      <Button
-        data-testid="connect-vega-wallet"
-        onClick={openVegaWalletDialog}
-        size="sm"
-        className="hidden lg:block"
-      >
-        <span className="whitespace-nowrap">{t('Connect Vega wallet')}</span>
-      </Button>
-      <MobileWalletButton />
-    </>
+    <Button
+      data-testid="connect-vega-wallet"
+      onClick={openVegaWalletDialog}
+      size="small"
+      intent={Intent.None}
+    >
+      <span className="whitespace-nowrap">{t('Connect Vega wallet')}</span>
+    </Button>
   );
 };
 
@@ -274,42 +141,3 @@ const KeypairItem = ({ pk }: { pk: PubKey }) => {
     </DropdownMenuRadioItem>
   );
 };
-
-const KeypairListItem = ({
-  pk,
-  isActive,
-  onSelectItem,
-}: {
-  pk: PubKey;
-  isActive: boolean;
-  onSelectItem: (pk: string) => void;
-}) => {
-  const [copied, setCopied] = useCopyTimeout();
-
-  return (
-    <div
-      className="flex flex-col w-full ml-4 mr-2 mb-4"
-      data-testid={`key-${pk.publicKey}-mobile`}
-    >
-      <span className="flex gap-2 items-center mr-2">
-        <button onClick={() => onSelectItem(pk.publicKey)}>
-          <span className="uppercase">{pk.name}</span>
-        </button>
-        {isActive && <VegaIcon name={VegaIconNames.TICK} />}
-      </span>
-      <span className="flex gap-2 items-center">
-        {truncateByChars(pk.publicKey)}{' '}
-        <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
-          <button
-            data-testid="copy-vega-public-key"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <span className="sr-only">{t('Copy')}</span>
-            <VegaIcon name={VegaIconNames.COPY} />
-          </button>
-        </CopyToClipboard>
-        {copied && <span className="text-xs">{t('Copied')}</span>}
-      </span>
-    </div>
-  );
-};

apps/trading/components/vega-wallet/vega-wallet-menu.tsx

@@ -1,6 +1,10 @@
 import { t } from '@vegaprotocol/i18n';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
-import { Button, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingButton as Button,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { truncateByChars } from '@vegaprotocol/utils';
 import { useVegaWallet, type PubKey } from '@vegaprotocol/wallet';
 import { useCallback, useMemo } from 'react';
@@ -45,7 +49,6 @@ export const VegaWalletMenu = ({
             setView({ type: ViewType.Transfer });
             setMenu(null);
           }}
-          fill
         >
           {t('Transfer')}
         </Button>
@@ -54,7 +57,6 @@ export const VegaWalletMenu = ({
             await disconnect();
             setMenu(null);
           }}
-          fill
         >
           {t('Disconnect')}
         </Button>

libs/ui-toolkit/src/components/trading-button/trading-button.tsx

@@ -8,7 +8,7 @@ import type {
 import { Intent } from '../../utils/intent';
 
 type TradingButtonProps = {
-  size: 'large' | 'medium' | 'small';
+  size?: 'large' | 'medium' | 'small';
   intent?: Intent;
   children?: ReactNode;
   icon?: ReactNode;