From 881d4164fd3894c5bd96b8587bfa01d9e69ba247 Mon Sep 17 00:00:00 2001 From: Rick <81699526+rick23p@users.noreply.github.com> Date: Fri, 20 Dec 2024 14:39:23 +0330 Subject: [PATCH] SOV-4514: Changes for "Transfer Assets" Button (#1062) * feat: update transfer asset button * Create silly-ligers-shop.md * feat: update bride menu * fix: remove bridge menu mobile description * Hide un-used bridge menu. --------- Co-authored-by: Peiman --- .changeset/silly-ligers-shop.md | 5 + .../src/app/3_organisms/Header/Header.tsx | 8 +- .../BridgeMenuItem/BridgeMenuItem.tsx | 161 ++++++++++-------- .../components/NavItem/NavDropdown.module.css | 7 +- .../Header/components/NavItem/NavDropdown.tsx | 9 +- .../frontend/src/locales/en/translations.json | 3 +- 6 files changed, 110 insertions(+), 83 deletions(-) create mode 100644 .changeset/silly-ligers-shop.md diff --git a/.changeset/silly-ligers-shop.md b/.changeset/silly-ligers-shop.md new file mode 100644 index 000000000..390f8bdcf --- /dev/null +++ b/.changeset/silly-ligers-shop.md @@ -0,0 +1,5 @@ +--- +"frontend": patch +--- + +SOV-4514: Changes for "Transfer Assets" Button diff --git a/apps/frontend/src/app/3_organisms/Header/Header.tsx b/apps/frontend/src/app/3_organisms/Header/Header.tsx index 507b592f5..3116c1e19 100644 --- a/apps/frontend/src/app/3_organisms/Header/Header.tsx +++ b/apps/frontend/src/app/3_organisms/Header/Header.tsx @@ -101,11 +101,9 @@ export const Header: FC = () => { } extraContent={
- {account && ( -
- -
- )} +
+ +
} /> diff --git a/apps/frontend/src/app/3_organisms/Header/components/BridgeMenuItem/BridgeMenuItem.tsx b/apps/frontend/src/app/3_organisms/Header/components/BridgeMenuItem/BridgeMenuItem.tsx index aaac2c506..7b554790f 100644 --- a/apps/frontend/src/app/3_organisms/Header/components/BridgeMenuItem/BridgeMenuItem.tsx +++ b/apps/frontend/src/app/3_organisms/Header/components/BridgeMenuItem/BridgeMenuItem.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { t } from 'i18next'; import { ChainIds } from '@sovryn/ethers-provider'; -import { Menu, MenuItem } from '@sovryn/ui'; +import { Menu, MenuItem, Tooltip } from '@sovryn/ui'; import { RSK_FAUCET } from '../../../../../constants/general'; import { BOB } from '../../../../../constants/infrastructure/bob'; @@ -12,6 +12,7 @@ import { BABELFISH_APP_LINK, SEPOLIA_FAUCET_LINK, } from '../../../../../constants/links'; +import { useWalletConnect } from '../../../../../hooks'; import { useAssetBalance } from '../../../../../hooks/useAssetBalance'; import { useCurrentChain } from '../../../../../hooks/useChainStore'; import { useIsMobile } from '../../../../../hooks/useIsMobile'; @@ -36,6 +37,7 @@ export const BridgeMenuItem: FC = ({ dataAttribute }) => { isRskChain(chainId) ? COMMON_SYMBOLS.BTC : COMMON_SYMBOLS.ETH, chainId, ); + const { account } = useWalletConnect(); const hasRbtcBalance = useMemo(() => Number(balance) !== 0, [balance]); const enableFastBtc = useMemo( @@ -88,78 +90,91 @@ export const BridgeMenuItem: FC = ({ dataAttribute }) => { }, [chainId]); return ( - {t('header.nav.bridges.connectWallet')}} > - - {isRskChain(chainId) && ( - - )} - - - - - - +
+ + + + + + + + + +
+ ); }; diff --git a/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.module.css b/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.module.css index 751e4fd8a..5b42e5bea 100644 --- a/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.module.css +++ b/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.module.css @@ -1,7 +1,8 @@ .button[type='button'] { @apply flex items-center bg-gray-60 border-gray-60 justify-between relative h-full min-w-20 whitespace-nowrap font-body text-gray-10 text-xs font-semibold leading-none cursor-pointer select-none transition-colors border rounded; - &.isOpen, &.isActive { + &.isOpen, + &.isActive { @apply bg-gray-80 border-gray-80; } @@ -16,6 +17,10 @@ &.large { @apply h-10 px-2.5; } + + &.disabled { + @apply cursor-not-allowed; + } } .dropdown { diff --git a/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.tsx b/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.tsx index e285d75d9..6fecbef26 100644 --- a/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.tsx +++ b/apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.tsx @@ -42,6 +42,7 @@ export type DropdownProps = { dropdownClassName?: string; closeOnClick?: boolean; active?: boolean; + disabled?: boolean; }; export const NavDropdown = forwardRef( @@ -58,6 +59,7 @@ export const NavDropdown = forwardRef( dropdownClassName, closeOnClick, active, + disabled, }, ref, ) => { @@ -75,8 +77,8 @@ export const NavDropdown = forwardRef( ); const onButtonClick = useCallback( - () => setOpen(prevValue => !prevValue), - [setOpen], + () => !disabled && setOpen(prevValue => !prevValue), + [setOpen, disabled], ); const getCoords = useCallback(() => { @@ -112,8 +114,9 @@ export const NavDropdown = forwardRef( classNames(styles.button, styles[size], className, { [styles.isOpen]: isOpen, [styles.isActive]: isAccordionActive, + [styles.disabled]: disabled, }), - [size, className, isOpen, isAccordionActive], + [size, className, isOpen, isAccordionActive, disabled], ); const useClickedOutside = useCallback(() => { diff --git a/apps/frontend/src/locales/en/translations.json b/apps/frontend/src/locales/en/translations.json index e9ae07c16..7efbd536d 100644 --- a/apps/frontend/src/locales/en/translations.json +++ b/apps/frontend/src/locales/en/translations.json @@ -115,7 +115,8 @@ "runes": "Runes", "spicePoints": "Spice Points", "bridges": { - "title": "Transfer Assets", + "title": "Bridges", + "connectWallet": "Connect a wallet to use the bridges.", "subMenu": { "runeBridge": "Runes", "runeBridgeDescription": "Transfer between Bitcoin and Sovryn",