diff --git a/frontend/public/history-icon.svg b/frontend/public/history-icon.svg new file mode 100644 index 000000000..0b6341805 --- /dev/null +++ b/frontend/public/history-icon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/frontend/public/menu-icon-filled.svg b/frontend/public/menu-icon-filled.svg new file mode 100644 index 000000000..e6b1e8e46 --- /dev/null +++ b/frontend/public/menu-icon-filled.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index a4dc15b6d..8bf74dc51 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -307,6 +307,21 @@ @apply flex; } + .more-options-menu { + @apply rounded-2xl; + background: #0e0b26; + backdrop-filter: blur(10px); + box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4); + } + + .more-options-menu-item { + @apply px-4 text-[14px] font-medium leading-normal cursor-pointer flex items-center; + } + + .more-options-menu-item:hover { + background: #221f38; + } + /* Side ads styles */ .ad-close { @apply absolute right-3 top-1 cursor-pointer rounded-full bg-[#ffffff1a]; diff --git a/frontend/src/components/MoreOptions.tsx b/frontend/src/components/MoreOptions.tsx new file mode 100644 index 000000000..0dc23baf7 --- /dev/null +++ b/frontend/src/components/MoreOptions.tsx @@ -0,0 +1,127 @@ +import React, { useEffect, useRef, useState } from 'react'; +import Image from 'next/image'; +import { SIDENAV_MENU_ITEMS } from '@/utils/constants'; +import Link from 'next/link'; +import { useAppSelector } from '@/custom-hooks/StateHooks'; +import { tabLink } from '@/utils/util'; +import { Tooltip } from '@mui/material'; + +const MoreOptions = () => { + const [optionsOpen, setOptionsOpen] = useState(false); + const menuRef = useRef(null); + const menuRef2 = useRef(null); + const isAuthzMode = useAppSelector((state) => state.authz.authzModeEnabled); + const selectedNetwork = useAppSelector( + (state) => state.common.selectedNetwork.chainName + ); + + useEffect(() => { + const handleOutsideClick = (event: MouseEvent) => { + if ( + menuRef.current && + !menuRef.current.contains(event.target as Node) && + menuRef2.current && + !menuRef2.current.contains(event.target as Node) + ) { + setOptionsOpen(false); + } + }; + + document.addEventListener('mousedown', handleOutsideClick); + + return () => { + document.removeEventListener('mousedown', handleOutsideClick); + }; + }, []); + + return ( +
+
setOptionsOpen(true)} + onMouseLeave={() => setOptionsOpen(false)} + title="Advanced" + className="relative" + > + setOptionsOpen((prev) => !prev)} + src="/menu-icon-filled.svg" + height={30} + width={30} + alt={'Advanced'} + /> +
+ {optionsOpen && ( +
setOptionsOpen(true)} + onMouseLeave={() => setOptionsOpen(false)} + > +
+ {SIDENAV_MENU_ITEMS.moreOptions.map((option) => { + const isMetamaskSupported = () => + option.isMetaMaskSupports || + localStorage.getItem('WALLET_NAME') !== 'metamask'; + const authzSupport = !isAuthzMode || option.authzSupported; + return ( + + +
+
+ {option.name} +
+
{option.name}
+
+ + + ); + })} +
+
+ )} +
+ ); +}; + +export default MoreOptions; diff --git a/frontend/src/components/SideBar.tsx b/frontend/src/components/SideBar.tsx index bf939a40a..74fc8a0ab 100644 --- a/frontend/src/components/SideBar.tsx +++ b/frontend/src/components/SideBar.tsx @@ -21,8 +21,12 @@ import { } from '@/utils/constants'; // import useInitAuthz from '@/custom-hooks/useInitAuthz'; // import useInitFeegrant from '@/custom-hooks/useInitFeegrant'; -import { getAllTokensPrice, setAllNetworksInfo } from '@/store/features/common/commonSlice'; +import { + getAllTokensPrice, + setAllNetworksInfo, +} from '@/store/features/common/commonSlice'; import IBCSwapTxStatus from './IBCSwapTxStatus'; +import MoreOptions from './MoreOptions'; const SideBar = ({ children }: { children: React.ReactNode }) => { const pathName = usePathname(); @@ -36,17 +40,18 @@ const SideBar = ({ children }: { children: React.ReactNode }) => { dispatch(setAllNetworksInfo()); dispatch(getAllTokensPrice()); }, []); + return (
-
+
Resolute
- {SIDENAV_MENU_ITEMS.map((item) => ( + {SIDENAV_MENU_ITEMS.defaultOptions.map((item) => ( { metamaskSupport={item.isMetaMaskSupports} /> ))} +
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts index de04668c8..1a5880d5a 100644 --- a/frontend/src/utils/constants.ts +++ b/frontend/src/utils/constants.ts @@ -119,80 +119,92 @@ export const txBroadcastTimeoutMs = 60_000; export const txBroadcastPollIntervalMs = 3_000; export const TRACK_IBC_TX_TIME_INTERVAL = 15000; -export const SIDENAV_MENU_ITEMS = [ - { - name: 'Overview', - icon: '/overview-icon.svg', - activeIcon: '/overview-icon-active.svg', - link: '/', - authzSupported: true, - isMetaMaskSupports: true, - }, - { - name: 'Transfers', - icon: '/transfers-icon.svg', - activeIcon: '/transfers-icon-active.svg', - link: '/transfers', - authzSupported: true, - isMetaMaskSupports: true, - }, - { - name: 'Governance', - icon: '/gov-icon.svg', - activeIcon: '/gov-icon-active.svg', - link: '/governance', - authzSupported: true, - isMetaMaskSupports: true, - }, - { - name: 'Staking', - icon: '/staking-icon.svg', - activeIcon: '/staking-icon-active.svg', - link: '/staking', - authzSupported: true, - isMetaMaskSupports: true, - }, - { - name: 'Authz', - icon: '/authz-icon.svg', - activeIcon: '/authz-icon-active.svg', - link: '/authz', - authzSupported: false, - isMetaMaskSupports: false, - }, - { - name: 'Multisig', - icon: '/multisig-icon.svg', - activeIcon: '/multisig-icon-active.svg', - link: '/multisig', - authzSupported: false, - isMetaMaskSupports: false, - }, - { - name: 'Feegrant', - icon: '/feegrant-icon.svg', - activeIcon: '/feegrant-icon-active.svg', - link: '/feegrant', - authzSupported: false, - isMetaMaskSupports: false, - }, - { - name: 'Multiops', - icon: '/multiops-icon.svg', - activeIcon: '/multiops-icon-active.svg', - link: '/multiops', - authzSupported: false, - isMetaMaskSupports: false, - }, - { - name: 'CosmWasm Contracts', - icon: '/cosmwasm-icon.svg', - activeIcon: '/cosmwasm-icon-active.svg', - link: '/cosmwasm', - authzSupported: false, - isMetaMaskSupports: false, - }, -]; +export const SIDENAV_MENU_ITEMS = { + defaultOptions: [ + { + name: 'Overview', + icon: '/overview-icon.svg', + activeIcon: '/overview-icon-active.svg', + link: '/', + authzSupported: true, + isMetaMaskSupports: true, + }, + { + name: 'Transfers', + icon: '/transfers-icon.svg', + activeIcon: '/transfers-icon-active.svg', + link: '/transfers', + authzSupported: true, + isMetaMaskSupports: true, + }, + { + name: 'Governance', + icon: '/gov-icon.svg', + activeIcon: '/gov-icon-active.svg', + link: '/governance', + authzSupported: true, + isMetaMaskSupports: true, + }, + { + name: 'Staking', + icon: '/staking-icon.svg', + activeIcon: '/staking-icon-active.svg', + link: '/staking', + authzSupported: true, + isMetaMaskSupports: true, + }, + { + name: 'Authz', + icon: '/authz-icon.svg', + activeIcon: '/authz-icon-active.svg', + link: '/authz', + authzSupported: false, + isMetaMaskSupports: false, + }, + { + name: 'Multisig', + icon: '/multisig-icon.svg', + activeIcon: '/multisig-icon-active.svg', + link: '/multisig', + authzSupported: false, + isMetaMaskSupports: false, + }, + { + name: 'Feegrant', + icon: '/feegrant-icon.svg', + activeIcon: '/feegrant-icon-active.svg', + link: '/feegrant', + authzSupported: false, + isMetaMaskSupports: false, + }, + ], + moreOptions: [ + { + name: 'Multiops', + icon: '/multiops-icon.svg', + activeIcon: '/multiops-icon-active.svg', + link: '/multiops', + authzSupported: false, + isMetaMaskSupports: false, + }, + { + name: 'CosmWasm', + icon: '/cosmwasm-icon.svg', + activeIcon: '/cosmwasm-icon-active.svg', + link: '/cosmwasm', + authzSupported: false, + isMetaMaskSupports: false, + }, + { + name: 'History', + icon: '/history-icon.svg', + activeIcon: '/history-icon.svg', + link: '/history', + authzSupported: true, + isMetaMaskSupports: true, + }, + ], +}; export const ALL_NETWORKS_ICON = '/all-networks-icon.png'; export const CHANGE_NETWORK_ICON = '/switch-icon.svg'; export const TXN_SUCCESS_ICON = '/transaction-success-icon.svg';