feat: add responsive menu

Author: therealemjy

apps/evm/src/App/Routes/index.tsx

@@ -199,8 +199,8 @@ const AppRoutes = () => {
         )}
 
         {/* Redirect to Core pool if no route matches */}
-        <Route index element={<Redirect to={Subdirectory.LANDING} />} />
-        <Route path="*" element={<Redirect to={Subdirectory.LANDING} />} />
+        <Route index element={<Redirect to={`/${Subdirectory.LANDING}`} />} />
+        <Route path="*" element={<Redirect to={`/${Subdirectory.LANDING}`} />} />
       </Route>
     </Routes>
   );

apps/evm/src/components/Dropdown/index.tsx

@@ -14,6 +14,7 @@ export const Dropdown = ({
   children,
   optionsDom,
   optionClassName,
+  menuClassName,
   onBlur,
   label,
   placeLabelToLeft = false,
@@ -37,24 +38,25 @@ export const Dropdown = ({
         )}
 
         <div className="relative w-full">
-          {/* MD and up menu */}
+          {/* MD and up backdrop */}
           {isDropdownOpened && (
             <div
-              className="fixed bottom-0 left-0 right-0 top-0 hidden md:block z-10"
+              className="fixed bottom-0 left-0 right-0 top-0 hidden md:block z-50"
               onClick={() => setIsDropdownOpened(false)}
             />
           )}
 
           {children({ isDropdownOpened, handleToggleDropdown })}
 
-          {/* XS to MD backdrop */}
+          {/* XS to MD menu */}
           {isDropdownOpened && (
-            <div className="relative z-10 hidden min-w-full md:block">
+            <div className="relative z-50 hidden min-w-full md:block">
               <div
                 className={cn(
                   'border-lightGrey bg-cards absolute top-2 min-w-full overflow-hidden border shadow',
                   menuPosition === 'right' && 'right-0',
                   variant === 'quaternary' ? 'rounded-xl' : 'rounded-lg',
+                  menuClassName,
                 )}
               >
                 {!!menuTitle && (

apps/evm/src/components/Dropdown/types.ts

@@ -21,4 +21,5 @@ export interface DropdownProps {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
   menuTitle?: string;
   menuPosition?: 'left' | 'right';
+  menuClassName?: string;
 }

apps/evm/src/components/Icon/icons/gearFull.tsx

@@ -0,0 +1,19 @@
+import type { SVGProps } from 'react';
+
+const SvgGearFull = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M8 5.21739C7.43486 5.21739 6.88241 5.38059 6.41252 5.68635C5.94262 5.9921 5.57638 6.42669 5.36012 6.93514C5.14385 7.4436 5.08726 8.00309 5.19751 8.54286C5.30777 9.08263 5.57991 9.57845 5.97952 9.9676C6.37913 10.3568 6.88827 10.6218 7.44255 10.7291C7.99683 10.8365 8.57136 10.7814 9.09348 10.5708C9.6156 10.3602 10.0619 10.0035 10.3758 9.54593C10.6898 9.08834 10.8574 8.55035 10.8574 8C10.8551 7.26268 10.5534 6.55619 10.018 6.03483C9.48261 5.51347 8.75713 5.21959 8 5.21739ZM14.1691 8C14.1676 8.26 14.148 8.51961 14.1105 8.77704L15.8496 10.103C15.9254 10.1639 15.9764 10.249 15.9936 10.3432C16.0108 10.4374 15.9931 10.5344 15.9435 10.617L14.2984 13.383C14.2484 13.4648 14.1703 13.5269 14.078 13.5583C13.9856 13.5896 13.8848 13.5883 13.7934 13.5544L11.7485 12.7544C11.3227 13.0737 10.8568 13.3387 10.362 13.543L10.0562 15.657C10.0391 15.7517 9.98879 15.8377 9.9138 15.9003C9.83882 15.9628 9.74386 15.9981 9.64514 16H6.35486C6.25794 15.9982 6.16452 15.9644 6.08985 15.9042C6.01519 15.844 5.96368 15.7609 5.94375 15.6685L5.63801 13.5544C5.14185 13.3526 4.67555 13.0872 4.25146 12.7652L2.20664 13.5652C2.11524 13.5991 2.01449 13.6005 1.92212 13.5692C1.82975 13.5379 1.75166 13.4759 1.7016 13.3941L0.0564545 10.6285C0.00693511 10.5459 -0.0108054 10.4488 0.00640307 10.3547C0.0236116 10.2605 0.0746478 10.1753 0.150391 10.1144L1.88947 8.78852C1.85238 8.5272 1.83281 8.2638 1.83089 8C1.83238 7.73999 1.85195 7.48039 1.88947 7.22296L0.150391 5.89704C0.0746478 5.83614 0.0236116 5.75099 0.00640307 5.65681C-0.0108054 5.56263 0.00693511 5.46557 0.0564545 5.38296L1.7016 2.61704C1.75161 2.53516 1.82967 2.47308 1.92204 2.44172C2.01442 2.41035 2.1152 2.41171 2.20664 2.44556L4.25146 3.24556C4.67725 2.92626 5.14321 2.66128 5.63801 2.45704L5.94375 0.342957C5.96086 0.248261 6.01121 0.16229 6.0862 0.0997371C6.16118 0.0371838 6.25614 0.00193 6.35486 0H9.64514C9.74206 0.00183705 9.83548 0.0356143 9.91014 0.0958179C9.98481 0.156021 10.0363 0.239095 10.0562 0.331478L10.362 2.44556C10.8588 2.64729 11.3257 2.91271 11.7503 3.23478L13.7934 2.43478C13.8848 2.4009 13.9855 2.39949 14.0779 2.43078C14.1703 2.46208 14.2483 2.52409 14.2984 2.60591L15.9435 5.37183C15.9931 5.45444 16.0108 5.5515 15.9936 5.64568C15.9764 5.73986 15.9254 5.82501 15.8496 5.88591L14.1105 7.21183C14.1476 7.47303 14.1672 7.73632 14.1691 8Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default SvgGearFull;

apps/evm/src/components/Icon/icons/index.ts

@@ -73,6 +73,7 @@ export { default as transactionCollateral } from './transactionCollateral';
 export { default as transactionLink } from './transactionLink';
 export { default as eMode } from './eMode';
 export { default as gear } from './gear';
+export { default as gearFull } from './gearFull';
 export { default as arrowRightFull } from './arrowRightFull';
 export { default as chevronDown } from './chevronDown';
 export { default as user } from './user';

apps/evm/src/components/Select/index.tsx

@@ -70,8 +70,8 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
         // primary
         default:
           return cn(
-            'border-lightGrey bg-cards hover:border-lightGrey hover:bg-lightGrey active:border-blue active:bg-lightGrey',
-            isDropdownOpened && 'border-blue bg-lightGrey hover:border-blue',
+            'border-dark-blue-disabled/50 bg-dark-blue hover:bg-dark-blue-hover active:bg-dark-blue-hover',
+            isDropdownOpened && 'bg-dark-blue-hover hover:border-blue',
           );
       }
     };
@@ -150,10 +150,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
             {!disabled && (
               <Icon
                 name="chevronDown"
-                className={cn(
-                  'text-grey ml-2 size-3 flex-none',
-                  isDropdownOpened && 'text-blue rotate-180',
-                )}
+                className={cn('text-grey ml-2 size-3 flex-none', isDropdownOpened && 'rotate-180')}
               />
             )}
           </Button>

apps/evm/src/containers/Layout/Header/usePathNodes/PoolName/index.tsx

@@ -1,17 +1,31 @@
 import { useGetPool } from 'clients/api';
 import PLACEHOLDER_KEY from 'constants/placeholderKey';
+import { useChain } from 'hooks/useChain';
+import { useTranslation } from 'libs/translations';
+import { areAddressesEqual } from 'utilities';
 import type { Address } from 'viem';
 
 export interface PoolNameProps {
   poolComptrollerAddress: Address;
 }
 
 const PoolName: React.FC<PoolNameProps> = ({ poolComptrollerAddress }) => {
+  const { t } = useTranslation();
+
+  const { corePoolComptrollerContractAddress } = useChain();
+  const isCorePool = areAddressesEqual(poolComptrollerAddress, corePoolComptrollerContractAddress);
+
   const { data: getPools } = useGetPool({
     poolComptrollerAddress,
   });
 
-  return <>{getPools?.pool?.name || PLACEHOLDER_KEY}</>;
+  let poolName = getPools?.pool?.name;
+
+  if (isCorePool) {
+    poolName = t('breadcrumbs.markets');
+  }
+
+  return <>{poolName || PLACEHOLDER_KEY}</>;
 };
 
 export default PoolName;

…tainers/Layout/BurnedWBnbButton/icon.svg …/Layout/NavBar/BurnedWBnbButton/icon.svgapps/evm/src/containers/Layout/BurnedWBnbButton/icon.svg renamed to apps/evm/src/containers/Layout/NavBar/BurnedWBnbButton/icon.svg apps/evm/src/containers/Layout/BurnedWBnbButton/icon.svg renamed to apps/evm/src/containers/Layout/NavBar/BurnedWBnbButton/icon.svg

@@ -1,4 +1,4 @@
-import { ButtonWrapper, cn } from '@venusprotocol/ui';
+import { cn } from '@venusprotocol/ui';
 import { Link } from 'containers/Link';
 
 import { useGetBurnedWBnb } from 'clients/api';
@@ -7,6 +7,7 @@ import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 import { useGetToken } from 'libs/tokens';
 import { useTranslation } from 'libs/translations';
 import { convertMantissaToTokens } from 'utilities';
+import { NavButtonWrapper } from '../NavButtonWrapper';
 import iconSrc from './icon.svg';
 
 export interface BurnedWBnbButtonProps {
@@ -36,20 +37,14 @@ export const BurnedWBnbButton: React.FC<BurnedWBnbButtonProps> = ({ className })
   });
 
   return (
-    <ButtonWrapper
-      className={cn(
-        'px-3 underline text-white font-normal bg-[#2A2529] border-[#2A2529] hover:bg-[#2A2529] hover:border-[#2A2529] active:bg-[#2A2529] active:border-[#2A2529]',
-        className,
-      )}
-      asChild
-    >
+    <NavButtonWrapper className={cn('flex items-center', className)} asChild>
       <Link href={BURNED_WBNB_SNAPSHOT_URL} target="_blank">
         <div className="flex justify-center gap-x-1">
           <img src={iconSrc} alt={t('burnedWBnbButton.iconAlt')} className="w-7" />
 
           {readableBurnedWBnb}
         </div>
       </Link>
-    </ButtonWrapper>
+    </NavButtonWrapper>
   );
 };