refactor: TokenAnnouncement component (#1717)

src/components/index.ts

@@ -46,6 +46,5 @@ export * from './TagGroup';
 export * from './SpendingLimit';
 export * from './Link';
 export * from './AuthModal';
-export * from './TokenAnnouncement';
 export * from './MarkdownEditor';
 export * from './MarkdownViewer';

src/containers/AssetAccessor/DisabledActionNotice/index.tsx

@@ -1,10 +1,9 @@
-/** @jsxImportSource @emotion/react */
-import { NoticeWarning, TokenAnnouncement } from 'components';
+import { NoticeWarning } from 'components';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'translation';
 import { Token, TokenAction } from 'types';
 
-import { useAuth } from 'context/AuthContext';
+import { TokenAnnouncement } from 'containers/TokenAnnouncement';
 
 export interface DisabledActionNoticeProps {
   token: Token;
@@ -13,7 +12,6 @@ export interface DisabledActionNoticeProps {
 
 const DisabledActionNotice: React.FC<DisabledActionNoticeProps> = ({ token, action }) => {
   const { t } = useTranslation();
-  const { chainId } = useAuth();
 
   const description: string | undefined = useMemo(() => {
     if (action === 'supply') {
@@ -35,7 +33,6 @@ const DisabledActionNotice: React.FC<DisabledActionNoticeProps> = ({ token, acti
 
   const tokenAnnouncementDom = TokenAnnouncement({
     token,
-    chainId,
   });
 
   return tokenAnnouncementDom || (!!description && <NoticeWarning description={description} />);

src/containers/AssetAccessor/index.spec.tsx

@@ -1,18 +1,17 @@
 import { waitFor } from '@testing-library/react';
-import { TokenAnnouncement } from 'components';
 import { isTokenActionEnabled } from 'packages/tokens';
-import React from 'react';
 import { Asset, Pool } from 'types';
 import Vi from 'vitest';
 
 import fakeAddress from '__mocks__/models/address';
 import { poolData } from '__mocks__/models/pools';
+import { TokenAnnouncement } from 'containers/TokenAnnouncement';
 import renderComponent from 'testUtils/renderComponent';
 import en from 'translation/translations/en.json';
 
 import AssetAccessor, { AssetAccessorProps } from '.';
 
-vi.mock('components/TokenAnnouncement');
+vi.mock('containers/TokenAnnouncement');
 
 const fakePool = poolData[0];
 const fakeAsset = fakePool.assets[0];

src/components/TokenAnnouncement/index.tsx → src/containers/TokenAnnouncement/index.tsx

@@ -1,33 +1,40 @@
-/** @jsxImportSource @emotion/react */
-import React from 'react';
 import { useTranslation } from 'translation';
-import { ChainId, Token } from 'types';
+import { Token } from 'types';
 import { areAddressesEqual } from 'utilities';
 
-import { Link } from '../Link';
-import { NoticeInfo, NoticeWarning } from '../Notice';
+import { Link } from '../../components/Link';
+import { NoticeInfo, NoticeWarning } from '../../components/Notice';
+import { useIsFeatureEnabled } from 'hooks/useIsFeatureEnabled';
 
 export interface TokenAnnouncementProps {
   token: Token;
-  chainId: ChainId;
   className?: string;
 }
 
-export const TokenAnnouncement: React.FC<TokenAnnouncementProps> = ({
-  token,
-  chainId,
-  className,
-}) => {
+export const TokenAnnouncement: React.FC<TokenAnnouncementProps> = ({ token, className }) => {
   const { Trans, t } = useTranslation();
 
+  const shouldDisplayTusdMigrationWarning = useIsFeatureEnabled({
+    name: 'tusdMigrationWarning',
+  });
+  const shouldDisplayTrxMigrationWarning = useIsFeatureEnabled({
+    name: 'trxMigrationWarning',
+  });
+  const shouldDisplaySxpDisablingWarning = useIsFeatureEnabled({
+    name: 'sxpDisablingWarning',
+  });
+  const shouldDisplayBethUpdateWarning = useIsFeatureEnabled({
+    name: 'bethUpdateWarning',
+  });
+
   // TUSD migration
   if (
-    chainId === ChainId.BSC_MAINNET &&
+    shouldDisplayTusdMigrationWarning &&
     areAddressesEqual(token.address, '0x14016e85a25aeb13065688cafb43044c2ef86784')
   ) {
     return (
       <NoticeInfo
-        css={className}
+        className={className}
         description={
           <Trans
             i18nKey="announcements.tusdMigration.description"
@@ -44,12 +51,12 @@ export const TokenAnnouncement: React.FC<TokenAnnouncementProps> = ({
 
   // TRX migration
   if (
-    chainId === ChainId.BSC_MAINNET &&
+    shouldDisplayTrxMigrationWarning &&
     areAddressesEqual(token.address, '0x85EAC5Ac2F758618dFa09bDbe0cf174e7d574D5B')
   ) {
     return (
       <NoticeWarning
-        css={className}
+        className={className}
         description={
           <Trans
             i18nKey="announcements.trxMigration.description"
@@ -66,22 +73,25 @@ export const TokenAnnouncement: React.FC<TokenAnnouncementProps> = ({
 
   // SXP disabling
   if (
-    chainId === ChainId.BSC_MAINNET &&
+    shouldDisplaySxpDisablingWarning &&
     areAddressesEqual(token.address, '0x47BEAd2563dCBf3bF2c9407fEa4dC236fAbA485A')
   ) {
     return (
-      <NoticeWarning css={className} description={t('announcements.sxpDisabling.description')} />
+      <NoticeWarning
+        className={className}
+        description={t('announcements.sxpDisabling.description')}
+      />
     );
   }
 
   // BETH update
   if (
-    chainId === ChainId.BSC_MAINNET &&
+    shouldDisplayBethUpdateWarning &&
     areAddressesEqual(token.address, '0x250632378E573c6Be1AC2f97Fcdf00515d0Aa91B')
   ) {
     return (
       <NoticeWarning
-        css={className}
+        className={className}
         description={
           <Trans
             i18nKey="announcements.bethUpdate.description"

src/hooks/useIsFeatureEnabled/index.tsx

@@ -5,6 +5,10 @@ import { useAuth } from 'context/AuthContext';
 const featureFlags = {
   integratedSwap: [ChainId.BSC_TESTNET, ChainId.BSC_MAINNET],
   prime: [ChainId.BSC_TESTNET],
+  tusdMigrationWarning: [ChainId.BSC_MAINNET],
+  trxMigrationWarning: [ChainId.BSC_MAINNET],
+  sxpDisablingWarning: [ChainId.BSC_MAINNET],
+  bethUpdateWarning: [ChainId.BSC_MAINNET],
 };
 
 export type FeatureFlag = keyof typeof featureFlags;