diff --git a/apps/trading/components/navbar/navbar.tsx b/apps/trading/components/navbar/navbar.tsx index 3fb35c41f..ae375ca8e 100644 --- a/apps/trading/components/navbar/navbar.tsx +++ b/apps/trading/components/navbar/navbar.tsx @@ -49,7 +49,7 @@ export const Navbar = ({ children }: { children?: ReactNode }) => { ); return ( -
+
@@ -59,7 +59,7 @@ export const Navbar = ({ children }: { children?: ReactNode }) => {
@@ -388,7 +388,12 @@ const NavExternalLink = ({ }; const BurgerIcon = () => ( - + diff --git a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx b/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx index 312d03257..d560f827e 100644 --- a/apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx +++ b/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(null); - - const walletButton = ( - - ); - const onSelectItem = useCallback( - (pubkey: string) => { - setDrawerOpen(false); - selectPubKey(pubkey); - }, - [selectPubKey] - ); - return ( -
- -
-
- -
-
- {(pubKeys || []).map((pk) => ( - - ))} -
-
- - -
-
-
-
- ); -}; - export const VegaWalletConnectButton = () => { const [dropdownOpen, setDropdownOpen] = useState(false); const openVegaWalletDialog = useVegaWalletDialogStore( @@ -166,82 +43,72 @@ export const VegaWalletConnectButton = () => { if (isConnected && pubKeys) { return ( - <> -
- { + if (fetchPubKeys) { + fetchPubKeys(); + } + setDropdownOpen(!dropdownOpen); + }} + > + {activeKey && {activeKey.name}} + {': '} + {truncateByChars(pubKey)} + + } + > + setDropdownOpen(false)} + sideOffset={17} + side="bottom" + align="end" + onEscapeKeyDown={() => setDropdownOpen(false)} + > +
+ { + selectPubKey(value); + }} + > + {pubKeys.map((pk) => ( + + ))} + + + {!isReadOnly && ( + { - if (fetchPubKeys) { - fetchPubKeys(); - } - setDropdownOpen(!dropdownOpen); + setView({ type: ViewType.Transfer }); + setDropdownOpen(false); }} > - {activeKey && ( - {activeKey.name} - )} - {': '} - {truncateByChars(pubKey)} - - } - > - setDropdownOpen(false)} - sideOffset={17} - side="bottom" - align="end" - onEscapeKeyDown={() => setDropdownOpen(false)} - > -
- { - selectPubKey(value); - }} - > - {pubKeys.map((pk) => ( - - ))} - - - {!isReadOnly && ( - { - setView({ type: ViewType.Transfer }); - setDropdownOpen(false); - }} - > - {t('Transfer')} - - )} - - {t('Disconnect')} - -
-
- -
- - + {t('Transfer')} + + )} + + {t('Disconnect')} + +
+ + ); } return ( - <> - - - + ); }; @@ -274,42 +141,3 @@ const KeypairItem = ({ pk }: { pk: PubKey }) => { ); }; - -const KeypairListItem = ({ - pk, - isActive, - onSelectItem, -}: { - pk: PubKey; - isActive: boolean; - onSelectItem: (pk: string) => void; -}) => { - const [copied, setCopied] = useCopyTimeout(); - - return ( -
- - - {isActive && } - - - {truncateByChars(pk.publicKey)}{' '} - setCopied(true)}> - - - {copied && {t('Copied')}} - -
- ); -}; diff --git a/apps/trading/components/vega-wallet/vega-wallet-menu.tsx b/apps/trading/components/vega-wallet/vega-wallet-menu.tsx index 7e66710f6..9d15b1e6e 100644 --- a/apps/trading/components/vega-wallet/vega-wallet-menu.tsx +++ b/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')} @@ -54,7 +57,6 @@ export const VegaWalletMenu = ({ await disconnect(); setMenu(null); }} - fill > {t('Disconnect')} diff --git a/libs/ui-toolkit/src/components/trading-button/trading-button.tsx b/libs/ui-toolkit/src/components/trading-button/trading-button.tsx index 65c4f0ca8..28ea66cc5 100644 --- a/libs/ui-toolkit/src/components/trading-button/trading-button.tsx +++ b/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;