scam alert on token page

public/_locales/en/messages.json

@@ -2620,6 +2620,15 @@
   "readMore": {
     "message": "Read more by the "
   },
+  "deleteScamTokenConfirmTitle": {
+    "message": "Be cautious!"
+  },
+  "deleteScamTokenConfirmDescription": {
+    "message": "This token may be a scam. We strongly advise removing it from your token list to safeguard against the risk of losing funds."
+  },
+  "scamTokenAlert": {
+    "message": "This token may be a SCAM!"
+  },
   "deleteTokenConfirm": {
     "message": "Are you sure you want to delete this token?"
   },

src/app/pages/Home/Home.tsx

@@ -1,7 +1,10 @@
 import React, { memo, useLayoutEffect } from 'react';
 
+import { isDefined } from '@rnw-community/shared';
+
 import { useAppEnv } from 'app/env';
 import PageLayout from 'app/layouts/PageLayout';
+import { useMainnetTokensScamlistSelector } from 'app/store/assets/selectors';
 import { setAnotherSelector, setTestID } from 'lib/analytics';
 import { TEZ_TOKEN_SLUG } from 'lib/assets';
 import { useAssetMetadata, getAssetSymbol } from 'lib/metadata';
@@ -15,6 +18,7 @@ import { ActionButtonsBar } from './ActionButtonsBar';
 import { ContentSection } from './ContentSection';
 import EditableTitle from './OtherComponents/EditableTitle';
 import MainBanner from './OtherComponents/MainBanner';
+import { ScamTokenAlert } from './OtherComponents/ScamTokenAlert';
 import { TokenPageSelectors } from './OtherComponents/TokenPage.selectors';
 
 type Props = {
@@ -27,6 +31,9 @@ const Home = memo<Props>(({ assetSlug }) => {
   const { publicKeyHash } = useAccount();
   const { search } = useLocation();
 
+  const mainnetTokensScamSlugsRecord = useMainnetTokensScamlistSelector();
+  const showScamTokenAlert = isDefined(assetSlug) && mainnetTokensScamSlugsRecord[assetSlug];
+
   const assetMetadata = useAssetMetadata(assetSlug || TEZ_TOKEN_SLUG);
   const assetSymbol = getAssetSymbol(assetMetadata);
 
@@ -63,6 +70,8 @@ const Home = memo<Props>(({ assetSlug }) => {
         </div>
       )}
 
+      {showScamTokenAlert && <ScamTokenAlert />}
+
       <div className="flex flex-col items-center mb-6">
         <MainBanner accountPkh={publicKeyHash} assetSlug={assetSlug} />
 

src/app/pages/Home/OtherComponents/ScamTokenAlert.tsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react';
+
+import { T } from 'lib/i18n';
+import { AlertTriangleIcon } from 'lib/icons';
+export const ScamTokenAlert = memo(() => (
+  <div
+    className="w-full max-w-sm mx-auto py-3 px-4 rounded-md border border-red-700 mb-4 flex flex-row items-center"
+    style={{ backgroundColor: '#FFEFEF' }}
+  >
+    <AlertTriangleIcon width={16} height={16} stroke="#C53030" />
+    <p className="ml-2 text-red-700 font-normal text-xs">
+      <T id="scamTokenAlert" />
+    </p>
+  </div>
+));

src/app/pages/Home/OtherComponents/Tokens/components/TokenTag/ScamTag.tsx

@@ -1,18 +1,25 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useState } from 'react';
+
+import clsx from 'clsx';
 
 import { Button } from 'app/atoms/Button';
 import { AssetsSelectors } from 'app/pages/Home/OtherComponents/Assets.selectors';
 import { dispatch } from 'app/store';
 import { setTokenStatusAction } from 'app/store/assets/actions';
+import { SCAM_COLORS } from 'lib/assets/known-tokens';
 import { t, T } from 'lib/i18n';
 import { useAccount, useChainId } from 'lib/temple/front';
 import { useConfirm } from 'lib/ui/dialog';
 
+import modStyles from '../../Tokens.module.css';
+
 interface Props {
   assetSlug: string;
 }
 
 export const ScamTag = memo<Props>(({ assetSlug }) => {
+  const [hovered, setHovered] = useState(false);
+
   const chainId = useChainId(true)!;
   const { publicKeyHash } = useAccount();
 
@@ -22,7 +29,10 @@ export const ScamTag = memo<Props>(({ assetSlug }) => {
     async (slug: string) => {
       try {
         const confirmed = await confirm({
-          title: t('deleteTokenConfirm')
+          title: t('deleteScamTokenConfirmTitle'),
+          titleClassName: 'font-bold',
+          description: t('deleteScamTokenConfirmDescription'),
+          comfirmButtonText: t('delete')
         });
 
         if (confirmed)
@@ -49,8 +59,11 @@ export const ScamTag = memo<Props>(({ assetSlug }) => {
         e.stopPropagation();
         removeToken(assetSlug);
       }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
       testID={AssetsSelectors.assetItemScamButton}
-      className="ml-2 px-2 py-1"
+      className={clsx('uppercase ml-2 px-2 py-1', modStyles['apyTag'])}
+      style={{ backgroundColor: hovered ? SCAM_COLORS.bgHover : SCAM_COLORS.bg }}
     >
       <T id="scam" />
     </Button>

src/app/templates/ModalWithTitle.tsx

@@ -1,21 +1,31 @@
 import React, { FC, ReactNode } from 'react';
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 
 import CustomModal, { CustomModalProps } from 'app/atoms/CustomModal';
 import { useAppEnv } from 'app/env';
 
 export interface ModalWithTitleProps extends CustomModalProps {
   title?: ReactNode;
+  titleClassName?: string;
+  description?: ReactNode;
 }
 
-const ModalWithTitle: FC<ModalWithTitleProps> = ({ title, children, className, ...restProps }) => {
+const ModalWithTitle: FC<ModalWithTitleProps> = ({
+  title,
+  description,
+  children,
+  className,
+  titleClassName,
+  ...restProps
+}) => {
   const { popup } = useAppEnv();
 
   return (
-    <CustomModal {...restProps} className={classNames('w-full max-w-md pb-4 pt-5', popup ? 'px-4' : 'px-6', className)}>
+    <CustomModal {...restProps} className={clsx('w-full max-w-md pb-4 pt-5', popup ? 'px-4' : 'px-6', className)}>
       <>
-        {title ? <h1 className="mb-4 text-lg font-semibold text-gray-700">{title}</h1> : null}
+        {title ? <h1 className={clsx('mb-4 text-lg font-semibold text-gray-700', titleClassName)}>{title}</h1> : null}
+        {description ? <p className="mb-4 text-sm font-normal text-gray-600">{description}</p> : null}
 
         <div className="text-gray-600 text-sm">{children}</div>
       </>

src/lib/assets/known-tokens.ts

@@ -27,6 +27,8 @@ export namespace KNOWN_TOKENS_SLUGS {
 
 const YOUVES_COLORS = { bg: '#143A3A', bgHover: '#4F6B6B' };
 
+export const SCAM_COLORS = { bg: '#C53030', bgHover: '#D15A59' };
+
 export const TOKENS_BRAND_COLORS: Record<string, { bg: string; bgHover?: string }> = {
   [KNOWN_TOKENS_SLUGS.KUSD]: { bg: '#3EBD93', bgHover: '#65CAA9' },
   [KNOWN_TOKENS_SLUGS.TZBTC]: { bg: '#1373E4', bgHover: '#428FE9' },