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 <[email protected]>
DistributedCollective · Dec 20, 2024 · 881d416 · 881d416
1 parent e018fa3
commit 881d416
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 83 deletions.
diff --git a/.changeset/silly-ligers-shop.md 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
@@ -101,11 +101,9 @@ export const Header: FC = () => {
         }
         extraContent={
           <div className="flex lg:space-x-4 items-center flex-wrap lg:flex-nowrap flex-col-reverse lg:flex-row lg:justify-start">
-            {account && (
-              <div className="w-full lg:w-auto mt-2 lg:mt-0">
-                <BridgeMenuItem dataAttribute="dapp-header-bridges" />
-              </div>
-            )}
+            <div className="w-full lg:w-auto mt-2 lg:mt-0">
+              <BridgeMenuItem dataAttribute="dapp-header-bridges" />
+            </div>
           </div>
         }
       />

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
@@ -4,14 +4,15 @@ 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';
 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<BridgeMenuItemProps> = ({ 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<BridgeMenuItemProps> = ({ dataAttribute }) => {
   }, [chainId]);
 
   return (
-    <NavDropdown
-      text={t('header.nav.bridges.title')}
-      className={classNames(
-        'text-gray-30 font-normal text-sm hover:bg-gray-70 hover:text-gray-10 min-w-auto w-full lg:w-auto rounded bg-gray-70 border-gray-50',
-      )}
-      closeOnClick={!isMobile}
-      dataAttribute={dataAttribute}
+    <Tooltip
+      disabled={!!account}
+      content={<span>{t('header.nav.bridges.connectWallet')}</span>}
     >
-      <Menu className="rounded-t-none rounded-b px-2 py-3 lg:rounded lg:p-1">
-        {isRskChain(chainId) && (
-          <MenuItem
-            key={t('header.nav.bridges.subMenu.ethBridge')}
-            text={t('header.nav.bridges.subMenu.ethBridge')}
-            label={
-              !isMobile && t('header.nav.bridges.subMenu.ethBridgeDescription')
-            }
-            dataAttribute={`dapp-menu-ethBridge`}
-            className={classNames('no-underline', {
-              hidden: isRskChain(chainId),
-            })}
-            onClick={handleEthClicked}
-          />
-        )}
-        <MenuItem
-          key={t('header.nav.bridges.subMenu.btcBridge')}
-          text={t('header.nav.bridges.subMenu.btcBridge')}
-          label={
-            !isMobile && isRskChain(chainId)
-              ? t('header.nav.bridges.subMenu.btcBridgeDescription')
-              : t('header.nav.bridges.subMenu.ethBridgeDescription')
-          }
-          dataAttribute={`dapp-menu-btcBridge`}
-          className={classNames('no-underline', {
-            hidden: !isRskChain(chainId),
-          })}
-          onClick={handleBtcClicked}
-        />
-        <MenuItem
-          key={t('header.nav.bridges.subMenu.runeBridge')}
-          text={t('header.nav.bridges.subMenu.runeBridge')}
-          label={
-            !isMobile && t('header.nav.bridges.subMenu.runeBridgeDescription')
-          }
-          dataAttribute={`dapp-menu-runeBridge`}
-          className="no-underline"
-          onClick={handleRunesClick}
-        />
-        <MenuItem
-          key={t('header.nav.bridges.subMenu.tokenBridge')}
-          text={t('header.nav.bridges.subMenu.tokenBridge')}
-          label={
-            !isMobile && t('header.nav.bridges.subMenu.tokenBridgeDescription')
-          }
-          dataAttribute={`dapp-menu-tokenBridge`}
-          className={classNames('no-underline', {
-            hidden: !isRskChain(chainId),
-          })}
-          onClick={handleStablecoinsClick}
-        />
-        <MenuItem
-          key={t('header.nav.bridges.subMenu.ercBridge')}
-          text={t('header.nav.bridges.subMenu.ercBridge')}
-          label={
-            !isMobile && t('header.nav.bridges.subMenu.ercBridgeDescription')
-          }
-          dataAttribute={`dapp-menu-ercBridge`}
-          className={classNames('no-underline', {
-            hidden: isRskChain(chainId),
-          })}
-          onClick={handleErcClick}
-        />
-      </Menu>
-    </NavDropdown>
+      <div>
+        <NavDropdown
+          text={t('header.nav.bridges.title')}
+          className={classNames(
+            'text-gray-30 font-normal text-sm min-w-auto w-full lg:w-auto rounded bg-gray-70 border-gray-50',
+            {
+              'opacity-30': !account,
+              'hover:bg-gray-70 hover:text-gray-10': !!account,
+            },
+          )}
+          disabled={!account}
+          closeOnClick={!isMobile}
+          dataAttribute={dataAttribute}
+        >
+          <Menu className="rounded-t-none rounded-b px-2 py-3 lg:rounded lg:p-1">
+            <MenuItem
+              key={t('header.nav.bridges.subMenu.ethBridge')}
+              text={t('header.nav.bridges.subMenu.ethBridge')}
+              label={
+                !isMobile &&
+                t('header.nav.bridges.subMenu.ethBridgeDescription')
+              }
+              dataAttribute={`dapp-menu-ethBridge`}
+              className={classNames('no-underline', {
+                hidden: isRskChain(chainId) || isBobChain(chainId),
+              })}
+              onClick={handleEthClicked}
+            />
+            <MenuItem
+              key={t('header.nav.bridges.subMenu.btcBridge')}
+              text={t('header.nav.bridges.subMenu.btcBridge')}
+              label={
+                !isMobile &&
+                t('header.nav.bridges.subMenu.btcBridgeDescription')
+              }
+              dataAttribute={`dapp-menu-btcBridge`}
+              className={classNames('no-underline', {
+                hidden: !isRskChain(chainId),
+              })}
+              onClick={handleBtcClicked}
+            />
+            <MenuItem
+              key={t('header.nav.bridges.subMenu.runeBridge')}
+              text={t('header.nav.bridges.subMenu.runeBridge')}
+              label={
+                !isMobile &&
+                t('header.nav.bridges.subMenu.runeBridgeDescription')
+              }
+              dataAttribute={`dapp-menu-runeBridge`}
+              className="no-underline"
+              onClick={handleRunesClick}
+            />
+            <MenuItem
+              key={t('header.nav.bridges.subMenu.tokenBridge')}
+              text={t('header.nav.bridges.subMenu.tokenBridge')}
+              label={
+                !isMobile &&
+                t('header.nav.bridges.subMenu.tokenBridgeDescription')
+              }
+              dataAttribute={`dapp-menu-tokenBridge`}
+              className={classNames('no-underline', {
+                hidden: !isRskChain(chainId),
+              })}
+              onClick={handleStablecoinsClick}
+            />
+            <MenuItem
+              key={t('header.nav.bridges.subMenu.ercBridge')}
+              text={t('header.nav.bridges.subMenu.ercBridge')}
+              label={
+                !isMobile &&
+                t('header.nav.bridges.subMenu.ercBridgeDescription')
+              }
+              dataAttribute={`dapp-menu-ercBridge`}
+              className={classNames('no-underline', {
+                hidden: isRskChain(chainId),
+              })}
+              onClick={handleErcClick}
+            />
+          </Menu>
+        </NavDropdown>
+      </div>
+    </Tooltip>
   );
 };
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
@@ -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
@@ -42,6 +42,7 @@ export type DropdownProps = {
   dropdownClassName?: string;
   closeOnClick?: boolean;
   active?: boolean;
+  disabled?: boolean;
 };
 
 export const NavDropdown = forwardRef<HTMLButtonElement, DropdownProps>(
@@ -58,6 +59,7 @@ export const NavDropdown = forwardRef<HTMLButtonElement, DropdownProps>(
       dropdownClassName,
       closeOnClick,
       active,
+      disabled,
     },
     ref,
   ) => {
@@ -75,8 +77,8 @@ export const NavDropdown = forwardRef<HTMLButtonElement, DropdownProps>(
     );
 
     const onButtonClick = useCallback(
-      () => setOpen(prevValue => !prevValue),
-      [setOpen],
+      () => !disabled && setOpen(prevValue => !prevValue),
+      [setOpen, disabled],
     );
 
     const getCoords = useCallback(() => {
@@ -112,8 +114,9 @@ export const NavDropdown = forwardRef<HTMLButtonElement, DropdownProps>(
         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
@@ -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",