Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SOV-4514: Changes for "Transfer Assets" Button #1062

Merged
merged 5 commits into from
Dec 20, 2024
Merged

SOV-4514: Changes for "Transfer Assets" Button #1062

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
273e12d
feat: update transfer asset button
Rickk137 Dec 10, 2024
385b2e0
Create silly-ligers-shop.md
rick23p Dec 10, 2024
ddf21aa
feat: update bride menu
rick23p Dec 11, 2024
4ebc215
fix: remove bridge menu mobile description
rick23p Dec 11, 2024
f8c065f
Hide un-used bridge menu.
rick23p Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/silly-ligers-shop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"frontend": patch
---

SOV-4514: Changes for "Transfer Assets" Button
8 changes: 3 additions & 5 deletions apps/frontend/src/app/3_organisms/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
/>
Expand Down
164 changes: 91 additions & 73 deletions apps/frontend/src/app/3_organisms/Header/components/BridgeMenuItem/BridgeMenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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(
Expand Down Expand Up @@ -88,78 +90,94 @@ 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">
{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>
</Tooltip>
);
};
7 changes: 6 additions & 1 deletion apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

Expand All @@ -16,6 +17,10 @@
&.large {
@apply h-10 px-2.5;
}

&.disabled {
@apply cursor-not-allowed;
}
}

.dropdown {
Expand Down
9 changes: 6 additions & 3 deletions apps/frontend/src/app/3_organisms/Header/components/NavItem/NavDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export type DropdownProps = {
dropdownClassName?: string;
closeOnClick?: boolean;
active?: boolean;
disabled?: boolean;
};

export const NavDropdown = forwardRef<HTMLButtonElement, DropdownProps>(
Expand All @@ -58,6 +59,7 @@ export const NavDropdown = forwardRef<HTMLButtonElement, DropdownProps>(
dropdownClassName,
closeOnClick,
active,
disabled,
},
ref,
) => {
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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(() => {
Expand Down
3 changes: 2 additions & 1 deletion apps/frontend/src/locales/en/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@
"runes": "Runes",
"spicePoints": "Spice Points",
"bridges": {
"title": "Transfer Assets",
"title": "Bridges",
"connectWallet": "Connect the wallet to use the bridges.",
"subMenu": {
"runeBridge": "Runes",
"runeBridgeDescription": "Transfer between Bitcoin and Sovryn",
Expand Down
Loading