Merge branch 'main' into fix/ignore-sunset-filter

Author: cuzz-venus

apps/evm/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @venusprotocol/evm
 
+## 4.28.0
+
+### Minor Changes
+
+- 06a2283: feat: sunset of chain Unichain, opBNB, and Optimism
+
 ## 4.27.0
 
 ### Minor Changes

apps/evm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@venusprotocol/evm",
-  "version": "4.27.0",
+  "version": "4.28.0",
   "private": true,
   "scripts": {
     "start": "vite",

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

@@ -92,4 +92,5 @@ export { default as ceefu } from './ceefu';
 export { default as pendle } from './pendle';
 export { default as stats } from './stats';
 export { default as diagramArrowDown } from './diagramArrowDown';
+export { default as sunset } from './sunset';
 export { default as fullScreen } from './fullScreen';

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

@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react';
+
+const SvgSunset = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <rect
+      x="11"
+      y="15"
+      width="2"
+      height="2"
+      rx="1"
+      transform="rotate(-180 11 15)"
+      fill="currentColor"
+    />
+    <rect x="9" y="7" width="2" height="5" rx="1" fill="currentColor" />
+    <path
+      d="M8.26795 4C9.03775 2.66667 10.9623 2.66667 11.7321 4L17.7942 14.5C18.564 15.8333 17.6018 17.5 16.0622 17.5H3.93782C2.39822 17.5 1.43597 15.8333 2.20577 14.5L8.26795 4Z"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+  </svg>
+);
+
+export default SvgSunset;

apps/evm/src/constants/sunsetChains/index.ts

@@ -0,0 +1,10 @@
+import { ChainId } from '@venusprotocol/chains';
+
+export const SUNSET_CHAIN_IDS: ChainId[] = [
+  ChainId.OPBNB_MAINNET,
+  ChainId.OPBNB_TESTNET,
+  ChainId.OPTIMISM_MAINNET,
+  ChainId.OPTIMISM_SEPOLIA,
+  ChainId.UNICHAIN_MAINNET,
+  ChainId.UNICHAIN_SEPOLIA,
+];

apps/evm/src/containers/AdBanner/Banner/index.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@venusprotocol/ui';
 
 import { ButtonWrapper } from 'components';
-import { Link } from 'containers/Link';
+import { Link, type LinkProps } from 'containers/Link';
 import { useBreakpointUp } from 'hooks/responsive';
 import { useTranslation } from 'libs/translations';
 
@@ -10,6 +10,7 @@ export interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   description: React.ReactNode;
   illustration: React.ReactNode;
   learnMoreUrl: string;
+  learnMoreLinkProps?: Partial<LinkProps>;
   learnMoreLabel?: string;
   backgroundIllustration?: React.ReactNode;
   contentContainerClassName?: string;
@@ -19,6 +20,7 @@ export const Banner: React.FC<BannerProps> = ({
   className,
   contentContainerClassName,
   learnMoreUrl,
+  learnMoreLinkProps,
   learnMoreLabel,
   title,
   description,
@@ -35,6 +37,11 @@ export const Banner: React.FC<BannerProps> = ({
     </div>
   );
 
+  const isInternalLink = learnMoreUrl.startsWith('/');
+  const linkProps = isInternalLink
+    ? { to: learnMoreUrl, ...learnMoreLinkProps }
+    : { href: learnMoreUrl, target: '_blank' as const, ...learnMoreLinkProps };
+
   return (
     <div
       className={cn(
@@ -53,11 +60,7 @@ export const Banner: React.FC<BannerProps> = ({
           </div>
 
           <ButtonWrapper size={isSmOrUp ? 'md' : 'xs'} className="px-5 md:px-6" asChild>
-            <Link
-              href={learnMoreUrl}
-              target="_blank"
-              className="hover:no-underline active:no-underline text-white"
-            >
+            <Link {...linkProps} className="hover:no-underline active:no-underline text-white">
               {learnMoreLabel ?? t('adBanner.startNow')}
             </Link>
           </ButtonWrapper>

apps/evm/src/containers/AdBanner/IsolatedPoolsSunsetBanner/index.tsx

@@ -1,26 +1,24 @@
+import { useGetPools } from 'clients/api';
+import config from 'config';
+import { routes } from 'constants/routing';
 import { useTranslation } from 'libs/translations';
+import { ChainId } from 'types';
 import { Banner } from '../Banner';
 import illustration from './illustration.png';
 
-const LEARN_MORE_URL = 'https://community.venus.io/t/isolated-pools-sunset/5603';
-
 export const IsolatedPoolsSunsetBanner: React.FC = () => {
-  const { t, Trans } = useTranslation();
+  const { t } = useTranslation();
+  const { data: getPoolsData } = useGetPools();
+
+  const hasIsolatedPools = (getPoolsData?.pools.length ?? 0) > 1;
+  const FALLBACK_CHAIN_ID =
+    config.network === 'testnet' ? ChainId.BSC_TESTNET : ChainId.BSC_MAINNET;
 
   return (
     <Banner
       className="bg-gradient-to-r from-[#01193A] to-[#0D3CB1]"
       title={<span className="text-white">{t('isolatedPoolsSunsetBanner.title')}</span>}
-      description={
-        <span className="text-grey">
-          <Trans
-            i18nKey="isolatedPoolsSunsetBanner.description"
-            components={{
-              White: <span className="text-white" />,
-            }}
-          />
-        </span>
-      }
+      description={<span className="text-grey">{t('isolatedPoolsSunsetBanner.description')}</span>}
       illustration={
         <div className="h-10 w-20 sm:h-12 sm:w-[90px] lg:h-14">
           <img
@@ -31,7 +29,8 @@ export const IsolatedPoolsSunsetBanner: React.FC = () => {
         </div>
       }
       contentContainerClassName="gap-x-1"
-      learnMoreUrl={LEARN_MORE_URL}
+      learnMoreUrl={routes.isolatedPools.path}
+      learnMoreLinkProps={hasIsolatedPools ? undefined : { chainId: FALLBACK_CHAIN_ID }}
     />
   );
 };

apps/evm/src/containers/Layout/NavBar/ChainSelect/SunsetIndicator/SunsetModal.tsx

@@ -0,0 +1,15 @@
+import { Modal } from 'components';
+import { useTranslation } from 'libs/translations';
+import { useSunsetModalStore } from '../sunsetModalStore';
+
+export const SunsetModal: React.FC = () => {
+  const { t } = useTranslation();
+  const isOpen = useSunsetModalStore(state => state.isOpen);
+  const close = useSunsetModalStore(state => state.close);
+
+  return (
+    <Modal isOpen={isOpen} handleClose={close} title={t('layout.sunsetModal.title')}>
+      <p className="text-grey text-p2r">{t('layout.sunsetModal.description')}</p>
+    </Modal>
+  );
+};

apps/evm/src/containers/Layout/NavBar/ChainSelect/SunsetIndicator/index.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@venusprotocol/ui';
+import { Icon } from 'components';
+import { useSunsetModalStore } from '../sunsetModalStore';
+
+export { SunsetModal } from './SunsetModal';
+
+export interface SunsetIndicatorProps {
+  interactive?: boolean;
+  className?: string;
+}
+
+export const SunsetIndicator: React.FC<SunsetIndicatorProps> = ({
+  interactive = true,
+  className,
+}) => {
+  const open = useSunsetModalStore(state => state.open);
+
+  const handleClick = (e: React.MouseEvent) => {
+    if (!interactive) return;
+    e.preventDefault();
+    e.stopPropagation();
+    open();
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!interactive) return;
+    e.stopPropagation();
+  };
+
+  return (
+    <span
+      onClick={handleClick}
+      onMouseDown={handleMouseDown}
+      className={cn(
+        'flex flex-none items-center justify-center',
+        interactive && 'cursor-pointer',
+        className,
+      )}
+    >
+      <Icon name="sunset" className="size-5 text-orange" />
+    </span>
+  );
+};

apps/evm/src/containers/Layout/NavBar/ChainSelect/index.tsx

@@ -5,7 +5,10 @@ import config from 'config';
 import { useTranslation } from 'libs/translations';
 import { chains, useChainId, useSwitchChain } from 'libs/wallet';
 import type { ChainId } from 'types';
+import { isSunsetChain } from 'utilities/isSunsetChain';
 import { GaslessStatus } from './GaslessStatus';
+import { SunsetIndicator, SunsetModal } from './SunsetIndicator';
+import { useSunsetModalStore } from './sunsetModalStore';
 
 export interface ChainSelectProps
   extends Omit<SelectProps, 'value' | 'onChange' | 'options' | 'optionClassName'> {
@@ -16,37 +19,56 @@ export const ChainSelect: React.FC<ChainSelectProps> = props => {
   const { t } = useTranslation();
   const { chainId } = useChainId();
   const { switchChain } = useSwitchChain();
+  const openSunsetModal = useSunsetModalStore(state => state.open);
+
+  const handleChange = (newChainId: ChainId | string | number) => {
+    const id = Number(newChainId) as ChainId;
+    if (isSunsetChain(id) && id !== chainId) {
+      openSunsetModal();
+    }
+    switchChain({ chainId: id });
+  };
 
   const options = chains.map<SelectOption<ChainId>>(chain => ({
     label: ({ isRenderedInButton }) => {
-      const metadata = chainMetadata[chain.id as ChainId];
+      const optionChainId = chain.id as ChainId;
+      const metadata = chainMetadata[optionChainId];
+      const showSunsetIndicator = isSunsetChain(optionChainId);
+      const isActiveChain = optionChainId === chainId;
+
       return (
         <div className="flex items-center">
           <img src={metadata.iconSrc} alt={metadata.name} className="w-6 max-w-none flex-none" />
 
           {!isRenderedInButton && (
-            <span className={cn('flex ml-2 grow items-center gap-x-1')}>
+            <span className={cn('flex ml-2 items-center gap-x-1')}>
               <span>{metadata.name}</span>
 
-              <GaslessStatus chainId={chain.id} displayLabel />
+              <GaslessStatus chainId={optionChainId} displayLabel />
             </span>
           )}
+
+          {showSunsetIndicator && <SunsetIndicator className="ml-2" interactive={!isActiveChain} />}
         </div>
       );
     },
     value: chain.id,
   }));
 
   return (
-    <Select
-      // When running in Safe Wallet app, it is responsible for the active chain
-      disabled={config.isSafeApp}
-      value={chainId}
-      onChange={newChainId => switchChain({ chainId: Number(newChainId) })}
-      options={options}
-      menuPosition="right"
-      menuTitle={t('layout.chainSelect.label')}
-      {...props}
-    />
+    <>
+      <Select
+        // When running in Safe Wallet app, it is responsible for the active chain
+        disabled={config.isSafeApp}
+        value={chainId}
+        onChange={handleChange}
+        options={options}
+        menuPosition="right"
+        menuTitle={t('layout.chainSelect.label')}
+        {...props}
+      />
+
+      <SunsetModal />
+    </>
   );
 };